@adia-ai/web-components 0.0.1

package/components/badge/badge.a2ui.json

@@ -0,0 +1,169 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Badge.json",
+  "title": "Badge",
+  "description": "Inline pill-shaped badge/tag. Text rendered via CSS attr().",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Badge"
+    },
+    "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",
+      "enum": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    },
+    "status": {
+      "description": "Semantic status shorthand. Auto-maps to variant and sets text.",
+      "type": "string",
+      "enum": [
+        "New",
+        "Updated",
+        "Deprecated",
+        "Removed",
+        "Beta"
+      ],
+      "default": ""
+    },
+    "text": {
+      "description": "Badge text content. Falls back to existing textContent.",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Semantic color variant.",
+      "type": "string",
+      "enum": [
+        "default",
+        "accent",
+        "info",
+        "success",
+        "warning",
+        "danger",
+        "primary",
+        "soft",
+        "outline",
+        "muted",
+        "neutral"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "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": "[\n  {\n    \"id\": \"legend\",\n    \"component\": \"Row\",\n    \"gap\": \"3\",\n    \"align\": \"center\",\n    \"children\": [\n      \"l1\",\n      \"l2\",\n      \"l3\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Organic\",\n    \"variant\": \"accent\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Direct\",\n    \"variant\": \"success\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Referral\",\n    \"variant\": \"warning\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Badge\",\n    \"icon\": \"dot\",\n    \"text\": \"Social\",\n    \"variant\": \"info\",\n    \"size\": \"sm\"\n  }\n]",
+        "name": "chart-legend"
+      },
+      {
+        "description": "Card with categorized list of bookmark items featuring icon, title, and badge.",
+        "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    \"textContent\": \"Bookmarks\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"categories\"\n    ]\n  },\n  {\n    \"id\": \"categories\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"cat-label-dev\",\n      \"item1\",\n      \"item2\",\n      \"cat-label-design\",\n      \"item3\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"cat-label-dev\",\n    \"component\": \"Text\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Development\"\n  },\n  {\n    \"id\": \"item1\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"icon1\",\n      \"title1\",\n      \"badge1\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"icon1\",\n    \"component\": \"Icon\",\n    \"name\": \"code\"\n  },\n  {\n    \"id\": \"title1\",\n    \"component\": \"Text\",\n    \"textContent\": \"GitHub Repository\"\n  },\n  {\n    \"id\": \"badge1\",\n    \"component\": \"Badge\",\n    \"text\": \"Pinned\",\n    \"variant\": \"default\"\n  },\n  {\n    \"id\": \"item2\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"icon2\",\n      \"title2\",\n      \"badge2\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"icon2\",\n    \"component\": \"Icon\",\n    \"name\": \"file-text\"\n  },\n  {\n    \"id\": \"title2\",\n    \"component\": \"Text\",\n    \"textContent\": \"API Documentation\"\n  },\n  {\n    \"id\": \"badge2\",\n    \"component\": \"Badge\",\n    \"text\": \"New\",\n    \"variant\": \"info\"\n  },\n  {\n    \"id\": \"cat-label-design\",\n    \"component\": \"Text\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Design\"\n  },\n  {\n    \"id\": \"item3\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"icon3\",\n      \"title3\",\n      \"badge3\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"icon3\",\n    \"component\": \"Icon\",\n    \"name\": \"palette\"\n  },\n  {\n    \"id\": \"title3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Figma Project\"\n  },\n  {\n    \"id\": \"badge3\",\n    \"component\": \"Badge\",\n    \"text\": \"3\",\n    \"variant\": \"default\"\n  }\n]",
+        "name": "bookmark-list"
+      },
+      {
+        "description": "Dashboard with KPI stat grid and two chart cards.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"header-row\",\n      \"kpi-grid\",\n      \"chart-grid\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"header-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"dash-title\",\n      \"dash-actions\"\n    ]\n  },\n  {\n    \"id\": \"dash-title\",\n    \"component\": \"Text\",\n    \"textContent\": \"Dashboard\",\n    \"variant\": \"title\"\n  },\n  {\n    \"id\": \"dash-actions\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"export-btn\"\n    ],\n    \"gap\": \"2\"\n  },\n  {\n    \"id\": \"export-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Export\",\n    \"variant\": \"outline\",\n    \"size\": \"sm\",\n    \"icon\": \"download\"\n  },\n  {\n    \"id\": \"kpi-grid\",\n    \"component\": \"Grid\",\n    \"children\": [\n      \"k1\",\n      \"k2\",\n      \"k3\",\n      \"k4\"\n    ],\n    \"columns\": \"4\"\n  },\n  {\n    \"id\": \"k1\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"k1h\",\n      \"k1s\"\n    ]\n  },\n  {\n    \"id\": \"k1h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"k1l\"\n    ]\n  },\n  {\n    \"id\": \"k1l\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Revenue\",\n    \"variant\": \"label\"\n  },\n  {\n    \"id\": \"k1s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"k1v\",\n      \"k1b\"\n    ]\n  },\n  {\n    \"id\": \"k1v\",\n    \"component\": \"Text\",\n    \"textContent\": \"$48.2k\",\n    \"variant\": \"title\"\n  },\n  {\n    \"id\": \"k1b\",\n    \"component\": \"Badge\",\n    \"text\": \"+12.5%\",\n    \"variant\": \"success\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"k2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"k2h\",\n      \"k2s\"\n    ]\n  },\n  {\n    \"id\": \"k2h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"k2l\"\n    ]\n  },\n  {\n    \"id\": \"k2l\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Users\",\n    \"variant\": \"label\"\n  },\n  {\n    \"id\": \"k2s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"k2v\",\n      \"k2b\"\n    ]\n  },\n  {\n    \"id\": \"k2v\",\n    \"component\": \"Text\",\n    \"textContent\": \"2,340\",\n    \"variant\": \"title\"\n  },\n  {\n    \"id\": \"k2b\",\n    \"component\": \"Badge\",\n    \"text\": \"+8%\",\n    \"variant\": \"success\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"k3\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"k3h\",\n      \"k3s\"\n    ]\n  },\n  {\n    \"id\": \"k3h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"k3l\"\n    ]\n  },\n  {\n    \"id\": \"k3l\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Bounce\",\n    \"variant\": \"label\"\n  },\n  {\n    \"id\": \"k3s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"k3v\",\n      \"k3b\"\n    ]\n  },\n  {\n    \"id\": \"k3v\",\n    \"component\": \"Text\",\n    \"textContent\": \"24.3%\",\n    \"variant\": \"title\"\n  },\n  {\n    \"id\": \"k3b\",\n    \"component\": \"Badge\",\n    \"text\": \"-3.1%\",\n    \"variant\": \"danger\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"k4\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"k4h\",\n      \"k4s\"\n    ]\n  },\n  {\n    \"id\": \"k4h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"k4l\"\n    ]\n  },\n  {\n    \"id\": \"k4l\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Session\",\n    \"variant\": \"label\"\n  },\n  {\n    \"id\": \"k4s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"k4v\",\n      \"k4b\"\n    ]\n  },\n  {\n    \"id\": \"k4v\",\n    \"component\": \"Text\",\n    \"textContent\": \"4m 23s\",\n    \"variant\": \"title\"\n  },\n  {\n    \"id\": \"k4b\",\n    \"component\": \"Badge\",\n    \"text\": \"+15s\",\n    \"variant\": \"info\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"chart-grid\",\n    \"component\": \"Grid\",\n    \"children\": [\n      \"ch1\",\n      \"ch2\"\n    ],\n    \"columns\": \"2\"\n  },\n  {\n    \"id\": \"ch1\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"ch1h\",\n      \"ch1s\"\n    ]\n  },\n  {\n    \"id\": \"ch1h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"ch1t\"\n    ]\n  },\n  {\n    \"id\": \"ch1t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Revenue\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"ch1s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"ch1-chart\"\n    ]\n  },\n  {\n    \"id\": \"ch1-chart\",\n    \"component\": \"Chart\",\n    \"type\": \"bar\",\n    \"x\": \"month\",\n    \"y\": \"revenue\"\n  },\n  {\n    \"id\": \"ch2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"ch2h\",\n      \"ch2s\"\n    ]\n  },\n  {\n    \"id\": \"ch2h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"ch2t\"\n    ]\n  },\n  {\n    \"id\": \"ch2t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Users\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"ch2s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"ch2-chart\"\n    ]\n  },\n  {\n    \"id\": \"ch2-chart\",\n    \"component\": \"Chart\",\n    \"type\": \"line\",\n    \"x\": \"month\",\n    \"y\": \"users\"\n  }\n]",
+        "name": "chart-dashboard"
+      }
+    ],
+    "keywords": [
+      "badge",
+      "chip",
+      "label",
+      "tag",
+      "pill",
+      "gamification",
+      "notification",
+      "legend",
+      "status",
+      "pip",
+      "marker"
+    ],
+    "name": "AdiaBadge",
+    "related": [
+      "button",
+      "grid",
+      "chart",
+      "check-box",
+      "avatar"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "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"
+      ],
+      "tag": [
+        "tag",
+        "input",
+        "badge"
+      ]
+    },
+    "tag": "badge-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/badge/badge.css

