@apliteni/apliteni-ui 0.105.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.105.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;
@@ -469,6 +479,8 @@ type DropdownProps = {
     /** Replaces the trigger's label/value pair. With `ariaLabel`, names the trigger. */
     triggerContent?: ReactNode;
     triggerClass?: string;
+    /** The trigger is off: no stop, no panel, the kit's unavailable paint. #580 */
+    disabled?: boolean;
     chevron?: boolean;
     /** The edge the panel hugs. */
     align?: 'start' | 'end';
@@ -490,7 +502,7 @@ type DropdownProps = {
     /** Draw the row yourself. `props` is everything the row needs; spread it. */
     row?: (item: DropdownItem, props: DropdownRowProps) => ReactNode;
 };
-declare function Dropdown({ label, value, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
+declare function Dropdown({ label, value, placeholder, variant, items, sections, header, footer, triggerContent, triggerClass, disabled, chevron, align, direction, scroll, search, ariaLabel, id, panelClass, open: openProp, defaultOpen, onOpenChange, onSelect, row, }: DropdownProps): react.JSX.Element;
 
 type BackLinkOwnProps = {
     /** The address. No address, or a `javascript:` one, and nothing is rendered. */

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))
               ] })
             ]
@@ -1939,6 +1944,7 @@ function Dropdown({
   footer,
   triggerContent,
   triggerClass = "",
+  disabled = false,
   chevron = true,
   align = "start",
   direction = "down",
@@ -2235,6 +2241,7 @@ function Dropdown({
     trigger.current?.focus();
   };
   const onKeyDown = (e) => {
+    if (disabled && !open) return;
     const onTrigger = e.target === trigger.current;
     const onField = e.target === field.current;
     if (onField && composing(e)) return;
@@ -2299,14 +2306,14 @@ function Dropdown({
     if (!isRow(entry)) {
       return /* @__PURE__ */ jsx20("div", { className: "ui-dropdown__sep", role: "separator", hidden: filtering || void 0 }, key);
     }
-    const disabled = !!entry.disabled;
+    const disabled2 = !!entry.disabled;
     const selected = selectedOf(entry);
-    const asLink = !!entry.href && !disabled && !asOption;
+    const asLink = !!entry.href && !disabled2 && !asOption;
     const props = {
       className: cx6(
         "ui-dropdown__item",
         selected && "is-selected",
-        disabled && "is-disabled",
+        disabled2 && "is-disabled",
         entry.danger && "is-danger",
         Boolean(sx) && open && entry === active && "is-active"
       ),
@@ -2315,7 +2322,7 @@ function Dropdown({
       tabIndex: -1,
       ...entry.value != null ? { "data-value": String(entry.value) } : null,
       ...asOption ? { "aria-selected": selected } : null,
-      ...disabled ? { "aria-disabled": true } : null,
+      ...disabled2 ? { "aria-disabled": true } : null,
       ...asLink ? { href: entry.href, ...entry.target ? { target: entry.target } : null } : null,
       ...sx ? { id: rowIds.get(entry), hidden: hiddenBy(entry) || void 0 } : null,
       onClick: (e) => choose(entry, e),
@@ -2362,6 +2369,7 @@ function Dropdown({
         type: "button",
         className: cx6("ui-dropdown__trigger", triggerClass),
         "data-dropdown-trigger": "",
+        disabled: disabled || void 0,
         "aria-haspopup": sx ? "dialog" : listRole,
         "aria-expanded": open,
         "aria-label": ariaLabel && triggerContent != null ? ariaLabel : void 0,

package/src/components/dropdown.js

@@ -157,6 +157,8 @@ function ddSearchBody({ items, sections }, sx, name, scroll) {
  * @param {boolean} [o.portal]     mount the panel on <body>, for a clipping or sticky ancestor
  * @param {boolean|number} [o.scroll] true, or a maxHeight in px, to cap and scroll
  * @param {boolean} [o.open]       render already-open (handy for screenshots)
+ * @param {boolean} [o.disabled]   the trigger is off: no stop, no panel, the kit's
+ *   unavailable paint. #580
  * @param {string} [o.ariaLabel]   accessible name for the panel and trigger
  * @param {boolean|object} [o.search] true, or { placeholder, label, empty, hint, query } —
  *   a field above the rows that filters them; `empty` may carry {q}
@@ -166,7 +168,7 @@ export function dropdown({
   label, value, placeholder = 'Select…', variant, items, sections,
   foot = '', header = '', footer = '', triggerContent, triggerClass = '', chevron = true,
   align = 'start', direction = 'down', portal = false,
-  scroll = false, open = false, ariaLabel, id, panelClass = '', search = false,
+  scroll = false, open = false, disabled = false, ariaLabel, id, panelClass = '', search = false,
 } = {}) {
   const flat = sections ? sections.flatMap((s) => s.items || []) : (items || []);
   const isSelect = variant === 'select' || (variant == null && flat.some((it) => it && (it.selected || it.value != null)));
@@ -185,6 +187,9 @@ export function dropdown({
     'data-dropdown-trigger',
     `aria-haspopup="${sx ? 'dialog' : listRole}"`,
     `aria-expanded="${open ? 'true' : 'false'}"`,
+    // The attribute, not aria-disabled: a dropdown's trigger carries no message a
+    // reader has to stop on, so it leaves the tab order the way .ui-btn's does.
+    disabled ? 'disabled' : '',
     ariaLabel && triggerContent != null ? `aria-label="${esc(ariaLabel)}"` : '',
   ].filter(Boolean).join(' ');
 
@@ -269,6 +274,17 @@ const DD_GAP = 9;
 // below asks the container for its panel rather than querying inside it.
 const ddPanelOf = (dd) => dd.__ddPanel || dd.querySelector('[data-dropdown-panel]');
 
+// A trigger the sheet paints off. The kit paints both spellings unavailable, so
+// the wiring refuses both: the native attribute keeps the browser from
+// dispatching anything, but an aria-disabled trigger is still a keyboard stop,
+// and a click or an Enter on it reached openDropdown() until #580's round two.
+// ddItemsOf() above refuses an aria-disabled ROW the same way.
+// why: docs/foundations.md#colour-and-contrast
+const ddTriggerOff = (dd) => {
+  const trigger = dd.querySelector('[data-dropdown-trigger]');
+  return !!trigger && (trigger.disabled === true || trigger.getAttribute('aria-disabled') === 'true');
+};
+
 function ddGap(panel) {
   const declared = parseFloat(ddViewOf(panel).getComputedStyle(panel).getPropertyValue('--ui-dropdown-gap'));
   return Number.isFinite(declared) ? declared : DD_GAP;
@@ -836,6 +852,9 @@ function closeAllDropdowns(except) {
 }
 
 function openDropdown(dd, focusIdx) {
+  // Every way in goes through here — the trigger's click, the Enter the browser
+  // turns into one, and the arrows — so one refusal covers them all. #580
+  if (ddTriggerOff(dd)) return;
   closeAllDropdowns(dd);
   const panel = ddPanelOf(dd);
   const search = ddSearchOf(dd);

package/src/styles/dropdown.css

@@ -18,7 +18,11 @@
   font-weight: 500;
   color: var(--text);
   background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
-  border: 1px solid var(--border);
+  /* The kit's live control edge, the one .ui-btn takes on the same fill. --border
+     is what --disabled-border resolves to in LIGHT, so a live trigger used to draw
+     the exact line the kit paints an unavailable control with. #580
+     why: docs/foundations.md#colour-and-contrast */
+  border: 1px solid var(--control-edge);
   border-radius: var(--radius-pill);
   padding: 7px 11px 7px 13px;
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
@@ -29,6 +33,28 @@
    what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
 .ui-dropdown__trigger:hover:not(:focus-visible) { border-color: var(--accent); }
 .ui-dropdown__trigger:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+/* Off. The off hover-not-focus selectors are (0,4,0), above live hover's (0,3,0).
+   A pointer over a dead control changes nothing while an aria-disabled one keeps its stop and the ring.
+   No fill: --disabled-surface IS this control's --surface, in both themes. The
+   activation is refused in ddTriggerOff(), not with pointer-events, which would
+   take that stop away. #580 why: docs/foundations.md#colour-and-contrast */
+.ui-dropdown__trigger:disabled,
+.ui-dropdown__trigger:disabled:hover,
+.ui-dropdown__trigger:disabled:hover:not(:focus-visible),
+.ui-dropdown__trigger:disabled:focus-visible,
+.ui-dropdown__trigger[aria-disabled="true"]:hover,
+.ui-dropdown__trigger[aria-disabled="true"]:hover:not(:focus-visible),
+.ui-dropdown__trigger[aria-disabled="true"]:focus-visible,
+.ui-dropdown__trigger[aria-disabled="true"] {
+  border-color: var(--disabled-border);
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
+  cursor: not-allowed;
+}
+/* The prefix and the value carry inks of their own, so they take the state's. */
+.ui-dropdown__trigger:disabled .ui-dropdown__pre,
+.ui-dropdown__trigger:disabled .ui-dropdown__value,
+.ui-dropdown__trigger[aria-disabled="true"] .ui-dropdown__pre,
+.ui-dropdown__trigger[aria-disabled="true"] .ui-dropdown__value { color: inherit; }
 .ui-dropdown__pre { color: var(--text); }
 .ui-dropdown__value { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 

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

package/src/styles/topbar.css

@@ -206,10 +206,10 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:245 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:271 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:1088
+/* The row is a keyboard stop: src/components/dropdown.js:1107
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */