@adia-ai/web-components 0.4.5 → 0.4.7

package/components/card/card.yaml

@@ -1,25 +1,18 @@
-# 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: UICard
 tag: card-ui
 component: Card
 category: container
 version: 1
-description: >-
-  Bordered container with header, body, and footer sections. The nested <header>
-  activates a 3-column grid when any direct [slot="icon|heading|description|action"]
-  child is present (icon column | heading + description stack | action column).
-  Slot-gating uses :has(> [slot="…"]) (direct-child only) so a nested slot inside a
-  composite child — e.g. <avatar-ui> owning an internal <icon-ui slot="icon"> — does not
-  falsely activate the icon column. The nested <footer> flex-rows with a
-  [slot="description"] + [slot="action"] space-between pattern; multiple <section>
-  siblings stack as the body.
+description: Bordered container with header, body, and footer sections. The nested <header> activates a 3-column grid when
+  any direct [slot="icon|heading|description|action"] child is present (icon column | heading + description stack | action
+  column). Slot-gating uses :has(> [slot="…"]) (direct-child only) so a nested slot inside a composite child — e.g. <avatar-ui>
+  owning an internal <icon-ui slot="icon"> — does not falsely activate the icon column. The nested <footer> flex-rows with
+  a [slot="description"] + [slot="action"] space-between pattern; multiple <section> siblings stack as the body.
 props:
   padding:
-    description: >-
-      Interior padding scale (overrides --card-padding). Accepts the named
-      scale (none/xs/sm/md/lg/xl) or a numeric rung ("1"…"16").
+    description: Interior padding scale (overrides --card-padding). Accepts the named scale (none/xs/sm/md/lg/xl) or a numeric
+      rung ("1"…"16").
     type: string
     default: md
   draggable:
@@ -32,44 +25,44 @@ props:
     type: number
     default: 1
     enum:
-      - 0
-      - 1
-      - 2
-      - 3
+    - 0
+    - 1
+    - 2
+    - 3
   raw:
-    description: Strips background, border, and shadow. Parent owns the surface. Content structure still
-      applies.
+    description: Strips background, border, and shadow. Parent owns the surface. Content structure still applies.
     type: boolean
     default: false
     reflect: true
   size:
     description: Card scale. Controls inset, radius, gap, and font sizes. Default (empty) = md.
     type: string
-    default: ""
+    default: ''
     enum:
-      - sm
-      - md
-      - lg
+    - sm
+    - md
+    - lg
   variant:
-    description: Visual style. `outline` is an alias for `outlined`; `flat` removes shadow; `soft`/`primary` apply tinted surfaces.
+    description: Visual style. `outline` is an alias for `outlined`; `flat` removes shadow; `soft`/`primary` apply tinted
+      surfaces.
     type: string
     default: default
     enum:
-      - default
-      - outlined
-      - outline
-      - filled
-      - ghost
-      - flat
-      - soft
-      - primary
+    - default
+    - outlined
+    - outline
+    - filled
+    - ghost
+    - flat
+    - soft
+    - primary
 events:
   drag-end:
-    description: "Fired when a drag completes."
+    description: Fired when a drag completes.
 slots: {}
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens:
   --card-background:
@@ -96,418 +89,163 @@ tokens:
     description: Override body text size
 a2ui:
   rules:
