@adia-ai/web-components 0.0.1

package/components/grid/grid.a2ui.json

@@ -0,0 +1,171 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Grid.json",
+  "title": "Grid",
+  "description": "CSS grid layout primitive. Supports [columns=\"1..6\"] for equal columns, [columns=\"auto-fill\"|\"auto-fit\"] for responsive density, and a per-child [span=\"2..6\"|\"full\"] attribute for asymmetric layouts. Compose a 2:1 split as columns=\"3\" + the wide child span=\"2\"; compose a 3:2 split as columns=\"5\" + span=\"3\" + span=\"2\". Never set grid-template-columns via inline style — use the span attribute on children instead.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "cols": {
+      "description": "Alias for `columns` — accepted for back-compat.",
+      "type": "string",
+      "default": ""
+    },
+    "columnGap": {
+      "description": "Column gap override",
+      "type": "string",
+      "default": ""
+    },
+    "columns": {
+      "description": "Number of columns or grid-template-columns",
+      "type": "string",
+      "default": "3"
+    },
+    "component": {
+      "const": "Grid"
+    },
+    "gap": {
+      "description": "Grid gap",
+      "type": "string",
+      "default": "md"
+    },
+    "rowGap": {
+      "description": "Row gap override",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [
+      {
+        "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"
+      },
+      {
+        "description": "Two-column dashboard with quick actions (buttons) and system status (progress bars).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Grid\",\n    \"children\": [\n      \"c1\",\n      \"c2\"\n    ],\n    \"columns\": \"2\"\n  },\n  {\n    \"id\": \"c1\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c1h\",\n      \"c1s\"\n    ]\n  },\n  {\n    \"id\": \"c1h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c1t\"\n    ]\n  },\n  {\n    \"id\": \"c1t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Quick Actions\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c1s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c1col\"\n    ]\n  },\n  {\n    \"id\": \"c1col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"b1\",\n      \"b2\",\n      \"b3\"\n    ]\n  },\n  {\n    \"id\": \"b1\",\n    \"component\": \"Button\",\n    \"text\": \"New Project\",\n    \"variant\": \"solid\",\n    \"iconLeading\": \"plus\"\n  },\n  {\n    \"id\": \"b2\",\n    \"component\": \"Button\",\n    \"text\": \"Invite Member\",\n    \"variant\": \"outline\",\n    \"iconLeading\": \"users\"\n  },\n  {\n    \"id\": \"b3\",\n    \"component\": \"Button\",\n    \"text\": \"View Reports\",\n    \"variant\": \"ghost\",\n    \"iconLeading\": \"chart\"\n  },\n  {\n    \"id\": \"c2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"c2h\",\n      \"c2s\"\n    ]\n  },\n  {\n    \"id\": \"c2h\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"c2t\"\n    ]\n  },\n  {\n    \"id\": \"c2t\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"System Status\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"c2s\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"c2col\"\n    ]\n  },\n  {\n    \"id\": \"c2col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"p1\",\n      \"p2\",\n      \"p3\"\n    ]\n  },\n  {\n    \"id\": \"p1\",\n    \"component\": \"Progress\",\n    \"value\": \"92\",\n    \"label\": \"CPU\"\n  },\n  {\n    \"id\": \"p2\",\n    \"component\": \"Progress\",\n    \"value\": \"67\",\n    \"label\": \"Memory\"\n  },\n  {\n    \"id\": \"p3\",\n    \"component\": \"Progress\",\n    \"value\": \"34\",\n    \"label\": \"Disk\"\n  }\n]",
+        "name": "dashboard"
+      }
+    ],
+    "keywords": [
+      "grid",
+      "ecommerce",
+      "marketplace",
+      "catalog",
+      "columns",
+      "photos",
+      "pictures",
+      "gallery",
+      "portfolio",
+      "responsive"
+    ],
+    "name": "AdiaGrid",
+    "related": [
+      "button",
+      "badge",
+      "chart",
+      "progress",
+      "color-picker"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "catalog": [
+        "product",
+        "card",
+        "image",
+        "grid",
+        "inventory"
+      ],
+      "columns": [
+        "split",
+        "grid",
+        "table"
+      ],
+      "ecommerce": [
+        "product",
+        "pricing",
+        "inventory",
+        "card",
+        "image",
+        "grid"
+      ],
+      "gallery": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "grid": [
+        "table",
+        "data",
+        "card",
+        "image",
+        "feature",
+        "grid"
+      ],
+      "marketplace": [
+        "product",
+        "pricing",
+        "card",
+        "image",
+        "grid",
+        "search",
+        "filter"
+      ],
+      "photos": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "pictures": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "portfolio": [
+        "image",
+        "gallery",
+        "card",
+        "grid",
+        "feature"
+      ],
+      "responsive": [
+        "split",
+        "sidebar",
+        "grid",
+        "card"
+      ]
+    },
+    "tag": "grid-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/grid/grid.css

@@ -0,0 +1,37 @@
+@scope (grid-ui) {
+  :where(:scope) {
+    --grid-gap:        var(--a-gap-md);
+    --grid-column-gap: var(--grid-gap);
+    --grid-row-gap:    var(--grid-gap);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: grid;
+    /* Default: auto 1fr columns — as many equal columns as children */
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    column-gap: var(--grid-column-gap);
+    row-gap: var(--grid-row-gap);
+  }
+
+  /* Explicit column count — switches to template mode */
+  :scope[columns="1"] { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; }
+  :scope[columns="2"] { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; }
+  :scope[columns="3"] { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; }
+  :scope[columns="4"] { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; }
+  :scope[columns="5"] { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; }
+  :scope[columns="6"] { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; }
+
+  /* Responsive presets */
+  :scope[columns="auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
+  :scope[columns="auto-fit"]  { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
+
+  /* Column span — children can span multiple columns */
+  > [span="2"] { grid-column: span 2; }
+  > [span="3"] { grid-column: span 3; }
+  > [span="4"] { grid-column: span 4; }
+  > [span="5"] { grid-column: span 5; }
+  > [span="6"] { grid-column: span 6; }
+  > [span="full"] { grid-column: 1 / -1; }
+}

package/components/grid/grid.js

@@ -0,0 +1,21 @@
+/**
+ * grid-ui — CSS grid layout primitive.
+ *
+ * <grid-ui columns="3" gap="lg">...</grid-ui>
+ * <grid-ui columns="2" column-gap="2" row-gap="4">...</grid-ui>
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaGrid extends AdiaElement {
+  static properties = {
+    columns:   { type: String, default: '3',  reflect: true },
+    gap:       { type: String, default: 'md', reflect: true },
+    columnGap: { type: String, default: '',   reflect: true, attribute: 'column-gap' },
+    rowGap:    { type: String, default: '',   reflect: true, attribute: 'row-gap' },
+  };
+  static template = () => null;
+}
+customElements.define('grid-ui', AdiaGrid);
+
+export { AdiaGrid };