@adia-ai/web-components 0.7.21 → 0.7.23

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.23] — 2026-06-30
+
+### Fixed
+- **`button-ui` (`components/button/`) — child text now labels the button, same as `text=`.** A label written as child text (`<button-ui>Save</button-ui>`, no `text=` attr) was treated as icon-only and collapsed to a square icon slot with the text clipped — the collapse rule keyed off `:scope:not([text]), :scope[text=""]`, which can't see text-node children. `render()` now scans child nodes for non-whitespace text and reflects a JS-derived `[data-icon-only]` state **only** when there is neither a `text=` value nor child text; `button.css` keys its collapse + inline-level rules off `[data-icon-only]` instead of the `[text]` selectors. A child-text button now renders at full content width, identical to `text="Save"`, while a genuine `<button-ui icon="…">` still collapses; the icon-only accessible-name warning is re-gated to respect child text. Adds an `icon-only` state to `button.yaml`; `button.a2ui.json` + `dist/web-components.min.{js,css}` + `.sheet.js` (and the `theme-provider` / `everything` bundles) regenerated. (journal 2026-06-30 §1)
+
+### Changed
+- **`accordion-ui` (`components/accordion/`) — normal block-flow gap, borderless items.** `--accordion-gap` changed from `0` to `var(--a-gap)`, so stacked items separate with the same canonical block-flow stack gap `col-ui` / `row-ui` / `grid-ui` use instead of butting together. The per-item `border-bottom` separator — with its `--accordion-item-border` token and the `:last-child` border reset — was removed for a clean borderless stack. Visible re-spacing, no public-API change (PATCH). (journal 2026-06-30 §2)
+
+## [0.7.22] — 2026-06-16
+
+### Changed
+- **Surface tokens aligned onto the symmetric canvas ramp.** The `--a-canvas-*` surface assignments were consolidated onto one symmetric luminance ramp so elevation reads identically in light + dark (the prior mix of the flipping + symmetric ramps inverted in light mode). Chrome overlays — `components/modal`, `components/popover`, `components/drawer` — sit at `--a-canvas-dimmer`; `components/card` (`card-ui`) roots at `--a-canvas-base` with nesting `base → bright → brighter → brightest` (capped). `styles/colors/surfaces.css` gained the named canvas luminance scales (`--a-canvas-{dimmest…brightest}`); `styles/colors/parameters.css` updated; `drawer-ui` pulled on-ramp (was the only off-ramp overlay). `dist/` bundles (`host`, `theme-provider`, `web-components`) regenerated. Re-skins every modal/card/drawer/popover — a visible behavior change with no public-API change (PATCH). (journal 2026-06-15 §6)
+
 ## [0.7.21] — 2026-06-10
 
 ### Maintenance In-repo only: 57 `components/`/`traits/` `*.examples.html` files were de-annotated as part of the corpus curation (demo markers kept for the `?chunks` overlay) — `.examples.html` files are excluded from the published tarball (`files:` negation), so the npm artifact is unchanged.

package/components/accordion/accordion.css

