@adia-ai/web-components 0.0.1

package/components/description-list/description-list.yaml

@@ -0,0 +1,59 @@
+# 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: AdiaDescriptionList
+tag: description-list-ui
+component: DescriptionList
+category: display
+version: 1
+description: Semantic key-value list (dl/dt/dd). Preserves native HTML semantics for screen readers
+  and SSR. Layout supports stacked (default) or inline.
+props:
+  align:
+    description: Alignment for inline layout — between = term left, value right.
+    type: string
+    default: start
+    enum:
+      - start
+      - between
+  items:
+    description: Optional JSON array of {term, description} — alternative to declarative <dt>/<dd> children
+    type: array
+    default: []
+  layout:
+    description: "stacked: term above description. inline: term and description on one row."
+    type: string
+    default: stacked
+    enum:
+      - stacked
+      - inline
+events: {}
+slots:
+  "[object Object]":
+    description: "Child content region for the `[object Object]` slot."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples: []
+keywords:
+  - description list
+  - key value
+  - metadata
+  - specs
+  - properties
+  - summary
+  - details
+  - dl
+synonyms:
+  description-list:
+    - description list
+    - key value list
+    - spec list
+    - metadata list
+    - property list
+related: []

package/components/divider/divider.a2ui.json

@@ -0,0 +1,126 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Divider.json",
+  "title": "Divider",
+  "description": "Horizontal or vertical divider with optional label.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "axis": {
+      "description": "Divider orientation.",
+      "type": "string",
+      "enum": [
+        "horizontal",
+        "vertical"
+      ],
+      "default": "horizontal"
+    },
+    "component": {
+      "const": "Divider"
+    },
+    "label": {
+      "description": "Center label text",
+      "type": "string",
+      "default": ""
+    },
+    "orientation": {
+      "description": "Alias for `axis` — accepted for back-compat.",
+      "type": "string",
+      "enum": [
+        "",
+        "horizontal",
+        "vertical"
+      ],
+      "default": ""
+    },
+    "vertical": {
+      "description": "Vertical orientation",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Settings page with profile, notifications, and appearance sections as cards.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"page-title\",\n      \"profile\",\n      \"notif\",\n      \"appearance\",\n      \"save-footer\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"page-title\",\n    \"component\": \"Text\",\n    \"textContent\": \"Settings\",\n    \"variant\": \"title\"\n  },\n  {\n    \"id\": \"profile\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"p-hdr\",\n      \"p-sec\"\n    ]\n  },\n  {\n    \"id\": \"p-hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"p-title\"\n    ]\n  },\n  {\n    \"id\": \"p-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Profile\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"p-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"p-col\"\n    ]\n  },\n  {\n    \"id\": \"p-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"p-upload\",\n      \"p-name\",\n      \"p-email\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"p-upload\",\n    \"component\": \"Upload\",\n    \"label\": \"Profile Photo\",\n    \"accept\": \"image/*\"\n  },\n  {\n    \"id\": \"p-name\",\n    \"component\": \"Input\",\n    \"label\": \"Full Name\",\n    \"name\": \"name\",\n    \"placeholder\": \"Your name\"\n  },\n  {\n    \"id\": \"p-email\",\n    \"component\": \"Input\",\n    \"label\": \"Email\",\n    \"name\": \"email\",\n    \"type\": \"email\",\n    \"placeholder\": \"you@example.com\"\n  },\n  {\n    \"id\": \"notif\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"n-hdr\",\n      \"n-sec\"\n    ]\n  },\n  {\n    \"id\": \"n-hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"n-title\"\n    ]\n  },\n  {\n    \"id\": \"n-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Notifications\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"n-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"n-col\"\n    ]\n  },\n  {\n    \"id\": \"n-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"n-email\",\n      \"n-div\",\n      \"n-push\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"n-email\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"n-email-label\",\n      \"n-email-toggle\"\n    ]\n  },\n  {\n    \"id\": \"n-email-label\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Email notifications\"\n  },\n  {\n    \"id\": \"n-email-toggle\",\n    \"component\": \"Toggle\",\n    \"name\": \"email-notif\",\n    \"label\": \"Email notifications\"\n  },\n  {\n    \"id\": \"n-div\",\n    \"component\": \"Divider\"\n  },\n  {\n    \"id\": \"n-push\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"n-push-label\",\n      \"n-push-toggle\"\n    ]\n  },\n  {\n    \"id\": \"n-push-label\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Push notifications\"\n  },\n  {\n    \"id\": \"n-push-toggle\",\n    \"component\": \"Toggle\",\n    \"name\": \"push-notif\",\n    \"label\": \"Push notifications\"\n  },\n  {\n    \"id\": \"appearance\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"a-hdr\",\n      \"a-sec\"\n    ]\n  },\n  {\n    \"id\": \"a-hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"a-title\"\n    ]\n  },\n  {\n    \"id\": \"a-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Appearance\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"a-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"a-col\"\n    ]\n  },\n  {\n    \"id\": \"a-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"a-theme\",\n      \"a-density\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"a-theme\",\n    \"component\": \"Select\",\n    \"label\": \"Theme\",\n    \"name\": \"theme\",\n    \"placeholder\": \"Choose theme...\"\n  },\n  {\n    \"id\": \"a-density\",\n    \"component\": \"Select\",\n    \"label\": \"Density\",\n    \"name\": \"density\",\n    \"placeholder\": \"Choose density...\"\n  },\n  {\n    \"id\": \"save-footer\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"save-row\"\n    ]\n  },\n  {\n    \"id\": \"save-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"cancel-btn\",\n      \"save-btn\"\n    ],\n    \"gap\": \"2\",\n    \"justify\": \"end\"\n  },\n  {\n    \"id\": \"cancel-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"save-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Save Changes\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "settings-page"
+      },
+      {
+        "description": "Horizontal divider with a centered label text, commonly used to separate sections or as an 'or' separator.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"attrs\": {\n      \"align\": \"center\",\n      \"gap\": \"md\"\n    },\n    \"children\": [\n      \"line-left\",\n      \"label\",\n      \"line-right\"\n    ]\n  },\n  {\n    \"id\": \"line-left\",\n    \"component\": \"Divider\",\n    \"attrs\": {\n      \"flex\": 1\n    }\n  },\n  {\n    \"id\": \"label\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"caption\",\n      \"muted\": true\n    },\n    \"content\": \"or continue with\"\n  },\n  {\n    \"id\": \"line-right\",\n    \"component\": \"Divider\",\n    \"attrs\": {\n      \"flex\": 1\n    }\n  }\n]",
+        "name": "divider-label"
+      }
+    ],
+    "keywords": [
+      "divider",
+      "label",
+      "layout",
+      "separator",
+      "spacer"
+    ],
+    "name": "AdiaDivider",
+    "related": [
+      "upload",
+      "input",
+      "toggle",
+      "select",
+      "button"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "divider": [
+        "divider",
+        "label",
+        "split"
+      ],
+      "label": [
+        "badge",
+        "tag",
+        "divider",
+        "label"
+      ],
+      "layout": [
+        "split",
+        "sidebar",
+        "drawer",
+        "tabs",
+        "divider",
+        "bleed"
+      ],
+      "separator": [
+        "divider",
+        "label"
+      ],
+      "spacer": [
+        "divider",
+        "label",
+        "bleed"
+      ]
+    },
+    "tag": "divider-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/divider/divider.css

