@apliteni/apliteni-ui 0.94.0 → 0.96.0

package/src/styles/motion.css

@@ -81,7 +81,7 @@
 .m-skeleton {
   position: relative;
   overflow: hidden;
-  background: color-mix(in srgb, var(--text) 8%, transparent); /* ring-gap: inherit — loading placeholder has no nested focus target. */
+  background: color-mix(in srgb, var(--text) 8%, transparent); /* code-bg: inherit — loading placeholder has no nested focus target. */
   border-radius: var(--radius-sm, 8px);
 }
 .m-skeleton::after {

package/src/styles/nav.css

@@ -75,9 +75,9 @@
   transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
 }
 .ui-nav .ui-nav__item { color: var(--text); } /* (0,2,0): a host sheet's a:link is (0,1,1) — why: docs/components.md#the-page-shell */
-.ui-nav__item:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--strong); }
+.ui-nav__item:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); /* code-bg: inherit — The wash keeps the containing ground. */ color: var(--strong); }
 .ui-nav__item.is-active {
-  background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   color: var(--strong);
   font-weight: 500;
 }
@@ -86,8 +86,8 @@
    ground the rail stands on, so layout.css takes it the next rung where the rail
    is itself --surface. #475 r33/r34. why: docs/components.md#the-page-shell */
 
-.ui-nav__item:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
-.ui-nav__item.is-active:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-nav__item:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
+.ui-nav__item.is-active:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 
 .ui-nav__ic { display: inline-flex; flex: none; }
 .ui-nav__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; opacity: 0.72; }
@@ -112,10 +112,10 @@
 /* Destructive row (sign out, revoke). Body ink at rest, --pink once a pointer or
    the keyboard reaches it — as .ui-btn--danger and .ui-dropdown__item do. */
 .ui-nav__item.is-danger { color: var(--text); }
-.ui-nav__item.is-danger:hover { background: var(--glow-pink); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--pink); }
+.ui-nav__item.is-danger:hover { background: var(--glow-pink); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ color: var(--pink); }
 /* Tabbing onto it is the same "about to click this" the pointer means. The ring
    says where you are; only this says what the row does. */
-.ui-nav__item.is-danger:focus-visible { background: var(--glow-pink); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--pink); }
+.ui-nav__item.is-danger:focus-visible { background: var(--glow-pink); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ color: var(--pink); }
 /* An unavailable row uses disabled ink directly; opacity would also fade its
    background and pull its label toward the rail behind it (#220). */
 .ui-nav__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: default; pointer-events: none; }
@@ -134,17 +134,17 @@
   font-size: var(--text-xs);
   font-weight: 600;
   line-height: 1;
-  background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
   color: var(--text);
   /* The count fades with the words. It is never lost: sidebarNav() spells it
      into the row's aria-label, so "Pending 3" is what a reader hears at either
      width. */
   transition: opacity var(--dur-fast) var(--ease);
 }
-.ui-nav__badge.is-accent { background: var(--glow-purple); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--accent); }
-.ui-nav__badge.is-live { background: var(--chip-success-fill); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--chip-success-ink); }
-.ui-nav__badge.is-danger { background: var(--glow-pink); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--pink); }
-.ui-nav__item.is-active .ui-nav__badge.is-neutral { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); }
+.ui-nav__badge.is-accent { background: var(--glow-purple); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ color: var(--accent); }
+.ui-nav__badge.is-live { background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ color: var(--chip-success-ink); }
+.ui-nav__badge.is-danger { background: var(--glow-pink); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ color: var(--pink); }
+.ui-nav__item.is-active .ui-nav__badge.is-neutral { background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ color: var(--strong); }
 /* Same shape, one row up: on the current row the accent counter drops both the
    wash and the accent and reads as the neutral one beside it. The row already
    carries the one mark it is allowed — the plate — and the count is a number,
@@ -152,7 +152,7 @@
    recorded: accent ink on --surface fell under WCAG AA in four of the eight
    theme x accent cells (4.08 in dark Nebula), and no alpha cleared it. Nothing
    now paints that pair. See #429 and docs/foundations.md#colour-and-contrast. */
