@adia-ai/web-components 0.4.6 → 0.4.8

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: []