@adia-ai/web-components 0.4.5 → 0.4.7

package/components/tag/tag.js

@@ -1,89 +1,17 @@
 /**
- * <tag-ui text="Label" variant="info" removable></tag-ui>
+ * `<tag-ui>` — auto-registers the tag on import.
  *
- * Inline tag / chip. Pill-shaped, text rendered via CSS attr().
- * Optional dismiss button dispatches a 'remove' CustomEvent.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Variants: default, info, success, warning, danger
- * Sizes: sm, md (default)
+ *   import { UITag } from '@adia-ai/web-components/components/tag/class';
  *
- * Events:
- *   remove — { detail: { text, value } } fired when dismiss is clicked
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UITag } from './class.js';
 
-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');
-    }
-  }
-}
-customElements.define('tag-ui', UITag);
+defineIfFree('tag-ui', UITag);
 
 export { UITag };

package/components/text/class.js

@@ -0,0 +1,46 @@
+/**
+ * Non-side-effect class export for `<text-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/text`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <text-ui variant="heading">Hello World</text-ui>
+ * <text-ui truncate>Long text that gets cut off...</text-ui>
+ * <text-ui variant="body" lines="3">Multi-line clamped content...</text-ui>
+ *
+ * Typography wrapper that applies role tokens.
+ *
+ * Properties:
+ *   variant  — body | heading | title | display | caption | label | kicker | code
+ *   truncate — single-line truncation with ellipsis
+ *   lines    — multi-line clamp count (0 = no clamp)
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIText extends UIElement {
+  static properties = {
+    variant:  { type: String,  default: 'body', reflect: true },
+    strong:   { type: Boolean, default: false, reflect: true },
+    truncate: { type: Boolean, default: false, reflect: true },
+    lines:    { type: Number,  default: 0, reflect: true },
+  };
+
+  static template = () => null;
+
+  render() {
+    if (this.lines > 0) {
+      this.style.setProperty('--_text-lines', String(this.lines));
+    } else {
+      this.style.removeProperty('--_text-lines');
+    }
+  }
+}

package/components/text/text.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `<text-ui>` — Typography wrapper that applies role tokens. Supports truncation and line clamping.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/text
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIText extends UIElement {
+  /** Multi-line clamp count (0 = no clamp) */
+  lines: number;
+  /** When true, applies stronger emphasis (heavier weight + accent color). Styled via :scope[strong] in text.css. Use instead of variant=heading when you want a single emphasized word inline in body copy. */
+  strong: boolean;
+  /** Display text content. The main payload field for Text components extracted from HTML. */
+  textContent: string;
+  /** Single-line truncation with ellipsis. Ignored when `lines` is set. */
+  truncate: boolean;
+  /** Typography variant — sets role tokens (size/weight/tracking/color). */
+  variant: 'body' | 'heading' | 'subheading' | 'title' | 'subsection' | 'display' | 'caption' | 'label' | 'kicker' | 'deck' | 'section' | 'metric' | 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}

package/components/text/text.js

