@zeyos/zx 4.3.4 → 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',
@@ -179,7 +183,7 @@ export class Tabbox extends Component {
       children.push(h('span', {
         class: 'zx-tabbox__close zx-icon-btn',
         ariaHidden: 'true',
-        title: 'Close'
+        title: this._message('tabbox.close', 'Close')
       }, icon('x', { size: 14 })));
     }
     const tab = /** @type {HTMLButtonElement} */ (h('button', {
@@ -467,6 +471,17 @@ export class Tabbox extends Component {
   _recordForTab(tab) {
     return this._tabs.find((record) => record.tab === tab) ?? null;
   }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback English default.
+   * @returns {string}
+   */
+  _message(key, fallback) {
+    const message = this.msg(key);
+    return message === key ? fallback : message;
+  }
 }
 
 /**

package/src/components/table/table.css

@@ -5,7 +5,10 @@
 .zx-table__column-controls {
   position: relative;
   inline-size: max-content;
-  margin: 0 0 var(--zx-space-2) auto;
+  /* `auto` on the inline start, so the controls sit at the trailing edge of the table in either
+     direction. The four-value `margin` shorthand this replaces resolved to the physical left. */
+  margin-block: 0 var(--zx-space-2);
+  margin-inline: auto 0;
 }
 
 .zx-table__reorder-status {
@@ -61,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); }
@@ -129,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;
@@ -168,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. */
@@ -211,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. */
@@ -224,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 {
@@ -261,9 +289,12 @@
   text-align: end;
 }
 
+/* `left` is the legacy spelling of `start`, exactly as `right` above is the legacy spelling of
+   `end`: the alignment follows the writing direction, so a column pinned to `left` sits on the
+   right of an RTL table. A caller that means the physical edge sets `text-align` itself. */
 .zx-table th[data-align="left"],
 .zx-table td[data-align="left"] {
-  text-align: left;
+  text-align: start;
 }
 
 .zx-table__sort-button {
@@ -278,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);
@@ -292,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 {
@@ -308,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);
@@ -379,6 +463,49 @@
   min-inline-size: 0;
 }
 
+/* --- Group and section rows (Table rowKinds) ------------------------------------------------ */
+
+/*
+ * A `span` kind renders one `<th scope="colgroup">` across the whole row, because the cell labels
+ * the columns of the records beneath it rather than holding a value of its own. Using `<th>` for
+ * that reason means inheriting the header's look and its sticky positioning, neither of which
+ * belongs on a body cell — the sticky one would pin every section to the top of the scroller and
+ * pile them up there — so both are taken back off here.
+ *
+ * What is NOT here is a look. No tint, no weight, no rule above it: a billing section is not a
+ * kanban swimlane, a default would be the first thing every consumer overrides, and `rowKinds[kind]
+ * .class` is where the decision belongs.
+ */
+.zx-table .zx-table__body th.zx-table__section-cell {
+  position: static;
+  z-index: auto;
+  background: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  text-align: start;
+}
+
+.zx-table__body tr:last-child > .zx-table__section-cell {
+  border-block-end: 0;
+}
+
+/*
+ * Stacked, a spanning row is its heading and nothing else. The labelled-line treatment is what the
+ * rest of the card is made of, and applying it here produces a heading followed by a column of
+ * empty labelled blanks — the exact artefact hosts are writing stylesheet workarounds for.
+ */
+.zx-table[data-stacked] .zx-table__body > tr[data-span] > * {
+  display: block;
+  inline-size: auto;
+  padding-inline: 0;
+  text-align: start;
+}
+
+.zx-table[data-stacked] .zx-table__body > tr[data-span] > *::before {
+  content: none;
+}
+
 /* --- Inline editing (Table editMode) -------------------------------------------------------- */
 
 /* Reserve a control-sized content box in every body cell as soon as the table is editable, so
@@ -534,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;
 }