@adia-ai/web-components 0.0.1

package/components/badge/badge.yaml

@@ -0,0 +1,612 @@
+# 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: AdiaBadge
+tag: badge-ui
+component: Badge
+category: display
+version: 1
+description: Inline pill-shaped badge/tag. Text rendered via CSS attr().
+props:
+  icon:
+    description: Optional leading icon (any registered name). Use icon="dot" for chart-legend /
+      status-pip chips. Inherits the variant's foreground color so the dot matches the label.
+    type: string
+    default: ""
+  size:
+    description: Badge size
+    type: string
+    default: md
+    enum:
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+  status:
+    description: Semantic status shorthand. Auto-maps to variant and sets text.
+    type: string
+    default: ""
+    enum:
+      - New
+      - Updated
+      - Deprecated
+      - Removed
+      - Beta
+  text:
+    description: Badge text content. Falls back to existing textContent.
+    type: string
+    default: ""
+  variant:
+    description: Semantic color variant.
+    type: string
+    default: default
+    enum:
+      - default
+      - accent
+      - info
+      - success
+      - warning
+      - danger
+      - primary
+      - soft
+      - outline
+      - muted
+      - neutral
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: chart-legend
+    description: "Horizontal chart legend — Row of Badges with icon=\"dot\". Each badge's variant
+      supplies the dot color. CANONICAL PATTERN: do NOT compose legends as Row(Row(Badge[text=●],
+      Text), …) — that produces rows-of-rows markup. Use one Badge[icon=dot, text=label,
+      variant=color] per series instead."
+    a2ui: >-
+      [
+        {
+          "id": "legend",
+          "component": "Row",
+          "gap": "3",
+          "align": "center",
+          "children": [
+            "l1",
+            "l2",
+            "l3",
+            "l4"
+          ]
+        },
+        {
+          "id": "l1",
+          "component": "Badge",
+          "icon": "dot",
+          "text": "Organic",
+          "variant": "accent",
+          "size": "sm"
+        },
+        {
+          "id": "l2",
+          "component": "Badge",
+          "icon": "dot",
+          "text": "Direct",
+          "variant": "success",
+          "size": "sm"
+        },
+        {
+          "id": "l3",
+          "component": "Badge",
+          "icon": "dot",
+          "text": "Referral",
+          "variant": "warning",
+          "size": "sm"
+        },
+        {
+          "id": "l4",
+          "component": "Badge",
+          "icon": "dot",
+          "text": "Social",
+          "variant": "info",
+          "size": "sm"
+        }
+      ]
+  - name: bookmark-list
+    description: Card with categorized list of bookmark items featuring icon, title, and badge.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Bookmarks",
+          "variant": "section"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "categories"
+          ]
+        },
+        {
+          "id": "categories",
+          "component": "Column",
+          "children": [
+            "cat-label-dev",
+            "item1",
+            "item2",
+            "cat-label-design",
+            "item3"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "cat-label-dev",
+          "component": "Text",
+          "variant": "caption",
+          "textContent": "Development"
+        },
+        {
+          "id": "item1",
+          "component": "Row",
+          "children": [
+            "icon1",
+            "title1",
+            "badge1"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "icon1",
+          "component": "Icon",
+          "name": "code"
+        },
+        {
+          "id": "title1",
+          "component": "Text",
+          "textContent": "GitHub Repository"
+        },
+        {
+          "id": "badge1",
+          "component": "Badge",
+          "text": "Pinned",
+          "variant": "default"
+        },
+        {
+          "id": "item2",
+          "component": "Row",
+          "children": [
+            "icon2",
+            "title2",
+            "badge2"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "icon2",
+          "component": "Icon",
+          "name": "file-text"
+        },
+        {
+          "id": "title2",
+          "component": "Text",
+          "textContent": "API Documentation"
+        },
+        {
+          "id": "badge2",
+          "component": "Badge",
+          "text": "New",
+          "variant": "info"
+        },
+        {
+          "id": "cat-label-design",
+          "component": "Text",
+          "variant": "caption",
+          "textContent": "Design"
+        },
+        {
+          "id": "item3",
+          "component": "Row",
+          "children": [
+            "icon3",
+            "title3",
+            "badge3"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "icon3",
+          "component": "Icon",
+          "name": "palette"
+        },
+        {
+          "id": "title3",
+          "component": "Text",
+          "textContent": "Figma Project"
+        },
+        {
+          "id": "badge3",
+          "component": "Badge",
+          "text": "3",
+          "variant": "default"
+        }
+      ]
+  - name: chart-dashboard
+    description: Dashboard with KPI stat grid and two chart cards.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "header-row",
+            "kpi-grid",
+            "chart-grid"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "header-row",
+          "component": "Row",
+          "children": [
+            "dash-title",
+            "dash-actions"
+          ]
+        },
+        {
+          "id": "dash-title",
+          "component": "Text",
+          "textContent": "Dashboard",
+          "variant": "title"
+        },
+        {
+          "id": "dash-actions",
+          "component": "Row",
+          "children": [
+            "export-btn"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "export-btn",
+          "component": "Button",
+          "text": "Export",
+          "variant": "outline",
+          "size": "sm",
+          "icon": "download"
+        },
+        {
+          "id": "kpi-grid",
+          "component": "Grid",
+          "children": [
+            "k1",
+            "k2",
+            "k3",
+            "k4"
+          ],
+          "columns": "4"
+        },
+        {
+          "id": "k1",
+          "component": "Card",
+          "children": [
+            "k1h",
+            "k1s"
+          ]
+        },
+        {
+          "id": "k1h",
+          "component": "Header",
+          "children": [
+            "k1l"
+          ]
+        },
+        {
+          "id": "k1l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Revenue",
+          "variant": "label"
+        },
+        {
+          "id": "k1s",
+          "component": "Section",
+          "children": [
+            "k1v",
+            "k1b"
+          ]
+        },
+        {
+          "id": "k1v",
+          "component": "Text",
+          "textContent": "$48.2k",
+          "variant": "title"
+        },
+        {
+          "id": "k1b",
+          "component": "Badge",
+          "text": "+12.5%",
+          "variant": "success",
+          "size": "sm"
+        },
+        {
+          "id": "k2",
+          "component": "Card",
+          "children": [
+            "k2h",
+            "k2s"
+          ]
+        },
+        {
+          "id": "k2h",
+          "component": "Header",
+          "children": [
+            "k2l"
+          ]
+        },
+        {
+          "id": "k2l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Users",
+          "variant": "label"
+        },
+        {
+          "id": "k2s",
+          "component": "Section",
+          "children": [
+            "k2v",
+            "k2b"
+          ]
+        },
+        {
+          "id": "k2v",
+          "component": "Text",
+          "textContent": "2,340",
+          "variant": "title"
+        },
+        {
+          "id": "k2b",
+          "component": "Badge",
+          "text": "+8%",
+          "variant": "success",
+          "size": "sm"
+        },
+        {
+          "id": "k3",
+          "component": "Card",
+          "children": [
+            "k3h",
+            "k3s"
+          ]
+        },
+        {
+          "id": "k3h",
+          "component": "Header",
+          "children": [
+            "k3l"
+          ]
+        },
+        {
+          "id": "k3l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Bounce",
+          "variant": "label"
+        },
+        {
+          "id": "k3s",
+          "component": "Section",
+          "children": [
+            "k3v",
+            "k3b"
+          ]
+        },
+        {
+          "id": "k3v",
+          "component": "Text",
+          "textContent": "24.3%",
+          "variant": "title"
+        },
+        {
+          "id": "k3b",
+          "component": "Badge",
+          "text": "-3.1%",
+          "variant": "danger",
+          "size": "sm"
+        },
+        {
+          "id": "k4",
+          "component": "Card",
+          "children": [
+            "k4h",
+            "k4s"
+          ]
+        },
+        {
+          "id": "k4h",
+          "component": "Header",
+          "children": [
+            "k4l"
+          ]
+        },
+        {
+          "id": "k4l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Session",
+          "variant": "label"
+        },
+        {
+          "id": "k4s",
+          "component": "Section",
+          "children": [
+            "k4v",
+            "k4b"
+          ]
+        },
+        {
+          "id": "k4v",
+          "component": "Text",
+          "textContent": "4m 23s",
+          "variant": "title"
+        },
+        {
+          "id": "k4b",
+          "component": "Badge",
+          "text": "+15s",
+          "variant": "info",
+          "size": "sm"
+        },
+        {
+          "id": "chart-grid",
+          "component": "Grid",
+          "children": [
+            "ch1",
+            "ch2"
+          ],
+          "columns": "2"
+        },
+        {
+          "id": "ch1",
+          "component": "Card",
+          "children": [
+            "ch1h",
+            "ch1s"
+          ]
+        },
+        {
+          "id": "ch1h",
+          "component": "Header",
+          "children": [
+            "ch1t"
+          ]
+        },
+        {
+          "id": "ch1t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Revenue",
+          "variant": "section"
+        },
+        {
+          "id": "ch1s",
+          "component": "Section",
+          "children": [
+            "ch1-chart"
+          ]
+        },
+        {
+          "id": "ch1-chart",
+          "component": "Chart",
+          "type": "bar",
+          "x": "month",
+          "y": "revenue"
+        },
+        {
+          "id": "ch2",
+          "component": "Card",
+          "children": [
+            "ch2h",
+            "ch2s"
+          ]
+        },
+        {
+          "id": "ch2h",
+          "component": "Header",
+          "children": [
+            "ch2t"
+          ]
+        },
+        {
+          "id": "ch2t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Users",
+          "variant": "section"
+        },
+        {
+          "id": "ch2s",
+          "component": "Section",
+          "children": [
+            "ch2-chart"
+          ]
+        },
+        {
+          "id": "ch2-chart",
+          "component": "Chart",
+          "type": "line",
+          "x": "month",
+          "y": "users"
+        }
+      ]
+keywords:
+  - badge
+  - chip
+  - label
+  - tag
+  - pill
+  - gamification
+  - notification
+  - legend
+  - status
+  - pip
+  - marker
+synonyms:
+  tag:
+    - tag
+    - input
+    - badge
+  badge:
+    - badge
+    - showcase
+    - tag
+    - label
+  chip:
+    - badge
+    - tag
+    - input
+  gamification:
+    - leaderboard
+    - badge
+    - progress
+  label:
+    - badge
+    - tag
+    - divider
+    - label
+  notification:
+    - notification
+    - toast
+    - alert
+    - badge
+  pill:
+    - badge
+    - tag
+related:
+  - button
+  - grid
+  - chart
+  - check-box
+  - avatar