@apliteni/apliteni-ui 0.93.0 → 0.95.0

package/src/styles/layout.css

@@ -13,7 +13,7 @@
   display: grid;
   grid-template-columns: max-content 1fr;
   min-height: calc(100vh - var(--ui-app-top, 0px));
-  background: var(--bg); /* ring-gap: inherit — page background inherits root overrides. */
+  background: var(--bg); /* code-bg: inherit — page background inherits root overrides. */
   color: var(--text);
   font-family: var(--font-sans);
   /* The rail's width, and the one property the fold moves: the nav's own column
@@ -42,7 +42,7 @@
   padding: var(--space-5) var(--space-4);
   border-right: var(--ui-rail-rule) solid var(--rail-edge);
   box-shadow: var(--elev-rail);
-  background: var(--surface); --ring-gap: var(--surface);
+  background: var(--surface);
   position: sticky;
   top: var(--ui-app-top, 0px);
   height: calc(100vh - var(--ui-app-top, 0px));
@@ -62,11 +62,13 @@
 .ui-app__rail > .ui-app__head,
 .ui-app__rail > .ui-app__user,
 .ui-app__rail > .ui-app__foot { width: var(--ui-nav-col); flex: none; }
-/* Hover keeps the reading surface and uses the edge declared in nav.css.
-   The danger row and the current row are left out by name because this
-   rule outranks the states nav.css writes for them.
-   */
-.ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+/* The rail is itself --surface, so nav.css's plate has no step here: 1.000:1, with a
+   hairline as the whole resting mark. Both marks go a rung further — the current row
+   to the --surface-3 the folded rail already paints, a hovered row to half of it, so
+   the pointer stays quieter than the reader's own row in both themes (#475 r34). The
+   danger and current rows are named out: this rule outranks nav.css's states. */
+.ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: color-mix(in srgb, var(--surface-3) 50%, transparent); /* code-bg: inherit — The wash keeps the containing ground. */ }
+.ui-app__rail .ui-nav__item.is-active { background: var(--surface-3); /* code-bg: inherit — The control keeps the containing ground. */ }
 .ui-app__brand {
   display: flex;
   align-items: center;
@@ -86,7 +88,7 @@
 /* Carries the shell's class as well as its own, for the same reason the rail
    rows do (see nav.css): a host stylesheet's `a:link` is (0,1,1). */
 .ui-app .ui-app__brand { color: var(--strong); }
-.ui-app__brand:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
+.ui-app__brand:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 .ui-app__brand svg { display: block; flex: none; }
 
 /* The head band: the product's mark, and the rail's own control at the far end of
@@ -107,18 +109,18 @@
    anywhere — so the rail's foot is the account block alone. */
 .ui-app__rail .ui-nav--side { flex: 1 1 auto; }
 
-/* Which row is current is structural here, not chromatic: the resting glyphs
-   step down so the current one is the brightest whatever --accent is doing, and
-   the bar beside it carries the hue. A 3x17px bar on a 45x44 tile was the
-   smallest of three weak signals doing the most work, so it grows with the row.
-   The current glyph's own ink is nav.css's rule now, not a copy here: since #429
-   EVERY rail reads it that way, so the rail's copy was the same sentence in a
-   second file. What is left here is the rail's own resting step. */
+/* Which row is current is structural here, not chromatic: the resting glyphs step
+   down so the current one is the brightest whatever --accent is doing, and the
+   plate nav.css draws around it carries no hue at all. #475 took the accent bar
+   that used to stand beside the glyph off every rail, so the line that grew it to
+   the taller tile here went with it. The current glyph's own ink is nav.css's rule
+   too, not a copy here: since #429 EVERY rail reads it that way, so the rail's copy
+   was the same sentence in a second file. What is left here is the rail's own
+   resting step. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1491 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1597 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
-.ui-app__rail .ui-nav__item.is-active::before { width: 3px; height: 62%; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
    intent is the step nav.css writes for it. Both of nav.css's danger states are
@@ -158,7 +160,7 @@
   width: var(--ui-app-av); height: var(--ui-app-av); flex: none;
   margin-inline-start: calc((var(--ui-nav-strip) - var(--ui-app-av)) / 2);
   border-radius: var(--radius-pill);
-  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(--strong);
   display: grid; place-items: center;
   font-size: calc(var(--text-xs) + 1px);
@@ -192,7 +194,7 @@
   font-weight: inherit;
   letter-spacing: normal;
 }
-.ui-app .ui-app__user-trigger:hover { background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.ui-app .ui-app__user-trigger:hover { background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
 .ui-app__user-trigger .ui-app__who { flex: 1 1 auto; text-align: left; }
 /* The panel is portalled onto <body>, so nothing here may hang off .ui-app: by the
    time it is open it is no longer inside the rail that drew it.
@@ -277,16 +279,12 @@
 :where(.ui-app:not(.ui-app--topbar).is-collapsed) .ui-app__brand { opacity: 0; visibility: hidden; pointer-events: none; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
-/* The current row is ONE plate on the glyph column. Same rules as nav.css writes
-   for a standalone folded rail, and for the same reasons: the bar stands in the
-   row's own left padding, which on the strip is the rail's edge; the hairline is
-   drawn on a row that keeps the open column, so its right edge is off the strip;
-   and --ui-nav-strip is twice the glyph's centre, so a box that wide at the row's
-   edge is centred on the glyph. why: docs/components.md#the-page-shell */
+/* The current row's plate on the glyph column, and beside it the one thing a bare rail
+   does not do: an ordinary row drops its wash here, answered by the floating name below.
+   nav.css's folded rules, a rung further. why: docs/components.md#the-page-shell */
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active { isolation: isolate; background: none; }
-:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
-:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active::before { left: 0; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
-:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); 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-3); /* code-bg: inherit — The plate contains no focus target. */ z-index: -1; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: none; }
 /* The label IS the chip. `fixed` is the fallback placement, out of the rail's own
    clip; the @supports branch below pins it to the row and is the only one that
    survives a scroll. The toggle's selector is unscoped, because it is wordless at
@@ -299,7 +297,7 @@
    why: docs/foundations.md#elevation */
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who,
-.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--float-edge); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); opacity: 1; pointer-events: none; }
+.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--float-edge); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ color: var(--strong); opacity: 1; pointer-events: none; }
 @supports (anchor-name: --a) and (anchor-scope: --a) {
   .ui-app.is-collapsed,
   .ui-app:has(.ui-app__fold) { anchor-scope: --ui-rail; }
@@ -348,7 +346,7 @@
   height: var(--ui-app-band);
   flex: none;
   padding-inline: clamp(24px, 4vw, 56px);
-  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);
   /* Sticky for the reason the rail beside it is: chrome that scrolls away is chrome
      you scroll back up for. */
