@adia-ai/web-components 0.2.2 → 0.2.4

package/components/demo-toggle/demo-toggle.yaml

@@ -0,0 +1,144 @@
+# Edit this file; run `node scripts/build/components.mjs` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIDemoToggle
+tag: demo-toggle-ui
+component: DemoToggle
+category: container
+version: 1
+description: >-
+  Side-by-side comparison primitive — header bar with a switch + two child
+  slots ("on" / "off"); toggling the switch swaps which slot is visible.
+  Used on trait detail pages to show "with trait" vs "without trait" on
+  the same chrome. data-mode="overlay" stacks the slots on the same
+  coordinates so layout never shifts.
+props:
+  labelOn:
+    description: Header label rendered when state is "on".
+    type: string
+    default: "On"
+    attribute: label-on
+    reflect: true
+  labelOff:
+    description: Header label rendered when state is "off".
+    type: string
+    default: "Off"
+    attribute: label-off
+    reflect: true
+  initial:
+    description: Initial state when [state] is not set on connect ("on" | "off").
+    type: string
+    default: "off"
+    enum:
+      - "on"
+      - "off"
+    reflect: true
+  state:
+    description: Current toggle state ("on" | "off"). Reflected as data-state on the host.
+    type: string
+    default: ""
+    enum:
+      - ""
+      - "on"
+      - "off"
+    reflect: true
+events:
+  change:
+    description: Fired when the toggle flips. detail contains { state }.
+slots:
+  bar:
+    description: Internal header bar (auto-stamped). Hosts the embedded switch + label.
+  "on":
+    description: Surface rendered when state is "on" (the "with trait" variant).
+  "off":
+    description: Surface rendered when state is "off" (the "without trait" variant).
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: on
+    description: On slot is active; bar leans accent.
+    attribute: data-state
+  - name: off
+    description: Off slot is active; bar is neutral.
+    attribute: data-state
+traits: []
+tokens:
+  --demo-toggle-radius:
+    description: Outer border-radius
+  --demo-toggle-bg:
+    description: Stage background
+  --demo-toggle-border:
+    description: Border color
+  --demo-toggle-bar-bg:
+    description: Header bar background (accent when state=on)
+  --demo-toggle-bar-fg:
+    description: Header bar foreground
+  --demo-toggle-stage-padding:
+    description: Inner padding around each slot
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: with-without-trait
+    description: Compare a trait-bearing surface against the bare control on the same chrome.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "DemoToggle",
+          "labelOn": "With shimmer-loading",
+          "labelOff": "Without shimmer-loading",
+          "initial": "off",
+          "children": ["off", "on"]
+        },
+        {
+          "id": "off",
+          "component": "Card",
+          "slot": "off",
+          "children": ["off-section"]
+        },
+        {
+          "id": "off-section",
+          "component": "Section",
+          "children": ["off-text"]
+        },
+        {
+          "id": "off-text",
+          "component": "Text",
+          "textContent": "Bare surface — no trait attached."
+        },
+        {
+          "id": "on",
+          "component": "Card",
+          "slot": "on",
+          "children": ["on-section"]
+        },
+        {
+          "id": "on-section",
+          "component": "Section",
+          "children": ["on-text"]
+        },
+        {
+          "id": "on-text",
+          "component": "Text",
+          "textContent": "Same surface, with trait attached."
+        }
+      ]
+keywords:
+  - demo
+  - toggle
+  - compare
+  - comparison
+  - trait
+  - before-after
+  - a-b
+  - switch
+synonyms:
+  compare:
+    - demo-toggle
+    - segmented
+  switch:
+    - demo-toggle
+    - toggle-group
+related:
+  - Switch
+  - Card

package/components/index.js

@@ -85,6 +85,7 @@ export { UIEmbed } from './embed/embed.js';
 export { UIBlock } from './block/block.js';
 export { UIText } from './text/text.js';
 export { UIToggleGroup, UIToggleOption } from './toggle-group/toggle-group.js';
+export { UIDemoToggle } from './demo-toggle/demo-toggle.js';
 export { UIRichText } from './richtext/richtext.js';
 export { UIStream } from './stream/stream.js';
 export { UICanvas } from './canvas/canvas.js';

package/components/input/input.js

