@kitn.ai/ui 0.26.0 → 0.27.0

package/src/ui/radio.tsx

@@ -0,0 +1,150 @@
+import { type JSX, For, Show, splitProps, createUniqueId } from 'solid-js';
+import { cn } from '../utils/cn';
+
+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 function Radio(props: RadioProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class']);
+  return <input {...rest} type="radio" class={cn('kai-radio', local.class)} />;
+}
+
+/** 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 function RadioGroup<T = string>(props: RadioGroupProps<T>): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'options', 'value', 'name', 'disabled', 'label', 'onChange', 'onOptionBlur', 'itemClass', 'children', 'class',
+  ]);
+  const fallbackName = createUniqueId();
+  const groupName = () => local.name ?? fallbackName;
+  return (
+    <div
+      {...rest}
+      role="radiogroup"
+      aria-label={local.label}
+      class={cn('divide-y divide-border overflow-hidden rounded-lg border border-border', local.class)}
+    >
+      <For each={local.options}>
+        {(opt) => {
+          const checked = () => local.value === opt.value;
+          const rowDisabled = () => !!(local.disabled || opt.disabled);
+          return (
+            <label
+              class={cn(
+                'flex cursor-pointer items-center gap-3 px-3 py-2.5 text-sm transition-colors',
+                opt.description !== undefined && 'items-start',
+                checked()
+                  ? 'bg-accent font-medium text-accent-foreground'
+                  : 'text-foreground hover:bg-muted/50',
+                local.itemClass,
+              )}
+            >
+              <Radio
+                name={groupName()}
+                value={String(opt.value)}
+                checked={checked()}
+                disabled={rowDisabled()}
+                class={opt.description === undefined ? undefined : 'mt-0.5'}
+                onChange={() => local.onChange?.(opt.value, opt)}
+                onBlur={() => local.onOptionBlur?.()}
+              />
+              <Show
+                when={local.children}
+                fallback={
+                  // No description → a bare <span>, byte for byte what every call site
+                  // rendered before this component existed. The two-line column only
+                  // appears when there is a second line to put in it.
+                  <Show when={opt.description !== undefined} fallback={<span>{opt.label}</span>}>
+                    <span class="flex flex-col gap-0.5">
+                      <span>{opt.label}</span>
+                      <span class="text-xs font-normal text-muted-foreground">{opt.description}</span>
+                    </span>
+                  </Show>
+                }
+              >
+                {(render) => render()(opt, { checked: checked(), disabled: rowDisabled() })}
+              </Show>
+            </label>
+          );
+        }}
+      </For>
+    </div>
+  );
+}

package/src/ui/select.tsx

@@ -0,0 +1,168 @@
+import { type JSX, For, Show, createEffect, splitProps } from 'solid-js';
+import { ChevronDown } from 'lucide-solid';
+import { cn } from '../utils/cn';
+import { FIELD_BASE, FIELD_INVALID } from './input';
+
+/** 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 function Select<T = string>(props: SelectProps<T>): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'class', 'containerClass', 'options', 'value', 'placeholder', 'invalid', 'children', 'ref',
+  ]);
+
+  // A `multiple` select is a scrolling list box, not a closed control: there is no
+  // collapsed state for a chevron to point at, and `appearance: none` on one buys
+  // nothing. So the custom chrome applies to the single-value shape only.
+  const isMulti = () => !!rest.multiple;
+
+  const isSelected = (v: T): boolean => {
+    const sel = local.value;
+    if (Array.isArray(sel)) return (sel as readonly T[]).includes(v);
+    return sel === v;
+  };
+
+  // Nothing chosen yet, for deciding whether the placeholder row is the selected one.
+  // Array-aware on purpose: an empty array means nothing is selected, and without this
+  // branch the browser would fall through to auto-selecting the first NON-disabled
+  // option — i.e. showing a real choice while the caller's state said none was made.
+  const isEmpty = (): boolean => {
+    const v = local.value;
+    if (Array.isArray(v)) return v.length === 0;
+    return v === undefined || v === null || (v as unknown) === '';
+  };
+
+  return (
+    <div class={cn('relative block w-full', local.containerClass)}>
+      <select
+        {...rest}
+        ref={(el) => {
+          // `ref` is split out and re-applied by hand because this component needs the
+          // element itself for the `children` path below. Solid always hands a component
+          // a ref FUNCTION (a variable ref compiles into one), so the typeof guard is for
+          // the hand-written object case only.
+          const forward = local.ref;
+          if (typeof forward === 'function') (forward as (el: HTMLSelectElement) => void)(el);
+
+          // `value` drives the `options` list declaratively (each `<option selected>`),
+          // which cannot reach options the CALLER rendered as `children`. Applying it
+          // imperatively for that path is the difference between "children are an
+          // escape hatch" and "`value` silently does nothing once you use one".
+          createEffect(() => {
+            if (local.children === undefined) return;
+            const v = local.value;
+            if (v === undefined || v === null) return;
+            if (Array.isArray(v)) {
+              const wanted = new Set((v as readonly unknown[]).map(String));
+              for (const o of el.options) o.selected = wanted.has(o.value);
+            } else {
+              el.value = String(v);
+            }
+          });
+        }}
+        class={cn(
+          FIELD_BASE,
+          // `peer` so the chevron beside it can dim with the control.
+          'peer',
+          // `pr-9` reserves the lane the chevron sits in, so a long option label never
+          // slides under it.
+          !isMulti() && 'cursor-pointer appearance-none pr-9',
+          local.invalid && FIELD_INVALID,
+          local.class,
+        )}
+      >
+        <Show when={local.placeholder !== undefined}>
+          <option value="" disabled selected={isEmpty()}>
+            {local.placeholder}
+          </option>
+        </Show>
+        <For each={local.options}>
+          {(opt) => (
+            <option value={String(opt.value)} disabled={opt.disabled} selected={isSelected(opt.value)}>
+              {opt.label ?? String(opt.value)}
+            </option>
+          )}
+        </For>
+        {local.children}
+      </select>
+      <Show when={!isMulti()}>
+        {/* `pointer-events-none` so the chevron is decoration and every click, including
+            one landing on the arrow, still opens the native picker. `aria-hidden`
+            because the select already announces itself as a combo box. */}
+        <ChevronDown
+          aria-hidden="true"
+          class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
+        />
+      </Show>
+    </div>
+  );
+}

