Mixins / foldkit-mixins-ui

Patterns

namespace · packages/mixins-ui/src/patterns.ts:13

export * as Patterns from './patterns.js'

An accessibility pattern per adapted widget with an ARIA contract: the slots a widget of that kind must publish, with the capability, events and attributes each must expose, as A11y.pattern contracts. Timing and positioning behaviors without an ARIA contract of their own (Anchor, HoverIntent) get none — they borrow their content's. catalog lists the patterns with their tier, the ARIA roles involved, and the platform floor: what the widget relies on the browser for, so a reader or an agent can ask. The gate test validates every adapter's Slots against its pattern; a custom view built from foldkit-primitives/interaction entries validates against the same one.

In the guides

Members

Patterns.Accordion

const · packages/mixins-ui/src/patterns.ts:134

const Accordion: A11y.Pattern<{
  readonly trigger: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
  readonly panel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

const · packages/mixins-ui/src/patterns.ts:268

const Banner: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
  }
  readonly action: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly optional: true
  }
  readonly dismiss: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
    readonly optional: true
  }
}>

Patterns.Button

const · packages/mixins-ui/src/patterns.ts:74

const Button: A11y.Pattern<{
  readonly button: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

Patterns.Calendar

const · packages/mixins-ui/src/patterns.ts:398

const Calendar: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly grid: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly previousMonthButton: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
  }
  readonly nextMonthButton: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
  }
}>

const · packages/mixins-ui/src/patterns.ts:324

const Carousel: A11y.Pattern<{ readonly root: { readonly capability: Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>; readonly attributes: readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">]; }; readonly slide: { readonly capability: Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>; readonly attributes: readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">]; }; readonly previous: { readonly capability: Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>; readonly events: readonly [Event.EventToken<"click">]; readonly attributes: readonly [Attr.AttrToken<"aria-label">]; }; readonly next: { readonly capability: Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>; readonly events: readonly [Event.EventToken<"click">]; readonly attributes: readonly [Attr.AttrToken<"aria-label">]; }; readonly dot: { readonly capability: Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>; readonly events: readonly [Event.EventToken<"click">]; readonly attributes: readonly [Attr.AttrToken<"aria-label">]; readonly optional: true; }; readonly status: { readonly capability: Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonl …;

Patterns.catalog

const · packages/mixins-ui/src/patterns.ts:509

const catalog: ReadonlyArray<Entry>

Every adapted widget, for the gate, DevTools, and agents.

Patterns.Checkbox

const · packages/mixins-ui/src/patterns.ts:108

const Checkbox: A11y.Pattern<{
  readonly checkbox: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly hiddenInput: {
    readonly capability: Capability.Capability<'Base', readonly []>
    readonly attributes: readonly [Attr.AttrToken<'value'>]
    readonly optional: true
  }
}>

Patterns.CheckboxGroup

const · packages/mixins-ui/src/patterns.ts:143

const CheckboxGroup: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly legend: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly checkbox: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

Patterns.ColorPicker

const · packages/mixins-ui/src/patterns.ts:286

const ColorPicker: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly channelLabel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly slider: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'input'>]
  }
  readonly preset: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'change'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
    readonly optional: true
  }
}>

Patterns.Combobox

const · packages/mixins-ui/src/patterns.ts:438

const Combobox: A11y.Pattern<{
  readonly input: {
    readonly capability: Capability.Capability<
      'TextInput',
      readonly [
        Capability.Capability<
          'Focusable',
          readonly [
            Capability.Capability<
              'Interactive',
              readonly [Capability.Capability<'Base', readonly []>]
            >,
          ]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'keydown'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-expanded'>,
    ]
  }
  readonly items: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
    readonly optional: true
  }
  readonly item: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-selected'>,
    ]
  }
  readonly toggleButton: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly optional: true
  }
}>

Patterns.Command

const · packages/mixins-ui/src/patterns.ts:170

const Command: A11y.Pattern<{
  readonly input: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [
      Event.EventToken<'input'>,
      Event.EventToken<'keydown'>,
    ]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-expanded'>,
    ]
  }
  readonly list: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly item: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-selected'>,
    ]
  }
}>

Patterns.DatePicker

const · packages/mixins-ui/src/patterns.ts:428

const DatePicker: A11y.Pattern<{
  readonly trigger: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
  readonly panel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly backdrop: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
}>

Patterns.Dialog

const · packages/mixins-ui/src/patterns.ts:353

const Dialog: A11y.Pattern<{
  readonly dialog: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'cancel'>]
  }
  readonly panel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly title: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly description: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
  readonly closeButton: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly optional: true
  }
}>

Patterns.Disclosure

