@apliteni/apliteni-ui 0.69.0 → 0.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.69.0",
+  "version": "0.70.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -420,6 +420,11 @@
   box-shadow: var(--ring);
   border-radius: 4px;
 }
+.ui-table__selection input[type=checkbox]:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--ring);
+  border-radius: var(--radius-xs);
+}
 .rx-caret {
   margin-left: 2px;
   width: 16px;

package/src/styles/callout.css

@@ -67,6 +67,7 @@
 /* Tone ink keeps actions readable on the neutral surface. */
 .ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+.ui-toast__action:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
 .ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; /* muted-ink: glyph — dismiss icon */ color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; font: inherit; }
 .ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
@@ -90,6 +91,7 @@
   transform: translate(-50%, -50%);
 }
 .ui-toast__close:hover { color: var(--text); }
+.ui-toast__close:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 
 /* auto-dismiss progress bar — .is-running is added by wireToastStack() */
 .ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }

package/src/styles/card.css

@@ -58,6 +58,7 @@
 }
 /* The lift alone: the kit casts no shadow anywhere (#295), and cards are flat (#284). */
 .ui-card--interactive:hover { transform: translateY(-2px); }
+.ui-card--interactive:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
 /* card() emits the title as an h2, so the text face is named here rather than
    left to the element. why: docs/specification.md#labels-and-titles */

package/src/styles/code.css

@@ -51,6 +51,7 @@
 }
 .ui-snippet__copy:hover { color: var(--accent); }
 .ui-snippet--reveal .ui-snippet__copy:hover { color: var(--strong); }
+.ui-snippet__copy:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--radius-xs); }
 .ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; }
 
 /* Shell token highlighting (matches viz/account.mjs classes) */

package/src/styles/dropdown.css

@@ -95,6 +95,15 @@
 .ui-dropdown__panel.is-end { left: auto; right: 0; }
 .ui-dropdown__panel.is-scroll { max-height: 300px; overflow-y: auto; }
 
+/* Chrome makes a scroll container a keyboard stop on its own — no tabindex, no
+   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/specification.md#elevation */
+.ui-dropdown__panel:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring), inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop); }
+
 /* 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
    them, and a consumer who set `bottom` and left our `top` standing got a

package/src/styles/feedback.css

@@ -78,6 +78,7 @@
 .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:hover { color: var(--strong); }
+.ui-fbc__x:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .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__qm { color: var(--accent); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
@@ -94,6 +95,7 @@
 .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.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). */

package/src/styles/footer.css

@@ -62,6 +62,7 @@
     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 svg { width: 17px; height: 17px; display: block; }
 
 /* Link columns */
@@ -85,6 +86,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); }
 
 /* Legal bar — shared by every variant */
 .ui-footer__bar {
@@ -102,6 +104,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__switcher { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
 
 /* slim — a single legal row, no divider above it. */

package/src/styles/layout.css

@@ -83,6 +83,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 svg { display: block; flex: none; }
 
 /* The head band: the product's mark, and the rail's own control at the far end of

package/src/styles/topbar.css

@@ -41,6 +41,9 @@
 .brand svg { display: block; flex: none; }
 /* Topbar wordmark runs a touch smaller than the auth-card lockup. */
 .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); }
 .topbar .spacer { flex: 1; }
 
 /* Deck / Text (segmented, pill) */
@@ -67,6 +70,7 @@
 }
 .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); }
 
 /* Theme toggle — a single icon-only switch (no label). */
 .toggle {
@@ -86,6 +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 .ic { width: 17px; height: 17px; display: inline-block; color: var(--text); }
 .toggle .ic svg { display: block; width: 100%; height: 100%; stroke-width: 2.2; }
 
@@ -107,6 +112,7 @@
   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); }
 .vsw__btn .lbl { color: var(--text); }
 .vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vsw__btn .car {
@@ -180,9 +186,14 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:155 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:164 `.ui-dropdown__item:hover`.
    why: docs/specification.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+/* The row is a keyboard stop: src/components/dropdown.js:554
+   `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 .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 {
@@ -221,6 +232,7 @@
   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); }
 .amenu {
   position: absolute;
   right: 0; top: 44px;
@@ -259,6 +271,7 @@
 .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.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; }