@kitn.ai/ui 0.28.0 → 0.29.0

package/src/elements/source.tsx

@@ -1,126 +0,0 @@
-import { createSignal, For, onCleanup, onMount, Show } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Source, SourceTrigger, SourceContent, SourceList } from '../components/source';
-// Public shape of the `sources` prop; lives in ./element-data-types so the ROOT
-// entry can re-export it (see that file's header).
-import type { KaiSourceItem } from './element-data-types';
-
-// --- <kai-source> — a single citation link with hover preview ---
-
-interface SourceProps extends Record<string, unknown> {
-  /** The URL this citation links to (the domain also seeds the default label/favicon). */
-  href?: string;
-  /** Trigger label (defaults to the domain). */
-  label?: string;
-  /** Hover-card headline. Attribute: `headline` (`title` is avoided because it
-   *  is a global HTML attribute that reflects in a CE constructor and breaks
-   *  it). */
-  headline?: string;
-  /** Hover-card body text describing the source. */
-  description?: string;
-  /** Show the source's favicon next to the trigger label. */
-  showFavicon?: boolean;
-}
-
-defineWebComponent<SourceProps>('kai-source', {
-  href: '',
-  label: undefined,
-  headline: '',
-  description: '',
-  showFavicon: false,
-}, (props, { flag }) => (
-  <>
-    {/* The shared element base sets `:host{display:block}` (styles.css). A block host
-        makes each citation chip its own line box, so inline `[n]` markers stack and
-        push the trailing prose/period to a new line. inline-flex (like kai-button /
-        kai-tooltip) drops the line box so the chip flows inline with the answer text. */}
-    <style>{':host{display:inline-flex}'}</style>
-    <Show when={props.href}>
-      <Source href={props.href!}>
-        <SourceTrigger label={props.label} showFavicon={flag('showFavicon')} />
-        <SourceContent title={props.headline ?? ''} description={props.description ?? ''} />
-      </Source>
-    </Show>
-  </>
-));
-
-// --- <kai-sources> — a wrapped list of citation links ---
-
-
-interface SourceListProps extends Record<string, unknown> {
-  /** The sources to render. Set as a JS property. Omit to supply them as
-   *  `<kai-source>` light-DOM children instead; when both are present the
-   *  property's sources come first. */
-  sources?: KaiSourceItem[];
-  /** Show favicons on all items (per-item `showFavicon` overrides). */
-  showFavicon?: boolean;
-  /**
-   * When true, each citation chip is labelled with its 1-based index in the
-   * merged (prop + declarative-children) list (`[1]`, `[2]`, …) instead of the
-   * per-item `label` or domain fallback.
-   *
-   * HTML attribute: `numbered` (boolean: a bare attribute or
-   * `numbered="true"`). JS property:   `el.numbered = true`.
-   */
-  numbered?: boolean;
-}
-
-/** Parse a single light-DOM `<kai-source>` element into a `KaiSourceItem` descriptor.
- *  Attribute mapping:
- *   - `href`        → KaiSourceItem.href
- *   - `label`       → KaiSourceItem.label
- *   - `headline`    → KaiSourceItem.title  (matches kai-source's prop name; "title" is a
- *                       reserved HTMLElement attribute so kai-source uses "headline")
- *   - `description` → KaiSourceItem.description
- *   - `show-favicon`→ KaiSourceItem.showFavicon (bare boolean attribute)
- */
-export function parseKaiSourceElement(n: Element): KaiSourceItem {
-  return {
-    href: n.getAttribute('href') ?? '',
-    label: n.getAttribute('label') ?? undefined,
-    title: n.getAttribute('headline') ?? undefined,
-    description: n.getAttribute('description') ?? undefined,
-    showFavicon: n.hasAttribute('show-favicon') && n.getAttribute('show-favicon') !== 'false',
-  };
-}
-
-defineWebComponent<SourceListProps>('kai-sources', {
-  sources: [],
-  showFavicon: false,
-  numbered: false,
-}, (props, { element, flag }) => {
-  // Read declarative <kai-source> children from light DOM.
-  // The shadow root has no <slot> for them, so they are invisible — pure data carriers.
-  const [slottedSources, setSlottedSources] = createSignal<KaiSourceItem[]>([]);
-  onMount(() => {
-    const read = () => {
-      const nodes = [...element.querySelectorAll('kai-source')];
-      setSlottedSources(nodes.map(parseKaiSourceElement));
-    };
-    read();
-    const observer = new MutationObserver(read);
-    observer.observe(element, { childList: true, attributes: true, subtree: true });
-    onCleanup(() => observer.disconnect());
-  });
-
-  // Prop sources take precedence; slotted children are appended after.
-  const allSources = () => [...(props.sources ?? []), ...slottedSources()];
-
-  const isNumbered = () => flag('numbered');
-
-  return (
-    <SourceList>
-      <For each={allSources()}>
-        {(s, i) => (
-          <Source href={s.href}>
-            <SourceTrigger
-              label={isNumbered() ? i() + 1 : s.label}
-              showFavicon={s.showFavicon ?? flag('showFavicon')}
-            />
-            <SourceContent title={s.title ?? ''} description={s.description ?? ''} />
-          </Source>
-        )}
-      </For>
-    </SourceList>
-  );
-});