package/src/ui/slider.tsx

@@ -0,0 +1,178 @@
+import { type JSX, Show, splitProps, createSignal } from 'solid-js';
+import { cn } from '../utils/cn';
+
+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 function Slider(props: SliderProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'class', 'style', 'min', 'max', 'step', 'value', 'defaultValue', 'ref', 'valueLabel',
+  ]);
+
+  // The uncontrolled mirror. A slider's fill has to follow the thumb even when nobody
+  // is holding the value in a signal, so the component tracks the live value itself
+  // through a NATIVE `on:input` listener. That is `on:` and not `onInput` on purpose:
+  // `onInput` stays in `rest` and reaches the input untouched, so a caller's handler
+  // is neither wrapped nor swallowed, and the two listeners simply both run.
+  const [live, setLive] = createSignal<number | undefined>(props.defaultValue);
+
+  // HTML's own rule for a range with no value: the midpoint of the span. Restated here
+  // rather than left to the browser because the fill has to agree with the thumb on the
+  // very first paint, before any input event exists.
+  const current = () => local.value ?? live() ?? (local.min + local.max) / 2;
+
+  const fill = (): string => {
+    const lo = local.min;
+    const hi = local.max;
+    if (!(hi > lo)) return '0%';
+    // Clamp: a value outside the range is the caller's to fix, but a track painted
+    // 140% wide is a rendering artefact nobody asked for.
+    const pct = ((current() - lo) / (hi - lo)) * 100;
+    return `${Math.min(100, Math.max(0, pct))}%`;
+  };
+
+  // Merge rather than replace: `style` is a legitimate thing to pass a slider, and the
+  // fill is a custom property that has to survive alongside it. Solid accepts either a
+  // string or an object here, so both shapes are handled.
+  const style = (): string | JSX.CSSProperties => {
+    const s = local.style;
+    if (typeof s === 'string') return `${s.replace(/;\s*$/, '')};--kai-range-fill:${fill()}`;
+    return { ...(s ?? {}), '--kai-range-fill': fill() } as JSX.CSSProperties;
+  };
+
+  // CONTROLLED-MODE RECONCILIATION. A controlled `<input type="range">` in Solid can
+  // drift: the browser moves the thumb on a drag, and if the caller's `value` does not
+  // change in response, the bound expression is unchanged, so Solid never writes the
+  // DOM back. The thumb ends up somewhere the component's own state says it is not —
+  // and because the fill is derived from `value`, the two visibly DISAGREE. That is the
+  // exact symptom reported against the Storybook Playground: thumb slides, track does
+  // not. A pinned, writer-less `<Slider value={40} />` is a legitimate thing to render,
+  // and it should look pinned rather than half-moved.
+  //
+  // WHY A MICROTASK AND NOT THE HANDLER OR A BARE EFFECT. Both of those run too early
+  // and would break the ordinary controlled case. The `on:input` listener above is
+  // attached to the TARGET, so it runs before the caller's `onInput`, which Solid
+  // delegates at the document; snapping back there would hand the caller's handler a
+  // value we had already reset. A `createEffect` is flushed at the end of the update
+  // that `setLive` starts, which is still inside the target listener and therefore also
+  // before the delegated one. A microtask runs after the whole event turn: every input
+  // listener has run and any signal the caller set has propagated, so a value that
+  // still disagrees means the caller genuinely did not accept the edit.
+  let el: HTMLInputElement | undefined;
+  const reconcileControlled = () => {
+    const v = local.value;
+    // Uncontrolled: `live` is the truth and the DOM is already showing it.
+    if (v === undefined || el === undefined) return;
+    if (el.valueAsNumber !== v) el.value = String(v);
+  };
+
+  const readout = (): JSX.Element => {
+    const vl = local.valueLabel;
+    return typeof vl === 'function' ? vl(current()) : current();
+  };
+
+  const control = () => (
+    <input
+      {...rest}
+      type="range"
+      class={cn('kai-range', local.class)}
+      style={style()}
+      min={local.min}
+      max={local.max}
+      step={local.step}
+      value={local.value ?? live() ?? undefined}
+      ref={(node) => {
+        // `ref` is split out and re-applied by hand because this component needs the
+        // element for the reconciliation above. Solid always hands a component a ref
+        // FUNCTION (a variable ref compiles into one), so the typeof guard is for the
+        // hand-written object case only.
+        el = node;
+        const forward = local.ref;
+        if (typeof forward === 'function') (forward as (n: HTMLInputElement) => void)(node);
+      }}
+      on:input={(e) => {
+        setLive((e.currentTarget as HTMLInputElement).valueAsNumber);
+        queueMicrotask(reconcileControlled);
+      }}
+    />
+  );
+
+  return (
+    <Show when={local.valueLabel} fallback={control()}>
+      <div class="flex items-center gap-3">
+        {control()}
+        {/* aria-hidden: the input already announces this number. The readout is a
+            second copy for the eyes only, and exposing it would double the
+            announcement on every step of a drag. */}
+        <span
+          aria-hidden="true"
+          class="min-w-9 shrink-0 rounded-md bg-background px-2 py-1 text-center text-sm font-medium tabular-nums text-foreground shadow-sm"
+        >
+          {readout()}
+        </span>
+      </div>
+    </Show>
+  );
+}

