Mixins / foldkit-mixins-ui

SegmentedSlots

const · packages/mixins-ui/src/segmented.ts:26

const SegmentedSlots: Slots.Contract<{
  readonly group: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly [Attr.AttrToken<'role'>, Attr.AttrToken<'aria-label'>],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly option: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly [Event.EventToken<'click'>],
    readonly [
      Attr.AttrToken<'aria-pressed'>,
      Attr.AttrToken<'disabled'>,
      Attr.AttrToken<'aria-disabled'>,
    ],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly indicator: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly highlight: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A segmented control: one group of pressed-button options. Plain buttons, not tabs: the group is role="group", each option carries aria-pressed, and there are no arrow keys or roving tabindex. indicator and highlight, drawn first in the group, are the pressed option's sliding pill and the hover that follows the pointer, which fluid moves. With multiple, it is shadcn's and Zag's toggle group: any number of options pressed, each filling itself (draw it without fluid, whose pill marks one).