@adia-ai/web-components 0.8.42 → 0.8.44

package/components/table/table.class.js

@@ -125,6 +125,11 @@ export class UITable extends UIElement {
     paginate:   { type: Number,  default: 0,     reflect: true },
     loading:    { type: Boolean, default: false, reflect: true },
     search:     { type: String,  default: '',    reflect: true },
+    // adiav2 zero-overrides purge (gh#1680) deleted an app-side [data-clickable]
+    // cursor rule with no kit-side replacement — row-click is always-emitted
+    // (fires whether or not a listener cares), so cursor can't be inferred
+    // from listener presence; this is an explicit opt-in affordance instead.
+    clickableRows: { type: Boolean, default: false, reflect: true, attribute: 'clickable-rows' },
   };
 
   static template = () => null;
@@ -735,6 +740,18 @@ export class UITable extends UIElement {
     const allSelected = this.#data.length > 0 && this.#selected.size === this.#data.length;
     const cells = [];
 
+    // Expand column header — an empty placeholder for the reserved
+    // expand-toggle track. Must precede the checkbox header, matching the
+    // grid template and body-row cell order (gh#1654: with no placeholder,
+    // every header label sat one column left of its data).
+    if (this.expandable) {
+      const cell = document.createElement('div');
+      cell.setAttribute('role', 'columnheader');
+      cell.setAttribute('data-expand-col', '');
+      cell.setAttribute('aria-label', 'Expand');
+      cells.push(cell);
+    }
+
     // Checkbox column header
     if (this.selectable) {
       const cell = document.createElement('div');
@@ -1505,7 +1522,7 @@ export class UITable extends UIElement {
 
   #onKeydown = (e) => {
     const visCols = this.#visibleColumns;
-    const totalCols = visCols.length + (this.selectable ? 1 : 0);
+    const totalCols = visCols.length + (this.expandable ? 1 : 0) + (this.selectable ? 1 : 0);
     const body = this.querySelector(':scope > [data-body]');
     const totalRows = body ? body.children.length : 0;
 

package/components/table/table.css

@@ -303,9 +303,18 @@
 
   /* text-overflow on a flex container doesn't reach text nodes (anonymous
      flex items). Built-in cell types now wrap text in <span>; link type
-     creates <a>; avatar/progress composite types use row-ui > span. */
+     creates <a>; avatar/progress composite types use row-ui > span.
+
+     `[data-truncate]` (gh#1681) extends the identical contract to
+     consumer-rendered `column.render` cells, whose output shape isn't
+     guaranteed to be a bare <span>/<a> — a render() function sets it on
+     whichever element (any tag, including a custom element) should
+     single-line-ellipsis, the same way a column author sets [data-wrap] to
+     opt a built-in cell INTO wrapping. Undocumented before this: `render`
+     cells clipped with no ellipsis and no opt-in path. */
   [data-body] [role="gridcell"] > span,
-  [data-body] [role="gridcell"] > a {
+  [data-body] [role="gridcell"] > a,
+  [data-body] [role="gridcell"] > [data-truncate] {
     min-width: 0;
     flex: 1;
     overflow: hidden;
@@ -351,8 +360,10 @@
 
   :scope[wrap] [data-body] [role="gridcell"] > span,
   :scope[wrap] [data-body] [role="gridcell"] > a,
+  :scope[wrap] [data-body] [role="gridcell"] > [data-truncate],
   [data-body] [role="gridcell"][data-wrap] > span,
-  [data-body] [role="gridcell"][data-wrap] > a {
+  [data-body] [role="gridcell"][data-wrap] > a,
+  [data-body] [role="gridcell"][data-wrap] > [data-truncate] {
     white-space: normal;
     overflow: visible;
     text-overflow: clip;
@@ -417,6 +428,15 @@
     color: var(--table-fg-hover);
   }
 
+  /* Clickable-row affordance (gh#1680) — adiav2's zero-overrides purge
+     deleted an app-side [data-clickable] cursor rule with no kit-side
+     replacement. `row-click` fires unconditionally regardless of whether a
+     listener cares, so cursor can't be inferred from listener presence;
+     `clickable-rows` is an explicit opt-in instead. */
+  :scope[clickable-rows] [data-body] > [role="row"] {
+    cursor: pointer;
+  }
+
   /* Selected row — must out-specify the base row rule `[data-body] >
      [role="row"]` (0,2,0) and the hover rule (0,2,1), or the highlight never
      paints. Scoping to `[data-body] > [role="row"][aria-selected="true"]` lifts
@@ -534,9 +554,14 @@
 
   /* ═══════ Overlays (empty / loading / error) ═══════ */
 
-  [data-overlay],
-  [data-empty],
-  [data-loading] {
+  /* Scoped to the host's direct children — gh#1700, hygiene pass matching
+     the command-ui (gh#1697/#1698) and combobox-ui (gh#1700) fix shape.
+     Single-consumer today (only table.class.js's own `:scope >
+     [data-empty]` / `:scope > [data-loading]` overlay markers), but a bare
+     selector here is one nested consumer away from the same leak. */
+  :scope > [data-overlay],
+  :scope > [data-empty],
+  :scope > [data-loading] {
     grid-column: 1 / -1;
     display: flex;
     flex-direction: column;

package/components/table/table.d.ts

@@ -86,7 +86,9 @@ export interface TableSortEventDetail {
 export type TableSortEvent = CustomEvent<TableSortEventDetail>;
 
 export class UITable extends UIElement {
-  /** 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. */
+  /** 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. */
+  clickableRows: boolean;
+  /** 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. */
   columns: string;
   /** JS property (set programmatically — `el.data = [...]`) — row records, an array of plain objects keyed to columns[].key. May also be supplied declaratively as a JSON-array `data="[…]"` attribute, hydrated once at connect (gh#288) — the same pattern chart-ui's `data` attribute uses. Custom accessor on the element class, not a reflected attribute. */
   data: string;

package/components/table/table.examples.md

@@ -12,8 +12,8 @@
 <table-ui id="api-selectable" selectable></table-ui>
 ```
 
-## expandable
+## render cell truncation (data-truncate)
 
 ```html
-<table-ui id="api-expandable" expandable></table-ui>
+<table-ui id="api-render-truncate"></table-ui>
 ```

package/components/table/table.yaml

@@ -20,7 +20,7 @@ composes:
   - badge-ui
 props:
   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.
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
@@ -85,6 +85,14 @@ props:
       range select.
     type: boolean
     default: false
+  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
   sortable:
     description: Enable click-to-sort on column headers. Supports multi-sort via Shift+click.
     type: boolean

package/components/table-toolbar/table-toolbar.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/TableToolbar.json",
   "title": "TableToolbar",
-  "description": "Header / companion bar for a sibling table-ui. Renders title + count badge, filter / sort / columns popovers, and a search input — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, or column visibility. Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi- select (searchable when ≥ 12 options), id-like keys → free-text contains. The column descriptor's `filter` field overrides the auto-detect: `'select'` forces multi-select even on high-cardinality columns; `'text'` forces a contains input even on small enums.",
+  "description": "Header / companion bar for a sibling table-ui. Renders an optional leading [slot=\"scope\"] region, title + count badge, an optional \"Showing X–Y of N\" range summary, filter / sort / columns popovers, a search input, an optional [slot=\"actions-leading\"] region, an optional page-size select, and a trailing [slot=\"actions\"] region — all wired to the target table via an [for] id-ref. Modeled on chart-legend-ui's [for] binding pattern. Drop next to (or above) any table-ui to add the standard data-grid toolbar without re-implementing search, filter, sort, column visibility, or pagination summary/page-size. Filter rows auto-pick a primitive per column: ≤ 50 distinct values → multi-select (searchable when ≥ 12 options), id-like keys → free-text contains. The column descriptor's `filter` field overrides the auto-detect: `'select'` forces multi-select even on high-cardinality columns; `'text'` forces a contains input even on small enums.",
   "type": "object",
   "allOf": [
     {
@@ -13,6 +13,11 @@
     }
   ],
   "properties": {
+    "chromeOnly": {
+      "description": "Suppress all four native controls/search at once (filter, sort, columns, search) as additive sugar over noFilter/noSort/noColumns/ noSearch (ADR-0076, ADIA2-9123). Precedence is pure, absolute OR — while set, all four stay off regardless of any individual no-* attribute's own value, with no partial re-enable path; to re-enable one control, remove chrome-only entirely and set the other three no-* attributes explicitly instead. The four granular attributes are not deprecated or removed — they remain the independently-addressable shipped API; chrome-only never replaces them, it's a convenience preset on top.",
+      "type": "boolean",
+      "default": false
+    },
     "component": {
       "const": "TableToolbar"
     },
@@ -46,11 +51,47 @@
       "type": "boolean",
       "default": false
     },
+    "pageSize": {
+      "description": "Current rows-per-page value, shown as the selected option in the page-size select. Falls back to the first entry of pageSizeOptions when unset (0) or not present among the options. Applied directly to the bound table's own [paginate] prop (rows-per-page), the same way filter/sort/columns changes are applied to the target — mirror this prop only to reflect state to URL / persistence / analytics.",
+      "type": "number",
+      "default": 0
+    },
+    "pageSizeOptions": {
+      "description": "Rows-per-page choices rendered as `<option>`s in the page-size select (e.g. `[10, 25, 50, 100]`). JS property (`.pageSizeOptions = [...]`), or a declarative JSON-array `page-size-options=\"[10,25,50]\"` attribute hydrated once at connect — the same dynamic-array pattern table-ui's own `columns`/`data` props use. Empty (the default) hides the page-size select entirely — additive opt-in, no footprint on existing consumers.",
+      "$ref": "common_types.json#/$defs/DynamicStringList"
+    },
     "placeholder": {
       "description": "Placeholder text for the search input.",
       "type": "string",
       "default": "Search..."
     },
+    "rangeEnd": {
+      "description": "1-indexed last row number of the current page, for the range summary (e.g. `25` in \"Showing 1–25 of 320\"). See rangeStart.",
+      "type": "number",
+      "default": 0
+    },
+    "rangeStart": {
+      "description": "1-indexed first row number of the current page, for the \"Showing X–Y of N\" range summary (e.g. `1` in \"Showing 1–25 of 320\"). Renders alongside — never in place of — [text]/[count]; the range summary is its own cluster, independent of the title cluster. All three of rangeStart/rangeEnd/rangeTotal must be set (> 0) for the summary to render; omit all three (the default) to opt out entirely.",
+      "type": "number",
+      "default": 0
+    },
+    "rangeTotal": {
+      "description": "Total row count across all pages, for the range summary (e.g. `320` in \"Showing 1–25 of 320\"). Distinct from pagination-ui's `total` (total PAGES) — this is total ROWS; deliberately not spelled `total` to avoid that cross-sibling name collision (ADR-0063 B5). See rangeStart.",
+      "type": "number",
+      "default": 0
+    },
+    "stage": {
+      "description": "Explicit compaction-stage override (ADR-0076). Unset (the default, empty string) means auto-snap: the toolbar's own inline-size container query picks the nearest stage from its live width against the three --table-toolbar-bp-* breakpoints, snapping discretely, never interpolating. Setting stage explicitly pins that stage's rendering regardless of the container's actual width — overriding the container query, mirroring chart-ui's ratio override shape. Primary use: visual-eval fixtures that need a deterministic stage without resizing a real container, and a consumer embedding the toolbar inside a known-narrow panel who wants to skip auto-detection entirely. All four stages' CSS is now live (ADR-0076): search-tight steps the search field down (step 2); icon-only drops control labels and compacts/hides the range summary (steps 3+4); overflow collapses Filter/Sort/Columns into one \"More\" trigger routed through the same menu-ui/menu-item-ui pattern used elsewhere in the corpus (step 5). The resolved stage — the pin if set, otherwise the live width classification — also reflects onto the host as `data-stage-resolved` (step 7, informational only, mirrors chart-ui's `data-ratio-resolved` convention — never drives table-toolbar's own rendering, which stays 100% CSS-driven).",
+      "type": "string",
+      "enum": [
+        "",
+        "full",
+        "search-tight",
+        "icon-only",
+        "overflow"
+      ],
+      "default": ""
+    },
     "text": {
       "description": "Title text shown on the left.",
       "type": "string",
@@ -81,6 +122,7 @@
       "field-ui",
       "select-ui",
       "input-ui",
+      "menu-ui",
       "menu-item-ui",
       "icon-ui",
       "check-ui"
@@ -92,6 +134,9 @@
       "filter-change": {
         "description": "Filter set changed. Detail: { filters }."
       },
+      "page-size-change": {
+        "description": "Page-size select changed. Detail: { pageSize }."
+      },
       "search": {
         "description": "Debounced search query change. Detail: { value }."
       },
@@ -104,6 +149,11 @@
         "description": "Members table with filter/sort/columns/search wired to a sibling table-ui.",
         "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Column\", \"gap\": \"3\", \"children\": [\"bar\", \"card\"]},\n  {\"id\": \"bar\", \"component\": \"TableToolbar\", \"for\": \"members\", \"text\": \"All Employees\", \"count\": \"32\"},\n  {\"id\": \"card\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"bleed\": true, \"children\": [\"tbl\"]},\n  {\"id\": \"tbl\", \"component\": \"Table\", \"id\": \"members\", \"sortable\": true, \"raw\": true}\n]",
         "name": "members-toolbar"
+      },
+      {
+        "description": "The ratified adiav2 list-page toolbar row (ADIA2-9123, gh#1649): scope menu, range summary, app-owned Filter/Columns triggers (their own filter drawer, not the native popovers — [no-filter]/[no-columns]/ [no-sort]/[no-search] drop the native affordances), page-size select, and a primary CTA — [slot=\"actions-leading\"] carries the Filter/Columns triggers so they land BEFORE the page-size select, while [slot=\"actions\"] carries the CTA so it lands after.",
+        "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Column\", \"gap\": \"3\", \"children\": [\"bar\", \"card\"]},\n  {\"id\": \"bar\", \"component\": \"TableToolbar\", \"for\": \"accounts\", \"no-filter\": true, \"no-sort\": true, \"no-columns\": true, \"no-search\": true, \"range-start\": 1, \"range-end\": 25, \"range-total\": 320, \"page-size\": 25, \"page-size-options\": [10, 25, 50, 100], \"children\": [\"btn-filter\", \"btn-columns\", \"btn-new\"]},\n  {\"id\": \"btn-filter\", \"component\": \"Button\", \"text\": \"Filter\", \"variant\": \"ghost\", \"slot\": \"actions-leading\"},\n  {\"id\": \"btn-columns\", \"component\": \"Button\", \"text\": \"Columns\", \"variant\": \"ghost\", \"slot\": \"actions-leading\"},\n  {\"id\": \"btn-new\", \"component\": \"Button\", \"text\": \"New account\", \"variant\": \"primary\", \"slot\": \"actions\"},\n  {\"id\": \"card\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"bleed\": true, \"children\": [\"tbl\"]},\n  {\"id\": \"tbl\", \"component\": \"Table\", \"id\": \"accounts\", \"sortable\": true, \"raw\": true}\n]",
+        "name": "adiav2-list-page-toolbar-row"
       }
     ],
     "keywords": [
@@ -131,7 +181,16 @@
     ],
     "slots": {
       "actions": {
-        "description": "Trailing action area — primary buttons (e.g. \"New row\") rendered after the search input."
+        "description": "Trailing action area — primary buttons (e.g. \"New row\") rendered after the search input, [slot=\"actions-leading\"], and the page-size select."
+      },
+      "actions-leading": {
+        "description": "Region rendered AFTER the search input and BEFORE the native page-size select (gh#1649) — for app-owned trigger buttons (e.g. custom Filter / Columns triggers that open the consumer's own drawer instead of the native filter/columns popovers) that must land ahead of the page-size select rather than after it, unlike [slot=\"actions\"]. Same real-insertion-point pattern as [slot=\"scope\"] / [slot=\"actions\"] — positioning is CSS by DOM order, not a template stamp. Empty (the default) has zero footprint on existing consumers."
+      },
+      "empty": {
+        "description": "Renders in place of the range-summary text — the same [data-summary] region — when [range-total] is EXPLICITLY present and equal to \"0\" (checked via hasAttribute, never the computed value alone, so an unset range-total during loading never flashes this content; ADR-0076, REQ-E-001). Mutually exclusive with a positive [range-total]: the normal \"Showing X-Y of N\" text always wins whenever range-total is a positive number. Empty (the default) preserves today's exact behavior — [data-summary] hides on a confirmed range-total=\"0\" exactly as before this slot existed. Plain author-supplied markup (text, an empty-state-ui composite, an icon+text pair) — table-toolbar does not template or constrain its shape. Naming matches chart-ui's own existing `empty` slot convention."
+      },
+      "scope": {
+        "description": "Leading region rendered BEFORE the [text]/[count] title cluster — e.g. a scope/view-switcher menu (an org's teams, a saved view). Positioning is CSS by DOM order, mirroring how [slot=\"actions\"] is a real, author-fillable insertion point rather than template-stamped content."
       }
     },
     "states": [
@@ -183,6 +242,12 @@
       "--table-toolbar-radius": {
         "description": "Toolbar corner radius (variant=card)"
       },
+      "--table-toolbar-summary-fg": {
+        "description": "Range-summary (\"Showing X–Y of N\") text color"
+      },
+      "--table-toolbar-summary-size": {
+        "description": "Range-summary font size"
+      },
       "--table-toolbar-title-fg": {
         "description": "Title text color"
       },