@@ -0,0 +1,102 @@
+/* ═══════════════════════════════════════════════════════════════
+   DIVIDER-N — Horizontal or vertical divider with optional label.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (divider-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --divider-color:    var(--a-border-subtle);
+    --divider-size:     1px;
+    --divider-spacing:  var(--a-space-3);
+    --divider-label-font: var(--a-ui-sm);
+    --divider-label-fg: var(--a-fg-muted);
+    --divider-label-px: var(--a-space-2);
+  }
+
+  /* ── Horizontal (default) ── */
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-block: var(--divider-spacing);
+  }
+
+  /* Horizontal line without label */
+  :scope:not(:has([slot="label"]))::before {
+    content: '';
+    flex: 1;
+    height: var(--divider-size);
+    background: var(--divider-color);
+  }
+
+  /* Horizontal line with label — left line */
+  :scope:has([slot="label"])::before {
+    content: '';
+    flex: 1;
+    height: var(--divider-size);
+    background: var(--divider-color);
+  }
+
+  /* Horizontal line with label — right line */
+  :scope:has([slot="label"])::after {
+    content: '';
+    flex: 1;
+    height: var(--divider-size);
+    background: var(--divider-color);
+  }
+
+  /* ── Label ── */
+  [slot="label"] {
+    padding-inline: var(--divider-label-px);
+    font-size: var(--divider-label-font);
+    color: var(--divider-label-fg);
+    white-space: nowrap;
+    line-height: 1;
+  }
+
+  /* ── Vertical ── */
+  :scope[vertical] {
+    display: inline-flex;
+    flex-direction: column;
+    width: auto;
+    height: auto;
+    align-self: stretch;
+    margin-block: 0;
+    margin-inline: var(--divider-spacing);
+  }
+
+  /* Vertical line without label */
+  :scope[vertical]:not(:has([slot="label"]))::before {
+    content: '';
+    flex: 1;
+    width: var(--divider-size);
+    height: auto;
+    background: var(--divider-color);
+  }
+
+  /* Vertical line with label — top line */
+  :scope[vertical]:has([slot="label"])::before {
+    content: '';
+    flex: 1;
+    width: var(--divider-size);
+    height: auto;
+    background: var(--divider-color);
+  }
+
+  /* Vertical line with label — bottom line */
+  :scope[vertical]:has([slot="label"])::after {
+    content: '';
+    flex: 1;
+    width: var(--divider-size);
+    height: auto;
+    background: var(--divider-color);
+  }
+
+  /* Vertical label */
+  :scope[vertical] [slot="label"] {
+    padding-inline: 0;
+    padding-block: var(--divider-label-px);
+    writing-mode: vertical-lr;
+  }
+}

package/components/divider/divider.js

@@ -0,0 +1,47 @@
+/**
+ * <divider-ui></divider-ui>
+ * <divider-ui label="or"></divider-ui>
+ * <divider-ui vertical></divider-ui>
+ *
+ * Horizontal or vertical divider with optional label.
+ * Renders as a simple line, or a line broken by centered text.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaDivider extends AdiaElement {
+  static properties = {
+    label:    { type: String,  default: '', reflect: true },
+    vertical: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'separator');
+  }
+
+  render() {
+    if (this.vertical) {
+      this.setAttribute('aria-orientation', 'vertical');
+    } else {
+      this.removeAttribute('aria-orientation');
+    }
+
+    if (this.label) {
+      let span = this.querySelector('[slot="label"]');
+      if (!span) {
+        span = document.createElement('span');
+        span.setAttribute('slot', 'label');
+        this.appendChild(span);
+      }
+      span.textContent = this.label;
+    } else {
+      const span = this.querySelector('[slot="label"]');
+      if (span) span.remove();
+    }
+  }
+}
+customElements.define('divider-ui', AdiaDivider);
+
+export { AdiaDivider };