@adia-ai/web-components 0.8.42 → 0.8.44

package/components/action-list/action-list.class.js

@@ -94,13 +94,11 @@ export class UIActionItem extends UIElement {
   static properties = {
     icon:     { type: String,  default: '', reflect: true },
     text:     { type: String,  default: '', reflect: true },
-    // ADR-0063 (gh#1571) — `subtitle` is DEPRECATED (action-item was the
-    // corpus's remaining `subtitle` outlier once <menu-item-ui> converged
-    // under gh#1563); `description` is canonical. `subtitle` stays declared
-    // (dual-read compat, additive). The `subtitle` SLOT (a separate
-    // surface — see action-item.yaml) is deliberately unchanged; only the
-    // PROP renames.
-    subtitle: { type: String,  default: '', reflect: true },
+    // ADR-0063 (gh#1571) — `description` is canonical (action-item was
+    // the corpus's remaining `subtitle` outlier once <menu-item-ui>
+    // converged under gh#1563); the deprecated `subtitle` PROP dual-read
+    // shim was cut in 0.8.43 (gh#1617). The `subtitle` SLOT (a separate
+    // surface — see action-item.yaml) is unchanged.
     description: { type: String, default: '', reflect: true },
     value:    { type: String,  default: '', reflect: true },
     variant:  { type: String,  default: 'default', reflect: true },
@@ -109,51 +107,6 @@ export class UIActionItem extends UIElement {
 
   static template = () => null;
 
-  // ADR-0063 (gh#1571) one-shot-per-class deprecation warn for [subtitle].
-  static #warnedSubtitle = false;
-
-  // Guards + tracks the [subtitle] -> [description] compat mirror (below).
-  // action-item-ui (unlike menu-item-ui) has pre-existing tests that set
-  // [subtitle] AFTER mount and expect the rendered row to keep tracking it
-  // (gh#1374) — a resolve-once-at-connect shim (menu-item-ui's own shape)
-  // would silently stop mirroring once `description` picks up its first
-  // reflected value. `#mirroring` suppresses the authored-flag while WE
-  // write `this.description` ourselves; `#descriptionAuthored` latches
-  // true the moment a REAL (non-mirrored) `description` attribute shows
-  // up, so [description] wins permanently from that point on, even
-  // across later [subtitle] attribute churn.
-  #mirroring = false;
-  #descriptionAuthored = false;
-
-  attributeChangedCallback(name, oldVal, val) {
-    if (name === 'description' && !this.#mirroring) this.#descriptionAuthored = true;
-    super.attributeChangedCallback(name, oldVal, val);
-  }
-
-  // ADR-0063 (gh#1571) compat shim. New-name precedence: once [description]
-  // has ever been authored directly, it wins outright and [subtitle] is
-  // ignored from then on. Until then, [subtitle] mirrors into [description]
-  // on every resolve (initial connect AND every subsequent render), so a
-  // post-mount [subtitle] update keeps propagating exactly like it did
-  // before this shim existed.
-  #resolveSubtitleCompat() {
-    if (this.#descriptionAuthored) return;
-    const mirrored = this.hasAttribute('subtitle') ? this.subtitle : '';
-    if (this.description === mirrored) return;
-    this.#mirroring = true;
-    this.description = mirrored;
-    this.#mirroring = false;
-    if (mirrored && !UIActionItem.#warnedSubtitle) {
-      UIActionItem.#warnedSubtitle = true;
-      // eslint-disable-next-line no-console
-      console.warn(
-        '[AdiaUI] <action-item-ui [subtitle]> is deprecated — use ' +
-        '[description] instead (ADR-0063, gh#1571). Kept working as-is; ' +
-        'no behavior change.',
-      );
-    }
-  }
-
   // Set when connected()/render() stamped this fallback child from a prop —
   // never touch a consumer-authored slot="icon"/"text"/"subtitle" child
   // (ADR-0010, slot content is source of truth). Mirrors menu-item-ui's
@@ -170,10 +123,6 @@ export class UIActionItem extends UIElement {
   }
 
   connected() {
-    // ADR-0063 (gh#1571) compat shim — resolve BEFORE #stamp() reads
-    // `this.description`, so there's no wrong-then-right flash.
-    this.#resolveSubtitleCompat();
-
     // Adopt-or-stamp (gh#753): a consumer-authored role survives connect —
     // only stamp "listitem" when the host has no author-set role at all.
     if (!this.hasAttribute('role')) this.setAttribute('role', 'listitem');
@@ -218,11 +167,6 @@ export class UIActionItem extends UIElement {
   }
 
   render() {
-    // ADR-0063 (gh#1571) compat shim — re-resolve on every render so a
-    // post-mount [subtitle] update keeps mirroring into [description]
-    // until an author sets [description] directly (see #resolveSubtitleCompat).
-    this.#resolveSubtitleCompat();
-
     // Sync icon — only touch elements we stamped.
     const iconEl = this.#ownChild('[slot="icon"]');
     if (this.icon) {

package/components/action-list/action-list.d.ts

@@ -34,14 +34,12 @@ export class UIActionList extends UIElement {
 }
 
 export class UIActionItem extends UIElement {
-  /** Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1571) replacing `subtitle` — converges action-item onto the same spelling <menu-item-ui> adopted under gh#1563. */
+  /** Optional secondary description line rendered under the label. Canonical spelling (ADR-0063, gh#1571) replacing `subtitle` — converges action-item onto the same spelling <menu-item-ui> adopted under gh#1563. The deprecated `subtitle` prop alias was cut in 0.8.43 (gh#1617). */
   description: string;
   /** Disables click + keyboard activation; aria-disabled is set. */
   disabled: boolean;
   /** Leading icon name (Phosphor). */
   icon: string;
-  /** DEPRECATED (ADR-0063, gh#1571) — use `description` instead. Same type/default/rendered position; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0. (The `subtitle` SLOT below is a separate surface, deliberately left unrenamed in this pass — see its own description.) */
-  subtitle: string;
   /** Action label. */
   text: string;
   /** Identifier passed to the action-list change/activate handlers. */

package/components/avatar/avatar.class.js

@@ -27,6 +27,7 @@
  */
 
 import { UIElement } from '../../core/element.js';
+import { syncAutoAriaLabel } from '../../core/a11y.js';
 
 // ── Avatar ──────────────────────────────────────────────────
 
@@ -47,6 +48,13 @@ export class UIAvatar extends UIElement {
   #imgEl = null;
   #initialsEl = null;
   #iconEl = null;
+  // gh#1647: tracks the aria-label VALUE this element itself last derived
+  // from `text`/`icon` (undefined when none) — value-tracking guard
+  // ported from tag.class.js/select.class.js (gh#1644/#1646). Scoped to
+  // the PER-AVATAR label only — avatar-group's own "Avatar group" label
+  // (avatar.class.js's UIAvatarGroup, :125) is already guarded separately
+  // and runs once in connected(), not the render loop; out of scope here.
+  #lastAutoAriaLabel = undefined;
 
   connected() {
     this.setAttribute('role', 'img');
@@ -90,7 +98,10 @@ export class UIAvatar extends UIElement {
       this.#showInitials();
     }
 
-    this.setAttribute('aria-label', this.displayName || this.icon || '');
+    // A11y (gh#1647): never clobber a consumer's own aria-label
+    // (value-tracking guard, gh#1644/#1646).
+    const ariaSource = this.displayName || this.icon || '';
+    this.#lastAutoAriaLabel = syncAutoAriaLabel(this, this.#lastAutoAriaLabel, ariaSource);
   }
 
   #showInitials() {

package/components/button/button.d.ts

@@ -17,12 +17,16 @@ export type ButtonPressEvent = CustomEvent<unknown>;
 export class UIButton extends UIElement {
   /** HTML button type (button, submit, reset) */
   type: string;
+  /** Accessible label for screen readers. Auto-set from `text` when text is non-empty; meaningful override for icon-only buttons. */
+  ariaLabel: 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' | 'info' | 'success' | 'warning' | 'danger';
   /** Disables interaction and prevents click/press events */
   disabled: boolean;
   /** Leading Phosphor icon name (rendered before text). */
   icon: string;
+  /** Trailing Phosphor icon name (rendered after text). Use for forward affordances like "Next →" / wizards / pagination / product tours where the caret points away from the label. */
+  iconTrailing: string;
   /** Sizing scale (sm/md/lg). For a denser or larger register, set [scale] on an ancestor (scale="ui-sm" … "content-lg") — scale picks the table, size picks the row. */
   size: 'sm' | 'md' | 'lg';
   /** Makes the button stretch to fill the parent's width */

package/components/button/button.yaml

@@ -165,7 +165,7 @@ a2ui:
       reason: 'Per existing slot.discipline rule — visual redundancy guard.'
     - rule: 'For navigation (route-change) use <nav-item-ui> or anchor; button-ui is for actions only.'
       reason: 'Action vs navigation semantics.'
-    - rule: 'For toggleable on/off state use <switch-ui>; for multi-select clusters use <segmented-ui multiple> + <segment-ui> (gh#1369 — <toggle-group-ui>/<toggle-option-ui> are deprecated).'
+    - rule: 'For toggleable on/off state use <switch-ui>; for multi-select clusters use <segmented-ui multiple> + <segment-ui> (<toggle-group-ui>/<toggle-option-ui> were cut in 0.8.43, gh#1617, gh#1369).'
       reason: 'Stateless action vs stateful toggle.'
 anti_patterns:
   - description: >-

package/components/calendar-picker/calendar-picker.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/CalendarPicker.json",
   "title": "CalendarPicker",
-  "description": "Date (and, per `[precision]`, date+time) picker with trigger button and popover panel. Form-associated input emitting an ISO date (or, when `precision` is `minute`/`second`, ISO datetime) string via change events; supports min/max and disabled-date masks. Use for single-date or single-datetime input in forms; for date ranges use <date-range-picker-ui> instead of composing two calendar-picker instances. gh#1372 (#1363 C3c) folded <datetime-picker-ui>'s surface into this widened `precision` axis — see the deprecated <datetime-picker-ui> alias.",
+  "description": "Date (and, per `[precision]`, date+time) picker with trigger button and popover panel. Form-associated input emitting an ISO date (or, when `precision` is `minute`/`second`, ISO datetime) string via change events; supports min/max and disabled-date masks. Use for single-date or single-datetime input in forms; for date ranges use <date-range-picker-ui> instead of composing two calendar-picker instances. gh#1372 (#1363 C3c) folded <datetime-picker-ui>'s surface into this widened `precision` axis — that thin alias component was cut in 0.8.43 (gh#1617); this is the sole tag now.",
   "type": "object",
   "allOf": [
     {

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

@@ -25,9 +25,8 @@
  * `"minute"`/`"second"` additionally composes `<divider-ui>` +
  * `<time-picker-ui>` as a second pane, `value` becomes a full ISO 8601
  * datetime string, and `hour-cycle`/`step`/`locale` become active — the same
- * contract `<datetime-picker-ui>` shipped, which is now a deprecated thin
- * alias subclass (see datetime-picker.class.js) mapping onto this class with
- * `precision="minute"` by default. Per ADR-0027, the consumer must
+ * contract `<datetime-picker-ui>` shipped; that thin alias subclass was cut
+ * in 0.8.43 (gh#1617) — this is the sole tag now. Per ADR-0027, the consumer must
  * explicitly import every composed primitive (see `composes:` in
  * calendar-picker.yaml) — this class doesn't auto-import them.
  *

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

@@ -1,9 +1,7 @@
-/* gh#1372, #1363 C3c — datetime-picker-ui is now a thin UICalendarPicker
-   subclass (see ../datetime-picker/datetime-picker.class.js); its own CSS
-   file no longer carries independent rules. The scope root below covers
-   BOTH tags so a <datetime-picker-ui> host renders identically to
-   <calendar-picker-ui precision="minute">. */
-@scope (calendar-picker-ui, datetime-picker-ui) {
+/* gh#1372, #1363 C3c — datetime-picker-ui was a thin UICalendarPicker
+   subclass folding datetime mode into this component's widened precision
+   axis; cut in 0.8.43 (gh#1617). calendar-picker-ui is the sole tag now. */
+@scope (calendar-picker-ui) {
   :where(:scope) {
     /* ── Tokens ── */
 
@@ -192,7 +190,7 @@
 /* ── Calendar popover (outside @scope — popover lives in top layer) ── */
 /* Custom properties inherit from the host, so --calendar-picker-* tokens are available here. */
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] {
+calendar-picker-ui [slot="popover"] {
   margin: 0;
   padding: var(--calendar-picker-popover-padding);
   border: 1px solid var(--calendar-picker-popover-border);
@@ -211,7 +209,7 @@
               translate var(--a-duration-fast) var(--a-easing-out);
 }
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:popover-open {
+calendar-picker-ui [slot="popover"]:popover-open {
   @starting-style {
     opacity: 0;
     translate: 0 -4px;
@@ -219,7 +217,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] { transition: none; }
+  calendar-picker-ui [slot="popover"] { transition: none; }
 }
 
 /* ── Substrate grid (gh#1371, #1363 C3a) ──
@@ -231,7 +229,7 @@
    so an existing consumer override keeps working unchanged (non-breaking —
    ADR-0055 precedent) and mirrors date-range-picker's own
    `date-range-picker-ui calendar-grid-ui { --calendar-grid-*: … }` pattern. */
-:is(calendar-picker-ui, datetime-picker-ui) calendar-grid-ui {
+calendar-picker-ui calendar-grid-ui {
   --calendar-grid-header-gap:           var(--calendar-picker-header-gap);
   --calendar-grid-header-mb:            var(--calendar-picker-header-mb);
   --calendar-grid-title-fg:             var(--calendar-picker-title-fg);
@@ -281,11 +279,11 @@
    single-pane (date-only, default) popover keeps its original fixed-width
    block layout unchanged. Ported near-verbatim from the former
    datetime-picker.css. */
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]) {
+calendar-picker-ui [slot="popover"]:has([data-time-pane]) {
   width: auto;
 }
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]):popover-open {
+calendar-picker-ui [slot="popover"]:has([data-time-pane]):popover-open {
   display: grid;
   grid-template-columns: auto auto auto;
   grid-template-areas: "cal divider time";
@@ -293,22 +291,22 @@
   align-items: start;
 }
 
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > calendar-grid-ui {
+calendar-picker-ui [slot="popover"] > calendar-grid-ui {
   grid-area: cal;
 }
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-pane-divider] {
+calendar-picker-ui [slot="popover"] > [data-pane-divider] {
   grid-area: divider;
   align-self: stretch;
   --divider-color: var(--calendar-picker-divider);
 }
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-time-pane] {
+calendar-picker-ui [slot="popover"] > [data-time-pane] {
   grid-area: time;
   align-self: start;
 }
 
 /* Footer area (consumer-supplied [slot="footer"]) — spans all columns
    under the pane(s), in either single- or two-pane mode. */
-:is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] [slot="footer"] {
+calendar-picker-ui [slot="popover"] [slot="footer"] {
   grid-column: 1 / -1;
   display: flex;
   justify-content: flex-end;
@@ -320,14 +318,14 @@
 /* Narrow surfaces (e.g. inside a card on mobile): stack the panes
    vertically and replace the vertical divider with a horizontal rule. */
 @container (max-width: 32rem) {
-  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"]:has([data-time-pane]):popover-open {
+  calendar-picker-ui [slot="popover"]:has([data-time-pane]):popover-open {
     grid-template-columns: 1fr;
     grid-template-areas:
       "cal"
       "divider"
       "time";
   }
-  :is(calendar-picker-ui, datetime-picker-ui) [slot="popover"] > [data-pane-divider] {
+  calendar-picker-ui [slot="popover"] > [data-pane-divider] {
     align-self: auto;
   }
 }

package/components/calendar-picker/calendar-picker.yaml

@@ -13,8 +13,8 @@ description: >-
   single-datetime input in forms; for date ranges use
   <date-range-picker-ui> instead of composing two calendar-picker
   instances. gh#1372 (#1363 C3c) folded <datetime-picker-ui>'s surface into
-  this widened `precision` axis — see the deprecated
-  <datetime-picker-ui> alias.
+  this widened `precision` axis — that thin alias component was cut in
+  0.8.43 (gh#1617); this is the sole tag now.
 # Per ADR-0027 — primitives that programmatically create other primitives
 # in their render() do NOT auto-import them. Consumer (or demo shell) must
 # explicitly import each composed primitive.

package/components/card/card.css

@@ -431,7 +431,7 @@
      only collision-free for the bare-marks case: a sparkline (its
      renderer never emits axis ticks, gridlines, value labels, or a
      legend — chart.class.js #renderSparkline), or any other chart-ui
-     type with BOTH [hide-grid] and [hide-values] set (the author opted
+     type with BOTH [no-grid] and [no-values] set (the author opted
      out of every text element). A chart that still draws guides or
      value text — or is paired with a <chart-legend-ui> — needs
      clearance from the card's frame, or that text collides with the
@@ -444,8 +444,8 @@
      section below, wired via chart-legend-ui[for="<chart id>"], which
      never enters this selector (see chart-in-card.examples.html's
      "Full-bleed chart + legend band" example). */
-  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([hide-grid])),
-  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([hide-values])),
+  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([no-grid])),
+  & > section[bleed]:has(> chart-ui:not([type="sparkline"]):not([no-values])),
   & > section[bleed]:has(> chart-legend-ui) {
     margin: var(--card-inset);
     padding: 0;

package/components/chart/chart.a2ui.json

@@ -87,41 +87,36 @@
       ],
       "default": "abbr"
     },
-    "hideAverage": {
-      "description": "DEPRECATED (ADR-0063, gh#1563) — use `noAverage` instead. Same meaning, same default; kept working as a dual-read compat shim (one- time console.warn when it's the name that resolves). Removed in 0.9.0.",
-      "type": "boolean",
-      "default": false
-    },
-    "hideGrid": {
-      "description": "DEPRECATED (ADR-0063, gh#1563) — use `noGrid` instead. Same meaning, same default; kept working as a dual-read compat shim (one-time console.warn when it's the name that resolves). Removed in 0.9.0.",
-      "type": "boolean",
-      "default": false
-    },
-    "hideValues": {
-      "description": "DEPRECATED (ADR-0063, gh#1563) — use `noValues` instead. Same meaning, same default; kept working as a dual-read compat shim (one- time console.warn when it's the name that resolves). Removed in 0.9.0.",
-      "type": "boolean",
-      "default": false
-    },
     "loading": {
       "description": "Show a skeleton placeholder instead of the chart body. Set to true while data is being fetched; clear once data arrives. Preserves the element's aspect-ratio dimensions so the skeleton occupies the same space the chart will fill. Parity with stat-ui[loading] and table-ui[loading] (§FB-12, v0.6.27).",
       "type": "boolean",
       "default": false
     },
     "noAverage": {
-      "description": "When true, suppress the overlaid average line. Canonical spelling (ADR-0063, gh#1563) replacing `hideAverage`.",
+      "description": "When true, suppress the overlaid average line. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideAverage` dual-read shim was cut in 0.8.43 (gh#1617).",
       "type": "boolean",
       "default": false
     },
     "noGrid": {
-      "description": "Hide gridlines. Canonical spelling (ADR-0063, gh#1563) replacing `hideGrid`.",
+      "description": "Hide gridlines. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideGrid` dual-read shim was cut in 0.8.43 (gh#1617).",
       "type": "boolean",
       "default": false
     },
     "noValues": {
-      "description": "Hide value labels. Canonical spelling (ADR-0063, gh#1563) replacing `hideValues`.",
+      "description": "Hide value labels. Canonical spelling (ADR-0063, gh#1563) — the deprecated `hideValues` dual-read shim was cut in 0.8.43 (gh#1617).",
       "type": "boolean",
       "default": false
     },
+    "ratio": {
+      "description": "Chart 2.0 aspect-ratio bucket (ADR-0074). Unset (default) auto-snaps to the nearest of the three studied ratios by comparing the chart's own live box aspect against two midpoint boundaries (5:4 between 3:2/1:1, 4:5 between 1:1/2:3) — never interpolated; the resolved bucket reflects onto the host as `data-ratio-resolved`. Setting `ratio` explicitly pins that bucket regardless of the box's actual aspect, overriding the auto-snap. Orthogonal to `size` (overall scale) and `type`/`color` (ADR-0064's family axis) — this attribute lands the grammar + snap plumbing only; per-type studied renderings per bucket are later waves (gh#1624 plan steps 2-4).",
+      "type": "string",
+      "enum": [
+        "3:2",
+        "1:1",
+        "2:3"
+      ],
+      "default": ""
+    },
     "seriesEmphasis": {
       "description": "Multi-line only. Names one series key (matching a `y` key) to render at full strength — area fill + full-opacity line. Every other series drops its area fill and renders line-only at --chart-deemphasized-opacity. Empty (default) applies full treatment to every series, unchanged from pre-gh#561 behavior.",
       "type": "string",
@@ -151,6 +146,22 @@
       "description": "Y-axis key(s), comma-separated for multi-series",
       "type": "string",
       "default": ""
+    },
+    "yMax": {
+      "description": "Pins the value-axis domain ceiling for cartesian types (bar, line, area, scatter, multi-line, stacked-bar, grouped-bar, composed). Unset (default, null) keeps today's auto-scale ceiling (the data max). Pairs with `yMin` to pin the full domain; either may be set alone. N/A for radial/part-to-whole types — see `yMin` (gh#1690). A datum outside the pinned domain is CLAMPED to the nearest edge for rendering (the value label/tooltip still shows the real value) rather than escaping the plot box.",
+      "type": [
+        "number",
+        "null"
+      ],
+      "default": null
+    },
+    "yMin": {
+      "description": "Pins the value-axis domain floor for cartesian types (bar, line, area, scatter, multi-line, stacked-bar, grouped-bar, composed). Unset (default, null) already floors a positive series at 0 (the pre-1690 behavior, unchanged) — a migrating d3 consumer's own \"pin the floor to 0\" habit is the built-in default, not something to configure. Pin `y-min` explicitly for three OTHER cases: (1) zooming a narrow window — e.g. `y-min=\"0.9\" y-max=\"1\"` magnifies a percent series clustered near 92-95%, which reads flatter against the full auto-scaled [0,1] domain; (2) a mixed-sign series, where the unpinned floor never goes below 0 and negative values clip at the axis; (3) aligning two charts to one shared scale for a fair comparison. N/A for radial/part-to-whole types (pie, donut, radar, radial-bar, gauge, funnel, treemap, sankey, segments, sparkline) — those never read a shared linear value axis, so this prop is a no-op there (gh#1690). A datum outside the pinned domain is CLAMPED to the nearest edge for rendering (the value label/tooltip still shows the real value) rather than escaping the plot box.",
+      "type": [
+        "number",
+        "null"
+      ],
+      "default": null
     }
   },
   "required": [