@kitn.ai/ui 0.25.2 → 0.27.0

package/dist/ui/checkbox-group.d.ts

@@ -0,0 +1,83 @@
+import { JSX } from 'solid-js';
+/** One choice in a {@link CheckboxGroup}. */
+export interface CheckboxOption<T = string> {
+    /** The value this row selects. Compared to the group's `value` by identity. */
+    value: T;
+    /** The row's visible label. */
+    label: JSX.Element;
+    /** Optional second line under the label. */
+    description?: JSX.Element;
+    /** Disable this row alone (the group's `disabled` disables all of them). */
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps<T = string> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+    /**
+     * The choices, in display order. Rendered in full: the kit never truncates,
+     * re-orders or de-duplicates a consumer's option list.
+     */
+    options: readonly CheckboxOption<T>[];
+    /** The selected values. Each option is checked when its `value` is in here (by identity). */
+    value?: readonly T[];
+    /**
+     * The shared form-control name every box in the group carries, so a native form
+     * submits the whole selection under one key and `FormData.getAll(name)` reads it back.
+     *
+     * UNLIKE {@link RadioGroup}, this has no default. A radio group needs a shared `name`
+     * for the browser to make the set exclusive and arrow-navigable, so one is generated
+     * when none is given; checkboxes are independent controls and need nothing to behave
+     * correctly. Generating a name here would submit the selection under a random key,
+     * which is worse than submitting nothing.
+     */
+    name?: string;
+    /** Disable every row. */
+    disabled?: boolean;
+    /** Accessible name for the group. Rendered as `aria-label` on the `group`. */
+    label?: string;
+    /**
+     * Fires on every toggle with the NEXT selection, plus the option that moved and
+     * which way it went. The next selection is a fresh array — the group holds no state
+     * of its own, so `value` is yours to own.
+     */
+    onChange?: (value: T[], option: CheckboxOption<T>, checked: boolean) => void;
+    /** Fires when a box loses focus — the commit point for a form field. */
+    onOptionBlur?: () => void;
+    /** Extra classes for each row. */
+    itemClass?: string;
+    /**
+     * Presentation slot. Replaces the default label/description column with whatever
+     * you return, so a row can carry media, a badge or a price without a second
+     * checkbox component existing. The control, the row chrome and the group semantics
+     * stay ours.
+     */
+    children?: (option: CheckboxOption<T>, state: {
+        checked: boolean;
+        disabled: boolean;
+    }) => JSX.Element;
+}
+/**
+ * A vertical set of checkbox rows in a bordered, divided list — the kit's standard
+ * "pick any number" control, and {@link RadioGroup}'s sibling: same options shape,
+ * same row chrome, same presentation slot, multi-value instead of single.
+ *
+ * Every row is a real `<input type="checkbox">` inside a `<label>`, so clicking
+ * anywhere on the row toggles it and the keyboard behaviour (a tab stop per box,
+ * Space to toggle) is the browser's rather than a reimplementation. The wrapper is
+ * `role="group"`, not `role="listbox"`: the boxes are independent controls and
+ * nothing here overrides what they already announce.
+ *
+ * Everything not listed in `CheckboxGroupProps` is forwarded to the group element, so
+ * `id`, `aria-labelledby`, any other `aria-*` and any `data-*` hook land where a form
+ * expects them. No validation is applied — "at least one" is your application's rule,
+ * not the kit's.
+ *
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Environments"
+ *   name="env"
+ *   options={[{ value: 'prod', label: 'Production' }, { value: 'staging', label: 'Staging' }]}
+ *   value={envs()}
+ *   onChange={setEnvs}
+ * />
+ * ```
+ */
+export declare function CheckboxGroup<T = string>(props: CheckboxGroupProps<T>): JSX.Element;

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from 'solid-js';
+export interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> {
+    /**
+     * The mixed / partially-checked state ("some of the things below are ticked").
+     *
+     * `indeterminate` is a DOM PROPERTY with no HTML attribute, so it cannot be set
+     * from markup — every caller that wanted it used to reach for a `ref` plus a
+     * `createEffect`. That effect now lives in here, once, and callers pass a prop.
+     *
+     * Note that the property is purely visual plus an accessibility hint: a checkbox
+     * whose `indeterminate` is true still reports `checked === false` and submits
+     * accordingly. A native indeterminate checkbox already announces as "mixed", so
+     * this component does not stamp `aria-checked="mixed"` on top of it — pass one
+     * yourself if you also want the attribute in the DOM.
+     */
+    indeterminate?: boolean;
+}
+/**
+ * A checkbox. A REAL `<input type="checkbox">` behind `appearance: none`, styled by
+ * the kit's `.kai-checkbox` rule, never a `<div>` wearing `role="checkbox"`.
+ *
+ * That is the whole design: the native control brings keyboard operation (Space),
+ * the `:focus-visible` ring, form participation via `name` / `value`, and correct
+ * screen-reader announcement — all of it for free and all of it correct. Every
+ * accessibility defect this kit's control audit found was in a control that had
+ * replaced the native element with something hand-rolled.
+ *
+ * Everything not listed in `CheckboxProps` is forwarded to the input, so `id`,
+ * `name`, `value`, `required`, `disabled`, `aria-*` and any `data-*` hook behave
+ * exactly as they do on a plain `<input>`.
+ *
+ * Validation is deliberately absent. `required` is passed through to the native
+ * attribute and nothing else — whether an unchecked box is an error is the
+ * consuming application's call, not the kit's.
+ *
+ * ```tsx
+ * <Checkbox name="notify" checked={on()} onChange={(e) => setOn(e.currentTarget.checked)} />
+ * ```
+ */
+export declare function Checkbox(props: CheckboxProps): JSX.Element;

