@adia-ai/web-components 0.0.1

package/patterns/section-nav-group/section-nav-group.css

@@ -0,0 +1,74 @@
+@scope (section-nav-group-ui) {
+  :where(:scope) {
+    --section-nav-group-gap:          var(--a-space-0-5);
+    --section-nav-group-row-height:   var(--a-size);
+    --section-nav-group-row-px:       var(--a-ui-px);
+    --section-nav-group-row-gap:      var(--a-space-1);
+    --section-nav-group-row-radius:   var(--a-radius-md);
+
+    --section-nav-group-label-fg:     var(--a-fg-muted);
+    --section-nav-group-label-size:   var(--a-ui-tiny);
+    --section-nav-group-label-weight: var(--a-weight-medium);
+    --section-nav-group-bg-hover:     var(--a-bg-muted);
+    --section-nav-group-duration:     var(--a-duration-fast);
+    --section-nav-group-easing:       var(--a-easing);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-nav-group-gap);
+  }
+
+  :scope > [data-section-nav-group-header] {
+    display: flex;
+    align-items: center;
+    gap: var(--section-nav-group-row-gap);
+    padding: 0 var(--section-nav-group-row-px);
+    height: var(--section-nav-group-row-height);
+    border-radius: var(--section-nav-group-row-radius);
+    color: var(--section-nav-group-label-fg);
+    font-size: var(--section-nav-group-label-size);
+    font-weight: var(--section-nav-group-label-weight);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  :scope > [data-section-nav-group-header] > [data-section-nav-group-label] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Collapsible */
+  :scope[collapsible] > [data-section-nav-group-header] {
+    cursor: pointer;
+    transition:
+      background var(--section-nav-group-duration) var(--section-nav-group-easing),
+      color      var(--section-nav-group-duration) var(--section-nav-group-easing);
+  }
+  :scope[collapsible] > [data-section-nav-group-header]:hover,
+  :scope[collapsible] > [data-section-nav-group-header]:focus-visible {
+    background: var(--section-nav-group-bg-hover);
+    outline: none;
+  }
+
+  :scope[collapsible] > [data-section-nav-group-header] [data-section-nav-group-caret] {
+    --a-icon-size: 0.5rem;
+    transition: transform var(--section-nav-group-duration) var(--section-nav-group-easing);
+    flex-shrink: 0;
+  }
+  :scope[collapsible][open] > [data-section-nav-group-header] [data-section-nav-group-caret] {
+    transform: rotate(90deg);
+  }
+
+  /* Collapsed state hides all children except the header */
+  :scope[collapsible]:not([open]) > :not([data-section-nav-group-header]) {
+    display: none;
+  }
+}

package/patterns/section-nav-group/section-nav-group.js