@@ -384,7 +382,7 @@
   color: var(--text);
   /* The band search uses the same reading surface as other text controls.
      why: docs/foundations.md#elevation */
-  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: var(--radius-md);
   cursor: pointer;
@@ -395,10 +393,10 @@
    without `.ui-btn`, so base.css's shared rule never reached it and focus fell
    through to the browser's own square outline, drawn around a 12px radius.
    why: docs/foundations.md#the-focus-ring */
-.ui-app__search:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-color: var(--accent); }
+.ui-app__search:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 /* The same glyph the palette draws in its own search box, at the same box and the
    same stroke: the trigger and the thing it opens are not two search marks.
-   src/styles/command-palette.css:109 `.ui-cmdk__search-ic svg` */
+   src/styles/command-palette.css:108 `.ui-cmdk__search-ic svg` */
 .ui-app__search-ic { display: flex; flex: none; }
 .ui-app__search-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }
 /* Part of the button's name, so it is squeezed rather than dropped: an ellipsis
@@ -490,9 +488,8 @@
   .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
   .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
   .ui-app__rail .ui-nav__item.is-active { isolation: isolate; background: none; }
-  .ui-app__rail .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
-  .ui-app__rail .ui-nav__item.is-active::before { left: 0; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
-  .ui-app__rail .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+  .ui-app__rail .ui-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); 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-3); /* code-bg: inherit — The plate contains no focus target. */ z-index: -1; }
+  .ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: none; }
   /* The one line of this block that is deliberately NOT the reader's fold: a finger
      is the only pointer this width has, so a row and the account block are held to
      44px. Neither floor can spread to the press, where growing the box is the one
@@ -500,7 +497,7 @@
   .ui-app__rail .ui-nav__item,
   .ui-app__rail .ui-app__user-trigger { min-height: 44px; }
   .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
-  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--float-edge); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); opacity: 1; pointer-events: none; }
+  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--float-edge); box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); border-radius: var(--radius-xs); background: var(--surface); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */ color: var(--strong); opacity: 1; pointer-events: none; }
   @supports (anchor-name: --a) and (anchor-scope: --a) {
     .ui-app { anchor-scope: --ui-rail; }
     .ui-app__rail { anchor-name: --ui-rail; }
@@ -535,7 +532,7 @@
   /* Floats over a spotlit page, so it takes the floating step and the floating
      treatment: the two-step edge in dark, the drop alone in light.
      why: docs/foundations.md#elevation */
-  background: var(--bg-elevated); --ring-gap: var(--bg-elevated);
+  background: var(--bg-elevated);
   border: 1px solid var(--float-edge);
   box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: 22px;
@@ -558,7 +555,7 @@
   width: 38px; height: 38px; flex: none;
   border-radius: 11px;
   display: grid; place-items: center;
-  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);
 }
 .ui-scope__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@@ -579,7 +576,7 @@
   font-size: calc(var(--text-xs) + 1px);
   letter-spacing: 0.06em;
   color: var(--purple-mid);