package/dist/ui/dock.d.ts

@@ -0,0 +1,131 @@
+import { Accessor, JSX } from 'solid-js';
+/** Which corner the dock sits in. LOGICAL, so `-end` follows the writing direction
+ *  and an RTL page docks on the left with no extra work (both reference
+ *  implementations reached for `inset-inline-end` independently). */
+export type DockPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+/** Where focus goes when the panel opens.
+ *  - `content` (default) — `focus()` the first element assigned to the panel, falling
+ *    back to the panel itself when that element cannot take focus. Content-AGNOSTIC:
+ *    the dock never learns what it is holding.
+ *  - `panel` — focus the `tabindex="-1"` panel container (what `kai-dialog` does).
+ *  - `none` — never move focus. */
+export type DockFocusOnOpen = 'content' | 'panel' | 'none';
+/** Imperative open controller, handed to a parent (the `kai-dock` facade) via
+ *  `controllerRef` so it can drive/observe open state with `wireDisclosure`. */
+export interface DockController {
+    open: Accessor<boolean>;
+    setOpen: (v: boolean) => void;
+}
+export interface DockProps {
+    /** The panel body. ANY content — the dock never reads or types it. */
+    children?: JSX.Element;
+    /** Content inside the built-in button while CLOSED. Defaults to a chat glyph. */
+    launcher?: JSX.Element;
+    /** Content inside the button while OPEN. Defaults to a ✕; when only `launcher` is
+     *  given, that content stays rather than morphing into a clashing built-in. */
+    launcherOpen?: JSX.Element;
+    /** The widget's NAME. Derives the panel's accessible name and both launcher names
+     *  (`Open ${label}` / `Close ${label}`) — one string instead of three. */
+    label?: string;
+    /** i18n override for the launcher's name while closed. */
+    openLabel?: string;
+    /** i18n override for the launcher's name while open. */
+    closeLabel?: string;
+    /** Which corner. Logical, RTL-correct. Defaults to `bottom-end`. */
+    position?: DockPosition;
+    /** Render the unread dot. CONSUMER-OWNED: shown only while closed, and never
+     *  written back by the dock (see the component doc). */
+    unread?: boolean;
+    /** Disable the launcher. */
+    disabled?: boolean;
+    /** Suppress the dock's own built-in mobile `[part="close"]` X. Off (rendered) by
+     *  default — the built-in X is the FALLBACK close route for panel content with no
+     *  header of its own, which is the general case the dock has to cover since it
+     *  never reads what it holds. Set `true` when the slotted/composed content
+     *  supplies its own close affordance in its own header row (e.g. `ChatThread`'s
+     *  `headerEndContent`) — with both present the two X's stack, one floating over
+     *  the other's row, which is exactly the "doesn't look intentional" feedback this
+     *  prop exists to let a caller avoid. TRADEOFF: the mobile panel reserves a
+     *  padding band above its content so the built-in X never paints over it; that
+     *  band stays reserved unless you set `hideClose` true, so only set it once your
+     *  own control is actually in place — otherwise you get the band with no X to
+     *  justify it. */
+    hideClose?: boolean;
+    /** Where focus lands on open. Defaults to `content`. */
+    focusOnOpen?: DockFocusOnOpen;
+    /** Controlled open state. When set, the component never changes it itself — drive it
+     *  from `onOpenChange`. Omit for uncontrolled (internal) state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Does NOT move focus (see the focus contract). */
+    defaultOpen?: boolean;
+    /** Fires whenever the dock wants to open or close (launcher / Escape / a method). */
+    onOpenChange?: (open: boolean) => void;
+    /** Receive the open controller once mounted. */
+    controllerRef?: (api: DockController) => void;
+    /** Receive the focusable panel node so a facade's `focus()` can target it. */
+    panelRef?: (el: HTMLElement) => void;
+    /** Receive the launcher button so a facade's `focus()` can target it. */
+    launcherRef?: (el: HTMLButtonElement) => void;
+    /**
+     * Resolve the element `focusOnOpen: 'content'` should focus.
+     *
+     * A PROP, because the answer is "the first element assigned to the panel slot" and
+     * only the web-component facade can see slot assignments — a Solid caller passes
+     * its own ref instead. Returning nothing falls back to focusing the panel.
+     */
+    contentTarget?: () => HTMLElement | null | undefined;
+}
+/** The built-in closed glyph. Exported so the facade can use it as its `launcher`
+ *  slot's FALLBACK content — one definition, two users, rather than a second copy
+ *  of the same icon choice living in the element layer. */
+export declare function DockLauncherGlyph(): JSX.Element;
+/** The built-in open glyph. Exported for the same reason as {@link DockLauncherGlyph}. */
+export declare function DockCloseGlyph(): JSX.Element;
+/**
+ * Dock — a corner-docked launcher button with a panel that opens above it.
+ *
+ * The affordance behind a support widget: a circular button pinned to a corner of the
+ * viewport, and a floating panel holding whatever you slot into it. The panel is
+ * content-agnostic on purpose — a chat, a form, your own component — and the dock
+ * never reads, types or reaches into it.
+ *
+ * WHAT IT OWNS (all of it non-configurable, because these are facts about the medium
+ * rather than preferences):
+ *
+ * - **Hide semantics.** Closed means `visibility: hidden` + `opacity: 0` + `inert`,
+ *   and the panel is NEVER unmounted. `display: none` would leave the panel with no
+ *   layout box while closed, so anything inside that measures itself — a thread
+ *   scroller, a `ResizeObserver` — measures zero and re-measures on every open. The
+ *   cost of keeping the box is that a stream keeps rendering into a closed panel,
+ *   which is precisely what makes an unread dot honest.
+ * - **Focus.** On open, focus moves per `focusOnOpen`; on close it returns to the
+ *   launcher, always. `inert` is cleared and visibility restored BEFORE `focus()` runs
+ *   — a `focus()` into an inert or hidden subtree is silently dropped, no error — via
+ *   a `queueMicrotask`, the same shape `ui/dialog.tsx` uses. Mount moves no focus.
+ * - **Escape.** Closes only while the dock CONTAINS focus, and never stops the event.
+ *   A background widget that ate every Escape on the page would break the host page's
+ *   own menus; swallowing a key from a page you are a guest on is a decide-quietly move.
+ * - **No focus trap**, deliberately, unlike `kai-dialog`. The page staying usable is
+ *   the whole point of "docked", which is also why the panel is `aria-modal="false"`.
+ * - **Mobile close route.** At <=480px the panel goes full-bleed and the launcher
+ *   hides while it is open — a floating launcher over a full-bleed panel is not an
+ *   obvious close affordance. The panel gets its own `[part="close"]` X, top-right,
+ *   CSS-gated by the SAME media query and `[data-expanded]`, so it needs no viewport
+ *   JS. Desktop is unaffected: the launcher keeps toggling and no X ever renders.
+ *   This is the FALLBACK route, for panel content with no header of its own to hold
+ *   a close control — content that does (a `ChatThread` using `headerEndContent`,
+ *   say) passes `hideClose` to drop this X instead of stacking a second one over
+ *   its own header row.
+ *
+ * WHAT IT REFUSES: it never aborts a request, never persists its own open state, never
+ * decides what "unread" means, and never clears `unread` on open — writing over a
+ * consumer's prop is the trap `kai-chat.loading` fell into. Those are the app's calls;
+ * `open` + `onOpenChange` is the seam.
+ *
+ * Geometry is CSS custom properties rather than props: `--kai-dock-width` ·
+ * `--kai-dock-height` · `--kai-dock-inset` · `--kai-dock-gap` · `--kai-dock-radius` ·
+ * `--kai-dock-z` · `--kai-dock-launcher-size`.
+ *
+ * @see `elements/dock.tsx` for the `<kai-dock>` web-component facade.
+ */
+export declare function Dock(props: DockProps): JSX.Element;

