@adia-ai/web-components 0.4.5 → 0.4.7

package/components/swiper/swiper.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: UISwiper
 tag: swiper-ui
@@ -15,17 +13,21 @@ props:
   slidesPerView:
     description: Number of slides visible at once. Accepts "1", "2", "3", or "auto". Empty = CSS default (single slide).
     type: string
-    default: ""
+    default: ''
     attribute: slides-per-view
   snap:
     description: Scroll-snap alignment — start, center, end, or none.
     type: string
     default: start
-    enum: [start, center, end, none]
+    enum:
+    - start
+    - center
+    - end
+    - none
   gap:
-    description: "Gap between slides (token: sm, md, lg)"
+    description: 'Gap between slides (token: sm, md, lg)'
     type: string
-    default: ""
+    default: ''
   interval:
     description: Autoplay interval in ms
     type: number
@@ -46,225 +48,79 @@ props:
     default: false
 events:
   autoplay-pause:
-    description: "Fired on autoplay-pause."
+    description: Fired on autoplay-pause.
   autoplay-resume:
-    description: "Fired on autoplay-resume."
+    description: Fired on autoplay-resume.
   change:
-    description: "Fired when the active slide changes. Detail: { index, slide }."
+    description: 'Fired when the active slide changes. Detail: { index, slide }.'
 slots:
   default:
-    description: "Default slot — primary child content."
+    description: Default slot — primary child content.
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: image-carousel
-    description: Basic image carousel with 3 slides
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "title"
-          ]
-        },
-        {
-          "id": "title",
-          "component": "Text",
-          "slot": "heading",
-          "variant": "section",
-          "textContent": "Photo Gallery"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "carousel"
-          ]
-        },
-        {
-          "id": "carousel",
-          "component": "Swiper",
-          "children": [
-            "s1",
-            "s2",
-            "s3"
-          ],
-          "gap": "md"
-        },
-        {
-          "id": "s1",
-          "component": "Image",
-          "src": "/images/photo-1.jpg",
-          "alt": "Mountain landscape"
-        },
-        {
-          "id": "s2",
-          "component": "Image",
-          "src": "/images/photo-2.jpg",
-          "alt": "Ocean sunset"
-        },
-        {
-          "id": "s3",
-          "component": "Image",
-          "src": "/images/photo-3.jpg",
-          "alt": "Forest trail"
-        }
-      ]
-  - name: product-showcase
-    description: Product cards in a peek carousel with autoplay
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Swiper",
-          "children": [
-            "p1",
-            "p2",
-            "p3"
-          ],
-          "peek": true,
-          "slides-per-view": "3",
-          "gap": "md",
-          "autoplay": true,
-          "interval": "5000"
-        },
-        {
-          "id": "p1",
-          "component": "Card",
-          "children": [
-            "p1-sec"
-          ]
-        },
-        {
-          "id": "p1-sec",
-          "component": "Section",
-          "children": [
-            "p1-img",
-            "p1-name",
-            "p1-price"
-          ]
-        },
-        {
-          "id": "p1-img",
-          "component": "Image",
-          "src": "/images/product-1.jpg",
-          "alt": "Wireless headphones"
-        },
-        {
-          "id": "p1-name",
-          "component": "Text",
-          "variant": "label",
-          "textContent": "Wireless Headphones"
-        },
-        {
-          "id": "p1-price",
-          "component": "Text",
-          "variant": "metric",
-          "textContent": "$79.99"
-        },
-        {
-          "id": "p2",
-          "component": "Card",
-          "children": [
-            "p2-sec"
-          ]
-        },
-        {
-          "id": "p2-sec",
-          "component": "Section",
-          "children": [
-            "p2-img",
-            "p2-name",
-            "p2-price"
-          ]
-        },
-        {
-          "id": "p2-img",
-          "component": "Image",
-          "src": "/images/product-2.jpg",
-          "alt": "Smart watch"
-        },
-        {
-          "id": "p2-name",
-          "component": "Text",
-          "variant": "label",
-          "textContent": "Smart Watch"
-        },
-        {
-          "id": "p2-price",
-          "component": "Text",
-          "variant": "metric",
-          "textContent": "$199.99"
-        },
-        {
-          "id": "p3",
-          "component": "Card",
-          "children": [
-            "p3-sec"
-          ]
-        },
-        {
-          "id": "p3-sec",
-          "component": "Section",
-          "children": [
-            "p3-img",
-            "p3-name",
-            "p3-price"
-          ]
-        },
-        {
-          "id": "p3-img",
-          "component": "Image",
-          "src": "/images/product-3.jpg",
-          "alt": "Bluetooth speaker"
-        },
-        {
-          "id": "p3-name",
-          "component": "Text",
-          "variant": "label",
-          "textContent": "Bluetooth Speaker"
-        },
-        {
-          "id": "p3-price",
-          "component": "Text",
-          "variant": "metric",
-          "textContent": "$49.99"
-        }
-      ]
+- name: image-carousel
+  description: Basic image carousel with 3 slides
+  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    ]\n\
+    \  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"variant\": \"section\"\
+    ,\n    \"textContent\": \"Photo Gallery\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\"\
+    : [\n      \"carousel\"\n    ]\n  },\n  {\n    \"id\": \"carousel\",\n    \"component\": \"Swiper\",\n    \"children\"\
+    : [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ],\n    \"gap\": \"md\"\n  },\n  {\n    \"id\": \"s1\",\n    \"component\"\
+    : \"Image\",\n    \"src\": \"/images/photo-1.jpg\",\n    \"alt\": \"Mountain landscape\"\n  },\n  {\n    \"id\": \"s2\"\
+    ,\n    \"component\": \"Image\",\n    \"src\": \"/images/photo-2.jpg\",\n    \"alt\": \"Ocean sunset\"\n  },\n  {\n  \
+    \  \"id\": \"s3\",\n    \"component\": \"Image\",\n    \"src\": \"/images/photo-3.jpg\",\n    \"alt\": \"Forest trail\"\
+    \n  }\n]"
+- name: product-showcase
+  description: Product cards in a peek carousel with autoplay
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Swiper\",\n    \"children\": [\n      \"p1\",\n      \"p2\",\n\
+    \      \"p3\"\n    ],\n    \"peek\": true,\n    \"slides-per-view\": \"3\",\n    \"gap\": \"md\",\n    \"autoplay\": true,\n\
+    \    \"interval\": \"5000\"\n  },\n  {\n    \"id\": \"p1\",\n    \"component\": \"Card\",\n    \"children\": [\n     \
+    \ \"p1-sec\"\n    ]\n  },\n  {\n    \"id\": \"p1-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"\
+    p1-img\",\n      \"p1-name\",\n      \"p1-price\"\n    ]\n  },\n  {\n    \"id\": \"p1-img\",\n    \"component\": \"Image\"\
+    ,\n    \"src\": \"/images/product-1.jpg\",\n    \"alt\": \"Wireless headphones\"\n  },\n  {\n    \"id\": \"p1-name\",\n\
+    \    \"component\": \"Text\",\n    \"variant\": \"label\",\n    \"textContent\": \"Wireless Headphones\"\n  },\n  {\n\
+    \    \"id\": \"p1-price\",\n    \"component\": \"Text\",\n    \"variant\": \"metric\",\n    \"textContent\": \"$79.99\"\
+    \n  },\n  {\n    \"id\": \"p2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"p2-sec\"\n    ]\n  },\n \
+    \ {\n    \"id\": \"p2-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"p2-img\",\n      \"p2-name\"\
+    ,\n      \"p2-price\"\n    ]\n  },\n  {\n    \"id\": \"p2-img\",\n    \"component\": \"Image\",\n    \"src\": \"/images/product-2.jpg\"\
+    ,\n    \"alt\": \"Smart watch\"\n  },\n  {\n    \"id\": \"p2-name\",\n    \"component\": \"Text\",\n    \"variant\": \"\
+    label\",\n    \"textContent\": \"Smart Watch\"\n  },\n  {\n    \"id\": \"p2-price\",\n    \"component\": \"Text\",\n \
+    \   \"variant\": \"metric\",\n    \"textContent\": \"$199.99\"\n  },\n  {\n    \"id\": \"p3\",\n    \"component\": \"\
+    Card\",\n    \"children\": [\n      \"p3-sec\"\n    ]\n  },\n  {\n    \"id\": \"p3-sec\",\n    \"component\": \"Section\"\
+    ,\n    \"children\": [\n      \"p3-img\",\n      \"p3-name\",\n      \"p3-price\"\n    ]\n  },\n  {\n    \"id\": \"p3-img\"\
+    ,\n    \"component\": \"Image\",\n    \"src\": \"/images/product-3.jpg\",\n    \"alt\": \"Bluetooth speaker\"\n  },\n\
+    \  {\n    \"id\": \"p3-name\",\n    \"component\": \"Text\",\n    \"variant\": \"label\",\n    \"textContent\": \"Bluetooth\
+    \ Speaker\"\n  },\n  {\n    \"id\": \"p3-price\",\n    \"component\": \"Text\",\n    \"variant\": \"metric\",\n    \"\
+    textContent\": \"$49.99\"\n  }\n]"
 keywords:
-  - carousel
-  - slider
-  - slideshow
-  - slides
-  - gallery
-  - banner
-  - swiper
+- carousel
+- slider
+- slideshow
+- slides
+- gallery
+- banner
+- swiper
 synonyms:
   carousel:
-    - swiper
-    - slide
-    - gallery
-    - banner
+  - swiper
+  - slide
+  - gallery
+  - banner
   slideshow:
-    - swiper
-    - carousel
-    - slide
+  - swiper
+  - carousel
+  - slide
+  tags:
+  - Slideshow
+  - Carousel
 related:
-  - image-gallery
-  - hero-section
-  - product-card
+- image-gallery
+- hero-section
+- product-card

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.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<switch-ui>` — Toggle switch (boolean-semantic form control).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/switch
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SwitchChangeEventDetail {
+  /** Submitted value (defaults to `"on"` when checked). */
+  value: string;
+  /** Current checked state. */
+  checked: boolean;
+}
+export type SwitchChangeEvent = CustomEvent<SwitchChangeEventDetail>;
+
+export class UISwitch extends UIFormElement {
+  /** Checked state — reflected, toggles on click. */
+  checked: boolean;
+  label: string;
+  /** Size — `sm` / `md` / `lg`. */
+  size: '' | 'sm' | 'md' | 'lg';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISwitch, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SwitchChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

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