@apliteni/apliteni-ui 0.98.0 → 0.103.0

package/package.json

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

package/react/dist/index.css

@@ -36,10 +36,10 @@
   --tap-clear-y: 0px;
 }
 @media (max-width: 560px) and (pointer: coarse) {
-  :where(.ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-datepicker__opt) {
+  :where(.ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-app__search, .toggle, .ui-datepicker__opt) {
     position: relative;
   }
-  :where(.ui-btn, .ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-switch, .ui-datepicker__opt)::after {
+  :where(.ui-btn, .ui-seg button, .ui-tabs__tab, .ui-dropdown__trigger, .ui-toast__action, .ui-drawer__close, .ui-snippet__copy, .ui-footer__social, .ui-switch, .ui-datepicker__opt, .ui-app__search, .toggle)::after {
     content: "";
     position: absolute;
     left: 50%;
@@ -133,6 +133,11 @@
     --tap-clear-x: var(--tap-gap);
     --tap-clear-y: var(--tap-gap);
   }
+  .ui-app__bar,
+  .topbar__in {
+    --tap-clear-x: var(--space-3, 12px);
+    --tap-clear-y: var(--space-3, 12px);
+  }
 }
 
 /* ../src/styles/tooltip.css */
@@ -820,7 +825,7 @@
 .rx-toast-stack {
   position: fixed;
   right: var(--space-4);
-  bottom: var(--space-4);
+  bottom: calc(var(--space-4) + var(--ui-app-bottom-clearance, 0px));
   max-width: calc(100% - 2 * var(--space-4));
   z-index: var(--z-toast);
   pointer-events: none;
@@ -846,23 +851,33 @@
 .ui-react-app__bottom .ui-nav__item {
   min-height: 48px;
 }
+.ui-react-app:not(:has(> .ui-app__rail)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+.ui-react-app .ui-app__bar > .ui-app__brand {
+  flex: none;
+  margin-inline-end: var(--space-2);
+}
 @media (max-width: 560px) {
+  :root:has(.ui-react-app__bottom) {
+    --ui-app-bottom-clearance: calc(96px + env(safe-area-inset-bottom));
+  }
+  :root:has(.ui-react-app) {
+    scroll-padding-bottom: calc(var(--space-5) + var(--ui-app-bottom-clearance, 0px));
+  }
   .ui-react-app {
     display: block;
   }
   .ui-react-app > .ui-app__rail {
     display: none;
   }
-  .ui-react-app .ui-app__main {
-    padding-bottom: calc(96px + env(safe-area-inset-bottom));
+  :root:has(.ui-react-app__bottom) .ui-react-app .ui-app__main {
+    padding-bottom: var(--ui-app-bottom-clearance, 0px);
   }
   .ui-react-app .ui-app__bar {
     padding-inline: var(--space-4);
   }
-  .ui-react-app .ui-app__search {
-    min-width: 0;
-  }
-  .ui-react-app .ui-app__search kbd {
+  .ui-react-app .ui-app__bar > .ui-app__brand {
     display: none;
   }
   .ui-react-app__bottom {

package/react/dist/index.d.ts

@@ -776,6 +776,10 @@ type AppShellProps = {
     lede?: string;
     actions?: ReactNode;
     bandControl?: ReactNode;
+    /** The band trigger's words. Below 560px the shell draws `searchShortLabel` instead;
+     *  both stay the button's name, which does not change with the viewport. */
+    searchLabel?: string;
+    searchShortLabel?: string;
     account: {
         name: string;
         email: string;
@@ -787,7 +791,7 @@ type AppShellProps = {
     /** Spread linkProps onto the router link, including children and onClick. */
     renderLink?: (section: AppShellSection, linkProps: ComponentPropsWithoutRef<'a'>) => ReactNode;
 };
-declare function AppShell({ sections, pathname, title, children, word, brand, brandHref, width, back, lede, actions, bandControl, account, onSignOut, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;
+declare function AppShell({ sections, pathname, title, children, word, brand, brandHref, width, back, lede, actions, bandControl, account, onSignOut, searchLabel, searchShortLabel, defaultCollapsed, palette, renderLink }: AppShellProps): react.JSX.Element;
 
 type EmptyStateVariant = 'first-run' | 'no-matches' | 'not-found' | 'not-yet-built';
 type EmptyStateProps = {

package/react/dist/index.js

@@ -3407,6 +3407,8 @@ function AppShell({
   bandControl,
   account,
   onSignOut,
+  searchLabel = "Search or run a command\u2026",
+  searchShortLabel = "Search",
   defaultCollapsed = false,
   palette,
   renderLink
@@ -3488,15 +3490,17 @@ function AppShell({
     }
   );
   const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  const navigable = sections.length > 1 || Boolean(back);
   const visible = sections.length > 4 ? sections.slice(0, 3) : sections;
   const remaining = sections.slice(visible.length);
   const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
+  const lockup = /* @__PURE__ */ jsxs29("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+    brand ?? /* @__PURE__ */ jsx34("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+    /* @__PURE__ */ jsx34("span", { children: word })
+  ] });
   return /* @__PURE__ */ jsxs29("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", children: [
-      /* @__PURE__ */ jsx34("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs29("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-        brand ?? /* @__PURE__ */ jsx34("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-        /* @__PURE__ */ jsx34("span", { children: word })
-      ] }) }),
+    navigable && /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx34("div", { className: "ui-app__head", children: lockup }),
       sidebar(sections, "Sections"),
       /* @__PURE__ */ jsx34("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx34("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
         /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs29("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
@@ -3509,9 +3513,11 @@ function AppShell({
     ] }),
     /* @__PURE__ */ jsxs29("div", { className: "ui-app__well", children: [
       /* @__PURE__ */ jsxs29("header", { className: "ui-app__bar", children: [
+        !navigable && lockup,
         /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
           /* @__PURE__ */ jsx34("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx34(Icon, { name: "search" }) }),
-          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
+          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-txt", children: searchLabel }),
+          /* @__PURE__ */ jsx34("span", { className: "ui-app__search-short", "aria-hidden": "true", children: searchShortLabel }),
           /* @__PURE__ */ jsx34("kbd", { className: "ui-cmdk__key", children: paletteHotkey() })
         ] }),
         /* @__PURE__ */ jsx34("span", { className: "ui-app__bar-gap" }),
@@ -3544,7 +3550,7 @@ function AppShell({
         /* @__PURE__ */ jsx34("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    /* @__PURE__ */ jsx34("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs29("ul", { className: "ui-nav__list", children: [
+    navigable && /* @__PURE__ */ jsx34("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs29("ul", { className: "ui-nav__list", children: [
       links(visible),
       remaining.length > 0 && /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsxs29(
         "button",

package/src/components/shell.js

@@ -91,12 +91,17 @@ const toWidth = (v) => (v === 'wide' ? 'wide' : 'centered');
 
 // `search: 'palette-id'`, or the same id in `{ palette }` with a placeholder beside
 // it. No palette to open, no field — the argument `signOutHref` takes.
-// why: docs/components.md#the-page-shell
+// `shortLabel` is the word the band draws below 560px, where the sentence used to
+// truncate mid-word. why: docs/components.md#the-page-shell
 const toSearch = (v) => {
   const given = typeof v === 'string' ? { palette: v } : (isRecord(v) && !Array.isArray(v) ? v : null);
   const palette = given && typeof given.palette === 'string' ? given.palette.trim() : '';
   if (!palette) return null;
-  return { palette, placeholder: str(given.placeholder) || 'Search or run a command…' };
+  return {
+    palette,
+    placeholder: str(given.placeholder) || 'Search or run a command…',
+    shortLabel: str(given.shortLabel) || 'Search',
+  };
 };
 
 // `maxWidth` lands inside a style attribute, so a length is all this accepts — a number
@@ -236,10 +241,13 @@ function readerBlock({ name, email }, signOutHref, { band = false } = {}) {
 // A field to look at, a button to press. `data-cmdk-open` and the cap's class are the
 // palette's own, and the cap is NOT aria-hidden: it is half the button's name.
 // why: docs/components.md#the-page-shell
-const searchField = ({ palette, placeholder }) =>
+// The short word repeats the sentence, so it is `aria-hidden`: the sentence and the
+// cap are the name at every width, and layout.css clips rather than drops them.
+const searchField = ({ palette, placeholder, shortLabel }) =>
   `<button type="button" class="ui-app__search" data-cmdk-open="${esc(palette)}" aria-haspopup="dialog">`
   + `<span class="ui-app__search-ic" aria-hidden="true">${icon('search')}</span>`
   + `<span class="ui-app__search-txt">${esc(placeholder)}</span>`
+  + `<span class="ui-app__search-short" aria-hidden="true">${esc(shortLabel)}</span>`
   + `<kbd class="ui-cmdk__key" data-palette-hotkey>${esc(paletteHotkey())}</kbd>`
   + `</button>`;
 

package/src/styles/layout.css

@@ -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:1597 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1704 `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
@@ -404,11 +404,26 @@
 .ui-app__search-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* The other half of the name, so it never gives way. */
 .ui-app__search kbd { flex: none; }
+/* The one word the phone band draws instead of the sentence. Above 560px the
+   sentence fits and this is a second copy of it, so it is not drawn.
+   why: docs/components.md#the-page-shell */
+.ui-app__search-short { display: none; }
 
 /* The mark alone — no room for two lines on a 52px row. No rule over it, since the
    band's hairline is under the whole of it, and no column, since this is not the rail.
    why: docs/components.md#the-page-shell */
 .ui-app__user--bar { flex: none; padding-top: 0; border-top: 0; }
+/* The switch is a 34px square and stays one: the trigger above is the thing on this
+   band that gives way, and a flex item with the default shrink does not wait its
+   turn. Measured at 390 with a control beside the trigger, the React band's switch
+   drew 19x34 and the strategy topbar's drew 28.47x34 — a square glyph plate squashed,
+   and a tap zone the sheet could only clamp to 29 or 39.
+   Pinning the strategy topbar's half of this rule does not make its row narrower: it
+   moves a 5.53px shortfall onto the account block's trailing gutter instead, because
+   nothing before it in that row has width to spare. topbar.css's --space-2 comment
+   names that choice and the gutter it leaves.
+   why: docs/components.md#the-page-shell */
+.ui-app__bar .toggle, .topbar__in .toggle { flex: none; }
 .ui-app__user--bar .ui-app__av { margin-inline-start: 0; }
 /* Crumb, then the title block. At --space-2 the crumb sat 8px off the h1 and
    the h1 8px off its subtitle, so all three ranks read as one. */
@@ -422,7 +437,10 @@
   letter-spacing: var(--tracking-tight);
   margin-bottom: 8px;
 }
-.ui-app__sub { color: var(--text); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: 32px; }
+/* The head keeps the kit's second step below it whether or not a lede is there to
+   carry it: with no lede the title's own margin takes the step instead. */
+.ui-app__main h1:not(.ui-card h1):not(:has(+ .ui-app__sub)) { margin-bottom: var(--space-8); }
+.ui-app__sub { color: var(--text); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: var(--space-8); }
 .ui-app__body { display: flex; flex-direction: column; gap: var(--space-5); }
 /* A flex child's min-width is its content by default, so one wide block — a
    ledger, a code sample — pushes the whole page sideways instead of scrolling
@@ -515,6 +533,31 @@
   .ui-app__main .ui-card__row { flex-wrap: wrap; gap: var(--space-3); }
 }
 
+/* -- The band's search at one column --------------------------------------- */
+/* The band holds the trigger, the reader's mark and whatever the page puts between
+   them, so the sentence broke mid-word — "Search or run a co…". The short word takes
+   its place. Neither the sentence nor the cap is `display: none`: both are inside
+   the button's accessible name — the cap by Artur's call on #308 — so they are
+   clipped the way `.ui-sr` in loading.css clips, and the name holds at every width.
+   why: docs/components.md#the-page-shell */
+@media (max-width: 560px) {
+  .ui-app__search-txt,
+  .ui-app__search kbd {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  /* It gives way before the band does: at a large font scale the word ellipsises
+     rather than pushing the reader's mark off the row. */
+  .ui-app__search-short { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+}
+
 /* -- Auth card (sign-in / consent) — centered, glowing --------------------- */
 .ui-auth {
   min-height: 100vh;

package/src/styles/table.css

@@ -204,7 +204,35 @@
 .ui-table--compact th { padding: var(--space-2) var(--space-3); }
 .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); }
+/* Columns past the box's edge, said in paint. Two shades, one per side, under two
+   cover layers that ride the content: `local` moves a cover with the scroll, so
+   reaching an end slides that cover over its shade. A cover is solid for its first
+   half, so at 24px it hides a 12px shade outright — which is why the two sizes are
+   not one. why: guidelines/dense-tables.md */
+.ui-table-scroll {
+  overflow: auto; max-height: var(--ui-table-height, 70vh); padding: 0 var(--space-1);
+  background-color: var(--table-bg);
+  background-image:
+    linear-gradient(to right, var(--table-bg) 50%, transparent),
+    linear-gradient(to left, var(--table-bg) 50%, transparent),
+    radial-gradient(farthest-side at 0 50%, var(--table-edge), transparent),
+    radial-gradient(farthest-side at 100% 50%, var(--table-edge), transparent);
+  background-position: 0 0, 100% 0, 0 0, 100% 0;
+  background-size: var(--space-6) 100%, var(--space-6) 100%, var(--space-3) 100%, var(--space-3) 100%;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+}
+/* The edge darkens on a light ground and lightens on a dark one: ink has nowhere to
+   go on a near-black page, which is why --elev-drop splits its spend and a raised
+   dark surface takes a light --elev-edge. */
+.ui-table-scroll { --table-edge: color-mix(in srgb, var(--sheen) 12%, transparent); }
+:root[data-theme="light"] .ui-table-scroll { --table-edge: color-mix(in srgb, var(--shadow-ink) 13%, transparent); }
+/* The surface belongs to the box that scrolls, so the shades land under the cells
+   rather than behind them; the row fills repeat that same surface and step aside.
+   The sticky header and pinned column keep their paint: they hide what scrolls
+   beneath them. */
+.ui-table-scroll > .ui-table,
+.ui-table-scroll > .ui-table tbody td:not(.ui-table__identity, .ui-table__selection) { background-color: transparent; }
 /* 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
@@ -216,6 +244,45 @@
 .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); }
+/* The divider is the pin's edge: it says the column stayed while the rest moved under it.
+   Columns that all fit never move, so the line divides nothing and reads as an arbitrary
+   rule. The resting rule keeps it, so an engine that cannot answer the query is unchanged;
+   scroll-state makes a query container, not a size one. why: guidelines/dense-tables.md */
+.ui-table-scroll { container-type: scroll-state; }
+/* A shared grid cell puts the edge shade over the opaque sticky header, on both
+   sides: the radial-gradient shades below answer only the table's own background
+   and fall to nothing where the sticky header paints over them, so an engine that
+   can ask whether the scrollport still has room sticks a shade of its own above
+   it instead and the base radial pair is sized to 0 here. #434 review round 2 */
+@supports (container-type: scroll-state) {
+  .ui-table-scroll {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    background-size: var(--space-6) 100%, var(--space-6) 100%, 0 100%, 0 100%;
+  }
+  .ui-table-scroll > .ui-table { grid-area: 1 / 1; }
+  .ui-table-scroll::before,
+  .ui-table-scroll::after {
+    content: '';
+    grid-area: 1 / 1;
+    position: sticky;
+    top: 0;
+    width: var(--space-3);
+    z-index: calc(var(--z-sticky) + 2);
+    pointer-events: none;
+  }
+  .ui-table-scroll::before { left: 0; right: calc(100% - var(--space-3)); justify-self: start; }
+  .ui-table-scroll::after { left: calc(100% - var(--space-3)); right: 0; justify-self: end; }
+  @container scroll-state(scrollable: left) {
+    .ui-table-scroll::before { background: linear-gradient(to right, var(--table-edge), transparent); }
+  }
+  @container scroll-state(scrollable: right) {
+    .ui-table-scroll::after { background: linear-gradient(to left, var(--table-edge), transparent); }
+  }
+}
+@container not scroll-state(scrollable: x) {
+  .ui-table--pinned :is(.ui-table__identity, .ui-table__selection) { border-right-color: transparent; }
+}
 .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); }
 .ui-delta--success { color: var(--chip-success-ink); }

package/src/styles/tap-zone.css

@@ -56,6 +56,8 @@
     .ui-drawer__close,
     .ui-snippet__copy,
     .ui-footer__social,
+    .ui-app__search,
+    .toggle,
     /* Already relative in react/src/DatePicker.css — restated because this
        gate reads the kit's own sheets and cannot see that one, and a carrier
        whose containing block it cannot find is a layer that measures against
@@ -75,7 +77,9 @@
     .ui-snippet__copy,
     .ui-footer__social,
     .ui-switch,
-    .ui-datepicker__opt
+    .ui-datepicker__opt,
+    .ui-app__search,
+    .toggle
   )::after {
     content: "";
     position: absolute;
@@ -215,4 +219,24 @@
     --tap-clear-x: var(--tap-gap);
     --tap-clear-y: var(--tap-gap);
   }
+
+  /* Two 52px rows, each holding a control the kit draws under the floor: the
+     shell band's palette trigger, 37.05 tall once the phone band swaps its
+     sentence for the short word, and the theme switch at 34 square on both.
+     Neither row opens anything — the room is already in it, which is why these
+     two declare a clearance and no gap. Across, 6px a side against the band's
+     own 12px gap and the topbar's 8 below 560px, where this layer exists — not
+     the topbar's 14 above that step, where it does not. 6px a side crosses the
+     topbar's 4px midline by 1px, which does not mis-tap: neither neighbour on
+     that row carries a layer of its own. Down, the row's leftover height is 7.4px
+     above and below the trigger and 9 around the switch, where a 44px layer
+     needs 3.5 and 5. The rows keep their height, their gaps and their paint.
+     #486
+
+     --space-3 rather than --tap-gap, which is what every row above declares:
+     20 claims 10px a side and the trigger has 7.4. The clamp would still stop
+     at 44 today and be a number that is not true, which is what the browser
+     half fails a container for. */
+  .ui-app__bar,
+  .topbar__in { --tap-clear-x: var(--space-3, 12px); --tap-clear-y: var(--space-3, 12px); }
 }

package/src/styles/topbar.css

@@ -246,12 +246,31 @@
 /* One column, and the band is at its tightest. The row is already full at 390,
    and at the gap above this one the account avatar stood from 365 to 397 and was
    cut at the screen edge — the one control on this screen that opens the account
-   area. Packed to --space-2 the band needs 352 of the 362 it has there, so the
-   avatar is whole with the band's own gutter beside it. 320 is still short of the
-   room these controls want, which stays #558.
+   area. Packed to --space-2 and a flat 14px trailing gutter the band needs 367.53
+   of the 362px it has there, a 5.53px shortfall, because layout.css now pins the
+   theme switch to a full 34px square so it keeps the tap floor it was given.
+   The wordmark, the Deck/Text switch and the version label are each already at
+   the width their own text needs, and the switch must not shrink again, so the
+   account block's trailing gutter is what gives — but a FLAT 14px gutter has no
+   fallback below the width it was sized for: at 375 it has already given every
+   one of its 14px and the row is still 6.53px short, so the avatar was cut and
+   the page gained 7px of horizontal scroll (#486 review round 2), worse again
+   at 320.
+   Both carry a share now, continuously, rather than the gutter alone holding a
+   fixed budget: the gutter still narrows first, from 14px at 390 down to 0 by
+   381.53px of available row width, and once it is spent the inter-control gap
+   takes the rest, from --space-2 down to its own floor of --space-1. 381.53px is
+   this row's own fixed width minus its gutter's full 14px — not a general
+   formula, a number that belongs to this composition's own wordmark, switch and
+   version label. The avatar is whole and the page carries no horizontal scroll
+   down to 375px. 320 still falls 41.53px short with both all the way down,
+   which stays #558; it is 5px better than main's own 46.53px there, not solved.
    why: docs/foundations.md#breakpoints */
 @media (max-width: 560px) {
-  .topbar__in { gap: var(--space-2); }
+  .topbar__in {
+    gap: clamp(var(--space-1), calc(var(--space-2) - (381.53px - 100vw) / 5), var(--space-2));
+    padding-right: clamp(0px, calc(100vw - 381.53px), 14px);
+  }
 }
 
 /* Account — avatar + dropdown. Gated: hidden until the app confirms a session

package/src/tokens/tokens.css

@@ -534,6 +534,7 @@
 .ui-snippet--reveal,
 .ui-sx,
 .ui-table,
+.ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
@@ -557,6 +558,7 @@
  * toward the page and leaves the page 1.02 away, while the card it is a variant of stays
  * 1.07-1.14 off in both themes. Measured in stories/code-chip.test.js. */
 .ui-table,
+.ui-table-scroll,
 .ui-table--sticky thead th,
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
 .ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,