@@ -0,0 +1,78 @@
+@scope (badge-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --badge-bg:        var(--a-bg-muted);
+    --badge-fg:        var(--a-fg);
+    --badge-radius:    var(--a-radius-md);
+    --badge-px:        var(--a-space-2);
+    --badge-py:        2px;
+    --badge-gap:       var(--a-space-1);
+    --badge-font-size: var(--a-ui-sm);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--badge-gap);
+    width: fit-content;
+    padding: var(--badge-py) var(--badge-px);
+    background: var(--badge-bg);
+    color: var(--badge-fg);
+    font: inherit;
+    font-size: var(--badge-font-size);
+    font-weight: 500;
+    line-height: 1;
+    border-radius: var(--badge-radius);
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  :scope::after {
+    content: attr(text);
+  }
+
+  /* Leading icon stamped by JS (when [icon] is set). Inherits the badge's
+     foreground color so legend chips read as a single color-coded unit
+     (e.g. accent variant → accent-colored dot + accent-colored label). */
+  :scope > icon-ui {
+    --a-icon-size: 0.75em;
+    color: currentColor;
+    flex-shrink: 0;
+  }
+
+  /* ── Variants ──
+     Badge fg pairs with the muted (tinted) bg — use --a-{family}-text, which
+     flips with scheme (shade in light, tint in dark) for proper contrast.
+     --a-{family}-text-strong is for solid fills (--a-{family}-bg) and would
+     collapse contrast on muted: warning fails in dark, danger fails in light.
+     Accent keeps the saturated-text-on-tint look (intentional brand emphasis). */
+  :scope[variant="accent"] {
+    --badge-bg: var(--a-accent-muted);
+    --badge-fg: var(--a-accent-text);
+  }
+
+  :scope[variant="info"] {
+    --badge-bg: var(--a-info-muted);
+    --badge-fg: var(--a-info-text);
+  }
+
+  :scope[variant="success"] {
+    --badge-bg: var(--a-success-muted);
+    --badge-fg: var(--a-success-text);
+  }
+
+  :scope[variant="warning"] {
+    --badge-bg: var(--a-warning-muted);
+    --badge-fg: var(--a-warning-text);
+  }
+
+  :scope[variant="danger"] {
+    --badge-bg: var(--a-danger-muted);
+    --badge-fg: var(--a-danger-text);
+  }
+
+  /* Size handled by universal [size] attribute system. */
+}

