@adia-ai/web-components 0.4.6 → 0.4.8

package/components/toggle-scheme/class.js

@@ -0,0 +1,286 @@
+/**
+ * Non-side-effect class export for `<toggle-scheme-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/toggle-scheme`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <toggle-scheme-ui>
+ *
+ * Icon-button primitive that toggles `color-scheme` between light and dark
+ * on a target element (default `:root`). Replaces the hand-wired
+ * `<button-ui id="theme-toggle"> + applyScheme()` boilerplate previously
+ * duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
+ *
+ * Composition: light-DOM host, internally stamps a single <button-ui>.
+ *
+ * Authoring API:
+ *   [scheme="auto"|"light"|"dark"]   initial scheme (default "auto")
+ *   [target=":root"]                 CSS selector for target element
+ *   [persist]                        write selection to localStorage
+ *   [storage-prefix="adia-theme-"]   LS key namespace (matches theme-panel)
+ *   [icon-light="sun"]               icon shown when active-scheme is light
+ *   [icon-dark="moon"]               icon shown when active-scheme is dark
+ *   [label-light]                    aria-label / title in light mode
+ *   [label-dark]                     aria-label / title in dark mode
+ *   [size="md"]                      forwarded to internal <button-ui>
+ *   [variant="ghost"]                forwarded to internal <button-ui>
+ *   [color=""]                       forwarded to internal <button-ui>
+ *   [disabled]                       forwarded to internal <button-ui>
+ *
+ * Reflected state (read-only externally; use .setScheme() to mutate):
+ *   [active-scheme]   resolved scheme ("light" | "dark")
+ *
+ * Events:
+ *   scheme-change — bubbles. detail: { scheme, source }
+ *     source ∈ "press" | "media" | "programmatic"
+ *
+ * Public methods:
+ *   .toggle()                 flip between light and dark (defeats auto)
+ *   .setScheme(s)             "light" | "dark" | "auto"; programmatic write
+ */
+
+import { UIElement } from '../../core/element.js';
+import '../button/button.js';
+
+const LIGHT = 'light';
+const DARK  = 'dark';
+const AUTO  = 'auto';
+
+export class UIToggleScheme extends UIElement {
+  static properties = {
+    scheme:        { type: String,  default: AUTO,   reflect: true },
+    target:        { type: String,  default: ':root', reflect: true },
+    persist:       { type: Boolean, default: false, reflect: true },
+    storagePrefix: { type: String,  default: 'adia-theme-', reflect: true, attribute: 'storage-prefix' },
+    iconLight:     { type: String,  default: 'sun',  reflect: true, attribute: 'icon-light' },
+    iconDark:      { type: String,  default: 'moon', reflect: true, attribute: 'icon-dark' },
+    labelLight:    { type: String,  default: 'Switch to dark mode',  reflect: true, attribute: 'label-light' },
+    labelDark:     { type: String,  default: 'Switch to light mode', reflect: true, attribute: 'label-dark' },
+    size:          { type: String,  default: 'md',    reflect: true },
+    variant:       { type: String,  default: 'ghost', reflect: true },
+    color:         { type: String,  default: '',      reflect: true },
+    disabled:      { type: Boolean, default: false,   reflect: true },
+    activeScheme:  { type: String,  default: '',      reflect: true, attribute: 'active-scheme' },
+  };
+
+  static template = () => null;
+
+  #button = null;
+  #mql = null;
+  #mqlHandler = null;
+  #onPress = null;
+  #stamped = false;
+
+  connected() {
+    if (!this.#stamped) {
+      this.#stamp();
+      this.#stamped = true;
+    }
+    this.#initState();
+  }
+
+  disconnected() {
+    if (this.#button && this.#onPress) {
+      this.#button.removeEventListener('press', this.#onPress);
+    }
+    this.#detachPcm();
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────
+
+  /** Flip between light and dark — defeats auto. */
+  toggle() {
+    const next = this.activeScheme === DARK ? LIGHT : DARK;
+    this.#apply(next, 'programmatic');
+  }
+
+  /**
+   * @param {"light"|"dark"|"auto"} s
+   */
+  setScheme(s) {
+    if (s === AUTO) {
+      this.#clearTargetOverride();
+      const resolved = this.#resolvePrefersScheme();
+      this.activeScheme = resolved;
+      this.#syncButton();
+      this.#attachPcm();
+      this.#emit('programmatic');
+    } else if (s === LIGHT || s === DARK) {
+      this.#apply(s, 'programmatic');
+    }
+  }
+
+  // ── Internal — stamping ─────────────────────────────────────────────
+
+  #stamp() {
+    const btn = document.createElement('button-ui');
+    btn.setAttribute('part', 'button');
+    btn.setAttribute('variant', this.variant || 'ghost');
+    btn.setAttribute('size', this.size || 'md');
+    if (this.color) btn.setAttribute('color', this.color);
+    if (this.disabled) btn.setAttribute('disabled', '');
+    this.appendChild(btn);
+
+    this.#button = btn;
+    this.#onPress = (e) => {
+      // Internal button bubbles 'press'; we re-emit our own 'scheme-change'
+      // so consumers see one semantic event, not the inner button's.
+      e.stopPropagation();
+      if (this.disabled) return;
+      const next = this.activeScheme === DARK ? LIGHT : DARK;
+      this.#apply(next, 'press');
+    };
+    btn.addEventListener('press', this.#onPress);
+  }
+
+  // ── Internal — initial state ────────────────────────────────────────
+
+  #initState() {
+    // Priority: persisted > [scheme] attr > auto
+    let initial = null;
+    if (this.persist) {
+      try {
+        const v = localStorage.getItem(`${this.storagePrefix}scheme`);
+        if (v === LIGHT || v === DARK) initial = v;
+      } catch {}
+    }
+    if (initial === null) {
+      const attr = (this.scheme || AUTO);
+      if (attr === LIGHT || attr === DARK) initial = attr;
+    }
+
+    if (initial === LIGHT || initial === DARK) {
+      // Explicit choice — write to target, no MQL listening
+      this.#writeTarget(initial);
+      this.activeScheme = initial;
+    } else {
+      // Auto — follow prefers-color-scheme, attach listener
+      this.activeScheme = this.#resolvePrefersScheme();
+      this.#attachPcm();
+    }
+    this.#syncButton();
+  }
+
+  // ── Internal — mutation (single path) ───────────────────────────────
+
+  #apply(next, source) {
+    if (next !== LIGHT && next !== DARK) return;
+    this.#writeTarget(next);
+    this.activeScheme = next;
+    if (this.persist) {
+      try { localStorage.setItem(`${this.storagePrefix}scheme`, next); } catch {}
+    }
+    // User picked explicitly — stop tracking OS preference
+    this.#detachPcm();
+    this.#syncButton();
+    this.#emit(source);
+  }
+
+  #syncButton() {
+    if (!this.#button) return;
+    const dark = this.activeScheme === DARK;
+    const icon = dark ? this.iconDark : this.iconLight;
+    const label = dark ? this.labelDark : this.labelLight;
+    if (this.#button.getAttribute('icon') !== icon) {
+      this.#button.setAttribute('icon', icon);
+    }
+    this.#button.setAttribute('aria-label', label);
+    this.#button.setAttribute('title', label);
+    // Forward style passthrough so authors can change variant/size/color
+    // at runtime and the internal button reflects it.
+    if (this.#button.getAttribute('variant') !== this.variant) {
+      this.#button.setAttribute('variant', this.variant || 'ghost');
+    }
+    if (this.#button.getAttribute('size') !== this.size) {
+      this.#button.setAttribute('size', this.size || 'md');
+    }
+    if (this.color) {
+      this.#button.setAttribute('color', this.color);
+    } else {
+      this.#button.removeAttribute('color');
+    }
+    if (this.disabled) {
+      this.#button.setAttribute('disabled', '');
+    } else {
+      this.#button.removeAttribute('disabled');
+    }
+  }
+
+  render() {
+    // Property writes after connect (e.g. el.size = 'sm') route through here.
+    this.#syncButton();
+  }
+
+  #emit(source) {
+    this.dispatchEvent(new CustomEvent('scheme-change', {
+      bubbles: true,
+      detail: { scheme: this.activeScheme, source },
+    }));
+  }
+
+  // ── Internal — target resolution + write ────────────────────────────
+
+  #resolveTarget() {
+    const sel = this.target || ':root';
+    if (sel === ':root') return document.documentElement;
+    try {
+      return document.querySelector(sel) ?? document.documentElement;
+    } catch {
+      return document.documentElement;
+    }
+  }
+
+  #writeTarget(scheme) {
+    const t = this.#resolveTarget();
+    t.style.setProperty('color-scheme', scheme);
+  }
+
+  #clearTargetOverride() {
+    const t = this.#resolveTarget();
+    t.style.removeProperty('color-scheme');
+    if (this.persist) {
+      try { localStorage.removeItem(`${this.storagePrefix}scheme`); } catch {}
+    }
+  }
+
+  // ── Internal — prefers-color-scheme ─────────────────────────────────
+
+  #resolvePrefersScheme() {
+    try {
+      if (typeof matchMedia === 'function' &&
+          matchMedia('(prefers-color-scheme: dark)').matches) return DARK;
+    } catch {}
+    return LIGHT;
+  }
+
+  #attachPcm() {
+    if (this.#mql || typeof matchMedia !== 'function') return;
+    try {
+      this.#mql = matchMedia('(prefers-color-scheme: dark)');
+      this.#mqlHandler = () => {
+        const resolved = this.#mql.matches ? DARK : LIGHT;
+        if (resolved === this.activeScheme) return;
+        this.activeScheme = resolved;
+        this.#syncButton();
+        this.#emit('media');
+      };
+      this.#mql.addEventListener('change', this.#mqlHandler);
+    } catch {}
+  }
+
+  #detachPcm() {
+    if (this.#mql && this.#mqlHandler) {
+      try { this.#mql.removeEventListener('change', this.#mqlHandler); } catch {}
+    }
+    this.#mql = null;
+    this.#mqlHandler = null;
+  }
+}