package/dist/ui/hover-card.d.ts

@@ -21,7 +21,51 @@ export declare function HoverCardRoot(props: HoverCardRootProps): JSX.Element;
 export interface HoverCardTriggerProps {
     children: JSX.Element;
     class?: string;
+    /**
+     * Whether the trigger is its own tab stop. Omit for the automatic behaviour,
+     * which is right for every case in this repo: the trigger takes focus only
+     * when nothing inside it already can.
+     *
+     * Pass `false` to keep a trigger out of the tab order entirely, or `true` to
+     * force a stop. Both are escape hatches — reach for them when the automatic
+     * answer is wrong, not to restate it.
+     */
+    focusable?: boolean;
 }
+/**
+ * ★ THE TRIGGER IS A TAB STOP WHEN, AND ONLY WHEN, ITS CHILDREN ARE NOT.
+ *
+ * `onFocusIn`/`onFocusOut` were here from the start and the focus-open path was
+ * plainly intended, but the span never set `tabindex`, so the Tab key could not
+ * land on it and neither handler could fire on a keyboard. It went unnoticed for
+ * as long as it did because `focusin` BUBBLES and every consumer at the time put
+ * something focusable inside the trigger — `source.tsx` an `<a>`, `context.tsx`
+ * a `<Button>` — so the card opened via the child and the span's own inertness
+ * never showed. The first trigger with inert children (an attachment tile: a
+ * div, an img, an svg) had no tab stop anywhere in it.
+ *
+ * Hence delegation rather than an unconditional `tabindex`: adding one always
+ * would give every existing consumer TWO stops for one card, which is a worse
+ * bug than the one being fixed. The check runs in the ref AND again on every
+ * `slotchange`, because slot assignment happens after the ref and a one-shot
+ * check calls a not-yet-filled `<slot>` inert (see `hasFocusableChild`).
+ *
+ * ★ THE FOCUS LISTENERS ARE NATIVE, NOT SOLID'S DELEGATED `onFocusIn`. Solid
+ * delegates a fixed set of events from the document and retargets them into
+ * component trees; inside these shadow roots that path runs for a PROGRAMMATIC
+ * `.focus()` and, in the deeper trees, not for a real Tab. Measured: tabbing to
+ * an attachment tile in a mounted `<kai-chat>` left the card shut and
+ * `aria-describedby` null while `.focus()` on the same element opened it — so
+ * every keyboard user got a tab stop that announced nothing and showed nothing,
+ * which is worse than no stop at all. `addEventListener` in the ref does not
+ * care how focus arrived. Anything in this kit relying on delegated focus
+ * events inside a shadow root is suspect for the same reason.
+ *
+ * `aria-describedby` is what makes the stop worth arriving at: the card is
+ * DESCRIPTIVE, not an action, so the trigger gets no `role="button"` — that
+ * would promise an activation that does not exist — and instead points at the
+ * content it reveals so a screen reader reads it out.
+ */
 export declare function HoverCardTrigger(props: HoverCardTriggerProps): JSX.Element;
 export interface HoverCardContentProps {
     children: JSX.Element;

package/dist/ui/icon.d.ts

@@ -1,4 +1,7 @@
 import { JSX } from 'solid-js';
+/** Every curated icon name, sorted. Derived from `NAMED_ICONS` so a gallery,
+ *  a story control or a test can never drift from the map itself. */
+export declare const ICON_NAMES: readonly string[];
 /** Render an item icon.
  *
  *  Resolution order:

package/dist/ui/input.d.ts

@@ -1,4 +1,7 @@
 import { JSX } from 'solid-js';
+import { CaseMode } from '../primitives/field-mask.js';
+import { FieldSemanticType } from '../primitives/field-semantics.js';
+import { CopyPolicy, InputMaskRejectReason } from '../primitives/input-mask.js';
 export interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onInput' | 'onChange' | 'size'> {
     /** Field label rendered above the control and linked via `for`/`id`. */
     label?: string;
@@ -14,12 +17,55 @@ export interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElemen
     leading?: JSX.Element;
     /** Trailing affix (icon, inline button). Rendered inside the field row, after the input. */
     trailing?: JSX.Element;
-    /** Fires per keystroke with the current value. */
+    /** Fires per keystroke with the current value — the CANONICAL value when a mask is
+     *  active (digits for `tel`/`ssn`/`credit-card`, the formatted text for
+     *  `custom`), and the raw text of the field otherwise. */
     onValueInput?: (value: string) => void;
-    /** Fires on commit (blur) with the current value. */
+    /** Fires on commit (blur) with the current value; canonical when a mask is active. */
     onValueChange?: (value: string) => void;
+    /** Tier-2 mask pattern: `#` a digit, `@` an alphanumeric, `*` an obscurable
+     *  alphanumeric, everything else a positional literal (`@@@-####`).
+     *
+     *  The literal `default` is the OPT-IN sentinel: it resolves to the default format of
+     *  `semantic` (`tel` → `###-###-####`). It cannot collide with a real pattern — `default`
+     *  as a format is eight literals with no fill position, i.e. a field that can hold
+     *  nothing — and an opt-in token is needed because decision 1 forbids a bare semantic
+     *  type from starting to mask on its own. */
+    format?: string;
+    /** The placeholder guide shown at unfilled positions, aligned position-for-position
+     *  with `format` (`   -   -    `, `mm/dd/yyyy`). Without it the field shows only up
+     *  to the last typed character. */
+    guide?: string;
+    /** Tier-1 semantic type. On its own it applies `inputmode` / `autocomplete` /
+     *  `spellcheck` / `autocorrect` / `autocapitalize` and decides the canonical value —
+     *  it never starts masking by itself. */
+    semantic?: FieldSemanticType;
+    /** Case folding applied to typed and pasted text. Defaults to `preserve`. */
+    caseMode?: CaseMode;
+    /** What a copy or cut of a masked field puts on the clipboard. Defaults to `canonical`. */
+    copyPolicy?: CopyPolicy;
+    /** A mask refused, or partly refused, some content — `full`, `wrong-class`,
+     *  `over-capacity`, or `format-change-clipped`. Not a scalar and therefore not an
+     *  attribute: the facade projects this onto its `kai-input-rejected` event.
+     *
+     *  NOT an error state. `format-change-clipped` in particular fires on a routine
+     *  reactive `format` change, so this widget deliberately does not touch `invalid` —
+     *  validity belongs to the consumer, and stays there. */
+    onMaskReject?: (detail: {
+        reason: InputMaskRejectReason;
+        data: string;
+    }) => void;
 }