-.ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); }
+.ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ color: var(--strong); }
 
 /* Collapsible group */
 .ui-nav__group { display: flex; flex-direction: column; }
@@ -274,7 +274,7 @@
   height: 100%;
   border-radius: 10px;
   transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */
-  background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  background: var(--surface); /* code-bg: inherit — The plate contains no focus target. */
   z-index: -1;
 }
 /* Nothing switches the hover wash off here: since #588 a folded row is only as wide
@@ -305,7 +305,7 @@
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .ui-nav__tab:hover { color: var(--strong); }
-.ui-nav__tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: 8px; }
+.ui-nav__tab:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: 8px; }
 .ui-nav__tab.is-active { color: var(--strong); }
 
 /* underline variant */
@@ -324,9 +324,9 @@
 
 /* pill variant */
 .ui-nav--tabs.is-pill .ui-nav__tab { border-radius: var(--radius-pill); padding: 8px 15px; }
-.ui-nav--tabs.is-pill .ui-nav__tab:hover { background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.ui-nav--tabs.is-pill .ui-nav__tab:hover { background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
 .ui-nav--tabs.is-pill .ui-nav__tab.is-active {
-  background: var(--glow-purple); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */
+  background: var(--glow-purple); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */
   color: var(--accent);
 }
 
@@ -361,7 +361,7 @@
    does above: a linked crumb is an <a>, and a host stylesheet's `a:link` is
    (0,1,1), which outranks a bare (0,1,0) class. */
 .ui-nav .ui-nav__crumb { color: var(--text); }
-a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
-a.ui-nav__crumb:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+a.ui-nav__crumb:hover { color: var(--strong); background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
+a.ui-nav__crumb:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-nav__crumb.is-current { color: var(--strong); font-weight: 500; }
 .ui-nav__crumb .ui-nav__ic svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }

package/src/styles/pagination.css

@@ -68,8 +68,13 @@
    selector for the markup this component emits, and the spelling that keeps a
    rule about an ENABLED control out of the disabled-rule sweep in
    stories/guidelines/accessibility-floor.test.js, which reads selector text. */
+/* The one selected mark #578 round r34 LEFT as an edge, and why. A pager stands on
+   the page in one showcase and on a card in another; --surface steps off the page at
+   1.110:1 and off a card at 1.000:1, so a fill that marks the current page on one
+   ground marks nothing on the other. The hairline is what survives both. Open for
+   Artur on #578. */
 .ui-pager__page.is-current:not([disabled]) {
-  background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   border-color: var(--border);
   color: var(--strong);
   font-weight: var(--weight-semibold);

package/src/styles/segmented.css

@@ -1,12 +1,12 @@
 /* ============================================================================
  * Segmented control — .ui-seg  (the deck's pill switch: theme, Deck/Text, plan)
- * The selected button keeps the reading surface and gains an accent edge.
+ * The chosen button is a fill that steps off the track, and a step of ink.
  * ========================================================================== */
 
 /* The strip wraps rather than overflows: a track wider than its column used to
    push the page's scrollWidth past the viewport, which drags every sibling with
-   it. Wrapping keeps the focus ring's glow unclipped, which `overflow: auto`
-   here would not. #435 */
+   it. Wrapping keeps the focus band unclipped, which `overflow: auto` here
+   would not. #435 */
 .ui-seg {
   display: inline-flex;
   /* `inline-flex` sizes the track to its pills, but a flex or grid parent stretches a
@@ -14,7 +14,7 @@
      states its own alignment; --block and --underline ask for the width back. */
   align-self: start;
   justify-self: start;
-  background: var(--surface); --ring-gap: var(--surface);
+  background: var(--surface);
   flex-wrap: wrap;
   max-width: 100%;
   border-radius: var(--radius-2xl);
@@ -37,12 +37,19 @@
 .ui-seg button:hover { color: var(--strong); }
 /* aria-pressed is what segmented() emits now; aria-selected is kept so markup
    copied from an older release keeps painting its active pill. */
+/* The chosen pill is its fill and its ink. The accent outline it also drew was an
+   outline used for selection, which is the property and the shape the focus band
+   takes — on a chosen pill the two sat one pixel apart. Artur separated them on #578
+   round r34, and the fill left behind has to be the mark: the track is --surface, and
+   --surface on --surface is 1.000:1, so the pill read as its ink alone. --surface-3 is
+   the kit's quiet non-text fill and steps off the track in both themes — 1.140:1 light,
+   1.160:1 dark — which stories/selected-fill.test.js measures.
+   why: docs/foundations.md#the-focus-ring */
 .ui-seg button.is-active,
 .ui-seg button[aria-pressed="true"],
 .ui-seg button[aria-selected="true"] {
   color: var(--strong);
-  background: var(--surface); /* ring-gap: inherit — the button ring meets its containing track. */
-  outline: 1px solid var(--accent);
+  background: var(--surface-3); /* code-bg: inherit — a control's own selected fill; nothing nested reads a ground from it. */
 }
 
 /* Standard pills tighten on phones so six short month names fit one row. */
@@ -65,7 +72,11 @@
   cursor: pointer;
   position: relative;
   background: var(--swatch, var(--accent));
-  box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px var(--surface);
+  /* One band of the surface the strip stands on, so a swatch reads as a circle
+     rather than as a tile edge-to-edge with its neighbour. #472 took the selected
+     swatch's own ring off the second layer and left the layer behind, restating
+     this one; two layers at the same spread paint once. */
+  box-shadow: 0 0 0 2px var(--surface);
   transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
 }
 .ui-accent-picker button:hover { transform: scale(1.08); }
@@ -88,12 +99,12 @@
   border-width: 0 2px 2px 0;
   transform: translate(-50%, -50%) rotate(45deg); /* motion: still — the turn is the tick's shape, not travel, and the mark lands with the press that asked for it. Nothing else on the swatch changes with selection, so there is no paint for it to arrive with. */
 }
-.ui-accent-picker button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-accent-picker button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 
 /* Underline tabs wrap for the reason the pills above do — #435 — and draw no
    rule of their own: the chosen tab carries the selection. #527, #545
    why: docs/components.md#the-chosen-tab-in-an-underline-strip */
-.ui-seg--underline { flex-wrap: wrap; overflow: visible; row-gap: var(--space-1); align-self: stretch; justify-self: stretch; background: transparent; --ring-gap: inherit; border-radius: 0; padding: var(--space-1); max-width: 100%; }
+.ui-seg--underline { flex-wrap: wrap; overflow: visible; row-gap: var(--space-1); align-self: stretch; justify-self: stretch; background: transparent; border-radius: 0; padding: var(--space-1); max-width: 100%; }
 /* `anywhere` is the half `break-word` cannot do: it lowers the tab's min-content
    width, so one unbreakable word narrows rather than widening the page. The
    padding is the scale's own step and the height is the tap floor, so the tab
@@ -104,15 +115,16 @@
    why: guidelines/layout-and-density.md, the spacing scale */
 .ui-seg--underline button { position: relative; border-radius: var(--radius-sm); padding: var(--space-3); min-height: var(--tap-min, 44px); white-space: normal; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
 /* The chosen tab is its label and one bar under it: no plate, no hairline, no
-   upright rail — those read as a list-row grip. `outline: 0` cancels the accent
-   outline the pill rule gives every chosen button, which is #544's second mark.
-   #527 r31. why: docs/components.md#the-chosen-tab-in-an-underline-strip */
+   upright rail — those read as a list-row grip. #527 r31. The `outline: 0` that
+   stood here cancelled the accent outline the pill rule gave every chosen button;
+   #578 round r34 took that outline off, so there is nothing left to cancel — and
+   nothing outranking the kit's focus rule, which is why the restatement under the
+   bar is gone with it. why: docs/components.md#the-chosen-tab-in-an-underline-strip */
 .ui-seg--underline button.is-active,
 .ui-seg--underline button[aria-pressed="true"] {
   background: none;
   color: var(--strong);
   font-weight: var(--weight-semibold);
-  outline: 0;
 }
 /* Every tab reserves the bar and hides it, so the mark grows in place when the
    choice moves rather than appearing — the structure and the timing
@@ -133,15 +145,11 @@
 }
 .ui-seg--underline button.is-active::before,
 .ui-seg--underline button[aria-pressed="true"]::before { opacity: 1; transform: scaleX(1); }
-/* `outline: 0` above outranks the kit's :focus-visible rule — (0,3,0) against
-   (0,2,1) — so the chosen tab would focus with no indicator. Restated here. */
-.ui-seg--underline button.is-active:focus-visible,
-.ui-seg--underline button[aria-pressed="true"]:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 /* The mode repaints an author colour, so the bar comes back as the labels' own
    ink. `Highlight` is kept where it is named: one mark the mode cannot flatten. */
 @media (forced-colors: active) {
   .ui-seg--underline button.is-active::before,
   .ui-seg--underline button[aria-pressed="true"]::before { background: Highlight; }
 }
-.ui-seg button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-seg button:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-seg button:disabled { /* muted-ink: state — unavailable choice */ color: var(--disabled-ink); cursor: not-allowed; }

package/src/styles/success.css

@@ -16,7 +16,7 @@
   position: relative;
   overflow: hidden;
   border-radius: 20px;
-  background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* Elevated surface for the confirmation and its actions. */
+  background: var(--bg-elevated);   /* Elevated surface for the confirmation and its actions. */
   /* The floating treatment, like every other surface on that step.
      why: docs/foundations.md#elevation */
   border: 1px solid var(--float-edge);
@@ -50,7 +50,7 @@
 }
 .ui-sx--split .ui-sx__visual {
   display: grid; place-items: center; padding: 40px 24px;
-  background: color-mix(in srgb, var(--green) 8%, transparent); /* ring-gap: inherit — decorative illustration has no nested focus target. */
+  background: color-mix(in srgb, var(--green) 8%, transparent); /* code-bg: inherit — decorative illustration has no nested focus target. */
   border-right: 1px solid var(--border);
 }
 .ui-sx--split .ui-sx__check { width: 72px; height: 72px; }
@@ -119,7 +119,7 @@
 .ui-sx--hero .ui-sx__count { justify-content: center; }
 .ui-sx__count-ring {
   flex: none; width: 16px; height: 16px; border-radius: 50%;
-  background: conic-gradient(var(--green) var(--sx-a, 360deg), var(--surface-2) 0); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  background: conic-gradient(var(--green) var(--sx-a, 360deg), var(--surface-2) 0); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
   mask: radial-gradient(circle, transparent 5px, #000 6px);
   -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);
   animation: ui-sx-sweep var(--sx-secs, 5s) linear forwards; /* motion: ambient — the caller sets the countdown; the ring just spends it */
@@ -132,7 +132,7 @@
 @media (prefers-reduced-motion: reduce) {
   .ui-sx__check--line .ui-sx__tick { animation: none; stroke-dashoffset: 0; }
   .ui-sx__confetti { display: none; }
-  .ui-sx__count-ring { animation: none; background: var(--surface-2); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
+  .ui-sx__count-ring { animation: none; background: var(--surface-2); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
 }
 
 /* ---- Narrow — split stacks -------------------------------------------- */

package/src/styles/table.css

@@ -67,7 +67,7 @@
   border-spacing: 0;
   padding: 0 var(--space-2);
 }
-.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td { background: var(--surface-2); --ring-gap: var(--surface-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 {
@@ -90,7 +90,7 @@
 .ui-table--zebra thead th { border-bottom-width: 2px; }
 .ui-table--zebra td,
 .ui-table--zebra :is(tbody, tfoot) th { border-bottom: 0; }
-.ui-table--zebra tbody tr:nth-child(even) td { background: var(--surface-2); --ring-gap: var(--surface-2); }
+.ui-table--zebra tbody tr:nth-child(even) td { background: var(--surface-2); }
 /* The stripe stays full-bleed (the #71 inset above is hover only), but it only reads right
  * if the end cells are inset from the row's own edge, and `.ui-table td` sets
  * `padding-left: 0`. Only `--dense` supplied that inset, so `--zebra` without `--dense` —
@@ -102,7 +102,7 @@
 .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 { --ring-gap: inherit; background: color-mix(in srgb, var(--accent) 8%, transparent); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+.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
@@ -150,8 +150,8 @@
    why: guidelines/state-set.md#focus-rings
    held by: src/styles/table-focus.test.js */
 .ui-table a:not(.ui-btn):focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--ring);
+  outline: var(--ring);
+  outline-offset: var(--ring-offset);
 }
 
 .ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
@@ -175,12 +175,12 @@
 .ui-card { --table-bg: var(--surface); --table-code-bg: var(--bg); }
 
 /* White in light, base canvas in dark; never a grey or tinted data surface. */
-.ui-table { background: var(--table-bg); --ring-gap: var(--table-bg); }
+.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); --ring-gap: var(--table-bg);
+  background: var(--table-bg);
 }
 .ui-table tbody tr:hover { outline: 1px solid var(--border-strong); outline-offset: -1px; }
 
@@ -215,8 +215,8 @@
    why: docs/foundations.md#the-focus-ring */
 .ui-table-scroll:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 .ui-table--sticky { border-collapse: separate; border-spacing: 0; }
-.ui-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--table-bg); --ring-gap: var(--table-bg); padding-top: var(--space-2); }
-.ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection { position: sticky; left: 0; z-index: var(--z-base); background: var(--table-bg); --ring-gap: var(--table-bg); border-right: 1px solid var(--border); }
+.ui-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--table-bg); padding-top: var(--space-2); }
+.ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection { position: sticky; left: 0; z-index: var(--z-base); background: var(--table-bg); border-right: 1px solid var(--border); }
 .ui-table--pinned thead .ui-table__identity, .ui-table--pinned thead .ui-table__selection { z-index: calc(var(--z-sticky) + 1); }
 .ui-value, .ui-delta { white-space: nowrap; font-variant-numeric: tabular-nums; }
 .ui-value__unit { margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text); }
