@adia-ai/web-components 0.8.43 → 0.8.45

package/components/select/select.class.js

@@ -14,6 +14,7 @@
 import { UIFormElement } from '../../core/form.js';
 import { anchorPopover } from '../../core/anchor.js';
 import { untracked } from '../../core/signals.js';
+import { syncAutoAriaLabel } from '../../core/a11y.js';
 
 function escapeHTML(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -46,6 +47,11 @@ export class UISelect extends UIFormElement {
     size:        { type: String,  default: 'md', reflect: true },
     open:        { type: Boolean, default: false, reflect: true },
     label:       { type: String,  default: '', reflect: true },
+    // gh#1748: keeps [label] as the accessible name (bridged to an explicit
+    // aria-label in #syncAccessibleName below) while suppressing the VISIBLE
+    // `::before` text (select.css) — for compositions that already show the
+    // name elsewhere. Mirrors check-ui's [label-hidden] (gh#1010).
+    labelHidden: { type: Boolean, default: false, reflect: true, attribute: 'label-hidden' },
     icon:        { type: String,  default: '', reflect: true },
     avatar:      { type: String,  default: '', reflect: true },
     mark:        { type: Boolean, default: false, reflect: true },
@@ -337,17 +343,22 @@ export class UISelect extends UIFormElement {
     else this.selectAllOptions();
   };
 
-  // FB-88: tracks whether the host's current aria-label was derived from
-  // `placeholder` (vs author-supplied), so re-renders refresh/clear OUR name
-  // without ever clobbering an author's aria-label.
-  #placeholderNamed = false;
+  // FB-88: tracks the aria-label VALUE this element itself last derived from
+  // `placeholder` (undefined when none), so re-renders refresh/clear OUR name
+  // without ever clobbering a consumer's own aria-label (gh#1646: a boolean
+  // flag couldn't detect a consumer's setAttribute between batched renders).
+  // The compare-against-what-we-last-wrote guard lives in core/a11y.js's
+  // `syncAutoAriaLabel` (gh#1647 / gh#1651); this field is its state.
+  #lastAutoAriaLabel = undefined;
 
   /**
    * Derive an accessible name from `placeholder` when the select is otherwise
    * unnamed — mirrors input-ui so a placeholder-only select (the idiomatic
    * filter-bar shape) still has a name for assistive tech (WCAG 4.1.2, FB-88).
    *
-   * Guards (a placeholder-only fix must NOT clobber a real label):
+   * Guards (a placeholder-only fix must NOT clobber a real label) — the
+   * per-component policy stays HERE, resolved into the source string
+   * (`''` = no auto name this render); the helper only reconciles it:
    *  • an author `aria-label`, a visible `label`, or an `aria-labelledby` wins;
    *  • the default 'Select...' prompt is NOT used as a name — otherwise every
    *    field-ui-wrapped select (named by a sibling `<label for>`, which aria-label
@@ -355,17 +366,26 @@ export class UISelect extends UIFormElement {
    */
   #syncAccessibleName() {
     const DEFAULT_PLACEHOLDER = 'Select...'; // matches static properties.placeholder.default
-    const authoredAria = this.hasAttribute('aria-label') && !this.#placeholderNamed;
+    // gh#1748: [label-hidden] suppresses the visible `::before` text
+    // (select.css's `attr(label)` content) but [label] must still name the
+    // control — bridge it through the SAME tracked-ownership pipeline used
+    // below for the placeholder-only case, so a consumer's own directly-set
+    // aria-label is never clobbered (gh#1646 guarantee extends for free) and
+    // toggling [label-hidden] back off cleanly releases the bridged value
+    // (falls through to the visible-label path, which sets no aria-label —
+    // the generated `::before` content supplies the name instead, unchanged
+    // from today). Mirrors check-ui's [label-hidden] (gh#1010), which
+    // instead sets aria-label unconditionally since check-ui never relies
+    // on generated-content naming.
+    if (this.labelHidden && this.label) {
+      this.#lastAutoAriaLabel = syncAutoAriaLabel(this, this.#lastAutoAriaLabel, this.label);
+      return;
+    }
     const labeledElsewhere = !!this.label || this.hasAttribute('aria-labelledby');
-    const namable = !authoredAria && !labeledElsewhere
+    const namable = !labeledElsewhere
       && this.placeholder && this.placeholder !== DEFAULT_PLACEHOLDER;
-    if (namable) {
-      this.setAttribute('aria-label', this.placeholder);
-      this.#placeholderNamed = true;
-    } else if (this.#placeholderNamed) {
-      this.removeAttribute('aria-label');
-      this.#placeholderNamed = false;
-    }
+    const source = namable ? this.placeholder : '';
+    this.#lastAutoAriaLabel = syncAutoAriaLabel(this, this.#lastAutoAriaLabel, source);
   }
 
   connected() {

package/components/select/select.css

@@ -7,6 +7,15 @@
     --select-px:                var(--a-ui-px);
     --select-radius:            var(--a-radius);
     --select-leading-radius:    var(--a-radius-full);
+    /* gh#1633 / ADIA2-9136 (adiav2#12791) — the host's own `min-width: 0`
+       below (the ellipsis-reset trick, kept for the trigger/display text
+       inside this floor) had no intrinsic lower bound, so a select in a
+       shrinking flex/grid cell crushed to unusable width — the same gap
+       already fixed on --input-min-width (this family's reference; see
+       input.css, gh#781). Same ch-based UA-baseline derivation, applied
+       to select-ui's own trigger surface. Override to 0 to opt back into
+       full collapse. */
+    --select-min-width:         20ch;
 
     /* ── Typography ── */
     --select-font-size:         var(--a-ui-size);
@@ -62,7 +71,11 @@
     display: flex;
     flex-direction: column;
     gap: var(--select-gap);
-    min-width: 0;
+    /* Floored, not zeroed — see --select-min-width above (gh#1633). The
+       trigger's own `min-width: 0` further down stays 0: that one exists
+       so the display text can ellipsis-truncate INSIDE this floor, not to
+       guard the host's own collapse. */
+    min-width: var(--select-min-width);
     /* font-family floor on the host — trigger/native-select/options inherit it. */
     font-family: var(--select-font-family, var(--a-font-family-ui));
     font-size: var(--select-font-size);
@@ -85,6 +98,31 @@
   :scope:not([label])::before,
   :scope[label=""]::before { display: none; }
 
+  /* Visually-hidden label (gh#1748) — [label-hidden] keeps the a11y name
+     (aria-label, bridged from [label] in select.class.js's
+     #syncAccessibleName()) but drops the visible text, for compositions
+     that already show the name elsewhere (e.g. a table-toolbar-ui
+     [slot="scope"] select whose scope/view name is redundant chrome next
+     to the toolbar's own title). Same canonical sr-only recipe as
+     <visually-hidden-ui> (visually-hidden.css) and check-ui's own
+     [label-hidden] (gh#1010) — clip-path does the real hiding, the rest is
+     belt-and-suspenders for cross-UA. More specific than the bare
+     `::before` rule above, so it wins whenever both [label] and
+     [label-hidden] are set. */
+  :scope[label][label-hidden]::before {
+    content: attr(label);
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    clip-path: inset(100%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+
   /* Trigger */
   [slot="trigger"] {
     display: flex;

package/components/select/select.d.ts

@@ -45,6 +45,8 @@ export class UISelect extends UIFormElement {
   /** Open/closed reflected attribute — toggled by trigger click / keyboard. */
   open: boolean;
   label: string;
+  /** When true, [label] still sets the accessible name but the visible text is sr-only hidden (gh#1748, mirrors check-ui's [label-hidden], gh#1010). */
+  labelHidden: boolean;
   /** Leading icon name (Phosphor registry). */
   icon: string;
   /** Leading avatar URL or name. */

package/components/select/select.yaml

@@ -104,6 +104,18 @@ props:
     description: Label text above the trigger
     type: string
     default: ""
+  label-hidden:
+    description: >-
+      When true, [label] still sets the accessible name (aria-label) but the
+      visible `::before` text is suppressed via the canonical sr-only
+      technique (gh#1748, mirrors check-ui's [label-hidden], gh#1010). Use
+      when a sibling/ancestor composition already conveys the same name
+      visually (e.g. a scope/view-switcher select in a table-toolbar-ui
+      [slot="scope"], where the toolbar's own title already names the
+      view) and a second visible "Scope"-style label would paint it twice.
+    type: boolean
+    default: false
+    reflect: true
   hint:
     description: |-
       §184 (v0.5.5, FEEDBACK-08 §7): small caption rendered beneath the select. Sets `aria-describedby` on the host so screen readers announce it as a description (distinct from `aria-label`, which comes from `label`). Does not conflict with the in-component `label`.
@@ -280,7 +292,13 @@ states:
     description: Non-interactive; dimmed.
     attribute: disabled
 traits: []
-tokens: {}
+tokens:
+  --select-min-width:
+    description: >-
+      Intrinsic min-width floor on the host (default `20ch`, matching
+      input-ui's own `--input-min-width` UA-baseline derivation) so a
+      select in a shrinking flex/grid cell doesn't crush to unusable
+      width. Set to `0` to opt back into full collapse (gh#1633).
 requiredIcons:
   - caret-down
   - check               # checkbox indicator on each option in [multiple] mode

package/components/stream/stream.d.ts

@@ -22,6 +22,8 @@ export type StreamErrorEvent = CustomEvent<StreamErrorEventDetail>;
 export type StreamStartEvent = CustomEvent<unknown>;
 
 export class UIStream extends UIElement {
+  /** When true, suppress the blinking cursor during active streaming */
+  hideCursor: boolean;
   /** Milliseconds between character renders. 0 = real-time. */
   pace: number;
   /** Read-only reflected state, true while stream is active */

package/components/table/cell-types.js

@@ -312,6 +312,15 @@ registerCellType('progress', {
 
 // 13. actions
 registerCellType('actions', {
+  // gh#1678 CodeRabbit follow-up: this render() calls addEventListener()
+  // directly on a plain node it creates — unlike every other cell type
+  // above (which only set attributes on custom elements, safe to adopt
+  // structurally), a discarded 'actions' cell loses a real listener with
+  // no way for isEqualNode() to see the loss. `attachesListeners: true`
+  // tells table.class.js's adoptOrDiffChildren() (via RENDERER_OWNED) to
+  // always replace this cell rather than ever adopt it on structural
+  // equality alone. See ssr-compatibility's references/guard-patterns.md §4.1.
+  attachesListeners: true,
   render(value, row, cell, meta) {
     const actions = meta?.actions || [];
     let wrapper = cell.querySelector('row-ui');

package/components/table/table.a2ui.json

@@ -13,8 +13,13 @@
     }
   ],
   "properties": {
+    "clickable-rows": {
+      "description": "Renders body rows with `cursor: pointer`. `row-click` fires unconditionally whether or not a listener is attached, so the cursor can't be inferred from listener presence — set this explicitly when row-click behavior is wired up (master-detail, open-flyout, navigation) so rows read as actionable.",
+      "type": "boolean",
+      "default": false
+    },
     "columns": {
-      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign=\"top\">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type=\"badge\" meta='{\"variants\":{\"Online\":\"success\"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML.",
+      "description": "Column definitions. Array of {key, label, type?, width?, minWidth?, maxWidth?, flex?, sortable?, resizable?, filterable?, pinned?, hidden?, wrap?, valign?, accessor?, format?, render?, sortFn?, filterType?, meta?}. `valign` ('top'|'center') overrides the host [valign] for that column's body cells only — header cells always stay centered. Alternative to declarative <col-def> children (<col-def valign=\"top\">); col-def also accepts `meta` as a JSON attribute (gh#925) — e.g. <col-def type=\"badge\" meta='{\"variants\":{\"Online\":\"success\"}}'> — so cell-type meta (badge variant maps, currency codes) is expressible in static HTML. Truncation contract for `render` cells (gh#1681) — a `render(value, row, cell, dataIndex)` function's returned markup isn't guaranteed to be a bare <span>/<a> the way built-in cell types are, so single-line ellipsis truncation isn't automatic; set `data-truncate` on whichever rendered element (any tag, including a custom element) should single-line-ellipsis to opt it into the same contract built-in cells get for free. `[wrap]` (host) / `[data-wrap]` (per-column) override it back to multi-line, matching built-in cells.",
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "component": {