+/** The `format` value that means: resolve the default format of the semantic type.
+ *
+ *  EXPORTED because `src/elements/input.tsx` has to recognise the same sentinel when it
+ *  resolves a seeded value ahead of the masker, and a restated literal there would fail
+ *  SILENTLY if this string ever changed: `format === 'default'` would simply go false and
+ *  `compileMask('default')` would compile seven literals, garbling the seed with no error
+ *  anywhere. One exported constant instead of two copies of a magic string. */
+export declare const DEFAULT_FORMAT = "default";
 export declare const FIELD_BASE = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:pointer-events-none";
+export declare const FIELD_INVALID = "border-destructive dark:border-red-400/70";
 /**
  * `Input`: the token-themed single-line text field shell. A label/hint/error
  * stack around a field row that holds an optional `leading` affix, the

package/dist/ui/radio.d.ts

@@ -0,0 +1,85 @@
+import { JSX } from 'solid-js';
+export interface RadioProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children'> {
+}
+/**
+ * A single radio button. A REAL `<input type="radio">` behind `appearance: none`,
+ * styled by the kit's `.kai-radio` rule, never a `<div role="radio">`.
+ *
+ * The native element is what makes a set of radios a GROUP: browsers give same-`name`
+ * radios one tab stop, arrow-key navigation between them, mutual exclusion and form
+ * participation, and screen readers announce "2 of 4". None of that is reimplementable
+ * for free, and every hand-rolled radio in this kit's control audit had lost some of it.
+ *
+ * Use {@link RadioGroup} for a set. Reach for a bare `Radio` when you are laying the
+ * group out yourself — give every member the same `name`.
+ *
+ * Everything not listed in `RadioProps` is forwarded to the input, so `id`, `name`,
+ * `value`, `required`, `disabled`, `aria-*` and any `data-*` hook behave exactly as
+ * they do on a plain `<input>`. No validation is applied: `required` reaches the
+ * native attribute and stops there.
+ */
+export declare function Radio(props: RadioProps): JSX.Element;
+/** One choice in a {@link RadioGroup}. */
+export interface RadioOption<T = string> {
+    /** The value this row selects. Compared to the group's `value` by identity. */
+    value: T;
+    /** The row's visible label. */
+    label: JSX.Element;
+    /** Optional second line under the label. */
+    description?: JSX.Element;
+    /** Disable this row alone (the group's `disabled` disables all of them). */
+    disabled?: boolean;
+}
+export interface RadioGroupProps<T = string> extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+    /** The choices, in display order. */
+    options: readonly RadioOption<T>[];
+    /** The selected value. Matched against each option's `value` by identity. */
+    value?: T;
+    /**
+     * The shared form-control name every radio in the group carries — what makes the
+     * browser treat them as one control. Defaults to a generated id, so the group is
+     * exclusive and keyboard-navigable even when nothing is being submitted.
+     */
+    name?: string;
+    /** Disable every row. */
+    disabled?: boolean;
+    /** Accessible name for the group. Rendered as `aria-label` on the `radiogroup`. */
+    label?: string;
+    /** Fires with the newly selected value (and its option) on selection. */
+    onChange?: (value: T, option: RadioOption<T>) => void;
+    /** Fires when a radio loses focus — the commit point for a form field. */
+    onOptionBlur?: () => void;
+    /** Extra classes for each row. */
+    itemClass?: string;
+    /**
+     * Presentation slot. Replaces the default label/description column with whatever
+     * you return, so a row can carry media, a badge or a price without a second radio
+     * component existing. The control, the row chrome and the group semantics stay ours.
+     */
+    children?: (option: RadioOption<T>, state: {
+        checked: boolean;
+        disabled: boolean;
+    }) => JSX.Element;
+}
+/**
+ * A vertical set of radio rows in a bordered, divided list — the kit's standard
+ * "pick exactly one" control.
+ *
+ * The group is a `role="radiogroup"` wrapper around real `<input type="radio">`s that
+ * share a `name`, so the keyboard behaviour (one tab stop, arrows to move) is the
+ * browser's and not a reimplementation. Clicking anywhere on a row selects it, because
+ * each row is a `<label>`.
+ *
+ * Everything not listed in `RadioGroupProps` is forwarded to the group element, so
+ * `id`, `aria-*` and any `data-*` hook land where a form expects them.
+ *
+ * ```tsx
+ * <RadioGroup
+ *   label="Severity"
+ *   options={[{ value: 'blocking', label: 'Blocking' }, { value: 'cosmetic', label: 'Cosmetic' }]}
+ *   value={severity()}
+ *   onChange={setSeverity}
+ * />
+ * ```
+ */
+export declare function RadioGroup<T = string>(props: RadioGroupProps<T>): JSX.Element;