@@ -0,0 +1,84 @@
+/**
+ * <section-nav-group-ui> — Labeled group inside section-nav-ui.
+ * When [collapsible], the header row becomes a keyboard-activatable toggle
+ * that emits `group-toggle` (detail: { text, open }).
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaSectionNavGroup extends AdiaElement {
+  static properties = {
+    text:        { type: String,  default: '',    reflect: true },
+    icon:        { type: String,  default: '',    reflect: true },
+    collapsible: { type: Boolean, default: false, reflect: true },
+    open:        { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #headerEl = null;
+
+  #onHeaderClick = () => {
+    if (!this.collapsible) return;
+    this.open = !this.open;
+    this.dispatchEvent(new CustomEvent('group-toggle', {
+      bubbles: true,
+      detail: { text: this.text, open: this.open },
+    }));
+  };
+
+  #onHeaderKey = (e) => {
+    if (!this.collapsible) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.#onHeaderClick();
+    }
+  };
+
+  connected() {
+    this.#headerEl = this.querySelector(':scope > [data-section-nav-group-header]');
+    if (!this.#headerEl) {
+      this.#headerEl = document.createElement('div');
+      this.#headerEl.setAttribute('data-section-nav-group-header', '');
+      this.#buildHeader();
+      this.insertBefore(this.#headerEl, this.firstChild);
+    }
+    if (this.collapsible) {
+      this.#headerEl.setAttribute('role', 'button');
+      this.#headerEl.setAttribute('tabindex', '0');
+      this.#headerEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+      this.#headerEl.addEventListener('click', this.#onHeaderClick);
+      this.#headerEl.addEventListener('keydown', this.#onHeaderKey);
+    }
+  }
+
+  render() {
+    if (!this.#headerEl) return;
+    this.#buildHeader();
+    if (this.collapsible) {
+      this.#headerEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    } else {
+      this.#headerEl.removeAttribute('role');
+      this.#headerEl.removeAttribute('tabindex');
+      this.#headerEl.removeAttribute('aria-expanded');
+    }
+  }
+
+  #buildHeader() {
+    const iconHtml = this.icon ? `<icon-ui name="${this.icon}"></icon-ui>` : '';
+    const caretHtml = this.collapsible
+      ? `<icon-ui name="caret-right" data-section-nav-group-caret></icon-ui>`
+      : '';
+    this.#headerEl.innerHTML =
+      `${iconHtml}<span data-section-nav-group-label>${this.text}</span>${caretHtml}`;
+  }
+
+  disconnected() {
+    this.#headerEl?.removeEventListener('click', this.#onHeaderClick);
+    this.#headerEl?.removeEventListener('keydown', this.#onHeaderKey);
+    this.#headerEl = null;
+  }
+}
+customElements.define('section-nav-group-ui', AdiaSectionNavGroup);
+
+export { AdiaSectionNavGroup };

package/patterns/section-nav-group/section-nav-group.yaml

@@ -0,0 +1,66 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaSectionNavGroup
+tag: section-nav-group-ui
+component: SectionNavGroup
+category: nav
+version: 1
+description: |
+  Optional labeled group inside section-nav-ui. Auto-generates a header row
+  with label and optional leading icon. When [collapsible], the header row
+  is a keyboard-activatable toggle that emits `group-toggle`.
+
+props:
+  text:
+    type: string
+    default: ""
+    reflect: true
+    description: Group label rendered in the header row.
+
+  icon:
+    type: string
+    default: ""
+    reflect: true
+    description: Optional Phosphor icon name (leading).
+
+  collapsible:
+    type: boolean
+    default: false
+    reflect: true
+    description: When true, the header becomes a click/keyboard toggle that expands and collapses the group.
+
+  open:
+    type: boolean
+    default: false
+    reflect: true
+    description: Expanded state. Only meaningful when collapsible=true.
+
+events:
+  group-toggle:
+    description: Fired when the group is toggled via header click or keyboard (Enter/Space).
+    detail:
+      text: string
+      open: boolean
+
+slots:
+  default:
+    description: section-nav-item-ui children rendered under the header.
+
+states:
+  - name: idle
+    description: Default.
+  - name: collapsible
+    attribute: collapsible
+    description: Header is interactive.
+  - name: open
+    attribute: open
+    description: Children visible.
+
+traits: []
+
+a2ui:
+  rules:
+    - Must be a direct child of section-nav-ui.
+    - Children must be section-nav-item-ui.
+
+keywords: [section-nav-group, sub-nav-group, nav-section, rail-group]
+related: [SectionNav, SectionNavItem]

package/patterns/section-nav-item/section-nav-item.a2ui.json

@@ -0,0 +1,97 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/SectionNavItem.json",
+  "title": "SectionNavItem",
+  "description": "Single nav link in a section-nav-ui rail. Icon + label. Supports disabled\nstate and keyboard activation (Enter/Space). Selection updates the\nparent section-nav-ui's selection state.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "SectionNavItem"
+    },
+    "disabled": {
+      "description": "Non-interactive; tab-skipped; dim visual.",
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "description": "Optional Phosphor icon name (leading).",
+      "type": "string",
+      "default": ""
+    },
+    "selected": {
+      "description": "Current selection. Managed by parent section-nav-ui.",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Item label.",
+      "type": "string",
+      "default": ""
+    },
+    "value": {
+      "description": "Unique identifier (route / target id).",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "nav",
+    "events": {
+      "nav-select": {
+        "description": "Fired on click or Enter/Space (suppressed when disabled).",
+        "detail": {
+          "item": "HTMLElement",
+          "text": "string",
+          "value": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "section-nav-item",
+      "sub-nav-item",
+      "nav-link",
+      "rail-item"
+    ],
+    "name": "AdiaSectionNavItem",
+    "related": [
+      "SectionNav",
+      "SectionNavGroup"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default.",
+        "name": "idle"
+      },
+      {
+        "description": "Currently selected destination.",
+        "attribute": "selected",
+        "name": "selected"
+      },
+      {
+        "description": "Non-interactive.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "section-nav-item-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/patterns/section-nav-item/section-nav-item.css

@@ -0,0 +1,96 @@
+@scope (section-nav-item-ui) {
+  :where(:scope) {
+    --section-nav-item-row-height:   var(--a-size);
+    --section-nav-item-row-px:       var(--a-ui-px);
+    --section-nav-item-row-gap:      var(--a-space-1);
+    --section-nav-item-row-radius:   var(--a-radius-md);
+    --section-nav-item-font-size:    var(--a-ui-size);
+    --section-nav-item-icon-size:    calc(var(--section-nav-item-row-height) - var(--a-space-2));
+
+    --section-nav-item-fg:           var(--a-ui-text-subtle);
+    --section-nav-item-fg-hover:     var(--a-ui-text-hover);
+    --section-nav-item-fg-selected:  var(--a-ui-text-selected);
+    --section-nav-item-fg-disabled:  var(--a-fg-disabled);
+    --section-nav-item-icon-fg:          var(--a-fg-muted);
+    --section-nav-item-icon-fg-selected: var(--a-accent);
+    --section-nav-item-bg-hover:     var(--a-bg-muted);
+    --section-nav-item-bg-selected:  var(--a-bg-selected);
+    --section-nav-item-accent:       transparent;
+    --section-nav-item-selected-weight: var(--a-weight-medium);
+
+    --section-nav-item-duration:     var(--a-duration-fast);
+    --section-nav-item-easing:       var(--a-easing);
+  }
+
+  :scope {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--section-nav-item-row-gap);
+    height: var(--section-nav-item-row-height);
+    padding: 0 var(--section-nav-item-row-px);
+    border-radius: var(--section-nav-item-row-radius);
+    font-size: var(--section-nav-item-font-size);
+    color: var(--section-nav-item-fg);
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    text-decoration: none;
+    transition:
+      background var(--section-nav-item-duration) var(--section-nav-item-easing),
+      color      var(--section-nav-item-duration) var(--section-nav-item-easing);
+    outline: none;
+  }
+
+  :scope > icon-ui {
+    width: var(--section-nav-item-icon-size);
+    height: var(--section-nav-item-icon-size);
+    flex-shrink: 0;
+    color: var(--section-nav-item-icon-fg);
+    transition: color var(--section-nav-item-duration) var(--section-nav-item-easing);
+  }
+
+  :scope > [data-section-nav-item-label] {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :scope:hover:not([disabled]),
+  :scope:focus-visible:not([disabled]) {
+    background: var(--section-nav-item-bg-hover);
+    color: var(--section-nav-item-fg-hover);
+  }
+  :scope:hover:not([disabled]) > icon-ui,
+  :scope:focus-visible:not([disabled]) > icon-ui {
+    color: var(--section-nav-item-fg-hover);
+  }
+
+  :scope[selected] {
+    background: var(--section-nav-item-bg-selected);
+    color: var(--section-nav-item-fg-selected);
+    font-weight: var(--section-nav-item-selected-weight);
+  }
+  :scope[selected] > icon-ui {
+    color: var(--section-nav-item-icon-fg-selected);
+  }
+
+  /* Selected accent bar — shown only when no leading icon */
+  :scope[selected]:not(:has(> icon-ui))::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: calc(var(--section-nav-item-row-px) - var(--a-space-1));
+    inset-block: 25%;
+    width: 2px;
+    border-radius: 1px;
+    background: var(--section-nav-item-accent);
+  }
+
+  :scope[disabled] {
+    color: var(--section-nav-item-fg-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/patterns/section-nav-item/section-nav-item.js

@@ -0,0 +1,66 @@
+/**
+ * <section-nav-item-ui> — Single nav link in a section-nav-ui rail.
+ * Supports icon, label, disabled state, and keyboard activation (Enter/Space).
+ * Selection updates the parent section-nav-ui's selection state.
+ * Event: nav-select. detail: { item, text, value }
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaSectionNavItem extends AdiaElement {
+  static properties = {
+    text:     { type: String,  default: '',    reflect: true },
+    value:    { type: String,  default: '',    reflect: true },
+    icon:     { type: String,  default: '',    reflect: true },
+    selected: { type: Boolean, default: false, reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #onClick = (e) => {
+    if (this.disabled) { e.preventDefault(); return; }
+    const parent = this.closest('section-nav-ui');
+    parent?.select(this);
+    this.dispatchEvent(new CustomEvent('nav-select', {
+      bubbles: true,
+      detail: { item: this, text: this.text, value: this.value },
+    }));
+  };
+
+  #onKey = (e) => {
+    if (this.disabled) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.#onClick(e);
+    }
+  };
+
+  connected() {
+    this.setAttribute('role', 'link');
+    this.setAttribute('tabindex', this.disabled ? '-1' : '0');
+    this.#buildBody();
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    this.#buildBody();
+    this.setAttribute('tabindex', this.disabled ? '-1' : '0');
+    if (this.selected) this.setAttribute('aria-current', 'page');
+    else this.removeAttribute('aria-current');
+  }
+
+  #buildBody() {
+    const iconHtml = this.icon ? `<icon-ui name="${this.icon}"></icon-ui>` : '';
+    this.innerHTML = `${iconHtml}<span data-section-nav-item-label>${this.text}</span>`;
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}
+customElements.define('section-nav-item-ui', AdiaSectionNavItem);
+
+export { AdiaSectionNavItem };

package/patterns/section-nav-item/section-nav-item.yaml

@@ -0,0 +1,70 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaSectionNavItem
+tag: section-nav-item-ui
+component: SectionNavItem
+category: nav
+version: 1
+description: |
+  Single nav link in a section-nav-ui rail. Icon + label. Supports disabled
+  state and keyboard activation (Enter/Space). Selection updates the
+  parent section-nav-ui's selection state.
+
+props:
+  text:
+    type: string
+    default: ""
+    reflect: true
+    description: Item label.
+
+  value:
+    type: string
+    default: ""
+    reflect: true
+    description: Unique identifier (route / target id).
+
+  icon:
+    type: string
+    default: ""
+    reflect: true
+    description: Optional Phosphor icon name (leading).
+
+  selected:
+    type: boolean
+    default: false
+    reflect: true
+    description: Current selection. Managed by parent section-nav-ui.
+
+  disabled:
+    type: boolean
+    default: false
+    reflect: true
+    description: Non-interactive; tab-skipped; dim visual.
+
+events:
+  nav-select:
+    description: Fired on click or Enter/Space (suppressed when disabled).
+    detail:
+      item: HTMLElement
+      text: string
+      value: string
+
+slots: {}
+
+states:
+  - name: idle
+    description: Default.
+  - name: selected
+    attribute: selected
+    description: Currently selected destination.
+  - name: disabled
+    attribute: disabled
+    description: Non-interactive.
+
+traits: []
+
+a2ui:
+  rules:
+    - Must be a descendant of section-nav-ui (direct child or via section-nav-group-ui).
+
+keywords: [section-nav-item, sub-nav-item, nav-link, rail-item]
+related: [SectionNav, SectionNavGroup]

package/styles/colors/index.css

@@ -0,0 +1,6 @@
+/* Color System — Barrel */
+@import './parameters.css';
+@import './primitives.css';
+@import './surfaces.css';
+@import './scrims.css';
+@import './semantics.css';

package/styles/colors/parameters.css

@@ -0,0 +1,52 @@
+/* ═══════════════════════════════════════════════════════════════
+   Color Parameters — System-wide + per-family configuration
+
+   Using @property for typed, animatable custom properties.
+   syntax: "<number>" enables CSS transitions/animations on hue,
+   chroma, and lightness parameters. inherits: true allows
+   theme-ui and [data-theme] to override per-subtree.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── System bounds ── */
+@property --a-color-l-min              { syntax: "<number>"; inherits: true; initial-value: 0.150; }
+@property --a-color-l-max              { syntax: "<number>"; inherits: true; initial-value: 0.975; }
+@property --a-color-surface-increment  { syntax: "<number>"; inherits: true; initial-value: 0.04; }
+@property --a-color-alpha-min          { syntax: "<number>"; inherits: true; initial-value: 0.05; }
+@property --a-color-alpha-max          { syntax: "<number>"; inherits: true; initial-value: 0.85; }
+@property --a-color-tint-scrim-l       { syntax: "<number>"; inherits: true; initial-value: 0.99; }
+@property --a-color-shade-scrim-l      { syntax: "<number>"; inherits: true; initial-value: 0.05; }
+
+/* ── Neutral ── */
+@property --a-neutral-hue              { syntax: "<number>"; inherits: true; initial-value: 225; }
+@property --a-neutral-c-min            { syntax: "<number>"; inherits: true; initial-value: 0.010; }
+@property --a-neutral-c-max            { syntax: "<number>"; inherits: true; initial-value: 0.025; }
+
+/* ── Brand ── */
+@property --a-brand-hue                { syntax: "<number>"; inherits: true; initial-value: 225; }
+@property --a-brand-c-min              { syntax: "<number>"; inherits: true; initial-value: 0.02; }
+@property --a-brand-c-max              { syntax: "<number>"; inherits: true; initial-value: 0.18; }
+
+/* ── Accent ── */
+@property --a-accent-hue               { syntax: "<number>"; inherits: true; initial-value: 225; }
+@property --a-accent-c-min             { syntax: "<number>"; inherits: true; initial-value: 0.02; }
+@property --a-accent-c-max             { syntax: "<number>"; inherits: true; initial-value: 0.18; }
+
+/* ── Info ── */
+@property --a-info-hue                 { syntax: "<number>"; inherits: true; initial-value: 250; }
+@property --a-info-c-min               { syntax: "<number>"; inherits: true; initial-value: 0.02; }
+@property --a-info-c-max               { syntax: "<number>"; inherits: true; initial-value: 0.16; }
+
+/* ── Success ── */
+@property --a-success-hue              { syntax: "<number>"; inherits: true; initial-value: 145; }
+@property --a-success-c-min            { syntax: "<number>"; inherits: true; initial-value: 0.02; }
+@property --a-success-c-max            { syntax: "<number>"; inherits: true; initial-value: 0.16; }
+
+/* ── Warning ── */
+@property --a-warning-hue              { syntax: "<number>"; inherits: true; initial-value: 65; }
+@property --a-warning-c-min            { syntax: "<number>"; inherits: true; initial-value: 0.02; }
+@property --a-warning-c-max            { syntax: "<number>"; inherits: true; initial-value: 0.16; }
+
+/* ── Danger ── */
+@property --a-danger-hue               { syntax: "<number>"; inherits: true; initial-value: 25; }
+@property --a-danger-c-min             { syntax: "<number>"; inherits: true; initial-value: 0.02; }
+@property --a-danger-c-max             { syntax: "<number>"; inherits: true; initial-value: 0.20; }