ToggleGroup

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: ToggleGroup  tag: wyrd-toggle-group  package: wyrd.component.toggle-group  title: Toggle Group  summary: Single- or multiple-selection collection of toolbar-style toggle buttons.relationships:  related-to:    - collection-navigation    - quality-parity-and-gatesclassification:  category: action  composition: collection  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: label      type:        kind: string      required: true      serializable: true      summary: Accessible name for the toggle group.    - name: type      type:        kind: enum        values:          - single          - multiple      required: false      default: single      reflects: true      serializable: true      summary: Whether activation selects one item or independently toggles many items.    - name: values      type:        kind: array        item:          kind: string      required: false      controlled: true      serializable: true      summary: Controlled selected item values; single mode uses at most one value.    - name: default-values      type:        kind: array        item:          kind: string      required: false      default: []      serializable: true      summary: Initial uncontrolled selected item values.    - name: items      type:        kind: array        item:          kind: object          fields:            value:              kind: string            label:              kind: string            disabled:              kind: boolean      required: false      default: []      serializable: true      summary: Ordered toggle button items; disabled items render but are skipped by navigation and activation.    - name: is-disabled      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Prevents navigation and selection changes for the collection.  slots: []  events:    - name: values-change      payload:        values:          kind: array          item:            kind: string        action:          kind: action-ref      bubbles: true      composed: true      cancelable: false      summary: Canonical event carrying the complete requested selected values array.  states:    - name: default      source: platform      summary: Enabled collection.    - name: pressed      source: property      summary: Persistent selected state on one or more items.    - name: focus-visible      source: platform      summary: Keyboard-visible focus on the roving item.    - name: disabled      source: property      summary: Disabled collection or item state.  parts:    - name: root      summary: Toggle collection group root.    - name: item      summary: Repeated native pressed button.  tokens:    item:      background: color.surface      foreground: color.on-surface      background-hover: color.secondary      pressed-background: color.secondary      pressed-foreground: color.on-secondary      disabled-background: color.disabled      disabled-foreground: color.on-disabled      padding-x: spacing.md      padding-y: spacing.sm    radius: rounded.md    gap: spacing.xs    label: typography.label-mdmessages: []obligations:  accessibility:    role: group    name: Consumer-provided aria-label or surrounding labelled context names the group.    keyboard:      - In single mode, Tab moves focus into the roving enabled item and out of the group.      - In single mode, ArrowLeft and ArrowRight move focus between enabled items with wrap-around and follow visual direction in RTL.      - In single mode, ArrowUp and ArrowDown move focus between enabled items with wrap-around.      - In single mode, Home and End move focus to the first and last enabled items.      - In multiple mode, Tab moves through every enabled item in natural document order.      - Enter and Space toggle the focused enabled item.    semantics:      - Web projections expose role=group with the required label property applied as aria-label, and native buttons with aria-pressed.      - Single mode maintains at most one pressed item; activating the pressed item clears selection.      - Multiple mode exposes independent pressed states.      - Disabled items are skipped by single-mode roving focus and cannot be activated.  behavior:    model: collection    interactions:      - values wins over default-values when provided.      - Single mode activation replaces selection with the item value or clears an already selected item.      - Multiple mode activation adds or removes the item value while preserving item order.      - In single mode, arrow and boundary keys move focus without changing selection.      - In multiple mode, items use natural tab order and arrow keys are not handled.      - Controlled activation emits values-change without mutating controlled values.    hostEffects:      - Use the shared collection behavior primitive for roving focus navigation.      - Dispatch values-change after accepted activation.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - label      - type      - values      - default-values      - items      - is-disabled    serializableSlots: []    eventBindings:      - values-change    notes: Items serialize as ordered records; the group owns selection and roving focus while each item retains pressed-button semantics.examples:  - name: single    state: pressed    properties:      label: Text alignment      type: single      default-values:        - center      items:        - value: left          label: Align left        - value: center          label: Align center        - value: right          label: Align right    slots: {}  - name: multiple    state: pressed    properties:      label: Text formatting      type: multiple      default-values:        - bold        - italic      items:        - value: bold          label: Bold        - value: italic          label: Italic        - value: underline          label: Underline    slots: {}  - name: disabled-item    state: disabled    properties:      label: Text alignment      items:        - value: left          label: Align left        - value: center          label: Align center          disabled: true        - value: right          label: Align right    slots: {}