@@ -9,7 +9,11 @@
 /* ── Container ── */
 @scope (accordion-ui) {
   :where(:scope) {
-    --accordion-gap: 0;
+    /* Normal block-flow gap between items — the same ambient stack gap
+       col-ui/row-ui/grid-ui read (`--a-gap`, base `--a-gap-md`). Items now
+       separate by this gap rather than by flush hairline dividers, so the
+       item @scope below carries no inter-item border. */
+    --accordion-gap: var(--a-gap);
   }
 
   :scope {
@@ -24,7 +28,6 @@
 @scope (accordion-item-ui) {
   :where(:scope) {
     /* ── Colors ── */
-    --accordion-item-border:          var(--a-border-subtle);
     --accordion-item-header-fg:       var(--a-fg-subtle);
     --accordion-item-header-fg-hover: var(--a-fg-strong);
     --accordion-item-header-bg-hover: var(--a-bg-muted);
@@ -53,11 +56,6 @@
   :scope {
     box-sizing: border-box;
     display: block;
-    border-bottom: 1px solid var(--accordion-item-border);
-  }
-
-  :scope:last-child {
-    border-bottom: none;
   }
 
   /* ── Header ── */

package/components/button/button.a2ui.json

@@ -145,6 +145,11 @@
         "description": "Default, ready for interaction.",
         "name": "idle"
       },
+      {
+        "description": "No text label — neither the `text` attr nor non-whitespace child text. Reflected by render() as `[data-icon-only]`; the CSS collapses the button to a square icon slot (zero inline padding, width = height) and keeps it inline-level. A button labeled by child text (`<button-ui>Save</button-ui>`) is NOT icon-only and renders at full content width, same as `text=`.",
+        "attribute": "data-icon-only",
+        "name": "icon-only"
+      },
       {
         "description": "Non-interactive; dimmed.",
         "attribute": "disabled",

package/components/button/button.class.js

@@ -82,6 +82,24 @@ export class UIButton extends UIElement {
       }
     }
 
+    // A button is "labeled" by EITHER the [text] attribute (rendered via the
+    // ::after in button.css) OR direct light-DOM child text — `<button-ui>Save
+    // </button-ui>`, which renders as-is in the flex row. Both are valid labels;
+    // only a button with NEITHER is a square icon-only (or empty) button. Detect
+    // child text by scanning direct text nodes — the auto-stamped <icon-ui>
+    // children are element nodes (nodeType 1), so they're correctly ignored.
+    // Reflect the result as [data-icon-only]: button.css keys its collapse +
+    // inline-level rules off it (mirrors the derived-marker pattern in
+    // page.class.js's [data-header-stuck]). Child-text edits don't re-trigger
+    // render() (textContent isn't reactive — see the static-properties note
+    // above), but light-DOM children are parsed before the first render, so the
+    // initial classification is correct; toolbar spillover toggles the [text]
+    // attr (reactive), which re-runs this and keeps the marker in sync.
+    const hasChildText = Array.from(this.childNodes).some(
+      (n) => n.nodeType === 3 && n.textContent.trim() !== '',
+    );
+    this.toggleAttribute('data-icon-only', !this.text && !hasChildText);
+
     // FEEDBACK-15: warn when text= begins with a symbol that icon= already
     // renders (e.g. text="+ New Claim" icon="plus" → a doubled "+"). One-shot
     // per element via WeakSet; warning-only — the button still renders. The
@@ -113,7 +131,9 @@ export class UIButton extends UIElement {
     //       so the bug class is diagnosable in dev without firing every
     //       render tick. The warning is suppressed via a one-shot
     //       WeakSet so subsequent re-renders stay quiet.
-    if (this.icon && !this.text) {
+    if (this.icon && !this.text && !hasChildText) {
+      // (child text is itself the accessible name natively, so a button with
+      //  light-DOM text is NOT icon-only and never warns here.)
       const ariaLabel = this.getAttribute('aria-label');
       const ariaLabelledBy = this.getAttribute('aria-labelledby');
       const titleAttr = this.getAttribute('title');

package/components/button/button.css

@@ -148,10 +148,11 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
   }
 
   /* Display convention (ADR-0037): block-level by default — a text button used
-     directly in block flow fills its container. Icon-only buttons (no [text])
-     stay inline-level, and [inline] forces inline for any button. Inside
-     row-ui/col-ui/grid-ui this is moot (flex/grid items are blockified). */
-  :scope:not([text]) { display: inline-flex; }
+     directly in block flow fills its container. Icon-only buttons (no text
+     label — see [data-icon-only] below) stay inline-level, and [inline] forces
+     inline for any button. Inside row-ui/col-ui/grid-ui this is moot (flex/grid
+     items are blockified). */
+  :scope[data-icon-only] { display: inline-flex; }
   :scope[inline] { display: inline-flex; }
 
   /* Trailing icon slot — for forward-affordance carets ("Next →"), distinct
@@ -284,8 +285,13 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
     cursor: not-allowed;
   }
 
-  /* Icon-only (no text) */
-  :scope:not([text]), :scope[text=""] {
+  /* Icon-only / empty — no text label from EITHER the [text] attr or direct
+     child text. The JS render() reflects [data-icon-only] (set only when
+     !text AND no non-whitespace child text), which subsumes the old
+     :not([text]) / [text=""] selectors AND correctly treats
+     `<button-ui>Save</button-ui>` as a labeled (full-width) button rather than
+     collapsing it into a square. */
+  :scope[data-icon-only] {
     --button-px: 0;
     width: var(--button-height);
   }

package/components/button/button.yaml

@@ -112,6 +112,14 @@ slots:
 states:
   - name: idle
     description: Default, ready for interaction.
+  - name: icon-only
+    description: >-
+      No text label — neither the `text` attr nor non-whitespace child text.
+      Reflected by render() as `[data-icon-only]`; the CSS collapses the button
+      to a square icon slot (zero inline padding, width = height) and keeps it
+      inline-level. A button labeled by child text (`<button-ui>Save</button-ui>`)
+      is NOT icon-only and renders at full content width, same as `text=`.
+    attribute: data-icon-only
   - name: disabled
     description: Non-interactive; dimmed.
     attribute: disabled

package/components/card/card.css

@@ -20,7 +20,7 @@
     --card-description-size:  var(--a-caption-size);
 
     /* ── Colors ── */
-    --card-bg:                var(--a-canvas-1);
+    --card-bg:                var(--a-canvas-base);
     --card-bg-padded:         var(--a-canvas-0-scrim);
     --card-fg:                var(--a-fg);
     --card-heading-fg:        var(--a-fg-strong);
@@ -457,13 +457,14 @@
   }
 
   /* ═══════ Nested surface layering ═══════
-     Step background up one canvas level per nesting depth.
+     Step background up the symmetric luminance ramp (base → bright → brighter →
+     brightest) per nesting depth; depths past brightest cap at brightest.
      :scope card-ui has specificity (0,1,1) which beats the
      :where(:scope) initializer (0,0,0) in each inner scope. */
-  :scope card-ui                                     { --card-bg: var(--a-canvas-1); --card-border: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
-  :scope card-ui card-ui                              { --card-bg: var(--a-canvas-2); --a-radius: var(--a-radius-sm); }
-  :scope card-ui card-ui card-ui                       { --card-bg: var(--a-canvas-3); }
-  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--a-canvas-4); }
-  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--a-canvas-5); }
-  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--a-canvas-6); }
+  :scope card-ui                                     { --card-bg: var(--a-canvas-base); --card-border: 1px solid var(--a-border); --a-radius: var(--a-radius-md); }
+  :scope card-ui card-ui                              { --card-bg: var(--a-canvas-bright); --a-radius: var(--a-radius-sm); }
+  :scope card-ui card-ui card-ui                       { --card-bg: var(--a-canvas-brighter); }
+  :scope card-ui card-ui card-ui card-ui                { --card-bg: var(--a-canvas-brightest); }
+  :scope card-ui card-ui card-ui card-ui card-ui         { --card-bg: var(--a-canvas-brightest); }
+  :scope card-ui card-ui card-ui card-ui card-ui card-ui  { --card-bg: var(--a-canvas-brightest); }
 }

