@zeyos/zx 4.4.0 → 5.0.0

package/src/components/tabbox/tabbox.css

@@ -2,15 +2,18 @@
  * Four tab appearances, all square-cornered by default:
  *
  *   divided    (default) flat blocks on a muted track, split by hairline dividers, the active
- *              block lifted onto the panel surface under an accent rule — the workhorse for a
- *              record page or a panel that owns its content box.
+ *              block lifted onto the panel surface it opens — the workhorse for a record page or
+ *              a panel that owns its content box.
  *   bracket    folder tabs that outline and fuse into the panel below, the active tab bridging
  *              the seam — for document-like views where the tabs belong to the sheet.
- *   segmented  a compact group on a muted fill, the active tab raised onto a control surface —
- *              for switching a view inside a toolbar or card header, where the row reads as one
- *              control rather than as navigation.
- *   line       a full-width rule with the active tab underlined — for page- and section-level
- *              navigation, where the row spans the content it switches.
+ *   segmented  a compact framed group, the active tab on the neutral current fill — for switching
+ *              a view inside a toolbar or card header, where the row reads as one control rather
+ *              than as navigation.
+ *   line       a full-width rule with the active tab underlined in the text colour — for page- and
+ *              section-level navigation, where the row spans the content it switches.
+ *
+ * The active tab is where you are, not something you picked, so no variant marks it with the
+ * accent: it takes the text colour and a heavier label, and its own variant's neutral ground.
  *
  * `divided` and `bracket` draw the panel box themselves; `line` and `segmented` leave the panel
  * bare so the surrounding layout supplies the chrome.
@@ -57,7 +60,7 @@
   color: var(--zx-color-text-muted);
   font: inherit;
   font-size: var(--zx-control-font-size);
-  font-weight: 500;
+  font-weight: var(--zx-weight-medium);
   white-space: nowrap;
   cursor: pointer;
 }
