@zeyos/zx 2.1.0 → 2.2.0

package/src/components/table/table.css

@@ -0,0 +1,364 @@
+.zx-table {
+  min-inline-size: 0;
+}
+
+.zx-table__scroll {
+  position: relative;
+  max-inline-size: 100%;
+  overflow: auto;
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-surface);
+  scrollbar-gutter: stable;
+}
+
+/* Loading state (Table.setLoading): dim rows and show an indeterminate top progress bar. */
+.zx-table[data-loading="true"] .zx-table__body {
+  opacity: 0.5;
+}
+
+.zx-table[data-loading="true"] .zx-table__scroll::after {
+  content: "";
+  position: sticky;
+  inset-block-start: 0;
+  inset-inline: 0;
+  display: block;
+  block-size: 2px;
+  margin-block-end: -2px;
+  background: var(--zx-color-accent);
+  opacity: 0.85;
+  z-index: 2;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-table[data-loading="true"] .zx-table__scroll::after {
+    background: linear-gradient(90deg,
+      transparent 0%,
+      var(--zx-color-accent) 50%,
+      transparent 100%);
+    background-size: 40% 100%;
+    background-repeat: no-repeat;
+    animation: zx-table-loading 1.1s var(--zx-ease) infinite;
+  }
+}
+
+@keyframes zx-table-loading {
+  from { background-position: -40% 0; }
+  to { background-position: 140% 0; }
+}
+
+.zx-table__table {
+  inline-size: 100%;
+  border-spacing: 0;
+  background: var(--zx-color-bg-surface);
+  color: var(--zx-color-text);
+}
+
+/* Auto layout (intrinsic/px columns): let content set the width and scroll horizontally. */
+.zx-table__table[data-layout="auto"] {
+  min-inline-size: max-content;
+}
+
+/* Fixed layout (fr/proportional columns): fill the container. `max-content` must NOT apply here —
+   with table-layout:fixed and percentage <col> widths it resolves to a runaway width. */
+.zx-table__table[data-layout="fixed"] {
+  table-layout: fixed;
+}
+
+.zx-table__selection-column {
+  inline-size: var(--zx-control-height);
+}
+
+.zx-table th,
+.zx-table td {
+  border-block-end: 1px solid var(--zx-table-border-color, var(--zx-color-border));
+  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));
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: 650;
+}
+
+.zx-table__scroll[data-sticky-header="true"] th {
+  position: sticky;
+  z-index: 1;
+  inset-block-start: 0;
+}
+
+.zx-table th[data-align="center"],
+.zx-table td[data-align="center"] {
+  text-align: center;
+}
+
+.zx-table th[data-align="end"],
+.zx-table td[data-align="end"],
+.zx-table th[data-align="right"],
+.zx-table td[data-align="right"] {
+  text-align: end;
+}
+
+.zx-table th[data-align="left"],
+.zx-table td[data-align="left"] {
+  text-align: left;
+}
+
+.zx-table__sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zx-space-2);
+  inline-size: 100%;
+  min-block-size: auto;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: inherit;
+  color: inherit;
+  padding: 0;
+  text-align: inherit;
+}
+
+.zx-table__sort-button:hover {
+  background: var(--zx-table-row-hover-bg, var(--zx-color-bg-hover));
+  color: var(--zx-color-text);
+}
+
+.zx-table__sort-button:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-table th[aria-sort="ascending"] .zx-table__sort-button::after {
+  content: "↑";
+  color: var(--zx-color-accent);
+}
+
+.zx-table th[aria-sort="descending"] .zx-table__sort-button::after {
+  content: "↓";
+  color: var(--zx-color-accent);
+}
+
+.zx-table__body tr:last-child td {
+  border-block-end: 0;
+}
+
+.zx-table__scroll[data-zebra="true"] .zx-table__body tr:nth-child(even):not([aria-selected="true"]) {
+  background: var(--zx-color-bg-page);
+}
+
+.zx-table__body tr[aria-selected="true"] {
+  background: var(--zx-table-row-selected-bg, var(--zx-color-bg-selected));
+}
+
+.zx-table__body tr[data-row]:hover {
+  background: var(--zx-color-bg-hover);
+}
+
+.zx-table__checkbox {
+  inline-size: var(--zx-space-4);
+  min-block-size: auto;
+  block-size: var(--zx-space-4);
+  margin: 0;
+  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);
+  text-align: center;
+}
+
+/* --- Inline editing (Table editMode) -------------------------------------------------------- */
+
+/* Reserve a control-sized content box in every body cell as soon as the table is editable, so
+   opening an editor never changes a row's height. On a table cell `block-size` is a minimum, which
+   is exactly the wanted behaviour: taller content still grows the row. */
+.zx-table[data-edit-mode] .zx-table__body td {
+  block-size: var(--zx-control-height);
+}
+
+.zx-table__body td[data-editable="true"] {
+  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;
+  box-shadow: inset var(--zx-focus-ring);
+}
+
+.zx-table__body td[data-editing="true"] {
+  position: relative;
+}
+
+/* The cell keeps its rendered content while editing — invisible, but still contributing its
+   intrinsic width, so no column resizes when an editor opens. */
+.zx-table__cell-shadow {
+  visibility: hidden;
+}
+
+/* No z-index: the editor must stay below the sticky header, which sets one. */
+.zx-table__editor {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+  padding-inline: var(--zx-space-1);
+  background: var(--zx-color-bg-surface);
+}
+
+.zx-table__editor > * {
+  inline-size: 100%;
+}
+
+.zx-table__editor[data-editor="checkbox"] {
+  justify-content: center;
+}
+
+.zx-table__editor[data-editor="checkbox"] > * {
+  inline-size: auto;
+}
+
+.zx-table__editor-input {
+  inline-size: 100%;
+  min-block-size: 0;
+  block-size: var(--zx-control-height);
+  padding-inline: var(--zx-space-2);
+}
+
+.zx-table__editor-textarea {
+  block-size: 100%;
+  padding-block: var(--zx-space-1);
+  resize: none;
+}
+
+.zx-table__body td[data-invalid="true"] .zx-table__editor {
+  box-shadow: inset 0 0 0 1px var(--zx-color-danger);
+}
+
+.zx-table__body td[data-invalid="true"] .zx-table__editor-input {
+  border-color: var(--zx-color-danger);
+}
+
+/* Validation live region: always in the DOM so announcements are not missed, collapsed while it
+   holds no message. */
+.zx-table__message {
+  padding: var(--zx-space-2) var(--zx-space-3);
+  color: var(--zx-color-danger);
+  font-size: var(--zx-text-sm);
+}
+
+.zx-table__message:empty {
+  display: none;
+}
+
+/* ------------------------------------------------------------------ stacked -- */
+
+/*
+ * Below the `responsive` width each row becomes a card of label/value pairs, because a dense ERP
+ * table in a 320px pane is not a table any more — it is a horizontal scrollbar with data hidden
+ * behind it. The width is measured on the table's own container rather than the viewport, so this
+ * turns on inside a narrow split pane on a wide screen, which is where it is needed most.
+ *
+ * The layout works by dropping `display: table`, which also drops the implicit ARIA roles — the
+ * component states them explicitly for exactly as long as this mode is on. See `_applyStackedRoles`.
+ */
+.zx-table[data-stacked] .zx-table__table,
+.zx-table[data-stacked] .zx-table__body,
+.zx-table[data-stacked] .zx-table__body > tr {
+  display: block;
+  inline-size: 100%;
+}
+
+/* The header is redundant once every cell carries its own label, and its widths would fight the
+   card layout. Hidden outright rather than visually: the labels replace it in the a11y tree too. */
+.zx-table[data-stacked] .zx-table__head,
+.zx-table[data-stacked] .zx-table__columns {
+  display: none;
+}
+
+.zx-table[data-stacked] .zx-table__body > tr {
+  padding-block: var(--zx-space-3);
+  padding-inline: var(--zx-space-4);
+  border-block-end: 1px solid var(--zx-color-border);
+}
+
+.zx-table[data-stacked] .zx-table__body td {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--zx-space-4);
+  inline-size: auto;
+  padding-block: var(--zx-space-1);
+  padding-inline: 0;
+  border: 0;
+  text-align: start;
+  white-space: normal;
+}
+
+/*
+ * Matched on the attribute rather than overridden afterwards: the selection checkbox and the empty
+ * row carry no `data-label`, and the two `content: none` rules that used to exclude them were less
+ * specific than this one, so they never applied — leaving an empty generated box in each.
+ */
+.zx-table[data-stacked] .zx-table__body td[data-label]::before {
+  content: attr(data-label);
+  flex: none;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+
+/* A column marked `popin: false` is what identifies the row, so it leads the card instead of
+   becoming another labelled line. */
+.zx-table[data-stacked] .zx-table__body td[data-popin="false"] {
+  display: block;
+  padding-block-end: var(--zx-space-2);
+  font-size: var(--zx-text-lg);
+  font-weight: 600;
+}
+
+.zx-table[data-stacked] .zx-table__body td[data-popin="false"]::before {
+  content: none;
+}
+
+.zx-table[data-stacked] .zx-table__selection-cell {
+  justify-content: flex-start;
+}
+
+
+.zx-table[data-stacked] .zx-table__empty-row {
+  display: block;
+}
+
+
+/*
+ * The growing control. Outside the table rather than in a `<tfoot>` spanning every column: it is a
+ * command, not data, and a button inside the grid would answer the row navigation keys as though
+ * it were a cell.
+ */
+.zx-table__more {
+  display: block;
+  inline-size: 100%;
+  margin-block-start: var(--zx-space-2);
+  border: 1px dashed var(--zx-color-border);
+  background: none;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-control-font-size);
+}
+
+.zx-table__more:hover {
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}