package/dist/ui/select.d.ts

@@ -0,0 +1,71 @@
+import { JSX } from 'solid-js';
+/** One choice in a {@link Select}. */
+export interface SelectOption<T = string> {
+    /** The value this row selects. Compared to the select's `value` by identity. */
+    value: T;
+    /** Visible text. Defaults to `String(value)`. Native `<option>`s hold text, not markup. */
+    label?: string;
+    /** Disable this option alone (the select's `disabled` disables the whole control). */
+    disabled?: boolean;
+}
+export interface SelectProps<T = string> extends Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'children'> {
+    /**
+     * The choices, in display order. Rendered in full: the kit never truncates,
+     * re-orders or de-duplicates a consumer's option list.
+     *
+     * Omit it and pass `children` instead when you need `<optgroup>`s or anything else
+     * a flat list cannot express.
+     */
+    options?: readonly SelectOption<T>[];
+    /**
+     * The selected value, matched against each option's `value` by IDENTITY (so a
+     * numeric enum selects on the number, not on its string form). Pass an array for a
+     * `multiple` select.
+     */
+    value?: T | readonly T[];
+    /**
+     * Text for a leading, disabled, empty-valued option — the "nothing chosen yet" row.
+     * Omitted means no such row is rendered at all; there is no default placeholder,
+     * because inventing one would put words in the consumer's UI.
+     */
+    placeholder?: string;
+    /** Force the invalid (destructive-border) state. Matches `Input`'s. */
+    invalid?: boolean;
+    /** Raw `<option>` / `<optgroup>` children, for lists `options` cannot express.
+     *  `value` still drives the selection when you use these: it is applied to the
+     *  rendered options rather than quietly doing nothing. */
+    children?: JSX.Element;
+    /** Extra classes for the positioning wrapper that holds the chevron. */
+    containerClass?: string;
+}
+/**
+ * A select. A REAL native `<select>` behind `appearance: none`, in a box consistent
+ * with {@link Input}, with the kit's own chevron drawn over it.
+ *
+ * **Native, not a listbox, and that is the design.** A hand-built popup can be made to
+ * look identical and cannot be made to behave identically: the native control brings
+ * the platform picker on mobile, type-ahead on desktop, form participation, and the
+ * OS's own accessibility tree. This kit's control audit found every one of its
+ * accessibility defects in a control that had replaced a native element.
+ *
+ * The trade is that the *dropdown list itself* stays OS chrome — it renders outside the
+ * page and no stylesheet reaches it. What the kit can do is make it follow the kit's
+ * light/dark mode rather than the OS's, which `color-scheme` on the element host
+ * already does (`src/elements/styles.css`). Styling the closed control and leaving the
+ * open list to the platform is the whole of the bargain.
+ *
+ * Everything not listed in `SelectProps` is forwarded to the `<select>`, so `id`,
+ * `name`, `required`, `disabled`, `multiple`, `size`, `aria-*`, any `data-*` hook and
+ * the DOM events behave exactly as they do on a plain select. No validation is
+ * applied: `required` reaches the native attribute and stops there.
+ *
+ * ```tsx
+ * <Select
+ *   options={[{ value: 'low' }, { value: 'high', label: 'High priority' }]}
+ *   value={sev()}
+ *   placeholder="Choose a severity…"
+ *   onChange={(e) => setSev(e.currentTarget.value)}
+ * />
+ * ```
+ */
+export declare function Select<T = string>(props: SelectProps<T>): JSX.Element;