@@ -68,6 +71,7 @@
 
 .zx-tabbox__tab[aria-selected="true"] {
   color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-tabbox__tab[aria-disabled="true"] {
@@ -90,8 +94,6 @@
 
 .zx-tabbox[data-variant="divided"] .zx-tabbox__tab {
   block-size: calc(var(--zx-control-height) + 8px);
-  /* The top rule is the selected marker; transparent here keeps every block the same height. */
-  border-block-start: 2px solid transparent;
   border-inline-end: 1px solid var(--zx-color-border);
   padding-inline: var(--zx-space-4);
 }
@@ -104,10 +106,9 @@
   background: var(--zx-color-bg-hover);
 }
 
+/* The active block is lifted onto the panel surface it opens; nothing is docked to its edge. */
 .zx-tabbox[data-variant="divided"] .zx-tabbox__tab[aria-selected="true"] {
-  border-block-start-color: var(--zx-color-accent);
   background: var(--zx-color-bg-surface);
-  font-weight: 650;
 }
 
 .zx-tabbox[data-variant="divided"] .zx-tabbox__tab:focus-visible {
@@ -141,7 +142,6 @@
 .zx-tabbox[data-variant="bracket"] .zx-tabbox__tab[aria-selected="true"] {
   border-color: var(--zx-color-border);
   background: var(--zx-color-bg-surface);
-  font-weight: 650;
 }
 
 .zx-tabbox[data-variant="bracket"] .zx-tabbox__tab[aria-selected="true"]::after {
@@ -175,9 +175,10 @@
   border-block-end-color: var(--zx-color-border-strong);
 }
 
+/* The underline is the text colour, not the accent: a tab row is navigation, and the screen's
+   one solid accent belongs to its primary action. */
 .zx-tabbox[data-variant="line"] .zx-tabbox__tab[aria-selected="true"] {
-  border-block-end-color: var(--zx-color-accent);
-  font-weight: 600;
+  border-block-end-color: var(--zx-color-text);
 }
 
 .zx-tabbox[data-variant="line"] .zx-tabbox__tab:focus-visible {
@@ -188,22 +189,22 @@
 
 /* ------------------------------------------------------------- segmented variant -- */
 
+/* One framed control: a hairline round the group, the segments flat inside it, and the active one
+   on the neutral current fill — the same recipe as the view switch in ListToolbar and Calendar. */
 .zx-tabbox[data-variant="segmented"] .zx-tabbox__tablist {
   inline-size: fit-content;
   max-inline-size: 100%;
   align-items: center;
   gap: 2px;
   block-size: var(--zx-control-height);
+  border: 1px solid var(--zx-color-border-control);
   border-radius: var(--zx-tabbox-radius);
-  background: var(--zx-color-bg-muted);
-  padding: 3px;
+  padding: 2px;
 }
 
 .zx-tabbox[data-variant="segmented"] .zx-tabbox__tab {
   block-size: 100%;
-  /* A transparent border keeps the active and inactive boxes the same size. */
-  border: 1px solid transparent;
-  /* Nested inside the track's 3px padding, so the inner corner is one step tighter. */
+  /* Nested inside the frame's 2px padding, so the inner corner is one step tighter. */
   border-radius: max(0px, calc(var(--zx-tabbox-radius) - 2px));
   padding-inline: var(--zx-space-3);
   font-size: var(--zx-text-sm);
@@ -214,15 +215,12 @@
 }
 
 .zx-tabbox[data-variant="segmented"] .zx-tabbox__tab[aria-selected="true"] {
-  border-color: var(--zx-color-border-control);
-  background: var(--zx-color-bg-control);
-  box-shadow: var(--zx-shadow-2);
+  background: var(--zx-color-bg-current);
 }
 
 .zx-tabbox[data-variant="segmented"] .zx-tabbox__tab:focus-visible {
   z-index: 1;
   outline: 0;
-  border-color: var(--zx-color-ring);
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -237,18 +235,25 @@
 
 /* ---------------------------------------------------------------- badge & close -- */
 
+/* A count, not a call to action: a neutral overlay that reads on every variant's ground, in the
+   muted text colour, taking the full text colour with its tab. */
 .zx-tabbox__badge {
   min-inline-size: 1.25rem;
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
   padding-inline: var(--zx-space-1);
-  color: var(--zx-color-on-accent);
+  color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   line-height: 1.25rem;
   text-align: center;
 }
 
+.zx-tabbox__tab[aria-selected="true"] .zx-tabbox__badge {
+  color: var(--zx-color-text);
+}
+
 /* Chrome comes from the shared .zx-icon-btn ghost utility; only the box is reset here, because
    a full control-height square would widen every closable tab. The extra .zx-tabbox raises the
    specificity to match `.zx-scope .zx-icon-btn` in base.css, which sets the size. */

package/src/components/tabbox/tabbox.js

@@ -37,6 +37,9 @@ const VARIANTS = new Set(['divided', 'bracket', 'line', 'segmented']);
  *   the active tab across a full-width rule; `segmented` renders a compact group that reads as one
  *   control, for a toolbar or card header.
  * @property {boolean} [keepAlive=true] Keep inactive panel elements mounted.
+ * @property {string} [label] Accessible name of the tab list — what the tabs switch between
+ *   ("Record sections"). A tab list needs one whenever the page has more than one, and screen
+ *   readers announce it on entry.
  * @property {(event: CustomEvent<{name: string, previous: string|null}>) => void} [onchange] Change callback.
  * @property {(event: CustomEvent<{name: string}>) => void} [onclose] Close callback, fired when the
  *   user dismisses a closable tab.
@@ -101,7 +104,8 @@ export class Tabbox extends Component {
       class: 'zx-tabbox__tablist',
       ref: 'tablist',
       role: 'tablist',
-      ariaOrientation: 'horizontal'
+      ariaOrientation: 'horizontal',
+      ariaLabel: this.options.label || null
     });
     const panels = h('div', {
       class: 'zx-tabbox__panels',

package/src/components/table/table.css

@@ -64,9 +64,9 @@
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
+  min-block-size: calc(var(--zx-control-height) - 2px);
   border-radius: var(--zx-radius-sm);
-  padding-inline: var(--zx-space-2);
+  padding: var(--zx-space-1) var(--zx-space-2);
 }
 
 .zx-table__column-option:hover { background: var(--zx-color-overlay-hover); }
@@ -132,16 +132,28 @@
   }
 }
 
+/*
+ * The reorder and selection columns are one control height wide, the control centred in the slot.
+ * Their cells drop the inline padding: a fixed layout holds the column to exactly that width, and
+ * the padding would push the control off its middle. The controls are blocks centred by their
+ * margins: inline, they would sit on the text baseline with the descender room left below them, a
+ * few pixels above the middle of the row.
+ */
 .zx-table__reorder-column,
-.zx-table__reorder-header,
-.zx-table__reorder-cell {
+.zx-table__selection-column {
   inline-size: var(--zx-control-height);
-  text-align: center;
+}
+
+.zx-table :is(.zx-table__reorder-header, .zx-table__reorder-cell,
+  .zx-table__selection-header, .zx-table__selection-cell) {
+  inline-size: var(--zx-control-height);
+  padding-inline: 0;
 }
 
 .zx-table__row-handle {
-  display: inline-grid;
+  display: grid;
   place-items: center;
+  margin-inline: auto;
   inline-size: 26px;
   block-size: 26px;
   min-block-size: 0;
@@ -171,7 +183,9 @@
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-md);
   background: var(--zx-color-bg-surface);
-  scrollbar-gutter: stable;
+  /* No reserved gutter: a table that does not scroll would carry a blank strip beside its last
+     column wherever scrollbars take up room. One that scrolls gets its scrollbar when it does. */
+  scrollbar-gutter: auto;
 }
 
 /* Loading state (Table.setLoading): dim rows and show an indeterminate top progress bar. */
@@ -214,6 +228,8 @@
   border-spacing: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
+  /* Figures line up down a column whatever the cell's alignment. Only digits change width. */
+  font-variant-numeric: tabular-nums;
 }
 
 /* Auto layout (intrinsic/px columns): let content set the width and scroll horizontally. */
@@ -227,23 +243,32 @@
   table-layout: fixed;
 }
 
