@adia-ai/web-components 0.6.50 → 0.7.1

package/components/breadcrumb/breadcrumb.css

@@ -25,12 +25,15 @@
 
   :scope {
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     gap: var(--breadcrumb-gap, var(--breadcrumb-gap-default));
     font-size: var(--breadcrumb-font-size, var(--breadcrumb-font-size-default));
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   /* Separator — standalone span, never inside <a> */
   [data-sep] {
     color: var(--breadcrumb-separator-fg, var(--breadcrumb-separator-fg-default));

package/components/button/button.a2ui.json

@@ -131,6 +131,9 @@
       "Link"
     ],
     "slots": {
+      "icon-trailing": {
+        "description": "Trailing icon, after the label. Stamped from the `icon-trailing` prop, or slot a custom `<icon-ui slot=\"icon-trailing\">` directly (the consumer's element wins over the prop-stamped one). Sized to --content-height."
+      },
       "leading": {
         "description": "Icon container (start), sized to --content-height"
       },

package/components/button/button.css

@@ -72,15 +72,19 @@ button-ui[color="danger"]:not([disabled]):hover {
 
     /* ── Trailing slot ── */
     --button-trailing-font-size-default:  var(--a-ui-sm);
-    --button-trailing-fg-default:         var(--a-fg-muted);
-    --button-trailing-border-default:     var(--a-border-subtle);
+    /* kbd-pill tracks the button's OWN text color (currentColor) so it reads
+       on any variant fill — on a primary button the fixed --a-fg-muted gray
+       was nearly invisible against the white label. Border is a translucent
+       slice of the same color so the pill outline adapts too. */
+    --button-trailing-fg-default:         currentColor;
+    --button-trailing-border-default:     color-mix(in oklab, currentColor 28%, transparent);
     --button-trailing-radius-default:     var(--a-radius-sm);
     --button-trailing-px-default:         var(--a-space-0-5);
   }
 
   :scope {
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--button-gap, var(--button-gap-default));
@@ -113,6 +117,13 @@ button-ui[color="danger"]:not([disabled]):hover {
     min-width: 0;
   }
 
+  /* 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; }
+  :scope[inline] { display: inline-flex; }
+
   /* Trailing icon slot — for forward-affordance carets ("Next →"), distinct
      from `[slot="trailing"]` which is styled as a kbd-pill for shortcut
      indicators. Auto-stamped when `[icon-trailing]` is set. */

package/components/button/button.yaml

@@ -103,6 +103,11 @@ slots:
     description: Icon container (start), sized to --content-height
   trailing:
     description: Icon container (end), sized to --content-height
+  icon-trailing:
+    description: >-
+      Trailing icon, after the label. Stamped from the `icon-trailing` prop, or
+      slot a custom `<icon-ui slot="icon-trailing">` directly (the consumer's
+      element wins over the prop-stamped one). Sized to --content-height.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/calendar-grid/calendar-grid.css

@@ -31,7 +31,7 @@
 
     /* Nav buttons (prev/next) — secondary chrome at one notch below the
        control height (mirrors select's `calc(height - gap)` idiom); icon
-       is a directional chevron sized from the universal --a-caret-size. */
+       is a directional caret sized from the universal --a-caret-size. */
     --calendar-grid-nav-size-default:           calc(var(--a-size) - var(--a-space-2));
     --calendar-grid-nav-radius-default:         var(--a-radius-sm);
     --calendar-grid-nav-bg-default:             transparent;

package/components/calendar-picker/calendar-picker.css

@@ -16,7 +16,10 @@
     --calendar-picker-trigger-radius-default:         var(--a-radius);
     --calendar-picker-trigger-bg-default:             var(--a-ui-bg);
     --calendar-picker-trigger-bg-hover-default:       var(--a-ui-bg-hover);
-    --calendar-picker-trigger-fg-default:             var(--a-ui-text-subtle);
+    /* Committed value reads at full text strength (matches input-ui / select-ui
+       value color); the placeholder state drops to -placeholder below via the
+       :not([value]) override. Was -subtle, which muted the committed date. (bug-15/16) */
+    --calendar-picker-trigger-fg-default:             var(--a-ui-text);
     --calendar-picker-trigger-border-default:         var(--a-ui-border);
     --calendar-picker-trigger-border-hover-default:   var(--a-ui-border-hover);
     --calendar-picker-trigger-focus-ring-default:     var(--a-focus-ring);
@@ -45,7 +48,7 @@
 
     /* Nav buttons (prev/next) — secondary chrome at one notch below the
        control height (mirrors select's `calc(height - gap)` idiom); icon
-       is a directional chevron sized from the universal --a-caret-size. */
+       is a directional caret sized from the universal --a-caret-size. */
     --calendar-picker-nav-size-default:               calc(var(--a-size) - var(--a-space-2));
     --calendar-picker-nav-radius-default:             var(--a-radius-sm);
     --calendar-picker-nav-bg-default:                 transparent;

package/components/chart/chart.a2ui.json

@@ -38,18 +38,6 @@
       ],
       "default": "bar"
     },
