@zeyos/zx 4.4.0 → 5.2.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,15 +106,15 @@
   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 {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -141,7 +143,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 {
@@ -155,7 +156,8 @@
 
 .zx-tabbox[data-variant="bracket"] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -175,35 +177,37 @@
   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 {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
 /* ------------------------------------------------------------- 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 +218,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);
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -237,18 +238,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. */
@@ -286,6 +294,7 @@
 }
 
 .zx-tabbox__panel:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }

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); }
@@ -108,7 +108,7 @@
 }
 
 .zx-table__column-move:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -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 {
@@ -273,20 +298,40 @@
 }
 
 .zx-table__sort-button {
+  /* At least 24px tall (WCAG 2.5.8 target size) without making the header any taller: the height
+     the label's line lacks is padding, handed back by a negative margin of the same size. */
+  --zx-table-sort-slack: max(0px, (24px - 1lh) / 2);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: auto;
+  min-block-size: 24px;
   border: 0;
   border-radius: var(--zx-radius-sm);
   background: inherit;
   color: inherit;
-  padding: 0;
+  margin-block: calc(-1 * var(--zx-table-sort-slack));
+  padding: var(--zx-table-sort-slack) 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 +343,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,26 +359,127 @@
   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;
+}
+
+
+/*
+ * The selection checkboxes are drawn rather than native. A native checkbox paints its glyph across
+ * its whole box, so the only way to give it a 24px target (WCAG 2.5.8) would be a 24px glyph. Here
+ * the box stays the --zx-space-4 square it always was and a transparent border around it makes up
+ * the rest of the target — the inset shadow that draws the box's edge sits inside that border.
+ * Forced colours get the native control back, which the system paints in its own colours.
+ */
 .zx-table__checkbox {
+  --zx-table-checkbox-slack: max(0px, (24px - var(--zx-space-4)) / 2);
+  appearance: none;
+  display: grid;
+  place-content: center;
+  box-sizing: content-box;
   inline-size: var(--zx-space-4);
-  min-block-size: auto;
   block-size: var(--zx-space-4);
-  margin: 0;
-  accent-color: var(--zx-color-accent);
+  min-block-size: auto;
+  margin: 0 auto;
+  border: var(--zx-table-checkbox-slack) solid transparent;
+  border-radius: calc(var(--zx-radius-sm) + var(--zx-table-checkbox-slack));
+  padding: 0;
+  background: var(--zx-color-bg-control) padding-box;
+  box-shadow: inset 0 0 0 1px var(--zx-color-text-subtle);
+  color: var(--zx-color-on-accent);
+  cursor: pointer;
 }
 
-.zx-table__selection-header,
-.zx-table__selection-cell {
-  inline-size: var(--zx-control-height);
-  text-align: center;
+.zx-table__checkbox::before {
+  content: "";
+  inline-size: calc(var(--zx-space-4) * .625);
+  block-size: calc(var(--zx-space-4) * .625);
+  background: currentColor;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
+  visibility: hidden;
+}
+
+.zx-table__checkbox:hover:not(:disabled) {
+  box-shadow: inset 0 0 0 1px var(--zx-color-text-muted);
+}
+
+.zx-table__checkbox:is(:checked, :indeterminate) {
+  background-color: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
+}
+
+.zx-table__checkbox:is(:checked, :indeterminate)::before {
+  visibility: visible;
+}
+
+.zx-table__checkbox:indeterminate::before {
+  clip-path: inset(40% 5%);
+}
+
+.zx-table__checkbox:focus-visible {
+  outline-color: transparent;
+  outline-offset: calc(-1 * var(--zx-table-checkbox-slack));
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent), var(--zx-focus-ring);
+}
+
+.zx-table__checkbox:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  .zx-table__checkbox {
+    appearance: auto;
+  }
+
+  .zx-table__checkbox::before {
+    content: none;
+  }
 }
 
 .zx-table__empty {
@@ -377,7 +523,7 @@
 }
 
 .zx-table__tree-toggle:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -441,13 +587,20 @@
   cursor: cell;
 }
 
-/* Cells carry a roving tabindex, so their ring must sit inside the cell box — an outer ring would
-   be painted over by the neighbouring cell. */
-.zx-table__body td[data-editable="true"]:focus-visible {
-  outline: 0;
+/* Rows and cells carry the grid's roving tabindex, so their ring sits inside the box — an outer
+   ring would be painted over by the neighbouring row or cell, or clipped by the scroll region. The
+   outline stays, transparent, for forced colours to paint. */
+.zx-table__body :is(tr[data-row], td, th)[tabindex]:focus-visible {
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
+/* A row moved to by keyboard scrolls clear of the sticky header rather than behind it. */
+.zx-table__body > tr[data-row] {
+  scroll-margin-block: calc(var(--zx-control-height) + var(--zx-space-2)) var(--zx-space-2);
+}
+
 .zx-table__body td[data-editing="true"] {
   position: relative;
 }
@@ -583,12 +736,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;
 }