@adia-ai/web-components 0.0.1

package/components/col/col.a2ui.json

@@ -0,0 +1,104 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Column.json",
+  "title": "Column",
+  "description": "Flex column layout primitive.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "active": {
+      "description": "Marks this column as the active one in a tab-panel layout.",
+      "type": "boolean",
+      "default": false
+    },
+    "align": {
+      "description": "Align items",
+      "type": "string",
+      "default": "stretch"
+    },
+    "basis": {
+      "description": "Flex basis override (CSS length or keyword like \"auto\"/\"content\").",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Column"
+    },
+    "gap": {
+      "description": "Gap between children. Accepts either the named scale (xs/sm/md/lg/xl) or a numeric rung on the spacing scale (\"1\"…\"16\", mapped to --a-space-N).",
+      "type": "string",
+      "default": "md"
+    },
+    "justify": {
+      "description": "Justify content",
+      "type": "string",
+      "default": "start"
+    },
+    "span": {
+      "description": "Column span — consumed by a parent Grid to make this column wrap multiple grid tracks. Accepts a numeric rung (\"1\"..\"6\") or \"full\".",
+      "type": "string",
+      "default": ""
+    },
+    "wrap": {
+      "description": "Allow children to wrap onto multiple lines (default is flex nowrap).",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [
+      {
+        "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": "chat-interface"
+      },
+      {
+        "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]",
+        "name": "command-palette"
+      }
+    ],
+    "keywords": [
+      "column",
+      "col"
+    ],
+    "name": "AdiaColumn",
+    "related": [
+      "avatar",
+      "input",
+      "button",
+      "empty-state",
+      "skeleton"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "col-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/col/col.css

@@ -0,0 +1,36 @@
+@scope (col-ui) {
+  :where(:scope) {
+    --col-gap:     var(--a-gap);
+    --col-justify: flex-start;
+    --col-align:   stretch;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--col-gap);
+    justify-content: var(--col-justify);
+    align-items: var(--col-align);
+    /* Neutralize legacy UA rule that maps HTML `align=` attr to `text-align`.
+       Our [align="center"] sets flex cross-axis alignment, not text alignment. */
+    text-align: inherit;
+  }
+
+  /* Justify */
+  :scope[justify="start"]         { --col-justify: flex-start; }
+  :scope[justify="center"]        { --col-justify: center; }
+  :scope[justify="end"]           { --col-justify: flex-end; }
+  :scope[justify="space-between"] { --col-justify: space-between; }
+  :scope[justify="space-around"]  { --col-justify: space-around; }
+
+  /* Align */
+  :scope[align="start"]   { --col-align: flex-start; text-align: start; }
+  :scope[align="center"]  { --col-align: center; text-align: center; }
+  :scope[align="end"]     { --col-align: flex-end; text-align: end; }
+  :scope[align="stretch"] { --col-align: stretch; }
+
+  /* Grow — fills remaining space in a flex parent. Used inside row-ui
+     to push trailing content (amounts, badges) to the far edge. */
+  :scope[grow] { flex: 1; min-width: 0; }
+}

package/components/col/col.js

@@ -0,0 +1,19 @@
+/**
+ * col-ui — Flex column layout primitive.
+ *
+ * <col-ui gap="md" align="center">...</col-ui>
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaCol extends AdiaElement {
+  static properties = {
+    justify: { type: String, default: 'start',   reflect: true },
+    align:   { type: String, default: 'stretch', reflect: true },
+    gap:     { type: String, default: 'md',      reflect: true },
+  };
+  static template = () => null;
+}
+customElements.define('col-ui', AdiaCol);
+
+export { AdiaCol };

package/components/col/col.yaml

@@ -0,0 +1,364 @@
+# 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: AdiaColumn
+tag: col-ui
+component: Column
+category: layout
+version: 1
+description: Flex column layout primitive.
+props:
+  align:
+    description: Align items
+    type: string
+    default: stretch
+  gap:
+    description: >-
+      Gap between children. Accepts either the named scale (xs/sm/md/lg/xl)
+      or a numeric rung on the spacing scale ("1"…"16", mapped to --a-space-N).
+    type: string
+    default: md
+  justify:
+    description: Justify content
+    type: string
+    default: start
+  span:
+    description: >-
+      Column span — consumed by a parent Grid to make this column wrap multiple
+      grid tracks. Accepts a numeric rung ("1".."6") or "full".
+    type: string
+    default: ""
+  wrap:
+    description: Allow children to wrap onto multiple lines (default is flex nowrap).
+    type: boolean
+    default: false
+    reflect: true
+  basis:
+    description: Flex basis override (CSS length or keyword like "auto"/"content").
+    type: string
+    default: ""
+  active:
+    description: Marks this column as the active one in a tab-panel layout.
+    type: boolean
+    default: false
+    reflect: true
+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: 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"
+        }
+      ]
+keywords:
+  - column
+  - col
+synonyms: {}
+related:
+  - avatar
+  - input
+  - button
+  - empty-state
+  - skeleton

package/components/color-picker/color-picker.a2ui.json

@@ -0,0 +1,100 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/ColorPicker.json",
+  "title": "ColorPicker",
+  "description": "OKLCH-native color picker with 2D area and H/C/L sliders. Form-associated.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "ColorPicker"
+    },
+    "disabled": {
+      "description": "Disables all interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "format": {
+      "description": "Output format for the value property",
+      "type": "string",
+      "enum": [
+        "hex",
+        "oklch"
+      ],
+      "default": "hex"
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Current color as hex string",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "change": {
+        "description": "Fired on every color change"
+      },
+      "input": {
+        "description": "Fired during continuous interaction (drag)"
+      }
+    },
+    "examples": [
+      {
+        "description": "Color picker card with a color picker component for selecting colors with swatches.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorPicker\",\n    \"value\": \"#6366f1\"\n  }\n]",
+        "name": "color-picker-demo"
+      },
+      {
+        "description": "Color picker with swatch selection in a card.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"cp\"\n    ]\n  },\n  {\n    \"id\": \"cp\",\n    \"component\": \"ColorPicker\",\n    \"value\": \"#3b82f6\"\n  }\n]",
+        "name": "color-picker-panel"
+      }
+    ],
+    "keywords": [
+      "colorpicker",
+      "color-picker",
+      "color",
+      "picker"
+    ],
+    "name": "AdiaColorPicker",
+    "related": [
+      "grid",
+      "button"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "color-picker-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}