@@ -1,36 +1,17 @@
 /**
- * <text-ui variant="heading">Hello World</text-ui>
- * <text-ui truncate>Long text that gets cut off...</text-ui>
- * <text-ui variant="body" lines="3">Multi-line clamped content...</text-ui>
+ * `<text-ui>` — auto-registers the tag on import.
  *
- * Typography wrapper that applies role tokens.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Properties:
- *   variant  — body | heading | title | display | caption | label | kicker | code
- *   truncate — single-line truncation with ellipsis
- *   lines    — multi-line clamp count (0 = no clamp)
+ *   import { UIText } from '@adia-ai/web-components/components/text/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIText extends UIElement {
-  static properties = {
-    variant:  { type: String,  default: 'body', reflect: true },
-    strong:   { type: Boolean, default: false, reflect: true },
-    truncate: { type: Boolean, default: false, reflect: true },
-    lines:    { type: Number,  default: 0, reflect: true },
-  };
-
-  static template = () => null;
+import { defineIfFree } from '../../core/register.js';
+import { UIText } from './class.js';
 
-  render() {
-    if (this.lines > 0) {
-      this.style.setProperty('--_text-lines', String(this.lines));
-    } else {
-      this.style.removeProperty('--_text-lines');
-    }
-  }
-}
-customElements.define('text-ui', UIText);
+defineIfFree('text-ui', UIText);
 
 export { UIText };

package/components/textarea/class.js

@@ -0,0 +1,134 @@
+/**
+ * Non-side-effect class export for `<textarea-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/textarea`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <textarea-ui> — Multiline text input. The host IS the interactive surface.
+ * Uses contenteditable for text entry, ElementInternals for form participation.
+ * No native <textarea> inside.
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export class UITextarea extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    placeholder: { type: String,  default: '', reflect: true },
+    label:       { type: String,  default: '', reflect: true },
+    rows:        { type: Number,  default: 3, reflect: true },
+    resize:      { type: String,  default: 'vertical', reflect: true },
+  };
+
+  static template = () => null;
+
+  #textEl = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'textbox');
+    this.setAttribute('aria-multiline', 'true');
+
+    if (!this.querySelector('[slot="text"]')) {
+      this.innerHTML = `
+        ${this.label ? `<label slot="label" label="${this.label}"></label>` : ''}
+        <div slot="text" contenteditable="plaintext-only" tabindex="0"
+             ${this.value ? '' : 'data-empty=""'}
+             data-placeholder="${this.placeholder}"></div>
+      `;
+    }
+
+    this.#textEl = this.querySelector('[slot="text"]');
+    if (this.value) this.#textEl.textContent = this.value;
+
+    if (this.#textEl) {
+      this.#textEl.addEventListener('input', this.#onInput);
+      this.#textEl.addEventListener('keydown', this.#onKeydown);
+      this.#textEl.addEventListener('blur', this.#onBlur);
+      this.#textEl.addEventListener('paste', this.#onPaste);
+    }
+  }
+
+  render() {
+    if (!this.#textEl) return;
+
+    this.#textEl.setAttribute('data-placeholder', this.placeholder);
+
+    if (this.disabled || this.readonly) {
+      this.#textEl.contentEditable = 'false';
+    } else {
+      this.#textEl.contentEditable = 'plaintext-only';
+    }
+
+    // Sync programmatic `value` assignments (form.reset(), trait writes,
+    // controlled-input patterns) into the contenteditable surface. Skip
+    // when the surface already matches to avoid clobbering an in-flight
+    // edit's caret.
+    const text = this.value || '';
+    if (this.#textEl.textContent !== text) {
+      this.#textEl.textContent = text;
+      this.#textEl.toggleAttribute('data-empty', !text);
+    }
+
+    const label = this.querySelector('[slot="label"]');
+    if (label && this.label) label.setAttribute('label', this.label);
+
+    this.setAttribute('aria-label', this.label || this.placeholder || '');
+  }
+
+  #onInput = () => {
+    const text = this.#textEl.textContent || '';
+    this.value = text;
+    this.#textEl.toggleAttribute('data-empty', !text);
+    this.syncValue(text);
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+  };
+
+  #onKeydown = (e) => {
+    // Enter without shift submits; shift+enter inserts newline
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      this.dispatchEvent(new Event('submit', { bubbles: true }));
+    }
+  };
+
+  #onBlur = () => {
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  };
+
+  #onPaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData?.getData('text/plain') || '';
+    document.execCommand('insertText', false, text);
+  };
+
+  focus() { this.#textEl?.focus(); }
+
+  clear() {
+    this.value = '';
+    if (this.#textEl) {
+      this.#textEl.textContent = '';
+      this.#textEl.setAttribute('data-empty', '');
+    }
+    this.syncValue('');
+  }
+
+  disconnected() {
+    super.disconnected();
+    if (this.#textEl) {
+      this.#textEl.removeEventListener('input', this.#onInput);
+      this.#textEl.removeEventListener('keydown', this.#onKeydown);
+      this.#textEl.removeEventListener('blur', this.#onBlur);
+      this.#textEl.removeEventListener('paste', this.#onPaste);
+    }
+    this.#textEl = null;
+  }
+}

package/components/textarea/textarea.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<textarea-ui>` — Multi-line text input with Enter-submit semantic.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/textarea
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface TextareaChangeEventDetail {
+  value: string;
+}
+export type TextareaChangeEvent = CustomEvent<TextareaChangeEventDetail>;
+export type TextareaInputEvent = CustomEvent<TextareaChangeEventDetail>;
+
+export class UITextarea extends UIFormElement {
+  placeholder: string;
+  label: string;
+  rows: number;
+  /** CSS `resize` value — `none` / `vertical` (default) / `horizontal` / `both`. */
+  resize: 'none' | 'vertical' | 'horizontal' | 'both';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITextarea, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: TextareaChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: TextareaInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  /** Fired on Enter without Shift; user can `e.preventDefault()` to insert newline. */
+  addEventListener(type: 'submit', listener: (ev: Event) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/textarea/textarea.js

@@ -1,124 +1,17 @@
 /**
- * <textarea-ui> — Multiline text input. The host IS the interactive surface.
- * Uses contenteditable for text entry, ElementInternals for form participation.
- * No native <textarea> inside.
+ * `<textarea-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UITextarea } from '@adia-ai/web-components/components/textarea/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
+import { defineIfFree } from '../../core/register.js';
+import { UITextarea } from './class.js';
 
-class UITextarea extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    placeholder: { type: String,  default: '', reflect: true },
-    label:       { type: String,  default: '', reflect: true },
-    rows:        { type: Number,  default: 3, reflect: true },
-    resize:      { type: String,  default: 'vertical', reflect: true },
-  };
-
-  static template = () => null;
-
-  #textEl = null;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'textbox');
-    this.setAttribute('aria-multiline', 'true');
-
-    if (!this.querySelector('[slot="text"]')) {
-      this.innerHTML = `
-        ${this.label ? `<label slot="label" label="${this.label}"></label>` : ''}
-        <div slot="text" contenteditable="plaintext-only" tabindex="0"
-             ${this.value ? '' : 'data-empty=""'}
-             data-placeholder="${this.placeholder}"></div>
-      `;
-    }
-
-    this.#textEl = this.querySelector('[slot="text"]');
-    if (this.value) this.#textEl.textContent = this.value;
-
-    if (this.#textEl) {
-      this.#textEl.addEventListener('input', this.#onInput);
-      this.#textEl.addEventListener('keydown', this.#onKeydown);
-      this.#textEl.addEventListener('blur', this.#onBlur);
-      this.#textEl.addEventListener('paste', this.#onPaste);
-    }
-  }
-
-  render() {
-    if (!this.#textEl) return;
-
-    this.#textEl.setAttribute('data-placeholder', this.placeholder);
-
-    if (this.disabled || this.readonly) {
-      this.#textEl.contentEditable = 'false';
-    } else {
-      this.#textEl.contentEditable = 'plaintext-only';
-    }
-
-    // Sync programmatic `value` assignments (form.reset(), trait writes,
-    // controlled-input patterns) into the contenteditable surface. Skip
-    // when the surface already matches to avoid clobbering an in-flight
-    // edit's caret.
-    const text = this.value || '';
-    if (this.#textEl.textContent !== text) {
-      this.#textEl.textContent = text;
-      this.#textEl.toggleAttribute('data-empty', !text);
-    }
-
-    const label = this.querySelector('[slot="label"]');
-    if (label && this.label) label.setAttribute('label', this.label);
-
-    this.setAttribute('aria-label', this.label || this.placeholder || '');
-  }
-
-  #onInput = () => {
-    const text = this.#textEl.textContent || '';
-    this.value = text;
-    this.#textEl.toggleAttribute('data-empty', !text);
-    this.syncValue(text);
-    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
-  };
-
-  #onKeydown = (e) => {
-    // Enter without shift submits; shift+enter inserts newline
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      this.dispatchEvent(new Event('submit', { bubbles: true }));
-    }
-  };
-
-  #onBlur = () => {
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
-  };
-
-  #onPaste = (e) => {
-    e.preventDefault();
-    const text = e.clipboardData?.getData('text/plain') || '';
-    document.execCommand('insertText', false, text);
-  };
-
-  focus() { this.#textEl?.focus(); }
-
-  clear() {
-    this.value = '';
-    if (this.#textEl) {
-      this.#textEl.textContent = '';
-      this.#textEl.setAttribute('data-empty', '');
-    }
-    this.syncValue('');
-  }
-
-  disconnected() {
-    super.disconnected();
-    if (this.#textEl) {
-      this.#textEl.removeEventListener('input', this.#onInput);
-      this.#textEl.removeEventListener('keydown', this.#onKeydown);
-      this.#textEl.removeEventListener('blur', this.#onBlur);
-      this.#textEl.removeEventListener('paste', this.#onPaste);
-    }
-    this.#textEl = null;
-  }
-}
-customElements.define('textarea-ui', UITextarea);
+defineIfFree('textarea-ui', UITextarea);
 
 export { UITextarea };