-    - >-
-      The card's <header> grid activates only for DIRECT-child slotted elements. If
-      you need an icon column, place the icon element (avatar-ui, icon-ui) directly in
-      the header with slot="icon" — not inside a wrapper.
-    - >-
-      Heading slot accepts inline badges/metadata: <span slot="heading"><text-ui
-      strong>Title</text-ui><badge-ui text="New" variant="accent"></badge-ui></span>
-      renders title + badge on one row.
-    - >-
-      Description slot also accepts bare <p> or <small> elements as siblings of the
-      heading — they participate in the grid's row 2 without needing slot="description".
-    - >-
-      Multiple <section> siblings are allowed and stack vertically. [bleed] on a
-      section removes its margin for edge-to-edge content (tables, charts);
-      [padding] adds a canvas-scrim background for hero regions.
-    - >-
-      Footer with a [slot="description"] + [slot="action"] pair triggers
-      justify-content: space-between — useful for a "Last saved …" note on the left
-      and a Save/Cancel button group on the right.
+  - The card's <header> grid activates only for DIRECT-child slotted elements. If you need an icon column, place the icon
+    element (avatar-ui, icon-ui) directly in the header with slot="icon" — not inside a wrapper.
+  - 'Heading slot accepts inline badges/metadata: <span slot="heading"><text-ui strong>Title</text-ui><badge-ui text="New"
+    variant="accent"></badge-ui></span> renders title + badge on one row.'
+  - Description slot also accepts bare <p> or <small> elements as siblings of the heading — they participate in the grid's
+    row 2 without needing slot="description".
+  - Multiple <section> siblings are allowed and stack vertically. [bleed] on a section removes its margin for edge-to-edge
+    content (tables, charts); [padding] adds a canvas-scrim background for hero regions.
+  - 'Footer with a [slot="description"] + [slot="action"] pair triggers justify-content: space-between — useful for a "Last
+    saved …" note on the left and a Save/Cancel button group on the right.'
 anti_patterns: []
 examples:
