@adia-ai/web-components 0.0.28 → 0.0.33

package/{patterns/app-nav-item/app-nav-item.css → components/nav-item/nav-item.css}

@@ -5,22 +5,22 @@
    Safari < 18 is below the §1 floor (ADR-0007); fix protects opt-in
    consumers extending below the floor and is harmlessly redundant on
    engines without the bug. */
-app-nav-item-ui:hover {
+nav-item-ui:hover {
   background: var(--nav-item-bg-hover);
   color: var(--nav-item-fg-hover);
 }
-app-nav-item-ui:hover [slot="icon"] {
+nav-item-ui:hover [slot="icon"] {
   color: var(--nav-item-fg-hover);
 }
-app-nav-item-ui[selected] {
+nav-item-ui[selected] {
   background: var(--nav-item-bg-selected);
   color: var(--nav-item-fg-selected);
   font-weight: var(--nav-item-selected-weight);
 }
-app-nav-item-ui[selected] [slot="icon"] {
+nav-item-ui[selected] [slot="icon"] {
   color: var(--nav-item-icon-fg-selected);
 }
-app-nav-item-ui[selected] [slot="icon"]:empty::before {
+nav-item-ui[selected] [slot="icon"]:empty::before {
   content: '';
   width: 2px;
   height: 1em;
@@ -28,7 +28,7 @@ app-nav-item-ui[selected] [slot="icon"]:empty::before {
   background: var(--nav-item-accent);
 }
 
-@scope (app-nav-item-ui) {
+@scope (nav-item-ui) {
   :where(:scope) {
     --nav-item-accent:          var(--a-accent);
     --nav-item-row-height:      var(--a-size);
@@ -125,13 +125,13 @@ app-nav-item-ui[selected] [slot="icon"]:empty::before {
   }
 
   /* ── Collapsed nav: hide text, badge, trailing ── */
-  app-nav-ui[collapsed] & [slot="text"],
-  app-nav-ui[collapsed] & [slot="badge"],
-  app-nav-ui[collapsed] & [slot="trailing"] {
+  nav-ui[collapsed] & [slot="text"],
+  nav-ui[collapsed] & [slot="badge"],
+  nav-ui[collapsed] & [slot="trailing"] {
     display: none;
   }
 
-  app-nav-ui[collapsed] & {
+  nav-ui[collapsed] & {
     justify-content: center;
     padding: 0;
   }
@@ -160,3 +160,35 @@ app-nav-item-ui[selected] [slot="icon"]:empty::before {
     --nav-item-font-size:  var(--nav-item-font-size-lg);
   }
 }
+
+/* ── Section variant — items render flat (no icon space, no indent) ──
+   The prior <section-nav-item-ui> didn't reserve space for an absent icon
+   and used a left-edge accent bar for the selected state. Restore that
+   shape so subnav rails read as plain links rather than a primary-style
+   row with a hidden icon slot.
+
+   Two ways to enable: either
+     (a) `<nav-item-ui variant="section">` directly, or
+     (b) `<nav-ui variant="section"> … nav-item-ui`  (cascade from parent).
+*/
+
+nav-item-ui[variant="section"] [slot="icon"]:empty,
+nav-ui[variant="section"] nav-item-ui:not([variant]) [slot="icon"]:empty {
+  display: none;
+}
+
+/* When an explicit icon IS present, keep it but at a smaller scale. */
+nav-item-ui[variant="section"] [slot="icon"]:not(:empty),
+nav-ui[variant="section"] nav-item-ui:not([variant]) [slot="icon"]:not(:empty) {
+  width: 1em;
+  height: 1em;
+}
+
+/* Selected indicator — section variant relies on the row-level
+   background fill + text color + medium weight (no left-edge bar,
+   no in-icon accent). Suppress the in-icon accent that the primary
+   variant paints into the empty icon slot. */
+nav-item-ui[variant="section"][selected] [slot="icon"]:empty::before,
+nav-ui[variant="section"] nav-item-ui:not([variant])[selected] [slot="icon"]:empty::before {
+  content: none;
+}

package/components/nav-item/nav-item.js

@@ -0,0 +1,76 @@
+/**
+ * <nav-item-ui> — Single navigation link inside <nav-ui> (optionally
+ * nested under <nav-group-ui>). Consolidates the prior
+ * `app-nav-item-ui` + `section-nav-item-ui` per ADR-0015 § Nav consolidation.
+ *
+ * Supports icon, label, optional badge, selected/disabled state, and
+ * keyboard activation (Enter/Space). Selection is managed by the parent
+ * <nav-ui>; clicking or keyboard-activating an item calls nav.select(this)
+ * and dispatches `nav-select` (bubbles, detail: { item, text, value }).
+ */
+
+import { UIElement } from '../../core/element.js';
+
+class UINavItem extends UIElement {
+  static properties = {
+    text:     { type: String,  default: '', reflect: true },
+    icon:     { type: String,  default: '', reflect: true },
+    value:    { type: String,  default: '', reflect: true },
+    badge:    { type: String,  default: '', reflect: true },
+    selected: { type: Boolean, default: false, reflect: true },
+    disabled: { type: Boolean, default: false, reflect: true },
+    variant:  { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #onClick = (e) => {
+    if (this.disabled) { e.preventDefault(); return; }
+    const parent = this.closest('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');
+
+    if (!this.querySelector('[slot="text"]')) {
+      this.innerHTML = `
+        <span slot="icon">${this.icon ? `<icon-ui name="${this.icon}"></icon-ui>` : ''}</span>
+        <span slot="text">${this.text}</span>
+        ${this.badge ? `<span slot="badge">${this.badge}</span>` : ''}
+      `;
+    }
+
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    const textEl = this.querySelector('[slot="text"]');
+    if (textEl) textEl.textContent = this.text;
+    this.setAttribute('tabindex', this.disabled ? '-1' : '0');
+    if (this.selected) this.setAttribute('aria-current', 'page');
+    else this.removeAttribute('aria-current');
+  }
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}
+
+customElements.define('nav-item-ui', UINavItem);
+export { UINavItem };

package/components/nav-item/nav-item.yaml

@@ -0,0 +1,73 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UINavItem
+tag: nav-item-ui
+component: NavItem
+category: layout
+version: 1
+description: |
+  Single navigation link inside <nav-ui> (optionally nested under
+  <nav-group-ui>). Consolidates the prior `app-nav-item-ui` +
+  `section-nav-item-ui` per ADR-0015 § Nav consolidation.
+
+  Supports icon, label, optional badge, selected/disabled state, and
+  keyboard activation (Enter/Space). Selection is managed by the parent
+  <nav-ui>; clicking or activating an item calls nav.select(this) and
+  bubbles a `nav-select` event.
+
+props:
+  text:
+    type: string
+    default: ''
+    description: "Visible item label."
+  icon:
+    type: string
+    default: ''
+    description: "Optional leading icon name."
+  value:
+    type: string
+    default: ''
+    description: "Identifier — typically a route or anchor."
+  badge:
+    type: string
+    default: ''
+    description: "Optional trailing badge."
+  selected:
+    type: boolean
+    default: false
+    description: "Set by the parent <nav-ui>'s select() method."
+  disabled:
+    type: boolean
+    default: false
+    description: "Suppresses click/keyboard activation; greyed visually."
+  variant:
+    type: string
+    default: ''
+    enum: ['', section]
+    description: "Visual treatment. Default ('') renders as a primary-rail item (reserved icon space, in-icon selected accent). 'section' renders flat — no icon space when absent, left-edge accent bar for selected — matching the prior <section-nav-item-ui>. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set."
+
+events:
+  nav-select:
+    description: "Bubbles when the item is activated. Detail: { item, text, value }."
+
+slots:
+  default:
+    description: "Optional override of the default icon + text + badge stamping."
+
+states:
+  - name: idle
+    description: Default.
+  - name: selected
+    description: aria-current=page.
+  - name: disabled
+    description: Suppressed activation.
+
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples: []
+
+keywords: [nav, navigation, item, link, sidebar]
+synonyms: {}
+related: []

package/components/noodles/noodles.a2ui.json

@@ -110,7 +110,7 @@
     "keywords": [
       "noodles"
     ],
-    "name": "AdiaNoodles",
+    "name": "UINoodles",
     "related": [],
     "slots": {},
     "states": [

package/components/noodles/noodles.js

@@ -10,11 +10,11 @@
  * Supports bezier, step, and straight curve modes.
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
 let nextId = 0;
 
-class AdiaNoodles extends AdiaElement {
+class UINoodles extends UIElement {
   static properties = {
     editable:    { type: Boolean, default: false, reflect: true },
     color:       { type: String,  default: '', reflect: true },
@@ -496,6 +496,6 @@ class AdiaNoodles extends AdiaElement {
   }
 }
 
-customElements.define('noodles-ui', AdiaNoodles);
+customElements.define('noodles-ui', UINoodles);
 
-export { AdiaNoodles };
+export { UINoodles };

package/components/noodles/noodles.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaNoodles
+name: UINoodles
 tag: noodles-ui
 component: Noodles
 category: agent

package/components/option-card/option-card.a2ui.json

@@ -97,7 +97,7 @@
       "onboarding",
       "registration"
     ],
-    "name": "AdiaOptionCard",
+    "name": "UIOptionCard",
     "related": [
       "radio",
       "card",

package/components/option-card/option-card.js

@@ -27,15 +27,15 @@
  *   </option-card-ui>
  *
  * Sibling navigation: arrow keys move focus and selection; Space/Enter
- * select. Form-associated via AdiaFormElement, so `name=value` submits
+ * select. Form-associated via UIFormElement, so `name=value` submits
  * with the parent form when the card is checked.
  */
 
-import { AdiaFormElement } from '../../core/form.js';
+import { UIFormElement } from '../../core/form.js';
 
-class AdiaOptionCard extends AdiaFormElement {
+class UIOptionCard extends UIFormElement {
   static properties = {
-    ...AdiaFormElement.properties,
+    ...UIFormElement.properties,
     checked:     { type: Boolean, default: false, reflect: true },
     heading:     { type: String,  default: '', reflect: true },
     description: { type: String,  default: '', reflect: true },
@@ -153,6 +153,6 @@ class AdiaOptionCard extends AdiaFormElement {
   }
 }
 
-customElements.define('option-card-ui', AdiaOptionCard);
+customElements.define('option-card-ui', UIOptionCard);
 
-export { AdiaOptionCard };
+export { UIOptionCard };

package/components/option-card/option-card.yaml

@@ -1,6 +1,6 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaOptionCard
+name: UIOptionCard
 tag: option-card-ui
 component: OptionCard
 category: input

package/components/otp-input/otp-input.a2ui.json

@@ -70,7 +70,7 @@
       "otp",
       "input"
     ],
-    "name": "AdiaOtpInput",
+    "name": "UIOtpInput",
     "related": [
       "button"
     ],

package/components/otp-input/otp-input.js

@@ -8,11 +8,11 @@
  * Events: 'complete' (detail: {value}), 'input'
  */
 
-import { AdiaFormElement } from '../../core/form.js';
+import { UIFormElement } from '../../core/form.js';
 
-class AdiaOtpInput extends AdiaFormElement {
+class UIOtpInput extends UIFormElement {
   static properties = {
-    ...AdiaFormElement.properties,
+    ...UIFormElement.properties,
     length: { type: Number, default: 6, reflect: true },
   };
 
@@ -165,6 +165,6 @@ class AdiaOtpInput extends AdiaFormElement {
     this.#inputs = [];
   }
 }
-customElements.define('otp-input-ui', AdiaOtpInput);
+customElements.define('otp-input-ui', UIOtpInput);
 
-export { AdiaOtpInput };
+export { UIOtpInput };

package/components/otp-input/otp-input.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaOtpInput
+name: UIOtpInput
 tag: otp-input-ui
 component: OtpInput
 category: input

package/components/page/page.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Page.json",
   "title": "Page",
-  "description": "Page container. Holds page-level chrome — header / content / footer —\nand manages max-width clamps, padding scale, optional scroll-container,\nand an optional sticky-header sentinel. Compose with the slot\nprimitives (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's\n@scope rules style them. Drop in directly, or nest inside an\n`<app-shell-ui>`'s main column.\n",
+  "description": "Page container. Holds page-level chrome — header / content / footer —\nand manages max-width clamps, padding scale, optional scroll-container,\nand an optional sticky-header sentinel. Compose with the slot\nprimitives (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's\n@scope rules style them. Drop in directly, or nest inside an\n`<admin-shell>`'s main column.\n",
   "type": "object",
   "allOf": [
     {
@@ -34,7 +34,7 @@
       "default": ""
     },
     "scroll": {
-      "description": "Sets the page as a scroll container. `overflow-y: auto`, full\nheight, contained overscroll. Use when the page IS the scroll\nsurface (standalone pages); leave off when nested inside a parent\nthat already manages scroll (e.g. inside an `<app-shell-ui>`'s\nmain `<section>`).\n",
+      "description": "Sets the page as a scroll container. `overflow-y: auto`, full\nheight, contained overscroll. Use when the page IS the scroll\nsurface (standalone pages); leave off when nested inside a parent\nthat already manages scroll (e.g. inside an `<admin-shell>`'s\nmain `<section>`).\n",
       "type": "boolean",
       "default": false
     },
@@ -75,7 +75,7 @@
       "prose-page",
       "dashboard-page"
     ],
-    "name": "AdiaPage",
+    "name": "UIPage",
     "related": [
       "app-shell",
       "card",

package/components/page/page.js

@@ -25,9 +25,9 @@
  * ADR: .brain/adrs/0009-promote-app-shell-and-page-to-components.md.
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaPage extends AdiaElement {
+class UIPage extends UIElement {
   static properties = {
     scroll:       { type: Boolean, default: false, reflect: true },
     maxWidth:     { type: String,  default: '',    attribute: 'max-width', reflect: true },
@@ -83,6 +83,6 @@ class AdiaPage extends AdiaElement {
   }
 }
 
-customElements.define('page-ui', AdiaPage);
+customElements.define('page-ui', UIPage);
 
-export { AdiaPage };
+export { UIPage };

package/components/page/page.yaml

@@ -1,6 +1,6 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaPage
+name: UIPage
 tag: page-ui
 component: Page
 category: container
@@ -11,14 +11,14 @@ description: |
   and an optional sticky-header sentinel. Compose with the slot
   primitives (`<header-ui>`, `<section-ui>`, `<footer-ui>`); the page's
   @scope rules style them. Drop in directly, or nest inside an
-  `<app-shell-ui>`'s main column.
+  `<admin-shell>`'s main column.
 props:
   scroll:
     description: |
       Sets the page as a scroll container. `overflow-y: auto`, full
       height, contained overscroll. Use when the page IS the scroll
       surface (standalone pages); leave off when nested inside a parent
-      that already manages scroll (e.g. inside an `<app-shell-ui>`'s
+      that already manages scroll (e.g. inside an `<admin-shell>`'s
       main `<section>`).
     type: boolean
     default: false

package/components/pagination/pagination.a2ui.json

@@ -68,7 +68,7 @@
       "paginate",
       "paging"
     ],
-    "name": "AdiaPagination",
+    "name": "UIPagination",
     "related": [
       "input",
       "table"

package/components/pagination/pagination.js

@@ -8,9 +8,9 @@
  *   page-change — { detail: { page } }
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaPagination extends AdiaElement {
+class UIPagination extends UIElement {
   static properties = {
     page:     { type: Number, default: 1, reflect: true },
     total:    { type: Number, default: 1, reflect: true },
@@ -180,6 +180,6 @@ class AdiaPagination extends AdiaElement {
     }));
   };
 }
-customElements.define('pagination-ui', AdiaPagination);
+customElements.define('pagination-ui', UIPagination);
 
-export { AdiaPagination };
+export { UIPagination };

package/components/pagination/pagination.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaPagination
+name: UIPagination
 tag: pagination-ui
 component: Pagination
 category: navigation

package/components/pane/pane.a2ui.json

@@ -70,7 +70,7 @@
     "keywords": [
       "pane"
     ],
-    "name": "AdiaPane",
+    "name": "UIPane",
     "related": [
       "text-area"
     ],

package/components/pane/pane.js

@@ -31,9 +31,9 @@
  *   pane.toggle()
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaPane extends AdiaElement {
+class UIPane extends UIElement {
   static properties = {
     collapsed:  { type: Boolean, default: false, reflect: true },
     resizable:  { type: Boolean, default: false, reflect: true },
@@ -147,6 +147,6 @@ class AdiaPane extends AdiaElement {
     this.#bound = false;
   }
 }
-customElements.define('pane-ui', AdiaPane);
+customElements.define('pane-ui', UIPane);
 
-export { AdiaPane };
+export { UIPane };

package/components/pane/pane.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaPane
+name: UIPane
 tag: pane-ui
 component: Pane
 category: layout

package/components/pipeline-status/pipeline-status.a2ui.json

@@ -68,7 +68,7 @@
       "pipeline",
       "status"
     ],
-    "name": "AdiaPipelineStatus",
+    "name": "UIPipelineStatus",
     "related": [],
     "slots": {
       "default": {

package/components/pipeline-status/pipeline-status.js

@@ -1,4 +1,4 @@
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
 /**
  * <pipeline-status-ui> — Single updating pipeline status indicator.
@@ -23,7 +23,7 @@ const STAGE_LABELS = {
   render: 'Rendering',
 };
 
-class AdiaPipelineStatus extends AdiaElement {
+class UIPipelineStatus extends UIElement {
   static properties = {
     stage:   { type: String, default: '', reflect: true },
     message: { type: String, default: '', reflect: true },
@@ -175,6 +175,6 @@ class AdiaPipelineStatus extends AdiaElement {
   }
 }
 
-customElements.define('pipeline-status-ui', AdiaPipelineStatus);
+customElements.define('pipeline-status-ui', UIPipelineStatus);
 
-export { AdiaPipelineStatus };
+export { UIPipelineStatus };

package/components/pipeline-status/pipeline-status.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaPipelineStatus
+name: UIPipelineStatus
 tag: pipeline-status-ui
 component: PipelineStatus
 category: agent

package/components/popover/popover.a2ui.json

@@ -85,7 +85,7 @@
       "context-menu",
       "right-click"
     ],
-    "name": "AdiaPopover",
+    "name": "UIPopover",
     "related": [
       "button",
       "divider"

package/components/popover/popover.js

@@ -13,12 +13,12 @@
  * Triggers: click | hover | manual. ESC closes click/manual popovers.
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 import { anchorPopover } from '../../core/anchor.js';
 
 const HOVER_CLOSE_DELAY = 120;
 
-class AdiaPopover extends AdiaElement {
+class UIPopover extends UIElement {
   static properties = {
     placement: { type: String,  default: 'bottom', reflect: true },
     gap:       { type: Number,  default: 4, reflect: true },
@@ -180,5 +180,5 @@ class AdiaPopover extends AdiaElement {
   }
 }
 
-customElements.define('popover-ui', AdiaPopover);
-export { AdiaPopover };
+customElements.define('popover-ui', UIPopover);
+export { UIPopover };

package/components/popover/popover.yaml

@@ -1,7 +1,7 @@
 # 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: AdiaPopover
+name: UIPopover
 tag: popover-ui
 component: Popover
 category: container

package/components/progress/progress.a2ui.json

@@ -72,7 +72,7 @@
       "percent",
       "gamification"
     ],
-    "name": "AdiaProgress",
+    "name": "UIProgress",
     "related": [
       "grid",
       "button",

package/components/progress/progress.js

@@ -8,9 +8,9 @@
  * (Legacy `value="-1"` is still treated as indeterminate for back-compat.)
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaProgress extends AdiaElement {
+class UIProgress extends UIElement {
   static properties = {
     value:   { type: Number, default: null,  reflect: true },
     variant: { type: String, default: 'bar', reflect: true },
@@ -59,6 +59,6 @@ class AdiaProgress extends AdiaElement {
     this.#fill = null;
   }
 }
-customElements.define('progress-ui', AdiaProgress);
+customElements.define('progress-ui', UIProgress);
 
-export { AdiaProgress };
+export { UIProgress };