@adia-ai/web-components 0.0.1

package/components/list/list.a2ui.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/List.json",
+  "title": "List",
+  "description": "Styled list with optional icons and dividers.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "align": {
+      "description": "Alignment — values depend on container semantics.",
+      "type": "string",
+      "enum": [
+        "start",
+        "center",
+        "end",
+        "stretch"
+      ],
+      "default": "stretch"
+    },
+    "component": {
+      "const": "List"
+    },
+    "direction": {
+      "description": "Component property: direction.",
+      "type": "string",
+      "enum": [
+        "vertical",
+        "horizontal"
+      ],
+      "default": "vertical"
+    },
+    "divider": {
+      "description": "Show dividers between items",
+      "type": "boolean",
+      "default": false
+    },
+    "gap": {
+      "description": "Gap between children.",
+      "type": "string",
+      "enum": [
+        "none",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "sm"
+    },
+    "selectable": {
+      "description": "Enable selection on child listitems (roving tabindex + aria-selected).",
+      "type": "boolean",
+      "default": false
+    },
+    "selectedKey": {
+      "description": "ID (or data-key) of the currently-selected child listitem.",
+      "type": "string",
+      "default": ""
+    },
+    "spacing": {
+      "description": "Item spacing",
+      "type": "string",
+      "default": "md"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "selection-change": {
+        "description": "Fired on selection-change."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic List 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\": \"List\"\n  }\n]",
+        "name": "basic-list"
+      }
+    ],
+    "keywords": [
+      "list",
+      "listing",
+      "bookmark",
+      "favorite",
+      "save",
+      "pin",
+      "star"
+    ],
+    "name": "AdiaList",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "bookmark": [
+        "bookmark",
+        "list",
+        "favorite"
+      ],
+      "favorite": [
+        "bookmark",
+        "list"
+      ],
+      "listing": [
+        "table",
+        "data",
+        "list"
+      ],
+      "pin": [
+        "bookmark",
+        "list"
+      ],
+      "save": [
+        "bookmark",
+        "list",
+        "favorite"
+      ],
+      "star": [
+        "bookmark",
+        "list",
+        "leaderboard"
+      ]
+    },
+    "tag": "list-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/list/list.css

@@ -0,0 +1,103 @@
+@scope (list-ui) {
+  :where(:scope) {
+    /* ── Colors ── */
+    --list-divider-color: var(--a-border-subtle);
+    --list-selected-bg:   var(--a-accent-muted);
+    --list-selected-fg:   var(--a-accent-strong);
+    --list-selected-border: var(--a-accent-strong);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* ── Divider ── */
+  :scope[divider] list-item-ui + list-item-ui {
+    border-top: 1px solid var(--list-divider-color);
+  }
+
+  /* ── Item padding / margin (controlled by list-ui attributes) ──
+     [divider]              — items get block padding only (dividers span full width)
+     [divider][contained]   — items get block + inline padding (content inset on all sides)
+     [contained] (no divider) — items use margin instead of padding
+     (neither)              — items are neutral, no wrapper spacing */
+  :scope[divider] > list-item-ui {
+    padding-block: var(--list-item-inset);
+    padding-inline: 0;
+  }
+
+  :scope[divider][contained] > list-item-ui {
+    padding: var(--list-item-inset);
+  }
+
+  :scope[contained]:not([divider]) > list-item-ui {
+    margin: var(--list-item-inset);
+  }
+
+  /* Flush the first/last items to the list edges when the list is not
+     contained — avoids extra vertical gap at the top/bottom of a list
+     that sits inside a card or bordered surface. */
+  :scope:not([contained]) > list-item-ui:first-child {
+    padding-block-start: 0;
+    margin-block-start: 0;
+  }
+
+  :scope:not([contained]) > list-item-ui:last-child {
+    padding-block-end: 0;
+    margin-block-end: 0;
+  }
+
+  /* ── Selectable ── */
+  :scope[selectable] > [role="listitem"] {
+    cursor: pointer;
+    border-inline-start: 2px solid transparent;
+    padding-inline-start: var(--a-space-2);
+    outline: none;
+  }
+
+  :scope[selectable] > [role="listitem"][aria-selected="true"] {
+    background: var(--list-selected-bg);
+    color: var(--list-selected-fg);
+    border-inline-start-color: var(--list-selected-border);
+  }
+
+  :scope[selectable] > [role="listitem"]:focus-visible {
+    outline: 2px solid var(--a-accent-strong);
+    outline-offset: -2px;
+  }
+
+  /* ── Spacing variants ──
+     Modulate the item inset used by [divider] / [contained] rules. */
+  :scope[spacing="sm"] > list-item-ui {
+    --list-item-inset: var(--a-space-2);
+  }
+
+  :scope[spacing="lg"] > list-item-ui {
+    --list-item-inset: var(--a-space-5);
+  }
+}
+
+@scope (list-item-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --list-item-inset: var(--a-inset);
+
+    /* ── Colors ── */
+    --list-item-text-color: var(--a-fg);
+
+    /* ── Typography ── */
+    --list-item-font-size: var(--a-ui-size);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    font-size: var(--list-item-font-size);
+    color: var(--list-item-text-color);
+    line-height: 1.4;
+  }
+}

