Mixins / foldkit-mixins-ui

Segmented

namespace · packages/mixins-ui/src/segmented.ts:1

export * as Segmented from './segmented.js'

In the guides

Members

Segmented.fluid

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

const fluid: readonly [Mixin<never>, Mixin<never>]

What moves the indicator and highlight, on the group: the pressed option is measured (--fk-segmented-chosen-*) and one highlight follows the pointer to the nearest option (--fk-segmented-hover-*), born at the pressed one. Pass them beside the style; until they run, the pressed option fills itself.

Segmented.SegmentedOption

interface · packages/mixins-ui/src/segmented.ts:78

interface SegmentedOption<Value extends string> {
  readonly value: Value
  readonly label: string
  readonly disabled?: boolean | undefined
}

One option of a segmented control: what it stands for, and its words.

Segmented.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).

Segmented.SegmentedView

interface · packages/mixins-ui/src/segmented.ts:84

interface SegmentedView<Value extends string, Message> {
  readonly options: ReadonlyArray<SegmentedOption<Value>>
  readonly pressed: ReadonlyArray<Value>
  readonly onPress: (value: Value) => NoInfer<Message>
  readonly label: string
  readonly style?: NamedStyle<typeof SegmentedSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Segmented.toggled

function · packages/mixins-ui/src/segmented.ts:103

function toggled<Value extends string>(
  pressed: ReadonlyArray<Value>,
  value: Value,
  options?: {
    readonly multiple?: boolean
    readonly optional?: boolean
  },
): ReadonlyArray<Value>

The pressed values after value is pressed. A single control keeps one pressed, so pressing the pressed one changes nothing unless it is optional; with multiple, a press turns its option on or off.

Segmented.view

function · packages/mixins-ui/src/segmented.ts:119

function view<Value extends string, Message>(
  options: SegmentedView<Value, Message>,
  h: HtmlBuilder<Message>,
): Html

A segmented control in one call: the options as pressed buttons in a group, each label also in data-label so turning semibold when pressed moves nothing, after the indicator and highlight fluid moves.