package/src/elements/status.tsx

@@ -1,42 +0,0 @@
-import { defineWebComponent } from './define';
-import { Status, type StatusKind } from '../ui/status';
-
-interface Props extends Record<string, unknown> {
-  /** Presence/notification state → color. `new` (default) maps to the blue hue. */
-  status?: StatusKind;
-  /** Animated ping ring (off by default; respects prefers-reduced-motion). */
-  pulse?: boolean;
-  /** Accessible name. Without it the dot is decorative. */
-  label?: string;
-  /** `sm` (default) or `md`. */
-  size?: 'sm' | 'md';
-}
-
-/**
- * `<kai-status>` — a small presence / new dot.
- *
- * ```html
- * <kai-status status="online" label="Online"></kai-status>
- * <kai-status status="new" pulse></kai-status>
- * ```
- * Recolor via `::part(dot)`.
- */
-defineWebComponent<Props>('kai-status', {
-  status: 'new',
-  pulse: false,
-  label: undefined,
-  size: 'sm',
-}, (props, { flag }) => (
-  <>
-    {/* Base sets `:host{display:block}`; a presence dot sits inline beside an
-        avatar/label, so inline-flex like kai-button. */}
-    <style>{':host{display:inline-flex}'}</style>
-    <Status
-      status={(props.status as StatusKind) ?? 'new'}
-      size={(props.size as 'sm' | 'md') ?? 'sm'}
-      pulse={flag('pulse')}
-      label={props.label as string | undefined}
-      part="dot"
-    />
-  </>
-));

package/src/elements/styles.css

