@kitn.ai/ui 0.26.0 → 0.27.0

package/src/elements/radio-group.tsx

@@ -0,0 +1,129 @@
+import { createEffect, createSignal, untrack } from 'solid-js';
+import { defineWebComponent } from './define';
+import { RadioGroup } from '../ui/radio';
+// 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 { KaiRadioOption } from './element-data-types';
+
+interface Props extends Record<string, unknown> {
+  /** The choices, top to bottom. Set as a JS PROPERTY (array), never an attribute. */
+  options: KaiRadioOption[];
+  /** Controlled selected `value`. Settable and reflected to the `value` attribute.
+   *  `el.value = 'degraded'` drives it; choosing a row updates it and fires
+   *  `kai-change`. Read `el.value` for live state. */
+  value?: string;
+  /** Shared form-control name for every radio in the group. Defaults to a generated
+   *  id, so the group is exclusive and keyboard-navigable even when nothing is
+   *  submitted. */
+  name?: string;
+  /** Disable every row. Individual rows carry their own `disabled`. */
+  disabled?: boolean;
+  /** Accessible name for the group. */
+  label?: string;
+}
+
+/** Events fired by `<kai-radio-group>`. */
+interface Events {
+  /** A row was chosen. */
+  'kai-change': { value: string };
+}
+
+/**
+ * `<kai-radio-group>` — the kit's "pick exactly one" control: a bordered, divided
+ * list over real `<input type="radio">`s that share a `name`, so one tab stop, arrow
+ * keys, mutual exclusion and form participation are the browser's and not a
+ * reimplementation.
+ *
+ * Feed it `options` (a JS-property array of `{ value, label, description?, disabled? }`),
+ * drive/read the selection with the `value` property (settable + reflected to the
+ * `value` attribute, so `:host([value])` and `el.value` see live state), and listen
+ * for `kai-change`.
+ *
+ * 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.
+ *
+ * ```html
+ * <kai-radio-group value="degraded" label="Severity"></kai-radio-group>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ *   const group = document.querySelector('kai-radio-group');
+ *   group.options = [
+ *     { value: 'blocking', label: 'Blocking', description: 'Pages the on-call' },
+ *     { value: 'degraded', label: 'Degraded' },
+ *     { value: 'cosmetic', label: 'Cosmetic' },
+ *   ];
+ *   group.addEventListener('kai-change', (e) => console.log(e.detail.value));
+ *   group.value = 'cosmetic'; // drive it (no kai-change — the host already knows)
+ * </script>
+ * ```
+ */
+defineWebComponent<Props, Events>('kai-radio-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 RadioGroup CONTROLLED so the host can
+  // read it (`el.value` / `: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-segmented's structure).
+  const [value, setValue] = createSignal(
+    (props.value as string | undefined) ?? element.getAttribute('value') ?? '',
+  );
+
+  // Coerce anything arriving through the `value` setter (a JS assignment, or the
+  // attributeChangedCallback write-back) to a string, falling back to the live
+  // attribute when nullish so the reflect write-back equals the signal and the guards
+  // below absorb it — no attr⇄prop feedback loop.
+  const coerce = (v: unknown): string =>
+    v == null ? (element.getAttribute('value') ?? '') : String(v);
+
+  // Apply a new value and fire kai-change once (the user-choice path).
+  const apply = (next: string) => {
+    if (untrack(value) === next) return;
+    setValue(next);
+    dispatch('kai-change', { value: next });
+  };
+
+  Object.defineProperty(element, 'value', {
+    get: () => value(),
+    set: (v: unknown) => { const next = coerce(v); if (untrack(value) !== next) setValue(next); },
+    configurable: true,
+    enumerable: true,
+  });
+
+  // Reflect internal value → the `[value]` host attribute (for `:host([value])`).
+  createEffect(() => {
+    const v = value();
+    if (v) {
+      if (element.getAttribute('value') !== v) element.setAttribute('value', v);
+    } else if (element.hasAttribute('value')) {
+      element.removeAttribute('value');
+    }
+  });
+
+  expose({
+    /** Focus the group's tab stop. That is the selected radio, or the first row when
+     *  nothing is selected yet. */
+    focus: (options?: FocusOptions) => {
+      const root = element.shadowRoot;
+      const radios = [...(root?.querySelectorAll<HTMLInputElement>('input[type="radio"]') ?? [])];
+      (radios.find((r) => r.checked) ?? radios[0])?.focus(options);
+    },
+  });
+
+  return (
+    <RadioGroup
+      options={(props.options ?? []) as KaiRadioOption[]}
+      value={value()}
+      name={props.name as string | undefined}
+      disabled={flag('disabled')}
+      label={props.label as string | undefined}
+      onChange={(next) => apply(next)}
+    />
+  );
+});

