@kitn.ai/ui 0.28.0 → 0.30.0

package/src/elements/response-stream.tsx

@@ -1,40 +0,0 @@
-import { defineWebComponent } from './define';
-import { ResponseStream, type Mode } from '../components/response-stream';
-
-interface Props extends Record<string, unknown> {
-  /** Text to stream. A string, or an `AsyncIterable<string>` (set as a JS
-   *  property, since async iterables can't be HTML attributes). */
-  text?: string | AsyncIterable<string>;
-  /** Reveal animation. */
-  mode?: Mode;
-  /** Characters/segments per tick. */
-  speed?: number;
-  /** Element tag to render as. */
-  as?: string;
-}
-
-/** Events fired by `<kai-response-stream>`. */
-interface Events {
-  /** Streaming finished. */
-  'kai-complete': void;
-}
-
-/**
- * `<kai-response-stream>` — reveals text with a typewriter or fade animation.
- * Text via the `text` property; `mode`/`speed` attributes; emits `kai-complete`.
- */
-defineWebComponent<Props, Events>('kai-response-stream', {
-  text: '',
-  mode: 'typewriter',
-  speed: 20,
-  as: undefined,
-}, (props, { dispatch }) => (
-  <ResponseStream
-    textStream={props.text ?? ''}
-    mode={props.mode}
-    speed={props.speed}
-    as={props.as}
-    class="text-body"
-    onComplete={() => dispatch('kai-complete')}
-  />
-));

package/src/elements/screen.tsx

@@ -1,90 +0,0 @@
-import { defineWebComponent } from './define';
-import { Screen, type ScreenController } from '../components/screen';
-import { wireDisclosure } from './disclosure';
-
-interface Props extends Record<string, unknown> {
-  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
-   *  attribute; the element still self-manages). Set `el.open = true`, or
-   *  `<kai-screen open>`; listen for `kai-open-change`. */
-  open?: boolean;
-  /** Initial open state on mount (uncontrolled seed). */
-  defaultOpen?: boolean;
-  /** Header title text. A projected `title` slot overrides it. (Named `headline`
-   *  because `title` collides with the global `HTMLElement.title` attribute.) */
-  headline?: string;
-  /** Show the back button (default true). */
-  back?: boolean;
-  /** Opt out of marking sibling elements inert/aria-hidden while open (for unusual layouts). */
-  noInert?: boolean;
-}
-
-/** Events fired by `<kai-screen>`. */
-interface Events {
-  /** Back navigation intent: the back button or Escape. The consumer flips their
-   *  own routing in response (the screen knows nothing about the trigger). */
-  'kai-back': Record<string, never>;
-  /** The screen opened or closed (a method, `Escape` close, or driven `open`). */
-  'kai-open-change': { open: boolean };
-}
-
-/**
- * `<kai-screen>` is a developer-swapped, full-bleed overlay destination: the
- * push/drill-in surface that takes over its mount point under a back-header. The
- * developer owns the swap (their own routing flips `open` in response to their
- * trigger button and the screen's `kai-back`); the screen owns being the takeover.
- *
- * It fills whatever it is mounted in (mount at the app root for a full takeover,
- * in a positioned region for a scoped one), marks sibling elements `inert` while
- * open (the standard modal pattern; opt out with `no-inert`), moves focus in on
- * open and restores it on close, and runs an enter/exit transition that honors
- * `prefers-reduced-motion`. `Escape` fires `kai-back`.
- *
- * ```html
- * <kai-screen headline="Design">
- *   <button slot="actions"><kai-avatar></kai-avatar></button>
- *   <div>…your surface…</div>
- * </kai-screen>
- * ```
- *
- * Open state is the standard disclosure surface: settable+reflecting `open`,
- * `kai-open-change`, and `show()`/`hide()`/`toggle()`; seed with `default-open`.
- * Parts: `header` · `back` · `title` · `body`.
- */
-defineWebComponent<Props, Events>('kai-screen', {
-  open: undefined,
-  defaultOpen: undefined,
-  headline: undefined,
-  back: undefined,
-  noInert: undefined,
-}, (props, ctx) => {
-  const { flag, element, dispatch, expose } = ctx;
-  let api: ScreenController | undefined;
-  let surface: HTMLElement | undefined;
-
-  // The standard disclosure surface: settable+reflecting `open`, kai-open-change,
-  // show/hide/toggle. See ./disclosure. This is the SOLE emitter of kai-open-change.
-  wireDisclosure(ctx, () => api, () => props.open);
-
-  // focus() shadows the host's native focus so it targets the screen surface
-  // inside the shadow root (the WebAwesome/Shoelace convention).
-  expose({
-    /** Move focus to the screen surface (no-op while closed). */
-    focus: (options?: FocusOptions) => surface?.focus(options),
-  });
-
-  return (
-    <Screen
-      defaultOpen={flag('defaultOpen')}
-      back={!(props.back === false || element.getAttribute('back') === 'false')}
-      noInert={flag('noInert')}
-      host={() => element}
-      titleSlot={<slot name="title">{props.headline as string | undefined}</slot>}
-      actions={<slot name="actions" />}
-      onBack={() => { dispatch('kai-back', {}); }}
-      controllerRef={(a) => (api = a)}
-      surfaceRef={(el) => (surface = el)}
-    >
-      <slot />
-    </Screen>
-  );
-});