package/src/ui/switch.tsx

@@ -1,7 +1,12 @@
-import { createSignal } from 'solid-js';
+import { type JSX, createSignal, splitProps } from 'solid-js';
 import { cn } from '../utils/cn';
 
-export interface SwitchProps {
+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;
@@ -26,51 +31,74 @@ 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 function Switch(props: SwitchProps) {
-  const [internal, setInternal] = createSignal(props.defaultChecked ?? false);
-  const isControlled = () => props.checked !== undefined;
-  const isOn = () => (isControlled() ? !!props.checked : internal());
+  const [local, rest] = splitProps(props, [
+    'checked', 'defaultChecked', 'disabled', 'label', 'name', 'value', 'onChange', 'buttonRef', 'class',
+  ]);
+  const [internal, setInternal] = createSignal(local.defaultChecked ?? false);
+  const isControlled = () => local.checked !== undefined;
+  const isOn = () => (isControlled() ? !!local.checked : internal());
 
   const toggle = () => {
-    if (props.disabled) return;
+    if (local.disabled) return;
     const next = !isOn();
     if (!isControlled()) setInternal(next);
-    props.onChange?.(next);
+    local.onChange?.(next);
   };
 
   return (
     <>
-      {props.name != null && (
+      {local.name != null && (
         <input
           type="checkbox"
-          name={props.name}
-          value={props.value ?? 'on'}
+          name={local.name}
+          value={local.value ?? 'on'}
           checked={isOn()}
-          disabled={props.disabled}
+          disabled={local.disabled}
           aria-hidden="true"
           tabindex={-1}
           style={{ position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', 'white-space': 'nowrap' }}
           onChange={() => { /* driven by the button; keep the input in sync only */ }}
         />
       )}
+      {/* `{...rest}` comes FIRST so the attributes below win: a caller can add an
+          `id` or an `aria-describedby`, but cannot turn this into something that is
+          no longer a switch. */}
       <button
+        {...rest}
         type="button"
         role="switch"
-        ref={props.buttonRef}
+        ref={local.buttonRef}
         aria-checked={isOn()}
-        aria-label={props.label}
-        disabled={props.disabled}
+        aria-label={local.label}
+        disabled={local.disabled}
         onClick={toggle}
         onKeyDown={(e) => {
           if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggle(); }
         }}
         class={cn(
-          'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors',
+          'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border transition-colors',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
           'disabled:cursor-not-allowed disabled:opacity-50',
-          isOn() ? 'bg-primary' : 'bg-muted',
-          props.class,
+          // WCAG 2.1 SC 1.4.11: the track IS this control's visual boundary, so it
+          // needs 3:1 against the surface behind it. The OFF fill cannot carry that
+          // — `--color-muted` is a shared surface token (measured 1.10:1 light on
+          // `--color-background`) and darkening it to clear 3:1 would repaint every
+          // muted surface in the kit. So the boundary moves to a border on the
+          // control-edge token `--color-input`, which exists for exactly this and is
+          // already held to the 3:1 floor for radios, checkboxes and inputs
+          // (tests/primitives/control-contrast.test.ts). The ON track keeps its
+          // ~17:1 `--color-primary` fill and takes a transparent border purely so
+          // the two states stay the same size — the fill still paints under it.
+          isOn() ? 'border-transparent bg-primary' : 'border-input bg-muted',
+          local.class,
         )}
       >
         <span
@@ -79,7 +107,10 @@ export function Switch(props: SwitchProps) {
             // On the `primary` track use `primary-foreground` so the thumb stays
             // visible in both themes (in dark mode `primary` is light, where a
             // hard-coded white thumb vanished). Off-track stays white over `muted`.
-            isOn() ? 'translate-x-[1.125rem] bg-primary-foreground' : 'translate-x-0.5 bg-white',
+            // The track is `border-box` with a 1px border, so the thumb travels
+            // inside a 34px box: 2px in from each inner edge keeps both end
+            // positions 3px from the track's outer edge.
+            isOn() ? 'translate-x-4 bg-primary-foreground' : 'translate-x-0.5 bg-white',
           )}
         />
       </button>

package/src/utils/cn.ts

@@ -2,19 +2,25 @@ import { clsx, type ClassValue } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 
 // The kit defines custom font-size utilities via @theme tokens in theme.css:
-// text-caption / text-meta / text-body / text-title. tailwind-merge has no way
-// to know these are font sizes, so by default it buckets e.g. `text-body` with
-// text COLORS and drops a real color (`text-transparent`, `text-foreground`, …)
+// text-micro / text-caption / text-meta / text-compact / text-body / text-title.
+// tailwind-merge has no way to know these are font sizes, so by default it
+// buckets `text-body` with text COLORS and drops a real color
+// (`text-transparent`, `text-foreground`, …)
 // whenever both appear in the same cn() call — which silently broke TextShimmer
 // inside the web components (the element adds `text-body`, dropping
 // `text-transparent`, so the gradient stayed hidden behind opaque text).
 //
 // Register them in the `font-size` group so they conflict only with other font
-// sizes (text-xs/sm/base/lg/…) and never with text colors.
+// sizes (text-xs/sm/base/lg/…) and never with text colors. Since theme.css now
+// re-points Tailwind's own scale at the same tokens (text-xs ≡ text-meta,
+// text-sm ≡ text-body, text-base ≡ text-title), the semantic name and its
+// Tailwind alias are literally the same size — so they MUST land in one group
+// or `cn('text-sm', 'text-body')` would emit two classes for one declaration.
+// `text-lg` needs no entry: it is already a stock Tailwind font size.
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      'font-size': [{ text: ['caption', 'meta', 'body', 'title'] }],
+      'font-size': [{ text: ['micro', 'caption', 'meta', 'compact', 'body', 'title'] }],
     },
   },
 });