package/dist/ui/slider.d.ts

@@ -0,0 +1,65 @@
+import { JSX } from 'solid-js';
+export interface SliderProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'min' | 'max' | 'step' | 'value'> {
+    /**
+     * Lowest selectable value. REQUIRED, and deliberately so.
+     *
+     * A range with no `min`/`max` is not a slider, it is a slider-shaped guess, and the
+     * guess belongs to whoever knows what the number means. `SliderWidget` reading a
+     * JSON-Schema field still defaults an absent `minimum` to 0 — that is the WIDGET's
+     * decision about a consumer-authored schema, and it stays there rather than being
+     * quietly adopted by every caller of this component.
+     */
+    min: number;
+    /** Highest selectable value. REQUIRED for the same reason as `min`. */
+    max: number;
+    /** Granularity. Omitted means the native default (1); `'any'` means continuous. */
+    step?: number | 'any';
+    /** The current value. Controlled — drive it from `onInput`. Omit for uncontrolled. */
+    value?: number;
+    /** Initial value when uncontrolled. */
+    defaultValue?: number;
+    /**
+     * Show the current value beside the track. Off by default.
+     *
+     * Two shapes, because one is not enough and three would be too many. `true` renders
+     * the raw number, which is what most sliders want. A FUNCTION renders whatever it
+     * returns, because plenty of sliders are not counting bare numbers: `60%`, `3 of 5`,
+     * `1m 30s`. A boolean alone cannot express those, and a formatter alone would make
+     * the common case read `valueLabel={(v) => v}`.
+     *
+     * The readout is `aria-hidden`. The input already reports the same number through
+     * `aria-valuenow` / `aria-valuetext`, so an exposed copy would be announced twice.
+     *
+     * NOTE ON STRUCTURE: with a readout the component renders a flex row around the
+     * input; without one it is still a bare `<input>` and nothing changes for existing
+     * callers. Toggling this at runtime therefore rebuilds the input element, which is
+     * fine for a control panel and not something a real app does mid-drag.
+     */
+    valueLabel?: boolean | ((value: number) => JSX.Element);
+}
+/**
+ * A slider. A REAL `<input type="range">` behind `appearance: none`, styled by the
+ * kit's `.kai-range` rule, never a `<div>` with a drag handler.
+ *
+ * The native control brings the whole keyboard contract (arrows, Home, End,
+ * PageUp/PageDown), pointer and touch dragging, form participation via `name`, and
+ * the `slider` role with a live value announcement — all of it for free and all of it
+ * correct. Every accessibility defect this kit's control audit found was in a control
+ * that had replaced the native element with something hand-rolled.
+ *
+ * What the component adds is the **filled track**. `.kai-range` paints the portion
+ * left of the thumb from a `--kai-range-fill` custom property, and until now every
+ * caller computed that percentage itself. It is arithmetic over `min`, `max` and the
+ * current value — three things this component already has — so no consumer should
+ * ever write it again.
+ *
+ * Everything not listed in `SliderProps` is forwarded to the input, so `id`, `name`,
+ * `disabled`, `required`, `aria-*` and any `data-*` hook behave exactly as they do on
+ * a plain `<input>`. No clamping and no validation is applied: a value outside
+ * `min`..`max` is the browser's business, not ours.
+ *
+ * ```tsx
+ * <Slider min={0} max={100} step={5} value={v()} onInput={(e) => setV(e.currentTarget.valueAsNumber)} />
+ * ```
+ */
+export declare function Slider(props: SliderProps): JSX.Element;