package/components/drawer/drawer.css

@@ -30,7 +30,7 @@
   --drawer-easing:      var(--a-easing-out);
 
   /* ── Colors ── */
-  --drawer-bg:          var(--a-canvas-1);
+  --drawer-bg:          var(--a-canvas-dimmer);
   --drawer-border:      var(--a-border-subtle);
   --drawer-divider:     var(--a-border-subtle);
   --drawer-shadow:      var(--a-shadow-lg);

package/components/modal/modal.css

@@ -11,7 +11,7 @@
   :where(:scope) {
     --modal-width:          32rem;
     --modal-radius:         var(--a-radius-lg);
-    --modal-bg:             var(--a-bg-subtle);
+    --modal-bg:             var(--a-canvas-dimmer);
     --modal-border:         var(--a-border-subtle);
     --modal-shadow:         var(--a-shadow-lg);
     --modal-backdrop:       var(--a-scrim-dialog);

package/components/popover/popover.css

@@ -7,7 +7,7 @@
 
     /* ── Colors (default panel chrome — opt out per `:has(>card-ui)` rule
        below or by setting tokens to transparent / 0) ── */
-    --popover-bg:      var(--a-bg-subtle);
+    --popover-bg:      var(--a-canvas-dimmer);
     --popover-border:  var(--a-border-subtle);
     --popover-shadow:  var(--a-shadow-lg);
   }