package/components/toggle-scheme/toggle-scheme.a2ui.json

@@ -124,6 +124,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "control",
+    "composes": [
+      "button-ui"
+    ],
     "events": {
       "scheme-change": {
         "description": "Fired when the active scheme changes. detail contains { scheme: \"light\" | \"dark\", source: \"press\" | \"media\" | \"programmatic\" }."

package/components/toggle-scheme/toggle-scheme.d.ts

@@ -0,0 +1,51 @@
+/**
+ * `<toggle-scheme-ui>` — Icon-button primitive that toggles `color-scheme` between light and dark on a target element (default `:root`). Encapsulates the prefers-color-scheme initial-resolution, the inline-style write to the target, optional localStorage persistence (sharing the `adia-theme-` namespace with <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired `<button-ui id="theme-toggle">` + `applyScheme()` pattern previously duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/toggle-scheme
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type ToggleSchemeSchemeChangeEvent = CustomEvent<unknown>;
+
+export class UIToggleScheme extends UIElement {
+  /** Resolved scheme ("light" | "dark"). Read-only; mutate via .setScheme() or .toggle(). */
+  activeScheme: '' | 'light' | 'dark';
+  /** Semantic intent forwarded to the internal <button-ui>. */
+  color: '' | 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+  /** Disables the internal button. */
+  disabled: boolean;
+  /** Phosphor icon shown when active-scheme is "dark" (clicking switches to light). */
+  iconDark: string;
+  /** Phosphor icon shown when active-scheme is "light" (clicking switches to dark). */
+  iconLight: string;
+  /** aria-label / title applied to the internal button when active-scheme is "dark". */
+  labelDark: string;
+  /** aria-label / title applied to the internal button when active-scheme is "light". */
+  labelLight: string;
+  /** Persist the user's choice to localStorage under `${storage-prefix}scheme`. */
+  persist: boolean;
+  /** Initial scheme — "auto" follows prefers-color-scheme; "light" / "dark" force. */
+  scheme: 'auto' | 'light' | 'dark';
+  /** Sizing scale forwarded to the internal <button-ui>. */
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** LocalStorage key prefix; default matches <theme-panel> for cross-element interop. */
+  storagePrefix: string;
+  /** CSS selector for the element receiving `color-scheme`. ":root" → <html>. */
+  target: string;
+  /** Visual style forwarded to the internal <button-ui>. Defaults to "ghost" (matches app practice). */
+  variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary' | 'secondary' | 'soft';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIToggleScheme, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'scheme-change', listener: (ev: ToggleSchemeSchemeChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/toggle-scheme/toggle-scheme.js

@@ -1,277 +1,17 @@
 /**
- * <toggle-scheme-ui>
+ * `<toggle-scheme-ui>` — auto-registers the tag on import.
  *
- * Icon-button primitive that toggles `color-scheme` between light and dark
- * on a target element (default `:root`). Replaces the hand-wired
- * `<button-ui id="theme-toggle"> + applyScheme()` boilerplate previously
- * duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Composition: light-DOM host, internally stamps a single <button-ui>.
+ *   import { UIToggleScheme } from '@adia-ai/web-components/components/toggle-scheme/class';
  *
- * Authoring API:
- *   [scheme="auto"|"light"|"dark"]   initial scheme (default "auto")
- *   [target=":root"]                 CSS selector for target element
- *   [persist]                        write selection to localStorage
- *   [storage-prefix="adia-theme-"]   LS key namespace (matches theme-panel)
- *   [icon-light="sun"]               icon shown when active-scheme is light
- *   [icon-dark="moon"]               icon shown when active-scheme is dark
- *   [label-light]                    aria-label / title in light mode
- *   [label-dark]                     aria-label / title in dark mode
- *   [size="md"]                      forwarded to internal <button-ui>
- *   [variant="ghost"]                forwarded to internal <button-ui>
- *   [color=""]                       forwarded to internal <button-ui>
- *   [disabled]                       forwarded to internal <button-ui>
- *
- * Reflected state (read-only externally; use .setScheme() to mutate):
- *   [active-scheme]   resolved scheme ("light" | "dark")
- *
- * Events:
- *   scheme-change — bubbles. detail: { scheme, source }
- *     source ∈ "press" | "media" | "programmatic"
- *
- * Public methods:
- *   .toggle()                 flip between light and dark (defeats auto)
- *   .setScheme(s)             "light" | "dark" | "auto"; programmatic write
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-import '../button/button.js';
-
-const LIGHT = 'light';
-const DARK  = 'dark';
-const AUTO  = 'auto';
-
-class UIToggleScheme extends UIElement {
-  static properties = {
-    scheme:        { type: String,  default: AUTO,   reflect: true },
-    target:        { type: String,  default: ':root', reflect: true },
-    persist:       { type: Boolean, default: false, reflect: true },
-    storagePrefix: { type: String,  default: 'adia-theme-', reflect: true, attribute: 'storage-prefix' },
-    iconLight:     { type: String,  default: 'sun',  reflect: true, attribute: 'icon-light' },
-    iconDark:      { type: String,  default: 'moon', reflect: true, attribute: 'icon-dark' },
-    labelLight:    { type: String,  default: 'Switch to dark mode',  reflect: true, attribute: 'label-light' },
-    labelDark:     { type: String,  default: 'Switch to light mode', reflect: true, attribute: 'label-dark' },
-    size:          { type: String,  default: 'md',    reflect: true },
-    variant:       { type: String,  default: 'ghost', reflect: true },
-    color:         { type: String,  default: '',      reflect: true },
-    disabled:      { type: Boolean, default: false,   reflect: true },
-    activeScheme:  { type: String,  default: '',      reflect: true, attribute: 'active-scheme' },
-  };
-
-  static template = () => null;
-
-  #button = null;
-  #mql = null;
-  #mqlHandler = null;
-  #onPress = null;
-  #stamped = false;
-
-  connected() {
-    if (!this.#stamped) {
-      this.#stamp();
-      this.#stamped = true;
-    }
-    this.#initState();
-  }
-
-  disconnected() {
-    if (this.#button && this.#onPress) {
-      this.#button.removeEventListener('press', this.#onPress);
-    }
-    this.#detachPcm();
-  }
-
-  // ── Public API ──────────────────────────────────────────────────────
-
-  /** Flip between light and dark — defeats auto. */
-  toggle() {
-    const next = this.activeScheme === DARK ? LIGHT : DARK;
-    this.#apply(next, 'programmatic');
-  }
-
-  /**
-   * @param {"light"|"dark"|"auto"} s
-   */
-  setScheme(s) {
-    if (s === AUTO) {
-      this.#clearTargetOverride();
-      const resolved = this.#resolvePrefersScheme();
-      this.activeScheme = resolved;
-      this.#syncButton();
-      this.#attachPcm();
-      this.#emit('programmatic');
-    } else if (s === LIGHT || s === DARK) {
-      this.#apply(s, 'programmatic');
-    }
-  }
-
-  // ── Internal — stamping ─────────────────────────────────────────────
-
-  #stamp() {
-    const btn = document.createElement('button-ui');
-    btn.setAttribute('part', 'button');
-    btn.setAttribute('variant', this.variant || 'ghost');
-    btn.setAttribute('size', this.size || 'md');
-    if (this.color) btn.setAttribute('color', this.color);
-    if (this.disabled) btn.setAttribute('disabled', '');
-    this.appendChild(btn);
-
-    this.#button = btn;
-    this.#onPress = (e) => {
-      // Internal button bubbles 'press'; we re-emit our own 'scheme-change'
-      // so consumers see one semantic event, not the inner button's.
-      e.stopPropagation();
-      if (this.disabled) return;
-      const next = this.activeScheme === DARK ? LIGHT : DARK;
-      this.#apply(next, 'press');
-    };
-    btn.addEventListener('press', this.#onPress);
-  }
-
-  // ── Internal — initial state ────────────────────────────────────────
-
-  #initState() {
-    // Priority: persisted > [scheme] attr > auto
-    let initial = null;
-    if (this.persist) {
-      try {
-        const v = localStorage.getItem(`${this.storagePrefix}scheme`);
-        if (v === LIGHT || v === DARK) initial = v;
-      } catch {}
-    }
-    if (initial === null) {
-      const attr = (this.scheme || AUTO);
-      if (attr === LIGHT || attr === DARK) initial = attr;
-    }
-
-    if (initial === LIGHT || initial === DARK) {
-      // Explicit choice — write to target, no MQL listening
-      this.#writeTarget(initial);
-      this.activeScheme = initial;
-    } else {
-      // Auto — follow prefers-color-scheme, attach listener
-      this.activeScheme = this.#resolvePrefersScheme();
-      this.#attachPcm();
-    }
-    this.#syncButton();
-  }
-
-  // ── Internal — mutation (single path) ───────────────────────────────
-
-  #apply(next, source) {
-    if (next !== LIGHT && next !== DARK) return;
-    this.#writeTarget(next);
-    this.activeScheme = next;
-    if (this.persist) {
-      try { localStorage.setItem(`${this.storagePrefix}scheme`, next); } catch {}
-    }
-    // User picked explicitly — stop tracking OS preference
-    this.#detachPcm();
-    this.#syncButton();
-    this.#emit(source);
-  }
-
-  #syncButton() {
-    if (!this.#button) return;
-    const dark = this.activeScheme === DARK;
-    const icon = dark ? this.iconDark : this.iconLight;
-    const label = dark ? this.labelDark : this.labelLight;
-    if (this.#button.getAttribute('icon') !== icon) {
-      this.#button.setAttribute('icon', icon);
-    }
-    this.#button.setAttribute('aria-label', label);
-    this.#button.setAttribute('title', label);
-    // Forward style passthrough so authors can change variant/size/color
-    // at runtime and the internal button reflects it.
-    if (this.#button.getAttribute('variant') !== this.variant) {
-      this.#button.setAttribute('variant', this.variant || 'ghost');
-    }
-    if (this.#button.getAttribute('size') !== this.size) {
-      this.#button.setAttribute('size', this.size || 'md');
-    }
-    if (this.color) {
-      this.#button.setAttribute('color', this.color);
-    } else {
-      this.#button.removeAttribute('color');
-    }
-    if (this.disabled) {
-      this.#button.setAttribute('disabled', '');
-    } else {
-      this.#button.removeAttribute('disabled');
-    }
-  }
-
-  render() {
-    // Property writes after connect (e.g. el.size = 'sm') route through here.
-    this.#syncButton();
-  }
-
-  #emit(source) {
-    this.dispatchEvent(new CustomEvent('scheme-change', {
-      bubbles: true,
-      detail: { scheme: this.activeScheme, source },
-    }));
-  }
-
-  // ── Internal — target resolution + write ────────────────────────────
-
-  #resolveTarget() {
-    const sel = this.target || ':root';
-    if (sel === ':root') return document.documentElement;
-    try {
-      return document.querySelector(sel) ?? document.documentElement;
-    } catch {
-      return document.documentElement;
-    }
-  }
-
-  #writeTarget(scheme) {
-    const t = this.#resolveTarget();
-    t.style.setProperty('color-scheme', scheme);
-  }
-
-  #clearTargetOverride() {
-    const t = this.#resolveTarget();
-    t.style.removeProperty('color-scheme');
-    if (this.persist) {
-      try { localStorage.removeItem(`${this.storagePrefix}scheme`); } catch {}
-    }
-  }
-
-  // ── Internal — prefers-color-scheme ─────────────────────────────────
-
-  #resolvePrefersScheme() {
-    try {
-      if (typeof matchMedia === 'function' &&
-          matchMedia('(prefers-color-scheme: dark)').matches) return DARK;
-    } catch {}
-    return LIGHT;
-  }
-
-  #attachPcm() {
-    if (this.#mql || typeof matchMedia !== 'function') return;
-    try {
-      this.#mql = matchMedia('(prefers-color-scheme: dark)');
-      this.#mqlHandler = () => {
-        const resolved = this.#mql.matches ? DARK : LIGHT;
-        if (resolved === this.activeScheme) return;
-        this.activeScheme = resolved;
-        this.#syncButton();
-        this.#emit('media');
-      };
-      this.#mql.addEventListener('change', this.#mqlHandler);
-    } catch {}
-  }
-
-  #detachPcm() {
-    if (this.#mql && this.#mqlHandler) {
-      try { this.#mql.removeEventListener('change', this.#mqlHandler); } catch {}
-    }
-    this.#mql = null;
-    this.#mqlHandler = null;
-  }
-}
+import { defineIfFree } from '../../core/register.js';
+import { UIToggleScheme } from './class.js';
 
-customElements.define('toggle-scheme-ui', UIToggleScheme);
+defineIfFree('toggle-scheme-ui', UIToggleScheme);
 
 export { UIToggleScheme };

package/components/toggle-scheme/toggle-scheme.yaml

@@ -13,6 +13,10 @@ description: >-
   <theme-panel>), and the moon/sun icon swap. Replaces the hand-wired
   `<button-ui id="theme-toggle">` + `applyScheme()` pattern previously
   duplicated across apps/genui, apps/construct-canvas, playgrounds/chat.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - button-ui
 props:
   scheme:
     description: Initial scheme — "auto" follows prefers-color-scheme; "light" / "dark" force.