package/dist/ui/switch.d.ts

@@ -1,4 +1,5 @@
-export interface SwitchProps {
+import { JSX } from 'solid-js';
+export interface SwitchProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'role' | 'aria-checked' | 'children' | 'ref' | 'onChange' | 'onchange' | 'onClick' | 'onclick' | 'onKeyDown' | 'onkeydown'> {
     /** Controlled checked state. When set, the component defers state to the
      *  parent; drive it from `onChange`. Omit for uncontrolled (internal) state. */
     checked?: boolean;
@@ -22,5 +23,11 @@ export interface SwitchProps {
 /**
  * A toggle switch (`role="switch"`). Controlled via `checked`, or uncontrolled
  * from `defaultChecked`. Keyboard-operable (Space/Enter) and theme-tokened.
+ *
+ * Anything not named in `SwitchProps` is forwarded to the inner button, so `id`,
+ * `aria-required` / `aria-invalid` / `aria-describedby` and any `data-*` hook land
+ * on the focusable element without a caller stamping them through a `ref`. The
+ * switch keeps ownership of `type`, `role`, `aria-checked` and the toggle handlers:
+ * those are the control, not decoration.
  */
-export declare function Switch(props: SwitchProps): import("solid-js").JSX.Element;
+export declare function Switch(props: SwitchProps): JSX.Element;

package/dist/upload-BbGW6A_u.js

@@ -0,0 +1 @@
+import{I as a}from"./Icon-BnFKqqtY.js";import{c as e,q as i}from"./define-CGGX-7Vg.js";var p=[["path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",key:"ih7n3h"}],["polyline",{points:"17 8 12 3 7 8",key:"t8dd8p"}],["line",{x1:"12",x2:"12",y1:"3",y2:"15",key:"widbto"}]],t=o=>e(a,i(o,{name:"Upload",iconNode:p})),r=t;export{r as u};

package/dist/url-scheme-policy-DHpoTJwB.js

@@ -0,0 +1 @@
+const i=["http:","https:","mailto:"],r=["javascript:","vbscript:"];function c(t){try{return new URL(t,"http://_invalid_base").protocol}catch{return}}function o(t){const n=c(t);return n!==void 0&&i.includes(n)}function s(t){const n=c(t);return n!==void 0&&r.includes(n)}export{o as a,s as i};

package/dist/use-card-resolution-CJW4grFa.js

@@ -0,0 +1 @@
+import{q as D,s as L,g as z,c as i,i as s,S as a,a as b,d as k,b as P,D as T,m as w,t as c,w as q,e as A,G as E,B as F,j as G,x as K,k as m}from"./define-CGGX-7Vg.js";import{c as C}from"./cn-DN5AWfiS.js";import{B as O}from"./button-BH6rN0U-.js";import{t as U}from"./triangle-alert-DHohDOCy.js";import{x as _}from"./x-C5m1JFgi.js";import{r as H}from"./rotate-ccw-0DLRDHH5.js";var J=c('<h3 class="text-title font-semibold tracking-tight text-foreground">'),N=c('<p class="text-body text-muted-foreground">'),Q=c("<div>"),V=c('<div role=alert class="flex items-start gap-2 rounded-lg border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive dark:bg-destructive/15 dark:text-red-400"><span>'),W=c('<div class="text-sm text-foreground">'),X=c('<div class="flex flex-wrap items-center justify-end gap-2 pt-1">'),Y=c('<button type=button part=dismiss aria-label=Dismiss class="absolute right-2.5 top-2.5 z-10 shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground">'),Z=c('<div class="overflow-hidden rounded-lg">');function S(t){const o=D({dense:!1},t),[e,d]=L(o,["heading","description","media","actions","errorMessage","dense","headingId","descriptionId","dismissible","onDismiss","href","target","rel","clickable","onCardClick","class","children"]),g=q(),u=()=>e.headingId??`kai-card-heading-${g}`,v=()=>e.descriptionId??`kai-card-description-${g}`,p=()=>e.errorMessage!==void 0&&e.errorMessage!=="",l=()=>!!e.heading||!!e.description,[x,I]=z(!0),M=r=>{var n;r.stopPropagation(),I(!1),(n=e.onDismiss)==null||n.call(e)},h=()=>!!e.href,f=()=>!h()&&!!e.clickable,y=()=>h()||f(),$=r=>{var n;return(n=e.onCardClick)==null?void 0:n.call(e,r)},R=r=>{f()&&(r.key==="Enter"||r.key===" "||r.key==="Spacebar")&&(r.preventDefault(),$(r))},j=()=>e.rel??(e.target==="_blank"?"noopener noreferrer":void 0),B=[i(a,{get when(){return l()},get children(){var r=Q();return s(r,i(a,{get when(){return e.heading},get children(){var n=J();return s(n,()=>e.heading),b(()=>k(n,"id",u())),n}}),null),s(r,i(a,{get when(){return e.description},get children(){var n=N();return s(n,()=>e.description),b(()=>k(n,"id",v())),n}}),null),b(()=>P(r,C("flex flex-col border-b border-border",e.dense?"gap-0.5 pb-2.5":"gap-1 pb-4"))),r}}),i(a,{get when(){return p()},get fallback(){return[i(a,{get when(){return e.children},get children(){var r=W();return s(r,()=>e.children),r}}),i(a,{get when(){return e.actions},get children(){var r=X();return s(r,()=>e.actions),r}})]},get children(){var r=V(),n=r.firstChild;return s(r,i(U,{size:16,class:"mt-0.5 shrink-0","aria-hidden":"true"}),n),s(n,()=>e.errorMessage),r}})];return i(a,{get when(){return x()},get children(){return i(T,D({get component(){return h()?"a":"div"},part:"card",get href(){return w(()=>!!h())()?e.href:void 0},get target(){return w(()=>!!h())()?e.target:void 0},get rel(){return w(()=>!!h())()?j():void 0},get role(){return f()?"button":void 0},get tabindex(){return f()?0:void 0},get onClick(){return y()?$:void 0},get onKeyDown(){return f()?R:void 0},get class(){return C("relative flex flex-col rounded-xl border border-border bg-card text-card-foreground kai-elevation-sm",e.dense?"gap-2.5 p-3.5":"gap-4 p-5",y()&&"cursor-pointer no-underline transition-colors hover:border-ring hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",e.class)}},d,{get children(){return[i(a,{get when(){return e.dismissible},get children(){var r=Y();return r.$$click=M,s(r,i(_,{class:"size-3.5","aria-hidden":"true"})),r}}),i(a,{get when(){return e.media},get children(){var r=Z();return s(r,()=>e.media),r}}),B]}}))}})}A(["click"]);var ee=c('<div role=group class="flex flex-wrap items-center gap-x-2 gap-y-1"><span class="min-w-0 text-sm text-muted-foreground"><span class="font-medium text-foreground"></span> <span class=text-foreground></span><span class=text-muted-foreground> \u2014 dismissed');const re={confirm:"Proposed",choice:"Choose",form:"Form",tasks:"Tasks"};function te(t){const o=re[t];return o?`${o}:`:t.length===0?"Card:":`${t.charAt(0).toUpperCase()}${t.slice(1)}:`}function ne(t){const o=()=>te(t.type),e=()=>t.title??"this card",d=()=>t.reopenLabel??"Reopen",g=()=>`${o()} ${e()} \u2014 dismissed`;return i(S,{dense:!0,get class(){return t.class},get children(){var u=ee(),v=u.firstChild,p=v.firstChild,l=p.nextSibling,x=l.nextSibling;return s(p,o),s(x,e),s(u,i(O,{type:"button",variant:"ghost",size:"sm",get class(){return C("ml-auto gap-1.5")},onClick:()=>t.onReopen(),get children(){return[i(H,{size:14,"aria-hidden":"true"}),i(a,{get when(){return d()},get children(){return d()}})]}}),null),b(()=>k(u,"aria-label",g())),u}})}const ie=F();function se(){return E(ie)}const oe=new Set(["action","submit","expired"]);function ae(t){const[o,e]=z(void 0);G(K(t.data,()=>e(void 0),{defer:!0}));const d=m(()=>t.prop()??o()),g=m(()=>d()!==void 0),u=m(()=>{const l=d();return l!==void 0&&oe.has(l.kind)}),v=m(()=>{var l;return((l=d())==null?void 0:l.kind)==="dismissed"}),p=m(()=>t.prop()===void 0&&o()!==void 0);return{resolution:d,isResolved:g,isTerminal:u,isDeferred:v,isOptimistic:p,setLocal:e}}export{S as C,ne as D,ae as a,se as u};