Mixins / foldkit-mixins-ui

Steps

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

export * as Steps from './steps.js'

In the guides

Members

Steps.Step

interface · packages/mixins-ui/src/steps.ts:27

interface Step {
  readonly title: string
  readonly description?: string | undefined
}

Steps.StepsSlots

const · packages/mixins-ui/src/steps.ts:15

const StepsSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly [Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly item: 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 step: 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 trigger: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly marker: 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 text: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capa …;

A stepper, Zag's steps and Mantine's Stepper: a named ordered list of steps, each a numbered marker with a title and a description, a connector between each and the next. The current step is the application's: it is aria-current="step", those before it complete (a check in place of the number) and those after upcoming, as data-state on the item, marker, title and connector. A current past the last step completes them all. Given onSelect, a completed step is a button that goes back to it; a step ahead never is, since reaching it is the form's job, not the list's.

Steps.StepsView

interface · packages/mixins-ui/src/steps.ts:32

interface StepsView<Message> {
  readonly label: string
  readonly steps: ReadonlyArray<Step>
  readonly current: number
  readonly onSelect?: ((index: number) => NoInfer<Message>) | undefined
  readonly style?: NamedStyle<typeof StepsSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Steps.view

function · packages/mixins-ui/src/steps.ts:51

function view<Message>(
  options: StepsView<Message>,
  h: HtmlBuilder<Message>,
): Html