Mixins / foldkit-mixins-ui

Button

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

export * as Button from './button.js'

In the guides

Members

Button.ButtonSlots

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

const ButtonSlots: Slots.Contract<{
  readonly button: Slot.UnnamedSlot<
    Capability.Capability<
      'Interactive',
      readonly [Capability.Capability<'Base', readonly []>]
    >,
    readonly [Event.EventToken<'click'>],
    readonly [
      Attr.AttrToken<'role'>,
      Attr.AttrToken<'aria-disabled'>,
      Attr.AttrToken<'disabled'>,
      Attr.AttrToken<'aria-pressed'>,
    ],
    readonly Slot.RequirementName[],
    boolean
  >
}>

The button publishes one slot. click is owned by the base OnClick when the button is interactive, so a Behavior that adds its own click handler is a conflict rather than a second silent owner.

Button.ButtonView

interface · packages/mixins-ui/src/button.ts:48

interface ButtonView<Message> {
  readonly label: string
  readonly style?: NamedStyle<typeof ButtonSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
  readonly input?: unknown
  readonly type?: 'button' | 'submit' | 'reset' | undefined
  readonly disabled?: boolean | undefined
  readonly onClick?: Message | undefined
  readonly pressed?: boolean | undefined
}

A button in one call: the label, a style for its slot, and the rest of @foldkit/ui's own config. toView stays for a button drawn as something else (an a, a split control); this covers the common case.

Button.resolve

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

function resolve<Input, Message>(
  attributes: ButtonAttributes<Message>,
  mixins: MixinList<Message>,
  context: ResolveContext<Input, Message>,
): ResolvedButton<Message>

Applies mixins to the button's bundles.

Button.ResolvedButton

type · packages/mixins-ui/src/button.ts:20

type ResolvedButton<Message> = Resolved<
  ButtonAttributes<Message>,
  typeof ButtonSlots,
  Message
>

The button's bundles with the attached Mixins applied.

Button.toView

function · packages/mixins-ui/src/button.ts:34

function toView<Message>(
  mixins: MixinList<Message>,
  context: ResolveContext<unknown, Message>,
  draw: (resolved: ResolvedButton<Message>) => Html,
): (attributes: ButtonAttributes<Message>) => Html

The button's toView: draw receives its bundles with mixins applied.

Button.view

function · packages/mixins-ui/src/button.ts:67

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