@@ -1,328 +0,0 @@
-/* Element-bundle stylesheet, and the SOURCE OF TRUTH for element CSS. Compiled to
-   compiled.css and injected into each custom element's shadow root;
-   .storybook/styles.css @imports this file rather than restating it, so a rule
-   added here reaches the shadow roots AND the light-DOM Solid stories at once.
-
-   It used to be the other way round — Storybook hand-copied a few of these rules
-   under "Mirror the shipped ..." comments. Nothing enforced the copy, so
-   .kai-radio, .kai-checkbox, .kai-range and .kai-focus-inset were simply missing
-   there: three form controls rendered as raw OS chrome in every story while the
-   shipped element rendered them fully designed, and an agent and the owner each
-   concluded the kit had unstyled controls. Never copy a rule from here into the
-   Storybook sheet; add it here.
-
-   The one thing that cannot cross is :host, which selects nothing in the light
-   DOM. Its defaults are re-stated on `body` in the Storybook sheet's shim. */
-@import "tailwindcss";
-/* tw-animate-css supplies the animate-in/animate-out + slide/fade/zoom utilities
-   the kit uses for every overlay enter/exit (toast, popover, tooltip, dropdown,
-   hover-card, the message action-row hide). Without this @import those classes
-   compile to nothing and all the animations are silently dead. Compiled into
-   compiled.css at build time, so it's a build-time dep only (no consumer import). */
-@import "tw-animate-css";
-@import "../../theme.css";
-@plugin "@tailwindcss/typography";
-
-@source "../";
-
-@layer base {
-  /* Base typography is token-driven so a theme can restyle it. --kai-font-base is
-     the family for ALL text/UI (named "base", not "sans", so a serif body works);
-     --kai-tracking is global letter-spacing. Both pierce the Shadow DOM via the
-     var() fallback, exactly like the --kai-color-* tokens.
-
-     font-size is the third: without it every shadow root inherited the DOCUMENT's
-     size (16px in a stock page), so any surface that never set an explicit text-*
-     class rendered a step larger than the rest of the kit and looked like a bug in
-     that one component. --text-body is the scale's primary reading size and itself
-     resolves through --kai-text-body, so overriding that one token still moves the
-     default. The literal fallback matches theme.css's --text-body so the rule is
-     still correct if this sheet is ever used without the @theme block. */
-  :host {
-    display: block;
-    font-family: var(--kai-font-base, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
-    font-size: var(--text-body, var(--kai-text-body, 0.875rem));
-    letter-spacing: var(--kai-tracking, normal);
-  }
-  /* Code/monospace surfaces use --kai-font-code (named for its ROLE — code — not
-     "mono", so any family works). Covers inline code, <pre>, and code blocks. */
-  code, kbd, samp, pre {
-    font-family: var(--kai-font-code, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
-  }
-  * { border-color: var(--color-border); }
-
-  /* Native controls (date/time pickers, <select>, number spinners, the
-     checkbox/radio fallbacks, scrollbars) must follow the kit's light/dark
-     mode — NOT the OS — so e.g. the native calendar icon never renders black
-     on a dark surface. `color-scheme` drives that native rendering; we set it
-     from the resolved mode (the `.dark` scope the element factory toggles). */
-  :host { color-scheme: light; }
-  .dark { color-scheme: dark; }
-
-  /* One token-driven focus ring for EVERY focusable element in the shadow root.
-     Blue by default (via --color-ring), consistent in light + dark, and
-     overridable through --kai-color-ring. Uses `outline` (not a box-shadow
-     ring) because it follows the element's radius and — unlike a `ring-*`
-     utility — is written in literal values, so it does not depend on any
-     `--tw-*` custom property. That matters more than it looks: `@property`
-     registration is document-global and is ignored inside a shadow root, so
-     every `--tw-*` here is unset and every `ring-*` utility computes to
-     nothing. This literal rule is the only reason most of the kit had a focus
-     indicator at all. `:focus-visible` so it only appears for keyboard
-     navigation, never on a mouse click. Components that render their own ring
-     set `focus-visible:outline-none` (a utility in a later cascade layer) and
-     win over this — so there's no double ring, just a guaranteed blue fallback
-     for the many controls that have no explicit focus style.
-
-     CAVEAT, learned the hard way: an outline is NOT immune to clipping. It is
-     unaffected by the element's OWN overflow, but `outline-offset: 2px` draws
-     it entirely outside the border box, where an ANCESTOR with
-     `overflow: clip`/`hidden` erases it completely. Controls that sit flush
-     inside such a container need `.kai-focus-inset` below. */
-  :focus-visible {
-    outline: 2px solid var(--color-ring);
-    outline-offset: 2px;
-  }
-
-  /* Consistent cross-platform scrollbars for EVERY scroll region inside the
-     shadow root (message list, conversation list, menus, hover cards, code
-     blocks, the prompt textarea …). Thin + rounded + subtle, themed via tokens
-     for light/dark, thumb stronger on hover. Track stays transparent and
-     overflow is untouched, so no scrollbar is forced where none is needed.
-     Scoped to the shadow root, so it never restyles the host page. */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-scrollbar-thumb) transparent;
-  }
-  *::-webkit-scrollbar { width: 8px; height: 8px; }
-  *::-webkit-scrollbar-track { background: transparent; }
-  *::-webkit-scrollbar-thumb {
-    background-color: var(--color-scrollbar-thumb);
-    border-radius: 9999px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-  }
-  *::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }
-  *::-webkit-scrollbar-corner { background: transparent; }
-
-  /* SELECTED text, kit-owned. Scoped to the shadow root — deliberately, and this
-     is the whole design decision, so read it before "simplifying" it into
-     theme.css.
-
-     WHY THE KIT OWNS IT AT ALL: left to the UA, the browser's blue selection was
-     visually stronger than the kit's OWN deliberate emphasis (the composer's
-     --color-highlight mark), so an incidental drag-select outranked a keyword the
-     app had flagged on purpose. How selected text reads is a fact about the
-     medium, which is the kit's call.
-
-     WHY ONLY HERE, AND NOT IN theme.css: theme.css is imported into a CONSUMER's
-     Tailwind build, so a bare ::selection there would restyle every paragraph on
-     their page — the kit deciding for the app's own content, which is not ours to
-     decide. The shadow root IS the kit's DOM, so the same rule is unambiguous
-     here. Identical reasoning to the scrollbar and :focus-visible rules above,
-     which are scoped the same way and for the same reason. theme.css therefore
-     carries the TOKENS only, and a Solid-layer consumer rendering our components
-     into their own light DOM opts in with one rule of their own:
-     `.my-chat ::selection { background-color: var(--color-selection); … }`.
-
-     WHY THE RULE MUST BE IN THIS SHEET AND NOT INHERITED: ::selection does NOT
-     cross the shadow boundary the way ordinary inherited properties do — a
-     document-level ::selection leaves shadow content on the UA default. The
-     --kai-color-selection TOKEN does pierce (custom properties inherit normally),
-     which is what keeps a consumer override working.
-
-     Both background AND color are set; see the theme.css note for why the
-     foreground is load-bearing rather than cosmetic (coloured text falls under
-     WCAG AA on this fill if it keeps its own colour). */
-  ::selection {
-    background-color: var(--color-selection);
-    color: var(--color-selection-foreground);
-  }
-
-  /* Respect a user's reduced-motion preference: disable the tw-animate-css
-     enter/exit keyframe animations (toasts, overlays, cards) so they appear and
-     disappear instantly instead of sliding/fading. Targets the utility classes
-     tw-animate-css emits (.animate-in / .animate-out) plus any arbitrary
-     `animate-[…]` keyframe utility. */
-  @media (prefers-reduced-motion: reduce) {
-    .animate-in,
-    .animate-out,
-    [class*="animate-["] {
-      animation: none !important;
-    }
-  }
-}
-
-@layer components {
-  /* Focus ring drawn INSIDE the element's border box, for focusable regions
-     that sit flush against a clipping ancestor. The scrollable code-block body
-     and the message log are both `overflow-*` regions filling a rounded
-     `overflow: clip` container, so the default `outline-offset: 2px` put the
-     whole ring outside the clip and it never painted — the outline computed
-     correctly, matched `:focus-visible`, and was erased before it reached the
-     screen. A negative offset keeps it clear of the boundary. Same token and
-     width as the base ring, so it reads identically. */
-  .kai-focus-inset:focus-visible {
-    outline: 2px solid var(--color-ring);
-    outline-offset: -2px;
-  }
-
-  /* Designed radio + checkbox (appearance-none) so the form controls read as
-     intentional, theme correctly in light/dark, and have comfortable targets —
-     replacing the weak native defaults. Used via `.kai-radio` / `.kai-checkbox`. */
-  .kai-radio,
-  .kai-checkbox {
-    appearance: none;
-    -webkit-appearance: none;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-    margin: 0;
-    flex-shrink: 0;
-    cursor: pointer;
-    border: 1.5px solid var(--color-input);
-    background-color: var(--color-background);
-    display: inline-grid;
-    place-content: center;
-    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
-    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease,
-      transform 0.1s ease;
-  }
-  .kai-radio { border-radius: 9999px; }
-  .kai-checkbox { border-radius: 0.3rem; }
-  .kai-radio::after {
-    content: "";
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
-    border-radius: 9999px;
-    background-color: var(--color-primary);
-    transform: scale(0);
-    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-  .kai-radio:checked { border-color: var(--color-primary); }
-  .kai-radio:checked::after { transform: scale(1); }
-  .kai-checkbox:checked {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-  }
-  .kai-checkbox::after {
-    content: "";
-    inline-size: 0.8rem;
-    block-size: 0.8rem;
-    background-color: var(--color-primary-foreground);
-    transform: scale(0);
-    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
-  }
-  .kai-checkbox:checked::after { transform: scale(1); }
-  .kai-radio:hover:not(:disabled),
-  .kai-checkbox:hover:not(:disabled) {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 9%, transparent);
-  }
-  .kai-radio:active:not(:disabled),
-  .kai-checkbox:active:not(:disabled) { transform: scale(0.92); }
-  .kai-checkbox:checked {
-    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 26%, transparent);
-  }
-  /* The mixed state ("some of the children below are ticked"). `indeterminate` is a
-     DOM property with no HTML attribute, so a rule is the ONLY way it can be seen —
-     without one a mixed box paints pixel-identically to an unchecked one and lies
-     about its state. That was live: `<kai-tasks>` in `select` mode puts an
-     indeterminate select-all above a partial selection, and it read as "none
-     selected".
-
-     Same fill and the same masked `::after` as `:checked`, with the tick mask
-     swapped for a bar, so the two states are siblings of one technique rather than
-     two: the bar is `--color-primary-foreground` on `--color-primary`, exactly the
-     pair the tick already uses, so it themes and contrasts identically in both
-     themes and stays consumer-themable through the same tokens.
-
-     Ordered AFTER the `:checked` rules on purpose. `indeterminate` is independent of
-     `checked`, so a box can be both; specificity is equal, so source order decides,
-     and mixed-wins is what the browser's own native rendering does.
-
-     Scoped to `.kai-checkbox` on purpose: `:indeterminate` also matches every radio
-     in a group with nothing selected, and an empty radio group must go on reading as
-     empty rather than sprouting a third state. */
-  .kai-checkbox:indeterminate {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-primary) 26%, transparent);
-  }
-  .kai-checkbox:indeterminate::after {
-    transform: scale(1);
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
-  }
-  .kai-radio:disabled,
-  .kai-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }
-
-  /* Custom range slider: a filled track (--kai-range-fill set by the widget) and a
-     refined thumb that scales on hover/press with a focus halo — no native chrome. */
-  .kai-range {
-    appearance: none;
-    -webkit-appearance: none;
-    inline-size: 100%;
-    block-size: 1.25rem;
-    background: transparent;
-    cursor: pointer;
-    margin: 0;
-  }
-  .kai-range::-webkit-slider-runnable-track {
-    block-size: 0.375rem;
-    border-radius: 9999px;
-    border: none;
-    box-shadow: none;
-    background: linear-gradient(
-      to right,
-      var(--color-primary) var(--kai-range-fill, 0%),
-      var(--color-muted) var(--kai-range-fill, 0%)
-    );
-  }
-  .kai-range::-moz-range-track {
-    block-size: 0.375rem;
-    border-radius: 9999px;
-    border: none;
-    box-shadow: none;
-    background: var(--color-muted);
-  }
-  .kai-range::-moz-range-progress {
-    block-size: 0.375rem;
-    border-radius: 9999px;
-    background: var(--color-primary);
-  }
-  .kai-range::-webkit-slider-thumb {
-    appearance: none;
-    -webkit-appearance: none;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-    border-radius: 9999px;
-    background: var(--color-background);
-    border: 2px solid var(--color-primary);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
-    margin-block-start: -0.375rem;
-    transition: transform 0.12s ease, box-shadow 0.12s ease;
-  }
-  .kai-range::-moz-range-thumb {
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-    border-radius: 9999px;
-    background: var(--color-background);
-    border: 2px solid var(--color-primary);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
-    transition: transform 0.12s ease, box-shadow 0.12s ease;
-  }
-  .kai-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
-  .kai-range:hover::-moz-range-thumb { transform: scale(1.12); }
-  .kai-range:focus-visible { outline: none; }
-  .kai-range:focus-visible::-webkit-slider-thumb,
-  .kai-range:active::-webkit-slider-thumb {
-    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 14%, transparent);
-  }
-  .kai-range:focus-visible::-moz-range-thumb,
-  .kai-range:active::-moz-range-thumb {
-    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 14%, transparent);
-  }
-  .kai-range:disabled { opacity: 0.5; cursor: not-allowed; }
-}

