@adia-ai/web-components 0.0.1

package/components/swiper/swiper.yaml

@@ -0,0 +1,268 @@
+# 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: AdiaSwiper
+tag: swiper-ui
+component: Swiper
+category: layout
+version: 1
+description: CSS-first carousel with scroll-snap. Supports autoplay, loop, peek, and native scroll markers.
+props:
+  autoplay:
+    description: Enable auto-advance
+    type: boolean
+    default: false
+  slidesPerView:
+    description: Number of slides visible at once. Accepts "1", "2", "3", or "auto".
+    type: string
+    default: "1"
+    attribute: slides-per-view
+  snap:
+    description: Scroll-snap alignment — start, center, end, or none.
+    type: string
+    default: start
+    enum: [start, center, end, none]
+  gap:
+    description: "Gap between slides (token: sm, md, lg)"
+    type: string
+    default: ""
+  interval:
+    description: Autoplay interval in ms
+    type: number
+    default: 5000
+  loop:
+    description: Infinite loop
+    type: boolean
+    default: false
+  peek:
+    description: Show peek of adjacent slides
+    type: boolean
+    default: false
+  slides-per-view:
+    description: Number of visible slides
+    type: string
+    default: ""
+events:
+  autoplay-pause:
+    description: "Fired on autoplay-pause."
+  autoplay-resume:
+    description: "Fired on autoplay-resume."
+  slide-change:
+    description: "Fired on slide-change."
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - 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"
+        }
+      ]
+keywords:
+  - carousel
+  - slider
+  - slideshow
+  - slides
+  - gallery
+  - banner
+  - swiper
+synonyms:
+  carousel:
+    - swiper
+    - slide
+    - gallery
+    - banner
+  slideshow:
+    - swiper
+    - carousel
+    - slide
+related:
+  - image-gallery
+  - hero-section
+  - product-card

