@adia-ai/web-components 0.4.6 → 0.4.8

package/components/toast/toast.js

@@ -1,88 +1,23 @@
 /**
- * <toast-ui> — Thin facade over `<feed-ui>` / `UIFeed.post()`.
+ * `<toast-ui>` — auto-registers the tag on import.
  *
- * Phase 4 of `docs/specs/feed-channel.md` (SPEC-FEED-CHANNEL-001) —
- * toast-ui no longer owns its own per-position container. Both
- * declarative `<toast-ui>` and imperative `UIToast.show()` paths
- * route through `UIFeed`. The element exists for back-compat:
- * authoring `<toast-ui text="…">` still produces a feed item.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- *     // Imperative API (delegates to UIFeed.post)
- *     UIToast.show({ text: 'Saved!', variant: 'success' });
+ *   import { UIToast } from '@adia-ai/web-components/components/toast/class';
  *
- *     // Global event channel — same shape, same delegation.
- *     window.dispatchEvent(new CustomEvent('toast', {
- *       detail: { text: 'Saved!', variant: 'success' }
- *     }));
- *
- *     // Declarative — auto-posts and removes self on connect.
- *     <toast-ui text="Saved!" variant="success"></toast-ui>
- *
- * The legacy `[data-toast-container]` per-position-Map plumbing was
- * retired in this migration; the lane infrastructure now lives in
- * `<feed-ui>` (see ../feed/feed.js).
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement, html } from '../../core/element.js';
-import { UIFeed } from '../feed/feed.js';
-
-class UIToast extends UIElement {
-  static properties = {
-    text:     { type: String,  default: '', reflect: true },
-    variant:  { type: String,  default: 'info', reflect: true },
-    duration: { type: Number,  default: 4000, reflect: true },
-    position: { type: String,  default: 'bottom-right', reflect: true },
-  };
-
-  static template = () => html``;
+import { defineIfFree } from '../../core/register.js';
+import { UIToast } from './class.js';
 
-  connected() {
-    /* Declarative path: post into UIFeed and remove self. The
-       element is fire-and-forget — its only job is to forward the
-       authored attributes to the feed, then dissolve. Re-entrant
-       guard keeps this safe under HMR / dev-mode re-attachment. */
-    if (this.__routedToFeed) return;
-    this.__routedToFeed = true;
-    UIFeed.post({
-      text:     this.text,
-      variant:  this.variant === 'error' ? 'danger' : this.variant,
-      duration: this.duration,
-      position: this.position,
-    });
-    /* Schedule removal so the calling code can read the attributes
-       if it inspected this element on the same microtask. */
-    queueMicrotask(() => { try { this.remove(); } catch { /* noop */ } });
-  }
-
-  /**
-   * Static facade — delegates to UIFeed.post(). Kept for back-compat
-   * with consumer code shaped like `customElements.get('toast-ui').show(...)`
-   * or `UIToast.show(...)`. New code should call UIFeed.post()
-   * directly.
-   *
-   * @param {Object} opts
-   * @param {string} opts.text
-   * @param {string} [opts.variant='info']  — `error` aliases to `danger`.
-   * @param {number} [opts.duration=4000]
-   * @param {string} [opts.position='bottom-right']
-   * @returns {{id:string|null, dismiss:function, update:function}}  FeedHandle.
-   */
-  static show(opts = {}) {
-    const { text, variant = 'info', duration = 4000, position = 'bottom-right' } = opts;
-    return UIFeed.post({
-      text,
-      variant: variant === 'error' ? 'danger' : variant,
-      duration,
-      position,
-    });
-  }
-}
+defineIfFree('toast-ui', UIToast);
 
 /* Idempotent install of the global 'toast' CustomEvent listener.
    Same shape as the historical channel — code that posts via
    `window.dispatchEvent(new CustomEvent('toast', {detail:{…}}))`
-   keeps working. The listener delegates to UIToast.show(), which
-   delegates to UIFeed.post(). */
+   keeps working. Delegates to UIToast.show() → UIFeed.post(). */
 if (typeof window !== 'undefined' && !window.__adiaToastListenerInstalled) {
   window.__adiaToastListenerInstalled = true;
   window.addEventListener('toast', (e) => {
@@ -90,6 +25,4 @@ if (typeof window !== 'undefined' && !window.__adiaToastListenerInstalled) {
   });
 }
 
-customElements.define('toast-ui', UIToast);
-
 export { UIToast };

package/components/toggle-group/class.js

@@ -0,0 +1,154 @@
+/**
+ * Non-side-effect class export for `<toggle-option-ui>` (+ co-located primitives).
+ *
+ * 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-group`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <toggle-group-ui value="bold,italic">
+ *   <toggle-option-ui value="bold" icon="text-b"></toggle-option-ui>
+ *   <toggle-option-ui value="italic" icon="text-italic"></toggle-option-ui>
+ *   <toggle-option-ui value="underline" icon="text-underline"></toggle-option-ui>
+ * </toggle-group-ui>
+ *
+ * Multi-select button group (unlike segmented which is single-select).
+ *
+ * Properties:
+ *   value  — comma-separated selected values
+ *   single — restrict to one active option at a time (default false: multi-select)
+ */
+
+import { UIElement } from '../../core/element.js';
+
+// ── Toggle Option ──
+//
+// Parent-managed. Selection state flows through `toggle-group-ui`'s `value`
+// (and `single` mode flag). Items don't expose `checked` — parent applies
+// `data-selected` on the DOM element when the item's `value` is part of the
+// group's comma-separated `value` list. Consistent with native `<option>`
+// inside `<select>`.
+
+export class UIToggleOption extends UIElement {
+  static properties = {
+    value:    { type: String,  default: '', reflect: true },
+    text:     { type: String,  default: '', reflect: true },
+    icon:     { type: String,  default: '', reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #stamped = false;
+
+  connected() {
+    this.setAttribute('role', 'button');
+    this.setAttribute('tabindex', '0');
+  }
+
+  render() {
+    if (!this.#stamped) {
+      this.#stamped = true;
+      this.#stamp();
+    }
+    if (this.disabled) this.setAttribute('aria-disabled', 'true');
+    else this.removeAttribute('aria-disabled');
+  }
+
+  #stamp() {
+    let inner = '';
+    if (this.icon) inner += `<icon-ui name="${this.icon}"></icon-ui>`;
+    if (this.text) inner += `<span data-text>${this.text}</span>`;
+    this.innerHTML = inner;
+  }
+
+  disconnected() {
+    this.#stamped = false;
+  }
+}
+
+export class UIToggleGroup extends UIElement {
+  static properties = {
+    value:  { type: String,  default: '',    reflect: true },
+    single: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #bound = false;
+
+  get #valueSet() {
+    return new Set(this.value ? this.value.split(',').map(v => v.trim()).filter(Boolean) : []);
+  }
+
+  connected() {
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keydown', this.#onKey);
+    }
+    this.setAttribute('role', 'group');
+  }
+
+  render() {
+    const selected = this.#valueSet;
+    for (const opt of this.querySelectorAll('toggle-option-ui')) {
+      const optVal = opt.value || opt.getAttribute('value') || '';
+      if (selected.has(optVal)) {
+        opt.setAttribute('data-selected', '');
+        opt.setAttribute('aria-pressed', 'true');
+      } else {
+        opt.removeAttribute('data-selected');
+        opt.setAttribute('aria-pressed', 'false');
+      }
+    }
+  }
+
+  #toggle(opt) {
+    if (opt.disabled) return;
+    const optVal = opt.value || opt.getAttribute('value') || '';
+    if (!optVal) return;
+
+    const selected = this.#valueSet;
+
+    if (this.single) {
+      if (selected.has(optVal)) {
+        selected.clear();
+      } else {
+        selected.clear();
+        selected.add(optVal);
+      }
+    } else {
+      if (selected.has(optVal)) selected.delete(optVal);
+      else selected.add(optVal);
+    }
+
+    this.value = [...selected].join(',');
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  }
+
+  #onClick = (e) => {
+    const opt = e.target.closest('toggle-option-ui');
+    if (opt && this.contains(opt)) this.#toggle(opt);
+  };
+
+  #onKey = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const opt = e.target.closest('toggle-option-ui');
+      if (opt && this.contains(opt)) this.#toggle(opt);
+    }
+  };
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#bound = false;
+  }
+}

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