-  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. */
   border-radius: 999px;
   padding: 6px 14px;
   margin-bottom: 26px;
@@ -624,7 +621,7 @@
   width: 46px; height: 46px;
   border-radius: 13px;
   display: grid; place-items: center;
-  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);
   margin-bottom: 16px;
 }

package/src/styles/loading.css

@@ -99,7 +99,7 @@
   display: grid;
   place-items: center;
   /* muted-ink: glyph — permission seal */ color: var(--dim);
-  background: color-mix(in srgb, var(--text) 7%, transparent); /* ring-gap: inherit — decorative paint has no nested focus target. */
+  background: color-mix(in srgb, var(--text) 7%, transparent); /* code-bg: inherit — decorative paint has no nested focus target. */
 }
 .ui-denied__seal svg {
   width: 20px;

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,34 +75,27 @@
   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 { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ 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;
 }
-.ui-nav--side .ui-nav__item.is-active {
-  box-shadow: inset 0 0 0 1px var(--border);
-}
-/* Accent rail marker on the active item */
-.ui-nav--side .ui-nav__item.is-active::before {
-  content: "";
-  position: absolute;
-  left: 4px; top: 50%;
-  width: 3px; height: 17px;
-  border-radius: 3px;
-  background: var(--accent);
-  transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */
-}
-.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); }
+/* The current row's one mark is a plate, and nothing closes it: on a rail row an
+   outline means focus and only focus. The plate is the quiet fill a rung off the
+   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: 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; }
-/* The glyph brightens with its row and takes the row's ink, not the accent. One
-   accent signal per row: that is the marker above, which is the only thing on a
-   rail that means "here". A glyph in --accent beside it is the same sentence
-   said twice, and beside an accent counter it was said three times. See #429. */
+/* The glyph brightens with its row and takes the row's ink, not the accent. A
+   rail row carries no accent at all since #475: the plate above is what means
+   "here", and the glyph's own step to full ink is the other half of that pair.
+   A glyph in --accent beside it was the same sentence said twice, and beside an
+   accent counter it was said three times. See #429 and #475. */
 .ui-nav__item.is-active .ui-nav__ic svg,
 .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: currentColor; } /* motion: still — the glyph brightens with its row, whose own highlight already transitions */
 .ui-nav__label {
@@ -119,20 +112,14 @@
 /* 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; }
 
-/* Hover adds an edge without changing the current row's reading surface.
-   The danger row keeps its own state treatment. */
-.ui-nav__item.is-active:not(.is-danger):hover {
-  background: var(--surface); outline: 1px solid var(--control-edge); outline-offset: -1px; /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
-}
-
 /* Per-item badge / counter */
 .ui-nav__badge {
   flex: none;
@@ -147,25 +134,25 @@
   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 accent signal it is allowed — the marker — and the count is a
-   number, not a second answer to "where am I". It also retires the pair #157
+   carries the one mark it is allowed — the plate — and the count is a number,
+   not a second answer to "where am I". It also retires the pair #157
    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; }
@@ -195,12 +182,10 @@
   animation: m-slide-down var(--dur-fast) var(--ease-out) both;
 }
 .ui-nav__item--sub { font-size: calc(var(--text-base) - 0.5px); padding: 7px 12px; }