-  - name: chat-interface
-    description: Chat interface with message bubbles containing avatar and text pairs, plus an input footer.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec",
-            "ftr"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "title"
-          ]
-        },
-        {
-          "id": "title",
-          "component": "Text",
-          "slot": "heading",
-          "textContent": "Chat"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "messages"
-          ]
-        },
-        {
-          "id": "messages",
-          "component": "Column",
-          "gap": "3",
-          "children": [
-            "msg1",
-            "msg2",
-            "msg3",
-            "msg4"
-          ]
-        },
-        {
-          "id": "msg1",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a1",
-            "t1"
-          ]
-        },
-        {
-          "id": "a1",
-          "component": "Avatar",
-          "name": "User",
-          "size": "sm"
-        },
-        {
-          "id": "t1",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Hello! Can you help me with something?"
-        },
-        {
-          "id": "msg2",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a2",
-            "t2"
-          ]
-        },
-        {
-          "id": "a2",
-          "component": "Avatar",
-          "name": "Assistant",
-          "size": "sm"
-        },
-        {
-          "id": "t2",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Of course! I'd be happy to help. What do you need?"
-        },
-        {
-          "id": "msg3",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a3",
-            "t3"
-          ]
-        },
-        {
-          "id": "a3",
-          "component": "Avatar",
-          "name": "User",
-          "size": "sm"
-        },
-        {
-          "id": "t3",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "I need to build a dashboard layout."
-        },
-        {
-          "id": "msg4",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "a4",
-            "t4"
-          ]
-        },
-        {
-          "id": "a4",
-          "component": "Avatar",
-          "name": "Assistant",
-          "size": "sm"
-        },
-        {
-          "id": "t4",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Great choice! Let me suggest some patterns for that."
-        },
-        {
-          "id": "ftr",
-          "component": "Footer",
-          "children": [
-            "input-row"
-          ]
-        },
-        {
-          "id": "input-row",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "chat-input",
-            "send-btn"
-          ]
-        },
-        {
-          "id": "chat-input",
-          "component": "Input",
-          "placeholder": "Type a message..."
-        },
-        {
-          "id": "send-btn",
-          "component": "Button",
-          "text": "Send",
-          "icon": "send",
-          "variant": "primary"
-        }
-      ]
-  - name: command-palette
-    description: Command palette card with search input and a list of command options.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Card",
-          "children": [
-            "hdr",
-            "sec"
-          ]
-        },
-        {
-          "id": "hdr",
-          "component": "Header",
-          "children": [
-            "search"
-          ]
-        },
-        {
-          "id": "search",
-          "component": "Input",
-          "placeholder": "Type a command or search...",
-          "icon": "search"
-        },
-        {
-          "id": "sec",
-          "component": "Section",
-          "children": [
-            "options"
-          ]
-        },
-        {
-          "id": "options",
-          "component": "Column",
-          "gap": "1",
-          "children": [
-            "opt1",
-            "opt2",
-            "opt3",
-            "opt4",
-            "opt5"
-          ]
-        },
-        {
-          "id": "opt1",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i1",
-            "l1"
-          ]
-        },
-        {
-          "id": "i1",
-          "component": "Icon",
-          "name": "file"
-        },
-        {
-          "id": "l1",
-          "component": "Text",
-          "textContent": "Open File"
-        },
-        {
-          "id": "opt2",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i2",
-            "l2"
-          ]
-        },
-        {
-          "id": "i2",
-          "component": "Icon",
-          "name": "gear"
-        },
-        {
-          "id": "l2",
-          "component": "Text",
-          "textContent": "Settings"
-        },
-        {
-          "id": "opt3",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i3",
-            "l3"
-          ]
-        },
-        {
-          "id": "i3",
-          "component": "Icon",
-          "name": "palette"
-        },
-        {
-          "id": "l3",
-          "component": "Text",
-          "textContent": "Change Theme"
-        },
-        {
-          "id": "opt4",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i4",
-            "l4"
-          ]
-        },
-        {
-          "id": "i4",
-          "component": "Icon",
-          "name": "users"
-        },
-        {
-          "id": "l4",
-          "component": "Text",
-          "textContent": "Manage Users"
-        },
-        {
-          "id": "opt5",
-          "component": "Row",
-          "gap": "2",
-          "children": [
-            "i5",
-            "l5"
-          ]
-        },
-        {
-          "id": "i5",
-          "component": "Icon",
-          "name": "sign-out"
-        },
-        {
-          "id": "l5",
-          "component": "Text",
-          "textContent": "Sign Out"
-        }
-      ]
+- name: chat-interface
+  description: Chat interface with message bubbles containing avatar and text pairs, plus an input footer.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n\
+    \      \"ftr\"\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    \"textContent\"\
+    : \"Chat\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"messages\"\n\
+    \    ]\n  },\n  {\n    \"id\": \"messages\",\n    \"component\": \"Column\",\n    \"gap\": \"3\",\n    \"children\": [\n\
+    \      \"msg1\",\n      \"msg2\",\n      \"msg3\",\n      \"msg4\"\n    ]\n  },\n  {\n    \"id\": \"msg1\",\n    \"component\"\
+    : \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a1\",\n      \"t1\"\n    ]\n  },\n  {\n    \"id\": \"a1\"\
+    ,\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t1\",\n   \
+    \ \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Hello! Can you help me with something?\"\
+    \n  },\n  {\n    \"id\": \"msg2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a2\"\
+    ,\n      \"t2\"\n    ]\n  },\n  {\n    \"id\": \"a2\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n\
+    \    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"\
+    textContent\": \"Of course! I'd be happy to help. What do you need?\"\n  },\n  {\n    \"id\": \"msg3\",\n    \"component\"\
+    : \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a3\",\n      \"t3\"\n    ]\n  },\n  {\n    \"id\": \"a3\"\
+    ,\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t3\",\n   \
+    \ \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"I need to build a dashboard layout.\"\n\
+    \  },\n  {\n    \"id\": \"msg4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a4\"\
+    ,\n      \"t4\"\n    ]\n  },\n  {\n    \"id\": \"a4\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n\
+    \    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t4\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"\
+    textContent\": \"Great choice! Let me suggest some patterns for that.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\"\
+    : \"Footer\",\n    \"children\": [\n      \"input-row\"\n    ]\n  },\n  {\n    \"id\": \"input-row\",\n    \"component\"\
+    : \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat-input\",\n      \"send-btn\"\n    ]\n  },\n  {\n  \
+    \  \"id\": \"chat-input\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a message...\"\n  },\n  {\n   \
+    \ \"id\": \"send-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Send\",\n    \"icon\": \"send\",\n    \"variant\"\
+    : \"primary\"\n  }\n]"
+- name: command-palette
+  description: Command palette card with search input and a list of command options.
+  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      \"search\"\n    ]\n\
+    \  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a command or search...\"\
+    ,\n    \"icon\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n \
+    \     \"options\"\n    ]\n  },\n  {\n    \"id\": \"options\",\n    \"component\": \"Column\",\n    \"gap\": \"1\",\n \
+    \   \"children\": [\n      \"opt1\",\n      \"opt2\",\n      \"opt3\",\n      \"opt4\",\n      \"opt5\"\n    ]\n  },\n\
+    \  {\n    \"id\": \"opt1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i1\",\n  \
+    \    \"l1\"\n    ]\n  },\n  {\n    \"id\": \"i1\",\n    \"component\": \"Icon\",\n    \"name\": \"file\"\n  },\n  {\n\
+    \    \"id\": \"l1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Open File\"\n  },\n  {\n    \"id\": \"opt2\"\
+    ,\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i2\",\n      \"l2\"\n    ]\n  },\n \
+    \ {\n    \"id\": \"i2\",\n    \"component\": \"Icon\",\n    \"name\": \"gear\"\n  },\n  {\n    \"id\": \"l2\",\n    \"\
+    component\": \"Text\",\n    \"textContent\": \"Settings\"\n  },\n  {\n    \"id\": \"opt3\",\n    \"component\": \"Row\"\
+    ,\n    \"gap\": \"2\",\n    \"children\": [\n      \"i3\",\n      \"l3\"\n    ]\n  },\n  {\n    \"id\": \"i3\",\n    \"\
+    component\": \"Icon\",\n    \"name\": \"palette\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Text\",\n    \"\
+    textContent\": \"Change Theme\"\n  },\n  {\n    \"id\": \"opt4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n\
+    \    \"children\": [\n      \"i4\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"i4\",\n    \"component\": \"Icon\"\
+    ,\n    \"name\": \"users\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Text\",\n    \"textContent\": \"Manage\
+    \ Users\"\n  },\n  {\n    \"id\": \"opt5\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n \
+    \     \"i5\",\n      \"l5\"\n    ]\n  },\n  {\n    \"id\": \"i5\",\n    \"component\": \"Icon\",\n    \"name\": \"sign-out\"\
+    \n  },\n  {\n    \"id\": \"l5\",\n    \"component\": \"Text\",\n    \"textContent\": \"Sign Out\"\n  }\n]"
 keywords:
