@apliteni/apliteni-ui 0.93.0 → 0.95.0

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:183 `.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. */ }
+.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:804
    `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; }

package/src/tokens/tokens.css

@@ -254,27 +254,32 @@
      reading one gets nothing rather than an unresolved var(), and a consumer who wants a
      cast shadow sets them. Nothing in src/ reads them.
 
-     A transparent shadow, not `none`, because these are read in a LIST. The kit's own
-     pre-0.32 pattern was `box-shadow: var(--shadow-lg), var(--ring)`, and `none` is only
-     valid alone — it makes the whole declaration invalid, which silently takes the focus
-     ring with it. `0 0 #0000` composes. why: docs/foundations.md#elevation */
+     A transparent shadow, not `none`, because these are read in a LIST — a surface's
+     edge and its drop are two layers of one declaration — and `none` is valid only
+     alone, so it makes the whole declaration invalid and takes the layers beside it
+     with it. `0 0 #0000` composes. why: docs/foundations.md#elevation */
   --shadow-sm: 0 0 #0000;
   --shadow-md: 0 0 #0000;
   --shadow-lg: 0 0 #0000;
   --shadow-seg: 0 0 #0000;
   --shadow-card: 0 0 #0000;
-  /* G2: the band carries contrast; the halo decorates it. why: docs/foundations.md#the-focus-ring */
+  /* ONE band, drawn as a real OUTLINE, and no halo. Artur took the halo off on #578
+     after #557 drew a scroll region's band without one. An outline leaves its offset
+     UNPAINTED, so the 1px between the control and the band is whatever surface the
+     control is already standing on — which is what retired --ring-gap and the
+     per-surface recomposition behind it, and what leaves forced colors a real outline
+     to repaint instead of a transparent stand-in.
+     why: docs/foundations.md#the-focus-ring */
   --ring-width: 2px;
   --ring-color: var(--accent);
   --ring-gap-width: 1px;
-  --ring-gap: var(--bg);
-  --ring: 0 0 0 var(--ring-gap-width) var(--ring-gap), 0 0 0 calc(var(--ring-gap-width) + var(--ring-width)) var(--ring-color), 0 0 12px 2px color-mix(in srgb, var(--ring-color) 45%, transparent);
-  /* What a scroll region inside a surface takes: --ring's gap and band, drawn inward,
-     no halo. An OUTLINE, because an inset shadow is painted under the box's own
-     children and a table scrolled under one erases it. The gap is left unpainted, so
-     neither half reads --ring-gap and neither is recomposed per surface. Chosen by
-     Artur on #531 round r30. why: docs/foundations.md#the-focus-ring */
-  --ring-scroll: var(--ring-width) solid var(--ring-color);
+  --ring: var(--ring-width) solid var(--ring-color);
+  --ring-offset: var(--ring-gap-width);
+  /* What a scroll region inside a surface takes: the same band, drawn inward rather
+     than outward, because an inset shadow is painted under the box's own children and
+     a table scrolled under one erases it. Only the offset differs. Chosen by Artur on
+     #531 round r30. why: docs/foundations.md#the-focus-ring */
+  --ring-scroll: var(--ring);
   --ring-scroll-offset: calc(-1 * (var(--ring-gap-width) + var(--ring-width)));
 
   /* The ink a cast shadow is made of, and the specular white that reads as gloss on a
@@ -297,7 +302,7 @@
   /* The ladder's two resting rungs, which only light climbs. Transparent here and
      not `none`, for the reason the deprecated --shadow-* tokens are: these are read
      in a layer list, and `none` is valid only alone — it would invalidate the whole
-     declaration and take the focus ring with it. why: docs/foundations.md#elevation */
+     declaration and take the layers beside it with it. why: docs/foundations.md#elevation */
   --elev-rest: 0 0 #0000;   /* a card */
   --elev-rail: 0 0 #0000;   /* the shell's rail, cast sideways */
 
@@ -436,7 +441,7 @@
   --shadow-lg: 0 0 #0000;
   --shadow-seg: 0 0 #0000;
   --shadow-card: 0 0 #0000;
-  /* No --ring here. :root's is var(--accent), and light re-points --accent. */
+  /* No --ring here. :root's band is var(--accent), and light re-points --accent. */
 
   --shadow-ink: #1e1e32;
   --sheen: #ffffff;
@@ -505,11 +510,9 @@
  * Held by stories/code-chip.test.js. why: docs/foundations.md#elevation */
 :root { --code-bg: var(--surface); }
 
-/* Recompose only at painted containers; controls inherit the outside gap, and each hands an
- * inline code chip the page. One recipe keeps surface propagation cheap and consistent.
- * .ui-code composes its own ring in src/styles/code.css instead of joining this list: a
- * chip cannot both paint --code-bg and re-point it, and its gap has to be the surface it
- * actually paints. why: docs/foundations.md#the-focus-ring */
+/* Every painted container hands an inline code chip the page. One recipe keeps surface
+ * propagation cheap and consistent. The ring is not in this list since #578: an outline
+ * paints no gap of its own, so a focused control needs nothing handed down to it. */
 .amenu,
 .dtsw,
 .rx-modal,
@@ -542,7 +545,6 @@
 .ui-toast--outline,
 .ui-toast--solid,
 .vsw__menu {
-  --ring: 0 0 0 var(--ring-gap-width) var(--ring-gap), 0 0 0 calc(var(--ring-gap-width) + var(--ring-width)) var(--ring-color), 0 0 12px 2px color-mix(in srgb, var(--ring-color) 45%, transparent);
   --code-bg: var(--bg);
 }
 
@@ -574,13 +576,3 @@
 .ui-callout--warn,
 .ui-callout--danger,
 .ui-success { --code-bg: var(--wash-code-bg); }
-
-/* A container focused itself paints outside its own surface; descendants only
- * inherit its inside gap again after focus moves to them. A scroll region inside one
- * needs no entry here: --ring-scroll paints no gap of its own, so the 1px it leaves is
- * whatever the region is already standing on. #531 */
-.ui-card:focus-visible,
-.ui-cmdk__panel:focus-visible,
-.ui-confirm__panel:focus-visible,
-.ui-drawer__panel:focus-visible,
-.rx-modal:focus-visible { --ring-gap: inherit; }