-.zx-table__selection-column {
-  inline-size: var(--zx-control-height);
-}
-
+/*
+ * Rows are separated by the subtle divider, the header from the body by the ordinary one. The
+ * header has no band of its own: it sits on the table's surface in the muted text colour at a
+ * medium weight, so it labels the columns without competing with the values in them — and stays
+ * opaque, which a sticky header has to be.
+ */
 .zx-table th,
 .zx-table td {
-  border-block-end: 1px solid var(--zx-table-border-color, var(--zx-color-border));
+  border-block-end: 1px solid var(--zx-table-border-color, var(--zx-color-border-subtle));
   padding: var(--zx-space-2) var(--zx-space-3);
   text-align: start;
   vertical-align: middle;
 }
 
 .zx-table th {
-  background: var(--zx-table-header-bg, var(--zx-color-bg-raised));
+  border-block-end-color: var(--zx-table-border-color, var(--zx-color-border));
+  background: var(--zx-table-header-bg, var(--zx-color-bg-surface));
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
+}
+
+/* The column the rows are ordered by says so in its label as well as its arrow. */
+.zx-table th[aria-sort="ascending"],
+.zx-table th[aria-sort="descending"] {
+  color: var(--zx-color-text);
 }
 
 .zx-table__scroll[data-sticky-header="true"] th {
@@ -284,9 +309,25 @@
   background: inherit;
   color: inherit;
   padding: 0;
+  /* The header's type, not a control's: base.css sets buttons in the control size and weight, and
+     the browser resets their tracking, so a sortable label would not match its unsortable
+     neighbours. */
+  font: inherit;
+  letter-spacing: inherit;
   text-align: inherit;
 }
 