-  - card
-  - ecommerce
-  - shop
-  - store
-  - marketplace
-  - catalog
-  - overview
-  - summary
-  - grid
-  - photos
-  - pictures
-  - gallery
-  - portfolio
-  - responsive
+- card
+- ecommerce
+- shop
+- store
+- marketplace
+- catalog
+- overview
+- summary
+- grid
+- photos
+- pictures
+- gallery
+- portfolio
+- responsive
 synonyms:
   catalog:
-    - product
-    - card
-    - image
-    - grid
-    - inventory
+  - product
+  - card
+  - image
+  - grid
+  - inventory
   ecommerce:
-    - product
-    - pricing
-    - inventory
-    - card
-    - image
-    - grid
+  - product
+  - pricing
+  - inventory
+  - card
+  - image
+  - grid
   gallery:
-    - image
-    - gallery
-    - card
-    - grid
+  - image
+  - gallery
+  - card
+  - grid
   grid:
-    - table
-    - data
-    - card
-    - image
-    - feature
-    - grid
+  - table
+  - data
+  - card
+  - image
+  - feature
+  - grid
   marketplace:
-    - product
-    - pricing
-    - card
-    - image
-    - grid
-    - search
-    - filter
+  - product
+  - pricing
+  - card
+  - image
+  - grid
+  - search
+  - filter
   overview:
-    - dashboard
-    - metric
-    - stat
-    - card
+  - dashboard
+  - metric
+  - stat
+  - card
   photos:
-    - image
-    - gallery
-    - card
-    - grid
+  - image
+  - gallery
+  - card
+  - grid
   pictures:
-    - image
-    - gallery
-    - card
-    - grid
+  - image
+  - gallery
+  - card
+  - grid
   portfolio:
-    - image
-    - gallery
-    - card
-    - grid
-    - feature
+  - image
+  - gallery
+  - card
+  - grid
+  - feature
   responsive:
-    - split
-    - sidebar
-    - grid
-    - card
+  - split
+  - sidebar
+  - grid
+  - card
   shop:
-    - product
-    - pricing
-    - inventory
-    - card
+  - product
+  - pricing
+  - inventory
+  - card
   store:
-    - product
-    - pricing
-    - inventory
-    - card
-    - image
+  - product
+  - pricing
+  - inventory
+  - card
+  - image
   summary:
-    - dashboard
-    - metric
-    - stat
-    - card
+  - dashboard
+  - metric
+  - stat
+  - card
+  tags:
+  - ErrorContainer
 related:
-  - avatar
-  - input
-  - button
-  - alert
-  - skeleton
+- avatar
+- input
+- button
+- alert
+- skeleton