@adia-ai/web-components 0.4.5 → 0.4.7

package/components/segment/class.js

@@ -0,0 +1,62 @@
+/**
+ * Non-side-effect class export for `<segment-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/segment`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <segment-ui value="tab1" text="Tab 1" icon="list"></segment-ui>
+ * Child of segmented-ui. Represents one option.
+ *
+ * `icon=` stamps a leading <icon-ui name="…"> child on render.
+ * Mirrors the button-ui pattern.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UISegment 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 },
+    selected: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'radio');
+    if (!this.getAttribute('tabindex')) this.setAttribute('tabindex', '-1');
+  }
+
+  render() {
+    if (this.text) this.setAttribute('aria-label', this.text);
+    this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
+    if (this.disabled) this.setAttribute('aria-disabled', 'true');
+    else this.removeAttribute('aria-disabled');
+
+    // Stamp/refresh leading icon-ui child when [icon] is set.
+    // Mirrors button-ui's pattern (button.js:29) — author code never
+    // hand-rolls an icon-ui inside a segment.
+    if (this.icon) {
+      const existing = this.querySelector(':scope > icon-ui');
+      if (!existing || existing.getAttribute('name') !== this.icon) {
+        existing?.remove();
+        const iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('name', this.icon);
+        iconEl.setAttribute('aria-hidden', 'true');
+        this.prepend(iconEl);
+      }
+    } else {
+      this.querySelector(':scope > icon-ui')?.remove();
+    }
+  }
+}

package/components/segment/segment.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `<segment-ui>` — Individual segment option, child of segmented-ui.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/segment
+ *
+ * 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 UISegment extends UIElement {
+  /** Disables this segment. */
+  disabled: boolean;
+  /** Phosphor icon name. Rendered as a leading <icon-ui> child stamped on render. */
+  icon: string;
+  /** Whether this segment is currently selected. Managed by the parent Segmented container; don't set multiple siblings selected. */
+  selected: boolean;
+  /** Display text. Rendered via CSS attr(text) on ::after pseudo-element. */
+  text: string;
+  /** Value emitted when this segment is selected. */
+  value: string;
+}

package/components/segment/segment.js