@@ -229,7 +229,7 @@
 .ui-identity__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
 .ui-identity__logo img[hidden] { display: none; /* motion: still — a failed resource is replaced without animating the error. */ }
 a.ui-identity:hover { text-decoration: underline; }
-.ui-identity:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
+.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%; }
   .ui-table--pinned .ui-identity__logo { display: none; }

package/src/styles/tabs.css

@@ -22,7 +22,7 @@
 }
 .ui-tabs__tab:hover { color: var(--strong); }
 .ui-tabs__tab.is-active { color: var(--strong); border-bottom-color: var(--accent); }
-.ui-tabs__tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: 7px 7px 0 0; }
+.ui-tabs__tab:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: 7px 7px 0 0; }
 
 .ui-tabs__panels { padding-top: 20px; }
 .ui-tabs__panel[hidden] { display: none; }
@@ -31,4 +31,4 @@
 .ui-tabs__panel.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }
 /* The panel is focusable (tabindex="0", see tabs.js) so a keyboard user can
    reach text-only content. Show the ring when they land on it. */
-.ui-tabs__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: 8px; }
+.ui-tabs__panel:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: 8px; }

package/src/styles/tooltip.css

@@ -25,7 +25,7 @@
   width: max-content;
   max-width: var(--prose-caption);
   padding: var(--space-2) var(--space-3);
