@adia-ai/web-components 0.8.48 → 0.8.50

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.50] — 2026-08-23
+
+### Added
+- **`stat-ui` KPI tile layout — full-bleed chart band + overlaid delta chip (gh#1835, PR #1920, ADR-0083).** New `[bleed]` (with the existing `[band]`) composition on the chart slot lets the chart reach the card's edges — a right-column bleed alone, a three-edge bottom band together with `band` — with the value/label/change stack overlaying it. New public CSS custom properties: `--stat-change-inset`, `--stat-change-size`, and the six `--stat-change-chip-*` tokens (`bg`, `fg`, `font-size`, `pad-x`, `pad-y`, `radius`). (Entry added at cut time — PR #1920 merged without one.)
+
+### Removed
+- **BREAKING: `[prose]`/`[verse]` deprecated attribute sheets removed (gh#1885, closes gh#1822).** `styles/prose.css` and `styles/verse.css` — deprecated since v0.8.11 in favor of the ancestor `[scale]` register — are deleted outright, along with the `[prose]`/`[verse]` HTML attributes, `<theme-provider scale="prose"|"verse">`'s legacy alias mapping, and the a2ui catalog's deprecated `prose` `DynamicBoolean` prop (`common_types.json`). No deprecation alias — use `scale="content-md"` / `scale="ui-sm"` (byte-identical rendering). Migration guide: `.claude/docs/MIGRATION GUIDE.md` § Shipped in `0.8.50`. Ships in this PATCH cut per Kim ruling of 2026-08-23 PDT, held-items entry dated 2026-08-24 UTC (recorded invariant-7/IDR-0004 deviation).
+
+### Changed
+- **BREAKING: `input-ui`/`search-ui` fill-default sizing posture, `[inline]` hugs (ADR-0077, Steps 1-2, gh#1856).** A form control dropped into a flex toolbar row with no explicit width/flex collapsed to its content/floor width instead of filling the row's remaining space, because `input-ui`'s 20ch legibility floor (gh#781) applied unconditionally on the plain `:scope` — fighting any container that wanted to size it (same root-cause class as gh#1633's select-ui/combobox-ui collapse). `input-ui`'s `:scope` now fills (`width: 100%`) by default; `--input-min-width` moves to `:scope[inline]`, which also flips to inline-level display + `fit-content` per ADR-0037 §2 hug mechanics. `search-ui` gets the same fill-default posture on its own host and forwards its `[inline]` attribute onto its internal `<input-ui>` (light-DOM composition, so `:scope[inline]` can't reach across that boundary) via a hand-rolled `observedAttributes`/`attributeChangedCallback`. `select-ui`/`combobox-ui`/`date-range-picker-ui` remain on the old posture, scheduled as later plan waves (`docs/ops/plan/plan-form-control-sizing.md`). See `.claude/docs/MIGRATION GUIDE.md`.
+
+### Maintenance
+- **`components/` touched in this release window** (38 file(s), e.g. `chart/chart.class.js`) — carried by the entries above.
+- **`core/` touched in this release window** (2 file(s), e.g. `core/element.js`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (8 file(s)) — regenerated from the source changes described above, not independent edits.
+
 ## [0.8.48] — 2026-08-23
 
 ### Added

package/MIGRATION.md

@@ -90,6 +90,10 @@ Version cuts and migration scope:
 
 - **Shipped in `0.8.43` (three 0.8.41-era deprecated components removed — `toggle-group-ui`/`toggle-option-ui`, `progress-row-ui`, `datetime-picker-ui`, gh#1617)** — **BREAKING.** Each shipped its `status: deprecated` soft-deprecation additively in `0.8.41` (its own entry below); all three are now removed outright per the same operator ruling (gh#1562, IDR-0004 deviation). None of the three tags register as custom elements anymore. Migrate: `<toggle-group-ui value>` + `<toggle-option-ui>` children → `<segmented-ui multiple value>` + `<segment-ui>` children (`<toggle-group-ui single>` → plain `<segmented-ui>`, no `[multiple]`); `<progress-row-ui label value meta>` → `<progress-ui label value meta>` (mechanical tag rename); `<datetime-picker-ui>` → `<calendar-picker-ui precision="minute">`. See [§ Shipped in `0.8.43` — three 0.8.41-era deprecated components removed](#shipped-in-0843--three-0841-era-deprecated-components-removed-toggle-group-uitoggle-option-ui-progress-row-ui-datetime-picker-ui-gh1617).
 
+- **Shipped in `0.8.50` (Kim ruling of 2026-08-23 PDT (held-items entry dated 2026-08-24 UTC) — invariant-7/IDR-0004 recorded deviation, ships in a PATCH cut)** — **BREAKING:** the `[prose]`/`[verse]` deprecated attribute sheets (`styles/prose.css`, `styles/verse.css`, deprecated since `0.8.11`) are removed outright, with no deprecation alias — `[prose]`/`[verse]` and `<theme-provider scale="prose"|"verse">` no longer resolve. Use `scale="content-md"` / `scale="ui-sm"` instead (byte-identical rendering). The a2ui catalog's deprecated `prose` `DynamicBoolean` prop is also dropped from `common_types.json`. (gh#1885, closing gh#1822.) See [§ Shipped in `0.8.50` — `[prose]`/`[verse]` sheets removed](#shipped-in-0850--proseverse-sheets-removed-gh1885-gh1822).
+
+- **Shipped in `0.8.50` (`input-ui`/`search-ui` fill-default sizing posture, ADR-0077, gh#1856)** — **BREAKING, no deprecation alias.** A form control dropped into a flex toolbar row with no explicit width/flex used to collapse to its content/floor width instead of filling the row's remaining space (visible as clipped search placeholder text in consumer admin surfaces), because `input-ui`'s 20ch legibility floor (gh#781) applied unconditionally on the plain `:scope`. `<input-ui>`'s `:scope` now fills (`width: 100%`) by default; the old floor (`--input-min-width`) moves to `:scope[inline]`, which also switches to inline-level display + `fit-content` per ADR-0037 §2 hug mechanics. `<search-ui>` gets the same fill-default posture and forwards `[inline]` onto its internal `<input-ui>`. Migration: any consumer relying on the old shrink-wrap default (e.g. an unconstrained `<input-ui>`/`<search-ui>` inline among text, expecting it to hug its content) must add `[inline]` explicitly. `select-ui`/`combobox-ui`/`date-range-picker-ui` are unaffected — same old posture, later plan waves. See [§ Shipped in `0.8.50` — input-ui/search-ui fill-default sizing posture](#shipped-in-0850--input-uisearch-ui-fill-default-sizing-posture-adr-0077-gh1856).
+
 Live demos and per-component docs at [ui-kit.exe.xyz/site/](https://ui-kit.exe.xyz/site/). The `adia-ui-migration` skill (in `.agents/skills/`) automates most of the mechanical sweeps in this guide.
 
 ---
@@ -1887,6 +1891,138 @@ npm run check
 
 ---
 
+## Shipped in `0.8.50` — `[prose]`/`[verse]` sheets removed (gh#1885, gh#1822)
+
+**BREAKING, no deprecation alias.** `styles/prose.css` and `styles/verse.css`
+— deprecated since `0.8.11` in favor of the ancestor `[scale]` register — are
+removed outright (gh#1885, closing gh#1822's open question). The `[prose]`/
+`[verse]` HTML attributes and `<theme-provider scale="verse">`/
+`scale="prose"`'s legacy aliases no longer resolve to anything. All live
+in-repo usage had already migrated to `scale="content-md"`/`scale="ui-sm"`
+in PR #1874; this cut deletes the byte-identical fallback sheets those
+attributes depended on.
+
+### `[prose]` → `scale="content-md"` (`prose` → `content-md`)
+
+`[prose]` was the long-form/reading register — byte-identical to
+`scale="content-md"`.
+
+**Audit:**
+```bash
+git grep -nE '\[prose\]|<[a-z-]+ prose\b|prose="'
+```
+
+**Sweep:**
+```bash
+git grep -lz -E '\bprose\b' -- '*.html' '*.js' | while IFS= read -r -d '' f; do
+  perl -i -pe 's/\bprose(=""|="true")?\b(?!-)/scale="content-md"/g if /<[a-z-]+[^>]*\bprose\b/' "$f"
+done
+# Boolean-attribute rewrites are structural, not string-substitutable in
+# general — review each hit; the sweep above only rewrites the exact
+# `<tag prose>` / `<tag prose="">` shape. A theme-provider scale="prose"
+# call site is a plain value rename instead:
+git grep -lz 'scale="prose"' | while IFS= read -r -d '' f; do
+  perl -i -pe 's/scale="prose"/scale="content-md"/g' "$f"
+done
+```
+
+### `[verse]` → `scale="ui-sm"` (`verse` → `ui-sm`)
+
+`[verse]` was the dense/compact-product-UI register — byte-identical to
+`scale="ui-sm"`.
+
+**Audit:**
+```bash
+git grep -nE '\[verse\]|<[a-z-]+ verse\b|verse="'
+```
+
+**Sweep:**
+```bash
+git grep -lz -E '\bverse\b' -- '*.html' '*.js' | while IFS= read -r -d '' f; do
+  perl -i -pe 's/\bverse(=""|="true")?\b(?!-)/scale="ui-sm"/g if /<[a-z-]+[^>]*\bverse\b/' "$f"
+done
+git grep -lz 'scale="verse"' | while IFS= read -r -d '' f; do
+  perl -i -pe 's/scale="verse"/scale="ui-sm"/g' "$f"
+done
+```
+
+### The a2ui catalog `prose` prop is gone too
+
+`common_types.json`'s deprecated `prose` `DynamicBoolean` prop (mapped onto
+the legacy `[prose]` attribute) is removed from `ComponentCommon`. Generated
+a2ui documents carrying `"prose": true` on any node no longer validate —
+regenerate via the composer, or hand-migrate to an ancestor
+`{"component": "ThemeProvider", "scale": "content-md"}` wrapper.
+
+### Verify
+
+```bash
+git grep -nE '\[prose\]|\[verse\]|prose-ui|verse-ui|prose\.css|verse\.css' \
+  -- ':!CHANGELOG.md' ':!**/CHANGELOG*.md' ':!docs/ops/releases/**' \
+  ':!.claude/ops/**' ':!**/HANDOFF*.md' ':!**/BUILD.md' \
+  ':!.claude/docs/specs/cascade-layer-architecture.md' \
+  ':!.claude/docs/MIGRATION GUIDE.md' ':!packages/web-components/MIGRATION.md'
+node scripts/build/components.mjs --verify
+npm run check
+```
+
+---
+
+## Shipped in `0.8.50` — `input-ui`/`search-ui` fill-default sizing posture (ADR-0077, gh#1856)
+
+**BREAKING, no deprecation alias.** A form control dropped into a flex
+toolbar row with no explicit width/flex collapsed to its content/floor
+width instead of filling the row's remaining space (visible as clipped
+search placeholder text in consumer admin surfaces), because `input-ui`'s
+20ch legibility floor (gh#781) applied unconditionally on the plain
+`:scope`, fighting any container that wanted to size it. Same root-cause
+class as gh#1633's select-ui/combobox-ui collapse.
+
+Implements Steps 1-2 of `docs/ops/plan/plan-form-control-sizing.md` against
+the ratified `docs/ops/adr/adr-0077-form-control-sizing-posture.md` /
+`spec-form-control-sizing-posture`: form controls fill their container by
+default; `[inline]` opts into the old shrink-wrap/hug behavior, where the
+legibility floor now lives instead of on every state.
+
+### What changed
+
+- **`input-ui`** — `:scope` fills (`width: 100%`) by default; `--input-min-width`
+  moves to `:scope[inline]`, which also flips to inline-level display +
+  `fit-content` per ADR-0037 §2 hug mechanics.
+- **`search-ui`** — same fill-default posture on its own host. Forwards its
+  `[inline]` attribute onto the internal `<input-ui>` (light-DOM
+  composition — CSS `:scope[inline]` can't reach across that boundary) via
+  a hand-rolled `observedAttributes`/`attributeChangedCallback`.
+- **Unaffected:** `select-ui`/`combobox-ui`/`date-range-picker-ui` remain on
+  the old posture — scheduled as later `plan-form-control-sizing.md` waves.
+
+### Migration
+
+Any consumer relying on the previous shrink-wrap default — an unconstrained
+`<input-ui>`/`<search-ui>` placed inline among text or in a layout that
+expected it to hug its content rather than stretch — must add `[inline]`
+explicitly:
+
+```html
+<!-- before (0.8.48 and earlier): hugged its content by default -->
+<input-ui placeholder="Search…"></input-ui>
+
+<!-- after: fills its container by default; opt into the old hug -->
+<input-ui inline placeholder="Search…"></input-ui>
+```
+
+A control already given an explicit width, or already inside a container
+that constrains it (a `card-ui`, a fixed-width `field-ui`), needs no change.
+
+### Verify
+
+```bash
+node scripts/build/components.mjs --verify
+npm run check
+```
+
+---
+
 ## Migrating to `@adia-ai/*@v0.8.23` (2026-07-30)
 
 - **Removed: the `--a-font` alias** (pre-ADR-0035 name, DEPRECATED since the 0.8.x line). Any surviving `font-family: var(--a-font)` goes invalid-at-computed-value-time → `inherit` → UA **serif** — the visible symptom is Times-faced labels on an otherwise-correct page.

package/components/chart/chart.class.js

@@ -569,7 +569,14 @@ export class UIChart extends UIElement {
         if (!this.#data.length) return;
         const rw = Math.round(w);
         const rh = Math.round(h);
-        if (rw === this.#lastW && (!this.hasAttribute('resize') || rh === this.#lastH)) return;
+        // gh#1901 — #dims() now trusts a measured clientHeight for EVERY
+        // chart (not only `resize`-attributed ones, see #dims() above), so
+        // a height-only change (e.g. `--stat-chart-band-height` changing,
+        // or the box's own CSS height rule flipping via a media query)
+        // must re-render regardless of the `resize` attribute — gating
+        // height changes behind `resize` froze the viewBox on exactly
+        // that class of change.
+        if (rw === this.#lastW && rh === this.#lastH) return;
         this.#lastW = rw;
         this.#lastH = rh;
         if (this.#resizeRaf) return;
@@ -614,18 +621,42 @@ export class UIChart extends UIElement {
     const n = this.#data.length || 1;
 
     const width = Math.max(containerW, 120);
-    // When element has explicit height (resize handle, CSS height, inline style),
-    // use it. Otherwise derive from aspect ratio. Safe because resize sets
-    // overflow:auto which prevents content from pushing height.
-    const hasExplicitHeight = this.hasAttribute('resize') || this.style.height;
-    // ADR-0074 — an explicit `ratio` PINS the box's own aspect, overriding
-    // whatever height the container/explicit-height path would otherwise
-    // give (REQ-R-002: "regardless of the container's actual aspect
-    // ratio"). Unset falls through to the pre-existing behavior unchanged.
+    // gh#1901 — trust a measured clientHeight above the noise floor
+    // regardless of WHERE the height came from (inline style, the
+    // `resize` handle, or a plain CSS rule like
+    // `stat-ui[band] [slot="chart"] { height: … }`). Checking only
+    // `this.style.height`/`resize` missed the CSS-rule case entirely —
+    // an author can size the box from a stylesheet just as validly as
+    // from an inline style, and #dims() has no way to tell those apart:
+    // `getComputedStyle(this).height` resolves to a used-value px length
+    // for ANY laid-out box (an explicit `height:`, an `aspect-ratio:`
+    // box, OR a plain `align-items:stretch` grid/flex item with no
+    // declared size at all) — there is no computed-style read that
+    // reports "an author declared this" versus "layout resolved this".
+    //
+    // KNOWN TRADE-OFF (gh#1901 review) — because of that, a chart-ui
+    // dropped bare into a generic grid/flex row also gets stretched to
+    // match a taller sibling's track/row, and that stretched height is
+    // trusted the same as a deliberate `height:`/`aspect-ratio:` rule
+    // (see chart.test.js's "ambient grid-stretch height" fixture, which
+    // asserts and documents this rather than hiding it). This is the
+    // same default a plain `<img>`/`<video>` gets in that layout — no
+    // intrinsic size fills whatever the stretched box gives it — and it
+    // is consistent with the intentional stretch-to-bleed already used by
+    // `stat-ui[bleed] [slot="chart"]` (`align-self:stretch; height:auto`,
+    // stat.css), which relies on exactly this same measured-height path.
+    // A narrower heuristic (e.g. gating on a specific computed-style
+    // signal) would have to reject that intentional case too, since
+    // mechanically it is indistinguishable from the accidental one.
+    // Below the 40px floor there's nothing to trust yet (pre-layout/
+    // empty box), so fall back to the aspect-ratio guess; once real
+    // content has rendered once, this stays self-consistent on every
+    // re-measure (a fallback-derived height reproduces the same value
+    // next time).
     const pinnedRatio = CHART_RATIOS[this.ratio];
     let height = pinnedRatio
       ? Math.round(width / pinnedRatio)
-      : hasExplicitHeight && containerH > 40
+      : containerH > 40
         ? containerH
         : Math.round(width / aspect.ratio);
 

package/components/input/input.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Input.json",
   "title": "Input",
-  "description": "Text input field with contenteditable surface. Supports prefix/suffix icons, label, form participation, and a `type=\"number\"` mode that renders [+]/[-] stepper buttons, numeric input filtering, and ARIA spinbutton semantics — no native `<input type=\"number\">` under the hood. Password type uses a native `<input>` (only path that still wraps native, for `-webkit-text-security` disc masking). Has a 20ch minimum width (`--input-min-width`, mirrors the native `<input>` baseline) so a bare, placeholder-only instance stays usable inside a flex row (row-ui) with no explicit sizing — explicit `width`/`flex` or CSS can size the host above the floor; values below the floor remain clamped unless `--input-min-width` is lowered.",
+  "description": "Text input field with contenteditable surface. Supports prefix/suffix icons, label, form participation, and a `type=\"number\"` mode that renders [+]/[-] stepper buttons, numeric input filtering, and ARIA spinbutton semantics — no native `<input type=\"number\">` under the hood. Password type uses a native `<input>` (only path that still wraps native, for `-webkit-text-security` disc masking). Fills its container's available inline width by default (ADR-0077 / spec-form-control-sizing-posture) — in a flex row (row-ui) or grid track it tracks the container all the way down, with no host floor. `[inline]` opts into the old shrink-wrap behavior and is where the 20ch minimum width (`--input-min-width`, mirrors the native `<input>` baseline) survives, guarding a bare, placeholder-only instance from collapsing to near-zero as a hugging flex item.",
   "type": "object",
   "allOf": [
     {
@@ -370,7 +370,7 @@
         "description": "Override line height"
       },
       "--input-min-width": {
-        "description": "Override the minimum-width floor (20ch, mirrors the native `<input>` baseline). Keeps an empty, placeholder-only instance legible when placed directly in a flex row (row-ui) with no explicit width/flex sizing — the placeholder renders via an out-of-flow ::before that contributes no intrinsic width of its own, so without this floor the host collapses to near-zero as a flex item. Explicit sizing (width/flex) can grow the host above the floor but does not bypass it — set to 0 or another lower value to permit a narrower explicit size."
+        "description": "Override the minimum-width floor (20ch, mirrors the native `<input>` baseline), applied only in the `[inline]` hug state (ADR-0077 / spec-form-control-sizing-posture REQ-F-001/REQ-F-002). Keeps an empty, placeholder-only `[inline]` instance legible — the placeholder renders via an out-of-flow ::before that contributes no intrinsic width of its own, so without this floor a hugging instance collapses to near-zero. The default (non-`[inline]`) fill state carries no floor at all — the container owns the width all the way down. Set to 0 or another lower value to permit a narrower `[inline]` instance."
       },
       "--input-padding": {
         "description": "Override base padding (density-scaled)"

package/components/input/input.css

@@ -32,10 +32,14 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     --input-affix-fg:        var(--a-ui-text-placeholder);
     --input-field-gap:       var(--a-space-1);
     --input-label-min-width: 8ch;
-    /* Native-<input> baseline (historically ~20 characters). Floors the
-       host so an empty, placeholder-only instance stays legible as a
-       flex item — see the :scope min-width rule below for the collapse
-       mechanism this guards against. */
+    /* Native-<input> baseline (historically ~20 characters). ADR-0077 /
+       spec-form-control-sizing-posture (REQ-F-001/REQ-F-002) moved this
+       floor from the plain :scope to :scope[inline] — the default
+       (fill) posture carries no host floor at all; the container owns
+       the width all the way down. The floor survives ONLY in the hug
+       state, where it guards an empty, placeholder-only instance from
+       collapsing to near-zero (gh#781/gh#1633). See :scope[inline]
+       below for the rule that now consumes this token. */
     --input-min-width:       20ch;
 
     /* ── Transitions ── */
@@ -63,18 +67,43 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
     /* ── Base ── */
     box-sizing: border-box;
     display: block;
-    /* `display: block` gives no width once this host becomes a flex item
-       (row-ui, or any display:flex parent) — flex items size from
-       content/flex-basis, not display type. The one child that could
-       drive content-based sizing, [slot="text"], is EMPTY when the
-       input has no value; its placeholder renders via an out-of-flow
-       ::before (deliberately, for caret positioning — see the pseudo
-       below) that contributes zero intrinsic width. Without a floor,
-       an empty placeholder-only input-ui collapses to near-zero in any
-       flex context that doesn't otherwise force a width (gh#781).
-       min-width, not width, so explicit width/flex can size the host
-       above the floor; values below the floor remain clamped. Override
-       via --input-min-width (e.g. 0 to opt back out) or size explicitly. */
+    /* ADR-0077 / spec-form-control-sizing-posture REQ-P-001 (fill, the
+       default): `display: block` alone gives no width once this host
+       becomes a flex item (row-ui, or any display:flex parent) — flex
+       items size from content/flex-basis, not display type, and the one
+       child that could drive content-based sizing, [slot="text"], is
+       EMPTY when the input has no value (its placeholder renders via an
+       out-of-flow ::before — deliberately, for caret positioning, see
+       the pseudo below — that contributes zero intrinsic width). So the
+       host declares the fill explicitly with `width: 100%`: in block
+       flow this is a no-op (width:auto already fills — ADR-0037's
+       confirmed full-width default), in flex parents it over-constrains
+       the line and lets the shrink algorithm split real space among
+       fill-state siblings (REQ-P-002), and in grid parents it's
+       redundant-but-harmless against the track's own default stretch.
+       This is a deliberate SCOPE-EXTENT exception: the family contract
+       (REQ-R-001) requires it, the same mechanism field-ui (bug-34) and
+       otp-input-ui (bug-37) already ship. No host floor survives here —
+       the container owns the width all the way down (REQ-F-001); the
+       legibility floor moves to the hug state below. */
+    width: 100%;
+  }
+
+  /* ADR-0077 / spec-form-control-sizing-posture REQ-P-003 (hug, via
+     [inline]): the explicit opt-in for the old shrink-to-content
+     behavior. ADR-0037 §2's display-flip mechanics (block → inline-block)
+     plus `width: fit-content` — fit-content (not the absence of the fill
+     rule) because a grid item is blockified/stretch-aligned by default,
+     so a bare `width: auto` [inline] host would still render at track
+     width. The gh#781/gh#1633 legibility floor moves here from the plain
+     :scope (REQ-F-001/REQ-F-002): it guards an empty, placeholder-only
+     instance from collapsing to near-zero, exactly as it always has —
+     just scoped to the state where the control, not the container, owns
+     its size. Override --input-min-width to 0 to opt a hug instance back
+     into full collapse. */
+  :scope[inline] {
+    display: inline-block;
+    width: fit-content;
     min-width: var(--input-min-width);
   }
 

package/components/input/input.yaml

@@ -8,9 +8,10 @@ version: 1
 description: Text input field with contenteditable surface. Supports prefix/suffix icons, label, form participation, and a
   `type="number"` mode that renders [+]/[-] stepper buttons, numeric input filtering, and ARIA spinbutton semantics — no native
   `<input type="number">` under the hood. Password type uses a native `<input>` (only path that still wraps native, for `-webkit-text-security`
-  disc masking). Has a 20ch minimum width (`--input-min-width`, mirrors the native `<input>` baseline) so a bare,
-  placeholder-only instance stays usable inside a flex row (row-ui) with no explicit sizing — explicit `width`/`flex`
-  or CSS can size the host above the floor; values below the floor remain clamped unless `--input-min-width` is lowered.
+  disc masking). Fills its container's available inline width by default (ADR-0077 / spec-form-control-sizing-posture) —
+  in a flex row (row-ui) or grid track it tracks the container all the way down, with no host floor. `[inline]` opts into
+  the old shrink-wrap behavior and is where the 20ch minimum width (`--input-min-width`, mirrors the native `<input>`
+  baseline) survives, guarding a bare, placeholder-only instance from collapsing to near-zero as a hugging flex item.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -238,12 +239,13 @@ tokens:
     description: Override line height
   --input-min-width:
     description: Override the minimum-width floor (20ch, mirrors the native `<input>`
-      baseline). Keeps an empty, placeholder-only instance legible when placed directly
-      in a flex row (row-ui) with no explicit width/flex sizing — the placeholder renders
-      via an out-of-flow ::before that contributes no intrinsic width of its own, so
-      without this floor the host collapses to near-zero as a flex item. Explicit sizing
-      (width/flex) can grow the host above the floor but does not bypass it — set to 0
-      or another lower value to permit a narrower explicit size.
+      baseline), applied only in the `[inline]` hug state (ADR-0077 / spec-form-control-sizing-posture
+      REQ-F-001/REQ-F-002). Keeps an empty, placeholder-only `[inline]` instance legible —
+      the placeholder renders via an out-of-flow ::before that contributes no intrinsic
+      width of its own, so without this floor a hugging instance collapses to near-zero.
+      The default (non-`[inline]`) fill state carries no floor at all — the container owns
+      the width all the way down. Set to 0 or another lower value to permit a narrower
+      `[inline]` instance.
   --input-padding:
     description: Override base padding (density-scaled)
   --input-placeholder-color:

package/components/search/search.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Search.json",
   "title": "Search",
-  "description": "Search input with magnifying-glass icon, clear button, and debounced search event.",
+  "description": "Search input with magnifying-glass icon, clear button, and debounced search event. Fills its container's available inline width by default (ADR-0077 / spec-form-control-sizing-posture) — in a flex row (row-ui) or grid track it tracks the container all the way down. `[inline]` opts into the old shrink-wrap behavior and forwards onto the internal input-ui so its 20ch legibility floor applies.",
   "type": "object",
   "allOf": [
     {

package/components/search/search.class.js

@@ -55,6 +55,21 @@ export class UISearch extends UIFormElement {
 
   static template = () => null;
 
+  // ADR-0077 / spec-form-control-sizing-posture — `[inline]` is a CSS-only
+  // universal layout attribute (ADR-0037 §2: no yaml, no static properties
+  // entry on THIS host). But search-ui composes input-ui via light-DOM
+  // child stamping (connected()'s innerHTML below), so a plain CSS
+  // `:scope[inline]` on input-ui's own @scope can't reach across that
+  // composition boundary — the host's `[inline]` has to be forwarded onto
+  // the internal <input-ui> in JS. Hand-rolled `observedAttributes` +
+  // `attributeChangedCallback`, same shape as tags-input.class.js's `value`
+  // and drilldown.class.js's `path` — a non-declared-property attribute
+  // that still needs a JS reaction.
+  static get observedAttributes() {
+    const base = super.observedAttributes;
+    return base.includes('inline') ? base : [...base, 'inline'];
+  }
+
   #inputEl = null;
   #suffixEl = null;
   #timer = null;
@@ -77,6 +92,7 @@ export class UISearch extends UIFormElement {
         suffix="x-circle"
         placeholder="${this.placeholder}"
         ${this.disabled ? 'disabled' : ''}
+        ${this.hasAttribute('inline') ? 'inline' : ''}
         ${size ? `size="${size}"` : ''}
       ></input-ui>`;
     }
@@ -106,11 +122,38 @@ export class UISearch extends UIFormElement {
     setAttrIfChanged(this.#inputEl, 'placeholder', this.placeholder);
     if (this.disabled) setAttrIfChanged(this.#inputEl, 'disabled', '');
     else removeAttrIfPresent(this.#inputEl, 'disabled');
+    this.#syncInline();
 
     // Reflect value for CSS (clear button visibility)
     setAttrIfChanged(this, 'value', this.value || '');
   }
 
+  /**
+   * Forward this host's own `[inline]` (a CSS-only universal attribute,
+   * ADR-0037 §2 — never a declared property) onto the internal <input-ui>.
+   * Same idempotent-write shape as the placeholder/disabled sync above
+   * (gh#1755): setAttrIfChanged/removeAttrIfPresent so a byte-identical
+   * SSR-rendered child survives upgrade with zero attribute mutations.
+   */
+  #syncInline() {
+    if (!this.#inputEl) return;
+    if (this.hasAttribute('inline')) setAttrIfChanged(this.#inputEl, 'inline', '');
+    else removeAttrIfPresent(this.#inputEl, 'inline');
+  }
+
+  /**
+   * `[inline]` isn't a declared property (see `observedAttributes` above),
+   * so a post-connect `el.setAttribute('inline', '')` wouldn't otherwise
+   * trigger a re-render — render()'s effect only tracks this element's own
+   * reactive signals. Sync it directly here so a later toggle still
+   * propagates to the already-created child, same guarantee `.disabled =`
+   * gets for free from the declared-property/render-effect path.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === 'inline') this.#syncInline();
+  }
+
   #onInput = () => {
     this.value = this.#inputEl.value;
     this.syncValue(this.value);

package/components/search/search.css

@@ -9,6 +9,34 @@
 
   :scope {
     display: block;
+    /* ADR-0077 / spec-form-control-sizing-posture REQ-P-001/REQ-R-001
+       (search-ui row): fill by default, matching input-ui's own posture
+       (input.css). `display: block` alone gives no width once this host
+       becomes a flex item (row-ui) — flex items size from content, not
+       display type — so the fill is explicit. The inner <input-ui> (see
+       the `input-ui` override rule below) carries the matching
+       `width: 100%` already shipped on its own default :scope, so it
+       fills THIS now-100%-wide
+       host in turn — two widths, one contract. No host floor here: no
+       `--search-min-width` token is minted (REQ-F-003's documented
+       build-time choice) because the inner input's own hug-state floor
+       (input.css's --input-min-width, forwarded via [inline] below)
+       already delivers the family's legibility guarantee. */
+    width: 100%;
+  }
+
+  /* ADR-0077 / spec-form-control-sizing-posture REQ-P-003 (hug, via
+     [inline]): ADR-0037 §2 display-flip mechanics + `width: fit-content`
+     (not the mere absence of the fill rule — a grid item is blockified/
+     stretch-aligned by default, so hug needs the explicit rule to win
+     there too). search.class.js forwards this host's own `[inline]`
+     attribute onto the internal <input-ui> (light-DOM composition — CSS
+     `:scope[inline]` can't reach across that boundary on its own), so the
+     inner input's own :scope[inline] floor (--input-min-width, 20ch)
+     becomes this control's visible hug-state legibility floor. */
+  :scope[inline] {
+    display: inline-block;
+    width: fit-content;
   }
 
   /* Hide clear icon when empty */

package/components/search/search.yaml

@@ -7,7 +7,10 @@ status: stable
 component: Search
 category: input
 version: 1
-description: Search input with magnifying-glass icon, clear button, and debounced search event.
+description: Search input with magnifying-glass icon, clear button, and debounced search event. Fills its
+  container's available inline width by default (ADR-0077 / spec-form-control-sizing-posture) — in a flex row
+  (row-ui) or grid track it tracks the container all the way down. `[inline]` opts into the old shrink-wrap
+  behavior and forwards onto the internal input-ui so its 20ch legibility floor applies.
 props:
   name:
     description: Form field name

package/components/select/select.class.js

@@ -755,7 +755,10 @@ export class UISelect extends UIFormElement {
     if (!opt) return '';
     if (opt.mark) return `<adia-mark-ui data-select-mark size="sm"></adia-mark-ui>`;
     if (opt.avatar) return `<img data-option-avatar src="${escapeHTML(opt.avatar)}" alt="" />`;
-    if (opt.icon) return `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>`;
+    // gh#1857 — data-select-icon mirrors data-select-mark: a marker the
+    // trigger/option-row icon-sizing rule (select.css) keys off, so this
+    // stamped leading icon renders at the same 1.25rem diameter as the mark.
+    if (opt.icon) return `<icon-ui data-select-icon name="${escapeHTML(opt.icon)}"></icon-ui>`;
     return '';
   }
 

package/components/select/select.css

@@ -622,3 +622,16 @@ select-ui adia-mark-ui[data-select-leading][size],
 select-ui adia-mark-ui[data-select-mark][size] {
   --adia-mark-size: 1.25rem;
 }
+
+/* gh#1857 — stamped leading icons match the mark's 1.25rem diameter above
+   (visual parity between the two leading-visual kinds). The trigger's
+   icon-ui already carries [data-select-leading] (shared with mark/avatar,
+   select.class.js #syncLeading()); the option-row icon-ui carries the
+   parallel [data-select-icon] marker (#optionLeadHTML()). Both selectors
+   add the [role="option"] / tag qualifiers needed to strictly outspecify
+   the generic `select-ui [role="option"] icon-ui` (--a-ui-size) default
+   above without relying on source order. */
+select-ui icon-ui[data-select-leading],
+select-ui [role="option"] icon-ui[data-select-icon] {
+  --a-icon-size: 1.25rem;
+}

package/components/stat/stat.a2ui.json

@@ -14,12 +14,12 @@
   ],
   "properties": {
     "band": {
-      "description": "Chart-band KPI layout. With a `slot=\"chart\"` child, label / value / change stack full width top to bottom and the chart forms a short full-width band between the value and the change row (the Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as the base layout does. No effect without a chart slot.",
+      "description": "Chart-band KPI layout. With a `slot=\"chart\"` child, label / value / change stack full width top to bottom and the chart forms a short full-width band between the value and the change row (the Gmail/Vercel/shadcn stat-card shape). Composes with `icon` exactly as the base layout does. Set together with `bleed` (`band bleed`) for the KPI tile: the band bleeds to the card's inline-start, inline-end, and block-end edges, and the `change` delta overlays it as a chip instead of stacking below it (ADR-0083) — the tile's `stat-ui` must be the card's last content (no trailing footer/section). No effect without a chart slot.",
       "type": "boolean",
       "default": false
     },
     "bleed": {
-      "description": "Horizontal-bleed KPI layout. With a `slot=\"chart\"` child, the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). No effect without a chart slot.",
+      "description": "The chart reaches the card's edges — which edges depends on `band`: a column bleeding top/right/bottom without it, a three-edge (inline-start, inline-end, block-end) bottom band with it. With `slot=\"chart\"` alone (no `band`), the value / label / change stack on the left while the chart fills the right column at full height and bleeds to the card's top / right / bottom edges (the horizontal counterpart to a chart in a card `<section bleed>`). Set together with `band` for the full-bleed KPI tile — see `band`. No effect without a chart slot.",
       "type": "boolean",
       "default": false
     },
@@ -76,6 +76,11 @@
         "description": "Basic Stat 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\": \"Stat\",\n    \"label\": \"Example Stat\",\n    \"value\": \"\"\n  }\n]",
         "name": "basic-stat"
+      },
+      {
+        "description": "KPI tile — band bleed with an overlaid delta chip (ADR-0083)",
+        "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\": \"Stat\",\n    \"band\": true,\n    \"bleed\": true,\n    \"label\": \"Sessions\",\n    \"value\": \"84,232\",\n    \"change\": \"+57%\",\n    \"trend\": \"up\",\n    \"children\": [\n      \"chart\"\n    ]\n  },\n  {\n    \"id\": \"chart\",\n    \"component\": \"Chart\",\n    \"slot\": \"chart\",\n    \"type\": \"area\",\n    \"x\": \"d\",\n    \"y\": \"v\",\n    \"noGrid\": true,\n    \"noValues\": true,\n    \"data\": [\n      { \"d\": \"Mon\", \"v\": 12 },\n      { \"d\": \"Tue\", \"v\": 18 },\n      { \"d\": \"Wed\", \"v\": 15 },\n      { \"d\": \"Thu\", \"v\": 27 },\n      { \"d\": \"Fri\", \"v\": 22 },\n      { \"d\": \"Sat\", \"v\": 31 },\n      { \"d\": \"Sun\", \"v\": 29 }\n    ]\n  }\n]",
+        "name": "tile"
       }
     ],
     "keywords": [
@@ -96,7 +101,8 @@
       "telemetry",
       "observability",
       "performance",
-      "scoreboard"
+      "scoreboard",
+      "tile"
     ],
     "name": "UIStat",
     "parts": {},
@@ -236,6 +242,27 @@
     },
     "tag": "stat-ui",
     "tokens": {
+      "--stat-change-chip-bg": {
+        "description": "Background of the `band bleed` tile's change chip. Falls back to `chart-ui`'s `--chart-chip-bg`, so an ancestor override re-themes chart axis chips and this delta chip together."
+      },
+      "--stat-change-chip-fg": {
+        "description": "Text color of the `band bleed` tile's change chip when no canonical `trend` is set (a set `trend` keeps painting via `--stat-up-fg` / `--stat-down-fg`). Falls back to `chart-ui`'s `--chart-chip-fg`."
+      },
+      "--stat-change-chip-font-size": {
+        "description": "Font size of the `band bleed` tile's change chip. Falls back to `chart-ui`'s `--chart-chip-font-size`."
+      },
+      "--stat-change-chip-pad-x": {
+        "description": "Inline padding of the `band bleed` tile's change chip. Falls back to `chart-ui`'s `--chart-chip-pad-x`."
+      },
+      "--stat-change-chip-pad-y": {
+        "description": "Block padding of the `band bleed` tile's change chip. Falls back to `chart-ui`'s `--chart-chip-pad-y`."
+      },
+      "--stat-change-chip-radius": {
+        "description": "Corner radius of the `band bleed` tile's change chip. Falls back to `chart-ui`'s `--chart-chip-radius`."
+      },
+      "--stat-change-inset": {
+        "description": "Clearance of the `band bleed` tile's change chip from the chart band's edges. Aliases the same ladder rung as `chart-ui`'s `--chart-chrome-inset`."
+      },
       "--stat-change-size": {
         "description": "Font size for the change badge"
       },