@@ -1,52 +1,17 @@
 /**
- * <segment-ui value="tab1" text="Tab 1" icon="list"></segment-ui>
- * Child of segmented-ui. Represents one option.
+ * `<segment-ui>` — auto-registers the tag on import.
  *
- * `icon=` stamps a leading <icon-ui name="…"> child on render.
- * Mirrors the button-ui pattern.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UISegment } from '@adia-ai/web-components/components/segment/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UISegment 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 },
-    selected: { type: Boolean, default: false, reflect: true },
-  };
-
-  static template = () => null;
-
-  connected() {
-    this.setAttribute('role', 'radio');
-    if (!this.getAttribute('tabindex')) this.setAttribute('tabindex', '-1');
-  }
-
-  render() {
-    if (this.text) this.setAttribute('aria-label', this.text);
-    this.setAttribute('aria-checked', this.selected ? 'true' : 'false');
-    if (this.disabled) this.setAttribute('aria-disabled', 'true');
-    else this.removeAttribute('aria-disabled');
+import { defineIfFree } from '../../core/register.js';
+import { UISegment } from './class.js';
 
-    // Stamp/refresh leading icon-ui child when [icon] is set.
-    // Mirrors button-ui's pattern (button.js:29) — author code never
-    // hand-rolls an icon-ui inside a segment.
-    if (this.icon) {
-      const existing = this.querySelector(':scope > icon-ui');
-      if (!existing || existing.getAttribute('name') !== this.icon) {
-        existing?.remove();
-        const iconEl = document.createElement('icon-ui');
-        iconEl.setAttribute('name', this.icon);
-        iconEl.setAttribute('aria-hidden', 'true');
-        this.prepend(iconEl);
-      }
-    } else {
-      this.querySelector(':scope > icon-ui')?.remove();
-    }
-  }
-}
-customElements.define('segment-ui', UISegment);
+defineIfFree('segment-ui', UISegment);
 
 export { UISegment };

package/components/segmented/class.js

@@ -0,0 +1,165 @@
+/**
+ * Non-side-effect class export for `<segmented-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/segmented`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <segmented-ui value="tab1">
+ *   <segment-ui value="tab1" text="Tab 1"></segment-ui>
+ *   <segment-ui value="tab2" text="Tab 2"></segment-ui>
+ *   <segment-ui value="tab3" text="Tab 3"></segment-ui>
+ * </segmented-ui>
+ *
+ * Mutually exclusive toggle group with animated indicator pill.
+ * Indicator uses CSS transform (GPU-accelerated).
+ */
+
+import { UIFormElement } from '../../core/form.js';
+import '../segment/segment.js';
+
+export class UISegmented extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    value: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #indicator = null;
+  #bound = false;
+  #transitionRaf = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'radiogroup');
+
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#handleClick);
+      this.addEventListener('keydown', this.#handleKeydown);
+    }
+
+    // Default to first segment if no value
+    if (!this.value) {
+      const first = this.querySelector('segment-ui:not([disabled])');
+      if (first) this.value = first.value || first.getAttribute('value') || '';
+    }
+  }
+
+  disconnected() {
+    super.disconnected();
+    if (this.#transitionRaf != null) {
+      cancelAnimationFrame(this.#transitionRaf);
+      this.#transitionRaf = null;
+    }
+    this.removeEventListener('click', this.#handleClick);
+    this.removeEventListener('keydown', this.#handleKeydown);
+    this.#indicator = null;
+    this.#bound = false;
+  }
+
+  get #segments() {
+    return [...this.querySelectorAll('segment-ui')];
+  }
+
+  get #enabledSegments() {
+    return this.#segments.filter(s => !s.disabled);
+  }
+
+  render() {
+    const segs = this.#segments;
+    if (!segs.length) return;
+
+    // Sync selection state
+    for (const seg of segs) {
+      const segVal = seg.value || seg.getAttribute('value') || '';
+      const isActive = segVal === this.value;
+      if (isActive) {
+        seg.setAttribute('selected', '');
+      } else {
+        seg.removeAttribute('selected');
+      }
+      seg.setAttribute('tabindex', isActive ? '0' : '-1');
+    }
+
+    if (this.label) this.setAttribute('aria-label', this.label);
+
+    this.#updateIndicator(segs);
+  }
+
+  #updateIndicator(segs) {
+    const selectedIdx = segs.findIndex(s => (s.value || s.getAttribute('value') || '') === this.value);
+
+    if (selectedIdx < 0) {
+      this.removeAttribute('data-indicator-ready');
+      return;
+    }
+
+    // Lazy-create indicator (prepend so it's behind segments in paint order)
+    const isNew = !this.#indicator;
+    if (isNew) {
+      this.#indicator = document.createElement('span');
+      this.#indicator.setAttribute('data-indicator', '');
+      this.prepend(this.#indicator);
+    }
+
+    this.style.setProperty('--_segment-count', `${segs.length}`);
+
+    if (isNew) {
+      // First render: position instantly, then enable transition next frame
+      this.#indicator.style.transition = 'none';
+      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
+      this.setAttribute('data-indicator-ready', '');
+      this.#transitionRaf = requestAnimationFrame(() => {
+        this.#transitionRaf = null;
+        if (this.#indicator) this.#indicator.style.transition = '';
+      });
+    } else {
+      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
+      this.setAttribute('data-indicator-ready', '');
+    }
+  }
+
+  #select(seg) {
+    if (seg.disabled) return;
+    this.value = seg.value;
+    this.syncValue();
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
+  }
+
+  #handleClick = (e) => {
+    const seg = e.target.closest('segment-ui');
+    if (seg && this.contains(seg)) this.#select(seg);
+  };
+
+  #handleKeydown = (e) => {
+    const target = e.target;
+    if (target.tagName !== 'SEGMENT-UI') return;
+    const segs = this.#enabledSegments;
+    const idx = segs.indexOf(target);
+    if (idx < 0) return;
+
+    let next;
+    switch (e.key) {
+      case 'ArrowRight': case 'ArrowDown':
+        next = idx < segs.length - 1 ? idx + 1 : 0; break;
+      case 'ArrowLeft': case 'ArrowUp':
+        next = idx > 0 ? idx - 1 : segs.length - 1; break;
+      case 'Home': next = 0; break;
+      case 'End': next = segs.length - 1; break;
+      default: return;
+    }
+
+    e.preventDefault();
+    segs[next].focus();
+    this.#select(segs[next]);
+  };
+}