package/components/switch/switch.a2ui.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Switch.json",
+  "title": "Switch",
+  "description": "Toggle switch. The host IS the control.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks as required",
+      "type": "boolean",
+      "default": false
+    },
+    "checked": {
+      "description": "Whether the toggle is on",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Switch"
+    },
+    "disabled": {
+      "description": "Disables the toggle",
+      "type": "boolean",
+      "default": false
+    },
+    "hint": {
+      "description": "Help text below the label",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Label text beside the toggle",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "size": {
+      "description": "Sizing scale (xs/sm/md/lg/xl).",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Form value (submitted as 'on' when checked)",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "change": {
+        "description": "Fired when checked state changes"
+      }
+    },
+    "examples": [
+      {
+        "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]",
+        "name": "notification-preferences"
+      }
+    ],
+    "keywords": [
+      "switch"
+    ],
+    "name": "AdiaSwitch",
+    "related": [],
+    "slots": {
+      "hint": {
+        "description": "Help text below the label"
+      },
+      "label": {
+        "description": "Label text beside the toggle"
+      },
+      "thumb": {
+        "description": "Sliding thumb indicator inside track"
+      },
+      "track": {
+        "description": "Toggle track container (holds thumb)"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "switch-ui",
+    "tokens": {
+      "--toggle-thumb-background": {
+        "description": "Thumb color"
+      },
+      "--toggle-thumb-size": {
+        "description": "Thumb diameter"
+      },
+      "--toggle-track-background": {
+        "description": "Unchecked track color"
+      },
+      "--toggle-track-checked": {
+        "description": "Checked track color"
+      },
+      "--toggle-track-height": {
+        "description": "Track height"
+      },
+      "--toggle-track-width": {
+        "description": "Track width"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/switch/switch.css

@@ -0,0 +1,104 @@
+@scope (switch-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --switch-gap:                  var(--a-space-2);
+    --switch-radius:               var(--a-radius-full);
+
+    /* ── Typography ── */
+    --switch-font-size:            var(--a-ui-size);
+
+    /* ── Colors ── */
+    --switch-track-bg-hover:       var(--a-bg-muted);
+    --switch-track-bg-checked-hover: var(--a-primary-hover);
+    --switch-track-border-checked-hover: var(--a-primary-hover);
+    --switch-thumb-shadow:         var(--a-shadow-sm);
+
+    /* ── Transition ── */
+    --switch-duration:             var(--a-duration-fast);
+    --switch-easing:               var(--a-easing);
+
+    /* ── Focus ── */
+    --switch-focus-ring:           var(--a-focus-ring);
+
+    /* ── Track ── (sizes scale with universal [size] attribute via --a-toggle-size) */
+    --switch-track-height:         var(--a-toggle-size);
+    --switch-track-width:          calc(var(--a-toggle-size) * 1.8);
+    --switch-track-bg:             var(--a-ui-bg);
+    --switch-track-border:         var(--a-ui-border);
+    --switch-track-border-hover:   var(--a-fg-subtle);
+
+    /* ── Track: checked ── */
+    --switch-track-bg-checked:     var(--a-primary);
+    --switch-track-border-checked: var(--a-primary);
+
+    /* ── Thumb ── (derived from track; inset accounts for border + visual gap) */
+    --switch-thumb-inset:          2px;
+    --switch-thumb-size:           calc(var(--a-toggle-size) - 2 * var(--switch-thumb-inset) - 2px); /* -2px for 1px border each side */
+    --switch-thumb-bg:             var(--a-fg-muted);
+    --switch-thumb-bg-checked:     white;
+    --switch-thumb-travel:         calc(var(--switch-track-width) - var(--switch-thumb-size) - 2 * var(--switch-thumb-inset) - 2px);
+
+    /* ── State: disabled ── */
+    --switch-fg-disabled:          var(--a-fg-muted);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--switch-gap);
+    cursor: pointer;
+    user-select: none;
+    font-size: var(--switch-font-size);
+  }
+  :scope[disabled] { cursor: not-allowed; color: var(--switch-fg-disabled); }
+
+  [slot="track"] {
+    position: relative;
+    width: var(--switch-track-width);
+    height: var(--switch-track-height);
+    border-radius: var(--switch-radius);
+    background: var(--switch-track-bg);
+    border: 1px solid var(--switch-track-border);
+    flex-shrink: 0;
+    transition:
+      background var(--switch-duration) var(--switch-easing),
+      border-color var(--switch-duration) var(--switch-easing);
+  }
+  :scope:not([disabled]):hover {
+    --switch-track-bg: var(--switch-track-bg-hover);
+    --switch-track-border: var(--switch-track-border-hover);
+  }
+  :scope[checked] {
+    --switch-track-bg: var(--switch-track-bg-checked);
+    --switch-track-border: var(--switch-track-border-checked);
+    --switch-thumb-bg: var(--switch-thumb-bg-checked);
+  }
+  :scope[checked]:not([disabled]):hover {
+    --switch-track-bg: var(--switch-track-bg-checked-hover);
+    --switch-track-border: var(--switch-track-border-checked-hover);
+  }
+
+  [slot="thumb"] {
+    position: absolute;
+    top: var(--switch-thumb-inset);
+    left: var(--switch-thumb-inset);
+    width: var(--switch-thumb-size);
+    height: var(--switch-thumb-size);
+    border-radius: var(--switch-radius);
+    background: var(--switch-thumb-bg);
+    box-shadow: var(--switch-thumb-shadow);
+    transition: transform var(--switch-duration) var(--switch-easing);
+  }
+  :scope[checked] [slot="thumb"] {
+    transform: translateX(var(--switch-thumb-travel));
+  }
+
+  [slot="label"] { font-size: var(--switch-font-size); }
+
+  :scope:focus-visible { outline: none; }
+  :scope:focus-visible [slot="track"] { box-shadow: var(--switch-focus-ring); }
+
+  /* Size handled by universal [size] attribute system. */
+}

package/components/switch/switch.js

@@ -0,0 +1,53 @@
+/**
+ * <switch-ui> — Toggle switch. The host IS the control.
+ * Pure CSS track + thumb, no native <input>.
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+import { html } from '@core/element.js';
+
+class AdiaSwitch extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.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 Event('change', { bubbles: true }));
+  };
+
+  #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', AdiaSwitch);
+
+export { AdiaSwitch };