+/* A sortable figure column keeps its label over the figures: label at the end edge, the direction
+   arrow before it. */
+.zx-table th:is([data-align="end"], [data-align="right"]) .zx-table__sort-button {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
+
+.zx-table th[data-align="center"] .zx-table__sort-button {
+  justify-content: center;
+}
+
 .zx-table__sort-button:hover {
   background: var(--zx-table-row-hover-bg, var(--zx-color-bg-hover));
   color: var(--zx-color-text);
@@ -298,12 +339,12 @@
 
 .zx-table th[aria-sort="ascending"] .zx-table__sort-button::after {
   content: "↑";
-  color: var(--zx-color-accent);
+  color: var(--zx-color-text-muted);
 }
 
 .zx-table th[aria-sort="descending"] .zx-table__sort-button::after {
   content: "↓";
-  color: var(--zx-color-accent);
+  color: var(--zx-color-text-muted);
 }
 
 .zx-table__body tr:last-child td {
@@ -314,28 +355,65 @@
   background: var(--zx-color-bg-page);
 }
 
+/* Checked rows of a multi-selection are picks and keep the accent tint. The selected row of a
+   single-selection table — no checkbox column — is the record you are on, the current row of a
+   master–detail list, and takes the neutral current fill instead. */
 .zx-table__body tr[aria-selected="true"] {
   background: var(--zx-table-row-selected-bg, var(--zx-color-bg-selected));
 }
 
+.zx-table__body tr[aria-selected="true"]:not(:has(> .zx-table__selection-cell)) {
+  background: var(--zx-table-row-selected-bg, var(--zx-color-bg-current));
+}
+
 .zx-table__body tr[data-row]:hover {
   background: var(--zx-color-bg-hover);
 }
 
+/* ------------------------------------------------------------------ plain -- */
+
+/*
+ * `variant: 'plain'` — for a table inside a card or panel that already draws the box: no outer
+ * frame, no header band, no zebra, hairline rows. The cells keep their padding, so the hover and
+ * selection fills never run up against the text.
+ */
+.zx-table[data-variant="plain"] .zx-table__scroll {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.zx-table[data-variant="plain"] .zx-table__table {
+  background: transparent;
+}
+
+.zx-table[data-variant="plain"] th {
+  background: var(--zx-table-header-bg, var(--zx-color-bg-surface));
+  border-block-end-color: var(--zx-table-border-color, var(--zx-color-border-subtle));
+}
+
+.zx-table[data-variant="plain"] .zx-table__scroll[data-sticky-header="false"] th {
+  background: transparent;
+}
+
+.zx-table[data-variant="plain"] .zx-table__scroll[data-zebra="true"] .zx-table__body tr:nth-child(even):not([aria-selected="true"]) {
+  background: transparent;
+}
+
+.zx-table[data-variant="plain"] .zx-table__body tr:last-child td {
+  border-block-end: 0;
+}
+
+
 .zx-table__checkbox {
+  display: block;
   inline-size: var(--zx-space-4);
   min-block-size: auto;
   block-size: var(--zx-space-4);
-  margin: 0;
+  margin: 0 auto;
   accent-color: var(--zx-color-accent);
 }
 
-.zx-table__selection-header,
-.zx-table__selection-cell {
-  inline-size: var(--zx-control-height);
-  text-align: center;
-}
-
 .zx-table__empty {
   padding-block: var(--zx-space-6);
   color: var(--zx-color-text-muted);
@@ -583,12 +661,9 @@
   content: none;
 }
 
-.zx-table[data-stacked] .zx-table__selection-cell {
-  justify-content: flex-start;
-}
-
-.zx-table[data-stacked] .zx-table__reorder-cell {
-  justify-content: flex-start;
+/* A card's checkbox and handle lead their line, where the auto margins would centre them. */
+.zx-table[data-stacked] :is(.zx-table__checkbox, .zx-table__row-handle) {
+  margin-inline: 0;
 }
 
 

package/src/components/table/table.js

@@ -15,6 +15,7 @@ import { sortRows } from './sort.js';
 /** @typedef {'asc'|'desc'} TableSortDirection */
 /** @typedef {false|'single'|'multi'} TableSelectionMode */
 /** @typedef {false|'cell'|'row'} TableEditMode */
+/** @typedef {'default'|'plain'} TableVariant */
 /** @typedef {'text'|'number'|'select'|'date'|'checkbox'|'textarea'|'custom'} TableEditorType */
 /** @typedef {'text'|'number'|'currency'|'percent'|'unit'} TableColumnType */
 /** @typedef {{value: unknown, label: string}} TableEditorOption */
@@ -59,7 +60,11 @@ import { sortRows } from './sort.js';
 /**
  * @typedef {Object} TableColumn
  * @property {string} id Row property and stable column identifier.
- * @property {string} label Visible header label.
+ * @property {string} label Visible header label. An empty label leaves the header blank — an
+ * icon or actions column — and the header is then named by `ariaLabel`, or by the id.
+ * @property {string} [ariaLabel] Accessible name of the column header, and the name the column
+ * chooser and the cell editors use. Needed when `label` is empty or terse (`'#'`); include the
+ * visible label's words in it when there is one.
  * @property {boolean} [sortable=false] Whether the header changes the active sort.
  * @property {string} [width='auto'] CSS width, `auto`, or an `fr` proportion. `fr` values are
  * converted into proportional percentages on `<col>` elements and enable `table-layout: fixed`;
@@ -128,6 +133,9 @@ import { sortRows } from './sort.js';
  * `setSort()` is inert: sorting a grouped table scatters the positions out of their sections, and
  * doing that silently is worse than not offering it. `sortMode: 'server'` still owns its own order.
  * @property {boolean} [zebra=true] Whether alternate rows use the zebra background.
+ * @property {TableVariant} [variant='default'] Frame treatment. `'default'` draws the table's own
+ * bordered box; `'plain'` is for a table inside a card or panel that already draws one — no outer
+ * frame, no header band, no zebra, hairline row dividers. Reflected as `data-variant` on the root.
  * @property {TableEditMode} [editMode=false] Inline editing mode. `'cell'` edits one cell, `'row'`
  * opens every editable cell of the row together and commits them as a unit. Editing is completely
  * inert while this is `false`.
@@ -288,6 +296,7 @@ export class Table extends Component {
     rowKind: null,
     rowKinds: null,
     zebra: true,
+    variant: 'default',
     editMode: false,
     editTrigger: 'double',
     hierarchy: false,
@@ -361,6 +370,8 @@ export class Table extends Component {
     }
     this._reconcileExpanded();
 
+    if (normalizeTableVariant(this.options.variant) === 'plain') root.dataset.variant = 'plain';
+
     this._table = h('table', { class: 'zx-table__table' });
     if (this._hierarchy) this._table.setAttribute('role', 'treegrid');
     this._colgroup = h('colgroup', { class: 'zx-table__columns' });
@@ -638,7 +649,7 @@ export class Table extends Component {
       const column = this._columns.find((candidate) => candidate.id === String(id));
       const index = this.getColumnOrder().indexOf(String(id));
       if (column && index >= 0) {
-        this._columnStatus.textContent = `Moved ${column.label} to position ${index + 1} of ${this._columns.length}.`;
+        this._columnStatus.textContent = `Moved ${tableColumnName(column)} to position ${index + 1} of ${this._columns.length}.`;
       }
     }
     return this;
@@ -1303,7 +1314,7 @@ export class Table extends Component {
       class: 'zx-table__column-status', role: 'status', ariaLive: 'polite'
     });
     const details = h('details', { class: 'zx-table__column-controls' },
-      h('summary', { class: 'zx-button zx-button--sm' }, icon('fields', { size: 13 }),
+      h('summary', { class: 'zx-btn', dataset: { size: 'sm' } }, icon('fields'),
         this._message('table.columns', 'Columns', [])),
       list);
     this._renderColumnControls();
@@ -1330,21 +1341,23 @@ export class Table extends Component {
         disabled: checked && visible.length === 1,
         dataset: { columnId: column.id, columnAction: 'toggle' }
       }) : null;
+      // The chooser lists every column by name, a blank-headed one included.
+      const name = tableColumnName(column);
       const label = toggle
-        ? h('label', { for: controlId }, toggle, h('span', {}, column.label))
-        : h('span', { class: 'zx-table__column-label' }, column.label);
+        ? h('label', { for: controlId }, toggle, h('span', {}, name))
+        : h('span', { class: 'zx-table__column-label' }, name);
       const order = this.options.columnReorder ? h('span', {
         class: 'zx-table__column-order', role: 'group',
-        ariaLabel: this._message('table.moveColumn', 'Move %1', [column.label])
+        ariaLabel: this._message('table.moveColumn', 'Move %1', [name])
       },
       h('button', {
         class: 'zx-table__column-move', type: 'button', disabled: index === 0,
-        ariaLabel: `Move ${column.label} earlier`,
+        ariaLabel: `Move ${name} earlier`,
         dataset: { columnId: column.id, columnAction: 'up' }
       }, icon('chevron-up', { size: 11 })),
       h('button', {
         class: 'zx-table__column-move', type: 'button', disabled: index === this._columns.length - 1,
-        ariaLabel: `Move ${column.label} later`,
+        ariaLabel: `Move ${name} later`,
         dataset: { columnId: column.id, columnAction: 'down' }
       }, icon('chevron-down', { size: 11 }))) : null;
       return h('div', { class: 'zx-table__column-option', dataset: { columnId: column.id } }, label, order);
@@ -1602,16 +1615,23 @@ export class Table extends Component {
     // What this header was built from, so `_renderBody()` can tell whether it is still the right one.
     this._headerSpanning = this._spanning;
     for (const column of this._visibleColumns()) {
-      const th = h('th', { scope: 'col' });
+      // `data-column` on the header and on every body cell, in every mode, so a read-only table
+      // can be styled per column as readily as an editable one.
+      const th = h('th', { scope: 'col', dataset: { column: column.id } });
       const align = column.align ?? (isNumericColumn(column) ? 'end' : null);
       if (align) th.dataset.align = align;
       if (column.headerTitle) th.title = column.headerTitle;
+      // A blank header (an icon or actions column) still needs a name, or every cell beneath it
+      // is announced with an empty column header.
+      const name = tableHeaderName(column);
+      if (name !== null) th.setAttribute('aria-label', name);
       // Withheld, not disabled: a header that invites a sort the component will refuse is worse
       // than a header that never offered one. The label still reads exactly the same.
       if (column.sortable && !this._spanning) {
         const button = h('button', {
           class: 'zx-table__sort-button',
-          type: 'button'
+          type: 'button',
+          ariaLabel: name ?? undefined
         }, h('span', { class: 'zx-table__header-label' }, column.label));
         this.listen(button, 'click', () => {
           const direction = this._sort?.id === column.id && this._sort.dir === 'asc' ? 'desc' : 'asc';
@@ -1769,9 +1789,9 @@ export class Table extends Component {
       // Written unconditionally: `responsive` can be switched on after the rows exist, and a
       // stacked cell has no column header above it to say what its value means.
       cell.dataset.label = column.label;
+      cell.dataset.column = column.id;
       if (column.popin === false) cell.dataset.popin = 'false';
       if (this._editMode !== false) {
-        cell.dataset.column = column.id;
         if (resolveEditable(column, row) !== false) {
           cell.dataset.editable = 'true';
           cell.tabIndex = -1;
@@ -1850,7 +1870,9 @@ export class Table extends Component {
       return;
     }
 
-    if (isInteractiveCellContent(target)) return;
+    // Only an editable table holds a click on a control inside a cell back from the row: there the
+    // click could otherwise open an editor. A read-only table activates the row as it always has.
+    if (this._editMode !== false && isInteractiveCellContent(target)) return;
 
     if (this._editMode !== false && this._editTrigger === 'single') {
       const cell = target?.closest('td[data-editable="true"]');
@@ -1881,7 +1903,7 @@ export class Table extends Component {
     if (!rowElement || !this._tbody.contains(rowElement)) return;
     const meta = this._rowMeta.get(rowElement);
     if (!meta) return;
-    if (isInteractiveCellContent(target)) return;
+    if (this._editMode !== false && isInteractiveCellContent(target)) return;
     if (this._editMode !== false && this._editTrigger === 'double') {
       const cell = target?.closest('td[data-editable="true"]');
       if (cell && this._tbody.contains(cell)) {
@@ -2027,7 +2049,7 @@ export class Table extends Component {
       ...props,
       class: textarea ? 'zx-table__editor-input zx-table__editor-textarea' : 'zx-table__editor-input',
       ...(textarea ? {} : { type: 'text' }),
-      ariaLabel: props.ariaLabel ?? `${column.label} row ${index + 1}`,
+      ariaLabel: props.ariaLabel ?? `${tableColumnName(column)} row ${index + 1}`,
       value: formatCellValue(column, value, row)
     }));
     host.append(input);
@@ -2046,8 +2068,10 @@ export class Table extends Component {
     const control = entry?.control;
     if (!control || typeof control.focus !== 'function') return;
     control.focus();
-    // Opening a text editor selects its content, so typing replaces the old value.
-    if (entry.type === 'text' && typeof control.select === 'function') control.select();
+    // Opening a text, number, or date editor selects its content, so typing replaces the old value
+    // ("6" over "1.00" gives 6, not 1.006). Selected after focus: NumberField rewrites its text on
+    // focus, from the grouped display to a plain re-parseable number.
+    if (editorSelectsOnEntry(entry.type) && typeof control.select === 'function') control.select();
   }
 
   /**
@@ -3008,6 +3032,15 @@ function initialExpanded(option) {
   return new Set(Array.isArray(option) ? option : []);
 }
 
+/**
+ * Resolves the `variant` option to one the stylesheet knows; anything else is the default frame.
+ * @param {unknown} value Requested variant.
+ * @returns {TableVariant}
+ */
+export function normalizeTableVariant(value) {
+  return value === 'plain' ? 'plain' : 'default';
+}
+
 /** @param {unknown} mode @returns {TableEditMode} */
 function normalizeEditMode(mode) {
   if (mode === 'cell' || mode === 'row') return mode;
@@ -3059,6 +3092,47 @@ export function normalizeTableColumns(columns) {
   });
 }
 
+/**
+ * The name a column goes by wherever it is named rather than shown: its `ariaLabel`, else its
+ * visible label, else its id. The column chooser lists columns by it and cell editors are labelled
+ * with it, so a column with a blank header still has a name in both.
+ * @param {Partial<TableColumn>|null|undefined} column Column descriptor.
+ * @returns {string} Non-empty name, unless the column has no id either.
+ */
+export function tableColumnName(column) {
+  for (const candidate of [column?.ariaLabel, column?.label]) {
+    const text = candidate == null ? '' : String(candidate).trim();
+    if (text) return text;
+  }
+  return String(column?.id ?? '');
+}
+
+/**
+ * The accessible name a column header needs on top of its content, or null when its visible label
+ * already names it. That is the `ariaLabel` when one is given, and the column id when the label is
+ * blank — an icon or actions column — so no header is announced as an empty column.
+ * @param {Partial<TableColumn>|null|undefined} column Column descriptor.
+ * @returns {string|null} Name to set as `aria-label`, or null.
+ */
+export function tableHeaderName(column) {
+  const label = column?.label == null ? '' : String(column.label).trim();
+  const explicit = column?.ariaLabel == null ? '' : String(column.ariaLabel).trim();
+  if (explicit) return explicit;
+  return label ? null : tableColumnName(column) || null;
+}
+
+/**
+ * Whether opening an editor of this type selects its content, so the first keystroke replaces the
+ * value instead of being appended to it. True for the single-line text, number, and date editors;
+ * a textarea keeps its caret, and a select, checkbox, or custom editor keeps its own focus
+ * behaviour.
+ * @param {TableEditorType|string} type Resolved editor type.
+ * @returns {boolean}
+ */
+export function editorSelectsOnEntry(type) {
+  return type === 'text' || type === 'number' || type === 'date';
+}
+
 /**
  * Reconciles saved or partial column IDs with every current column.
  * @param {TableColumn[]} columns Current columns.