package/src/elements/scroll-area.tsx

@@ -1,33 +0,0 @@
-import { ScrollArea, type ScrollOrientation } from '../ui/scroll-area';
-import { defineWebComponent } from './define';
-
-interface Props extends Record<string, unknown> {
-  /** Which axis scrolls. `vertical` (default) · `horizontal` · `both`. The cross
-   *  axis is clamped so content can't overflow it. */
-  orientation?: ScrollOrientation;
-}
-
-/**
- * `<kai-scroll-area>` — a scroll container with a themed, thin, cross-browser
- * scrollbar and a keyboard-reachable region. Project the scrollable content as
- * light-DOM children and give the element a bounded size in your layout; the
- * content then scrolls inside. Use `orientation` to pick the axis. Restyle the
- * container via `::part(viewport)`; the scrollbar follows the
- * `--color-scrollbar-thumb` token.
- *
- * ```html
- * <kai-scroll-area style="height: 16rem">…long content…</kai-scroll-area>
- * <kai-scroll-area orientation="horizontal" style="max-width: 24rem">…wide row…</kai-scroll-area>
- * ```
- */
-defineWebComponent<Props>('kai-scroll-area', {
-  orientation: 'vertical',
-}, (props) => (
-  <>
-    {/* The element is a block box; the consumer sets its size, the viewport fills it. */}
-    <style>{':host{display:block;min-height:0}'}</style>
-    <ScrollArea class="h-full max-h-full w-full max-w-full" part="viewport" orientation={props.orientation as ScrollOrientation}>
-      <slot />
-    </ScrollArea>
-  </>
-));

package/src/elements/scroll-button.tsx