const · packages/mixins-ui/src/patterns.ts:125

const Disclosure: A11y.Pattern<{
  readonly button: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
  readonly panel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.Entry

interface · packages/mixins-ui/src/patterns.ts:489

interface Entry {
  readonly name: string
  readonly pattern: A11y.Pattern
  readonly slots: {
    readonly [name: string]: unknown
  }
  readonly tier: Tier
  readonly roles: ReadonlyArray<string>
  readonly floor: ReadonlyArray<FloorConcern>
}

Patterns.Fieldset

const · packages/mixins-ui/src/patterns.ts:120

const Fieldset: A11y.Pattern<{
  readonly fieldset: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly legend: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.FileDrop

const · packages/mixins-ui/src/patterns.ts:405

const FileDrop: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly input: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'change'>]
    readonly attributes: readonly [Attr.AttrToken<'disabled'>]
  }
}>

Patterns.FloorConcern

type · packages/mixins-ui/src/patterns.ts:64

type FloorConcern =
  | 'focus-trap'
  | 'escape-dismiss'
  | 'outside-dismiss'
  | 'inert-outside'
  | 'top-layer'
  | 'backdrop'
  | 'form-submission'
  | 'native-control'

What a widget relies on the browser for, so nothing here reimplements it.

Patterns.Input

const · packages/mixins-ui/src/patterns.ts:78

const Input: A11y.Pattern<{
  readonly input: {
    readonly capability: Capability.Capability<
      'TextInput',
      readonly [
        Capability.Capability<
          'Focusable',
          readonly [
            Capability.Capability<
              'Interactive',
              readonly [Capability.Capability<'Base', readonly []>]
            >,
          ]
        >,
      ]
    >
    readonly events: readonly [
      Event.EventToken<'input'>,
      Event.EventToken<'blur'>,
    ]
    readonly attributes: readonly [Attr.AttrToken<'aria-invalid'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly description: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
}>

Patterns.InputCopy

const · packages/mixins-ui/src/patterns.ts:279

const InputCopy: A11y.Pattern<{
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly input: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'value'>]
  }
  readonly button: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
  }
  readonly status: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

Patterns.Listbox

const · packages/mixins-ui/src/patterns.ts:457

const Listbox: A11y.Pattern<{
  readonly wrapper: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly button: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
  readonly backdrop: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
  readonly items: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
    readonly optional: true
  }
  readonly item: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-selected'>,
    ]
  }
}>

const · packages/mixins-ui/src/patterns.ts:473

const Menu: A11y.Pattern<{
  readonly wrapper: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly button: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
  readonly backdrop: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
  readonly items: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
    readonly optional: true
  }
  readonly item: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

const · packages/mixins-ui/src/patterns.ts:206

const Menubar: A11y.Pattern<{
  readonly bar: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'keydown'>]
  }
  readonly menu: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.Meter

const · packages/mixins-ui/src/patterns.ts:216

const Meter: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

const · packages/mixins-ui/src/patterns.ts:348

const Nav: A11y.Pattern<{
  readonly nav: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly link: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
  }
}>

Patterns.NestedMenu

const · packages/mixins-ui/src/patterns.ts:342

const NestedMenu: A11y.Pattern<{
  readonly sub: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly chevron: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.NumberField

const · packages/mixins-ui/src/patterns.ts:153

const NumberField: A11y.Pattern<{
  readonly input: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'keydown'>]
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.OtpField

const · packages/mixins-ui/src/patterns.ts:162

const OtpField: A11y.Pattern<{
  readonly input: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'input'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
  }
}>

Patterns.PasswordInput

const · packages/mixins-ui/src/patterns.ts:242

const PasswordInput: A11y.Pattern<{
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly input: {
    readonly capability: Capability.Capability<
      'TextInput',
      readonly [
        Capability.Capability<
          'Focusable',
          readonly [
            Capability.Capability<
              'Interactive',
              readonly [Capability.Capability<'Base', readonly []>]
            >,
          ]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'input'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-invalid'>]
  }
  readonly toggle: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [
      Attr.AttrToken<'aria-label'>,
      Attr.AttrToken<'aria-pressed'>,
    ]
  }
  readonly description: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
}>

Patterns.Popover

const · packages/mixins-ui/src/patterns.ts:361

const Popover: A11y.Pattern<{
  readonly button: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
  readonly panel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.Progress

const · packages/mixins-ui/src/patterns.ts:211

const Progress: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.RadioGroup

const · packages/mixins-ui/src/patterns.ts:392

const RadioGroup: A11y.Pattern<{
  readonly group: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly option: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.RangeSlider

const · packages/mixins-ui/src/patterns.ts:314

const RangeSlider: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly thumb: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'input'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
  }
}>

