Mixins / foldkit-mixins-ui

Accordion

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

export * as Accordion from './accordion.js'

In the guides

Members

Accordion.AccordionItem

interface · packages/mixins-ui/src/accordion.ts:33

interface AccordionItem {
  readonly id: string
  readonly title: string
  readonly content: Html | string
  readonly disabled?: boolean | undefined
}

Accordion.AccordionSlots

const · packages/mixins-ui/src/accordion.ts:16

const AccordionSlots: Slots.Contract<{ readonly root: 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 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 heading: 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 [Attr.AttrToken<"aria-expanded">, Attr.AttrToken<"disabled">], readonly Slot.RequirementName[], boolean>; readonly label: 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 chevron: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Int …;

An accordion: sections whose headings each show and hide their panel, as the APG accordion pattern has it. Each trigger is a button in a heading, with aria-expanded and aria-controls; each panel is a region named by its trigger. Which sections are open is the application's, in its Model: the view draws open and sends onToggle, and toggled is the transition update applies. A shut panel stays drawn and is inert, out of the accessibility tree and the tab order, so its close can animate and aria-controls always names a node.

Accordion.AccordionView

interface · packages/mixins-ui/src/accordion.ts:41

interface AccordionView<Message> {
  readonly items: ReadonlyArray<AccordionItem>
  readonly open: ReadonlyArray<string>
  readonly onToggle: (id: string) => NoInfer<Message>
  readonly id: string
  readonly headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined
  readonly style?: NamedStyle<typeof AccordionSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Accordion.toggled

function · packages/mixins-ui/src/accordion.ts:63

function toggled(
  open: ReadonlyArray<string>,
  id: string,
  options?: {
    readonly multiple?: boolean
    readonly collapsible?: boolean
  },
): ReadonlyArray<string>

The open sections after id is pressed. With multiple, any number stay open; otherwise opening one shuts the others. A pressed open section shuts unless it is the only one open and collapsible is false (shadcn's and Zag's default for a single accordion is collapsible, and so is this).

Accordion.view

function · packages/mixins-ui/src/accordion.ts:74

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