Mixins / foldkit-mixins-ui

Figure

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

export * as Figure from './figure.js'

In the guides

Members

Figure.FigureSlots

const · packages/mixins-ui/src/figure.ts:11

const FigureSlots: 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 caption: 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 figure publishes its root (a figure) and its caption (a figcaption); it owns no state or messages. The caption names the figure for assistive technology by itself, so it needs no ARIA of its own.

Figure.FigureView

interface · packages/mixins-ui/src/figure.ts:17

interface FigureView<Message = never> {
  readonly content: Html
  readonly caption?: Html | string | undefined
  readonly style?: NamedStyle<typeof FigureSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

A figure in one call: what it shows (an Image.view, a chart, a code block) and its caption.

Figure.view

function · packages/mixins-ui/src/figure.ts:27

function view<Message = never>(
  options: FigureView<Message>,
  h: HtmlBuilder<Message>,
): Html