@adia-ai/web-components 0.4.5 → 0.4.7

package/components/option-card/option-card.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<option-card-ui>` — Radio-style card with heading + description + icon.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/option-card
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface OptionCardChangeEventDetail {
+  value: string;
+  checked: boolean;
+}
+export type OptionCardChangeEvent = CustomEvent<OptionCardChangeEventDetail>;
+
+export class UIOptionCard extends UIFormElement {
+  /** Selected state — reflected; setting `checked=true` deselects siblings in the group. */
+  checked: boolean;
+  heading: string;
+  description: string;
+  icon: string;
+  /** Layout — `default` (vertical) / `horizontal` / `compact`. */
+  layout: 'default' | 'horizontal' | 'compact';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIOptionCard, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: OptionCardChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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/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

@@ -90,7 +90,11 @@
         "name": "disabled"
       }
     ],
-    "synonyms": {},
+    "synonyms": {
+      "tags": [
+        "OTP"
+      ]
+    },
     "tag": "otp-input-ui",
     "tokens": {},
     "traits": [],

package/components/otp-input/otp-input.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `<otp-input-ui>` — Auto-focus-advancing one-time-passcode input (6 digits by default).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/otp-input
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface OtpInputEventDetail {
+  /** Combined digits as a string (e.g. `"123456"`). */
+  value: string;
+}
+export type OtpInputEvent = CustomEvent<OtpInputEventDetail>;
+
+export class UIOtpInput extends UIFormElement {
+  /** Number of digit slots. */
+  length: number;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIOtpInput, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'input', listener: (ev: OtpInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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 };