@adia-ai/web-components 0.0.1

package/components/block/block.a2ui.json

@@ -0,0 +1,135 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Block.json",
+  "title": "Block",
+  "description": "Generic padded/margined content wrapper.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Block"
+    },
+    "margin": {
+      "description": "Margin size",
+      "type": "string",
+      "enum": [
+        "none",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "none"
+    },
+    "padding": {
+      "description": "Padding amount, maps to spacing tokens",
+      "type": "string",
+      "enum": [
+        "none",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {},
+    "examples": [
+      {
+        "description": "Basic Block usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Block\",\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-block"
+      }
+    ],
+    "keywords": [
+      "block",
+      "code",
+      "snippet",
+      "syntax",
+      "programming",
+      "ide",
+      "terminal",
+      "editor",
+      "developer"
+    ],
+    "name": "AdiaBlock",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "code": [
+        "code",
+        "block",
+        "markdown",
+        "editor"
+      ],
+      "developer": [
+        "api",
+        "key",
+        "code",
+        "block"
+      ],
+      "editor": [
+        "markdown",
+        "editor",
+        "code",
+        "block"
+      ],
+      "ide": [
+        "code",
+        "block",
+        "markdown",
+        "editor",
+        "split"
+      ],
+      "programming": [
+        "code",
+        "block",
+        "markdown"
+      ],
+      "snippet": [
+        "code",
+        "block"
+      ],
+      "syntax": [
+        "code",
+        "block"
+      ],
+      "terminal": [
+        "code",
+        "block",
+        "command"
+      ]
+    },
+    "tag": "block-ui",
+    "tokens": {
+      "--block-padding": {
+        "description": "Override padding value"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/block/block.css

@@ -0,0 +1,29 @@
+@scope (block-ui) {
+  :where(:scope) {
+    --block-padding: var(--a-space-4);
+    --block-margin:  0;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    padding: var(--block-padding);
+    margin: var(--block-margin);
+  }
+
+  /* ── Padding variants ── */
+  :scope[padding="none"] { --block-padding: 0; }
+  :scope[padding="xs"]   { --block-padding: var(--a-space-1); }
+  :scope[padding="sm"]   { --block-padding: var(--a-space-2); }
+  :scope[padding="md"]   { --block-padding: var(--a-space-4); }
+  :scope[padding="lg"]   { --block-padding: var(--a-space-6); }
+  :scope[padding="xl"]   { --block-padding: var(--a-space-10); }
+
+  /* ── Margin variants ── */
+  :scope[margin="none"] { --block-margin: 0; }
+  :scope[margin="xs"]   { --block-margin: var(--a-space-1); }
+  :scope[margin="sm"]   { --block-margin: var(--a-space-2); }
+  :scope[margin="md"]   { --block-margin: var(--a-space-4); }
+  :scope[margin="lg"]   { --block-margin: var(--a-space-6); }
+  :scope[margin="xl"]   { --block-margin: var(--a-space-10); }
+}

package/components/block/block.js

@@ -0,0 +1,23 @@
+/**
+ * <block-ui padding="md" margin="lg">Content here</block-ui>
+ *
+ * Generic padded/margined content wrapper. Pure CSS component.
+ *
+ * Properties:
+ *   padding — none | xs | sm | md | lg | xl (default 'md')
+ *   margin  — none | xs | sm | md | lg | xl (default 'none')
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaBlock extends AdiaElement {
+  static properties = {
+    padding: { type: String, default: 'md',   reflect: true },
+    margin:  { type: String, default: 'none', reflect: true },
+  };
+
+  static template = () => null;
+}
+customElements.define('block-ui', AdiaBlock);
+
+export { AdiaBlock };

package/components/block/block.yaml

@@ -0,0 +1,115 @@
+# 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: AdiaBlock
+tag: block-ui
+component: Block
+category: layout
+version: 1
+description: Generic padded/margined content wrapper.
+props:
+  margin:
+    description: Margin size
+    type: string
+    default: none
+    enum:
+      - none
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+  padding:
+    description: Padding amount, maps to spacing tokens
+    type: string
+    default: md
+    enum:
+      - none
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --block-padding:
+    description: Override padding value
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-block
+    description: Basic Block usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Block",
+          "children": [
+            "child1",
+            "child2"
+          ]
+        },
+        {
+          "id": "child1",
+          "component": "Text",
+          "textContent": "First item"
+        },
+        {
+          "id": "child2",
+          "component": "Text",
+          "textContent": "Second item"
+        }
+      ]
+keywords:
+  - block
+  - code
+  - snippet
+  - syntax
+  - programming
+  - ide
+  - terminal
+  - editor
+  - developer
+synonyms:
+  code:
+    - code
+    - block
+    - markdown
+    - editor
+  developer:
+    - api
+    - key
+    - code
+    - block
+  editor:
+    - markdown
+    - editor
+    - code
+    - block
+  ide:
+    - code
+    - block
+    - markdown
+    - editor
+    - split
+  programming:
+    - code
+    - block
+    - markdown
+  snippet:
+    - code
+    - block
+  syntax:
+    - code
+    - block
+  terminal:
+    - code
+    - block
+    - command
+related: []

package/components/breadcrumb/breadcrumb.a2ui.json

@@ -0,0 +1,86 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Breadcrumb.json",
+  "title": "Breadcrumb",
+  "description": "Breadcrumb trail with auto-inserted separators.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Breadcrumb"
+    },
+    "separator": {
+      "description": "Character or string rendered between breadcrumb items via CSS ::before.",
+      "type": "string",
+      "default": "/"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "navigation",
+    "events": {},
+    "examples": [
+      {
+        "description": "Breadcrumb navigation component with 3 levels: Home, Products, and Detail.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Breadcrumb\",\n    \"children\": [\n      \"b1\",\n      \"b2\",\n      \"b3\"\n    ]\n  },\n  {\n    \"id\": \"b1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Home\",\n    \"href\": \"/\"\n  },\n  {\n    \"id\": \"b2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Products\",\n    \"href\": \"/products\"\n  },\n  {\n    \"id\": \"b3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Product Detail\",\n    \"active\": true\n  }\n]",
+        "name": "breadcrumb-nav"
+      }
+    ],
+    "keywords": [
+      "breadcrumb",
+      "navigation",
+      "navbar",
+      "breadcrumbs",
+      "back"
+    ],
+    "name": "AdiaBreadcrumb",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "back": [
+        "breadcrumb",
+        "nav",
+        "pagination"
+      ],
+      "breadcrumbs": [
+        "breadcrumb",
+        "nav"
+      ],
+      "navbar": [
+        "nav",
+        "menu",
+        "sidebar",
+        "breadcrumb"
+      ],
+      "navigation": [
+        "nav",
+        "sidebar",
+        "breadcrumb",
+        "tabs",
+        "menu",
+        "pagination"
+      ]
+    },
+    "tag": "breadcrumb-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,78 @@
+@scope (breadcrumb-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --breadcrumb-gap:          var(--a-space-1);
+    --breadcrumb-max-width:    12rem;
+
+    /* ── Typography ── */
+    --breadcrumb-font-size:    var(--a-ui-size);
+    --breadcrumb-current-weight: var(--a-weight-medium);
+
+    /* ── Colors ── */
+    --breadcrumb-fg:           var(--a-fg-subtle);
+    --breadcrumb-fg-hover:     var(--a-fg);
+    --breadcrumb-separator-fg: var(--a-fg-muted);
+    --breadcrumb-current-fg:   var(--a-fg-strong);
+
+    /* ── Transition ── */
+    --breadcrumb-duration:     var(--a-duration-fast);
+    --breadcrumb-easing:       var(--a-easing);
+
+    /* ── Link ── */
+    --breadcrumb-link-radius:  var(--a-radius-sm);
+    --breadcrumb-link-focus-ring: var(--a-focus-ring);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--breadcrumb-gap);
+    font-size: var(--breadcrumb-font-size);
+  }
+
+  /* Separator — standalone span, never inside <a> */
+  [data-sep] {
+    color: var(--breadcrumb-separator-fg);
+    flex-shrink: 0;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  /* Items */
+  [data-item] {
+    display: inline-flex;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--breadcrumb-max-width);
+    color: var(--breadcrumb-fg);
+  }
+
+  /* Links */
+  a[data-item] {
+    text-decoration: none;
+    border-radius: var(--breadcrumb-link-radius);
+    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
+  }
+
+  a[data-item]:hover {
+    color: var(--breadcrumb-fg-hover);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  a[data-item]:focus-visible {
+    outline: none;
+    box-shadow: var(--breadcrumb-link-focus-ring);
+  }
+
+  /* Current (last item) */
+  [data-item][aria-current] {
+    color: var(--breadcrumb-current-fg);
+    font-weight: var(--breadcrumb-current-weight);
+    pointer-events: none;
+    text-decoration: none;
+  }
+}

package/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,44 @@
+import { AdiaElement } from '@core/element.js';
+
+class AdiaBreadcrumb extends AdiaElement {
+  static properties = {
+    separator: { type: String, default: '/', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'navigation');
+    this.setAttribute('aria-label', 'Breadcrumb');
+  }
+
+  render() {
+    // Remove old separators
+    this.querySelectorAll('[data-sep]').forEach(el => el.remove());
+
+    const items = Array.from(this.children).filter(c => !c.hasAttribute('data-sep'));
+    const last = items.length - 1;
+
+    items.forEach((child, i) => {
+      child.removeAttribute('data-separator');
+      child.setAttribute('data-item', '');
+
+      if (i === last) {
+        child.setAttribute('aria-current', 'page');
+      } else {
+        child.removeAttribute('aria-current');
+        // Insert separator span after this item (before next sibling)
+        if (!child.nextElementSibling?.hasAttribute('data-sep')) {
+          const sep = document.createElement('span');
+          sep.setAttribute('data-sep', '');
+          sep.setAttribute('aria-hidden', 'true');
+          sep.textContent = this.separator;
+          child.after(sep);
+        }
+      }
+    });
+  }
+}
+
+customElements.define('breadcrumb-ui', AdiaBreadcrumb);
+export { AdiaBreadcrumb };

package/components/breadcrumb/breadcrumb.yaml

@@ -0,0 +1,84 @@
+# 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: AdiaBreadcrumb
+tag: breadcrumb-ui
+component: Breadcrumb
+category: navigation
+version: 1
+description: Breadcrumb trail with auto-inserted separators.
+props:
+  separator:
+    description: Character or string rendered between breadcrumb items via CSS ::before.
+    type: string
+    default: /
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: breadcrumb-nav
+    description: "Breadcrumb navigation component with 3 levels: Home, Products, and Detail."
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Breadcrumb",
+          "children": [
+            "b1",
+            "b2",
+            "b3"
+          ]
+        },
+        {
+          "id": "b1",
+          "component": "Text",
+          "textContent": "Home",
+          "href": "/"
+        },
+        {
+          "id": "b2",
+          "component": "Text",
+          "textContent": "Products",
+          "href": "/products"
+        },
+        {
+          "id": "b3",
+          "component": "Text",
+          "textContent": "Product Detail",
+          "active": true
+        }
+      ]
+keywords:
+  - breadcrumb
+  - navigation
+  - navbar
+  - breadcrumbs
+  - back
+synonyms:
+  back:
+    - breadcrumb
+    - nav
+    - pagination
+  breadcrumbs:
+    - breadcrumb
+    - nav
+  navbar:
+    - nav
+    - menu
+    - sidebar
+    - breadcrumb
+  navigation:
+    - nav
+    - sidebar
+    - breadcrumb
+    - tabs
+    - menu
+    - pagination
+related: []