@apliteni/apliteni-ui 0.35.0 → 0.37.0

package/src/styles/tabs.css

@@ -14,15 +14,15 @@
   border: 0;
   cursor: pointer;
   font: 600 calc(var(--text-base) - 0.5px)/1 var(--font-sans);
-  color: var(--dim);
+  color: var(--text);
   padding: 11px 14px;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
 }
-.ui-tabs__tab:hover { color: var(--text); }
+.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 var(--accent); outline-offset: 2px; border-radius: 7px 7px 0 0; }
+.ui-tabs__tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); 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 var(--accent); outline-offset: 4px; border-radius: 8px; }
+.ui-tabs__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); 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);
+  background: var(--ui-tip-bg); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
   /* The two-step edge and the drop: --border-strong outside, --border one pixel
      inside it, then the broad faint drop. why: docs/specification.md#elevation */
   border: 1px solid var(--border-strong);
@@ -57,11 +57,11 @@
 
 .ui-tip.is-open { opacity: 1; visibility: visible; }
 
-.ui-tip__label { color: var(--muted); }
+.ui-tip__label { color: var(--text); }
 .ui-tip__value {
   font-size: var(--text-sm);
   font-weight: var(--weight-semibold);
   color: var(--strong);
   font-variant-numeric: tabular-nums;
 }
-.ui-tip__detail { color: var(--dim); font-variant-numeric: tabular-nums; }
+.ui-tip__detail { color: var(--text); font-variant-numeric: tabular-nums; }

package/src/styles/topbar.css

@@ -9,7 +9,7 @@
   height: 52px;
   display: flex;
   align-items: center;
