@apliteni/apliteni-ui 0.133.0 → 0.137.0

package/src/components/feedback.js

@@ -100,7 +100,7 @@ export function wireFeedback(opts = {}) {
   const minChars = opts.minChars == null ? 3 : opts.minChars;
   const sectionFn = typeof opts.section === 'function' ? opts.section : defaultSection;
   const onSend = typeof opts.onSend === 'function' ? opts.onSend : async () => ({ ok: false, error: 'No submit handler configured.' });
-  let pending = null, markSpan = null;
+  let pending = null, markSpan = null, opening = 0;
 
   function showPill(range) {
     const r = range.getBoundingClientRect();
@@ -141,6 +141,7 @@ export function wireFeedback(opts = {}) {
 
   function open() {
     if (!pending) return;
+    opening++;
     hidePill();
     quoteEl.textContent = pending.text.length > 200 ? pending.text.slice(0, 200) + '…' : pending.text;
     chip.textContent = pending.label || 'this page';
@@ -154,7 +155,7 @@ export function wireFeedback(opts = {}) {
   pill.addEventListener('mousedown', (e) => e.preventDefault());
   pill.addEventListener('click', open);
 
-  function close() { composer.classList.remove('show'); scrim.classList.remove('show'); clearHighlight(); pending = null; }
+  function close() { opening++; composer.classList.remove('show'); scrim.classList.remove('show'); clearHighlight(); pending = null; }
   q('[data-fb-close]').addEventListener('click', close);
   q('[data-fb-cancel]').addEventListener('click', close);
   q('[data-fb-done-close]').addEventListener('click', close);
@@ -168,12 +169,14 @@ export function wireFeedback(opts = {}) {
   }
   sendBtn.addEventListener('click', async () => {
     if (sendBtn.disabled || !pending) return;
+    const sentOpening = opening;
     errEl.classList.remove('show'); sendBtn.disabled = true; sendLb.innerHTML = '<span class="ui-fbspin"></span>Sending';
     const payload = { note: note.value.trim(), excerpt: pending.text, anchor: pending.anchor, sectionLabel: pending.label, sectionTitle: pending.title };
     try {
       const res = await onSend(payload);
+      if (opening !== sentOpening) return;
       if (!res || !res.ok) { fail(res && res.error); return; }
       form.style.display = 'none'; done.style.display = ''; clearHighlight();
-    } catch (e) { fail(); }
+    } catch (e) { if (opening === sentOpening) fail(); }
   });
 }

package/src/components/footer.js

@@ -13,18 +13,20 @@ const cx = (...a) => a.filter(Boolean).join(' ');
 // Minimal brand-glyph set for the optional social row. Feather-ish where generic,
 // simplified brand marks otherwise. Kept local so the footer is self-contained
 // (the shared icon set is line-only and has no brand glyphs).
+// LinkedIn: Font Awesome Free brands/linkedin.svg, CC BY 4.0.
 const SOCIAL = {
   github: '<path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.64 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.37.2 2.39.1 2.64.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85v2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2z"/>',
   x: '<path d="M4 3h4.5l4 5.5L17.5 3H21l-6.5 8.5L21 21h-4.5l-4.3-5.9L7 21H3.5l6.8-8.9z"/>',
-  linkedin: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 10v6M8 7v.01M12 16v-3a2 2 0 0 1 4 0v3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>',
+  linkedin: '<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>',
   mail: '<rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="m3 7 9 6 9-6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>',
 };
 
 function socialLink({ label, href = '#', icon: ic = 'github' } = {}) {
   const glyph = SOCIAL[ic] || SOCIAL.github;
-  const fill = ic === 'github' || ic === 'x' ? 'currentColor' : 'none';
+  const fill = ic === 'mail' ? 'none' : 'currentColor';
+  const viewBox = ic === 'linkedin' ? '0 0 448 512' : '0 0 24 24';
   return `<a class="ui-footer__social" href="${esc(safeUrl(href))}" aria-label="${esc(label || ic)}">` +
-    `<svg viewBox="0 0 24 24" fill="${fill}" aria-hidden="true">${glyph}</svg></a>`;
+    `<svg viewBox="${viewBox}" fill="${fill}" aria-hidden="true">${glyph}</svg></a>`;
 }
 
 function linkList(links = []) {

package/src/styles/button.css

@@ -15,7 +15,7 @@
   font-family: var(--font-sans);
   font-size: var(--btn-font);
   font-weight: var(--weight-medium);
-  line-height: 1;
+  line-height: var(--leading-tight);
   border-radius: var(--radius-sm);
   padding: var(--btn-pad-y) var(--btn-pad-x);
   cursor: pointer;

package/src/styles/card.css

@@ -46,15 +46,14 @@
    why: docs/foundations.md#spacing-and-rhythm */
 .ui-card--fit { width: fit-content; max-width: 100%; }
 
-/* An accent-tinted card, e.g. a highlighted plan / success surface. The accent edge is
-   the card's own hairline re-coloured: an inset ring over it would draw two. #295
+/* An accent-tinted card, e.g. a highlighted plan / success surface. It draws no accent
+   ring: the tint carries the signal and the edge is the plain card edge. #295
    The strength is --card-tint, per theme: light mixes down from white, so a tint that
-   works in dark sinks a light card below the page. Each variant edges itself in its own
-   colour. why: docs/foundations.md#elevation */
+   works in dark sinks a light card below the page. The accent card keeps the plain
+   edge. why: docs/foundations.md#elevation */
 .ui-card--accent {
   --ui-card-ground: color-mix(in srgb, var(--accent) var(--card-tint), var(--surface));
   background: color-mix(in srgb, var(--accent) var(--card-tint), var(--surface));
-  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
 }
 .ui-card--live {
   --ui-card-ground: color-mix(in srgb, var(--green) var(--card-tint), var(--surface));
@@ -77,6 +76,7 @@
    change of level. why: docs/foundations.md#elevation */
 .ui-card--interactive:hover { transform: translateY(-2px); }
 .ui-card--interactive:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+.ui-card--interactive .ui-card__sub:last-child { margin-bottom: 0; }
 
 /* card() emits the title as an h2, so the text face is named here rather than
    left to the element. why: docs/foundations.md#labels-and-titles */
@@ -111,6 +111,23 @@
   gap: var(--space-5);
   padding: var(--space-4) 2px;
 }
+/* A choice that does not fit beside its label drops under it whole, never into a column. */
+.ui-card__row:has(> .ui-seg) { flex-wrap: wrap; }
+.ui-card__row:has(> .ui-seg) > :first-child { flex: 1 1 10rem; min-width: 0; }
+.ui-card__row > .ui-seg { flex: none; flex-wrap: nowrap; }
+.ui-card__row > .ui-seg button { white-space: nowrap; }
+@media (max-width: 560px) {
+  .ui-card__row { flex-direction: column; align-items: flex-start; }
+  .ui-card__row > :first-child { width: 100%; }
+  .ui-card__row:has(> .ui-seg) > :first-child { flex: none; }
+}
+/* The Theme choice needs 195px and the narrowest settings row gives it 160. Its pills
+   give up inline padding as the viewport narrows. Other choices keep their tap width. */
+@media (max-width: 560px) {
+  .ui-card__row--tight-choice > .ui-seg:not(.ui-seg--sm):not(.ui-seg--underline) button {
+    padding-inline: clamp(var(--space-1), calc(var(--space-3) - (360px - 100vw) * 0.3), var(--space-3));
+  }
+}
 .ui-card__row + .ui-card__row { border-top: 1px solid var(--border); }
 .ui-card__row .lab { color: var(--strong); font-size: var(--text-md); font-weight: var(--weight-medium); }
 .ui-card__row .hint { color: var(--text); font-size: calc(var(--text-sm) + 0.5px); margin-top: 3px; }

package/src/styles/feedback.css

@@ -45,6 +45,7 @@
     opacity var(--dur-fast) var(--ease);
 }
 .ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
+.ui-fbpill:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-fbpill.show:hover { transform: translate(-50%, -100%) translateY(-12px) scale(1.04); }
 .ui-fbpill:active { transform: translate(-50%, -100%) translateY(-8px) scale(.98); }
 .ui-fbpill svg { width: 16px; height: 16px; stroke-width: 2.4; color: currentColor; }
@@ -78,14 +79,14 @@
 .ui-fbcomposer.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
 
 .ui-fbc__head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; }
-.ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
 .ui-fbc__x { margin-left: auto; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ /* muted-ink: glyph — dismiss icon */ color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; font: inherit; }
 .ui-fbc__x:hover { color: var(--strong); }
 .ui-fbc__x:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-fbc__x svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
-.ui-fbc__qm { color: var(--accent); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
+.ui-fbc__qm { color: var(--text); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
 .ui-fbc__quote q { quotes: none; color: var(--text); font-style: italic; font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; }
 .ui-fbc__body { padding: 14px 20px 0; }
 .ui-fbcomposer textarea {
@@ -129,7 +130,7 @@
 @keyframes uiFbCkSpring { 0% { transform: scale(1.32); } 62% { transform: scale(.965); } 82% { transform: scale(1.02); } 100% { transform: scale(1); } }
 
 /* Error banner */
-.ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); /* code-bg: inherit — text-only validation message has no nested focus target. */ color: var(--pink); font-size: var(--text-sm); padding: 11px 15px; border-radius: 11px; display: none; }
+.ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); /* code-bg: inherit — text-only validation message has no nested focus target. */ color: var(--chip-danger-ink); font-size: var(--text-sm); padding: 11px 15px; border-radius: 11px; display: none; }
 .ui-fbc__err.show { display: block; }
 /* A failed send's line fades in; wireFeedback() adds the class as it shows it. */
 .ui-fbc__err.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }

package/src/styles/footer.css

@@ -73,8 +73,9 @@
 /* Link columns */
 .ui-footer__nav {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
-  gap: 30px 56px;
+  flex: 1 1 400px;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 30px 40px;
 }
 .ui-footer__col-title {
   /* rank: label */
@@ -129,7 +130,7 @@
    fourth value of the footer's own: docs/foundations.md#breakpoints. */
 @media (max-width: 720px) {
   .ui-footer__top { flex-direction: column; gap: 30px; }
-  .ui-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
+  .ui-footer__nav { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
   .ui-footer__brand { max-width: none; }
 }
 @media (max-width: 560px) {

package/src/styles/layout.css

@@ -543,10 +543,10 @@
   .ui-app__drawer .ui-app__user-trigger { min-height: 44px; }
   .ui-app__main { padding: 28px var(--space-4) 56px; }
   .ui-app__main h1 { font-size: calc(var(--text-xl) + 3px); }
-  /* A settings row is label-beside-control down to the width where the control
-     no longer fits beside anything; below that it stacks. Scoped to the shell
-     rather than written into card.css, because a card row outside a shell is
-     somebody else's container to size — see the report. */
+  /* A settings row is label-beside-control, and below this step any control that does
+     not fit beside its label drops under it. A row that holds a choice wraps this way at
+     every width, in card.css. Scoped to the shell, because a card row outside a shell
+     is somebody else's container to size. */
   .ui-app__main .ui-card__row { flex-wrap: wrap; gap: var(--space-3); }
 }
 

package/src/styles/table.css

@@ -1,6 +1,6 @@
 /* ============================================================================
  * Table — .ui-table  (hairline rows, opaque base surface)
- * Row modifiers: .is-dead (revoked/struck), .is-target (landed on), right-aligned .ui-table__act
+ * Row modifiers: .is-dead (revoked, shown by its muted ink and a word), .is-target (landed on), right-aligned .ui-table__act
  * ========================================================================== */
 
 .ui-table {
@@ -52,14 +52,6 @@
 .ui-table th:last-child { padding-right: 0; }
 .ui-table td.ui-table__act { padding-right: 0; text-align: right; }
 .ui-table tr.is-dead td { /* muted-ink: state — revoked row */ color: var(--muted); }
-.ui-table tr.is-dead td.ui-table__title { text-decoration: line-through; }
-/* The strike is painted by the cell across its in-flow inline descendants, and an atomic
-   inline-level box is not one — so a linked name in a revoked row needs it struck itself.
-   On hover it carries both lines: the cell-link hover rule below is a whole `text-decoration`,
-   which would otherwise replace the strike with the underline.
-   held by: src/styles/table-focus.test.js */
-.ui-table tr.is-dead td.ui-table__title a { text-decoration: line-through; }
-.ui-table tr.is-dead td.ui-table__title a:hover { text-decoration-line: underline line-through; }
 .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); }
 
 /* Row hover: an inset, rounded fill so the highlight never sits flush against a
@@ -72,7 +64,6 @@
   border-spacing: 0;
   padding: 0 var(--space-2);
 }
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td { background: var(--surface-2); }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td:first-child {
   border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td:last-child {
@@ -106,8 +97,6 @@
 .ui-table--zebra td:first-child { padding-left: var(--space-3); }
 .ui-table--zebra th:last-child,
 .ui-table--zebra td:last-child { padding-right: var(--space-3); }
-.ui-table--zebra.ui-table--hover tbody tr:hover td,
-.ui-table--zebra tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
 
 /* A link in a cell is a value that happens to open something: the row's ink, underlined
    on hover — what .ui-identity below has always done. Without it, base.css's bare
@@ -213,7 +202,7 @@
  * bold only in the figure. Scoped to the table, the helper wins on either cell and the
  * row reads as one row. */
 .ui-table :is(th, td).ui-table__num--strong { color: var(--strong); font-weight: var(--weight-semibold); }
-.ui-table__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
+.ui-table__code { font-size: var(--text-sm); color: var(--text); }
 /* Two things in one cell — a row's own name and the state of it — side by side
  * while the column has room and stacked when it does not. The wrap comes from flex
  * because a dense cell is nowrap, and the column is then only as wide as the wider
@@ -234,13 +223,13 @@
 
 /* White in light, base canvas in dark; never a grey or tinted data surface. */
 .ui-table { background: var(--table-bg); }
-.ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td {
-  background: var(--table-bg);
+.ui-table--zebra tbody tr:nth-child(even) td { background: var(--table-bg); }
+/* A row hover is a quiet neutral step. The row paints under transparent cells in a
+   scroll region, while ordinary cells cover the row without breaking its fill. */
+.ui-table--hover tbody tr:hover:not(.is-target),
+.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  background: var(--surface-2);
 }
-.ui-table tbody tr:hover { outline: 1px solid var(--border-strong); outline-offset: -1px; }
 
 /* The row a reference landed a reader on. The mark is a GROUND, not a line: an outline
    says the keyboard is here (Artur, r34), and this one persists — it answers which row the
@@ -332,6 +321,9 @@
    beneath them. */
 .ui-table-scroll > .ui-table,
 .ui-table-scroll > .ui-table tbody td:not(.ui-table__identity, .ui-table__selection) { background-color: transparent; }
+.ui-table-scroll > .ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  background: var(--surface-2);
+}
 /* The kit's first ringed scroller, and a scroll region inside a card like the rest, so
    it draws the band inward too rather than spending a halo across the card around it.
    It had no room of its own to draw in — the padding above is horizontal — which is the
@@ -387,7 +379,7 @@
 .ui-delta--success { color: var(--chip-success-ink); }
 .ui-delta--danger { color: var(--chip-danger-ink); }
 .ui-identity { min-height: 24px; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; }
-.ui-identity__symbol { font-family: var(--font-mono); font-weight: var(--weight-semibold); }
+.ui-identity__symbol { font-weight: var(--weight-semibold); }
 .ui-identity__name { white-space: normal; max-width: var(--panel-sm); }
 .ui-identity__logo { width: 24px; height: 24px; flex: 0 0 24px; position: relative; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: var(--text-xs); }
 .ui-identity__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@@ -500,10 +492,8 @@ a.ui-identity:hover { text-decoration: underline; }
   .ui-table.ui-table--stack > tbody > tr {
     display: flex; flex-wrap: wrap; align-items: baseline;
     column-gap: var(--space-3); row-gap: var(--space-1);
-    /* The inset is on the row, not the table: the hover outline draws at the row's own
-       edge, so a pad on the table would put the outline back against the text (#71). It is
-       the step a dense cell already pays sideways, so the outline and the row separator keep
-       the clearance they had at the width above this one. */
+    /* The inset is on the row, not the table, so its hover fill and separator keep
+       their clearance at the width above this one. */
     padding: var(--space-3); border-bottom: 1px solid var(--border);
   }
   .ui-table.ui-table--stack > tbody > tr:last-child { border-bottom: 0; }
@@ -515,7 +505,21 @@ a.ui-identity:hover { text-decoration: underline; }
     display: block; width: auto; min-width: 0; max-width: 100%; height: auto;
     padding: 0; border-bottom: 0; white-space: normal; overflow-wrap: break-word;
   }
+  .ui-table.ui-table--stack.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+    background: transparent;
+  }
   .ui-table.ui-table--stack > tbody > tr > td.ui-table__long { flex: 0 0 100%; text-align: left; }
+  /* The head is gone, so an amount that names its column in `data-label` says it in front of
+     the figure, in the unit's size and body ink. */
+  .ui-table.ui-table--stack > tbody > tr > td[data-label]::before {
+    content: attr(data-label) / ""; margin-right: var(--space-1); font-size: var(--text-xs);
+  }
+  /* The cells of a stacked row are separate boxes with gaps between them, so a tint on each
+     would paint patches. The row paints one tint and the cells let it through. */
+  .ui-table.ui-table--stack tbody tr.is-target:is(*, :hover) {
+    background: color-mix(in srgb, var(--accent) 12%, transparent); /* code-bg: inherit — this translucent wash leaves the chip on its opaque ground. */
+  }
+  .ui-table.ui-table--stack tbody tr.is-target:is(*, :hover) > :is(td, th) { background: transparent; }
   /* A stacked row has no columns left to pin, stick or inset, and the identity's name is
      what the row is about — the fold hides it only because a pinned column is narrow. */
   .ui-table.ui-table--stack.ui-table--pinned > :where(thead, tbody) > tr > :where(.ui-table__identity, .ui-table__selection) {

package/src/tokens/tokens.css

@@ -574,10 +574,7 @@
 .ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
 .ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td,
 .ui-toast,
 .ui-toast--soft,
 .ui-toast--outline,
@@ -598,10 +595,14 @@
 .ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
-.ui-table--zebra tbody tr:nth-child(even) td,
-.ui-table--zebra tbody tr:hover td,
-.ui-table--zebra.ui-table--hover tbody tr:hover td { --code-bg: var(--table-code-bg); }
+.ui-table--zebra tbody tr:nth-child(even) td { --code-bg: var(--table-code-bg); }
+/* A neutral hovered row gives an inline code chip the card surface. The step from
+ * --surface-2 clears 1.1:1 in both themes, even when the table follows a card. */
+.ui-table--hover tbody tr:hover:not(.is-target),
+.ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th),
+.ui-table-scroll > .ui-table--hover tbody tr:hover:not(.is-target) > :is(td, th) {
+  --code-bg: var(--surface);
+}
 .ui-card--accent,
 .ui-card--live,
 .ui-snippet--reveal { --code-bg: var(--surface); }