-  background: var(--ui-tip-bg); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  background: var(--ui-tip-bg); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
   /* The two-step edge and the drop, through the level's own names: in DARK that is
      --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
      both lines are transparent and the drop carries the whole separation.

package/src/styles/topbar.css

@@ -9,7 +9,7 @@
   height: 52px;
   display: flex;
   align-items: center;
-  background: var(--bg); /* ring-gap: inherit — page background inherits root overrides. */
+  background: var(--bg); /* code-bg: inherit — page background inherits root overrides. */
   border-bottom: 1px solid var(--border);
 }
 .topbar__in {
@@ -43,7 +43,7 @@
 .topbar .brand { font-size: var(--text-sm); }
 /* The lockup is a link, so it takes focus: the shared ring, with a radius of its
    own because the mark and the word have no box to borrow one from. #482 */
-.brand:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
+.brand:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 .topbar .spacer { flex: 1; }
 
 /* Deck / Text (segmented, pill) */
@@ -51,7 +51,7 @@
   display: none;
   align-items: center;
   gap: 2px;
-  background: var(--surface); --ring-gap: var(--surface);
+  background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 3px;
@@ -69,8 +69,8 @@
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .dtsw a:hover { color: var(--strong); }
-.dtsw a.cur { color: var(--strong); background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
-.dtsw a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.dtsw a.cur { color: var(--strong); background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
+.dtsw a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 
 /* Theme toggle — a single icon-only switch (no label). */
 .toggle {
@@ -79,7 +79,7 @@
   width: 34px;
   height: 34px;
   cursor: pointer;
-  background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -90,7 +90,7 @@
     border-color var(--dur-fast) var(--ease);
 }
 .toggle:hover { transform: translateY(-1px); border-color: var(--border-strong); }
-.toggle:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.toggle:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .toggle .ic { width: 17px; height: 17px; display: inline-block; color: var(--text); }
 .toggle .ic svg { display: block; width: 100%; height: 100%; stroke-width: 2.2; }
 
@@ -105,14 +105,18 @@
   font-size: calc(var(--text-sm) - 0.5px);
   font-weight: 500;
   color: var(--text);
-  background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  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);
   border-radius: 24px;
   padding: 7px 11px 7px 13px;
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
-.vsw__btn:hover { border-color: var(--accent); }
-.vsw__btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+/* The hover edge steps aside under the band: an accent edge one pixel inside an
+   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 */
+.vsw__btn:hover:not(:focus-visible) { border-color: var(--accent); }
+.vsw__btn:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .vsw__btn .lbl { color: var(--text); }
 .vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vsw__btn .car {
@@ -128,7 +132,7 @@
   top: calc(100% + 9px);
   left: 0;
   min-width: 266px;
-  background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
+  background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
   /* The two-step edge and the drop, through the level's own names: in DARK that is
      --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
      both lines are transparent and the drop carries the whole separation.
@@ -188,14 +192,14 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:176 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:207 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
-.vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:804
+.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:1015
    `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 */
-.vopt:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.vopt:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .vopt .vname { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vopt .vmeta { font-size: var(--text-xs); color: var(--text); margin-top: 2px; }
 .vopt .vbadge {
@@ -208,8 +212,8 @@
   flex: none;
   margin-top: 1px;
 }
-.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
-.vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
+.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
+.vbadge.arch { /* muted-ink: state — archived version */ color: var(--muted); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ }
 /* The phone step — the same one the rail folds at: docs/foundations.md#breakpoints.
    The switcher keeps its glyph and drops its label.
    The menu hangs the other way here. Anchored by its left edge it opened
@@ -255,13 +259,17 @@
   letter-spacing: 0.02em;
   transition: border-color var(--dur-fast) var(--ease);
 }
-.acct .avatar:hover { border-color: var(--accent); }
-.avatar:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+/* The hover edge steps aside under the band: an accent edge one pixel inside an
+   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 */
+.acct .avatar:hover:not(:focus-visible) { border-color: var(--accent); }
+.avatar:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .amenu {
   position: absolute;
   right: 0; top: 44px;
   width: 252px;
-  background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
+  background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
   /* The two-step edge and the drop, through the level's own names: in DARK that is
      --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
      both lines are transparent and the drop carries the whole separation.
@@ -299,8 +307,8 @@
 .amenu .ahead .anm { color: var(--strong); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu .ahead .aem { color: var(--text); font-size: calc(var(--text-xs) + 0.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu a { display: flex; align-items: center; gap: 11px; padding: 10px 15px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: var(--text-sm); cursor: pointer; }
-.amenu a:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
-.amenu a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
+.amenu a: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. */ }
+.amenu a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 .amenu a.cur { color: var(--accent); }
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }