@apliteni/apliteni-ui 0.107.0 → 0.108.0

package/guidelines/dense-tables.md

@@ -74,6 +74,18 @@
 
 **Except:** On a phone, a row whose long column is a paragraph stacks instead of scrolling: the short values on one line, the paragraph under them, and the header kept for screen readers. No column is dropped.
 
+## Keep identity sub-lines as text
+
+<!-- rule: pinned-identity-sub-lines -->
+
+**Why:** An ellipsis cannot cut a flex or grid box, so the name spills past the cell. No specimen draws it, because the cut needs a phone viewport.
+
+**Rule:** A pinned identity sub-line is running text.
+
+**Do:** Write it as a sentence, with any link inside.
+
+**Don't:** Lay a badge, a control or a picture along it, or make it a flex or grid box.
+
 ## Keep updates stable
 
 <!-- rule: states -->

package/guidelines/state-set.md

@@ -12,7 +12,7 @@
 
 **Don't:** Give the input a separate muted outline while the button uses `--ring`.
 
-**Except:** A scroll region inside a surface takes `--ring-scroll`: the same band drawn inward, with `--ring-scroll-offset`. An inset shadow paints under a box's own children, so a table scrolling under one erases the band; an outline survives it. A box that is itself the outermost surface — a panel, a card — keeps `--ring`. Text-entry controls may match `:focus-visible` on mouse focus. Both bands are declared once at the root and recomposed nowhere, because an outline leaves its offset unpainted. Adjust width and colour there.
+**Except:** A box whose own edges are a surface's — a scroll region, or a box filling a table cell — takes `--ring-scroll` with `--ring-scroll-offset`. A box that is the outermost surface, such as a panel or card, keeps `--ring`. Text-entry controls may match `:focus-visible` on mouse focus. Both bands are declared once at the root and recomposed nowhere, because an outline leaves its offset unpainted. Adjust width and colour there.
 
 ## Busy controls
 

package/package.json

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

package/react/dist/index.css

@@ -291,6 +291,15 @@
   outline-offset: var(--ring-offset);
   border-radius: var(--radius-xs);
 }
+.rx-sort {
+  max-width: 100%;
+  min-width: 0;
+}
+.rx-sort__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .rx-caret {
   margin-left: 2px;
   width: 16px;

package/react/dist/index.d.ts

@@ -207,6 +207,16 @@ type Column<T> = {
     num?: boolean;
     sortable?: boolean;
     render?: (row: T) => ReactNode;
+    /**
+     * `true` marks this column's body cells as holding one link and nothing else, so the
+     * link fills its cell and its focus ring outlines the cell rather than the words. It is
+     * the consumer's to declare because CSS counts elements and not words: a cell reading
+     * "Invoice 1162" with the number linked looks the same to a selector, and filling that
+     * one would put the number on a line of its own. The header cell is never marked — it
+     * holds a label, or a sort button that keeps its own ring.
+     * why: docs/components.md#dense-financial-tables
+     */
+    linked?: boolean;
 };
 type TableSort<T> = {
     key: (keyof T & string) | undefined;

package/react/dist/index.js

@@ -1284,10 +1284,15 @@ function DataTable({
                       scope: "col",
                       className: [pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.num && "ui-table__num", c.sortable && "rx-sortable"].filter(Boolean).join(" "),
                       "aria-sort": sort.key === c.key ? sort.dir === 1 ? "ascending" : "descending" : c.sortable && sortIsKnown ? "none" : void 0,
-                      children: c.sortable ? /* @__PURE__ */ jsxs13("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
-                        c.label,
-                        caret(c.key)
-                      ] }) : c.label
+                      children: c.sortable ? (
+                        // The label is its own box so it can truncate: in a pinned
+                        // identity column on a phone the header is capped, and a bare
+                        // text node would push the caret out of the cell instead.
+                        /* @__PURE__ */ jsxs13("button", { type: "button", className: "rx-sort", onClick: () => onSort(c.key), children: [
+                          /* @__PURE__ */ jsx17("span", { className: "rx-sort__label", children: c.label }),
+                          caret(c.key)
+                        ] })
+                      ) : c.label
                     },
                     c.key
                   )
@@ -1305,7 +1310,7 @@ function DataTable({
                       onChange: () => onToggle(r.name)
                     }
                   ) }) : null,
-                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx17("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
+                  columns.map((c, columnIndex) => /* @__PURE__ */ jsx17("td", { className: [c.num && "ui-table__num", pinnedIdentity && columnIndex === 0 && "ui-table__identity", c.linked && "ui-table__linked"].filter(Boolean).join(" "), children: c.render ? c.render(r) : String(r[c.key]) }, c.key))
                 ] }, r.name))
               ] })
             ]

package/src/styles/table.css

@@ -161,12 +161,42 @@
   top: 50%;
   translate: 0 -50%;
 }
