@apliteni/apliteni-ui 0.76.1 → 0.77.0

package/guidelines/state-set.md

@@ -12,7 +12,7 @@
 
 **Don't:** Give the input a separate muted outline while the button uses `--ring`.
 
-**Except:** Text-entry controls may match `:focus-visible` on mouse focus. Surface backgrounds set the gap colour and recompose `--ring`; adjust width and colour at the root.
+**Except:** A scroll region inside a surface takes `--ring-scroll`: the same 1px gap and 2px band, drawn inward, without the halo. `--ring` is drawn for a 32px control, where the halo is a glint; around a 400px region it spreads 14px past the band and lights the surface instead of the box that scrolls. A box that is itself the outermost surface — a panel, a card — keeps `--ring`. Text-entry controls may match `:focus-visible` on mouse focus. Surface backgrounds set the gap colour and recompose `--ring`; adjust width and colour at the root.
 
 ## Busy controls
 

package/package.json

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

package/react/dist/index.css

@@ -216,6 +216,10 @@
   min-height: 0;
   overflow: auto;
 }
+.rx-modal__body:focus-visible {
+  outline: var(--ring-scroll);
+  outline-offset: var(--ring-scroll-offset);
+}
 .rx-modal__body > * {
   flex-shrink: 0;
 }

package/src/styles/card.css

@@ -22,6 +22,12 @@
    the rounded corners / clipping its last column. Clipping to the card's
    border-box also keeps zebra stripes from escaping the radius. */
 .ui-card:has(> .ui-table) { overflow-x: auto; }
+/* Which makes the card a keyboard stop whenever no cell holds a control, so it
+   answered with the native outline. It is a scroll region, so it takes --ring-scroll:
+   the band drawn inward, inside the card's 24px padding and clear of the table.
+   --elev-rest is left alone: the band is an outline, not a layer of the shadow list.
+   why: docs/specification.md#the-focus-ring */
+.ui-card:has(> .ui-table):focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 
 /* Vertical stacks space cards with the container's gap — see .ui-card-stack.
    (No `.ui-card + .ui-card` margin: it leaks into grid/flex rows and misaligns.) */

package/src/styles/command-palette.css

@@ -143,6 +143,14 @@
   overflow-y: auto;
   padding: var(--space-2);
 }
+/* Rows are `role="option" tabindex="-1"`, so the LIST takes the keyboard stop. The
+   wired palette's Tab trap holds one item and never hands it over; the markup the
+   kit publishes as a string, rendered open without the wiring, has no trap and did
+   arrive at the native outline. The band is drawn INWARD, on the list: the panel clips
+   with `overflow: hidden`, so an outset one is cut off, and the panel is not the box
+   that scrolls. The list's own 8px of padding is where it lands.
+   why: docs/specification.md#the-focus-ring */
+.ui-cmdk__list:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 .ui-cmdk__group + .ui-cmdk__group { margin-top: var(--space-2); }
 
 /* Sentence case at 13px medium — the kit's label role, not a heading and not a

package/src/styles/confirm.css

@@ -99,16 +99,27 @@
   color: var(--strong);
 }
 .ui-confirm__body {
-  margin: 0;
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
+  /* The padding is the ring's clearance from the glyphs, as on .ui-table-scroll; the
+     negative margin spends it out of the panel's --space-5, not out of the text
+     column the three slots share. #531 */
+  margin: 0 calc(-1 * var(--space-1));
+  padding: var(--space-1);
   font-family: var(--font-sans);
   font-size: var(--text-sm);
   font-weight: var(--weight-normal);
   line-height: 1.55;
   color: var(--text);
 }
+/* A consequence long enough to scroll is a keyboard stop, and answered with the
+   native outline. The wired dialog's trap wraps between the two answers, which both
+   follow it; the markup the kit publishes as a string, rendered open without the
+   wiring, has no trap and makes it the first stop. The band is drawn INWARD, inside
+   the --space-1 above, which is what keeps it off the glyphs.
+   why: docs/specification.md#the-focus-ring */
+.ui-confirm__body:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 .ui-confirm__acts {
   display: flex;
   flex: none;

package/src/styles/drawer.css

@@ -180,6 +180,12 @@
   font-size: var(--text-sm);
   line-height: 1.55;
 }
+/* A body of prose scrolls, so the browser makes it a keyboard stop and it answered
+   with the native outline. The band is drawn INWARD, inside the 20px padding: the body
+   is flush with a panel that is itself flush with a screen edge, so an outset ring — on
+   either box — is painted off-screen. Measured at 390, where an outset one left no
+   indicator at all. why: docs/specification.md#the-focus-ring */
+.ui-drawer__body:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 
 .ui-drawer__footer {
   display: flex;

package/src/styles/dropdown.css

@@ -284,6 +284,12 @@
 .ui-dropdown__search-input:focus-visible { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--ring); }
 
 .ui-dropdown__list { max-height: 300px; overflow-y: auto; }
+/* Rows are `role="option" tabindex="-1"`, so the LIST takes the keyboard stop and
+   answered with the native outline. The band is drawn INWARD, on the list: an outset
+   one 6px inside a --radius-lg corner leaves the panel, and the panel is not the box
+   that scrolls. It lands in the rows' own 9px of padding, never on a label.
+   why: docs/specification.md#the-focus-ring */
+.ui-dropdown__list:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
 /* A row is `display: flex`, which outranks the UA's [hidden], so a row the
    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 */

package/src/styles/table.css

@@ -188,7 +188,13 @@
 .ui-table--compact th:last-child,
 .ui-table--compact td:last-child { padding-right: var(--space-3); }
 .ui-table-scroll { overflow: auto; max-height: var(--ui-table-height, 70vh); padding: 0 var(--space-1); }
-.ui-table-scroll:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
+/* The kit's first ringed scroller, and a scroll region inside a card like the rest, so
+   it draws the band inward too rather than spending a halo across the card around it.
+   It had no room of its own to draw in — the padding above is horizontal — which is the
+   second reason the band is an outline: it is painted over the rows, in the cell padding
+   of the first and last, rather than under them. #531
+   why: docs/specification.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); }

package/src/tokens/tokens.css

@@ -269,6 +269,13 @@
   --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/specification.md#the-focus-ring */
+  --ring-scroll: var(--ring-width) solid var(--ring-color);
+  --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
      raised surface. Effects mix these instead of writing rgba(). */
@@ -569,7 +576,9 @@
 .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. */
+ * 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,