@@ -1,179 +0,0 @@
-import { Show, createSignal, onCleanup, onMount } from 'solid-js';
-import { cn } from '../utils/cn';
-import { Button } from '../ui/button';
-import { ArrowDown } from 'lucide-solid';
-import { defineWebComponent } from './define';
-
-interface Props extends Record<string, unknown> {
-  /** CSS id of the scroll container to control. When omitted the element
-   *  walks up the DOM (outside its own shadow root) to find the nearest
-   *  scrollable ancestor. Mirrors the `for` convention of `<label for="...">`. */
-  for?: string;
-  /** Button visual variant: `'outline' | 'ghost' | 'default'`. Defaults to
-   *  `'outline'`. */
-  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>`. */
-interface Events {
-  /** Emitted when the user clicks the button and `scrollToBottom()` is
-   *  called. Carries no detail; consumers use it to know a manual scroll
-   *  occurred. */
-  'kai-scroll': void;
-}
-
-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 {
-  let el: HTMLElement | null = startEl.parentElement;
-  while (el && el !== document.documentElement) {
-    const style = getComputedStyle(el);
-    const overflow = style.overflow + style.overflowY;
-    if (/auto|scroll/.test(overflow) && el.scrollHeight > el.clientHeight) {
-      return el;
-    }
-    el = el.parentElement;
-  }
-  return null;
-}
-
-/**
- * `<kai-scroll-button>` — a floating "scroll to bottom" button for any
- * scrollable container. It is visible when the container is scrolled up
- * (hidden when at the bottom) and scrolls the container to the bottom on
- * click.
- *
- * **Wiring the scroll target** — use the `for` attribute to point at the
- * container by its DOM `id`:
- * ```html
- * <div id="my-chat" style="overflow:auto; height:400px">...</div>
- * <kai-scroll-button for="my-chat"></kai-scroll-button>
- * ```
- * When `for` is omitted the element walks upward from its host to the nearest
- * scrollable ancestor — useful when it is slotted or nested inside the
- * container.
- *
- * Emits `kai-scroll` (no detail) each time the button is clicked.
- */
-defineWebComponent<Props, Events>('kai-scroll-button', {
-  for: undefined,
-  variant: 'outline',
-  size: 'icon',
-  label: undefined,
-  showLabel: undefined,
-}, (props, { element, dispatch, flag }) => {
-  const [isAtBottom, setIsAtBottom] = createSignal(true);
-  let containerEl: HTMLElement | null = null;
-  let cleanupFns: (() => void)[] = [];
-
-  function checkIfAtBottom() {
-    if (!containerEl) return;
-    const { scrollTop, scrollHeight, clientHeight } = containerEl;
-    setIsAtBottom(scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD);
-  }
-
-  function scrollToBottom() {
-    if (!containerEl) return;
-    containerEl.scrollTo({ top: containerEl.scrollHeight, behavior: 'smooth' });
-    setIsAtBottom(true);
-  }
-
-  function attach(el: HTMLElement) {
-    containerEl = el;
-    el.addEventListener('scroll', checkIfAtBottom, { passive: true });
-    checkIfAtBottom();
-    cleanupFns.push(() => el.removeEventListener('scroll', checkIfAtBottom));
-  }
-
-  function detach() {
-    cleanupFns.forEach((fn) => fn());
-    cleanupFns = [];
-    containerEl = null;
-  }
-
-  onMount(() => {
-    // Resolve the scroll container: `for` id → nearest scrollable ancestor.
-    const target = props.for
-      ? document.getElementById(props.for)
-      : findScrollableAncestor(element);
-
-    if (target) attach(target);
-  });
-
-  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'}
-      // 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-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',
-      )}
-      onClick={() => {
-        scrollToBottom();
-        dispatch('kai-scroll');
-      }}
-    >
-      {/* 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/search.tsx

@@ -1,185 +0,0 @@
-import { createEffect, createSignal, untrack, Show } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Input } from '../ui/input';
-import { Kbd } from '../ui/kbd';
-import { Loader } from '../components/loader';
-import { renderIcon } from '../ui/icon';
-
-interface Props extends Record<string, unknown> {
-  /** Controlled query. Settable and reflected to the `value` attribute. Read
-   *  `el.value` for live state. */
-  value?: string;
-  /** Placeholder. Defaults to `Search…`. */
-  placeholder?: string;
-  /** Leading icon-NAME string (a curated name, URL, or text), resolved to a glyph
-   *  the same way `kai-button`'s `icon` is. Defaults to `search`. */
-  icon?: string;
-  /** Debounce window for `kai-search`, in ms. Defaults to `200`. */
-  debounce?: number;
-  /** Show a spinner in place of the leading icon while results load. */
-  loading?: boolean;
-  /** Optional shortcut hint shown (as a `kai-kbd`) while the field is empty,
-   *  e.g. `Mod+K`. Display only; it does not bind the key. */
-  shortcut?: string;
-}
-
-/** Events fired by `<kai-search>`. */
-interface Events {
-  /** The query changed (debounced live, and on clear). */
-  'kai-search': { value: string };
-  /** Enter was pressed. */
-  'kai-submit': { value: string };
-  /** The field committed (blur). */
-  'kai-change': { value: string };
-}
-
-/**
- * `<kai-search>` — a debounced filter field built on `kai-input`. Type to fire a
- * debounced `kai-search`, press Enter for `kai-submit`. A clear (×) button shows
- * once there's a value; an optional `shortcut` renders a `kai-kbd` hint while the
- * field is empty.
- *
- * ```html
- * <kai-search placeholder="Search docs" shortcut="Mod+K"></kai-search>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const s = document.querySelector('kai-search');
- *   s.addEventListener('kai-search', (e) => filter(e.detail.value));
- *   s.addEventListener('kai-submit', (e) => go(e.detail.value));
- * </script>
- * ```
- *
- * Drive/read the query with the `value` property (reflected to the attribute).
- * Restyle via `::part(field)`, `::part(input)`, and `::part(clear)`.
- */
-defineWebComponent<Props, Events>('kai-search', {
-  value: undefined,
-  placeholder: 'Search…',
-  icon: 'search',
-  debounce: 200,
-  loading: false,
-  shortcut: undefined,
-}, (props, ctx) => {
-  const { element, dispatch, flag, expose } = ctx;
-
-  // Lift the query into the facade and drive Input CONTROLLED so the host can read
-  // it (`el.value` / `:host([value])`) and set it after mount. Mirrors kai-segmented.
-  const [value, setValue] = createSignal(
-    (props.value as string | undefined) ?? element.getAttribute('value') ?? '',
-  );
-
-  const coerce = (v: unknown): string =>
-    v == null ? (element.getAttribute('value') ?? '') : String(v);
-
-  // Reads return LIVE state; host writes (`el.value = …`) drive it WITHOUT firing
-  // events. The equality guard kills the reflect write-back loop.
-  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 → `[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');
-    }
-  });
-
-  // Debounced kai-search: each keystroke resets the timer; it fires once after the
-  // window. Clearing fires immediately (timer cancelled).
-  let timer: ReturnType<typeof setTimeout> | undefined;
-  const debounceMs = () => {
-    const ms = Number(props.debounce ?? 200);
-    return Number.isFinite(ms) && ms >= 0 ? ms : 200;
-  };
-  const scheduleSearch = (next: string) => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => dispatch('kai-search', { value: next }), debounceMs());
-  };
-
-  const getInput = (): HTMLInputElement | null =>
-    element.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;
-
-  const onInput = (next: string) => {
-    setValue(next);
-    scheduleSearch(next);
-  };
-
-  // Empty the field, fire kai-search '' immediately (cancelling any pending), refocus.
-  const clear = () => {
-    if (timer) clearTimeout(timer);
-    setValue('');
-    dispatch('kai-search', { value: '' });
-    getInput()?.focus();
-  };
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter') dispatch('kai-submit', { value: untrack(value) });
-  };
-
-  expose({
-    /** Focus the search input inside the shadow root. A native `focus()` on the
-     *  host lands on the host itself and never reaches it. */
-    focus: () => getInput()?.focus(),
-    /** Empty the field and fire `kai-search` with an empty value immediately,
-     *  cancelling any debounced search still in flight, then return focus to the
-     *  input. Same path as the trailing clear button. */
-    clear,
-  });
-
-  // Leading: a spinner while loading, otherwise the resolved icon glyph.
-  const leading = (
-    <Show
-      when={flag('loading')}
-      fallback={renderIcon((props.icon as string) ?? 'search', {
-        class: 'size-4 shrink-0',
-        imgClass: 'size-4 shrink-0',
-        spanClass: 'inline-flex size-4 shrink-0 items-center justify-center',
-        ariaHidden: true,
-      })}
-    >
-      <Loader variant="circular" size="sm" />
-    </Show>
-  );
-
-  // Trailing: a clear button once there's a value, else a shortcut hint if set.
-  const trailing = (
-    <>
-      <Show when={value()}>
-        <button
-          type="button"
-          part="clear"
-          aria-label="Clear"
-          class="inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          onClick={clear}
-        >
-          {renderIcon('x', { class: 'size-4', imgClass: 'size-4' })}
-        </button>
-      </Show>
-      <Show when={!value() && props.shortcut}>
-        <Kbd keys={props.shortcut as string} size="sm" />
-      </Show>
-    </>
-  );
-
-  return (
-    <>
-      <style>{':host{display:block}'}</style>
-      <Input
-        type="search"
-        value={value()}
-        placeholder={(props.placeholder as string) ?? 'Search…'}
-        leading={leading}
-        trailing={trailing}
-        onValueInput={onInput}
-        onValueChange={(v) => dispatch('kai-change', { value: v })}
-        onKeyDown={onKeyDown}
-      />
-    </>
-  );
-});