-/* No focus rule here any more. #510 gave a cell link the ring with a rule of this file's
-   own, because `base.css` reached no bare `a`; #587 put `a` on that shared list, so this
-   one painted the same two declarations a second time. The guarantee is unchanged and
-   still held by src/styles/table-focus.test.js — the corner the band follows is the
-   `border-radius` above, which is this file's and stays.
-   why: guidelines/state-set.md#focus-rings */
+/* No generic focus rule here. #510 gave a cell link the ring because `base.css`
+   reached no bare `a`; #587 put `a` on that shared list, so this file only keeps
+   the filled-cell override below. why: guidelines/state-set.md#focus-rings */
+/* The handle: a cell MARKED `.ui-table__linked` holds one link and nothing else, so the
+   link fills the cell and its ring outlines the cell rather than the words. The cell hands
+   its padding over and nothing moves. `height: 1px` is the cell stating no height of its
+   own, which a percentage height on the link can resolve against; a cell is stretched to
+   its row either way, so no row changes.
+   The mark is the consumer's because a selector counts elements and not words: `:only-child`
+   reads `<td>Invoice <a>1162</a></td>` as a lone link too. The link is named rather than
+   denied — a denylist of the anchors that own their box went stale twice (#510).
+   why: docs/components.md#dense-financial-tables, #500
+   held by: src/styles/table-focus.test.js */
+.ui-table td.ui-table__linked:has(> :is(a:not([class]), a.ui-identity):only-child) { padding: 0; height: 1px; }
+.ui-table td.ui-table__linked > :is(a:not([class]), a.ui-identity):only-child {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--space-4) var(--space-4) var(--space-4) 0;
+  border-radius: var(--radius-xs);
+}
+.ui-table--dense td.ui-table__linked > :is(a:not([class]), a.ui-identity):only-child { padding: var(--space-2) var(--space-3); }
+.ui-table--compact td.ui-table__linked > :is(a:not([class]), a.ui-identity):only-child { padding: var(--space-1) var(--space-3); }
+/* Zebra insets the row's END cells only, so the fill does too: a marked identity behind a
+   selection column is a middle cell, and a step it never gave up would move its name. */
+.ui-table--zebra td.ui-table__linked:first-child > :is(a:not([class]), a.ui-identity):only-child { padding-left: var(--space-3); }
+.ui-table--zebra td.ui-table__linked:last-child > :is(a:not([class]), a.ui-identity):only-child { padding-right: var(--space-3); }
+/* The inward band, the one a scroll region takes: a filled cell's edges are the
+   table's, where the pinned column's border and the scroller's 4px side padding
+   cut an outset ring away. Its 1px gap is unpainted, and the ring is the outline. */
+.ui-table td.ui-table__linked > :is(a:not([class]), a.ui-identity):only-child:focus-visible {
+  outline: var(--ring-scroll);
+  outline-offset: var(--ring-scroll-offset);
+}
 
 .ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
 /* A numeric column is sized to its content while .ui-table__title claims the rest,
@@ -356,14 +386,78 @@
 a.ui-identity:hover { text-decoration: underline; }
 .ui-identity:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 @media (max-width: 720px) {
-  .ui-table--pinned .ui-table__identity { width: 1%; }
+  /* One line wide: nothing wraps, and --ui-table-identity-max is the ceiling a consumer
+     retunes. The cut takes NO margin — the cell is sticky and the next column scrolls
+     under it, so whatever the cut lets out is painted over that column. A child's ring
+     needs 3px and the cell's padding is 12px, so the room comes from the padding.
+     why: docs/components.md#dense-financial-tables, #500, #513 */
+  .ui-table--pinned .ui-table__identity {
+    width: 1%;
+    max-width: var(--ui-table-identity-max);
+    white-space: nowrap;
+    overflow: clip;
+    text-overflow: ellipsis;
+  }
+  /* A sub-line is one line of running text and cuts itself: the cell's ellipsis cannot
+     reach into a child block. 4px is a focused link's ring, inside the cell's padding.
+     Nothing is capped here — block layout already holds a child to the cell. */
+  .ui-table--pinned .ui-table__identity > * {
+    overflow: clip;
+    overflow-clip-margin: var(--space-1);
+    text-overflow: ellipsis;
+  }
+  /* A picture has no shorter form, so it keeps its intrinsic size and the cell cuts it.
+     Nothing caps it, so write neither a cap nor a reset of one here. #513 */
+  .ui-table--pinned .ui-table__identity :is(svg, img, canvas, video, picture) {
+    overflow: visible;
+    text-overflow: clip;
+  }
+  .ui-table--pinned .ui-table__identity > *:has(:is(svg, img, canvas, video, picture)) {
+    text-overflow: clip;
+  }
+  /* A control's label is text, so it yields: held to the cell and cut at its END. A kit
+     control centres its label, and a capped one that centres loses the front of it. #513 */
+  .ui-table--pinned .ui-table__identity :is(.ui-btn, .ui-nav__item, .ui-badge, button, input, select, textarea) {
+    max-width: 100%;
+    min-width: auto;
+    overflow: hidden;
+    justify-content: flex-start;
+    text-align: start;
+  }
+  /* `a:not([class])` above is an inline-block so a WRAPPING title link paints one ring.
+     Nothing wraps here, and an inline-block is atomic: `text-overflow` cannot cut inside
+     one, so the link came out cut mid-glyph. Inline, it draws one fragment and one
+     ring, and the line's ellipsis reaches it. #513 */
+  .ui-table--pinned .ui-table__identity a:not([class]) { display: inline; }
+  /* Except where the fill gave the lone link the cell's box: it cuts as a block box. */
+  .ui-table--pinned .ui-table__identity.ui-table__linked > a:not([class]):only-child {
+    display: block;
+    align-content: center;
+  }
+  /* The ring goes on the LINE: a link longer than the cell runs past the cut, so a ring
+     around the link has no surface to draw its right side on. Inward, like every ring
+     the kit puts in a clipped region. why: docs/foundations.md#the-focus-ring, #513 */
+  .ui-table--pinned .ui-table__identity > *:has(a:focus-visible) {
+    outline: var(--ring-scroll);
+    outline-offset: var(--ring-scroll-offset);
+    border-radius: var(--radius-xs);
+  }
+  .ui-table--pinned .ui-table__identity > * a:focus-visible { outline: none; }
+  .ui-table--pinned .ui-table__identity:not(.ui-table__linked):has(> a:focus-visible) {
+    outline: var(--ring-scroll);
+    outline-offset: var(--ring-scroll-offset);
+    border-radius: var(--radius-xs);
+  }
+  .ui-table--pinned .ui-table__identity:not(.ui-table__linked) > a:focus-visible { outline: none; }
   .ui-table--pinned .ui-identity__logo { display: none; }
-  .ui-table--pinned .ui-identity__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
-  .ui-table--pinned .ui-identity { max-width: var(--panel-sm); }
+  /* An inline-flex box is the one child block layout does not hold to the cell, so the
+     cap belongs on it. The whole name stays in the DOM; only the drawn line is cut. */
+  .ui-table--pinned .ui-identity { max-width: 100%; }
+  .ui-table--pinned .ui-identity__name { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 }
 
 /* One width reserves the selection track and offsets the adjacent identity. */
-.ui-table--pinned { --ui-table-selection-width: var(--space-12); }
+.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; }
 .ui-table--pinned .ui-table__selection + .ui-table__identity { left: var(--ui-table-selection-width); }
 
@@ -413,10 +507,44 @@ a.ui-identity:hover { text-decoration: underline; }
   .ui-table.ui-table--stack.ui-table--pinned > :where(thead, tbody) > tr > :where(.ui-table__identity, .ui-table__selection) {
     position: static; width: auto; min-width: 0; max-width: none;
     padding-inline: 0; border-right: 0; text-align: left;
+    /* The cap's cut goes with the cap: a card is as wide as the row, so there is
+       nothing to cut, and a clip box here would only reach a focused link's ring. */
+    overflow: visible; text-overflow: clip;
   }
+  /* The name is what the card is about, and a card has the width to wrap it. #500 put
+     `nowrap` on it for the narrow column, so the stacked row takes that off too. */
   .ui-table.ui-table--stack.ui-table--pinned .ui-identity__name {
     position: static; width: auto; height: auto; max-width: none;
-    overflow: visible; clip-path: none;
+    overflow: visible; clip-path: none; white-space: normal; text-overflow: clip;
+  }
+  .ui-table.ui-table--stack.ui-table--pinned .ui-table__identity > * {
+    overflow: visible; text-overflow: clip;
+  }
+  .ui-table.ui-table--stack.ui-table--pinned .ui-table__identity > * a {
+    max-width: none; overflow: visible; text-overflow: clip;
+  }
+  .ui-table.ui-table--stack.ui-table--pinned .ui-table__identity > a:not([class]) {
+    display: inline-block;
+  }
+  .ui-table.ui-table--stack.ui-table--pinned .ui-table__identity:not(.ui-table__linked):has(> a:focus-visible) {
+    outline: none;
+  }
+  .ui-table.ui-table--stack.ui-table--pinned .ui-table__identity:not(.ui-table__linked) > a:focus-visible {
+    outline: var(--ring);
+    outline-offset: var(--ring-offset);
+  }
+  /* A card has no column to fill: every cell is a block on its own line and the ROW pays
+     the inset, so the fill's padding would stand the link a step right of the card's text
+     edge and the cell's `height: 1px` would hold a block cell to one pixel. Written through
+     the row like the resets above it, so it outranks the fill and its density. */
+  .ui-table.ui-table--stack > tbody > tr > td.ui-table__linked:has(> :is(a:not([class]), a.ui-identity):only-child) { height: auto; }
+  .ui-table.ui-table--stack > tbody > tr > td.ui-table__linked > :is(a:not([class]), a.ui-identity):only-child {
+    width: auto; height: auto; padding: 0;
+  }
+  /* The stacked card gives the link its own box again, so it takes the outset band. */
+  .ui-table.ui-table--stack > tbody > tr > td.ui-table__linked > a:only-child:focus-visible {
+    outline: var(--ring);
+    outline-offset: var(--ring-offset);
   }
   /* The bleed now pays for the row's inset instead of the end cells', so the cells still
      start on the card's own text edge and the outline keeps its room on both sides. Same