@apliteni/apliteni-ui 0.94.0 → 0.96.0

package/src/styles/dropdown.css

@@ -17,14 +17,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: var(--radius-pill);
   padding: 7px 11px 7px 13px;
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
-.ui-dropdown__trigger:hover { border-color: var(--accent); }
-.ui-dropdown__trigger:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-color: var(--accent); }
+/* 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 */
+.ui-dropdown__trigger:hover:not(:focus-visible) { border-color: var(--accent); }
+.ui-dropdown__trigger:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-dropdown__pre { color: var(--text); }
 .ui-dropdown__value { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 
@@ -52,6 +56,12 @@
      the portal's JS, so an upward panel cannot drift from a downward one.
      why: docs/components.md#the-dropdown-panel */
   --ui-dropdown-gap: 9px;
+  /* The least a panel keeps between itself and the edge of the view it is laid out
+     in. The wiring reads it off the panel and moves the panel along the inline axis
+     when the edge `align` asked for does not fit; a page wanting a panel flush with
+     the screen's edge sets it to 0.
+     why: docs/components.md#the-dropdown-panel */
+  --ui-dropdown-edge: 8px;
   /* Named for the same reason the offset is: a block pinned to an edge has to
      bleed back through it, and #306 is a page copying the number by hand.
      why: docs/components.md#the-dropdown-panel */
@@ -68,9 +78,27 @@
   top: calc(100% + var(--ui-dropdown-gap));
   left: 0;
   min-width: 240px;
+  /* …and no wider than the view it is laid out in, less the keep-out it owes each
+     edge. This bound is what holds a PORTALLED panel: that one is `position: fixed`,
+     so the room beside its own offsets is the whole view and a shrink-to-fit box
+     takes all of it — measured at 390px on a 390px screen with this line gone.
+     The floor above wins where the two disagree, which is a view under 2 × edge +
+     240. The wiring writes the property off the LAYOUT viewport; the fallback is
+     for a page whose JS has not run, and is a classic scrollbar's width too
+     generous, because `100vw` counts a scrollbar the panel's own box does not.
+     why: docs/components.md#the-dropdown-panel */
+  max-width: var(--ui-dropdown-ceiling, calc(100vw - 2 * var(--ui-dropdown-edge)));
+  /* And this is what holds an IN-PLACE one, whose room is its trigger's block: a
+     shrink-to-fit box is its min-content wide at the least, and one 70-character
+     token's min-content was 508px on a 390px screen. Breaking anywhere takes that
+     to one character, so the panel settles on the floor above — and keeps the token
+     inside its own box, since overflowing inline text widens the page whatever the
+     box says. The treatment a filter row's panels and the rail's account block
+     already take. why: src/styles/filter-bar.css */
+  overflow-wrap: anywhere;
   /* The floating step, not the sunken one — a panel held open over a card cannot be
      painted the colour of an inset. why: docs/foundations.md#elevation */
-  background: var(--bg-elevated); --ring-gap: var(--bg-elevated);
+  background: var(--bg-elevated);
   /* 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.
@@ -101,10 +129,10 @@
    author rule — so `.is-scroll` took the browser's outline, black in light mode.
    #457 refused that, and #487's review measured it here. Written for every panel
    rather than the scrolling one, as the palette and the drawer write it, because
-   a panel that takes focus any other way has the same claim on the ring. The
-   ring is COMPOSED with the floating treatment rather than over it: a box-shadow
-   list replaces the whole list. why: docs/foundations.md#elevation */
-.ui-dropdown__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop); }
+   a panel that takes focus any other way has the same claim on the ring. The ring
+   is an outline since #578, so it leaves the box-shadow list that carries the panel's
+   edge and its drop standing. why: docs/foundations.md#elevation */
+.ui-dropdown__panel:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 
 /* Opening upward. The kit releases its own `top` here so that nothing outside
    the kit has to: an absolute box with both edges pinned is stretched between
@@ -172,9 +200,12 @@
   color: var(--text);
   transition: background var(--dur-fast) var(--ease);
 }
-/* Rows keep a reading surface; hover adds an edge. why: docs/foundations.md#elevation */
-.ui-dropdown__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. */ }
-.ui-dropdown__item:focus-visible { outline: 2px solid transparent; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ box-shadow: var(--ring); }
+/* Rows keep a reading surface; hover adds an edge. A row that is hovered AND focused
+   draws the ring and not the hover edge — both are outlines now, and the focus rule
+   comes later — which is one indicator rather than two.
+   why: docs/foundations.md#elevation */
+.ui-dropdown__item: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. */ }
+.ui-dropdown__item:focus-visible { background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-dropdown__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ui-dropdown__label { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .ui-dropdown__desc { font-size: var(--text-xs); color: var(--text); line-height: 1.35; }
@@ -200,11 +231,11 @@
   margin-left: auto;
   flex: none;
   color: var(--text);
-  background: color-mix(in srgb, var(--muted) 12%, transparent); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  background: color-mix(in srgb, var(--muted) 12%, transparent); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
 }
-.ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
+.ui-dropdown__badge.is-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. */ }
 :root[data-theme="light"] .ui-dropdown__badge:not(.is-live) {
-  background: color-mix(in srgb, var(--muted) 15%, transparent); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  background: color-mix(in srgb, var(--muted) 15%, transparent); /* code-bg: inherit — decorative or text-only paint; nothing nested reads a ground from it. */
 }
 
 /* Disabled + danger rows */
