@adia-ai/web-components 0.8.31 → 0.8.33

package/components/badge/badge.yaml

@@ -14,6 +14,22 @@ description: |
   event. Use badge-ui for status flags (Beta / New / Deprecated),
   notification counts, and unread indicators; use tag-ui for filter
   chips or user-managed labels.
+
+  REGISTER (gh issue 845; weight revised gh#866): badge and tag share
+  the same geometry family — pill radius (`--a-radius-full`) and
+  padding token rhythm are identical, so shape is NOT how you tell
+  them apart. Typography is: badge is UPPERCASE, mono (kbd-ui's
+  `--a-font-family-code` stack), medium weight, wide-tracked
+  (`--a-font-tracking-wider`, 0.06em), tabular numerals for counts.
+  Tag stays proportional sentence-case, also weight 500 — weight no
+  longer distinguishes the two (gh#866); case + tracking + mono carry
+  the register split now. Neither component exposes a prop that
+  crosses this line; the registers cannot be mixed à la carte.
+  Remaining distinctions: badge is non-interactive and carries the
+  semantic-color voice (status tones ARE the message, solid by
+  default — gh#864); tag is interactive/removable, muted/tinted by
+  default for family variants (gh#864), solid by default for the
+  family-less variant (gh#794, unaffected by gh#864).
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -35,7 +51,7 @@ props:
   status:
     description: Semantic status shorthand. Auto-maps to variant and sets text.
       `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning
-      "Deprecated"; `removed` → danger "Removed"; `beta` → accent "Beta".
+      "Deprecated"; `removed` → danger "Removed"; `beta` → primary "Beta".
       Use `variant` + `text` directly for custom chips.
     type: string
     default: ""
@@ -60,30 +76,33 @@ props:
     default: default
     enum:
       - default
-      - accent
       - info
       - success
       - warning
       - danger
       - primary
-      - muted
-      - neutral
   tone:
     description: |
-      Fill style — orthogonal to [variant]. Badge defaults to `muted`
-      (quiet metadata is the primitive's identity — counts, IDs, status
-      pills in dense rows). Three values:
-        - `muted` (default) — tinted bg + scheme-paired text. Same as
-          the existing family-variant rules.
-        - `solid` — saturated bg + on-strong text. Use for hero badges
-          where the badge IS the state (e.g. a single inline error). The
-          existing `primary` variant is a shortcut for accent + solid.
+      Fill style — orthogonal to [variant]. Badge defaults to `solid`
+      (gh#864 — badge and tag were swapped relative to their reported
+      default formulas; this restores badge's own). Three values:
+        - `solid` (default) — saturated bg + on-strong text. The badge
+          IS the state (status stamp). `primary` is badge's sole
+          brand-emphasis variant (`accent` retired, gh#874).
+        - `muted` — tinted bg + scheme-paired text. Use for quiet
+          metadata — counts, IDs, status pills in dense rows. Family-tinted
+          `muted` (e.g. `variant="info" tone="muted"`) shares `<tag-ui>`'s
+          `[tone="muted"]` shape; family-less `tone="muted"` does NOT
+          (gh#873) — it renders the stronger `neutral-low` fill, while
+          `<tag-ui>`'s family-less muted stays on the lighter
+          `--a-bg-muted` pair (gh#778 dense-list rationale).
         - `outline` — transparent bg + family-colored border + family-
           colored text. Lightest visual weight; good in dense data rows.
-      Vocabulary mirrors `<tag-ui>` (which defaults to solid, given its
-      different role as filter / autocomplete chip).
+      Vocabulary mirrors `<tag-ui>` (which now defaults to `muted` for
+      its family variants, gh#864 — different role as filter /
+      autocomplete chip).
     type: string
-    default: muted
+    default: solid
     enum:
       - muted
       - solid
@@ -100,6 +119,8 @@ a2ui:
   rules:
     - rule: 'Use for small status/count labels attached to another element (notification counts, status pills, version tags).'
       reason: 'Different from <tag-ui> which is for free-standing taxonomy/filter labels.'
+    - rule: 'A bare Badge (no [tone]) renders a solid, saturated status stamp. Set [tone="muted"] for the quieter tinted look on dense metadata rows.'
+      reason: 'Badge defaults to solid (gh#864); does not need [tone] set explicitly to read as a status stamp.'
     - rule: 'Place adjacent to or absolutely-positioned over the badged element, not inside it.'
       reason: 'Light-DOM positioning; do not nest inside the badged element''s slot.'
     - rule: 'For dismissable taxonomy labels (filter chips, selected items in multi-select), use <tag-ui> instead.'
@@ -130,7 +151,7 @@ examples:
           "component": "Badge",
           "icon": "dot",
           "text": "Organic",
-          "variant": "accent",
+          "variant": "primary",
           "size": "sm"
         },
         {

package/components/breadcrumb/breadcrumb.css

@@ -42,10 +42,17 @@
     user-select: none;
   }
 
-  /* Items */
+  /* Items — plain-text crumbs stay a normal inline-block box so
+     `text-overflow: ellipsis` actually paints: per the CSS Overflow
+     spec, the ellipsis glyph never renders on a flex container's own
+     box, only on a block box with a single fragmented inline
+     formatting context. Icon-leading crumbs opt back into inline-flex
+     below (scoped via :has(), see the icon-leading rule) so icon
+     baseline-alignment survives without reinstating the incompatible
+     flex+ellipsis combination on text-only items. */
   [data-item] {
-    display: inline-flex;
-    align-items: center;
+    display: inline-block;
+    vertical-align: middle;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -53,6 +60,11 @@
     color: var(--breadcrumb-fg);
   }
 
+  [data-item]:has(> icon-ui) {
+    display: inline-flex;
+    align-items: center;
+  }
+
   /* Links */
   a[data-item] {
     text-decoration: none;

package/components/button/button.a2ui.json

@@ -27,7 +27,6 @@
       "type": "string",
       "enum": [
         "default",
-        "accent",
         "info",
         "success",
         "warning",
@@ -83,6 +82,7 @@
       "enum": [
         "default",
         "solid",
+        "tonal",
         "outline",
         "ghost",
         "primary"

package/components/button/button.css

@@ -252,8 +252,10 @@ button-ui[variant="ghost"][color="warning"]:not([disabled]):hover   { --button-f
   /* ── Color (semantic axis) ──
      `[color]` carries semantic intent; `variant` carries visual style.
      Together they compose: `<button-ui variant="solid" color="danger">`
-     vs `<button-ui variant="outline" color="danger">`.
-     `variant="danger"` is a deprecated alias migrated to color via JS. */
+     vs `<button-ui variant="outline" color="danger">`. (Corrected,
+     variant-color-tone LLD §2: no `variant="danger"` → `color` alias
+     JS exists in button.class.js — the prior comment claiming one was
+     stale.) */
   :scope[color="danger"] {
     --button-bg: var(--button-bg-danger);
     --button-fg: var(--button-fg-danger);

package/components/button/button.d.ts

@@ -18,7 +18,7 @@ export class UIButton extends UIElement {
   /** HTML button type (button, submit, reset) */
   type: string;
   /** Semantic intent — composes with [variant]. `<button-ui variant="solid" color="danger">` = filled destructive action; `<button-ui variant="outline" color="success">` = outlined success affordance. */
-  color: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+  color: 'default' | 'info' | 'success' | 'warning' | 'danger';
   /** Disables interaction and prevents click/press events */
   disabled: boolean;
   /** Leading Phosphor icon name (rendered before text). */
@@ -33,12 +33,12 @@ export class UIButton extends UIElement {
   textContent: string;
   /** Visual style — `solid` (default fill), `tonal` (soft container fill with in-family text — the emphasis tier between solid and outline; default rides the primary family), `outline`, `ghost`. `default` / `primary` are aliases of `solid`. Style is independent of semantic intent — to express destructive / success / info / warning intent, set [color="…"] alongside (`variant="tonal" color="danger"` = the danger family's container fill). There is deliberately no `variant="secondary"`: `secondary` names a color family in this system, and an unset variant already IS the secondary-rank look (compose-constitution); `tonal` is the named tier for a softer-than-solid filled action.
 For **inline navigation** (Terms of Service, Privacy Policy, footer links, "Sign in" / "Sign up" cross-page affordances) use `<link-ui>` instead — it carries proper `<a href>` semantics, keyboard handling (Enter only, no Space), middle-click open-new-tab, and screen-reader announces "link" instead of "button". Mixing navigation and action affordances under the same primitive is a category error fixed at this junction. */
-  variant: 'default' | 'solid' | 'outline' | 'ghost' | 'primary';
+  variant: 'default' | 'solid' | 'tonal' | 'outline' | 'ghost' | 'primary';
 
+  addEventListener(type: 'press', listener: (ev: ButtonPressEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIButton, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'press', listener: (ev: ButtonPressEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/button/button.yaml

@@ -83,6 +83,7 @@ props:
     enum:
       - default
       - solid
+      - tonal
       - outline
       - ghost
       - primary
@@ -95,7 +96,6 @@ props:
     default: ""
     enum:
       - default
-      - accent
       - info
       - success
       - warning

package/components/calendar-grid/calendar-grid.d.ts

@@ -33,11 +33,11 @@ export class UICalendarGrid extends UIElement {
   /** Selected date in ISO format (YYYY-MM-DD). */
   value: string;
 
+  addEventListener(type: 'change', listener: (ev: CalendarGridChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: CalendarGridInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UICalendarGrid, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'change', listener: (ev: CalendarGridChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'input', listener: (ev: CalendarGridInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/card/card.css

@@ -364,6 +364,27 @@
     min-height: 0;
   }
 
+  /* Chrome-drop for bleed tables (gh#796) — a table-ui directly inside a
+     [bleed] section renders chromeless automatically, matching [raw]'s
+     reset (table.css:167-171: background none, box-shadow none,
+     border-radius 0). table.yaml's own raw/frameless docs already name
+     `<card-ui><section bleed>` as the canonical case for dropping a
+     table's chrome (the card owns the frame); 14 existing instances across
+     the repo carried neither attribute (gh#796 findings), so defaulting it
+     here removes an attribute nobody remembers to add rather than relying
+     on every author opting in. An explicit [raw] or [frameless] on the
+     instance still wins — `:not([raw]):not([frameless])` only lets this
+     rule fire in their absence.
+     Scoped to [bleed] sections only, not every card section: a plain
+     `<section>` keeps its own padding/margin, so a table's own frame there
+     reads as an intentional nested surface (see table.examples.html's own
+     demo cards, which use plain sections on purpose), not a doubled edge. */
+  & > section[bleed] > table-ui:not([raw]):not([frameless]) {
+    background: none;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
   /* ═══════ Footer ═══════
      Margin-based inset. Flex row for actions.
      [divider] adds top border.

package/components/card/card.yaml

@@ -132,11 +132,20 @@ a2ui:
   - The card's <header> grid activates only for DIRECT-child slotted elements. If you need an icon column, place the icon
     element (avatar-ui, icon-ui) directly in the header with slot="icon" — not inside a wrapper.
   - 'Heading slot accepts inline badges/metadata: <span slot="heading"><text-ui strong>Title</text-ui><badge-ui text="New"
-    variant="accent"></badge-ui></span> renders title + badge on one row.'
+    variant="primary"></badge-ui></span> renders title + badge on one row.'
   - Description slot also accepts bare <p> or <small> elements as siblings of the heading — they participate in the grid's
     row 2 without needing slot="description".
   - Multiple <section> siblings are allowed and stack vertically. [bleed] on a section removes its margin for edge-to-edge
     content (tables, charts); [padding] adds a canvas-scrim background for hero regions.
+  - >-
+    When neither [raw] nor [frameless] is present, a <table-ui> placed
+    directly inside a <section bleed> automatically renders chromeless
+    (background/box-shadow/border-radius reset; card.css, gh#796): the card
+    already owns the frame, so the table doesn't need its own. table.yaml's
+    [raw]/[frameless] docs describe the same composition; an explicit [raw] or
+    [frameless] on the table still applies and is honored. A plain
+    (non-bleed) <section> is unaffected — its own padding keeps a nested
+    table's frame legible as an intentional nested surface.
   - '[grow] on a section makes it fill the card''s remaining height (flex:1 — same semantics as col-ui[grow]/row-ui[grow]).
     The card becomes a flex column so the section absorbs the leftover space after the header/footer. Requires the card to
     have a definite height (inline height, grid row track, or flex parent) — a content-sized card has nothing to fill.

package/components/chart/chart.class.js

@@ -1366,9 +1366,13 @@ export class UIChart extends UIElement {
     const data = this.#data;
     const yKey = this.#yKeys()[0] || this.y;
     const vals = data.map(d => +(d[yKey] ?? 0));
-    const maxVal = Math.max(...vals) || 1;
-    const minVal = Math.min(...vals);
-    const range = maxVal - minVal || 1;
+
+    // Fixed 0-floor domain via niceScale — the same convention every other
+    // renderer in this file uses (#renderBar, #renderLine, #renderScatter,
+    // etc). A flat/single-point series then plots against a real baseline
+    // instead of collapsing to the bottom edge (gh#850).
+    const ticks = niceScale(0, Math.max(...vals), 5);
+    const maxVal = ticks[ticks.length - 1];
 
     // Use the actual container dims so the aspect ratio matches what
     // the CSS allocates (otherwise the fixed 120×32 viewBox gets
@@ -1385,7 +1389,7 @@ export class UIChart extends UIElement {
     const labels = data.map(d => d[this.x] ?? '');
     const points = vals.map((v, i) => ({
       x: step * i,
-      y: h - ((v - minVal) / range) * (h - padY * 2) - padY,
+      y: h - (maxVal ? (v / maxVal) * (h - padY * 2) : 0) - padY,
       v,
       label: labels[i],
     }));

package/components/chart/chart.d.ts

@@ -49,13 +49,13 @@ export class UIChart extends UIElement {
   /** Y-axis key(s), comma-separated for multi-series */
   y: string;
 
+  addEventListener(type: 'chart-hover', listener: (ev: ChartHoverEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'chart-leave', listener: (ev: ChartLeaveEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'chart-select', listener: (ev: ChartSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'legend-update', listener: (ev: ChartLegendUpdateEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIChart, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'chart-hover', listener: (ev: ChartHoverEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'chart-leave', listener: (ev: ChartLeaveEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'chart-select', listener: (ev: ChartSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'legend-update', listener: (ev: ChartLegendUpdateEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/chart-legend/chart-legend.d.ts

@@ -37,10 +37,10 @@ export class UIChartLegend extends UIElement {
   /** When set, rows are non-interactive <span>s (no click, no toggle). */
   static: boolean;
 
+  addEventListener(type: 'toggle', listener: (ev: ChartLegendToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIChartLegend, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'toggle', listener: (ev: ChartLegendToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/chat-thread/chat-input.css

@@ -6,7 +6,7 @@
    Two rules — one on the host (paint the hover affordance), one on the
    inner textarea-ui's [slot="text"] (suppress the textarea-ui hover
    bg/border/color so it doesn't compound with the host's). */
-chat-input-ui:not([disabled]):hover {
+chat-input-ui:not([disabled]):hover:not(:focus-within) {
   background: var(--chat-input-bg-hover);
   border-color: var(--chat-input-border-hover);
   color: var(--chat-input-fg-hover);

package/components/chat-thread/chat-thread.d.ts

@@ -32,12 +32,12 @@ export class UIChatThread extends UIElement {
   /** Component property: streaming. */
   streaming: boolean;
 
+  addEventListener(type: 'submit', listener: (ev: ChatThreadSubmitEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIChatThread, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'submit', listener: (ev: ChatThreadSubmitEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }
 
 export interface ChatInputSubmitEventDetail {
@@ -71,10 +71,10 @@ hides the model picker.
   /** Textarea placeholder. Defaults to "Type a message...". */
   placeholder: string;
 
+  addEventListener(type: 'submit', listener: (ev: ChatInputSubmitEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIChatInput, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'submit', listener: (ev: ChatInputSubmitEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/check/check.css

@@ -3,12 +3,12 @@
    For [checked] / [indeterminate], when JS toggles the attribute off,
    Safari leaves the visual stuck — selectors moved out as plain
    `tagname[attr]` rules. See docs/BROWSER-COMPAT.md §3a. */
-check-ui:not([disabled]):hover [slot="box"] {
+check-ui:not([disabled]):hover:not(:focus-visible) [slot="box"] {
   border-color: var(--check-border-hover);
   background: var(--check-bg-hover);
 }
-check-ui[checked]:not([disabled]):hover [slot="box"],
-check-ui[indeterminate]:not([disabled]):hover [slot="box"] {
+check-ui[checked]:not([disabled]):hover:not(:focus-visible) [slot="box"],
+check-ui[indeterminate]:not([disabled]):hover:not(:focus-visible) [slot="box"] {
   background: var(--check-bg-checked-hover);
   border-color: var(--check-bg-checked-hover);
 }

package/components/command/command.d.ts

@@ -38,11 +38,11 @@ export class UICommand extends UIElement {
   /** Placeholder text for the search input */
   placeholder: string;
 
+  addEventListener(type: 'dismiss', listener: (ev: CommandDismissEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'select', listener: (ev: CommandSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UICommand, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'dismiss', listener: (ev: CommandDismissEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'select', listener: (ev: CommandSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/context-menu/context-menu.d.ts

@@ -59,12 +59,12 @@ export class UIContextMenu extends UIElement {
   /** Programmatic open state. Set true to open at target center. */
   open: boolean;
 
+  addEventListener(type: 'context-menu-close', listener: (ev: ContextMenuCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'context-menu-open', listener: (ev: ContextMenuOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'context-menu-select', listener: (ev: ContextMenuSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIContextMenu, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'context-menu-close', listener: (ev: ContextMenuCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'context-menu-open', listener: (ev: ContextMenuOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'context-menu-select', listener: (ev: ContextMenuSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/datetime-picker/datetime-picker.d.ts

@@ -75,14 +75,14 @@ document locale. `h12` forces a 12-hour cycle with an AM/PM
   /** Current value as ISO 8601 datetime ("YYYY-MM-DDTHH:mm" or "YYYY-MM-DDTHH:mm:ss"). Empty when no value selected. */
   value: string;
 
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: UIDatetimePicker, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
   addEventListener(type: 'change', listener: (ev: DatetimePickerChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'close', listener: (ev: DatetimePickerCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'input', listener: (ev: DatetimePickerInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'invalid', listener: (ev: DatetimePickerInvalidEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'open', listener: (ev: DatetimePickerOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIDatetimePicker, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
 }

package/components/demo-toggle/demo-toggle.d.ts

@@ -29,10 +29,10 @@ export class UIDemoToggle extends UIElement {
   /** Current toggle state ("on" | "off"). Reflected as data-state on the host. */
   state: '' | 'on' | 'off';
 
+  addEventListener(type: 'change', listener: (ev: DemoToggleChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIDemoToggle, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'change', listener: (ev: DemoToggleChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/drawer/drawer.d.ts

@@ -32,11 +32,11 @@ export class UIDrawer extends UIElement {
   /** Title text displayed in the drawer header */
   text: string;
 
+  addEventListener(type: 'close', listener: (ev: DrawerCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'opened', listener: (ev: DrawerOpenedEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIDrawer, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'close', listener: (ev: DrawerCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'opened', listener: (ev: DrawerOpenedEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

package/components/heatmap/heatmap.d.ts

@@ -36,14 +36,14 @@ export class UIHeatmap extends UIElement {
   /** ISO start date; labels months in day-grid mode */
   startDate: string;
 
-  addEventListener<K extends keyof HTMLElementEventMap>(
-    type: K,
-    listener: (this: UIHeatmap, ev: HTMLElementEventMap[K]) => unknown,
-    options?: boolean | AddEventListenerOptions,
-  ): void;
   addEventListener(type: 'cell-click', listener: (ev: HeatmapCellClickEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'cell-hover', listener: (ev: HeatmapCellHoverEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'chart-hover', listener: (ev: HeatmapChartHoverEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'chart-leave', listener: (ev: HeatmapChartLeaveEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener(type: 'chart-select', listener: (ev: HeatmapChartSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIHeatmap, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
 }

package/components/index.js

@@ -24,6 +24,7 @@ export { UIInput } from './input/input.js';
 export { UITextarea } from './textarea/textarea.js';
 export { UICheck } from './check/check.js';
 export { UIRadio } from './radio/radio.js';
+export { UIRadioGroup } from './radio-group/radio-group.js';
 export { UIOptionCard } from './option-card/option-card.js';
 export { UIIntegrationCard } from './integration-card/integration-card.js';
 export { UISwitch } from './switch/switch.js';

package/components/inline-edit/inline-edit.d.ts

@@ -40,13 +40,13 @@ by consumers. Listen to `edit-start` / `edit-end` events instead.
   /** Hint text shown when the value is empty (inline-edit reads this in the static state). */
   placeholder: string;
 
+  addEventListener(type: 'cancel', listener: (ev: InlineEditCancelEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'change', listener: (ev: InlineEditChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'edit-end', listener: (ev: InlineEditEditEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'edit-start', listener: (ev: InlineEditEditStartEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
   addEventListener<K extends keyof HTMLElementEventMap>(
     type: K,
     listener: (this: UIInlineEdit, ev: HTMLElementEventMap[K]) => unknown,
     options?: boolean | AddEventListenerOptions,
   ): void;
-  addEventListener(type: 'cancel', listener: (ev: InlineEditCancelEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'change', listener: (ev: InlineEditChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'edit-end', listener: (ev: InlineEditEditEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
-  addEventListener(type: 'edit-start', listener: (ev: InlineEditEditStartEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
 }

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).",
+  "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.",
   "type": "object",
   "allOf": [
     {
@@ -319,6 +319,9 @@
       "--input-line-height": {
         "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."
+      },
       "--input-padding": {
         "description": "Override base padding (density-scaled)"
       },

package/components/input/input.css

@@ -32,6 +32,11 @@ 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. */
+    --input-min-width:       20ch;
 
     /* ── Transitions ── */
     --input-duration:        var(--a-duration-fast);
@@ -53,6 +58,19 @@ 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. */
+    min-width: var(--input-min-width);
   }
 
   /* Inline label — sits inside [slot="field"] as a leading caption,

package/components/input/input.yaml

@@ -8,7 +8,9 @@ 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).
+  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.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # do NOT auto-import them. Consumer (or demo shell) must explicitly import.
 composes:
@@ -230,6 +232,14 @@ tokens:
     description: Override hover state border color
   --input-line-height:
     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.
   --input-padding:
     description: Override base padding (density-scaled)
   --input-placeholder-color:

package/components/integration-card/integration-card.class.js

@@ -48,11 +48,14 @@ const ACTION_FOR_STATUS = Object.freeze({
   pending:       { event: 'press',     emits: '',           label: 'Connecting…', variant: 'outline', icon: '' },
 });
 
+// `coming-soon` is a family-less badge, tone="muted" — `variant="muted"`
+// retired (variant/color/tone convention cut, gh#873/874); `#renderStatusBadge()`
+// below branches on `variant` vs. absent.
 const BADGE_FOR_STATUS = Object.freeze({
   connected:    { variant: 'success', text: 'Connected',   icon: 'check' },
   error:        { variant: 'danger',  text: 'Error',       icon: 'warning-circle' },
   pending:      { variant: 'info',    text: 'Connecting…', icon: '' },
-  'coming-soon':{ variant: 'muted',   text: 'Coming soon', icon: '' },
+  'coming-soon':{ text: 'Coming soon', icon: '' },
 });
 
 // Fallback glyph per known provider when no explicit [logo] is supplied, so
@@ -312,7 +315,13 @@ export class UIIntegrationCard extends UIElement {
       return;
     }
     this.#statusEl.hidden = false;
-    this.#statusEl.setAttribute('variant', cfg.variant);
+    if (cfg.variant) {
+      this.#statusEl.setAttribute('variant', cfg.variant);
+      this.#statusEl.removeAttribute('tone');
+    } else {
+      this.#statusEl.removeAttribute('variant');
+      this.#statusEl.setAttribute('tone', 'muted');
+    }
     this.#statusEl.setAttribute('text', cfg.text);
     this.#statusEl.setAttribute('size', 'sm');
     if (cfg.icon) this.#statusEl.setAttribute('icon', cfg.icon);