@adia-ai/web-components 0.4.6 → 0.4.8

package/components/option-card/option-card.js

@@ -1,158 +1,17 @@
 /**
- * <option-card-ui> — Selectable card with radio semantics.
+ * `<option-card-ui>` — auto-registers the tag on import.
  *
- * A "rich radio" — single-select-of-N where each option carries a
- * heading, optional description, and optional leading icon. Siblings
- * with the same `name` form a radiogroup. The whole card is the click
- * target; a CSS-rendered radio circle in the top-left signals state.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- *   <option-card-ui name="use-case" value="build" checked
- *                   heading="I'm building a product"
- *                   description="Spinning up a new project — design, ship, iterate.">
- *   </option-card-ui>
+ *   import { UIOptionCard } from '@adia-ai/web-components/components/option-card/class';
  *
- * Rich content via slots:
- *
- *   <option-card-ui name="plan" value="pro">
- *     <span slot="heading">Pro <badge-ui text="14-day trial"></badge-ui></span>
- *     <span slot="description">Unlimited members · advanced charts</span>
- *   </option-card-ui>
- *
- * Spillover content via the default slot — any unslotted child shows
- * only when the card is `[checked]`. Used for "Other"-style fields:
- *
- *   <option-card-ui name="reason" value="other"
- *                   heading="Something else">
- *     <textarea-ui name="reason-detail" rows="3"></textarea-ui>
- *   </option-card-ui>
- *
- * Sibling navigation: arrow keys move focus and selection; Space/Enter
- * select. Form-associated via UIFormElement, so `name=value` submits
- * with the parent form when the card is checked.
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-
-class UIOptionCard extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    checked:     { type: Boolean, default: false, reflect: true },
-    heading:     { type: String,  default: '', reflect: true },
-    description: { type: String,  default: '', reflect: true },
-    icon:        { type: String,  default: '', reflect: true },
-    layout:      { type: String,  default: 'default', reflect: true },
-  };
-
-  static template = () => null;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'radio');
-    this.setAttribute('tabindex', '0');
-    this.#ensureLayout();
-    this.addEventListener('click', this.#select);
-    this.addEventListener('keydown', this.#onKey);
-  }
-
-  disconnected() {
-    super.disconnected();
-    this.removeEventListener('click', this.#select);
-    this.removeEventListener('keydown', this.#onKey);
-  }
-
-  render() {
-    this.setAttribute('aria-checked', String(this.checked));
-    if (this.disabled) this.setAttribute('aria-disabled', 'true');
-    else this.removeAttribute('aria-disabled');
-
-    // Keep slotted content in sync with attrs (only when slot was
-    // auto-stamped from the attr — don't clobber consumer-authored
-    // rich content).
-    const h = this.querySelector(':scope > [slot="heading"]');
-    if (h && h.dataset.fromAttr === 'true') h.textContent = this.heading || '';
-    const d = this.querySelector(':scope > [slot="description"]');
-    if (d && d.dataset.fromAttr === 'true') d.textContent = this.description || '';
-    const i = this.querySelector(':scope > [slot="icon"]');
-    if (i && i.dataset.fromAttr === 'true') i.setAttribute('name', this.icon || '');
-
-    if (this.checked) this.syncValue(this.value || 'on');
-    else this.syncValue('');
-  }
-
-  // ── Private ───────────────────────────────────────────────────────
-
-  /** Stamp heading / description / icon from attributes when the
-   *  consumer hasn't already provided slotted content. */
-  #ensureLayout() {
-    if (this.heading && !this.querySelector(':scope > [slot="heading"]')) {
-      const el = document.createElement('span');
-      el.setAttribute('slot', 'heading');
-      el.dataset.fromAttr = 'true';
-      el.textContent = this.heading;
-      this.appendChild(el);
-    }
-    if (this.description && !this.querySelector(':scope > [slot="description"]')) {
-      const el = document.createElement('span');
-      el.setAttribute('slot', 'description');
-      el.dataset.fromAttr = 'true';
-      el.textContent = this.description;
-      this.appendChild(el);
-    }
-    if (this.icon && !this.querySelector(':scope > [slot="icon"]')) {
-      const el = document.createElement('icon-ui');
-      el.setAttribute('slot', 'icon');
-      el.dataset.fromAttr = 'true';
-      el.setAttribute('name', this.icon);
-      this.appendChild(el);
-    }
-  }
-
-  #select = () => {
-    if (this.disabled || this.readonly || this.checked) return;
-    const group = this.#group();
-    if (group) {
-      for (const el of group.querySelectorAll(`option-card-ui[name="${this.name}"]`)) {
-        if (el !== this && el.checked) el.checked = false;
-      }
-    }
-    this.checked = true;
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
-  };
-
-  #onKey = (e) => {
-    // Don't intercept keys when focus is in a nested form control
-    // (textarea, input, contenteditable). Otherwise Space/Enter would
-    // block typing and arrow keys would navigate siblings instead of
-    // moving the cursor.
-    if (e.target !== this) return;
-    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this.#select(); return; }
-    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
-      e.preventDefault();
-      const next = this.#sibling(1);
-      if (next) { next.focus(); next.click(); }
-    }
-    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
-      e.preventDefault();
-      const prev = this.#sibling(-1);
-      if (prev) { prev.focus(); prev.click(); }
-    }
-  };
-
-  /** The radiogroup root — explicit `<fieldset>` / `[role="radiogroup"]`
-   *  if present, else the immediate parent. */
-  #group() {
-    return this.closest('fieldset, [role="radiogroup"]') || this.parentElement;
-  }
-
-  #sibling(dir) {
-    const group = this.#group();
-    const items = [...(group?.querySelectorAll(`option-card-ui[name="${this.name}"]`) || [])];
-    const i = items.indexOf(this);
-    if (i < 0) return null;
-    return items[(i + dir + items.length) % items.length] || null;
-  }
-}
+import { defineIfFree } from '../../core/register.js';
+import { UIOptionCard } from './class.js';
 
