@kitn.ai/ui 0.26.0 → 0.28.0

package/src/elements/attachments.tsx

@@ -19,7 +19,9 @@ import {
 interface Props extends Record<string, unknown> {
   /** The attachments to render. Omit (or pass an empty array) for the empty
    *  state, which shows `emptyText` if set and nothing otherwise. Set as a JS
-   *  property (array). */
+   *  property (array). Each item's `url` must be a `data:` URI or an https
+   *  URL, never `URL.createObjectURL`: a `blob:` URL previews here but the
+   *  wire encoders (`toOpenAIMessages`/`toAnthropicMessages`) refuse it. */
   items?: AttachmentData[];
   /** Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows. */
   variant?: AttachmentVariant;

package/src/elements/chat-workspace.tsx

@@ -75,7 +75,7 @@ interface Events {
  * (480px). Read once at upgrade. Parts: `header` · `start` · `main` · `end` ·
  * `footer` (the asides also match `::part(aside)`).
  *
- * **BREAKING (the 0.24 re-cast, spec 2026-08-20):** this element was a chat
+ * **BREAKING (0.24):** this element was a chat
  * preset; it is now a layout shell, and everything chat-shaped is gone from its
  * surface. Where each removed prop went:
  *

package/src/elements/chat.tsx

@@ -10,12 +10,63 @@ import type { ChatMessage } from './chat-types';
 import type { TriggerDef } from '../components/composer';
 import type { ComposerDoc } from '../primitives/composer-model';
 import type { ProseSize } from '../primitives/chat-config';
-import type { ModelOption } from '../types';
+import type { ModelOption, HomeConfig, HomeLinkEntry } from '../types';
+import type { ConversationStore } from '../primitives/conversation-store';
 
 type Props = Omit<ChatThreadProps,
   'class' | 'onValueChange' | 'onSubmit' | 'onAttachmentsChange' | 'onSuggestionClick' | 'onModelChange'
-  | 'onMessageAction' | 'onWebSearch' | 'onVoice' | 'controllerRef' | 'cardTypes' | 'cardSchemas' | 'messages'
-  | 'accept' | 'onAttachmentsRejected'> & Record<string, unknown> & {
+  | 'onMessageAction' | 'onWebSearch' | 'onVoice' | 'controllerRef' | 'cardTypes' | 'cardSchemas' | 'cardHostElement' | 'messages'
+  | 'accept' | 'onAttachmentsRejected'
+  // `conversations`/`store` are re-declared below (own doc comments, matching
+  // this element's own attribute/property conventions) rather than left to
+  // flow through `Omit`'s pass-through — same reason `messages` is excluded
+  // above. Left unexcluded, the intersection carries TWO declarations of the
+  // same property (the inherited `ChatThreadProps` one plus the re-declared
+  // one below) and `gen-element-api.mjs` concatenates both JSDoc comments into
+  // one duplicated, em-dash-laden description.
+  | 'conversations' | 'store'
+  // `home` is re-declared below for the same reason as `conversations`/`store`
+  // above (own element-facing doc comment rather than the ChatThread-level one
+  // flowing through `Omit`'s pass-through). `onHomeLink` is wired internally
+  // (JSX prop on `<ChatThread>` below) as a dispatched `kai-home-link` event,
+  // matching every other ChatThread callback on this element — same reasoning
+  // as `onConversationLoad` just below.
+  | 'home' | 'onHomeLink'
+  // `onConversationLoad` is wired internally (below, JSX prop on
+  // `<ChatThread>`) as a dispatched `kai-conversation-load` event — matching
+  // every other ChatThread callback on this element — rather than left as a
+  // settable JS property: a `JSX.Element`-shaped callback prop has no HTML-
+  // consumer analogue the way `store`/`messages` do, and the kai- contract's
+  // idiom for "this thread wants to tell you something" is already an event.
+  // Excluded from `Props` for the same reason `onValueChange`/`onSubmit`/etc
+  // are excluded above: it is not a property a consumer of `<kai-chat>` sets.
+  | 'onConversationLoad'
+  // `hostOpen`/`onUnreadChange` (unread indicators, 2026-08-26) are the SAME
+  // "types without forwarding" trap as `onConversationLoad` above, for the
+  // same reason: this facade does not read either off the host element and
+  // forward it onto `<ChatThread>` below. Both exist for a caller composing
+  // `ChatThread` directly as a Solid component with its OWN show/hide chrome
+  // to report through `hostOpen` and its own sibling control (a `Dock`'s
+  // `unread` badge) to mirror `onUnreadChange` onto — the construct engine's
+  // emitted App is the motivating case (codegen.ts's `emitChatThreadUnreadProps`),
+  // exactly like `headerEndContent`/`emptyContent` below. `<kai-chat>` has no
+  // such sibling chrome of its own to report to or read from, so there is
+  // nothing here for either prop to DO — left unexcluded, `gen-element-api.mjs`
+  // would still type them into the public API and docs as settable properties
+  // that silently do nothing when set.
+  | 'hostOpen' | 'onUnreadChange'
+  // `headerEndContent`/`emptyContent` are JSX.Element escape hatches for a caller
+  // composing `ChatThread` directly as a Solid component (see their doc comments in
+  // chat-thread.tsx — the construct-engine's emitted App is the motivating case).
+  // `<kai-chat>` is the OPPOSITE shape: a custom element crossing the shadow-DOM
+  // boundary, where a `JSX.Element` value cannot exist for a consumer to construct
+  // (React/Vue/plain HTML have no such type) and the facade already has its own
+  // working mechanism for both regions — `slot="header-end"` and `slot="empty"`.
+  // Omitted here rather than left to flow through `Omit`'s default pass-through:
+  // without this, `gen-element-api.mjs` picked them up and put a JSX.Element type
+  // (which it stringifies as Solid's internal array-like union — meaningless to a
+  // web-component consumer) into `<kai-chat>`'s public prop surface and docs.
+  | 'headerEndContent' | 'emptyContent'> & Record<string, unknown> & {
     /** Which attachment media types the user may stage, in HTML `accept` syntax:
      *  `<kai-chat accept="image/*,application/pdf">`. A plain string, so unlike
      *  `messages` it DOES work as an attribute. Omitted means no filter.
@@ -63,6 +114,40 @@ type Props = Omit<ChatThreadProps,
      *  authored one carries `$schema`/`title`/`description`/`additionalProperties`,
      *  so the tighter type would reject both of the normal ways to supply one. */
     cardSchemas?: Record<string, object>;
+    /** Turns on the prior-conversations list (a list-toggle button in the
+     *  header, plus a second list view sharing the panel, C-1). Attribute-
+     *  settable like every other boolean flag on this element:
+     *  `<kai-chat conversations>`. Requires `store`. A row select, "new
+     *  conversation," or the visitor's mount-time auto-restore all deliver
+     *  their messages the same way: listen for `kai-conversation-load` and
+     *  set `el.messages` from `event.detail.messages` (a fresh array): this
+     *  element does not update `messages` for you. Set with no `store`, the
+     *  underlying `ChatThread` decides loudly (one console.error) and stays
+     *  visually off; this facade always supplies its own internal load
+     *  handler (the `kai-conversation-load` dispatch below), so the second
+     *  ChatThread guard, missing `onConversationLoad`, never trips here,
+     *  even for a consumer who never listens for the event. Default false. */
+    conversations?: boolean;
+    /** The adapter this thread persists conversations through: an object of
+     *  three functions (`list`/`load`/`save`; `ConversationStore`, exported
+     *  from `@kitn.ai/ui`'s `primitives/conversation-store`). A JS PROPERTY
+     *  ONLY: `el.store = myAdapter`. It can never be an attribute, since a
+     *  function-bearing object has no HTML string form, the same reasoning
+     *  that keeps `messages`/`cardSchemas` property-only (the kai- contract:
+     *  array/object props are JS properties, never attributes). Two built-ins
+     *  ship: `localStorageStore(name, userId?)` and `fetchStore(url, userId?)`. */
+    store?: ConversationStore;
+    /** Turns on the widget home screen (Intercom-pattern): the panel boots into
+     *  a `home` view, with a greeting, most-recent-conversation card, a "new
+     *  conversation" CTA, and host-defined links, plus a Home/Messages tab bar
+     *  for switching back to the thread. An OBJECT, so it is a JS property only:
+     *  `el.home = { greeting: { title: 'Hey' }, links: [...] }`, never an
+     *  attribute (the kai- contract: array/object props are JS properties).
+     *  A `links` entry with no `href` fires `kai-home-link` with that entry when
+     *  tapped, rather than navigating; one WITH `href` opens it directly
+     *  (only when the URL passes the kit's own scheme allowlist). Omit for the
+     *  no-home widget (chat view only, unchanged). */
+    home?: HomeConfig;
   };
 
 interface Events {
@@ -90,6 +175,19 @@ interface Events {
   'kai-web-search': Record<string, never>;
   /** The Mic / voice button was clicked. */
   'kai-voice': Record<string, never>;
+  /** A conversation's history loaded: a row tap in the list, "new
+   *  conversation," or the visitor's own mount-time auto-restore of their
+   *  most recent thread (only fires when `conversations` is on and a `store`
+   *  is set). `detail.id` is that conversation's id, `undefined` for the
+   *  "new conversation" case (no id exists until the first message mints
+   *  one, C-6). Set `el.messages = event.detail.messages` (already a fresh
+   *  array) to actually render it, since this element does not do that for
+   *  you; `messages` stays your own state like everywhere else on this
+   *  element. */
+  'kai-conversation-load': { id: string | undefined; messages: ChatMessage[] };
+  /** A `home.links` entry with no `href` was activated (tapped/clicked/Enter).
+   *  Meaningful only when `home` is set. */
+  'kai-home-link': { entry: HomeLinkEntry };
 }
 
 defineWebComponent<Props, Events>('kai-chat', {
@@ -97,8 +195,10 @@ defineWebComponent<Props, Events>('kai-chat', {
   suggestions: undefined, suggestionMode: 'submit', persistSuggestions: false, proseSize: 'sm',
   codeTheme: 'github-dark-dimmed', codeHighlight: true, chatTitle: undefined,
   models: undefined, currentModel: undefined, context: undefined, scrollButton: true,
-  webSearch: false, voice: false, triggers: undefined, kindIcons: undefined,
+  attach: true, webSearch: false, voice: false, triggers: undefined, kindIcons: undefined,
   actionsReveal: 'always', cardTypes: undefined, cardSchemas: undefined, accept: undefined,
+  reasoning: undefined, reasoningOpen: undefined, conversations: false, store: undefined,
+  home: undefined,
 }, (props, { dispatch, flag, reflectFlag, element, expose }) => {
   // `messages` is an untyped boundary: a consumer can hand it anything at
   // runtime (a pre-0.20.0 `{ id, role, content }` array, in particular). Skip
@@ -164,12 +264,22 @@ defineWebComponent<Props, Events>('kai-chat', {
     codeTheme={props.codeTheme as string} codeHighlight={flag('codeHighlight')}
     chatTitle={props.chatTitle as string | undefined} models={props.models as ModelOption[] | undefined}
     currentModel={props.currentModel as string | undefined} context={props.context as ChatThreadContextUsage | undefined}
-    scrollButton={props.scrollButton !== false} webSearch={flag('webSearch')} voice={flag('voice')}
+    scrollButton={props.scrollButton !== false} attach={flag('attach')} webSearch={flag('webSearch')} voice={flag('voice')}
+    reasoning={props.reasoning as 'full' | 'compact' | 'off' | undefined}
+    reasoningOpen={flag('reasoningOpen')}
     triggers={props.triggers as TriggerDef[] | undefined}
     kindIcons={props.kindIcons as Record<string, string> | undefined}
     actionsReveal={props.actionsReveal as 'always' | 'hover'}
     cardTypes={cardComponentsFromTags(props.cardTypes as Record<string, string> | undefined, (props as { theme?: string }).theme)}
     cardSchemas={props.cardSchemas as Record<string, object> | undefined}
+    conversations={flag('conversations')}
+    store={props.store as ConversationStore | undefined}
+    onConversationLoad={(messages, id) => dispatch('kai-conversation-load', { id, messages })}
+    home={props.home as HomeConfig | undefined}
+    onHomeLink={(entry) => dispatch('kai-home-link', { entry })}
+    /* F-26: card parts emit off THIS element as the bubbling `kai-card` event,
+       so `listenForCardEvents(el)` / addEventListener('kai-card') work. */
+    cardHostElement={element}
     onValueChange={(value) => dispatch('kai-value-change', { value })}
     onSubmit={(detail) => dispatch('kai-submit', detail)}
     accept={props.accept as string | undefined}

package/src/elements/checkbox-group.tsx

@@ -0,0 +1,164 @@
+import { createEffect, createSignal, untrack } from 'solid-js';
+import { defineWebComponent } from './define';
+import { CheckboxGroup } from '../ui/checkbox-group';
+// Public shape of the `options` prop; lives in ./element-data-types so the ROOT
+// entry can re-export it (see that file's header).
+import type { KaiCheckboxOption } from './element-data-types';
+
+interface Props extends Record<string, unknown> {
+  /** The choices, top to bottom. Set as a JS PROPERTY (array), never an attribute.
+   *  Rendered in full: the kit never truncates, re-orders or de-duplicates them. */
+  options: KaiCheckboxOption[];
+  /** The FIRST selected value. Settable and reflected to the `value` attribute, so
+   *  `:host([value])` and `el.value` see live state, and a seed can be written in
+   *  markup. Writing it makes that the whole selection; to read or drive the rest,
+   *  use `el.values`. */
+  value?: string;
+  /**
+   * The shared form-control name every box carries, so `FormData.getAll(name)` reads
+   * the whole selection back under one key.
+   *
+   * NO DEFAULT, unlike `<kai-radio-group>`. A radio set needs a shared `name` for the
+   * browser to make it exclusive and arrow-navigable, so one is generated when none is
+   * given; checkboxes are independent controls and behave correctly with no name at
+   * all. Generating one here would submit the selection under a random key, which is
+   * worse than submitting nothing.
+   *
+   * The element is NOT form-associated (no `ElementInternals`, no `setFormValue()`),
+   * the same known gap `<kai-input>` records: the boxes live in a shadow root, so a
+   * surrounding `<form>` collects nothing from them whether or not `name` is set. Read
+   * `el.values`. The name still lands on every inner input, so it is right the day form
+   * association arrives.
+   */
+  name?: string;
+  /** Disable every row. Individual rows carry their own `disabled`. */
+  disabled?: boolean;
+  /** Accessible name for the group. */
+  label?: string;
+}
+
+/** Events fired by `<kai-checkbox-group>`. */
+interface Events {
+  /** A row was ticked or unticked. `values` is the whole selection after the change,
+   *  which is what a multi-select control needs; `value` is the first of them (empty
+   *  when nothing is selected). Both are always present, so neither shape silently
+   *  loses the other. This is `<kai-select>`'s detail, deliberately. */
+  'kai-change': { value: string; values: string[] };
+}
+
+/**
+ * `<kai-checkbox-group>` — the kit's "pick any number" control, and
+ * `<kai-radio-group>`'s sibling: the same options shape and the same divided row
+ * chrome over real `<input type="checkbox">`es, multi-value instead of exclusive. A
+ * box per tab stop, Space to toggle and correct announcement are the browser's, not a
+ * reimplementation.
+ *
+ * Feed it `options` (a JS-property array of `{ value, label, description?, disabled? }`),
+ * drive and read the selection with the `values` property, and listen for `kai-change`.
+ * `value` is the first selected option and is reflected to the `value` attribute.
+ *
+ * Re-rendering follows the kit's reactivity contract: hand it a NEW array reference,
+ * and a new object for any option whose content changed — the rows are a
+ * reference-keyed list, so mutating an option in place changes nothing on screen.
+ *
+ * No validation and no limits: "at least one", "at most three" and anything else that
+ * lands in a policy document is the application's rule, not the kit's.
+ *
+ * ```html
+ * <kai-checkbox-group label="Environments" name="env"></kai-checkbox-group>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ *   const group = document.querySelector('kai-checkbox-group');
+ *   // ARRAY prop — a JS property, never an attribute.
+ *   group.options = [
+ *     { value: 'prod', label: 'Production', description: 'Pages the on-call' },
+ *     { value: 'staging', label: 'Staging' },
+ *     { value: 'dev', label: 'Development' },
+ *   ];
+ *   group.addEventListener('kai-change', (e) => console.log(e.detail.values));
+ *   group.values = ['prod', 'dev']; // drive it (no kai-change — the host already knows)
+ * </script>
+ * ```
+ */
+defineWebComponent<Props, Events>('kai-checkbox-group', {
+  options: [],
+  value: undefined,
+  name: undefined,
+  disabled: undefined,
+  label: undefined,
+}, (props, ctx) => {
+  const { element, dispatch, flag, expose } = ctx;
+
+  // Lift the selection into the facade and drive CheckboxGroup CONTROLLED so the host
+  // can read it (`el.values` / `:host([value])`) and set it after mount. Seed from the
+  // `value` property/attribute present on mount; nothing is auto-selected, because
+  // `options` normally arrives as a property AFTER upgrade (kai-select's structure).
+  const seed = (props.value as string | undefined) ?? element.getAttribute('value') ?? '';
+  const [values, setValues] = createSignal<string[]>(seed ? [seed] : []);
+  const first = () => values()[0] ?? '';
+
+  // Coerce anything arriving through the `value` setter (a JS assignment, or the
+  // attributeChangedCallback write-back the reflect effect below triggers) to a string,
+  // falling back to the live attribute when nullish so the write-back equals the signal
+  // and the guard absorbs it — no attr⇄prop feedback loop.
+  const coerce = (v: unknown): string =>
+    v == null ? (element.getAttribute('value') ?? '') : String(v);
+
+  // Apply a new selection and fire kai-change once (the user-toggle path).
+  const apply = (next: string[]) => {
+    const prev = untrack(values);
+    if (prev.length === next.length && prev.every((v, i) => v === next[i])) return;
+    setValues(next);
+    dispatch('kai-change', { value: next[0] ?? '', values: next });
+  };
+
+  Object.defineProperty(element, 'value', {
+    get: () => first(),
+    set: (v: unknown) => {
+      const next = coerce(v);
+      if (untrack(first) !== next) setValues(next ? [next] : []);
+    },
+    configurable: true,
+    enumerable: true,
+  });
+
+  // The multi-selection read/write side, spelled exactly as `<kai-select multiple>`
+  // spells it. `value` alone cannot represent a checkbox group's selection, and
+  // returning only the first ticked box would be a silent drop.
+  Object.defineProperty(element, 'values', {
+    get: () => values(),
+    set: (v: unknown) => setValues(Array.isArray(v) ? v.map(String) : []),
+    configurable: true,
+    enumerable: true,
+  });
+
+  // Reflect the first value → the `[value]` host attribute (for `:host([value])`).
+  createEffect(() => {
+    const v = first();
+    if (v) {
+      if (element.getAttribute('value') !== v) element.setAttribute('value', v);
+    } else if (element.hasAttribute('value')) {
+      element.removeAttribute('value');
+    }
+  });
+
+  expose({
+    /** Focus the group's first box. Not "the first ticked one", which is
+     *  `<kai-radio-group>`'s rule: a radio group is ONE tab stop that lands on the
+     *  selection, while every checkbox here is its own tab stop, so the entry point is
+     *  simply the top of the list. */
+    focus: (options?: FocusOptions) =>
+      element.shadowRoot?.querySelector<HTMLInputElement>('input[type="checkbox"]')?.focus(options),
+  });
+
+  return (
+    <CheckboxGroup
+      options={(props.options ?? []) as KaiCheckboxOption[]}
+      value={values()}
+      name={props.name as string | undefined}
+      disabled={flag('disabled')}
+      label={props.label as string | undefined}
+      onChange={(next) => apply(next)}
+    />
+  );
+});

package/src/elements/checkbox.tsx

@@ -0,0 +1,134 @@
+import { createEffect, createSignal, untrack } from 'solid-js';
+import { defineWebComponent } from './define';
+import { Checkbox } from '../ui/checkbox';
+
+interface Props extends Record<string, unknown> {
+  /** Controlled checked state. Settable and reflected to the `checked` attribute.
+   *  `el.checked = true` (or `<kai-checkbox checked>`) drives it; ticking the box
+   *  updates it and fires `kai-change`. Read `el.checked` for live state. */
+  checked?: boolean;
+  /** Initial checked state on mount (uncontrolled seed). Bare attribute
+   *  (`<kai-checkbox default-checked>`) turns it on. */
+  defaultChecked?: boolean;
+  /** The mixed state, for a parent box whose children are partly ticked. Visual
+   *  plus an accessibility hint: the box still reports `checked === false`. */
+  indeterminate?: boolean;
+  /** Disable interaction. */
+  disabled?: boolean;
+  /** Set the native `required` attribute, and nothing more. Whether an unticked box
+   *  is an error is the application's rule, not the kit's. */
+  required?: boolean;
+  /** Accessible label. The visible text beside the box is the consumer's to render. */
+  label?: string;
+  /** Form-control name (paired with `value`). */
+  name?: string;
+  /** Submitted value when checked (paired with `name`). Defaults to `'on'`. */
+  value?: string;
+}
+
+/** Events fired by `<kai-checkbox>`. */
+interface Events {
+  /** The box was ticked or unticked. */
+  'kai-change': { checked: boolean };
+}
+
+/**
+ * `<kai-checkbox>` — a checkbox over a real `<input type="checkbox">`. Drive/read
+ * its state with the `checked` property (settable + reflected to the `checked`
+ * attribute, so `:host([checked])` and `el.checked` see live state); seed the
+ * initial state with `default-checked` and read changes from `kai-change`.
+ *
+ * ```html
+ * <label>
+ *   <kai-checkbox default-checked label="Stream responses"></kai-checkbox>
+ *   Stream responses
+ * </label>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ *   const box = document.querySelector('kai-checkbox');
+ *   box.addEventListener('kai-change', (e) => console.log(e.detail.checked));
+ *   box.checked = false;    // drive it (no kai-change — the host already knows)
+ *   box.indeterminate = true;
+ *   box.toggle();           // flip it (fires kai-change)
+ * </script>
+ * ```
+ */
+defineWebComponent<Props, Events>('kai-checkbox', {
+  checked: undefined,
+  defaultChecked: undefined,
+  indeterminate: undefined,
+  disabled: undefined,
+  required: undefined,
+  label: undefined,
+  name: undefined,
+  value: undefined,
+}, (props, ctx) => {
+  const { element, dispatch, flag, expose } = ctx;
+
+  // Lift the on/off state into the facade and drive Checkbox CONTROLLED so the host
+  // can read it (`el.checked` / `:host([checked])`) and set it after mount. Seed from
+  // `defaultChecked` (or a bare `checked` attribute present on mount). This is
+  // kai-switch's structure, deliberately — same contract, same failure modes.
+  const [checked, setChecked] = createSignal(flag('defaultChecked') || flag('checked'));
+
+  // Coerce anything arriving through the `checked` setter (a JS assignment, or the
+  // write-back `attributeChangedCallback` fires when the attribute changes) to a
+  // boolean, falling back to attribute presence to match `flag`'s semantics. The
+  // `undefined` write-back `toggleAttribute` triggers thus resolves to the attribute
+  // just written, equals the signal, and is absorbed by the guard below — no attr⇄prop
+  // feedback loop.
+  const coerce = (v: unknown): boolean =>
+    v === true ? true
+      : v === false ? false
+        : element.hasAttribute('checked') && element.getAttribute('checked') !== 'false';
+
+  // Apply a new checked state and fire kai-change once (the user path). No-op while
+  // disabled.
+  const apply = (next: boolean) => {
+    if (flag('disabled')) return;
+    if (untrack(checked) === next) return;
+    setChecked(next);
+    dispatch('kai-change', { checked: next });
+  };
+
+  // Reads return LIVE state; host writes drive it WITHOUT firing kai-change — the
+  // host already knows what it set. The equality guard kills the reflect write-back.
+  Object.defineProperty(element, 'checked', {
+    get: () => checked(),
+    set: (v: unknown) => { const next = coerce(v); if (untrack(checked) !== next) setChecked(next); },
+    configurable: true,
+    enumerable: true,
+  });
+
+  // Reflect internal checked → the `[checked]` host attribute (for `:host([checked])`).
+  createEffect(() => {
+    const c = checked();
+    if (c !== element.hasAttribute('checked')) element.toggleAttribute('checked', c);
+  });
+
+  expose({
+    /** Flip the box and fire `kai-change` (no-op while disabled). */
+    toggle: () => apply(!untrack(checked)),
+    /** Focus the inner input (the host element can't reach it). */
+    focus: (options?: FocusOptions) =>
+      element.shadowRoot?.querySelector<HTMLInputElement>('input[type="checkbox"]')?.focus(options),
+  });
+
+  return (
+    <>
+      {/* Base sets `:host{display:block}`; a checkbox flows inline beside its text. */}
+      <style>{':host{display:inline-flex}'}</style>
+      <Checkbox
+        checked={checked()}
+        indeterminate={flag('indeterminate')}
+        disabled={flag('disabled')}
+        required={flag('required')}
+        aria-label={props.label as string | undefined}
+        aria-checked={flag('indeterminate') ? 'mixed' : undefined}
+        name={props.name as string | undefined}
+        value={(props.value as string | undefined) ?? 'on'}
+        onChange={(e) => apply(e.currentTarget.checked)}
+      />
+    </>
+  );
+});