package/components/segmented/segmented.a2ui.json

@@ -92,6 +92,10 @@
         "panel",
         "segmented"
       ],
+      "tags": [
+        "SegmentedControl",
+        "Segmented"
+      ],
       "toggle": [
         "segmented",
         "radio",

package/components/segmented/segmented.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `<segmented-ui>` — Segmented control for 2-5 mutually-exclusive options.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/segmented
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SegmentedChangeEventDetail {
+  value: string;
+}
+export type SegmentedChangeEvent = CustomEvent<SegmentedChangeEventDetail>;
+
+export class UISegmented extends UIFormElement {
+  /** Selected segment's value. */
+  value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISegmented, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SegmentedChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/segmented/segmented.js

@@ -1,155 +1,17 @@
 /**
- * <segmented-ui value="tab1">
- *   <segment-ui value="tab1" text="Tab 1"></segment-ui>
- *   <segment-ui value="tab2" text="Tab 2"></segment-ui>
- *   <segment-ui value="tab3" text="Tab 3"></segment-ui>
- * </segmented-ui>
+ * `<segmented-ui>` — auto-registers the tag on import.
  *
- * Mutually exclusive toggle group with animated indicator pill.
- * Indicator uses CSS transform (GPU-accelerated).
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UISegmented } from '@adia-ai/web-components/components/segmented/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-import '../segment/segment.js';
-
-class UISegmented extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    value: { type: String, default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #indicator = null;
-  #bound = false;
-  #transitionRaf = null;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'radiogroup');
-
-    if (!this.#bound) {
-      this.#bound = true;
-      this.addEventListener('click', this.#handleClick);
-      this.addEventListener('keydown', this.#handleKeydown);
-    }
-
-    // Default to first segment if no value
-    if (!this.value) {
-      const first = this.querySelector('segment-ui:not([disabled])');
-      if (first) this.value = first.value || first.getAttribute('value') || '';
-    }
-  }
-
-  disconnected() {
-    super.disconnected();
-    if (this.#transitionRaf != null) {
-      cancelAnimationFrame(this.#transitionRaf);
-      this.#transitionRaf = null;
-    }
-    this.removeEventListener('click', this.#handleClick);
-    this.removeEventListener('keydown', this.#handleKeydown);
-    this.#indicator = null;
-    this.#bound = false;
-  }
-
-  get #segments() {
-    return [...this.querySelectorAll('segment-ui')];
-  }
-
-  get #enabledSegments() {
-    return this.#segments.filter(s => !s.disabled);
-  }
-
-  render() {
-    const segs = this.#segments;
-    if (!segs.length) return;
-
-    // Sync selection state
-    for (const seg of segs) {
-      const segVal = seg.value || seg.getAttribute('value') || '';
-      const isActive = segVal === this.value;
-      if (isActive) {
-        seg.setAttribute('selected', '');
-      } else {
-        seg.removeAttribute('selected');
-      }
-      seg.setAttribute('tabindex', isActive ? '0' : '-1');
-    }
-
-    if (this.label) this.setAttribute('aria-label', this.label);
-
-    this.#updateIndicator(segs);
-  }
-
-  #updateIndicator(segs) {
-    const selectedIdx = segs.findIndex(s => (s.value || s.getAttribute('value') || '') === this.value);
-
-    if (selectedIdx < 0) {
-      this.removeAttribute('data-indicator-ready');
-      return;
-    }
-
-    // Lazy-create indicator (prepend so it's behind segments in paint order)
-    const isNew = !this.#indicator;
-    if (isNew) {
-      this.#indicator = document.createElement('span');
-      this.#indicator.setAttribute('data-indicator', '');
-      this.prepend(this.#indicator);
-    }
-
-    this.style.setProperty('--_segment-count', `${segs.length}`);
-
-    if (isNew) {
-      // First render: position instantly, then enable transition next frame
-      this.#indicator.style.transition = 'none';
-      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
-      this.setAttribute('data-indicator-ready', '');
-      this.#transitionRaf = requestAnimationFrame(() => {
-        this.#transitionRaf = null;
-        if (this.#indicator) this.#indicator.style.transition = '';
-      });
-    } else {
-      this.#indicator.style.transform = `translateX(${selectedIdx * 100}%)`;
-      this.setAttribute('data-indicator-ready', '');
-    }
-  }
-
-  #select(seg) {
-    if (seg.disabled) return;
-    this.value = seg.value;
-    this.syncValue();
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
-  }
-
-  #handleClick = (e) => {
-    const seg = e.target.closest('segment-ui');
-    if (seg && this.contains(seg)) this.#select(seg);
-  };
-
-  #handleKeydown = (e) => {
-    const target = e.target;
-    if (target.tagName !== 'SEGMENT-UI') return;
-    const segs = this.#enabledSegments;
-    const idx = segs.indexOf(target);
-    if (idx < 0) return;
-
-    let next;
-    switch (e.key) {
-      case 'ArrowRight': case 'ArrowDown':
-        next = idx < segs.length - 1 ? idx + 1 : 0; break;
-      case 'ArrowLeft': case 'ArrowUp':
-        next = idx > 0 ? idx - 1 : segs.length - 1; break;
-      case 'Home': next = 0; break;
-      case 'End': next = segs.length - 1; break;
-      default: return;
-    }
+import { defineIfFree } from '../../core/register.js';
+import { UISegmented } from './class.js';
 
-    e.preventDefault();
-    segs[next].focus();
-    this.#select(segs[next]);
-  };
-}
-customElements.define('segmented-ui', UISegmented);
+defineIfFree('segmented-ui', UISegmented);
 
 export { UISegmented };

package/components/segmented/segmented.yaml

@@ -1,5 +1,3 @@
-# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
-# Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UISegmented
 tag: segmented-ui
@@ -11,81 +9,65 @@ props:
   value:
     description: Value of the currently selected segment.
     type: string
-    default: ""
+    default: ''
 events:
   change:
     description: Fired when the selected segment changes. detail contains { value }.
 slots: {}
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: basic-segmented
-    description: Basic Segmented usage
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "sec"
-          ]
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "comp"
-          ]
-        },
-        {
-          "id": "comp",
-          "component": "Segmented",
-          "value": ""
-        }
-      ]
+- name: basic-segmented
+  description: Basic Segmented usage
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n\
+    \    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"\
+    id\": \"comp\",\n    \"component\": \"Segmented\",\n    \"value\": \"\"\n  }\n]"
 keywords:
-  - segmented
-  - options
-  - select
-  - toggle
-  - switch
-  - tab
-  - tabs
-  - button-group
+- segmented
+- options
+- select
+- toggle
+- switch
+- tab
+- tabs
+- button-group
 synonyms:
   button-group:
-    - toolbar
-    - button
-    - segmented
+  - toolbar
+  - button
+  - segmented
   options:
-    - settings
-    - radio
-    - segmented
-    - accordion
+  - settings
+  - radio
+  - segmented
+  - accordion
   select:
-    - radio
-    - segmented
-    - form
+  - radio
+  - segmented
+  - form
   switch:
-    - segmented
-    - radio
-    - settings
+  - segmented
+  - radio
+  - settings
   tab:
-    - tabs
-    - panel
-    - segmented
+  - tabs
+  - panel
+  - segmented
   tabs:
-    - tabs
-    - panel
-    - segmented
+  - tabs
+  - panel
+  - segmented
   toggle:
-    - segmented
-    - radio
-    - settings
+  - segmented
+  - radio
+  - settings
+  tags:
+  - SegmentedControl
+  - Segmented
 related: []