@adia-ai/web-components 0.4.6 → 0.4.8

package/components/table-toolbar/table-toolbar.yaml

@@ -15,6 +15,19 @@ description: >-
   column descriptor's `filter` field overrides the auto-detect: `'select'`
   forces multi-select even on high-cardinality columns; `'text'` forces a
   contains input even on small enums.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - text-ui
+  - badge-ui
+  - search-ui
+  - button-ui
+  - field-ui
+  - select-ui
+  - input-ui
+  - menu-item-ui
+  - icon-ui
+  - check-ui
 props:
   for:
     description: id-ref of the table-ui to control. Falls back to the first sibling table-ui within the same parent when omitted.

package/components/tabs/class.js

@@ -0,0 +1,242 @@
+/**
+ * Non-side-effect class export for `<tabs-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/tabs`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <tabs-ui value="tab1">
+ *   <tab-ui value="tab1" text="Tab 1">Content for tab 1</tab-ui>
+ *   <tab-ui value="tab2" text="Tab 2">Content for tab 2</tab-ui>
+ * </tabs-ui>
+ *
+ * Tabbed panel switcher. Renders a button strip from child tab-ui elements.
+ * Only the active tab's content is visible.
+ *
+ * Events:
+ *   change — { detail: { value } }
+ *
+ * Keyboard:
+ *   ArrowLeft / ArrowRight to navigate tabs
+ */
+
+import { UIElement, html } from '../../core/element.js';
+import './tab.js';
+
+export class UITabs extends UIElement {
+  static properties = {
+    value:       { type: String, default: '', reflect: true },
+    orientation: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #strip = null;
+  #indicator = null;
+  #transitionRaf = null;
+
+  connected() {
+    this.setAttribute('role', 'tablist');
+
+    this.addEventListener('click', this.#handleClick);
+    this.addEventListener('keydown', this.#handleKeydown);
+
+    // Default to first tab if no value
+    if (!this.value) {
+      const first = this.querySelector('tab-ui:not([disabled])');
+      if (first) this.value = first.value || first.getAttribute('value') || '';
+    }
+  }
+
+  disconnected() {
+    if (this.#transitionRaf != null) {
+      cancelAnimationFrame(this.#transitionRaf);
+      this.#transitionRaf = null;
+    }
+    this.removeEventListener('click', this.#handleClick);
+    this.removeEventListener('keydown', this.#handleKeydown);
+    this.#strip = null;
+    this.#indicator = null;
+  }
+
+  get #tabs() {
+    return [...this.querySelectorAll('tab-ui')];
+  }
+
+  get #enabledTabs() {
+    return this.#tabs.filter(t => !t.disabled);
+  }
+
+  render() {
+    const tabs = this.#tabs;
+    if (!tabs.length) return;
+
+    // Ensure button strip exists
+    if (!this.#strip) {
+      this.#strip = document.createElement('div');
+      this.#strip.setAttribute('slot', 'strip');
+      this.#strip.setAttribute('role', 'presentation');
+    }
+    if (this.#strip.parentElement !== this) {
+      this.prepend(this.#strip);
+    }
+
+    // Reconcile buttons in the strip
+    this.reconcile(
+      this.#strip,
+      tabs,
+      (tab) => tab.value || tab.getAttribute('value') || '',
+      (tab, i, existing) => {
+        const val = tab.value || tab.getAttribute('value') || '';
+        const text = tab.text || tab.getAttribute('text') || '';
+        const icon = tab.icon || tab.getAttribute('icon') || '';
+        const isActive = val === this.value;
+        const isDisabled = tab.disabled || tab.hasAttribute('disabled');
+
+        if (existing) {
+          existing.textContent = '';
+          if (icon) {
+            const iconEl = document.createElement('icon-ui');
+            iconEl.setAttribute('name', icon);
+            existing.appendChild(iconEl);
+          }
+          if (text) {
+            existing.appendChild(document.createTextNode(text));
+          }
+          existing.setAttribute('aria-selected', String(isActive));
+          existing.setAttribute('tabindex', isActive ? '0' : '-1');
+          if (isDisabled) existing.setAttribute('disabled', '');
+          else existing.removeAttribute('disabled');
+          if (isActive) existing.setAttribute('data-active', '');
+          else existing.removeAttribute('data-active');
+          existing.dataset.value = val;
+          return existing;
+        }
+
+        const btn = document.createElement('div');
+        btn.setAttribute('role', 'tab');
+        btn.setAttribute('slot', 'tab-button');
+        btn.dataset.value = val;
+        btn.setAttribute('aria-selected', String(isActive));
+        btn.setAttribute('tabindex', isActive ? '0' : '-1');
+        if (isDisabled) btn.setAttribute('disabled', '');
+        if (isActive) btn.setAttribute('data-active', '');
+        if (icon) {
+          const iconEl = document.createElement('icon-ui');
+          iconEl.setAttribute('name', icon);
+          btn.appendChild(iconEl);
+        }
+        if (text) {
+          btn.appendChild(document.createTextNode(text));
+        }
+        return btn;
+      },
+    );
+
+    // Update sliding indicator
+    this.#updateIndicator();
+
+    // Sync tab content visibility
+    for (const tab of tabs) {
+      const tabVal = tab.value || tab.getAttribute('value') || '';
+      const isActive = tabVal === this.value;
+      if (isActive) {
+        tab.removeAttribute('hidden');
+        tab.setAttribute('role', 'tabpanel');
+      } else {
+        tab.setAttribute('hidden', '');
+      }
+    }
+  }
+
+  #updateIndicator() {
+    const activeBtn = this.#strip?.querySelector('[slot="tab-button"][data-active]');
+    if (!activeBtn) {
+      if (this.#indicator) this.#indicator.style.opacity = '0';
+      return;
+    }
+
+    // Lazy-create indicator
+    const isNew = !this.#indicator;
+    if (isNew) {
+      this.#indicator = document.createElement('span');
+      this.#indicator.setAttribute('slot', 'indicator');
+      this.#strip.appendChild(this.#indicator);
+    }
+
+    const stripRect = this.#strip.getBoundingClientRect();
+    const btnRect = activeBtn.getBoundingClientRect();
+    const isVertical = this.orientation === 'vertical';
+
+    const apply = () => {
+      if (isVertical) {
+        const top = btnRect.top - stripRect.top;
+        this.#indicator.style.transform = `translateY(${top}px)`;
+        this.#indicator.style.height = `${btnRect.height}px`;
+        this.#indicator.style.width = '';
+      } else {
+        const left = btnRect.left - stripRect.left;
+        this.#indicator.style.transform = `translateX(${left}px)`;
+        this.#indicator.style.width = `${btnRect.width}px`;
+        this.#indicator.style.height = '';
+      }
+      this.#indicator.style.opacity = '1';
+    };
+
+    if (isNew) {
+      this.#indicator.style.transition = 'none';
+      apply();
+      this.#transitionRaf = requestAnimationFrame(() => {
+        this.#transitionRaf = null;
+        if (this.#indicator) this.#indicator.style.transition = '';
+      });
+    } else {
+      apply();
+    }
+  }
+
+  #select(value) {
+    if (value === this.value) return;
+    this.value = value;
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  }
+
+  #handleClick = (e) => {
+    const btn = e.target.closest('[slot="tab-button"]');
+    if (!btn || !this.contains(btn) || btn.hasAttribute('disabled')) return;
+    this.#select(btn.dataset.value);
+  };
+
+  #handleKeydown = (e) => {
+    const btn = e.target.closest('[slot="tab-button"]');
+    if (!btn || !this.contains(btn)) return;
+
+    const buttons = [...this.#strip.querySelectorAll('[slot="tab-button"]:not([disabled])')];
+    const idx = buttons.indexOf(btn);
+    if (idx < 0) return;
+
+    const isVertical = this.orientation === 'vertical';
+    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
+    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
+
+    let next;
+    switch (e.key) {
+      case nextKey: next = idx < buttons.length - 1 ? idx + 1 : 0; break;
+      case prevKey: next = idx > 0 ? idx - 1 : buttons.length - 1; break;
+      case 'Home':  next = 0; break;
+      case 'End':   next = buttons.length - 1; break;
+      default: return;
+    }
+
+    e.preventDefault();
+    buttons[next].focus();
+    this.#select(buttons[next].dataset.value);
+  };
+}

package/components/tabs/tabs.a2ui.json

@@ -46,6 +46,9 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [
+      "icon-ui"
+    ],
     "events": {
       "change": {
         "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."

package/components/tabs/tabs.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<tabs-ui>` — Tabbed panel switcher. Renders button strip from child tab-ui elements.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/tabs
+ *
+ * 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 TabsChangeEvent = CustomEvent<unknown>;
+
+export class UITabs extends UIElement {
+  /** Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal. */
+  orientation: string;
+  /** Value of the currently active tab. Set programmatically or auto-assigned to the first non-disabled tab on connect. */
+  value: string;
+  /** Visual variant — default underline strip, `pills` for filled pill tabs, `underline` (explicit). */
+  variant: 'default' | 'pills' | 'underline' | 'segmented' | 'bordered';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITabs, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: TabsChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/tabs/tabs.js

@@ -1,232 +1,17 @@
 /**
- * <tabs-ui value="tab1">
- *   <tab-ui value="tab1" text="Tab 1">Content for tab 1</tab-ui>
- *   <tab-ui value="tab2" text="Tab 2">Content for tab 2</tab-ui>
- * </tabs-ui>
+ * `<tabs-ui>` — auto-registers the tag on import.
  *
- * Tabbed panel switcher. Renders a button strip from child tab-ui elements.
- * Only the active tab's content is visible.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Events:
- *   change — { detail: { value } }
+ *   import { UITabs } from '@adia-ai/web-components/components/tabs/class';
  *
- * Keyboard:
- *   ArrowLeft / ArrowRight to navigate tabs
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement, html } from '../../core/element.js';
-import './tab.js';
+import { defineIfFree } from '../../core/register.js';
+import { UITabs } from './class.js';
 
-class UITabs extends UIElement {
-  static properties = {
-    value:       { type: String, default: '', reflect: true },
-    orientation: { type: String, default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #strip = null;
-  #indicator = null;
-  #transitionRaf = null;
-
-  connected() {
-    this.setAttribute('role', 'tablist');
-
-    this.addEventListener('click', this.#handleClick);
-    this.addEventListener('keydown', this.#handleKeydown);
-
-    // Default to first tab if no value
-    if (!this.value) {
-      const first = this.querySelector('tab-ui:not([disabled])');
-      if (first) this.value = first.value || first.getAttribute('value') || '';
-    }
-  }
-
-  disconnected() {
-    if (this.#transitionRaf != null) {
-      cancelAnimationFrame(this.#transitionRaf);
-      this.#transitionRaf = null;
-    }
-    this.removeEventListener('click', this.#handleClick);
-    this.removeEventListener('keydown', this.#handleKeydown);
-    this.#strip = null;
-    this.#indicator = null;
-  }
-
-  get #tabs() {
-    return [...this.querySelectorAll('tab-ui')];
-  }
-
-  get #enabledTabs() {
-    return this.#tabs.filter(t => !t.disabled);
-  }
-
-  render() {
-    const tabs = this.#tabs;
-    if (!tabs.length) return;
-
-    // Ensure button strip exists
-    if (!this.#strip) {
-      this.#strip = document.createElement('div');
-      this.#strip.setAttribute('slot', 'strip');
-      this.#strip.setAttribute('role', 'presentation');
-    }
-    if (this.#strip.parentElement !== this) {
-      this.prepend(this.#strip);
-    }
-
-    // Reconcile buttons in the strip
-    this.reconcile(
-      this.#strip,
-      tabs,
-      (tab) => tab.value || tab.getAttribute('value') || '',
-      (tab, i, existing) => {
-        const val = tab.value || tab.getAttribute('value') || '';
-        const text = tab.text || tab.getAttribute('text') || '';
-        const icon = tab.icon || tab.getAttribute('icon') || '';
-        const isActive = val === this.value;
-        const isDisabled = tab.disabled || tab.hasAttribute('disabled');
-
-        if (existing) {
-          existing.textContent = '';
-          if (icon) {
-            const iconEl = document.createElement('icon-ui');
-            iconEl.setAttribute('name', icon);
-            existing.appendChild(iconEl);
-          }
-          if (text) {
-            existing.appendChild(document.createTextNode(text));
-          }
-          existing.setAttribute('aria-selected', String(isActive));
-          existing.setAttribute('tabindex', isActive ? '0' : '-1');
-          if (isDisabled) existing.setAttribute('disabled', '');
-          else existing.removeAttribute('disabled');
-          if (isActive) existing.setAttribute('data-active', '');
-          else existing.removeAttribute('data-active');
-          existing.dataset.value = val;
-          return existing;
-        }
-
-        const btn = document.createElement('div');
-        btn.setAttribute('role', 'tab');
-        btn.setAttribute('slot', 'tab-button');
-        btn.dataset.value = val;
-        btn.setAttribute('aria-selected', String(isActive));
-        btn.setAttribute('tabindex', isActive ? '0' : '-1');
-        if (isDisabled) btn.setAttribute('disabled', '');
-        if (isActive) btn.setAttribute('data-active', '');
-        if (icon) {
-          const iconEl = document.createElement('icon-ui');
-          iconEl.setAttribute('name', icon);
-          btn.appendChild(iconEl);
-        }
-        if (text) {
-          btn.appendChild(document.createTextNode(text));
-        }
-        return btn;
-      },
-    );
-
-    // Update sliding indicator
-    this.#updateIndicator();
-
-    // Sync tab content visibility
-    for (const tab of tabs) {
-      const tabVal = tab.value || tab.getAttribute('value') || '';
-      const isActive = tabVal === this.value;
-      if (isActive) {
-        tab.removeAttribute('hidden');
-        tab.setAttribute('role', 'tabpanel');
-      } else {
-        tab.setAttribute('hidden', '');
-      }
-    }
-  }
-
-  #updateIndicator() {
-    const activeBtn = this.#strip?.querySelector('[slot="tab-button"][data-active]');
-    if (!activeBtn) {
-      if (this.#indicator) this.#indicator.style.opacity = '0';
-      return;
-    }
-
-    // Lazy-create indicator
-    const isNew = !this.#indicator;
-    if (isNew) {
-      this.#indicator = document.createElement('span');
-      this.#indicator.setAttribute('slot', 'indicator');
-      this.#strip.appendChild(this.#indicator);
-    }
-
-    const stripRect = this.#strip.getBoundingClientRect();
-    const btnRect = activeBtn.getBoundingClientRect();
-    const isVertical = this.orientation === 'vertical';
-
-    const apply = () => {
-      if (isVertical) {
-        const top = btnRect.top - stripRect.top;
-        this.#indicator.style.transform = `translateY(${top}px)`;
-        this.#indicator.style.height = `${btnRect.height}px`;
-        this.#indicator.style.width = '';
-      } else {
-        const left = btnRect.left - stripRect.left;
-        this.#indicator.style.transform = `translateX(${left}px)`;
-        this.#indicator.style.width = `${btnRect.width}px`;
-        this.#indicator.style.height = '';
-      }
-      this.#indicator.style.opacity = '1';
-    };
-
-    if (isNew) {
-      this.#indicator.style.transition = 'none';
-      apply();
-      this.#transitionRaf = requestAnimationFrame(() => {
-        this.#transitionRaf = null;
-        if (this.#indicator) this.#indicator.style.transition = '';
-      });
-    } else {
-      apply();
-    }
-  }
-
-  #select(value) {
-    if (value === this.value) return;
-    this.value = value;
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
-  }
-
-  #handleClick = (e) => {
-    const btn = e.target.closest('[slot="tab-button"]');
-    if (!btn || !this.contains(btn) || btn.hasAttribute('disabled')) return;
-    this.#select(btn.dataset.value);
-  };
-
-  #handleKeydown = (e) => {
-    const btn = e.target.closest('[slot="tab-button"]');
-    if (!btn || !this.contains(btn)) return;
-
-    const buttons = [...this.#strip.querySelectorAll('[slot="tab-button"]:not([disabled])')];
-    const idx = buttons.indexOf(btn);
-    if (idx < 0) return;
-
-    const isVertical = this.orientation === 'vertical';
-    const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight';
-    const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft';
-
-    let next;
-    switch (e.key) {
-      case nextKey: next = idx < buttons.length - 1 ? idx + 1 : 0; break;
-      case prevKey: next = idx > 0 ? idx - 1 : buttons.length - 1; break;
-      case 'Home':  next = 0; break;
-      case 'End':   next = buttons.length - 1; break;
-      default: return;
-    }
-
-    e.preventDefault();
-    buttons[next].focus();
-    this.#select(buttons[next].dataset.value);
-  };
-}
-customElements.define('tabs-ui', UITabs);
+defineIfFree('tabs-ui', UITabs);
 
 export { UITabs };

package/components/tabs/tabs.yaml

@@ -7,6 +7,10 @@ component: Tabs
 category: container
 version: 1
 description: Tabbed panel switcher. Renders button strip from child tab-ui elements.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 props:
   orientation:
     description: Tab strip orientation. Set to 'vertical' for vertical layout; empty/omitted for horizontal.

package/components/tag/class.js

@@ -0,0 +1,99 @@
+/**
+ * Non-side-effect class export for `<tag-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/tag`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <tag-ui text="Label" variant="info" removable></tag-ui>
+ *
+ * Inline tag / chip. Pill-shaped, text rendered via CSS attr().
+ * Optional dismiss button dispatches a 'remove' CustomEvent.
+ *
+ * Variants: default, info, success, warning, danger
+ * Sizes: sm, md (default)
+ *
+ * Events:
+ *   remove — { detail: { text, value } } fired when dismiss is clicked
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UITag extends UIElement {
+  static properties = {
+    text:      { type: String,  default: '', reflect: true },
+    textContent: { type: String, default: '' },
+    variant:   { type: String,  default: 'default', reflect: true },
+    size:      { type: String,  default: 'md', reflect: true },
+    removable: { type: Boolean, default: false, reflect: true },
+    disabled:  { type: Boolean, default: false, reflect: true },
+  };
+
+  static parts = {
+    dismiss: '<button slot="dismiss" type="button" aria-label="Remove"><icon-ui name="x"></icon-ui></button>',
+  };
+
+  static template = () => null;
+
+  #onClick = (e) => {
+    if (this.disabled) return;
+    if (e.target.closest('[slot="dismiss"]')) {
+      this.dispatchEvent(new CustomEvent('remove', {
+        bubbles: true,
+        detail: { text: this.text, value: this.text },
+      }));
+      this.remove();
+    }
+  };
+
+  #onKeydown = (e) => {
+    if (this.disabled) return;
+    if (e.target.closest('[slot="dismiss"]') && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent('remove', {
+        bubbles: true,
+        detail: { text: this.text, value: this.text },
+      }));
+      this.remove();
+    }
+  };
+
+  connected() {
+    this.setAttribute('role', 'status');
+    this.setAttribute('tabindex', '0');
+
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKeydown);
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKeydown);
+  }
+
+  render() {
+    if (this.text) this.setAttribute('aria-label', this.text);
+
+    if (this.disabled) {
+      this.setAttribute('aria-disabled', 'true');
+      this.setAttribute('tabindex', '-1');
+    } else {
+      this.removeAttribute('aria-disabled');
+      this.setAttribute('tabindex', '0');
+    }
+
+    if (this.removable && !this.disabled) {
+      const btn = this.ensure('dismiss');
+      if (btn && btn.parentElement !== this) this.appendChild(btn);
+    } else {
+      this.drop('dismiss');
+    }
+  }
+}

package/components/tag/tag.a2ui.json

@@ -64,6 +64,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "display",
+    "composes": [],
     "events": {
       "remove": {
         "description": "Fired when the dismiss button is activated."