-/* No hairline on a nested current row — but only at rest. box-shadow carries
-   both the hairline and the focus ring, so a rule about the resting look must
-   say so, or it silently cancels the ring (WCAG 2.4.7). */
-.ui-nav--side .ui-nav__item--sub.is-active:not(:focus-visible) { box-shadow: none; }
-/* Hangs back onto the guide hairline the indent above draws. */
-.ui-nav--side .ui-nav__item--sub.is-active::before { left: calc(-1 * var(--space-3)); height: 15px; }
+/* A nested current row takes the plate whole, like a top-level one. It used to
+   take neither half — the bar hung back onto the guide hairline and the plate's
+   own hairline was switched off so the two would not stack — and a fill with no
+   edge is not a mark the kit accepts. See #475. */
 
 /* Footer slot (divider + trailing links, e.g. sign-out) */
 .ui-nav__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
@@ -272,27 +257,31 @@
 /* The current row on a folded rail: one plate on the glyph column, and nothing else.
    The open rail's 3px marker would stand in the rail's edge at this width, and a
    nested row would put it outside the rail; the hairline would be the same mark said
-   twice. The plate is the strip, so it is centred on the glyph, and --surface-3 is the
-   kit's quiet non-text fill — a step off the rail in both themes. The glyph's own step
-   from 0.66 to full ink is the second half of that pair. `isolation` is what puts the
-   plate behind the glyph: a positioned ::before paints over its row's content, and a
-   negative z-index with no stacking context of its own would drop it behind the rail.
-   why: #429 */
+   twice. The plate is the strip, so it is centred on the glyph, and its fill is the
+   rung the open row takes — one off the ground the rail stands on, which layout.css
+   takes one further in the shell — so a rail marks the same row with the same
+   material at both widths. The glyph's own step from 0.66 to full ink is the second
+   half of that pair. `isolation` is what puts the plate behind the glyph: a
+   positioned ::before paints over its row's content, and a negative z-index with no
+   stacking context of its own would drop it behind the rail.
+   why: #429 and #475 */
 .ui-nav--side.is-collapsed .ui-nav__item.is-active { isolation: isolate; background: none; }
-/* At rest only — box-shadow carries the hairline AND the focus ring (WCAG 2.4.7). */
-.ui-nav--side.is-collapsed .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
 .ui-nav--side.is-collapsed .ui-nav__item.is-active::before {
-  left: 0;
+  content: "";
+  position: absolute;
+  left: 0; top: 50%;
   width: var(--ui-nav-strip);
   height: 100%;
   border-radius: 10px;
-  background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  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); /* code-bg: inherit — The plate contains no focus target. */
   z-index: -1;
 }
-/* A folded rail answers a pointer with the row's own ink and the name beside it,
-   which is the whole readout at this width — the hover wash stands, the edge
-   around it does not. At rest only, so the focus ring is left standing. */
-.ui-nav--side.is-collapsed .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+/* Nothing switches the hover wash off here: since #588 a folded row is only as wide
+   as the rail draws, so the wash is the box the plate paints, a rung quieter. It is
+   the whole answer a pointer gets outside the shell, where the floating name is
+   layout.css's. (The `outline: none` that stood here switched off an edge #475
+   removed.) #475 */
 
 /* -- Horizontal tabs ----------------------------------------------------- */
 .ui-nav--tabs {
@@ -316,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 */
@@ -335,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);
 }
 
@@ -372,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 -------------------------------------------- */