package/src/elements/switch.tsx

@@ -1,118 +0,0 @@
-import { createEffect, createSignal, untrack } from 'solid-js';
-import { defineWebComponent } from './define';
-import { Switch } from '../ui/switch';
-
-interface Props extends Record<string, unknown> {
-  /** Controlled checked state. Settable and reflected to the `checked` attribute.
-   *  `el.checked = true` (or `<kai-switch checked>`) drives it; the toggle UI updates
-   *  it and fires `kai-change`. Read `el.checked` for live state. */
-  checked?: boolean;
-  /** Initial checked state on mount (uncontrolled seed). Bare attribute
-   *  (`<kai-switch default-checked>`) turns it on. */
-  defaultChecked?: boolean;
-  /** Disable interaction. */
-  disabled?: boolean;
-  /** Accessible label. */
-  label?: string;
-  /** Form-control name (paired with `value`). */
-  name?: string;
-  /** Submitted value when checked (paired with `name`). Defaults to `'on'`. */
-  value?: string;
-}
-
-/** Events fired by `<kai-switch>`. */
-interface Events {
-  /** The toggle changed. */
-  'kai-change': { checked: boolean };
-}
-
-/**
- * `<kai-switch>` — a toggle switch. Drive/read its state with the `checked`
- * property (settable + reflected to the `checked` attribute, so `:host([checked])`
- * and `el.checked` see live state); seed the initial state with `default-checked`
- * and read changes from `kai-change`.
- *
- * ```html
- * <kai-switch default-checked label="Temporary chat"></kai-switch>
- * <script type="module">
- *   import '@kitn.ai/ui/elements';
- *   const sw = document.querySelector('kai-switch');
- *   sw.addEventListener('kai-change', (e) => console.log(e.detail.checked));
- *   sw.checked = false;   // drive it (no kai-change — the host already knows)
- *   sw.toggle();          // flip it (fires kai-change)
- * </script>
- * ```
- */
-defineWebComponent<Props, Events>('kai-switch', {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: undefined,
-  label: undefined,
-  name: undefined,
-  value: undefined,
-}, (props, ctx) => {
-  const { element, dispatch, flag, expose } = ctx;
-
-  // Lift the on/off state into the facade and drive the Switch CONTROLLED so the
-  // host can read it (`el.checked` / `:host([checked])`) and set it after mount.
-  // Seed from `defaultChecked` (or a bare `checked` attribute present on mount).
-  const [checked, setChecked] = createSignal(flag('defaultChecked') || flag('checked'));
-
-  // Coerce any value coming through the `checked` setter (a JS assignment, or the
-  // write-back from `attributeChangedCallback` when the attribute changes) to a
-  // boolean — falling back to attribute presence, matching `flag`'s semantics. An
-  // `undefined` write-back (which `toggleAttribute` triggers) thus resolves to the
-  // attribute we just wrote, so it equals the signal and the equality guard below
-  // absorbs it — no attr⇄prop feedback loop (the pattern hover-card uses for `open`).
-  const coerce = (v: unknown): boolean =>
-    v === true ? true
-      : v === false ? false
-        : element.hasAttribute('checked') && element.getAttribute('checked') !== 'false';
-
-  // Apply a new checked state and fire kai-change once (the toggle UI / `toggle()`
-  // path). No-op while disabled.
-  const apply = (next: boolean) => {
-    if (flag('disabled')) return;
-    if (untrack(checked) === next) return;
-    setChecked(next);
-    dispatch('kai-change', { checked: next });
-  };
-
-  // Override the `checked` property so reads return LIVE state (the signal) and
-  // host writes (`el.checked = …`) drive it WITHOUT firing kai-change — distinct
-  // from the user-toggle path. The equality guard kills the reflect write-back loop.
-  Object.defineProperty(element, 'checked', {
-    get: () => checked(),
-    set: (v: unknown) => { const next = coerce(v); if (untrack(checked) !== next) setChecked(next); },
-    configurable: true,
-    enumerable: true,
-  });
-
-  // Reflect internal checked → the `[checked]` host attribute (for `:host([checked])`).
-  // The equality guard against the live attribute keeps the write-back the toggle
-  // triggers (attributeChangedCallback → setter) from looping (mirrors
-  // wireDisclosure's reflect structure).
-  createEffect(() => {
-    const c = checked();
-    if (c !== element.hasAttribute('checked')) element.toggleAttribute('checked', c);
-  });
-
-  expose({
-    /** Flip the switch and fire `kai-change` (no-op while disabled). */
-    toggle: () => apply(!untrack(checked)),
-    /** Focus the inner `role="switch"` button (the host element can't reach it). */
-    focus: (options?: FocusOptions) =>
-      element.shadowRoot?.querySelector<HTMLButtonElement>('button[role="switch"]')?.focus(options),
-  });
-
-  return (
-    <Switch
-      checked={checked()}
-      disabled={flag('disabled')}
-      label={props.label as string | undefined}
-      name={props.name as string | undefined}
-      value={props.value as string | undefined}
-      onChange={(next) => apply(next)}
-    />
-  );
-});