-customElements.define('option-card-ui', UIOptionCard);
+defineIfFree('option-card-ui', UIOptionCard);
 
 export { UIOptionCard };

package/components/option-card/option-card.yaml

@@ -12,6 +12,10 @@ description: >-
   radiogroup. The whole card is the click target; a CSS-rendered radio
   circle in the top-left signals state. Form-associated, so `name=value`
   submits with the parent form when checked.
+# 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:
   name:
     description: Form control name. Siblings sharing a name form a radiogroup.

package/components/otp-input/class.js

@@ -0,0 +1,180 @@
+/**
+ * Non-side-effect class export for `<otp-input-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/otp-input`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <otp-input-ui length="6"></otp-input-ui>
+ *
+ * One-time-password input with individual digit boxes.
+ * Each digit gets its own input — auto-advances on entry,
+ * backs up on delete, distributes pasted values.
+ *
+ * Events: 'complete' (detail: {value}), 'input'
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export class UIOtpInput extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    length: { type: Number, default: 6, reflect: true },
+  };
+
+  static template = () => null;
+
+  #inputs = [];
+
+  #onInputEvent = (e) => {
+    const index = this.#inputs.indexOf(e.currentTarget);
+    if (index < 0) return;
+    this.#onDigitInput(e, index);
+  };
+
+  #onKeydownEvent = (e) => {
+    const index = this.#inputs.indexOf(e.currentTarget);
+    if (index < 0) return;
+    this.#onKeydown(e, index);
+  };
+
+  #onPasteEvent = (e) => {
+    this.#onPaste(e);
+  };
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'group');
+    this.setAttribute('aria-label', 'One-time password');
+    this.#stamp();
+    this.#bindInputs();
+  }
+
+  #stamp() {
+    const count = this.length || 6;
+    this.innerHTML = '';
+    this.#inputs = [];
+
+    for (let i = 0; i < count; i++) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.maxLength = 1;
+      input.inputMode = 'numeric';
+      input.autocomplete = 'one-time-code';
+      input.setAttribute('slot', 'digit');
+      input.setAttribute('aria-label', `Digit ${i + 1}`);
+      this.appendChild(input);
+      this.#inputs.push(input);
+    }
+  }
+
+  #bindInputs() {
+    for (const input of this.#inputs) {
+      input.addEventListener('input', this.#onInputEvent);
+      input.addEventListener('keydown', this.#onKeydownEvent);
+      input.addEventListener('paste', this.#onPasteEvent);
+    }
+  }
+
+  #unbindInputs() {
+    for (const input of this.#inputs) {
+      input.removeEventListener('input', this.#onInputEvent);
+      input.removeEventListener('keydown', this.#onKeydownEvent);
+      input.removeEventListener('paste', this.#onPasteEvent);
+    }
+  }
+
+  render() {
+    if (!this.#inputs.length) return;
+
+    const disabled = this.disabled;
+    for (const input of this.#inputs) {
+      input.disabled = disabled;
+    }
+  }
+
+  #onDigitInput(e, index) {
+    const input = this.#inputs[index];
+    // Only allow digits
+    input.value = input.value.replace(/\D/g, '').slice(0, 1);
+
+    this.#syncCombined();
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+
+    if (input.value && index < this.#inputs.length - 1) {
+      this.#inputs[index + 1].focus();
+    }
+
+    this.#checkComplete();
+  }
+
+  #onKeydown(e, index) {
+    if (e.key === 'Backspace' && !this.#inputs[index].value && index > 0) {
+      this.#inputs[index - 1].focus();
+      this.#inputs[index - 1].value = '';
+      this.#syncCombined();
+      this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    }
+  }
+
+  #onPaste(e) {
+    e.preventDefault();
+    const text = (e.clipboardData?.getData('text/plain') || '').replace(/\D/g, '');
+    for (let i = 0; i < this.#inputs.length; i++) {
+      this.#inputs[i].value = text[i] || '';
+    }
+    this.#syncCombined();
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+
+    // Focus last filled or first empty
+    const firstEmpty = this.#inputs.findIndex(inp => !inp.value);
+    if (firstEmpty >= 0) {
+      this.#inputs[firstEmpty].focus();
+    } else {
+      this.#inputs[this.#inputs.length - 1].focus();
+    }
+
+    this.#checkComplete();
+  }
+
+  #syncCombined() {
+    const combined = this.#inputs.map(inp => inp.value).join('');
+    this.value = combined;
+    this.syncValue(combined);
+  }
+
+  #checkComplete() {
+    const combined = this.#inputs.map(inp => inp.value).join('');
+    if (combined.length === this.#inputs.length) {
+      this.dispatchEvent(new CustomEvent('complete', {
+        bubbles: true,
+        detail: { value: combined },
+      }));
+    }
+  }
+
+  focus() {
+    const firstEmpty = this.#inputs.findIndex(inp => !inp.value);
+    (this.#inputs[firstEmpty >= 0 ? firstEmpty : 0])?.focus();
+  }
+
+  clear() {
+    for (const input of this.#inputs) input.value = '';
+    this.value = '';
+    this.syncValue('');
+    this.#inputs[0]?.focus();
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.#unbindInputs();
+    this.#inputs = [];
+  }
+}

package/components/otp-input/otp-input.a2ui.json

@@ -44,6 +44,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "input",
+    "composes": [],
     "events": {
       "complete": {
         "description": "Fired when all digits are filled. Detail contains { code }."
@@ -90,7 +91,11 @@
         "name": "disabled"
       }
     ],
-    "synonyms": {},
+    "synonyms": {
+      "tags": [
+        "OTP"
+      ]
+    },
     "tag": "otp-input-ui",
     "tokens": {},
     "traits": [],

package/components/otp-input/otp-input.js

@@ -1,170 +1,17 @@
 /**
- * <otp-input-ui length="6"></otp-input-ui>
+ * `<otp-input-ui>` — auto-registers the tag on import.
  *
- * One-time-password input with individual digit boxes.
- * Each digit gets its own input — auto-advances on entry,
- * backs up on delete, distributes pasted values.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Events: 'complete' (detail: {value}), 'input'
+ *   import { UIOtpInput } from '@adia-ai/web-components/components/otp-input/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-
-class UIOtpInput extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    length: { type: Number, default: 6, reflect: true },
-  };
-
-  static template = () => null;
-
-  #inputs = [];
-
-  #onInputEvent = (e) => {
-    const index = this.#inputs.indexOf(e.currentTarget);
-    if (index < 0) return;
-    this.#onDigitInput(e, index);
-  };
-
-  #onKeydownEvent = (e) => {
-    const index = this.#inputs.indexOf(e.currentTarget);
-    if (index < 0) return;
-    this.#onKeydown(e, index);
-  };
-
-  #onPasteEvent = (e) => {
-    this.#onPaste(e);
-  };
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'group');
-    this.setAttribute('aria-label', 'One-time password');
-    this.#stamp();
-    this.#bindInputs();
-  }
-
-  #stamp() {
-    const count = this.length || 6;
-    this.innerHTML = '';
-    this.#inputs = [];
-
-    for (let i = 0; i < count; i++) {
-      const input = document.createElement('input');
-      input.type = 'text';
-      input.maxLength = 1;
-      input.inputMode = 'numeric';
-      input.autocomplete = 'one-time-code';
-      input.setAttribute('slot', 'digit');
-      input.setAttribute('aria-label', `Digit ${i + 1}`);
-      this.appendChild(input);
-      this.#inputs.push(input);
-    }
-  }
-
-  #bindInputs() {
-    for (const input of this.#inputs) {
-      input.addEventListener('input', this.#onInputEvent);
-      input.addEventListener('keydown', this.#onKeydownEvent);
-      input.addEventListener('paste', this.#onPasteEvent);
-    }
-  }
-
-  #unbindInputs() {
-    for (const input of this.#inputs) {
-      input.removeEventListener('input', this.#onInputEvent);
-      input.removeEventListener('keydown', this.#onKeydownEvent);
-      input.removeEventListener('paste', this.#onPasteEvent);
-    }
-  }
-
-  render() {
-    if (!this.#inputs.length) return;
-
-    const disabled = this.disabled;
-    for (const input of this.#inputs) {
-      input.disabled = disabled;
-    }
-  }
-
-  #onDigitInput(e, index) {
-    const input = this.#inputs[index];
-    // Only allow digits
-    input.value = input.value.replace(/\D/g, '').slice(0, 1);
-
-    this.#syncCombined();
-    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
-
-    if (input.value && index < this.#inputs.length - 1) {
-      this.#inputs[index + 1].focus();
-    }
-
-    this.#checkComplete();
-  }
-
-  #onKeydown(e, index) {
-    if (e.key === 'Backspace' && !this.#inputs[index].value && index > 0) {
-      this.#inputs[index - 1].focus();
-      this.#inputs[index - 1].value = '';
-      this.#syncCombined();
-      this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
-    }
-  }
-
-  #onPaste(e) {
-    e.preventDefault();
-    const text = (e.clipboardData?.getData('text/plain') || '').replace(/\D/g, '');
-    for (let i = 0; i < this.#inputs.length; i++) {
-      this.#inputs[i].value = text[i] || '';
-    }
-    this.#syncCombined();
-    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
-
-    // Focus last filled or first empty
-    const firstEmpty = this.#inputs.findIndex(inp => !inp.value);
-    if (firstEmpty >= 0) {
-      this.#inputs[firstEmpty].focus();
-    } else {
-      this.#inputs[this.#inputs.length - 1].focus();
-    }
-
-    this.#checkComplete();
-  }
-
-  #syncCombined() {
-    const combined = this.#inputs.map(inp => inp.value).join('');
-    this.value = combined;
-    this.syncValue(combined);
-  }
-
-  #checkComplete() {
-    const combined = this.#inputs.map(inp => inp.value).join('');
-    if (combined.length === this.#inputs.length) {
-      this.dispatchEvent(new CustomEvent('complete', {
-        bubbles: true,
-        detail: { value: combined },
-      }));
-    }
-  }
-
-  focus() {
-    const firstEmpty = this.#inputs.findIndex(inp => !inp.value);
-    (this.#inputs[firstEmpty >= 0 ? firstEmpty : 0])?.focus();
-  }
-
-  clear() {
-    for (const input of this.#inputs) input.value = '';
-    this.value = '';
-    this.syncValue('');
-    this.#inputs[0]?.focus();
-  }
+import { defineIfFree } from '../../core/register.js';
+import { UIOtpInput } from './class.js';
 
-  disconnected() {
-    super.disconnected();
-    this.#unbindInputs();
-    this.#inputs = [];
-  }
-}
-customElements.define('otp-input-ui', UIOtpInput);
+defineIfFree('otp-input-ui', UIOtpInput);
 
 export { UIOtpInput };