package/src/elements/segmented.tsx

@@ -1,129 +0,0 @@
-import { createEffect, createSignal, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Segmented, type SegmentedOption } from '../ui/segmented';
-import { renderIcon } from '../ui/icon';
-// 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 { KaiSegmentedOption } from './element-data-types';
-
-interface Props extends Record<string, unknown> {
-  /** The selectable segments, left to right. Set as a JS property (array). */
-  options: KaiSegmentedOption[];
-  /** Controlled selected `value`. Settable and reflected to the `value`
-   *  attribute. `el.value = 'preview'` drives it; choosing a segment updates it
-   *  and fires `kai-change`. Read `el.value` for live state. */
-  value?: string;
-  /** Control density: `sm` or `md`. Defaults to `md`. */
-  size?: 'sm' | 'md';
-}
-
-/** Events fired by `<kai-segmented>`. */
-interface Events {
-  /** A segment was chosen. */
-  'kai-change': { value: string };
-}
-
-/**
- * `<kai-segmented>` — a single-select pill track (segmented / toggle group).
- * Feed it `options` (a JS-property array), 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`.
- *
- * ```html
- * <kai-segmented value="preview"></kai-segmented>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const seg = document.querySelector('kai-segmented');
- *   seg.options = [
- *     { value: 'code', label: 'Code', icon: 'code' },
- *     { value: 'preview', label: 'Preview', icon: 'monitor' },
- *   ];
- *   seg.addEventListener('kai-change', (e) => console.log(e.detail.value));
- *   seg.value = 'code'; // drive it (no kai-change — the host already knows)
- * </script>
- * ```
- *
- * Each option's `icon` is an icon-name string resolved to a glyph (curated name,
- * URL, or text). Restyle via `::part(track)` and `::part(segment)`.
- */
-defineWebComponent<Props, Events>('kai-segmented', {
-  options: [],
-  value: undefined,
-  size: 'md',
-}, (props, ctx) => {
-  const { element, dispatch } = ctx;
-
-  // Lift the selected value into the facade and drive Segmented 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 (options usually arrive
-  // as a property after upgrade, so we don't auto-select the first segment here).
-  const [value, setValue] = createSignal(
-    (props.value as string | undefined) ?? element.getAttribute('value') ?? '',
-  );
-
-  // Coerce any value coming through the `value` setter (a JS assignment, or the
-  // write-back from `attributeChangedCallback`) to a string — falling back to the
-  // live attribute when it's nullish, so the reflect write-back equals the signal
-  // and the equality guards below absorb it (no attr⇄prop feedback loop; mirrors
-  // kai-switch's `checked`).
-  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 });
-  };
-
-  // Override the `value` property so reads return LIVE state (the signal) and host
-  // writes (`el.value = …`) drive it WITHOUT firing kai-change — distinct from the
-  // user-choice path. The equality guard kills the reflect write-back loop.
-  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])`).
-  // The guard against the live attribute keeps the write-back the reflect triggers
-  // (attributeChangedCallback → setter) from looping.
-  createEffect(() => {
-    const v = value();
-    if (v) {
-      if (element.getAttribute('value') !== v) element.setAttribute('value', v);
-    } else if (element.hasAttribute('value')) {
-      element.removeAttribute('value');
-    }
-  });
-
-  // Resolve each option's icon-NAME string into a rendered glyph, the same path
-  // kai-button uses for its `icon` prop, and hand the primitive `{value,label,icon:JSX}`.
-  const resolved = (): SegmentedOption[] =>
-    (props.options ?? []).map((o) => ({
-      value: o.value,
-      label: o.label,
-      icon: o.icon
-        ? renderIcon(o.icon, {
-            class: 'size-4 shrink-0',
-            imgClass: 'size-4 shrink-0',
-            spanClass: 'inline-flex size-4 shrink-0 items-center justify-center',
-            ariaHidden: true,
-          })
-        : undefined,
-    }));
-
-  return (
-    <>
-      {/* Base sets `:host{display:block}`; the track flows inline like a pill. */}
-      <style>{':host{display:inline-flex}'}</style>
-      <Segmented
-        options={resolved()}
-        value={value()}
-        size={(props.size as 'sm' | 'md' | undefined) ?? 'md'}
-        onChange={(next) => apply(next)}
-      />
-    </>
-  );
-});