@apliteni/apliteni-ui 0.126.0 → 0.128.0

package/guidelines/spacing.md

@@ -0,0 +1,51 @@
+# Spacing
+
+## Use two gaps
+
+<!-- rule: two-gaps -->
+
+**Rule:** Use the inner gap between parts of one group and the group gap between groups.
+
+**Why:** Two distances show what belongs together, and a reader never has to compare a third.
+
+**Do:** Treat a control row and the table it filters as one group.
+
+**Don't:** Add a third distance between sections.
+
+## Widen inner gaps on a touch phone
+
+<!-- rule: two-gaps-phone -->
+
+**Rule:** On a touch phone, match inner gaps to the chip rows' gap.
+
+**Why:** Chip rows open for a finger, so a smaller gap joins the table to the last row.
+
+**Do:** Move the table down with the chips.
+
+**Don't:** Keep the table's desktop gap.
+
+**Except:** The view strip stays tight, because its tabs meet the floor.
+
+## Keep a title on its block
+
+<!-- rule: title -->
+
+**Rule:** Keep a page or card title one inner gap above what it names, at every width.
+
+**Why:** With space on both sides, a title can belong to either block.
+
+**Do:** Hold a card's title to its first line.
+
+**Don't:** Float a title halfway between two groups.
+
+## Put text on the column edge
+
+<!-- rule: text-edge -->
+
+**Rule:** A control that draws no box starts its first label on the page title's edge.
+
+**Why:** With nothing drawn around it, an indented label reads as a misaligned line.
+
+**Do:** Let the view strip's highlight and ring hang into the margin.
+
+**Don't:** Move a filter chip or a table off the column edge.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.126.0",
+  "version": "0.128.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -49,6 +49,7 @@
     height: min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y)));
   }
   .ui-check input::before,
+  .ui-table__selection input[type=checkbox]::before,
   .ui-toast__close::before {
     width: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x))));
     height: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y))));
@@ -102,6 +103,14 @@
     --tap-clear-x: var(--tap-gap);
     --tap-clear-y: 0px;
   }