@@ -120,10 +120,14 @@ class UIInput extends UIFormElement {
   render() {
     if (!this.#textEl) return;
 
+    const text = this.value || '';
+
     if (this.#isNativeInput) {
       this.#textEl.placeholder = this.placeholder;
       this.#textEl.disabled = this.disabled;
       this.#textEl.readOnly = this.readonly;
+      // Sync programmatic value writes (form.reset(), trait assignments).
+      if (this.#textEl.value !== text) this.#textEl.value = text;
     } else {
       this.#textEl.setAttribute('data-placeholder', this.placeholder);
       if (this.disabled || this.readonly) {
@@ -131,6 +135,13 @@ class UIInput extends UIFormElement {
       } else {
         this.#textEl.contentEditable = 'plaintext-only';
       }
+      // Sync programmatic value writes into the contenteditable surface.
+      // Skip when already in sync to avoid clobbering an in-flight edit's
+      // caret position.
+      if (this.#textEl.textContent !== text) {
+        this.#textEl.textContent = text;
+        this.#textEl.toggleAttribute('data-empty', !text);
+      }
     }
 
     if (this.#labelEl) this.#labelEl.textContent = this.label || '';

package/components/list/list.css

@@ -92,20 +92,83 @@
 @scope (list-item-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --list-item-inset: var(--a-inset);
+    --list-item-inset:      var(--a-inset);
+    --list-item-gap-column: var(--a-space-3);
+    --list-item-gap-row:    var(--a-space-1);
 
     /* ── Colors ── */
     --list-item-text-color: var(--a-fg);
+    --list-item-desc-color: var(--a-fg-muted);
+    --list-item-icon-color: var(--a-fg-muted);
 
     /* ── Typography ── */
-    --list-item-font-size: var(--a-ui-size);
+    --list-item-font-size:      var(--a-ui-size);
+    --list-item-desc-font-size: var(--a-ui-sm);
   }
 
+  /* Anatomy:
+     col 1 = icon (auto width; collapses to 0 when no icon)
+     col 2 = content stack (text on row 1, description on row 2)
+     The icon spans both rows + centers vertically with the stack.
+     `[slot="content"]` (used when consumer provides custom rendering)
+     spans all columns. */
   :scope {
     box-sizing: border-box;
-    display: block;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--list-item-gap-column);
+    row-gap: var(--list-item-gap-row);
     font-size: var(--list-item-font-size);
     color: var(--list-item-text-color);
     line-height: 1.4;
+    /* Defensive floor: empty list-item-ui (no text/icon/children) collapses
+       to 0 height and disappears. Keep a visible row instead. */
+    min-height: var(--a-space-6);
+  }
+
+  :scope > [slot="icon"] {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    align-self: center;
+    color: var(--list-item-icon-color);
+  }
+
+  :scope > [slot="text"] {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  :scope > [slot="description"] {
+    grid-column: 2;
+    grid-row: 2;
+    color: var(--list-item-desc-color);
+    font-size: var(--list-item-desc-font-size);
+    line-height: 1.3;
+  }
+
+  /* Custom-content escape hatch — consumer authored a [slot="content"]
+     child, the auto-stamp early-returned, and the consumer owns the
+     full body. Span all columns so the consumer's layout isn't boxed
+     into the content column. */
+  :scope > [slot="content"] {
+    grid-column: 1 / -1;
+  }
+
+  /* ── Active state ──
+     `[data-active]` is the consumer-driven "current item" hook used by
+     keyboard-nav-style demos and any host that owns its own active-index
+     model (separate from list-ui[selectable] / aria-selected). Reuses
+     the accent-muted/accent-strong pair so the two mechanisms paint
+     consistently. No border-radius on the row itself — dividers (when
+     present) span full-width and rounded corners would clash. */
+  :scope[data-active] {
+    background: var(--a-accent-muted);
+    color: var(--a-accent-strong);
+    box-shadow: inset 2px 0 0 var(--a-accent-strong);
+  }
+
+  :scope[data-active] > [slot="icon"],
+  :scope[data-active] > [slot="description"] {
+    color: var(--a-accent-strong);
   }
 }

package/components/nav-group/nav-group.a2ui.json

@@ -42,7 +42,7 @@
       "default": ""
     },
     "variant": {
-      "description": "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children — matches the prior <section-nav-group-ui>. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group.",
+      "description": "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group.",
       "type": "string",
       "enum": [
         "",

package/components/nav-group/nav-group.css

@@ -264,11 +264,11 @@ nav-group-ui [slot="popover"] [role="option"][aria-selected="true"]::before {
 }
 
 /* ── Section variant — groups render as kicker labels ──
-   The prior <section-nav-group-ui> defaulted to collapsible:false
-   (header was a label, children always visible). The consolidated
-   nav-group-ui defaults collapsible:true (the primary-variant default).
-   Section variant restores the old kicker rendering so subnav rails
-   show all children without an explicit [open] toggle.
+   Primary variant defaults to collapsible:true (caret-toggleable).
+   Section variant flips to collapsible:false-shape — header is a
+   static kicker label, children always visible — so subnav rails
+   show their full structure without requiring an explicit [open]
+   toggle.
 
    Two ways to enable: either
      (a) `<nav-group-ui variant="section">` directly, or

package/components/nav-group/nav-group.yaml

@@ -39,7 +39,7 @@ props:
     type: string
     default: ''
     enum: ['', section]
-    description: "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children — matches the prior <section-nav-group-ui>. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group."
+    description: "Visual treatment. Default ('') renders as a primary-rail group (icon row, caret, collapsible). 'section' renders the header as a static kicker label with always-visible children. When the parent <nav-ui> carries variant=\"section\", this group inherits it via CSS cascade unless an explicit variant is set on the group."
 
 events:
   group-toggle:

package/components/nav-item/nav-item.a2ui.json

@@ -47,7 +47,7 @@
       "default": ""
     },
     "variant": {
-      "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.",
+      "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. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set.",
       "type": "string",
       "enum": [
         "",

package/components/nav-item/nav-item.css

@@ -162,10 +162,9 @@ nav-item-ui[selected] [slot="icon"]:empty::before {
 }
 
 /* ── 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.
+   Section-variant rails read as plain links rather than primary-style
+   rows: no reserved icon space when absent, left-edge accent bar for
+   the selected state instead of an in-icon accent.
 
    Two ways to enable: either
      (a) `<nav-item-ui variant="section">` directly, or

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

@@ -43,7 +43,7 @@ props:
     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."
+    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. When the parent <nav-ui> carries variant=\"section\", this item inherits it via CSS cascade unless an explicit variant is set."
 
 events:
   nav-select:

package/components/textarea/textarea.js

@@ -55,6 +55,16 @@ class UITextarea extends UIFormElement {
       this.#textEl.contentEditable = 'plaintext-only';
     }
 
+    // Sync programmatic `value` assignments (form.reset(), trait writes,
+    // controlled-input patterns) into the contenteditable surface. Skip
+    // when the surface already matches to avoid clobbering an in-flight
+    // edit's caret.
+    const text = this.value || '';
+    if (this.#textEl.textContent !== text) {
+      this.#textEl.textContent = text;
+      this.#textEl.toggleAttribute('data-empty', !text);
+    }
+
     const label = this.querySelector('[slot="label"]');
     if (label && this.label) label.setAttribute('label', this.label);
 

package/core/icons.js

@@ -212,7 +212,18 @@ const ICON_ALIASES = {
   'phone': 'phone', 'location': 'map-pin', 'calendar': 'calendar-blank',
   'time': 'clock', 'user': 'user', 'users': 'users-three',
   'menu': 'list', 'more': 'dots-three', 'dots-vertical': 'dots-three-vertical', 'filter': 'funnel',
-  'inbox': 'tray', 'text-bold': 'text-b',
+  'inbox': 'tray',
+  'text-bold': 'text-b', 'bold': 'text-b', 'italic': 'text-italic', 'underline': 'text-underline',
+  'reset': 'arrow-counter-clockwise', 'undo': 'arrow-counter-clockwise', 'redo': 'arrow-clockwise',
+  'success-checkmark': 'seal-check', 'circuit': 'circuitry',
+  'contrast': 'circle-half', 'theme': 'circle-half', 'dark-mode': 'moon', 'light-mode': 'sun',
+  'alert-triangle': 'warning', 'alert-octagon': 'warning-octagon', 'alert-diamond': 'warning-diamond',
+  'number': 'hash', 'numbered-list': 'list-numbers', 'numeric': 'hash',
+  // Phosphor uses suffix-circle for these, but consumers reach for the
+  // prefix form ("circle-warning") just as often. Resolve both shapes.
+  'circle-warning': 'warning-circle', 'circle-x': 'x-circle',
+  'circle-check': 'check-circle', 'circle-info': 'info',
+  'circle-question': 'question', 'circle-plus': 'plus-circle', 'circle-minus': 'minus-circle',
   'sort': 'sort-ascending', 'refresh': 'arrow-clockwise', 'download': 'download-simple',
   'upload': 'upload-simple', 'share': 'share-network', 'copy': 'copy-simple',
   'link': 'link-simple', 'external-link': 'arrow-square-out',
@@ -224,6 +235,7 @@ const ICON_ALIASES = {
   'attachment': 'paperclip', 'attach': 'paperclip',
   'expand': 'arrows-out', 'collapse': 'arrows-in',
   'fullscreen': 'arrows-out', 'exit-fullscreen': 'arrows-in',
+  'fade': 'gradient', 'fade-presence': 'gradient',
   'notification': 'bell', 'notifications': 'bell',
   'bookmark': 'bookmark-simple', 'favorite': 'heart', 'like': 'heart',
   'comment': 'chat-circle', 'chat': 'chat-circle',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
   "type": "module",
   "exports": {

package/styles/components.css

@@ -83,6 +83,7 @@
 @import "../components/block/block.css";
 @import "../components/text/text.css";
 @import "../components/toggle-group/toggle-group.css";
+@import "../components/demo-toggle/demo-toggle.css";
 @import "../components/richtext/richtext.css";
 @import "../components/stream/stream.css";
 @import "../components/canvas/canvas.css";

package/styles/typography.css

@@ -256,7 +256,7 @@
 
   /* section — h2/h3, major division within content */
   --a-section-family: var(--a-font-family-heading);
-  --a-section-weight: var(--a-weight-semibold);
+  --a-section-weight: var(--a-weight-normal);
   --a-section-sm: 16px;
   --a-section-md: 17px;
   --a-section-lg: 19px;