-    "aspect": {
-      "description": "DEPRECATED (OD-CHART-02). Parents should size the chart directly (width/height on the enclosing card or container). Still honored for back-compat; emits a one-shot console.warn per instance when set.",
-      "type": "string",
-      "enum": [
-        "std",
-        "wide",
-        "square",
-        "tall"
-      ],
-      "default": "std",
-      "deprecated": true
-    },
     "color": {
       "description": "Color scheme",
       "type": "string",
@@ -81,12 +69,6 @@
       ],
       "default": "abbr"
     },
-    "heading": {
-      "description": "DEPRECATED (OD-CHART-02). Place chart titles in an enclosing card-ui's `<header><span slot=\"heading\">...</span></header>` instead. Still honored for back-compat; emits a one-shot console.warn per instance when set. Used as the chart's `aria-label` when no explicit label is provided.",
-      "type": "string",
-      "default": "",
-      "deprecated": true
-    },
     "hideAverage": {
       "description": "When true, suppress the overlaid average line",
       "type": "boolean",

package/components/chart/chart.class.js

@@ -12,14 +12,13 @@
  */
 
 /**
- * <chart-ui type="bar" x="month" y="revenue" heading="Monthly Revenue"></chart-ui>
+ * <chart-ui type="bar" x="month" y="revenue"></chart-ui>
  *
  * Declarative chart component supporting bar, line, pie, donut, radar,
  * sparkline, stacked-bar, grouped-bar, and multi-line chart types.
  *
  * Attributes:
  *   type         — chart type (default: 'bar')
- *   heading      — chart heading text
  *   x            — key for X-axis data
  *   y            — key(s) for Y-axis, comma-separated for multi-series
  *   hide-average — suppress the overlaid average line on bar/line (default: false — line shown)
@@ -202,19 +201,16 @@ function topRoundedBarPath(x, y, w, h, r = 0) {
 
 /* ── Aspect ratios ─────────────────────────────────────────────── */
 
-const ASPECTS = {
-  std:    { ratio: 4 / 3 },   // default — balanced dataviz proportion
-  wide:   { ratio: 16 / 9 },  // landscape / video (sparkline, timeline)
-  square: { ratio: 1 },       // pie / donut / radar
-  tall:   { ratio: 3 / 4 },   // vertical column
-};
+// Implicit aspect ratio — a chart derives its height from width ÷ this ratio when
+// no explicit height is set. The per-chart [aspect] attribute (std/wide/square/tall)
+// was retired (OD-CHART-02); parents size charts directly now.
+const ASPECTS = { std: { ratio: 4 / 3 } };
 
 /* ── Component ──────────────────────────────────────────────────── */
 
 export class UIChart extends UIElement {
   static properties = {
     type:        { type: String,  default: 'bar',    reflect: true },
-    heading:     { type: String,  default: '',       reflect: true },
     x:           { type: String,  default: '',       reflect: true },
     y:           { type: String,  default: '',       reflect: true },
     hideAverage: { type: Boolean, default: false,    reflect: true, attribute: 'hide-average' },
@@ -223,7 +219,6 @@ export class UIChart extends UIElement {
     hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
     radius:      { type: Number,  default: null,     reflect: true },
     smooth:      { type: Number,  default: 0.4,      reflect: true },
-    aspect:      { type: String,  default: 'std',    reflect: true },
     size:        { type: String,  default: '',       reflect: true },
     format:      { type: String,  default: 'abbr',   reflect: true },
     loading:     { type: Boolean, default: false,    reflect: true },
@@ -304,7 +299,7 @@ export class UIChart extends UIElement {
 
   connected() {
     if (!this.hasAttribute('role'))       this.setAttribute('role', 'img');
-    if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', this.heading || `${this.type} chart`);
+    if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', `${this.type} chart`);
 
     /* Hydrate from inline `data="[…]"` HTML attribute. The canonical
        entry point is the `.data` property (set programmatically), but
@@ -332,9 +327,7 @@ export class UIChart extends UIElement {
        move a virtual focus across datums in DOM order, Enter/Space fires
        chart-select, Escape clears focus. Per-datum focus dispatches the
        same chart-hover event the pointer path uses, so tooltip-ui[for]
-       tracks keyboard focus transparently.
-       Deprecation warnings for `aspect=` and `heading=` also fire here
-       per OD-CHART-02 — one-shot per instance to keep the console clean. */
+       tracks keyboard focus transparently. */
     if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '0');
     this.addEventListener('keydown', this.#onKeydown);
     this.addEventListener('focus',   this.#onFocus);
@@ -347,7 +340,6 @@ export class UIChart extends UIElement {
     this.addEventListener('pointerleave', this.#onPointerLeave);
     this.addEventListener('pointerdown',  this.#onPointerDown);
     this.addEventListener('click',        this.#onClick);
-    this.#warnDeprecatedAttrs();
 
     this.#resizeObs = new ResizeObserver((entries) => {
       const { inlineSize: w, blockSize: h } = entries[0].contentBoxSize[0];
@@ -394,7 +386,7 @@ export class UIChart extends UIElement {
   #dims() {
     const containerW = this.clientWidth || 300;
     const containerH = this.clientHeight || 0;
-    const aspect = ASPECTS[this.aspect] || ASPECTS.std;
+    const aspect = ASPECTS.std;
     const n = this.#data.length || 1;
 
     const width = Math.max(containerW, 120);
@@ -470,13 +462,6 @@ export class UIChart extends UIElement {
 
     this.#injectSeriesColors();
 
-    if (this.heading) {
-      const headingEl = document.createElement('div');
-      headingEl.setAttribute('data-chart-heading', '');
-      headingEl.textContent = this.heading;
-      this.appendChild(headingEl);
-    }
-
     const svgWrap = document.createElement('div');
     if (this.type === 'sparkline') svgWrap.setAttribute('data-sparkline', '');
     this.appendChild(svgWrap);
@@ -609,33 +594,6 @@ export class UIChart extends UIElement {
     return !!key && this.#hiddenSeriesKeys.has(key);
   }
 
-  /* ── Deprecation warnings (OD-CHART-02) ─────────────────────────
-     `aspect=` and `heading=` were part of the pre-composition model —
-     `aspect` is stale because parents now size the chart; `heading`
-     because card headers are the semantic location for chart titles.
-     Warn once per instance so the console stays readable. Attrs still
-     honored; removal planned for the next major. */
-  #deprecationWarned = false;
-  #warnDeprecatedAttrs() {
-    if (this.#deprecationWarned) return;
-    if (this.aspect && this.aspect !== 'std') {
-      console.warn(
-        `[chart-ui] aspect="${this.aspect}" is deprecated. ` +
-        `Parents should size the chart directly (width/height on the card ` +
-        `or container). The attribute will be removed in a future major.`
-      );
-      this.#deprecationWarned = true;
-    }
-    if (this.heading) {
-      console.warn(
-        `[chart-ui] heading="${this.heading}" is deprecated. ` +
-        `Place the title in an enclosing card-ui <header><span slot="heading"> ` +
-        `instead. The attribute will be removed in a future major.`
-      );
-      this.#deprecationWarned = true;
-    }
-  }
-
   /* ── Number formatting (OD-CHART-03) ────────────────────────────
      `format` attribute selects how datum values are displayed on axis
      labels, bar/line value overlays, donut centers, etc. Falls back to

package/components/chart/chart.css

@@ -42,10 +42,6 @@
     --chart-segments-gap-default:   2px;
     --chart-pie-gap-default:        1.25px;
 
-    /* Heading */
-    --chart-heading-size-default:     var(--a-ui-size);
-    --chart-heading-weight-default:   var(--a-weight-medium);
-
     /* Transitions */
     --chart-duration-default:       var(--a-duration-fast);
     --chart-easing-default:         var(--a-easing);
@@ -106,7 +102,6 @@
   /* Title + legend are fixed-height siblings; SVG gets the remaining
      vertical budget. min-height:0 lets the SVG wrapper shrink to fit
      inside the max-height envelope instead of pushing the legend out. */
-  [data-chart-heading] { flex: 0 0 auto; }
   [data-legend]      { flex: 0 0 auto; }
 
   /* Empty-state slot — author places <empty-state-ui slot="empty"> inside
@@ -121,7 +116,7 @@
     min-height: 0;
   }
 
-  :scope > div:not([data-chart-heading]):not([data-legend]) {
+  :scope > div:not([data-legend]) {
     flex: 1 1 auto;
     min-height: 0;
   }
@@ -150,15 +145,6 @@
     overflow: visible;
   }
 
-  /* ── Heading ── */
-
-  [data-chart-heading] {
-    font-size: var(--chart-heading-size, var(--chart-heading-size-default));
-    font-weight: var(--chart-heading-weight, var(--chart-heading-weight-default));
-    color: var(--chart-fg, var(--chart-fg-default));
-    margin-bottom: var(--chart-space-md, var(--chart-space-md-default));
-  }
-
   /* ── Grid lines ── */
 
   [data-grid] {

package/components/chart/chart.d.ts

@@ -20,16 +20,12 @@ export type ChartLegendUpdateEvent = CustomEvent<unknown>;
 export class UIChart extends UIElement {
   /** Chart type. All 18 enum values have dedicated render paths in chart.js. */
   type: 'bar' | 'line' | 'pie' | 'donut' | 'radar' | 'sparkline' | 'segments' | 'area' | 'scatter' | 'radial-bar' | 'gauge' | 'stacked-bar' | 'grouped-bar' | 'multi-line' | 'funnel' | 'treemap' | 'sankey' | 'composed';
-  /** DEPRECATED (OD-CHART-02). Parents should size the chart directly (width/height on the enclosing card or container). Still honored for back-compat; emits a one-shot console.warn per instance when set. */
-  aspect: 'std' | 'wide' | 'square' | 'tall';
   /** Color scheme */
   color: 'accent' | 'success' | 'warning' | 'danger' | 'info';
   /** JS property (set programmatically — `el.data = [...]`). An array of plain objects; each object's keys are named by the `x` and `y` attributes — e.g. `<chart-ui x="month" y="revenue">` consumes `[{month:'Jan', revenue:3200}, {month:'Feb', revenue:4100}]`. The Chart.js `{labels, datasets}` envelope is NOT chart-ui's API — passing it (or any non-array value) renders an empty chart. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect. Custom accessor on the element class, not a reflected attribute. */
   data: unknown[];
   /** Number-format mode applied to axis labels + value overlays + donut total + gauge value + treemap value + funnel value + internal tooltip. `abbr` is the legacy 1.2K / 3M format; `decimal` fixes 2 decimals; `currency` prefixes via `--chart-currency-prefix` token (default "$"); `percent` multiplies × 100 and adds a % suffix. */
   format: 'abbr' | 'decimal' | 'currency' | 'percent';
-  /** DEPRECATED (OD-CHART-02). Place chart titles in an enclosing card-ui's `<header><span slot="heading">...</span></header>` instead. Still honored for back-compat; emits a one-shot console.warn per instance when set. Used as the chart's `aria-label` when no explicit label is provided. */
-  heading: string;
   /** When true, suppress the overlaid average line */
   hideAverage: boolean;
   /** Hide gridlines */

package/components/chart/chart.yaml

@@ -36,19 +36,6 @@ props:
       - treemap
       - sankey
       - composed
-  aspect:
-    description: >-
-      DEPRECATED (OD-CHART-02). Parents should size the chart directly
-      (width/height on the enclosing card or container). Still honored for
-      back-compat; emits a one-shot console.warn per instance when set.
-    type: string
-    default: std
-    enum:
-      - std
-      - wide
-      - square
-      - tall
-    deprecated: true
   format:
     description: >-
       Number-format mode applied to axis labels + value overlays + donut
@@ -115,17 +102,6 @@ props:
     type: boolean
     default: false
     reflect: true
-  heading:
-    description: >-
-      DEPRECATED (OD-CHART-02). Place chart titles in an enclosing
-      card-ui's `<header><span slot="heading">...</span></header>`
-      instead. Still honored for back-compat; emits a one-shot
-      console.warn per instance when set. Used as the chart's
-      `aria-label` when no explicit label is provided.
-    type: string
-    default: ""
-    reflect: true
-    deprecated: true
   x:
     description: Data key for x-axis (category) values
     type: string

package/components/color-input/color-input.css

@@ -11,10 +11,13 @@
   :scope {
     --color-input-swatch-size: 1em;
 
-    display: inline-flex;
+    display: flex;
     vertical-align: middle;
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   :scope[disabled] {
     opacity: 0.55;
     pointer-events: none;

package/components/combobox/combobox.class.js

@@ -481,6 +481,10 @@ export class UICombobox extends UIFormElement {
     if (this.#suppressInput) return;
     const text = this.#inputEl.textContent || '';
     this.#query = text.trim();
+    // Hide the placeholder pseudo as soon as anything is typed — it's keyed
+    // off [data-empty], which the programmatic text-setter toggles but the
+    // typing path did not, so the placeholder bled THROUGH the typed text.
+    this.#inputEl.toggleAttribute('data-empty', !text);
 
     if (!this.open) {
       this.open = true;
@@ -489,6 +493,13 @@ export class UICombobox extends UIFormElement {
 
     this.#renderOptions();
 
+    // WAI-APG list-autocomplete: pre-activate the first match while typing so
+    // pressing Enter commits it (and the user sees which option Enter will
+    // pick). #renderOptions() reset the active index; only activate when a
+    // query is present and there is something to match.
+    const opts = this.#renderedOptions();
+    if (this.#query && opts.length) this.#setActiveIndex(0);
+
     this.dispatchEvent(new CustomEvent('input', {
       bubbles: true,
       detail: { value: text, query: this.#query.toLowerCase() },

package/components/combobox/combobox.css

@@ -166,6 +166,14 @@
   }
 }
 
+/* Higher-specificity guard: the editable [data-input] picked up 8px block
+   padding from an outer source that out-cascaded the @scope rule above, pinning
+   the field to ~36px at every [size]. This wins the cascade so the field height
+   tracks --a-size (sm/md/lg) like input-ui. */
+combobox-ui [data-field] [data-input] {
+  padding-block: 0;
+}
+
 /* ── Top-layer popover: cannot inherit @scope component tokens ── */
 
 combobox-ui [data-listbox] {

package/components/date-range-picker/date-range-picker.class.js

@@ -435,7 +435,11 @@ export class UIDateRangePicker extends UIFormElement {
     // Mirror reactive props onto the part nodes — runs in the element's
     // effect every time a tracked prop changes.
     if (!this.#triggerRef) return;
-    this.#triggerRef.setAttribute('text', this.#displayText());
+    const display = this.#displayText();
+    this.#triggerRef.setAttribute('text', display);
+    // Filled vs placeholder color (matches input/select) — #displayText()
+    // returns the placeholder verbatim only when no range is committed.
+    this.#triggerRef.toggleAttribute('data-has-value', display !== this.placeholder);
     this.#triggerRef.toggleAttribute('disabled', this.disabled);
     this.#triggerRef.setAttribute('aria-haspopup', 'dialog');
     this.#triggerRef.setAttribute('aria-expanded', this.open ? 'true' : 'false');

package/components/date-range-picker/date-range-picker.css

@@ -48,7 +48,9 @@
     --date-range-picker-trigger-radius-default:    var(--a-radius);
     --date-range-picker-trigger-bg-default:        var(--a-ui-bg);
     --date-range-picker-trigger-bg-hover-default:  var(--a-ui-bg-hover);
-    --date-range-picker-trigger-fg-default:        var(--a-ui-text-subtle);
+    /* Placeholder state by default; a committed value bumps to --a-ui-text
+       via [data-has-value] (matches input-ui / select-ui value vs placeholder). */
+    --date-range-picker-trigger-fg-default:        var(--a-ui-text-placeholder);
     --date-range-picker-trigger-border-default:    var(--a-ui-border);
     --date-range-picker-trigger-border-hover-default: var(--a-ui-border-hover);
     --date-range-picker-trigger-focus-ring-default:   var(--a-focus-ring);
@@ -72,11 +74,14 @@
   :scope {
     box-sizing: border-box;
     position: relative;
-    display: inline-block;
+    display: block;
     color: var(--date-range-picker-fg, var(--date-range-picker-fg-default));
     font-size: var(--a-ui-size);
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-block; }
+
   /* ── Trigger ──
      Canonical trigger surface matching <select-ui> + <calendar-picker-ui>:
      flex row, --a-size min-height, --a-ui-px padding, --a-radius corner,
@@ -108,6 +113,11 @@
     border-color: var(--date-range-picker-trigger-border-hover, var(--date-range-picker-trigger-border-hover-default));
     background: var(--date-range-picker-trigger-bg-hover, var(--date-range-picker-trigger-bg-hover-default));
   }
+  /* Committed value reads as filled content (matches input-ui/select-ui),
+     not as the muted placeholder. Marked by the class when a range is set. */
+  :scope [slot="trigger"][data-has-value] {
+    color: var(--a-ui-text);
+  }
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
     box-shadow: var(--date-range-picker-trigger-focus-ring, var(--date-range-picker-trigger-focus-ring-default));

package/components/datetime-picker/datetime-picker.class.js

@@ -381,6 +381,9 @@ export class UIDatetimePicker extends UIFormElement {
 
     // Trigger reflection — text, disabled, ARIA expansion.
     this.#triggerRef.setAttribute('text', this.#displayText());
+    // Mark a committed value so the trigger brightens to --a-ui-text (the
+    // empty placeholder stays muted) — mirrors date-range-picker.
+    this.#triggerRef.toggleAttribute('data-has-value', this.#displayText() !== this.placeholder);
     this.#triggerRef.toggleAttribute('disabled', this.disabled);
     this.#triggerRef.setAttribute('aria-haspopup', 'dialog');
     this.#triggerRef.setAttribute('aria-expanded', this.open ? 'true' : 'false');

package/components/datetime-picker/datetime-picker.css

@@ -48,15 +48,29 @@
   :scope {
     box-sizing: border-box;
     position: relative;
-    display: inline-block;
+    display: block;
     color: var(--datetime-picker-fg, var(--datetime-picker-fg-default));
     font-size: var(--a-ui-size);
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-block; }
+
   /* Default trigger sizing — composes button-ui's surface; just
-     stretches the min-width so "Jan 1, 2026 14:30" fits. */
+     stretches the min-width so "Jan 1, 2026 14:30" fits. Normalize to the
+     picker-family field shape (mirrors date-range-picker): value text
+     left-aligned with the caret pushed to the trailing edge, not centered
+     like a default button. */
   :scope [slot="trigger"] {
     min-width: var(--datetime-picker-trigger-min-width, var(--datetime-picker-trigger-min-width-default));
+    justify-content: space-between;
+    line-height: 1;
+  }
+  /* A committed value bumps to --a-ui-text (bright), matching input-ui /
+     select-ui / time-picker value color; the empty placeholder keeps
+     button-ui's muted outline fg. */
+  :scope [slot="trigger"][data-has-value] {
+    color: var(--a-ui-text);
   }
 
   /* States */

package/components/empty-state/empty-state.css

@@ -12,8 +12,12 @@
     --empty-state-heading-fg-default:     var(--a-fg);
     --empty-state-desc-fg-default:        var(--a-fg-muted);
 
-    /* ── Typography ── */
-    --empty-state-heading-size-default:   var(--a-ui-lg);
+    /* ── Typography ──
+       Heading uses the dedicated heading ramp (16px), NOT --a-ui-lg (15px,
+       the top of the control-label ramp) — at 15px the heading was only 1.07×
+       the 14px description, a hierarchy too weak to read as a title. 17px
+       lifts the ratio to ~1.21 (heading-medium weight adds further contrast). */
+    --empty-state-heading-size-default:   var(--a-heading-md);
     --empty-state-heading-weight-default: var(--a-weight-medium);
     --empty-state-desc-size-default:      var(--a-ui-size);
   }
@@ -91,8 +95,11 @@
   }
   :scope[minimal] [slot="heading"] {
     font-size: inherit;
-    font-weight: var(--a-weight-normal);
-    color: inherit;
+    /* Keep the heading bolder + non-muted so it stays distinct from the
+       muted inline description on the same baseline (otherwise '[icon]
+       heading description' reads as one run-on phrase). */
+    font-weight: var(--empty-state-heading-weight, var(--empty-state-heading-weight-default));
+    color: var(--empty-state-heading-fg, var(--empty-state-heading-fg-default));
     line-height: inherit;
   }
   :scope[minimal] [slot="description"] {

package/components/field/field.css

@@ -36,6 +36,13 @@
     align-items: center;
   }
 
+  /* A stacked field is a full-width form row — fill the container (form column,
+     grid cell, or flex parent) rather than sizing to content. Inline fields stay
+     intrinsic so compact filter bars keep their side-by-side layout. (bug-34) */
+  :scope:not([inline]) {
+    width: 100%;
+  }
+
   /* Gate `row-gap` on actual message presence — otherwise the grid
      reserves --field-gap (~8px) between the control row and a
      zero-content message row, making field-ui[inline] visibly taller
@@ -125,11 +132,15 @@
       "label   control"
       ".       message";
   }
+  /* Trailing sits at the control's trailing edge (after the input), not between
+     label and control — inline trailing is a control affordance (⌘K hint,
+     result count), so it reads at the row's end, mirroring input-ui's own
+     trailing slot. (bug-18) */
   :scope[inline]:has([slot="trailing"]):not(:has([slot="action"])) {
-    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) auto minmax(0, 1fr);
+    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto;
     grid-template-areas:
-      "label   trailing control"
-      ".       .        message";
+      "label   control trailing"
+      ".       message message";
   }
   :scope[inline]:not(:has([slot="trailing"])):has([slot="action"]) {
     grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto;
@@ -138,10 +149,10 @@
       ".       message message";
   }
   :scope[inline]:has([slot="trailing"]):has([slot="action"]) {
-    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) auto minmax(0, 1fr) auto;
+    grid-template-columns: minmax(var(--field-label-inline-min, var(--field-label-inline-min-default)), auto) minmax(0, 1fr) auto auto;
     grid-template-areas:
-      "label   trailing control action"
-      ".       .        message message";
+      "label   control trailing action"
+      ".       message message message";
   }
   :scope[inline]:not([label]):not(:has([slot="trailing"])):not(:has([slot="action"])) {
     grid-template-columns: minmax(0, 1fr);

package/components/grid/grid.a2ui.json

@@ -31,6 +31,11 @@
       "type": "string",
       "default": "md"
     },
+    "minColumnWidth": {
+      "description": "Minimum track width for columns=\"auto-fit\"/\"auto-fill\" (any CSS length, e.g. \"240px\", \"16rem\"). Sets the minmax() floor so cards don't shrink below it before wrapping; unset uses the 12rem default. No effect on numeric columns.",
+      "type": "string",
+      "default": ""
+    },
     "rowGap": {
       "description": "Row gap override",
       "type": "string",