+  .ui-table__selection {
+    --tap-clear-x: var(--tap-min);
+    --tap-clear-y: var(--tap-min);
+  }
+  .ui-table--dense .ui-table__selection,
+  .ui-table--compact .ui-table__selection {
+    --tap-clear-y: 0px;
+  }
   .ui-toast {
     row-gap: var(--tap-gap) !important;
     --tap-clear-y: var(--tap-gap);

package/react/dist/index.js

@@ -1420,6 +1420,7 @@ function DataTable({
     }
   );
   const pageAllOn = selectable && slice.length > 0 && slice.every((r) => selected.has(r.name));
+  const pageSomeOn = selectable && !pageAllOn && slice.some((r) => selected.has(r.name));
   return /* @__PURE__ */ jsxs13(Fragment4, { children: [
     /* @__PURE__ */ jsx17(
       "div",
@@ -1442,6 +1443,9 @@ function DataTable({
                     type: "checkbox",
                     checked: pageAllOn,
                     "aria-label": "Select all rows on this page",
+                    ref: (input) => {
+                      if (input) input.indeterminate = pageSomeOn;
+                    },
                     onChange: () => onTogglePage(slice.map((r) => r.name))
                   }
                 ) }) : null,

package/src/styles/input.css

@@ -123,7 +123,9 @@
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
 }
 
-/* Checkbox / radio — custom, token-driven */
+/* Checkbox / radio — custom, token-driven. DataTable's selection boxes are bare
+   inputs in a cell with no label, and take the same box so a partial page reads in
+   the kit's paint rather than the browser's. #619 */
 .ui-check {
   display: inline-flex;
   align-items: flex-start;
@@ -133,7 +135,8 @@
   color: var(--text);
   line-height: 1.5;
 }
-.ui-check input {
+.ui-check input,
+.ui-table__selection input[type="checkbox"] {
   appearance: none;
   width: 19px;
   height: 19px;
@@ -146,6 +149,9 @@
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
   position: relative;
 }
+/* In a cell there is no label line to sit beside, so the box centres on the row's
+   text instead of dropping 1px to meet a label's first line. */
+.ui-table__selection input[type="checkbox"] { margin-top: 0; vertical-align: middle; }
 /* The target, not the ink. The box above is drawn at 19x19 because that is what
    sits beside a 15px label without shouting; WCAG 2.5.8 wants 24 CSS px of
    pointer target, which is a different question. This overlay answers it and
@@ -155,7 +161,8 @@
    inside the same <label> (which toggles the same input, so an overlap there
    would cost nothing) and 14px between stacked rows in the specimen. Measured
    in stories/guidelines/accessibility-floor.test.js. #219 */
-.ui-check input::before {
+.ui-check input::before,
+.ui-table__selection input[type="checkbox"]::before {
   content: '';
   position: absolute;
   left: 50%;
@@ -171,9 +178,12 @@
    accent band is the second band #578 round r34 took off the focus rules, and a
    pointer resting on a focused control would put it back. One indicator, which is
    what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
-.ui-check input:enabled:hover:not(:focus-visible) { border-color: var(--accent); }
-.ui-check input:checked { background: var(--accent); border-color: var(--accent); }
-.ui-check input[type="checkbox"]:checked::after {
+.ui-check input:enabled:hover:not(:focus-visible),
+.ui-table__selection input[type="checkbox"]:enabled:hover:not(:focus-visible) { border-color: var(--accent); }
+.ui-check input:checked,
+.ui-table__selection input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
+.ui-check input[type="checkbox"]:checked::after,
+.ui-table__selection input[type="checkbox"]:checked::after {
   content: "";
   position: absolute;
   left: 5px; top: 1.5px;
@@ -199,14 +209,59 @@
    ground together. A checked box drops the accent for the reason a disabled primary
    button does: the accent IS the "press me". Its mark inverts to --disabled-surface,
    so the tick and the dot keep the measured --disabled-ink pair in both themes. */
-.ui-check input:disabled {
+.ui-check input:disabled,
+.ui-table__selection input[type="checkbox"]:disabled {
   background: var(--disabled-surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   border-color: var(--disabled-border);
   cursor: not-allowed;
 }
-.ui-check input:disabled:checked { background: var(--disabled-ink); border-color: var(--disabled-ink); }
-.ui-check input[type="checkbox"]:disabled:checked::after { border-color: var(--disabled-surface); }
+.ui-check input:disabled:checked,
+.ui-table__selection input[type="checkbox"]:disabled:checked { background: var(--disabled-ink); border-color: var(--disabled-ink); }
+.ui-check input[type="checkbox"]:disabled:checked::after,
+.ui-table__selection input[type="checkbox"]:disabled:checked::after { border-color: var(--disabled-surface); }
 .ui-check input[type="radio"]:disabled:checked::after { background: var(--disabled-surface); /* code-bg: inherit — the mark inside the box; the box carries the focus indicator. */ }
+/* Partial: some of a group is on, not all. The checked box's fill with a level
+   dash where the tick would be, so the box still reads as "on" from across a table
+   and the dash alone says "not all". It wins over a tick when both are set, as the
+   browser's own box does. Drawn with a border, not a background, so forced colours
+   keeps the dash. #619 */
+.ui-check input[type="checkbox"]:indeterminate,
+.ui-table__selection input[type="checkbox"]:indeterminate { background: var(--accent); border-color: var(--accent); }
+.ui-check input[type="checkbox"]:indeterminate::after,
+.ui-table__selection input[type="checkbox"]:indeterminate::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 11px; height: 0; /* odd, so the 17px padding box splits into equal gaps */
+  border: solid var(--accent-contrast);
+  border-width: 2px 0 0;
+  transform: none;
+}
+/* White ink falls below 3:1 on the lighter dark-theme accents, so the tick, the dash and
+   the radio's dot take the ink a selected Segmented pill takes there. */
+:where(:root[data-theme="dark"]) .ui-check input[type="checkbox"]:enabled:is(:checked, :indeterminate)::after,
+:where(:root[data-theme="dark"]) .ui-table__selection input[type="checkbox"]:enabled:is(:checked, :indeterminate)::after { border-color: var(--signal-contrast); }
+:where(:root[data-theme="dark"]) .ui-check input[type="radio"]:enabled:checked::after { background: var(--signal-contrast); }
+.ui-check input[type="checkbox"]:disabled:indeterminate,
+.ui-table__selection input[type="checkbox"]:disabled:indeterminate { background: var(--disabled-ink); border-color: var(--disabled-ink); }
+.ui-check input[type="checkbox"]:disabled:indeterminate::after,
+.ui-table__selection input[type="checkbox"]:disabled:indeterminate::after { border-color: var(--disabled-surface); }
+/* Forced colours replace every fill, so a disabled box that painted only a fill and
+   a --disabled-* edge drew the same edge and mark as an enabled one, and a radio's dot
+   vanished. GrayText is the system colour for an unavailable control. The tick and the
+   dash are borders, so they keep it; the dot is a fill, so it names a system colour. */
+@media (forced-colors: active) {
+  .ui-check input:disabled,
+  .ui-check input:disabled:is(:checked, :indeterminate),
+  .ui-check input[type="checkbox"]:disabled:is(:checked, :indeterminate),
+  .ui-table__selection input[type="checkbox"]:disabled,
+  .ui-table__selection input[type="checkbox"]:disabled:is(:checked, :indeterminate) { border-color: GrayText; }
+  .ui-check input[type="checkbox"]:disabled:is(:checked, :indeterminate)::after,
+  .ui-table__selection input[type="checkbox"]:disabled:is(:checked, :indeterminate)::after { border-color: GrayText; }
+  .ui-check input[type="radio"]:enabled:checked::after { background: CanvasText; }
+  .ui-check input[type="radio"]:disabled:checked::after { background: GrayText; }
+}
 /* The label is the click target, so the cursor belongs on it, and the words it
    holds go quiet with the box beside them. */
 .ui-check:has(input:disabled) { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; }

package/src/styles/table.css

@@ -467,6 +467,9 @@ a.ui-identity:hover { text-decoration: underline; }
   .ui-table--pinned .ui-identity__name { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 }
 
+/* Automatic layout hands every column a share of the free width, and a box is not worth one: the selection column takes the width of its box and the gap after it. The pinned table below fixes it instead. */
+.ui-table .ui-table__selection { width: 1%; }
+
 /* One width reserves the selection track and offsets the adjacent identity. */
 .ui-table--pinned { --ui-table-selection-width: var(--space-12); --ui-table-identity-max: min(var(--panel-sm), 50vw); }
 .ui-table--pinned .ui-table__selection { box-sizing: border-box; width: var(--ui-table-selection-width); min-width: var(--ui-table-selection-width); max-width: var(--ui-table-selection-width); padding-inline: 0; text-align: center; }

package/src/styles/tap-zone.css

@@ -96,6 +96,7 @@
      with a 1.5px border, so without it the clamp takes this layer DOWN to 22
      and under the kit's own minimum. */
   .ui-check input::before,
+  .ui-table__selection input[type="checkbox"]::before,
   .ui-toast__close::before {
     width: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-x))));
     height: max(var(--tap-aa), min(max(100%, var(--tap-min)), calc(100% + var(--tap-clear-y))));
@@ -168,6 +169,12 @@
   }
   .ui-table__act { --tap-clear-x: var(--tap-gap); --tap-clear-y: 0px; }
 
+  /* The selection box is 19px in a 58px row and a 34px header: the layer has room to reach the floor both ways. */
+  .ui-table__selection { --tap-clear-x: var(--tap-min); --tap-clear-y: var(--tap-min); }
+  /* A dense or compact table's rows are 33px to 40px apart and share an edge, so a layer that grows down takes the pixels nearest the next row's box. Those rows keep the 24px floor. */
+  .ui-table--dense .ui-table__selection,
+  .ui-table--compact .ui-table__selection { --tap-clear-y: 0px; }
+
   /* Down only, like the nine rows below: a toast is a full row at this width,
      and opening it across took 24px out of the message for no reach at all —
      its action already clears the floor on the vertical half. The box does not