@adia-ai/web-components 0.4.6 → 0.4.7

package/components/switch/class.js

@@ -0,0 +1,63 @@
+/**
+ * Non-side-effect class export for `<switch-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/switch`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <switch-ui> — Toggle switch. The host IS the control.
+ * Pure CSS track + thumb, no native <input>.
+ */
+
+import { UIFormElement } from '../../core/form.js';
+import { html } from '../../core/element.js';
+
+export class UISwitch extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    checked:  { type: Boolean, default: false, reflect: true },
+    label:    { type: String,  default: '', reflect: true },
+    size:     { type: String,  default: '', reflect: true },
+  };
+
+  static template = (el) => html`
+    <span slot="track"><span slot="thumb"></span></span>
+    ${el.label ? html`<span slot="label">${el.label}</span>` : null}
+  `;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'switch');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this.#toggle);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    this.setAttribute('aria-checked', String(this.checked));
+    this.syncValue(this.checked ? (this.value || 'on') : '');
+  }
+
+  #toggle = () => {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
+  };
+
+  #onKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this.#toggle(); }
+  };
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#toggle);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}

package/components/switch/switch.a2ui.json

@@ -120,7 +120,12 @@
         "name": "disabled"
       }
     ],
-    "synonyms": {},
+    "synonyms": {
+      "tags": [
+        "Toggle",
+        "Switch"
+      ]
+    },
     "tag": "switch-ui",
     "tokens": {
       "--toggle-thumb-background": {

package/components/switch/switch.js

@@ -1,53 +1,17 @@
 /**
- * <switch-ui> — Toggle switch. The host IS the control.
- * Pure CSS track + thumb, no native <input>.
+ * `<switch-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UISwitch } from '@adia-ai/web-components/components/switch/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-import { html } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UISwitch } from './class.js';
 
-class UISwitch extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    checked:  { type: Boolean, default: false, reflect: true },
-    label:    { type: String,  default: '', reflect: true },
-    size:     { type: String,  default: '', reflect: true },
-  };
-
-  static template = (el) => html`
-    <span slot="track"><span slot="thumb"></span></span>
-    ${el.label ? html`<span slot="label">${el.label}</span>` : null}
-  `;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'switch');
-    this.setAttribute('tabindex', '0');
-    this.addEventListener('click', this.#toggle);
-    this.addEventListener('keydown', this.#onKey);
-  }
-
-  render() {
-    this.setAttribute('aria-checked', String(this.checked));
-    this.syncValue(this.checked ? (this.value || 'on') : '');
-  }
-
-  #toggle = () => {
-    if (this.disabled) return;
-    this.checked = !this.checked;
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
-  };
-
-  #onKey = (e) => {
-    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this.#toggle(); }
-  };
-
-  disconnected() {
-    super.disconnected();
-    this.removeEventListener('click', this.#toggle);
-    this.removeEventListener('keydown', this.#onKey);
-  }
-}
-customElements.define('switch-ui', UISwitch);
+defineIfFree('switch-ui', UISwitch);
 
 export { UISwitch };

package/components/switch/switch.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: UISwitch
 tag: switch-ui
@@ -11,7 +9,7 @@ props:
   name:
     description: Form field name
     type: string
-    default: ""
+    default: ''
   required:
     description: Marks as required
     type: boolean
@@ -30,26 +28,26 @@ props:
   hint:
     description: Help text below the label
     type: string
-    default: ""
+    default: ''
   label:
     description: Label text beside the toggle
     type: string
-    default: ""
+    default: ''
   size:
     description: Sizing scale (full tier — xs / sm / md / lg / xl).
     type: string
-    default: ""
+    default: ''
     enum:
-      - xs
-      - sm
-      - md
-      - lg
-      - xl
+    - xs
+    - sm
+    - md
+    - lg
+    - xl
     reflect: true
   value:
     description: Form value (submitted as 'on' when checked)
     type: string
-    default: ""
+    default: ''
 events:
   change:
     description: Fired when checked state changes
@@ -63,11 +61,11 @@ slots:
   track:
     description: Toggle track container (holds thumb)
 states:
-  - name: idle
-    description: Default, ready for interaction.
-  - name: disabled
-    description: Non-interactive; dimmed.
-    attribute: disabled
+- name: idle
+  description: Default, ready for interaction.
+- name: disabled
+  description: Non-interactive; dimmed.
+  attribute: disabled
 traits: []
 tokens:
   --toggle-thumb-background:
@@ -84,255 +82,62 @@ tokens:
     description: Track width
 a2ui:
   rules:
-    - "Self-labeling widget — use the [label] attribute directly; do NOT wrap in <field-ui>. The widget renders its own label inline via CSS attr() pattern. For settings rows (label-left, switch-right), put the descriptive text in switch-ui's own [label] attribute; do not introduce a field-ui wrapper. For descriptive helper text below the switch, use <text-ui variant='caption'> as a sibling — not field-ui's hint slot."
+  - Self-labeling widget — use the [label] attribute directly; do NOT wrap in <field-ui>. The widget renders its own label
+    inline via CSS attr() pattern. For settings rows (label-left, switch-right), put the descriptive text in switch-ui's own
+    [label] attribute; do not introduce a field-ui wrapper. For descriptive helper text below the switch, use <text-ui variant='caption'>
+    as a sibling — not field-ui's hint slot.
 anti_patterns:
-  - description: Wrapping a switch-ui in field-ui. The widget already self-labels.
-    wrong: |
-      <field-ui inline label="Email notifications">
-        <switch-ui></switch-ui>
-      </field-ui>
-    right: |
-      <switch-ui label="Email notifications"></switch-ui>
-    rule: Use [label] on switch-ui directly; do not wrap in field-ui.
+- description: Wrapping a switch-ui in field-ui. The widget already self-labels.
+  wrong: "<field-ui inline label=\"Email notifications\">\n  <switch-ui></switch-ui>\n</field-ui>\n"
+  right: '<switch-ui label="Email notifications"></switch-ui>
+
+    '
+  rule: Use [label] on switch-ui directly; do not wrap in field-ui.
 examples:
-  - name: notification-preferences
-    description: Notification preferences card with toggle switches for different notification channels
-      and types.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "title",
-            "desc"
-          ]
-        },
-        {
-          "id": "title",
-          "component": "Text",
-          "slot": "heading",
-          "variant": "span",
-          "textContent": "Notification Preferences"
-        },
-        {
-          "id": "desc",
-          "component": "Text",
-          "slot": "description",
-          "textContent": "Choose how you want to be notified"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "list"
-          ]
-        },
-        {
-          "id": "list",
-          "component": "Column",
-          "gap": "4",
-          "children": [
-            "r1",
-            "r2",
-            "r3",
-            "r4",
-            "r5"
-          ]
-        },
-        {
-          "id": "r1",
-          "component": "Row",
-          "gap": "3",
-          "align": "center",
-          "children": [
-            "info1",
-            "sw1"
-          ]
-        },
-        {
-          "id": "info1",
-          "component": "Column",
-          "gap": "0",
-          "grow": true,
-          "children": [
-            "label1",
-            "hint1"
-          ]
-        },
-        {
-          "id": "label1",
-          "component": "Text",
-          "weight": "semibold",
-          "textContent": "Email Notifications"
-        },
-        {
-          "id": "hint1",
-          "component": "Text",
-          "color": "muted",
-          "textContent": "Receive updates via email"
-        },
-        {
-          "id": "sw1",
-          "component": "Switch",
-          "checked": true
-        },
-        {
-          "id": "r2",
-          "component": "Row",
-          "gap": "3",
-          "align": "center",
-          "children": [
-            "info2",
-            "sw2"
-          ]
-        },
-        {
-          "id": "info2",
-          "component": "Column",
-          "gap": "0",
-          "grow": true,
-          "children": [
-            "label2",
-            "hint2"
-          ]
-        },
-        {
-          "id": "label2",
-          "component": "Text",
-          "weight": "semibold",
-          "textContent": "Push Notifications"
-        },
-        {
-          "id": "hint2",
-          "component": "Text",
-          "color": "muted",
-          "textContent": "Browser and mobile push alerts"
-        },
-        {
-          "id": "sw2",
-          "component": "Switch",
-          "checked": true
-        },
-        {
-          "id": "r3",
-          "component": "Row",
-          "gap": "3",
-          "align": "center",
-          "children": [
-            "info3",
-            "sw3"
-          ]
-        },
-        {
-          "id": "info3",
-          "component": "Column",
-          "gap": "0",
-          "grow": true,
-          "children": [
-            "label3",
-            "hint3"
-          ]
-        },
-        {
-          "id": "label3",
-          "component": "Text",
-          "weight": "semibold",
-          "textContent": "Marketing Emails"
-        },
-        {
-          "id": "hint3",
-          "component": "Text",
-          "color": "muted",
-          "textContent": "Product updates and announcements"
-        },
-        {
-          "id": "sw3",
-          "component": "Switch"
-        },
-        {
-          "id": "r4",
-          "component": "Row",
-          "gap": "3",
-          "align": "center",
-          "children": [
-            "info4",
-            "sw4"
-          ]
-        },
-        {
-          "id": "info4",
-          "component": "Column",
-          "gap": "0",
-          "grow": true,
-          "children": [
-            "label4",
-            "hint4"
-          ]
-        },
-        {
-          "id": "label4",
-          "component": "Text",
-          "weight": "semibold",
-          "textContent": "Security Alerts"
-        },
-        {
-          "id": "hint4",
-          "component": "Text",
-          "color": "muted",
-          "textContent": "Login attempts and password changes"
-        },
-        {
-          "id": "sw4",
-          "component": "Switch",
-          "checked": true
-        },
-        {
-          "id": "r5",
-          "component": "Row",
-          "gap": "3",
-          "align": "center",
-          "children": [
-            "info5",
-            "sw5"
-          ]
-        },
-        {
-          "id": "info5",
-          "component": "Column",
-          "gap": "0",
-          "grow": true,
-          "children": [
-            "label5",
-            "hint5"
-          ]
-        },
-        {
-          "id": "label5",
-          "component": "Text",
-          "weight": "semibold",
-          "textContent": "Weekly Digest"
-        },
-        {
-          "id": "hint5",
-          "component": "Text",
-          "color": "muted",
-          "textContent": "Summary of activity each week"
-        },
-        {
-          "id": "sw5",
-          "component": "Switch"
-        }
-      ]
+- name: notification-preferences
+  description: Notification preferences card with toggle switches for different notification channels and types.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n\
+    \    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n     \
+    \ \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"\
+    variant\": \"span\",\n    \"textContent\": \"Notification Preferences\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\"\
+    : \"Text\",\n    \"slot\": \"description\",\n    \"textContent\": \"Choose how you want to be notified\"\n  },\n  {\n\
+    \    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"list\"\n    ]\n  },\n  {\n    \"\
+    id\": \"list\",\n    \"component\": \"Column\",\n    \"gap\": \"4\",\n    \"children\": [\n      \"r1\",\n      \"r2\"\
+    ,\n      \"r3\",\n      \"r4\",\n      \"r5\"\n    ]\n  },\n  {\n    \"id\": \"r1\",\n    \"component\": \"Row\",\n  \
+    \  \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"info1\",\n      \"sw1\"\n    ]\n  },\n  {\n\
+    \    \"id\": \"info1\",\n    \"component\": \"Column\",\n    \"gap\": \"0\",\n    \"grow\": true,\n    \"children\": [\n\
+    \      \"label1\",\n      \"hint1\"\n    ]\n  },\n  {\n    \"id\": \"label1\",\n    \"component\": \"Text\",\n    \"weight\"\
+    : \"semibold\",\n    \"textContent\": \"Email Notifications\"\n  },\n  {\n    \"id\": \"hint1\",\n    \"component\": \"\
+    Text\",\n    \"color\": \"muted\",\n    \"textContent\": \"Receive updates via email\"\n  },\n  {\n    \"id\": \"sw1\"\
+    ,\n    \"component\": \"Switch\",\n    \"checked\": true\n  },\n  {\n    \"id\": \"r2\",\n    \"component\": \"Row\",\n\
+    \    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"info2\",\n      \"sw2\"\n    ]\n  },\n\
+    \  {\n    \"id\": \"info2\",\n    \"component\": \"Column\",\n    \"gap\": \"0\",\n    \"grow\": true,\n    \"children\"\
+    : [\n      \"label2\",\n      \"hint2\"\n    ]\n  },\n  {\n    \"id\": \"label2\",\n    \"component\": \"Text\",\n   \
+    \ \"weight\": \"semibold\",\n    \"textContent\": \"Push Notifications\"\n  },\n  {\n    \"id\": \"hint2\",\n    \"component\"\
+    : \"Text\",\n    \"color\": \"muted\",\n    \"textContent\": \"Browser and mobile push alerts\"\n  },\n  {\n    \"id\"\
+    : \"sw2\",\n    \"component\": \"Switch\",\n    \"checked\": true\n  },\n  {\n    \"id\": \"r3\",\n    \"component\":\
+    \ \"Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"info3\",\n      \"sw3\"\n  \
+    \  ]\n  },\n  {\n    \"id\": \"info3\",\n    \"component\": \"Column\",\n    \"gap\": \"0\",\n    \"grow\": true,\n  \
+    \  \"children\": [\n      \"label3\",\n      \"hint3\"\n    ]\n  },\n  {\n    \"id\": \"label3\",\n    \"component\":\
+    \ \"Text\",\n    \"weight\": \"semibold\",\n    \"textContent\": \"Marketing Emails\"\n  },\n  {\n    \"id\": \"hint3\"\
+    ,\n    \"component\": \"Text\",\n    \"color\": \"muted\",\n    \"textContent\": \"Product updates and announcements\"\
+    \n  },\n  {\n    \"id\": \"sw3\",\n    \"component\": \"Switch\"\n  },\n  {\n    \"id\": \"r4\",\n    \"component\": \"\
+    Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"info4\",\n      \"sw4\"\n    ]\n\
+    \  },\n  {\n    \"id\": \"info4\",\n    \"component\": \"Column\",\n    \"gap\": \"0\",\n    \"grow\": true,\n    \"children\"\
+    : [\n      \"label4\",\n      \"hint4\"\n    ]\n  },\n  {\n    \"id\": \"label4\",\n    \"component\": \"Text\",\n   \
+    \ \"weight\": \"semibold\",\n    \"textContent\": \"Security Alerts\"\n  },\n  {\n    \"id\": \"hint4\",\n    \"component\"\
+    : \"Text\",\n    \"color\": \"muted\",\n    \"textContent\": \"Login attempts and password changes\"\n  },\n  {\n    \"\
+    id\": \"sw4\",\n    \"component\": \"Switch\",\n    \"checked\": true\n  },\n  {\n    \"id\": \"r5\",\n    \"component\"\
+    : \"Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"info5\",\n      \"sw5\"\n  \
+    \  ]\n  },\n  {\n    \"id\": \"info5\",\n    \"component\": \"Column\",\n    \"gap\": \"0\",\n    \"grow\": true,\n  \
+    \  \"children\": [\n      \"label5\",\n      \"hint5\"\n    ]\n  },\n  {\n    \"id\": \"label5\",\n    \"component\":\
+    \ \"Text\",\n    \"weight\": \"semibold\",\n    \"textContent\": \"Weekly Digest\"\n  },\n  {\n    \"id\": \"hint5\",\n\
+    \    \"component\": \"Text\",\n    \"color\": \"muted\",\n    \"textContent\": \"Summary of activity each week\"\n  },\n\
+    \  {\n    \"id\": \"sw5\",\n    \"component\": \"Switch\"\n  }\n]"
 keywords:
-  - switch
-synonyms: {}
+- switch
+synonyms:
+  tags:
+  - Toggle
+  - Switch
 related: []