package/components/badge/badge.js

@@ -0,0 +1,53 @@
+/**
+ * <badge-ui text="New" variant="accent"></badge-ui>
+ * <badge-ui text="3" variant="danger" size="sm"></badge-ui>
+ * <badge-ui text="Organic" variant="accent" icon="dot"></badge-ui>  ← chart legend chip
+ *
+ * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
+ *
+ * Variants: default, accent, info, success, warning, danger
+ * Sizes: sm, md (default)
+ * Icon: optional leading icon (any registered icon name; "dot" for legend
+ *       markers). Inherits the variant's foreground color so legend chips
+ *       read as a single visual unit instead of icon + label collage.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaBadge extends AdiaElement {
+  static properties = {
+    text:    { type: String,  default: '', reflect: true },
+    variant: { type: String,  default: 'default', reflect: true },
+    size:    { type: String,  default: 'md', reflect: true },
+    icon:    { type: String,  default: '',        reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'status');
+  }
+
+  render() {
+    if (this.text) this.setAttribute('aria-label', this.text);
+
+    // Stamp / update the leading icon. Pattern mirrors button-ui so the same
+    // icon-ui element handles loading + cleanup; we just `prepend` so the icon
+    // sits before the CSS-rendered text (text is `:scope::after { content }`).
+    if (this.icon) {
+      const existing = this.querySelector(':scope > icon-ui');
+      if (!existing || existing.getAttribute('name') !== this.icon) {
+        if (existing) existing.remove();
+        const iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('name', this.icon);
+        iconEl.setAttribute('size', 'sm');
+        this.prepend(iconEl);
+      }
+    } else {
+      this.querySelector(':scope > icon-ui')?.remove();
+    }
+  }
+}
+customElements.define('badge-ui', AdiaBadge);
+
+export { AdiaBadge };