Patterns.Rating

const · packages/mixins-ui/src/patterns.ts:232

const Rating: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly star: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'change'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
  }
}>

Patterns.Resizable

const · packages/mixins-ui/src/patterns.ts:184

const Resizable: A11y.Pattern<{
  readonly handle: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'keydown'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-label'>,
    ]
  }
}>

Patterns.Segmented

const · packages/mixins-ui/src/patterns.ts:419

const Segmented: A11y.Pattern<{
  readonly group: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-label'>,
    ]
  }
  readonly option: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [
      Attr.AttrToken<'aria-pressed'>,
      Attr.AttrToken<'disabled'>,
      Attr.AttrToken<'aria-disabled'>,
    ]
  }
}>

Patterns.Select

const · packages/mixins-ui/src/patterns.ts:98

const Select: A11y.Pattern<{
  readonly select: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'change'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-invalid'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly description: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
}>

const · packages/mixins-ui/src/patterns.ts:192

const Sidebar: A11y.Pattern<{
  readonly toggle: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
  readonly nav: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly trigger: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-expanded'>]
  }
}>

Patterns.Slider

const · packages/mixins-ui/src/patterns.ts:375

const Slider: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly track: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'pointerdown'>]
  }
  readonly thumb: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>

Patterns.Steps

const · packages/mixins-ui/src/patterns.ts:226

const Steps: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
  }
  readonly item: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly trigger: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
  }
}>

Patterns.Switch

const · packages/mixins-ui/src/patterns.ts:114

const Switch: A11y.Pattern<{
  readonly button: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly hiddenInput: {
    readonly capability: Capability.Capability<'Base', readonly []>
    readonly attributes: readonly [Attr.AttrToken<'value'>]
    readonly optional: true
  }
}>

Patterns.Tabs

const · packages/mixins-ui/src/patterns.ts:382

const Tabs: A11y.Pattern<{
  readonly tablist: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly tab: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-selected'>,
    ]
  }
  readonly panel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

Patterns.TagsInput

const · packages/mixins-ui/src/patterns.ts:257

const TagsInput: A11y.Pattern<{
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly input: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [
      Event.EventToken<'input'>,
      Event.EventToken<'keydown'>,
    ]
  }
  readonly list: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly remove: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
    readonly attributes: readonly [Attr.AttrToken<'aria-label'>]
  }
}>

Patterns.Textarea

const · packages/mixins-ui/src/patterns.ts:88

const Textarea: A11y.Pattern<{
  readonly textarea: {
    readonly capability: Capability.Capability<
      'TextInput',
      readonly [
        Capability.Capability<
          'Focusable',
          readonly [
            Capability.Capability<
              'Interactive',
              readonly [Capability.Capability<'Base', readonly []>]
            >,
          ]
        >,
      ]
    >
    readonly events: readonly [
      Event.EventToken<'input'>,
      Event.EventToken<'blur'>,
    ]
    readonly attributes: readonly [Attr.AttrToken<'aria-invalid'>]
  }
  readonly label: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly description: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly optional: true
  }
}>

Patterns.Tier

type · packages/mixins-ui/src/patterns.ts:61

type Tier = 'stateful' | 'stateless'

Whether the widget keeps state of its own (a Submodel) or only decorates.

Patterns.Toast

const · packages/mixins-ui/src/patterns.ts:414

const Toast: A11y.Pattern<{
  readonly container: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
  readonly entry: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

Patterns.Tooltip

const · packages/mixins-ui/src/patterns.ts:370

const Tooltip: A11y.Pattern<{
  readonly trigger: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [
      Event.EventToken<'focus'>,
      Event.EventToken<'blur'>,
    ]
  }
  readonly panel: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

Patterns.TreeView

const · packages/mixins-ui/src/patterns.ts:299

const TreeView: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'keydown'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-label'>,
    ]
  }
  readonly item: {
    readonly capability: Capability.Capability<
      'Focusable',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly events: readonly [Event.EventToken<'focus'>]
    readonly attributes: readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-expanded'>,
      Attr.AttrToken<'aria-selected'>,
    ]
  }
  readonly row: {
    readonly capability: Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >
    readonly events: readonly [Event.EventToken<'click'>]
  }
  readonly group: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
    readonly attributes: readonly [Attr.AttrToken<'role'>]
  }
}>

Patterns.VirtualList

const · packages/mixins-ui/src/patterns.ts:221

const VirtualList: A11y.Pattern<{
  readonly root: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
  readonly row: {
    readonly capability: Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >
  }
}>