-  background: var(--bg);
+  background: var(--bg); /* ring-gap: inherit — page background inherits root overrides. */
   border-bottom: 1px solid var(--border);
 }
 .topbar__in {
@@ -48,7 +48,7 @@
   display: none;
   align-items: center;
   gap: 2px;
-  background: var(--surface-2);
+  background: var(--surface-2); --ring-gap: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: 24px;
   padding: 3px;
@@ -60,13 +60,13 @@
   font-size: calc(var(--text-xs) + 1px);
   font-weight: 600;
   letter-spacing: 0.04em;
-  color: var(--muted);
+  color: var(--text);
   padding: 4px 13px;
   border-radius: 24px;
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
-.dtsw a:hover { color: var(--text); }
-.dtsw a.cur { color: var(--strong); background: var(--surface); }
+.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. */ }
 
 /* Theme toggle — a single icon-only switch (no label). */
 .toggle {
@@ -75,7 +75,7 @@
   width: 34px;
   height: 34px;
   cursor: pointer;
-  background: var(--surface);
+  background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
@@ -100,14 +100,14 @@
   font-size: calc(var(--text-sm) - 0.5px);
   font-weight: 500;
   color: var(--text);
-  background: var(--surface);
+  background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
   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 .lbl { color: var(--muted); }
+.vsw__btn .lbl { color: var(--text); }
 .vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vsw__btn .car {
   width: 8px; height: 8px;
@@ -122,7 +122,7 @@
   top: calc(100% + 9px);
   left: 0;
   min-width: 266px;
-  background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
+  background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
   /* The two-step edge and the drop: --border-strong outside, --border one pixel
      inside it, then the broad faint drop. why: docs/specification.md#elevation */
   border: 1px solid var(--border-strong);
@@ -182,9 +182,9 @@
 /* The menu is raised, so a hovered row takes the step ABOVE it — see
    src/styles/dropdown.css:155 `.ui-dropdown__item:hover`.
    why: docs/specification.md#elevation */
-.vopt:hover { background: var(--surface-3); }
+.vopt:hover { background: var(--surface-3); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
 .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(--muted); margin-top: 2px; }
+.vopt .vmeta { font-size: var(--text-xs); color: var(--text); margin-top: 2px; }
 .vopt .vbadge {
   /* rank: chip */
   font-size: var(--text-xs);
@@ -195,8 +195,8 @@
   flex: none;
   margin-top: 1px;
 }
-.vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
-.vbadge.arch { color: var(--muted); background: var(--surface-3); }
+.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-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
 /* The switcher keeps its glyph and drops its label where the shell folds — the
    same step the rail folds at: docs/specification.md#breakpoints. */
 @media (max-width: 720px) { .vsw__btn .lbl { display: none; } }
@@ -225,7 +225,7 @@
   position: absolute;
   right: 0; top: 44px;
   width: 252px;
-  background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
+  background: var(--bg-elevated); --ring-gap: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
   /* The two-step edge and the drop: --border-strong outside, --border one pixel
      inside it, then the broad faint drop. why: docs/specification.md#elevation */
   border: 1px solid var(--border-strong);
@@ -256,11 +256,11 @@
 .amenu .ahead .avatar { cursor: default; }
 .amenu .ahead .aw { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
 .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(--muted); font-size: calc(var(--text-xs) + 0.5px); 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 { background: var(--surface-3); }
+.amenu a:hover { background: var(--surface-3); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
 .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; }
-.amenu a.aout { color: var(--muted); }
+.amenu a.aout { color: var(--text); }
 .amenu a.aout:hover { color: var(--pink); }

package/src/tokens/tokens.css

@@ -172,7 +172,7 @@
   --disabled-ink-bare: #a39eb7;
 
   /* Lifted from #9b5dff, which cleared the flat surfaces and failed on its own wash over
-     a card; the value was already in the ramp. --ring is var(--accent) and follows by
+     a card; the value was already in the ramp. --ring-color is var(--accent) and follows by
      reference. Held by stories/accent-contrast.test.js. #157.
      why: docs/specification.md#colour-and-contrast */
   --accent: #b479ff;
@@ -229,12 +229,12 @@
   --shadow-lg: 0 0 #0000;
   --shadow-seg: 0 0 #0000;
   --shadow-card: 0 0 #0000;
-  /* THE ONLY --ring in the kit — light and every data-accent sub-theme declare an
-     --accent and inherit this line. Opaque because a translucent ring is a glow, and the
-     eight rgba() literals it replaced all missed WCAG 1.4.11's 3:1 (#218). Held by
-     stories/guidelines/accessibility-floor.test.js.
-     why: docs/specification.md#the-focus-ring */
-  --ring: 0 0 0 3px var(--accent);
+  /* G2: the band carries contrast; the halo decorates it. why: docs/specification.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);
 
   /* The ink a cast shadow is made of, and the specular white that reads as gloss on a
      raised surface. Effects mix these instead of writing rgba(). */
@@ -405,3 +405,45 @@
   --prose-body: 62ch;
   --prose-dense: 72ch;
 }
+
+/* Recompose only at painted containers; controls inherit the outside gap.
+ * One recipe keeps surface propagation cheap and consistent.
+ * why: docs/specification.md#the-focus-ring */
+.amenu,
+.dtsw,
+.rx-modal,
+.ui-app__rail,
+.ui-auth__card,
+.ui-callout,
+.ui-card,
+.ui-card--accent,
+.ui-card--live,
+.ui-cmdk__panel,
+.ui-code,
+.ui-confirm__panel,
+.ui-drawer__footer,
+.ui-drawer__panel,
+.ui-dropdown__panel,
+.ui-fbcomposer,
+.ui-footer--app,
+.ui-seg,
+.ui-snippet,
+.ui-snippet--reveal,
+.ui-sx,
+.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
+.ui-table--zebra tbody tr:nth-child(even) td,
+.ui-table--zebra tbody tr:hover td,
+.ui-table--zebra.ui-table--hover tbody tr:hover td,
+.ui-toast--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);
+}
+
+/* A container focused itself paints outside its own surface; descendants only
+ * inherit its inside gap again after focus moves to them. */
+.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; }