package/components/list/list.js

@@ -0,0 +1,236 @@
+/**
+ * <list-ui divider>
+ *   <list-item-ui icon="check" text="Item one"></list-item-ui>
+ *   <list-item-ui icon="check" text="Item two"></list-item-ui>
+ * </list-ui>
+ *
+ * Styled list with optional icons and dividers.
+ *
+ * Selection (mirrors table-ui):
+ *   <list-ui selectable selected-key="row-2">
+ *     <list-item-ui id="row-1" text="One"></list-item-ui>
+ *     <list-item-ui id="row-2" text="Two"></list-item-ui>
+ *   </list-ui>
+ *
+ * When `selectable`:
+ *   - Children (role="listitem") become keyboard-focusable via roving tabindex.
+ *   - Click selects the child; key is its id or data-key.
+ *   - aria-selected is set on all children.
+ *   - Fires `selection-change` with { key, previousKey }.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaList extends AdiaElement {
+  static properties = {
+    divider:     { type: Boolean, default: false, reflect: true },
+    spacing:     { type: String,  default: 'md',  reflect: true },
+    selectable:  { type: Boolean, default: false, reflect: true },
+    selectedKey: { type: String,  default: '',    reflect: true, attribute: 'selected-key' },
+  };
+
+  static template = () => null;
+
+  #bound = false;
+
+  connected() {
+    this.setAttribute('role', 'list');
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click', this.#onClick);
+      this.addEventListener('keydown', this.#onKeydown);
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKeydown);
+    this.#bound = false;
+  }
+
+  render() {
+    if (!this.selectable) {
+      // Clear selection chrome from children
+      for (const ch of this.#items()) {
+        ch.removeAttribute('aria-selected');
+        ch.removeAttribute('tabindex');
+      }
+      return;
+    }
+    const key = this.selectedKey || '';
+    const items = this.#items();
+    let focusTarget = null;
+    for (const ch of items) {
+      const k = this.#keyOf(ch);
+      const selected = k && k === key;
+      ch.setAttribute('aria-selected', selected ? 'true' : 'false');
+      ch.setAttribute('tabindex', selected ? '0' : '-1');
+      if (selected) focusTarget = ch;
+    }
+    // Ensure at least one item is focusable (first) when nothing selected.
+    if (!focusTarget && items.length) {
+      items[0].setAttribute('tabindex', '0');
+    }
+  }
+
+  #items() {
+    return [...this.children].filter(
+      (el) => el.getAttribute && el.getAttribute('role') === 'listitem',
+    );
+  }
+
+  #keyOf(el) {
+    return el.id || el.getAttribute('data-key') || '';
+  }
+
+  #selectKey(newKey, { focus = false } = {}) {
+    if (!this.selectable) return;
+    if (!newKey) return;
+    const previousKey = this.selectedKey || '';
+    if (newKey === previousKey) return;
+    this.selectedKey = newKey;
+    this.dispatchEvent(new CustomEvent('selection-change', {
+      detail: { key: newKey, previousKey },
+      bubbles: true,
+    }));
+    if (focus) {
+      const el = [...this.#items()].find((i) => this.#keyOf(i) === newKey);
+      el?.focus?.();
+    }
+  }
+
+  #onClick = (e) => {
+    if (!this.selectable) return;
+    const item = e.target.closest?.('[role="listitem"]');
+    if (!item || item.parentElement !== this) return;
+    const key = this.#keyOf(item);
+    if (key) this.#selectKey(key);
+  };
+
+  #onKeydown = (e) => {
+    if (!this.selectable) return;
+    const items = this.#items();
+    if (!items.length) return;
+    const current = document.activeElement;
+    const idx = items.indexOf(current);
+    if (idx < 0) return;
+    let next = idx;
+    switch (e.key) {
+      case 'ArrowDown': next = Math.min(items.length - 1, idx + 1); break;
+      case 'ArrowUp':   next = Math.max(0, idx - 1); break;
+      case 'Home':      next = 0; break;
+      case 'End':       next = items.length - 1; break;
+      case 'Enter':
+      case ' ': {
+        e.preventDefault();
+        const key = this.#keyOf(items[idx]);
+        if (key) this.#selectKey(key);
+        return;
+      }
+      default: return;
+    }
+    if (next !== idx) {
+      e.preventDefault();
+      items[next]?.focus?.();
+    }
+  };
+}
+customElements.define('list-ui', AdiaList);
+
+class AdiaListItem extends AdiaElement {
+  static properties = {
+    icon:        { type: String, default: '', reflect: true },
+    text:        { type: String, default: '', reflect: true },
+    description: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'listitem');
+    this.#stamp();
+  }
+
+  // Scoped to direct children — never reach into nested custom elements,
+  // otherwise we'd accidentally remove e.g. a <span slot="icon"> inside a
+  // child <card-ui> when list-item-ui has no `icon` prop.
+  #ownChild(selector) {
+    for (const ch of this.children) {
+      if (ch.matches(selector)) return ch;
+    }
+    return null;
+  }
+
+  #stamp() {
+    if (this.#ownChild('[slot="content"]')) return;
+
+    if (this.icon) {
+      let iconEl = this.#ownChild('[slot="icon"]') || this.#ownChild('icon-ui');
+      if (!iconEl) {
+        iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('slot', 'icon');
+        this.appendChild(iconEl);
+      }
+      iconEl.setAttribute('name', this.icon);
+    }
+
+    if (this.text) {
+      let span = this.#ownChild('[slot="text"]');
+      if (!span) {
+        span = document.createElement('span');
+        span.setAttribute('slot', 'text');
+        this.appendChild(span);
+      }
+      span.textContent = this.text;
+    }
+
+    if (this.description) {
+      let desc = this.#ownChild('[slot="description"]');
+      if (!desc) {
+        desc = document.createElement('span');
+        desc.setAttribute('slot', 'description');
+        this.appendChild(desc);
+      }
+      desc.textContent = this.description;
+    }
+  }
+
+  render() {
+    // Sync icon
+    const iconEl = this.#ownChild('[slot="icon"]');
+    if (this.icon) {
+      if (iconEl) {
+        iconEl.setAttribute('name', this.icon);
+      } else {
+        const el = document.createElement('icon-ui');
+        el.setAttribute('slot', 'icon');
+        el.setAttribute('name', this.icon);
+        this.prepend(el);
+      }
+    } else if (iconEl) {
+      iconEl.remove();
+    }
+
+    // Sync text
+    const textEl = this.#ownChild('[slot="text"]');
+    if (textEl) textEl.textContent = this.text;
+
+    // Sync description
+    const descEl = this.#ownChild('[slot="description"]');
+    if (this.description) {
+      if (descEl) {
+        descEl.textContent = this.description;
+      } else {
+        const el = document.createElement('span');
+        el.setAttribute('slot', 'description');
+        el.textContent = this.description;
+        this.appendChild(el);
+      }
+    } else if (descEl) {
+      descEl.remove();
+    }
+  }
+}
+customElements.define('list-item-ui', AdiaListItem);
+
+export { AdiaList, AdiaListItem };

package/components/list/list.yaml

@@ -0,0 +1,122 @@
+# 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: AdiaList
+tag: list-ui
+component: List
+category: layout
+version: 1
+description: Styled list with optional icons and dividers.
+props:
+  align:
+    description: "Alignment — values depend on container semantics."
+    type: string
+    default: stretch
+    enum:
+      - start
+      - center
+      - end
+      - stretch
+  direction:
+    description: "Component property: direction."
+    type: string
+    default: vertical
+    enum:
+      - vertical
+      - horizontal
+  divider:
+    description: Show dividers between items
+    type: boolean
+    default: false
+  gap:
+    description: "Gap between children."
+    type: string
+    default: sm
+    enum:
+      - none
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
+  selectable:
+    description: Enable selection on child listitems (roving tabindex + aria-selected).
+    type: boolean
+    default: false
+  selectedKey:
+    description: ID (or data-key) of the currently-selected child listitem.
+    type: string
+    default: ""
+    attribute: selected-key
+  spacing:
+    description: Item spacing
+    type: string
+    default: md
+events:
+  selection-change:
+    description: "Fired on selection-change."
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-list
+    description: Basic List usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "List"
+        }
+      ]
+keywords:
+  - list
+  - listing
+  - bookmark
+  - favorite
+  - save
+  - pin
+  - star
+synonyms:
+  bookmark:
+    - bookmark
+    - list
+    - favorite
+  favorite:
+    - bookmark
+    - list
+  listing:
+    - table
+    - data
+    - list
+  pin:
+    - bookmark
+    - list
+  save:
+    - bookmark
+    - list
+    - favorite
+  star:
+    - bookmark
+    - list
+    - leaderboard
+related: []