@@ -34,6 +34,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "navigation",
+    "composes": [],
     "events": {
       "change": {
         "description": "Fired when selection changes. detail: { value }"

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

@@ -0,0 +1,29 @@
+/**
+ * `<toggle-group-ui>` — Multi-select button group (unlike segmented which is single-select).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/toggle-group
+ *
+ * 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 ToggleGroupChangeEvent = CustomEvent<unknown>;
+
+export class UIToggleGroup extends UIElement {
+  /** When true, restrict to one active option (single-select). */
+  single: boolean;
+  /** Comma-separated selected values */
+  value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIToggleGroup, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: ToggleGroupChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/toggle-group/toggle-group.js

@@ -1,147 +1,18 @@
 /**
- * <toggle-group-ui value="bold,italic">
- *   <toggle-option-ui value="bold" icon="text-b"></toggle-option-ui>
- *   <toggle-option-ui value="italic" icon="text-italic"></toggle-option-ui>
- *   <toggle-option-ui value="underline" icon="text-underline"></toggle-option-ui>
- * </toggle-group-ui>
+ * `<toggle-option-ui>` — auto-registers the tag on import.
  *
- * Multi-select button group (unlike segmented which is single-select).
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Properties:
- *   value  — comma-separated selected values
- *   single — restrict to one active option at a time (default false: multi-select)
+ *   import { UIToggleOption, UIToggleGroup } from '@adia-ai/web-components/components/toggle-group/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-// ── Toggle Option ──
-//
-// Parent-managed. Selection state flows through `toggle-group-ui`'s `value`
-// (and `single` mode flag). Items don't expose `checked` — parent applies
-// `data-selected` on the DOM element when the item's `value` is part of the
-// group's comma-separated `value` list. Consistent with native `<option>`
-// inside `<select>`.
-
-class UIToggleOption extends UIElement {
-  static properties = {
-    value:    { type: String,  default: '', reflect: true },
-    text:     { type: String,  default: '', reflect: true },
-    icon:     { type: String,  default: '', reflect: true },
-    disabled: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #stamped = false;
-
-  connected() {
-    this.setAttribute('role', 'button');
-    this.setAttribute('tabindex', '0');
-  }
-
-  render() {
-    if (!this.#stamped) {
-      this.#stamped = true;
-      this.#stamp();
-    }
-    if (this.disabled) this.setAttribute('aria-disabled', 'true');
-    else this.removeAttribute('aria-disabled');
-  }
-
-  #stamp() {
-    let inner = '';
-    if (this.icon) inner += `<icon-ui name="${this.icon}"></icon-ui>`;
-    if (this.text) inner += `<span data-text>${this.text}</span>`;
-    this.innerHTML = inner;
-  }
-
-  disconnected() {
-    this.#stamped = false;
-  }
-}
-customElements.define('toggle-option-ui', UIToggleOption);
-
-// ── Toggle Group ──
-
-class UIToggleGroup extends UIElement {
-  static properties = {
-    value:  { type: String,  default: '',    reflect: true },
-    single: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  #bound = false;
-
-  get #valueSet() {
-    return new Set(this.value ? this.value.split(',').map(v => v.trim()).filter(Boolean) : []);
-  }
-
-  connected() {
-    if (!this.#bound) {
-      this.#bound = true;
-      this.addEventListener('click', this.#onClick);
-      this.addEventListener('keydown', this.#onKey);
-    }
-    this.setAttribute('role', 'group');
-  }
-
-  render() {
-    const selected = this.#valueSet;
-    for (const opt of this.querySelectorAll('toggle-option-ui')) {
-      const optVal = opt.value || opt.getAttribute('value') || '';
-      if (selected.has(optVal)) {
-        opt.setAttribute('data-selected', '');
-        opt.setAttribute('aria-pressed', 'true');
-      } else {
-        opt.removeAttribute('data-selected');
-        opt.setAttribute('aria-pressed', 'false');
-      }
-    }
-  }
-
-  #toggle(opt) {
-    if (opt.disabled) return;
-    const optVal = opt.value || opt.getAttribute('value') || '';
-    if (!optVal) return;
-
-    const selected = this.#valueSet;
-
-    if (this.single) {
-      if (selected.has(optVal)) {
-        selected.clear();
-      } else {
-        selected.clear();
-        selected.add(optVal);
-      }
-    } else {
-      if (selected.has(optVal)) selected.delete(optVal);
-      else selected.add(optVal);
-    }
-
-    this.value = [...selected].join(',');
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
-  }
-
-  #onClick = (e) => {
-    const opt = e.target.closest('toggle-option-ui');
-    if (opt && this.contains(opt)) this.#toggle(opt);
-  };
-
-  #onKey = (e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      const opt = e.target.closest('toggle-option-ui');
-      if (opt && this.contains(opt)) this.#toggle(opt);
-    }
-  };
+import { defineIfFree } from '../../core/register.js';
+import { UIToggleOption, UIToggleGroup } from './class.js';
 
-  disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKey);
-    this.#bound = false;
-  }
-}
-customElements.define('toggle-group-ui', UIToggleGroup);
+defineIfFree('toggle-option-ui', UIToggleOption);
+defineIfFree('toggle-group-ui', UIToggleGroup);
 
-export { UIToggleGroup, UIToggleOption };
+export { UIToggleOption, UIToggleGroup };