@adia-ai/web-components 0.0.1

package/components/slider/slider.yaml

@@ -0,0 +1,299 @@
+# 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: AdiaSlider
+tag: slider-ui
+component: Slider
+category: input
+version: 1
+description: Range slider with track, fill, and thumb. Supports label, suffix, and keyboard control.
+  Form-associated.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  required:
+    description: Required for validation
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables interaction
+    type: boolean
+    default: false
+    reflect: true
+  error:
+    description: Validation error
+    type: string
+    default: ""
+  label:
+    description: Label text above the slider
+    type: string
+    default: ""
+  max:
+    description: Maximum slider value
+    type: number
+    default: 100
+  min:
+    description: Minimum slider value
+    type: number
+    default: 0
+  showValue:
+    description: Displays current value below the slider
+    type: boolean
+    default: false
+    attribute: show-value
+  step:
+    description: Step increment between values
+    type: number
+    default: 1
+  suffix:
+    description: Value suffix text
+    type: string
+    default: ""
+  value:
+    description: Current slider value
+    type: number
+    default: 50
+events:
+  change:
+    description: "Fired when the value changes (on blur for inputs, on selection for pickers)."
+  input:
+    description: Fired on each slider movement
+slots:
+  input:
+    description: Native range input element
+  label:
+    description: Label element above the slider
+  value:
+    description: Current value display
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens:
+  --slider-fill:
+    description: Filled track / thumb color
+  --slider-thumb-size:
+    description: Thumb diameter
+  --slider-track:
+    description: Track background color
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: slider-range
+    description: Card with labeled slider components for adjusting values like volume, brightness, and contrast.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Audio & Display",
+          "variant": "section"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "sliders"
+          ]
+        },
+        {
+          "id": "sliders",
+          "component": "Column",
+          "children": [
+            "volume",
+            "brightness",
+            "contrast"
+          ],
+          "gap": "6"
+        },
+        {
+          "id": "volume",
+          "component": "Slider",
+          "label": "Volume",
+          "min": 0,
+          "max": 100,
+          "value": 75,
+          "name": "volume"
+        },
+        {
+          "id": "brightness",
+          "component": "Slider",
+          "label": "Brightness",
+          "min": 0,
+          "max": 100,
+          "value": 50,
+          "name": "brightness"
+        },
+        {
+          "id": "contrast",
+          "component": "Slider",
+          "label": "Contrast",
+          "min": 0,
+          "max": 100,
+          "value": 60,
+          "name": "contrast"
+        }
+      ]
+  - name: theme-customizer
+    description: Card with color pickers, theme select, density slider, and preview area for theme
+      customization.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "size": "lg",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title",
+            "desc"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Theme Customizer",
+          "variant": "section"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "slot": "description",
+          "variant": "caption",
+          "textContent": "Personalize your interface appearance"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "fields"
+          ]
+        },
+        {
+          "id": "fields",
+          "component": "Column",
+          "children": [
+            "colors-row",
+            "theme-select",
+            "density",
+            "preview-label"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "colors-row",
+          "component": "Row",
+          "children": [
+            "primary-color",
+            "accent-color"
+          ],
+          "gap": "3"
+        },
+        {
+          "id": "primary-color",
+          "component": "Input",
+          "label": "Primary Color",
+          "type": "color",
+          "name": "primaryColor",
+          "value": "#6366f1"
+        },
+        {
+          "id": "accent-color",
+          "component": "Input",
+          "label": "Accent Color",
+          "type": "color",
+          "name": "accentColor",
+          "value": "#f59e0b"
+        },
+        {
+          "id": "theme-select",
+          "component": "Select",
+          "label": "Theme",
+          "name": "theme",
+          "placeholder": "Select theme..."
+        },
+        {
+          "id": "density",
+          "component": "Slider",
+          "label": "Density",
+          "min": 1,
+          "max": 5,
+          "value": 3,
+          "name": "density"
+        },
+        {
+          "id": "preview-label",
+          "component": "Text",
+          "variant": "caption",
+          "textContent": "Preview will update in real time"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "reset-btn",
+            "save-btn"
+          ]
+        },
+        {
+          "id": "reset-btn",
+          "component": "Button",
+          "text": "Reset to Default",
+          "variant": "ghost"
+        },
+        {
+          "id": "save-btn",
+          "component": "Button",
+          "text": "Save Theme",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - slider
+  - range
+  - volume
+synonyms:
+  range:
+    - slider
+    - range
+  volume:
+    - slider
+    - range
+    - music
+related:
+  - input
+  - select
+  - button
+  - embed

package/components/stack/stack.a2ui.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Stack.json",
+  "title": "Stack",
+  "description": "Grid overlay layout — children stack on top of each other.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "align": {
+      "description": "Alignment of stacked items",
+      "type": "string",
+      "default": "center"
+    },
+    "component": {
+      "const": "Stack"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [
+      {
+        "description": "Basic Stack usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Stack\",\n    \"children\": [\n      \"child1\",\n      \"child2\"\n    ]\n  },\n  {\n    \"id\": \"child1\",\n    \"component\": \"Text\",\n    \"textContent\": \"First item\"\n  },\n  {\n    \"id\": \"child2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Second item\"\n  }\n]",
+        "name": "basic-stack"
+      }
+    ],
+    "keywords": [
+      "stack"
+    ],
+    "name": "AdiaStack",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "stack-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/stack/stack.css

@@ -0,0 +1,28 @@
+@scope (stack-ui) {
+  :where(:scope) {
+    --stack-align: center;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: grid;
+    place-items: var(--stack-align);
+    /* Same UA override as row-ui/col-ui: [align=...] is for flex/grid, not text. */
+    text-align: inherit;
+  }
+
+  > * {
+    grid-area: 1 / 1;
+  }
+
+  /* Alignment */
+  :scope[align="center"]       { --stack-align: center; }
+  :scope[align="top-left"]     { --stack-align: start start; }
+  :scope[align="top-right"]    { --stack-align: start end; }
+  :scope[align="bottom-left"]  { --stack-align: end start; }
+  :scope[align="bottom-right"] { --stack-align: end end; }
+  :scope[align="top"]          { --stack-align: start center; }
+  :scope[align="bottom"]       { --stack-align: end center; }
+  :scope[align="left"]         { --stack-align: center start; }
+  :scope[align="right"]        { --stack-align: center end; }
+}

package/components/stack/stack.js

@@ -0,0 +1,18 @@
+/**
+ * stack-ui — grid-overlay primitive. Children stack on top of each other
+ * (grid area 1/1), useful for badges-on-avatars, skeleton overlays, etc.
+ *
+ * <stack-ui align="center">...</stack-ui>
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaStack extends AdiaElement {
+  static properties = {
+    align: { type: String, default: 'center', reflect: true },
+  };
+  static template = () => null;
+}
+customElements.define('stack-ui', AdiaStack);
+
+export { AdiaStack };

package/components/stack/stack.yaml

@@ -0,0 +1,54 @@
+# 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: AdiaStack
+tag: stack-ui
+component: Stack
+category: layout
+version: 1
+description: Grid overlay layout — children stack on top of each other.
+props:
+  align:
+    description: Alignment of stacked items
+    type: string
+    default: center
+events: {}
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-stack
+    description: Basic Stack usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Stack",
+          "children": [
+            "child1",
+            "child2"
+          ]
+        },
+        {
+          "id": "child1",
+          "component": "Text",
+          "textContent": "First item"
+        },
+        {
+          "id": "child2",
+          "component": "Text",
+          "textContent": "Second item"
+        }
+      ]
+keywords:
+  - stack
+synonyms: {}
+related: []

package/components/stat/stat.a2ui.json

@@ -0,0 +1,246 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Stat.json",
+  "title": "Stat",
+  "description": "Metric/KPI display — value + label + optional change indicator and trend.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "change": {
+      "description": "Change indicator text (e.g. '+12%', '-3%')",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Stat"
+    },
+    "icon": {
+      "description": "Icon name displayed in the icon slot",
+      "type": "string",
+      "default": ""
+    },
+    "label": {
+      "description": "Eyebrow label describing the metric",
+      "type": "string",
+      "default": ""
+    },
+    "trend": {
+      "description": "Trend direction or narrative subtitle. Canonical values color the change badge (up=success, down=danger, neutral/flat=muted); any other string renders as caption-style text under the primary value.",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "The primary metric value to display",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Basic Stat usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Stat\",\n    \"label\": \"Example Stat\",\n    \"value\": \"\"\n  }\n]",
+        "name": "basic-stat"
+      }
+    ],
+    "keywords": [
+      "stat",
+      "stats",
+      "statistics",
+      "kpi",
+      "numbers",
+      "figures",
+      "analytics",
+      "reporting",
+      "insights",
+      "monitor",
+      "monitoring",
+      "health",
+      "overview",
+      "summary",
+      "telemetry",
+      "observability",
+      "performance",
+      "scoreboard"
+    ],
+    "name": "AdiaStat",
+    "related": [],
+    "slots": {
+      "change": {
+        "description": "Child content region for the `change` slot."
+      },
+      "icon": {
+        "description": "Icon region — single icon-ui child."
+      },
+      "label": {
+        "description": "Label region — control label."
+      },
+      "value": {
+        "description": "Child content region for the `value` slot."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "analytics": [
+        "chart",
+        "dashboard",
+        "metric",
+        "stat",
+        "leaderboard"
+      ],
+      "figures": [
+        "stat",
+        "metric",
+        "chart"
+      ],
+      "health": [
+        "dashboard",
+        "metric",
+        "stat",
+        "progress"
+      ],
+      "insights": [
+        "chart",
+        "dashboard",
+        "metric",
+        "stat"
+      ],
+      "kpi": [
+        "stat",
+        "metric",
+        "dashboard",
+        "chart"
+      ],
+      "monitor": [
+        "dashboard",
+        "metric",
+        "stat",
+        "chart",
+        "progress"
+      ],
+      "monitoring": [
+        "dashboard",
+        "metric",
+        "stat",
+        "chart",
+        "progress"
+      ],
+      "numbers": [
+        "stat",
+        "metric"
+      ],
+      "observability": [
+        "dashboard",
+        "metric",
+        "chart",
+        "stat"
+      ],
+      "overview": [
+        "dashboard",
+        "metric",
+        "stat",
+        "card"
+      ],
+      "performance": [
+        "dashboard",
+        "metric",
+        "chart",
+        "stat",
+        "progress"
+      ],
+      "reporting": [
+        "chart",
+        "dashboard",
+        "metric",
+        "stat",
+        "table",
+        "data"
+      ],
+      "scoreboard": [
+        "leaderboard",
+        "stat"
+      ],
+      "statistics": [
+        "stat",
+        "metric",
+        "dashboard",
+        "chart"
+      ],
+      "stats": [
+        "stat",
+        "metric",
+        "dashboard",
+        "chart"
+      ],
+      "summary": [
+        "dashboard",
+        "metric",
+        "stat",
+        "card"
+      ],
+      "telemetry": [
+        "dashboard",
+        "metric",
+        "chart",
+        "stat"
+      ]
+    },
+    "tag": "stat-ui",
+    "tokens": {
+      "--stat-change-size": {
+        "description": "Font size for the change badge"
+      },
+      "--stat-column-gap": {
+        "description": "Horizontal gap between grid columns"
+      },
+      "--stat-down-fg": {
+        "description": "Color for downward trend"
+      },
+      "--stat-icon-fg": {
+        "description": "Color for the icon"
+      },
+      "--stat-label-fg": {
+        "description": "Text color for the label"
+      },
+      "--stat-label-size": {
+        "description": "Font size for the label"
+      },
+      "--stat-row-gap": {
+        "description": "Vertical gap between grid rows"
+      },
+      "--stat-up-fg": {
+        "description": "Color for upward trend"
+      },
+      "--stat-value-fg": {
+        "description": "Text color for the primary value"
+      },
+      "--stat-value-size": {
+        "description": "Font size for the primary value"
+      },
+      "--stat-value-weight": {
+        "description": "Font weight for the primary value"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}