@@ -276,7 +307,7 @@
   font-size: calc(var(--text-sm) - 0.5px);
   color: var(--strong);
   /* The ground and line .ui-input takes. why: docs/foundations.md#elevation */
-  background: var(--field-bg); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--field-bg); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   border: 1px solid var(--field-edge);
   border-radius: var(--radius-sm);
   padding: 8px 12px 8px 34px;
@@ -291,7 +322,7 @@
 
 .ui-dropdown__search-input::placeholder { /* muted-ink: placeholder — empty search field */ color: var(--muted); }
 .ui-dropdown__search-input:hover { border-color: var(--field-edge-hover); }
-.ui-dropdown__search-input:focus-visible { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--ring); }
+.ui-dropdown__search-input:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 
 .ui-dropdown__list { max-height: 300px; overflow-y: auto; }
 /* Rows are `role="option" tabindex="-1"`, so the LIST takes the keyboard stop and
@@ -304,9 +335,12 @@
    query hides is put away here. */
 .ui-dropdown__list [hidden] { display: none; } /* motion: still — a row the query no longer matches is gone on the next keystroke */
 
-/* The row Enter would pick. Focus stays in the field, which carries the ring,
-   so this row takes the hover fill and a bar rather than a second ring. */
-.ui-dropdown__item.is-active { background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ box-shadow: inset 2px 0 0 var(--accent); }
+/* The row Enter would pick. Focus stays in the field, which carries the ring, so this
+   row is marked by its fill alone — the inset accent bar beside it was an edge on a
+   selected row, which #578 round r34 took off every selected state. --surface-2, not
+   --surface: the panel is --bg-elevated, which --surface matches exactly in light, so
+   the bar had been the whole mark there. 1.183:1 in light, 1.234:1 in dark. */
+.ui-dropdown__item.is-active { background: var(--surface-2); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
 
 /* No match — a nudge and no action, per Guidelines / Microcopy. Empty while
    anything matches, so it takes no room. */

package/src/styles/feedback.css

@@ -66,7 +66,7 @@
 /* The composer panel (bottom-centre) */
 .ui-fbcomposer {
   position: fixed; z-index: 71; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
-  width: min(520px, calc(100vw - 32px)); background: var(--bg-elevated); --ring-gap: var(--bg-elevated); border-radius: 18px;
+  width: min(520px, calc(100vw - 32px)); background: var(--bg-elevated); border-radius: 18px;
   /* The shadow was its only edge until #295, which replaced it with the hairline; since
      #490 light is back on the drop and dark keeps the line.
      why: docs/foundations.md#elevation */
@@ -80,31 +80,31 @@
 .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 svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
-.ui-fbc__x { margin-left: auto; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ /* 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 { 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: 2px solid transparent; box-shadow: var(--ring); }
+.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); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
+.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__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 {
   width: 100%; min-height: 96px; resize: vertical; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55;
-  color: var(--strong); background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ border: 1px solid var(--field-edge); border-radius: 12px; padding: 13px 15px; transition: box-shadow var(--dur-fast) var(--ease);
+  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. */ border: 1px solid var(--field-edge); border-radius: 12px; padding: 13px 15px; transition: box-shadow var(--dur-fast) var(--ease);
 }
 .ui-fbcomposer textarea::placeholder { /* muted-ink: placeholder — empty feedback field */ color: var(--muted); }
-.ui-fbcomposer textarea:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-fbcomposer textarea:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-fbc__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 20px 18px; }
 
 .ui-fbbtn { font-family: var(--font-sans); font-size: calc(var(--text-sm) + 0.5px); font-weight: var(--weight-semibold); border-radius: 10px; padding: 9px 17px; cursor: pointer; border: 0; transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
 .ui-fbbtn.ghost { background: transparent; color: var(--text); }
-.ui-fbbtn.ghost:hover { color: var(--strong); background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
-.ui-fbbtn:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-fbbtn.ghost: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. */ }
+.ui-fbbtn:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-fbbtn.primary { background: var(--accent-strong); color: var(--accent-contrast); display: inline-flex; align-items: center; gap: 9px; }
 .ui-fbbtn.primary:hover { filter: brightness(1.08); }
 /* Same flat pair as .ui-btn:disabled, for the same reason (#220). */
 .ui-fbbtn.primary:disabled {
-  background: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--disabled-surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   cursor: default;
   filter: none;
@@ -114,7 +114,7 @@
 @keyframes uiFbSpin { to { transform: rotate(360deg); } }
 
 /* Success state */
-.ui-fbc__done { padding: 30px 26px 24px; text-align: center; background: radial-gradient(112% 60% at 50% 0%, var(--glow-green), transparent 62%); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+.ui-fbc__done { padding: 30px 26px 24px; text-align: center; background: radial-gradient(112% 60% at 50% 0%, var(--glow-green), transparent 62%); /* code-bg: inherit — a wash paints over a ground and behind a chip, so the opaque ground below it is the step. */ }
 .ui-fbc__ck { width: 88px; height: 88px; margin: 0 auto 13px; display: grid; place-items: center; }
 .ui-fbck { width: 88px; height: 88px; overflow: visible; display: block; transform-origin: center; animation: uiFbCkSpring 1s cubic-bezier(.22,1,.3,1) both; } /* motion: choreographed — the frame the mark and the comet are timed against */
 .ui-fbck-t { fill: none; stroke: var(--surface); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
@@ -129,7 +129,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); /* ring-gap: 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(--pink); 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/file-drop.css

@@ -58,7 +58,7 @@
   width: 100%;
   height: 6px;
   border-radius: var(--radius-pill);
-  background: var(--surface-2); /* ring-gap: inherit — a progress track holds no focus target. */
+  background: var(--surface-2); /* code-bg: inherit — a progress track holds no focus target. */
   overflow: hidden;
 }
 .ui-drop__bar span { display: block; height: 100%; background: var(--accent); }
@@ -73,7 +73,7 @@
   padding: var(--space-3);
   border: 1px dashed var(--accent);
   border-radius: var(--radius-md);
-  background: var(--surface); /* ring-gap: inherit — the target is painted while a file is over the region and holds no focus target. */
+  background: var(--surface); /* code-bg: inherit — the target is painted while a file is over the region and holds no focus target. */
   color: var(--strong);
   font-size: var(--text-sm);
   text-align: center;

package/src/styles/filter-bar.css

@@ -4,7 +4,7 @@
 .ui-filter-bar__chip .ui-dropdown__trigger { border: 0; background: transparent; padding: var(--space-1) var(--space-2); }
 .ui-filter-bar__remove { border: 0; background: transparent; color: var(--text); font: inherit; text-align: center; font-size: var(--text-lg); padding: 0; min-width: 24px; min-height: 24px; border-radius: var(--radius-xs); cursor: pointer; }
 .ui-filter-bar__remove:focus-visible,
-.ui-filter-bar:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-filter-bar:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-filter-bar button:disabled { /* muted-ink: state — disabled filters */ color: var(--disabled-ink); cursor: not-allowed; }
 
 .ui-filter-bar .ui-dropdown__value { color: inherit; }
@@ -69,18 +69,20 @@
    check is what identifies the state under WCAG 1.4.1; Apple, Material, Carbon,
    Primer and Radix all tick a chosen menu row. #549
    why: docs/components.md#a-filter-row-holds-its-panels */
-.ui-filter-bar .ui-dropdown__item.is-selected { background: var(--glow-purple); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+.ui-filter-bar .ui-dropdown__item.is-selected { background: var(--glow-purple); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }
 /* Kit-wide a chosen label steps down to --text, which left the row in force the
    faintest in the panel. Under the wash it holds --strong. */
 .ui-filter-bar .ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--strong); }
-/* The keyboard cursor and focus each set an opaque --surface, which would take the
-   wash off; restated here so the guarantee is one declaration a reader and
-   filter-selected-mark.test.js can both find, and each still reads by its own paint.
+/* Focus sets an opaque --surface, which would take the wash off; restated here so
+   the guarantee is one declaration a reader and filter-selected-mark.test.js can
+   both find. Focus still reads by its own paint — the kit's band, which #578 made a
+   real outline a pixel off the row.
    why: guidelines/accessibility-floor.md#measurable-pairs */
-.ui-filter-bar .ui-dropdown__item.is-selected:focus-visible,
-.ui-filter-bar .ui-dropdown__item.is-selected.is-active { background: var(--glow-purple); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+.ui-filter-bar .ui-dropdown__item.is-selected:focus-visible { background: var(--glow-purple); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }
 /* Hover's other paint is a 1px edge, 1.06:1 on the wash, which left the row in force
    the one row a pointer got no answer from. Selection is a background highlight, so
    hover deepens it: 9% more accent, the step .ui-table--zebra gives a hovered row.
+   The arrow keys need nothing here: ddSetActive() writes no .is-active without a search
+   field and filterBar() builds none, so an arrow key moves real focus instead. #578
    why: docs/components.md#a-filter-row-holds-its-panels */
-.ui-filter-bar .ui-dropdown__item.is-selected:hover { background: color-mix(in srgb, var(--glow-purple), var(--accent) 9%); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+.ui-filter-bar .ui-dropdown__item.is-selected:hover { background: color-mix(in srgb, var(--glow-purple), var(--accent) 9%); /* code-bg: inherit — a translucent wash moves the ground, not the chip on it. */ }

package/src/styles/footer.css

@@ -14,7 +14,7 @@
   --footer-title: var(--strong);
   --footer-text: var(--text);
 
-  background: var(--footer-surface); /* ring-gap: inherit — transparent footer inherits; the app variant composes its opaque surface. */
+  background: var(--footer-surface); /* code-bg: inherit — transparent footer inherits; the app variant composes its opaque surface. */
   border-top: 1px solid var(--footer-border);
   color: var(--footer-text);
   font-family: var(--font-sans);
@@ -55,14 +55,19 @@
   border-radius: 10px;
   border: 1px solid var(--footer-border);
   color: var(--footer-link);
-  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. */
   transition:
     color var(--dur-fast) var(--ease),
     border-color var(--dur-fast) var(--ease),
     transform var(--dur-fast) var(--ease);
 }
-.ui-footer__social:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
-.ui-footer__social:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-footer__social:hover { color: var(--accent); transform: translateY(-1px); }
+/* 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 */
+.ui-footer__social:hover:not(:focus-visible) { border-color: var(--accent); }
+.ui-footer__social:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-footer__social svg { width: 17px; height: 17px; display: block; }
 
 /* Link columns */
@@ -86,7 +91,7 @@
   transition: color var(--dur-fast) var(--ease);
 }
 .ui-footer__links a:hover { color: var(--footer-link-hover); }
-.ui-footer__links a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
+.ui-footer__links a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 
 /* Legal bar — shared by every variant */
 .ui-footer__bar {
@@ -104,7 +109,7 @@
 .ui-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
 .ui-footer__legal-links a { color: var(--footer-link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
 .ui-footer__legal-links a:hover { color: var(--footer-link-hover); }
-.ui-footer__legal-links a:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
+.ui-footer__legal-links a:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
 .ui-footer__switcher { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
 
 /* slim — a single legal row, no divider above it. */
@@ -113,7 +118,7 @@
 
 /* app — compact, in-product: surface background + tighter padding. */
 .ui-footer--app {
-  --footer-surface: var(--surface); --ring-gap: var(--footer-surface);
+  --footer-surface: var(--surface);
   border-top: 1px solid var(--footer-border);
 }
 .ui-footer--app .ui-footer__in { max-width: none; padding: 12px clamp(14px, 2.4vw, 22px); }

package/src/styles/input.css

@@ -25,7 +25,7 @@
   color: var(--strong);
   /* Fields use the card surface and an edge in both themes.
      why: docs/foundations.md#elevation */
-  background: var(--field-bg); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--field-bg); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   border: 1px solid var(--field-edge);
   border-radius: var(--radius-md);
   padding: 12px 15px;
@@ -38,12 +38,16 @@
 .ui-textarea:hover,
 .ui-select:hover { border-color: var(--field-edge-hover); }
 
+/* The band and nothing beside it. Recolouring the field's own 1px edge to the
+   accent drew a SECOND accent band one pixel inside the first, and the unpainted
+   pixel between them read as a halo on the light ground — which is the glow Artur
+   rejected on #578 round r34. The edge keeps its resting ink.
+   why: docs/foundations.md#the-focus-ring */
 .ui-input:focus-visible,
 .ui-textarea:focus-visible,
 .ui-select:focus-visible {
-  outline: 2px solid transparent;
-  border-color: var(--accent);
-  box-shadow: var(--ring);
+  outline: var(--ring);
+  outline-offset: var(--ring-offset);
 }
 
 .ui-input::placeholder,
@@ -62,7 +66,7 @@
 .ui-input:disabled,
 .ui-select:disabled,
 .ui-textarea:disabled {
-  background-color: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background-color: var(--disabled-surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   border-color: var(--disabled-border);
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   opacity: 1; /* fade-reset: the UA's select:disabled grey-out. #564 */
@@ -137,7 +141,7 @@
   margin-top: 1px;
   border: 1.5px solid var(--border-strong);
   border-radius: var(--radius-xs);
-  background: var(--surface-2); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--surface-2); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   cursor: pointer;
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
   position: relative;
@@ -163,7 +167,11 @@
 .ui-check input[type="radio"] { border-radius: 50%; }
 /* :enabled, or the accent lights the border of a box that cannot be clicked —
    the same "press me" a disabled control has to stop making. #429 */
-.ui-check input:enabled:hover { border-color: var(--accent); }
+/* 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 */
+.ui-check input:enabled:hover:not(:focus-visible) { border-color: var(--accent); }
 .ui-check input:checked { background: var(--accent); border-color: var(--accent); }
 .ui-check input[type="checkbox"]:checked::after {
   content: "";
@@ -181,7 +189,7 @@
   border-radius: 50%;
   background: var(--accent-contrast);
 }
-.ui-check input:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-check input:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
 
 /* Off. `.ui-check` had no disabled rule at all until #429 put a disabled checkbox
    on screen: the box kept --surface-2 and --border-strong, its words kept --text,
@@ -192,13 +200,13 @@
    button does: the accent IS the "press me". Its mark inverts to --disabled-surface,
    so the tick and the dot keep the measured --disabled-ink pair in both themes. */
 .ui-check input:disabled {
-  background: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--disabled-surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   border-color: var(--disabled-border);
   cursor: not-allowed;
 }
 .ui-check input:disabled:checked { background: var(--disabled-ink); border-color: var(--disabled-ink); }
 .ui-check input[type="checkbox"]:disabled:checked::after { border-color: var(--disabled-surface); }
-.ui-check input[type="radio"]:disabled:checked::after { background: var(--disabled-surface); /* ring-gap: inherit — the mark inside the box; the box carries the focus indicator. */ }
+.ui-check input[type="radio"]:disabled:checked::after { background: var(--disabled-surface); /* code-bg: inherit — the mark inside the box; the box carries the focus indicator. */ }
 /* The label is the click target, so the cursor belongs on it, and the words it
    holds go quiet with the box beside them. */
 .ui-check:has(input:disabled) { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; }
@@ -217,7 +225,7 @@
 .ui-switch__track {
   position: absolute;
   inset: 0;
-  background: var(--surface-3); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background: var(--surface-3); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
   border-radius: var(--radius-pill);
   cursor: pointer;
   transition: background var(--dur-med) var(--ease);
@@ -243,5 +251,5 @@
 .ui-switch input:checked + .ui-switch__track::before {
   transform: translateX(calc(var(--sw-w) - var(--sw-h)));
 }
-.ui-switch input:focus-visible + .ui-switch__track { outline: 2px solid transparent; box-shadow: var(--ring); }
+.ui-switch input:focus-visible + .ui-switch__track { outline: var(--ring); outline-offset: var(--ring-offset); }
 .ui-switch input:disabled + .ui-switch__track { opacity: 0.5; cursor: not-allowed; }

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));
@@ -67,8 +67,8 @@
    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); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
-.ui-app__rail .ui-nav__item.is-active { background: var(--surface-3); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.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;
@@ -88,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
@@ -119,7 +119,7 @@
    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:1595 `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; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
@@ -160,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);
@@ -194,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.
@@ -283,7 +283,7 @@
    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::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); /* 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.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
@@ -297,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; }
@@ -346,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. */
@@ -382,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;
@@ -393,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
@@ -488,7 +488,7 @@
   .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::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); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
+  .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
@@ -497,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; }
@@ -532,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;
@@ -555,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; }
@@ -576,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;
@@ -621,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;