package/src/elements/register-impl.ts

@@ -54,6 +54,11 @@ import './artifact';
 import './scroll-button';
 import './popover';
 import './switch';
+import './checkbox';
+import './checkbox-group';
+import './radio-group';
+import './slider';
+import './select';
 import './button';
 import './avatar';
 import './badge';
@@ -94,6 +99,7 @@ import './setting-item';
 // Multi-agent workspace primitives (graduated from SolidJS prototypes)
 import './pane';
 import './pane-group';
+import './pane-grid';
 import './agent-card';
 import './dialog';
 import './dock';

package/src/elements/scroll-button.tsx

@@ -1,7 +1,7 @@
-import { createSignal, onCleanup, onMount } from 'solid-js';
+import { Show, createSignal, onCleanup, onMount } from 'solid-js';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
-import { ChevronDown } from 'lucide-solid';
+import { ArrowDown } from 'lucide-solid';
 import { defineWebComponent } from './define';
 
 interface Props extends Record<string, unknown> {
@@ -14,6 +14,14 @@ interface Props extends Record<string, unknown> {
   variant?: 'outline' | 'ghost' | 'default';
   /** Button size token. Defaults to `'icon'` (square). */
   size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+  /** The button's accessible name. It is announced whether or not the label is
+   *  visible, so the text is always localisable. Defaults to
+   *  `'Scroll to bottom'`. */
+  label?: string;
+  /** Also render `label` visibly beside the icon. Defaults to `false`, which
+   *  is the icon-only button. When the text is visible it IS the accessible
+   *  name, so nothing gets announced twice. */
+  showLabel?: boolean;
 }
 
 /** Events fired by `<kai-scroll-button>`. */
@@ -26,6 +34,27 @@ interface Events {
 
 const SCROLL_THRESHOLD = 50;
 
+/** The accessible name used when the consumer does not supply one. */
+const DEFAULT_LABEL = 'Scroll to bottom';
+
+/**
+ * The floating chip surface. Mirrors `surfaceClasses` in
+ * `components/scroll-button.tsx`: the shared `outline` button variant is
+ * `bg-muted/50`, half-transparent, so message text showed through a control
+ * floating over scrolling content and its edge measured about 1.05:1 against
+ * the thread behind it (SC 1.4.11 wants 3:1). `bg-card` is the opaque surface
+ * popovers and dropdowns already use, `border-input` is the kit's control edge
+ * and clears 3:1 in both themes, and `kai-elevation` is the shared themeable
+ * float shadow that keeps an opaque button reading as ABOVE the content.
+ * `ghost` and `default` are explicit consumer choices about the fill, so they
+ * keep theirs.
+ */
+function surfaceClasses(variant: Props['variant']) {
+  return (variant ?? 'outline') === 'outline'
+    ? 'border border-input bg-card text-card-foreground kai-elevation'
+    : 'kai-elevation';
+}
+
 /** Walk the composed tree upwards from `startEl` (outside shadow roots) to
  *  find the nearest scrollable ancestor. */
 function findScrollableAncestor(startEl: HTMLElement): HTMLElement | null {
@@ -63,7 +92,9 @@ defineWebComponent<Props, Events>('kai-scroll-button', {
   for: undefined,
   variant: 'outline',
   size: 'icon',
-}, (props, { element, dispatch }) => {
+  label: undefined,
+  showLabel: undefined,
+}, (props, { element, dispatch, flag }) => {
   const [isAtBottom, setIsAtBottom] = createSignal(true);
   let containerEl: HTMLElement | null = null;
   let cleanupFns: (() => void)[] = [];
@@ -104,18 +135,25 @@ defineWebComponent<Props, Events>('kai-scroll-button', {
 
   onCleanup(detach);
 
+  const label = () => (props.label as string | undefined) ?? DEFAULT_LABEL;
+  const showLabel = () => flag('showLabel');
+
   return (
     <Button
       variant={props.variant ?? 'outline'}
       size={props.size ?? 'icon'}
-      aria-label="Scroll to bottom"
+      // When the label is visible it IS the accessible name; an aria-label on
+      // top of it would override the visible text and the two could disagree.
+      aria-label={showLabel() ? undefined : label()}
       // While at the bottom this button is fully transparent and pointer-inert,
       // but it stayed in the tab order — a keyboard user landed on a control
       // they could not see. Mirrors ScrollButton in components/scroll-button.tsx.
       tabindex={isAtBottom() ? -1 : 0}
       aria-hidden={isAtBottom() ? 'true' : undefined}
       class={cn(
-        'rounded-full transition-all duration-150 ease-out',
+        'rounded-lg transition-all duration-150 ease-out',
+        surfaceClasses(props.variant),
+        showLabel() ? 'h-9 w-auto gap-1.5 px-3 text-sm' : '',
         !isAtBottom()
           ? 'translate-y-0 scale-100 opacity-100'
           : 'pointer-events-none translate-y-4 scale-95 opacity-0',
@@ -125,7 +163,17 @@ defineWebComponent<Props, Events>('kai-scroll-button', {
         dispatch('kai-scroll');
       }}
     >
-      <ChevronDown class="h-5 w-5" />
+      {/* h-4, not the h-5 the chevron used, and the same reasoning as
+          components/scroll-button.tsx: a ChevronDown only inks the lower part of
+          its 24px viewBox, so at a 20px box its visible mass is small, while
+          ArrowDown inks the full height (stem + head) and at 20px crowded the
+          padding. Re-checked here because this button box is 36px (size="icon")
+          rather than the Solid component's 40px, and 16px balances both. It is
+          also the size lucide pairs with text-sm, which the label renders at. */}
+      <ArrowDown class="h-4 w-4 shrink-0" aria-hidden="true" />
+      <Show when={showLabel()}>
+        <span>{label()}</span>
+      </Show>
     </Button>
   );
 });

package/src/elements/select.tsx

@@ -0,0 +1,165 @@
+import { createEffect, createSignal, untrack } from 'solid-js';
+import { defineWebComponent } from './define';
+import { Select } from '../ui/select';
+// 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 { KaiSelectOption } from './element-data-types';
+
+interface Props extends Record<string, unknown> {
+  /** The choices, in display order. Set as a JS PROPERTY (array), never an attribute.
+   *  Rendered in full: the kit never truncates, re-orders or de-duplicates them. */
+  options: KaiSelectOption[];
+  /** Controlled selected value. Settable and reflected to the `value` attribute.
+   *  `el.value = 'high'` drives it; choosing an option updates it and fires
+   *  `kai-change`. Read `el.value` for live state; for a `multiple` select read
+   *  `el.values` instead. */
+  value?: string;
+  /** Text for a leading, disabled, empty option: the "nothing chosen yet" row.
+   *  Omitted means no such row at all; there is no default wording, because inventing
+   *  one would put words in your UI. */
+  placeholder?: string;
+  /** Allow more than one selection. Turns the control into the platform's list box, so
+   *  the kit's chevron is not drawn. */
+  multiple?: boolean;
+  /** Force the invalid (destructive-border) state. */
+  invalid?: boolean;
+  /** Disable interaction. */
+  disabled?: boolean;
+  /** Set the native `required` attribute, and nothing more. Whether an empty select is
+   *  an error is the application's rule, not the kit's. */
+  required?: boolean;
+  /** Accessible label for the control. */
+  label?: string;
+  /** Form-control name, for a native form submit. */
+  name?: string;
+}
+
+/** Events fired by `<kai-select>`. */
+interface Events {
+  /** A choice was made. `value` is the first selected option (empty when nothing is
+   *  selected); `values` is every selected option, which is what a `multiple` select
+   *  needs. Both are always present, so neither shape silently loses the other. */
+  'kai-change': { value: string; values: string[] };
+}
+
+/**
+ * `<kai-select>` — a select over a REAL native `<select>`, in the kit's field box with
+ * the kit's own chevron. Native, not a hand-built listbox: that is what keeps the
+ * platform picker on mobile, type-ahead on desktop, form participation and the OS
+ * accessibility tree.
+ *
+ * The dropdown list itself stays OS chrome — it renders outside the page and no
+ * stylesheet reaches it. What the element does do is make it follow the kit's
+ * light/dark mode rather than the OS's.
+ *
+ * Feed it `options` (a JS-property array of `{ value, label?, disabled? }`), drive and
+ * read the selection with the `value` property (settable + reflected to the `value`
+ * attribute, so `:host([value])` and `el.value` see live state), and listen for
+ * `kai-change`.
+ *
+ * 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 list is
+ * reference-keyed, so mutating an option in place changes nothing on screen.
+ *
+ * ```html
+ * <kai-select value="high" placeholder="Choose a severity…" label="Severity"></kai-select>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ *   const select = document.querySelector('kai-select');
+ *   // ARRAY prop — a JS property, never an attribute.
+ *   select.options = [
+ *     { value: 'low', label: 'Low' },
+ *     { value: 'high', label: 'High priority' },
+ *     { value: 'legacy', label: 'Legacy', disabled: true },
+ *   ];
+ *   select.addEventListener('kai-change', (e) => console.log(e.detail.value, e.detail.values));
+ *   select.value = 'low';   // drive it (no kai-change — the host already knows)
+ * </script>
+ * ```
+ */
+defineWebComponent<Props, Events>('kai-select', {
+  options: [],
+  value: undefined,
+  placeholder: undefined,
+  multiple: undefined,
+  invalid: undefined,
+  disabled: undefined,
+  required: undefined,
+  label: undefined,
+  name: undefined,
+}, (props, ctx) => {
+  const { element, dispatch, flag, expose } = ctx;
+
+  // Lift the selection into the facade and drive Select CONTROLLED so the host can read
+  // it (`el.value` / `: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-radio-group'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 guards absorb 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-choice 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. `value` alone cannot represent it, and
+  // returning only the first option from a `multiple` select 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 primary 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 inner select (the host element can't reach it). */
+    focus: (options?: FocusOptions) =>
+      element.shadowRoot?.querySelector<HTMLSelectElement>('select')?.focus(options),
+  });
+
+  return (
+    <Select
+      options={(props.options ?? []) as KaiSelectOption[]}
+      value={values()}
+      placeholder={props.placeholder as string | undefined}
+      multiple={flag('multiple')}
+      invalid={flag('invalid')}
+      disabled={flag('disabled')}
+      required={flag('required')}
+      aria-label={props.label as string | undefined}
+      name={props.name as string | undefined}
+      onChange={(e) => apply([...e.currentTarget.selectedOptions].map((o) => o.value))}
+    />
+  );
+});

package/src/elements/slider.tsx

@@ -0,0 +1,171 @@
+import { createEffect, createSignal, untrack } from 'solid-js';
+import { defineWebComponent } from './define';
+import { Slider } from '../ui/slider';
+
+interface Props extends Record<string, unknown> {
+  /** Lowest selectable value. Required: a range with no bounds is a guess, and the
+   *  guess belongs to whoever knows what the number means. */
+  min?: number;
+  /** Highest selectable value. Required, for the same reason as `min`. */
+  max?: number;
+  /** Granularity. Omitted means the native default of 1; `any` means continuous. */
+  step?: number | 'any';
+  /** Controlled value. Settable and reflected to the `value` attribute. `el.value = 40`
+   *  drives it; dragging updates it and fires `kai-input` per step, `kai-change` on
+   *  release. Read `el.value` for live state. */
+  value?: number;
+  /** Disable interaction. */
+  disabled?: boolean;
+  /** Accessible label for the slider. */
+  label?: string;
+  /** Form-control name, for a native form submit. */
+  name?: string;
+  /** Show the current value beside the track. Off by default.
+   *
+   *  Two ways in, because one of them is not a scalar. As a bare ATTRIBUTE
+   *  (`<kai-slider value-label>`) it renders the raw number. As a JS PROPERTY it also
+   *  accepts a formatter function (`el.valueLabel = (v) => v + '%'`), for a slider that
+   *  is not counting bare numbers. A function cannot survive an attribute, so that half
+   *  is property-only.
+   *
+   *  The readout is hidden from assistive tech: the slider already reports the same
+   *  number, and an exposed copy would be announced twice. */
+  valueLabel?: boolean | ((value: number) => string);
+}
+
+/** Events fired by `<kai-slider>`. */
+interface Events {
+  /** The thumb moved. Fires per step during a drag or a key press. */
+  'kai-input': { value: number };
+  /** The value was committed: pointer released, or a key press finished. */
+  'kai-change': { value: number };
+}
+
+/**
+ * `<kai-slider>` — a slider over a real `<input type="range">`, with the kit's filled
+ * track and thumb. Arrows, Home, End and PageUp/PageDown all work because the control
+ * underneath is the browser's, not a reimplementation.
+ *
+ * Give it `min` and `max` (there are no defaults on purpose), drive and read the
+ * position with the `value` property, and listen for `kai-input` while dragging or
+ * `kai-change` on release.
+ *
+ * ```html
+ * <kai-slider min="0" max="100" step="5" value="40" label="Temperature"></kai-slider>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ *   const slider = document.querySelector('kai-slider');
+ *   slider.addEventListener('kai-input', (e) => console.log(e.detail.value));
+ *   slider.value = 70;   // drive it (no event — the host already knows)
+ * </script>
+ * ```
+ */
+defineWebComponent<Props, Events>('kai-slider', {
+  min: undefined,
+  max: undefined,
+  step: undefined,
+  value: undefined,
+  disabled: undefined,
+  label: undefined,
+  name: undefined,
+  valueLabel: undefined,
+}, (props, ctx) => {
+  const { element, dispatch, flag, expose } = ctx;
+
+  // `Number(null)` is 0 and `Number('')` is 0, both FINITE, so a naive
+  // `Number.isFinite(Number(v))` treats a missing attribute as a real zero and the
+  // fallbacks below never fire. Reject the empty cases before coercing.
+  const num = (v: unknown, fallback: number): number => {
+    if (v == null || (typeof v === 'string' && v.trim() === '')) return fallback;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : fallback;
+  };
+  // No invented bounds: these mirror the native `<input type="range">` defaults, which
+  // is what an author who wrote neither attribute is already going to get.
+  const min = () => num(props.min, 0);
+  const max = () => num(props.max, 100);
+
+  // Lift the position into the facade and drive Slider CONTROLLED so the host can read
+  // it (`el.value` / `:host([value])`) and set it after mount. Seed from the `value`
+  // property/attribute present on mount, falling back to the midpoint — HTML's own rule
+  // for a range with no value. kai-checkbox / kai-radio-group's structure, deliberately.
+  const [value, setValue] = createSignal(
+    props.value != null
+      ? num(props.value, (min() + max()) / 2)
+      : num(element.getAttribute('value'), (min() + max()) / 2),
+  );
+
+  // Coerce anything arriving through the `value` setter (a JS assignment, or the
+  // write-back `attributeChangedCallback` fires when the reflect effect below writes the
+  // attribute) to a number, 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): number =>
+    v == null ? num(element.getAttribute('value'), untrack(value)) : num(v, untrack(value));
+
+  // Apply a new value and fire once (the user path). No-op while disabled.
+  const apply = (next: number, type: 'kai-input' | 'kai-change') => {
+    if (flag('disabled')) return;
+    // kai-change fires on commit EVEN IF the value equals the last one this element
+    // reported, because "you let go here" is information the host cannot derive; the
+    // equality guard applies to the per-step stream only.
+    if (type === 'kai-input' && untrack(value) === next) return;
+    setValue(next);
+    dispatch(type, { value: next });
+  };
+
+  // Reads return LIVE state; host writes drive it WITHOUT firing an event — the host
+  // already knows what it set. The equality guard kills the reflect write-back.
+  Object.defineProperty(element, 'value', {
+    get: () => value(),
+    set: (v: unknown) => { const next = coerce(v); if (untrack(value) !== next) setValue(next); },
+    configurable: true,
+    enumerable: true,
+  });
+
+  // Reflect internal value → the `[value]` host attribute (for `:host([value])`).
+  createEffect(() => {
+    const v = String(value());
+    if (element.getAttribute('value') !== v) element.setAttribute('value', v);
+  });
+
+  expose({
+    /** Focus the inner range input (the host element can't reach it). */
+    focus: (options?: FocusOptions) =>
+      element.shadowRoot?.querySelector<HTMLInputElement>('input[type="range"]')?.focus(options),
+  });
+
+  // `step` arrives as a string when it came from an attribute. Resolve the one literal
+  // the spec allows (`any`, continuous) and treat everything else as a number.
+  const step = (): number | 'any' | undefined => {
+    const raw = props.step;
+    if (raw == null) return undefined;
+    if (String(raw) === 'any') return 'any';
+    const n = Number(raw);
+    return Number.isFinite(n) ? n : undefined;
+  };
+
+  // `valueLabel` arrives either as a bare attribute (the boolean half) or as a property
+  // holding a formatter (the half an attribute cannot carry). `flag` handles the first,
+  // a typeof check the second.
+  const valueLabel = (): boolean | ((v: number) => string) => {
+    const raw = props.valueLabel;
+    if (typeof raw === 'function') return raw as (v: number) => string;
+    return flag('valueLabel');
+  };
+
+  // Base sets `:host{display:block}`, which is right for a full-width track.
+  return (
+    <Slider
+      min={min()}
+      max={max()}
+      step={step()}
+      value={value()}
+      disabled={flag('disabled')}
+      aria-label={props.label as string | undefined}
+      name={props.name as string | undefined}
+      valueLabel={valueLabel()}
+      onInput={(e) => apply(e.currentTarget.valueAsNumber, 'kai-input')}
+      onChange={(e) => apply(e.currentTarget.valueAsNumber, 'kai-change')}
+    />
+  );
+});

package/src/elements/slots.ts

@@ -2,7 +2,7 @@
  * Composition slots for `kai-*` elements. A slot is a named region a consumer
  * fills with their own markup. This registry is the SINGLE SOURCE OF TRUTH:
  * the facade derives its detection from it (and, later, docs are generated
- * from it). See docs/superpowers/specs/2026-06-23-kai-chat-composition-seams-design.md.
+ * from it).
  */
 
 /** `inject` = additive (the built-in region still renders, your markup is added