@apliteni/apliteni-ui 0.34.1 → 0.34.3

package/package.json

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

package/src/components/tooltip.js

@@ -9,7 +9,8 @@
 //   wireTooltip(container);
 //
 // A mark carries `data-tip-value`, with `data-tip-label` and `data-tip-detail`;
-// a `[data-tip-anchor]` inside it is where the readout opens.
+// a `[data-tip-anchor]` inside it is where the readout opens. Under a finger
+// there is no hover, so a tap is the switch: see Pointer kinds below.
 // why: docs/specification.md#the-hover-readout
 import { esc } from './index.js';
 
@@ -157,7 +158,7 @@ export function showTooltip(host, mark) {
   host.__tipDismissed = null;
   tip.__tipHost = host;
   tip.classList.add('is-open');
-  wireEscape(host.ownerDocument);
+  wireDocument(host.ownerDocument);
 }
 
 function releaseMark(host) {
@@ -177,15 +178,60 @@ export function hideTooltip(host) {
   host.__tipDismissed = null;
 }
 
+// A tap that closes a readout dismisses that mark the way Escape does, so a
+// chart sampling its own marks does not bring it straight back. Which is true
+// of the tap that lands on the mark and of the tap that lands on the host's
+// ground beside it: both are the reader putting the readout away.
+function dismiss(host) {
+  const mark = host.__tipMark;
+  close(host);
+  host.__tipDismissed = mark;
+}
+
+// ---- Pointer kinds -------------------------------------------------------
+
+// A finger has no hover. It arrives already pressing, so the pointerover under
+// a tap is the tap itself: a readout opened on it would open on the way to
+// whatever the mark does when pressed, and go again the moment the finger
+// lifts. Under a coarse pointer the tap is the switch instead — one tap opens
+// the readout, the next closes it, and a tap anywhere else closes it too.
+
+/** Whether the device reports no fine pointer at all: a phone, a tablet. */
+function coarse(doc) {
+  try {
+    return doc.defaultView?.matchMedia?.('(pointer: coarse)')?.matches === true;
+  } catch { return false; }
+}
+
+// A pointer event says which kind of pointer it is; a click and a focus do not,
+// so the last kind seen is remembered for them. A keystroke clears it, because
+// a keyboard on a tablet is a third way in and focus has to open the readout
+// again after a tap. Before any of that, the media query answers.
+//
+// A pen is on the tap's side of that line with the finger. It presses a screen
+// rather than resting over one, the tablets it comes with report `(pointer:
+// coarse)`, and a hover a pen does offer is a few millimetres of one nothing
+// here is placed against — so a stylus that fell to the hover path would get
+// the flash this component exists to remove. A mouse is the fine pointer.
+function touching(doc, e) {
+  if (e?.pointerType) doc.__tipTouch = e.pointerType === 'touch' || e.pointerType === 'pen';
+  return doc.__tipTouch ?? coarse(doc);
+}
+
 // Escape dismisses every readout the kit is showing without the pointer having
 // to move — the reader it covers something for. One rendered open and never
 // shown is a picture, and stays. The dismissed mark is remembered until another
 // mark shows or the pointer leaves, so crossing the gap between marks and coming
 // back does not return the readout to the mark it was dismissed from.
-function wireEscape(doc) {
-  if (doc.__tipEscapeWired) return;
-  doc.__tipEscapeWired = true;
+//
+// The same document is where the kind of pointer in play is tracked, and where
+// a tap that lands outside a readout's host takes that readout down.
+function wireDocument(doc) {
+  if (doc.__tipDocWired) return;
+  doc.__tipDocWired = true;
   doc.addEventListener('keydown', (e) => {
+    doc.__tipTouch = false;
+    doc.__tipTapping = false;
     if (e.key !== 'Escape') return;
     doc.querySelectorAll('[data-tip].is-open').forEach((tip) => {
       const host = tip.__tipHost;
@@ -195,6 +241,38 @@ function wireEscape(doc) {
       host.__tipDismissed = mark;
     });
   });
+  // A tap lands focus on the mark on its way to the click that decides, so the
+  // focus between a pointerdown and its click is the tap's own. Focus that no
+  // tap brought is not, and opens the readout under a coarse pointer as it
+  // always did — a reader swiping through the marks with a screen reader gets
+  // the value and the `aria-describedby` that announces it.
+  doc.addEventListener('pointerdown', (e) => { touching(doc, e); doc.__tipTapping = true; }, true);
+  doc.addEventListener('pointercancel', () => { doc.__tipTapping = false; }, true);
+  // Captured, so a host the tap lands in has already lost every other host's
+  // readout by the time it opens its own.
+  doc.addEventListener('click', (e) => {
+    if (e.__tipDismissal) return;
+    doc.__tipTapping = false;
+    if (!touching(doc)) return;
+    doc.querySelectorAll('[data-tip].is-open').forEach((tip) => {
+      const host = tip.__tipHost;
+      if (host && !host.contains(e.target)) hideTooltip(host);
+    });
+  }, true);
+}
+
+// An opening tap is stopped on its way to the mark, and stopping it takes it
+// away from the document as well — where other overlays keep the click listener
+// that dismisses them, so a dropdown panel would stand open behind the readout
+// the tap just opened. The tap is handed to the document itself instead. Its
+// target is the root element, which every dismissal listener hears and no
+// delegated trigger matches, since no trigger's attribute is on the root.
+function dismissOverlays(doc) {
+  const view = doc.defaultView;
+  if (!view || !doc.documentElement) return;
+  const passed = new view.MouseEvent('click', { bubbles: true, cancelable: true });
+  passed.__tipDismissal = true;
+  doc.documentElement.dispatchEvent(passed);
 }
 
 // The readout is placed in px from its host, so the host has to be the box it is
@@ -208,8 +286,10 @@ function anchorHost(host) {
 
 /**
  * Wire every `[data-tip-host]` under root: a pointer resting on a mark, or focus
- * landing on one, shows the readout; leaving the marks hides it. A host with no
- * readout of its own is given one here, once, never on hover. Safe to call again.
+ * landing on one, shows the readout; leaving the marks hides it. Under a coarse
+ * pointer nothing rests, so a tap on a mark opens the readout and a second tap —
+ * or a tap anywhere else — closes it. A host with no readout of its own is given
+ * one here, once, never on hover. Safe to call again.
  */
 export function wireTooltip(root = document) {
   const hosts = [...root.querySelectorAll('[data-tip-host]')];
@@ -217,6 +297,8 @@ export function wireTooltip(root = document) {
   hosts.forEach((host) => {
     if (host.__tipWired) return;
     host.__tipWired = true;
+    const doc = host.ownerDocument;
+    wireDocument(doc);
     anchorHost(host);
     if (!tipOf(host)) host.insertAdjacentHTML('beforeend', tooltip());
     const markOf = (t) => {
@@ -225,16 +307,41 @@ export function wireTooltip(root = document) {
     };
     host.addEventListener('pointerover', (e) => {
       anchorHost(host);
+      if (touching(doc, e)) return;
       const mark = markOf(e.target);
       if (!mark) close(host);
       else if (mark !== host.__tipMark) showTooltip(host, mark);
     });
-    host.addEventListener('pointerleave', () => hideTooltip(host));
+    host.addEventListener('pointerleave', (e) => { if (!touching(doc, e)) hideTooltip(host); });
     host.addEventListener('focusin', (e) => {
       anchorHost(host);
+      // A tap lands focus on its way to the click that decides, so under a
+      // finger the readout waits for that tap rather than opening twice. Focus
+      // arriving on its own under the same pointer is a reader reaching the
+      // mark another way, and opens it.
+      if (touching(doc) && doc.__tipTapping) return;
       const mark = markOf(e.target);
       if (mark) showTooltip(host, mark);
     });
     host.addEventListener('focusout', (e) => { if (!markOf(e.relatedTarget)) hideTooltip(host); });
+    // The tap. Captured, so the tap that opens the readout is spent opening it
+    // and never reaches the mark's own click — a chart drilling down on a bar
+    // does not drill down on the tap that asked what the bar says. The tap that
+    // closes the readout is let through, so the drill-down is one tap further.
+    // What the opening tap is stopped from reaching, it is handed to: see
+    // dismissOverlays(), so an open overlay closes under it as under any tap.
+    host.addEventListener('click', (e) => {
+      if (!touching(doc)) return;
+      anchorHost(host);
+      const mark = markOf(e.target);
+      if (!mark || mark === host.__tipMark) { dismiss(host); return; }
+      e.preventDefault();
+      e.stopPropagation();
+      dismissOverlays(doc);
+      // A tap is deliberate, so it ends a dismissal rather than being refused by
+      // one. What a dismissal stops is the readout coming back on its own.
+      host.__tipDismissed = null;
+      showTooltip(host, mark);
+    }, true);
   });
 }

package/src/styles/button.css

@@ -72,7 +72,7 @@
 }
 
 /* -- Sizes -------------------------------------------------------------- */
-.ui-btn--sm { --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: 12.5px; }
+.ui-btn--sm { --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: calc(var(--text-sm) - 0.5px); }
 .ui-btn--lg { --btn-pad-y: 13px; --btn-pad-x: 24px; --btn-font: var(--text-md); border-radius: var(--radius-md); }
 
 /* Icon-only */

package/src/styles/callout.css

@@ -8,7 +8,7 @@
   padding: 15px 17px;
   border-radius: var(--radius-md);
   background: var(--surface-2);
-  font-size: 13.5px;
+  font-size: calc(var(--text-sm) + 0.5px);
   line-height: 1.55;
   color: var(--dim);
 }

package/src/styles/card.css

@@ -80,7 +80,7 @@
 }
 .ui-card__row + .ui-card__row { border-top: 1px solid var(--border); }
 .ui-card__row .lab { color: var(--strong); font-size: var(--text-md); font-weight: var(--weight-medium); }
-.ui-card__row .hint { color: var(--dim); font-size: 13.5px; margin-top: 3px; }
+.ui-card__row .hint { color: var(--dim); font-size: calc(var(--text-sm) + 0.5px); margin-top: 3px; }
 
 /* Icon chip that leads a card header */
 .ui-card__icon {

package/src/styles/code.css

@@ -36,7 +36,7 @@
   color: var(--muted);
   cursor: pointer;
   font-family: var(--font-sans);
-  font-size: 12px;
+  font-size: calc(var(--text-xs) + 1px);
   display: inline-flex;
   align-items: center;
   gap: 6px;

package/src/styles/drawer.css

@@ -147,7 +147,7 @@
 .ui-drawer__title {
   margin: 0;
   font-family: var(--font-sans);
-  font-size: 15px;
+  font-size: calc(var(--text-base) + 0.5px);
   font-weight: 600;
   letter-spacing: 0.01em;
   color: var(--strong);
@@ -180,7 +180,7 @@
   padding: 20px;
   color: var(--text);
   font-family: var(--font-sans);
-  font-size: 13px;
+  font-size: var(--text-sm);
   line-height: 1.55;
 }
 

package/src/styles/dropdown.css

@@ -14,7 +14,7 @@
   gap: 8px;
   cursor: pointer;
   font-family: var(--font-sans);
-  font-size: 12.5px;
+  font-size: calc(var(--text-sm) - 0.5px);
   font-weight: 500;
   color: var(--text);
   background: var(--surface);
@@ -155,8 +155,8 @@
 .ui-dropdown__item:hover { background: var(--surface-3); }
 .ui-dropdown__item:focus-visible { outline: none; background: var(--surface-3); box-shadow: var(--ring); }
 .ui-dropdown__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.ui-dropdown__label { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
-.ui-dropdown__desc { font-size: 11px; color: var(--muted); line-height: 1.35; }
+.ui-dropdown__label { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
+.ui-dropdown__desc { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }
 .ui-dropdown__ic { display: inline-flex; flex: none; color: var(--muted); }
 .ui-dropdown__ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; }
 
@@ -255,7 +255,7 @@
 .ui-dropdown__search-input {
   width: 100%;
   font: inherit;
-  font-size: 12.5px;
+  font-size: calc(var(--text-sm) - 0.5px);
   color: var(--strong);
   /* A field is the sunken step, the same one .ui-input takes. why: docs/specification.md#elevation */
   background: var(--surface-2);
@@ -290,5 +290,5 @@
    anything matches, so it takes no room. */
 .ui-dropdown__none { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 10px; text-align: center; }
 .ui-dropdown__none:empty { display: none; }
-.ui-dropdown__none-title { font-size: 12.5px; font-weight: 600; color: var(--strong); }
-.ui-dropdown__none-hint { font-size: 11px; color: var(--muted); line-height: 1.35; }
+.ui-dropdown__none-title { font-size: calc(var(--text-sm) - 0.5px); font-weight: 600; color: var(--strong); }
+.ui-dropdown__none-hint { font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }

package/src/styles/feedback.css

@@ -31,7 +31,7 @@
      either way and is declared because leaving it to the element is the dependency
      this refuses. why: #251 */
   border: 0; text-align: center; font: inherit;
-  font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em;
+  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em;
   padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
   /* The pill cast two layers of ink and an accent glow until #295, and grew both on
      hover. Nothing casts now, and it takes no hairline either: it is the accent at full
@@ -74,24 +74,24 @@
 .ui-fbcomposer.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
 
 .ui-fbc__head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; }
-.ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .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-2); 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 svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface-2); border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
-.ui-fbc__qm { color: var(--accent); font-size: 22px; font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
-.ui-fbc__quote q { quotes: none; color: var(--dim); font-style: italic; font-size: 13.5px; line-height: 1.55; }
+.ui-fbc__qm { color: var(--accent); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
+.ui-fbc__quote q { quotes: none; color: var(--dim); font-style: italic; font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; }
 .ui-fbc__body { padding: 14px 20px 0; }
 .ui-fbcomposer textarea {
-  width: 100%; min-height: 96px; resize: vertical; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55;
+  width: 100%; min-height: 96px; resize: vertical; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55;
   color: var(--strong); background: var(--surface-2); border: 0; border-radius: 12px; padding: 13px 15px; transition: box-shadow var(--dur-fast) var(--ease);
 }
 .ui-fbcomposer textarea::placeholder { color: var(--muted); }
 .ui-fbcomposer textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
 .ui-fbc__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 20px 18px; }
 
-.ui-fbbtn { font-family: var(--font-sans); font-size: 13.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 { 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(--dim); }
 .ui-fbbtn.ghost:hover { color: var(--strong); background: var(--surface-2); }
 .ui-fbbtn.primary { background: var(--accent-strong); color: var(--accent-contrast); display: inline-flex; align-items: center; gap: 9px; }
@@ -114,8 +114,8 @@
 .ui-fbck-t { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
 .ui-fbck-m { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 118; stroke-dashoffset: 118; animation: uiFbCkDraw .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the mark draws while the spring is still settling */ }
 .ui-fbck-s { fill: none; stroke: var(--sheen); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the comet rides the mark, so it shares its duration and delay exactly */ }
-.ui-fbc__done h4 { color: var(--strong); font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -.01em; margin-bottom: 7px; }
-.ui-fbc__done p { color: var(--dim); font-size: 13.5px; line-height: 1.55; max-width: var(--prose-caption); margin: 0 auto; }
+.ui-fbc__done h4 { color: var(--strong); font-size: calc(var(--text-lg) + 1px); font-weight: var(--weight-semibold); letter-spacing: -.01em; margin-bottom: 7px; }
+.ui-fbc__done p { color: var(--dim); font-size: calc(var(--text-sm) + 0.5px); line-height: 1.55; max-width: var(--prose-caption); margin: 0 auto; }
 .ui-fbc__done p b { color: var(--text); font-weight: var(--weight-semibold); }
 .ui-fbc__done .row { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
 @keyframes uiFbCkDraw { to { stroke-dashoffset: 0; } }
@@ -123,7 +123,7 @@
 @keyframes uiFbCkSpring { 0% { transform: scale(1.32); } 62% { transform: scale(.965); } 82% { transform: scale(1.02); } 100% { transform: scale(1); } }
 
 /* Error banner */
-.ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); color: var(--pink); font-size: 13px; padding: 11px 15px; border-radius: 11px; display: none; }
+.ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); color: var(--pink); font-size: var(--text-sm); padding: 11px 15px; border-radius: 11px; display: none; }
 .ui-fbc__err.show { display: block; }
 /* A failed send's line fades in; wireFeedback() adds the class as it shows it. */
 .ui-fbc__err.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }

package/src/styles/footer.css

@@ -39,10 +39,10 @@
    footer breaks into columns, so it answers to the row rather than to a
    scale. The one width below the floor the measure gate draws. See #208. */
 .ui-footer__brand { max-width: 300px; }
-.ui-footer .ui-footer__brand .brand { font-size: 15px; }
+.ui-footer .ui-footer__brand .brand { font-size: calc(var(--text-base) + 0.5px); }
 .ui-footer__tagline {
   margin: 12px 0 0;
-  font-size: 13px;
+  font-size: var(--text-sm);
   line-height: 1.6;
   color: var(--footer-text);
 }
@@ -79,7 +79,7 @@
 }
 .ui-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
 .ui-footer__links a {
-  font-size: 13.5px;
+  font-size: calc(var(--text-sm) + 0.5px);
   color: var(--footer-link);
   text-decoration: none;
   transition: color var(--dur-fast) var(--ease);
@@ -95,7 +95,7 @@
   flex-wrap: wrap;
   padding-top: 22px;
   border-top: 1px solid var(--footer-border);
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--footer-link);
 }
 .ui-footer__legal { color: var(--footer-link); }
@@ -114,7 +114,7 @@
   border-top: 1px solid var(--footer-border);
 }
 .ui-footer--app .ui-footer__in { max-width: none; padding: 12px clamp(14px, 2.4vw, 22px); }
-.ui-footer--app .ui-footer__bar { padding-top: 0; border-top: 0; font-size: 12.5px; }
+.ui-footer--app .ui-footer__bar { padding-top: 0; border-top: 0; font-size: calc(var(--text-sm) - 0.5px); }
 
 /* Responsive — columns collapse to a stacked layout on narrow screens. Two of
    the kit's three steps, and the second one is the phone step rather than a

package/src/styles/layout.css

@@ -156,10 +156,10 @@
   background: var(--surface-3);
   color: var(--strong);
   display: grid; place-items: center;
-  font-size: 12px;
+  font-size: calc(var(--text-xs) + 1px);
   font-weight: var(--weight-semibold);
 }
-.ui-app__who { font-size: 12.5px; line-height: 1.3; min-width: 0; }
+.ui-app__who { font-size: calc(var(--text-sm) - 0.5px); line-height: 1.3; min-width: 0; }
 .ui-app__who b { display: block; color: var(--strong); font-weight: var(--weight-semibold); }
 /* nowrap is what makes the ellipsis fire — without it the address wraps, and
    the rail column is max-content, so a long one widens the rail instead. */
@@ -193,12 +193,12 @@
    time it is open it is no longer inside the rail that drew it.
    why: docs/specification.md#the-dropdown-panel */
 .ui-app__user-panel .ui-dropdown__head { display: flex; flex-direction: column; gap: 2px; }
-.ui-app__user-panel .ui-dropdown__head b { display: block; color: var(--strong); font-size: 12.5px; font-weight: var(--weight-semibold); }
+.ui-app__user-panel .ui-dropdown__head b { display: block; color: var(--strong); font-size: calc(var(--text-sm) - 0.5px); font-weight: var(--weight-semibold); }
 /* The address wraps rather than truncating: nothing bounds this line, so
    `text-overflow` would have nothing to fire against — the inert pair
    .ui-app__who's own comment warns about. `anywhere` keeps an address with no
    break in it from widening the panel instead. */
-.ui-app__user-panel .ui-dropdown__head span { display: block; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
+.ui-app__user-panel .ui-dropdown__head span { display: block; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
 
 /* The toggle's cell, at the far end of the brand row: the auto margin puts it there
    with or without a wordmark beside it, and the offset below rides it back onto the
@@ -402,7 +402,7 @@
   letter-spacing: var(--tracking-tight);
   margin-bottom: 8px;
 }
-.ui-app__sub { color: var(--dim); font-size: 15px; line-height: 1.6; max-width: var(--prose-body); margin-bottom: 32px; }
+.ui-app__sub { color: var(--dim); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: 32px; }
 .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
@@ -477,7 +477,7 @@
     .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position-anchor: --ui-rail-row; left: calc(anchor(--ui-rail right) + var(--space-2)); top: anchor(top); bottom: anchor(bottom); align-self: center; margin-block: 0; }
   }
   .ui-app__main { padding: 28px var(--space-4) 56px; }
-  .ui-app__main h1 { font-size: 25px; }
+  .ui-app__main h1 { font-size: calc(var(--text-xl) + 3px); }
   /* A settings row is label-beside-control down to the width where the control
      no longer fits beside anything; below that it stacks. Scoped to the shell
      rather than written into card.css, because a card row outside a shell is
@@ -507,12 +507,12 @@
   padding: 38px 36px 32px;
 }
 .ui-auth__brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; }
-.ui-auth__brand span { font-size: 15px; font-weight: 600; color: var(--strong); }
-.ui-auth__title { color: var(--strong); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; }
-.ui-auth__sub { color: var(--dim); font-size: 14.5px; line-height: 1.55; margin-bottom: 26px; }
-.ui-auth__foot { margin-top: 24px; text-align: center; font-size: 13px; color: var(--muted); }
+.ui-auth__brand span { font-size: calc(var(--text-base) + 0.5px); font-weight: 600; color: var(--strong); }
+.ui-auth__title { color: var(--strong); font-size: calc(var(--text-xl) + 2px); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; }
+.ui-auth__sub { color: var(--dim); font-size: var(--text-base); line-height: 1.55; margin-bottom: 26px; }
+.ui-auth__foot { margin-top: 24px; text-align: center; font-size: var(--text-sm); color: var(--muted); }
 .ui-auth__foot a { color: var(--accent); }
-.ui-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 12px; }
+.ui-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: calc(var(--text-xs) + 1px); }
 .ui-divider::before, .ui-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
 
 /* App scope grant list (OAuth consent) */
@@ -527,8 +527,8 @@
   color: var(--accent);
 }
 .ui-scope__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
-.ui-scope__t { color: var(--strong); font-size: 14px; font-weight: 500; }
-.ui-scope__d { color: var(--dim); font-size: 13px; margin-top: 2px; line-height: 1.5; }
+.ui-scope__t { color: var(--strong); font-size: calc(var(--text-base) - 0.5px); font-weight: 500; }
+.ui-scope__d { color: var(--dim); font-size: var(--text-sm); margin-top: 2px; line-height: 1.5; }
 
 /* -- Landing hero -------------------------------------------------------- */
 .ui-hero {
@@ -541,7 +541,7 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  font-size: 12px;
+  font-size: calc(var(--text-xs) + 1px);
   letter-spacing: 0.06em;
   color: var(--purple-mid);
   background: var(--glow-purple);
@@ -594,9 +594,9 @@
   margin-bottom: 16px;
 }
 .ui-feature__icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.8; }
-.ui-feature h3 { color: var(--strong); font-size: 17px; font-weight: 600; margin-bottom: 7px; }
-.ui-feature p { color: var(--dim); font-size: 14.5px; line-height: 1.6; }
+.ui-feature h3 { color: var(--strong); font-size: calc(var(--text-lg) - 1px); font-weight: 600; margin-bottom: 7px; }
+.ui-feature p { color: var(--dim); font-size: var(--text-base); line-height: 1.6; }
 
 .ui-section-head { text-align: center; max-width: var(--panel-lg); margin: 0 auto clamp(40px, 6vh, 64px); }
 .ui-section-head h2 { color: var(--strong); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
-.ui-section-head p { color: var(--dim); font-size: 17px; line-height: 1.6; }
+.ui-section-head p { color: var(--dim); font-size: calc(var(--text-lg) - 1px); line-height: 1.6; }

package/src/styles/nav.css

@@ -58,7 +58,7 @@
   padding: 9px 12px;
   border-radius: 10px;
   text-decoration: none;
-  font-size: 14.5px;
+  font-size: var(--text-base);
   font-weight: 400;
   line-height: 1.2;
   background: none;
@@ -137,7 +137,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-weight: 600;
   line-height: 1;
   background: var(--surface-3);
@@ -188,7 +188,7 @@
   --m-dist: var(--space-1);
   animation: m-slide-down var(--dur-fast) var(--ease-out) both;
 }
-.ui-nav__item--sub { font-size: 14px; padding: 7px 12px; }
+.ui-nav__item--sub { font-size: calc(var(--text-base) - 0.5px); padding: 7px 12px; }
 /* No hairline on a nested current row — but only at rest. box-shadow carries
    both the hairline and the focus ring, so a rule about the resting look must
    say so, or it silently cancels the ring (WCAG 2.4.7). */
@@ -269,7 +269,7 @@
   padding: 11px 14px;
   color: var(--dim);
   text-decoration: none;
-  font-size: 14px;
+  font-size: calc(var(--text-base) - 0.5px);
   font-weight: 500;
   border-radius: 10px 10px 0 0;
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
@@ -322,7 +322,7 @@
   padding: 3px 6px;
   border-radius: 7px;
   text-decoration: none;
-  font-size: 13px;
+  font-size: var(--text-sm);
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 /* Carries the block's class as well as its own, for the reason .ui-nav__item

package/src/styles/segmented.css

@@ -12,7 +12,7 @@
 }
 .ui-seg button {
   font-family: var(--font-sans);
-  font-size: 13.5px;
+  font-size: calc(var(--text-sm) + 0.5px);
   font-weight: var(--weight-semibold);
   letter-spacing: 0.02em;
   color: var(--dim);
@@ -33,7 +33,7 @@
   background: var(--seg-active-bg);   /* the step is the lift; nothing casts. #295 */
 }
 
-.ui-seg--sm button { padding: 5px 13px; font-size: 12px; }
+.ui-seg--sm button { padding: 5px 13px; font-size: calc(var(--text-xs) + 1px); }
 .ui-seg--block { display: flex; }
 .ui-seg--block button { flex: 1; }
 

package/src/styles/success.css

@@ -60,11 +60,11 @@
   margin-bottom: 10px;
 }
 .ui-sx__title {
-  color: var(--strong); font-size: 22px; font-weight: var(--weight-semibold);
+  color: var(--strong); font-size: var(--text-xl); font-weight: var(--weight-semibold);
   letter-spacing: -.02em; line-height: 1.2; margin: 0;
 }
 .ui-sx__body {
-  color: var(--dim); font-size: 14.5px; line-height: 1.6; margin: 9px 0 0; max-width: var(--prose-caption);
+  color: var(--dim); font-size: var(--text-base); line-height: 1.6; margin: 9px 0 0; max-width: var(--prose-caption);
 }
 .ui-sx__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
 
@@ -93,8 +93,8 @@
 .ui-sx--compact .ui-sx__inner { display: flex; align-items: center; gap: 16px; }
 .ui-sx--compact .ui-sx__visual { flex: none; }
 .ui-sx--compact .ui-sx__check { width: 44px; height: 44px; }
-.ui-sx--compact .ui-sx__title { font-size: 16px; }
-.ui-sx--compact .ui-sx__body { font-size: 13px; margin-top: 3px; }
+.ui-sx--compact .ui-sx__title { font-size: calc(var(--text-md) + 0.5px); }
+.ui-sx--compact .ui-sx__body { font-size: var(--text-sm); margin-top: 3px; }
 .ui-sx--compact .ui-sx__actions { margin-top: 0; margin-left: auto; flex: none; }
 .ui-sx--compact .ui-sx__content { flex: 1; display: flex; align-items: center; gap: 16px; }
 .ui-sx--compact .ui-sx__content > div:first-child,
@@ -166,7 +166,7 @@
   animation: ui-sx-sweep var(--sx-secs, 5s) linear forwards; /* motion: ambient — the caller sets the countdown; the ring just spends it */
 }
 @keyframes ui-sx-sweep { from { --sx-a: 360deg; } to { --sx-a: 0deg; } }
-.ui-sx__count-text { color: var(--muted); font-size: 13px; }
+.ui-sx__count-text { color: var(--muted); font-size: var(--text-sm); }
 .ui-sx__count-text b { color: var(--dim); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
 
 /* ---- Reduced motion — static check, no burst / confetti / sweep ---------- */

package/src/styles/tabs.css

@@ -13,7 +13,7 @@
   background: none;
   border: 0;
   cursor: pointer;
-  font: 600 14px/1 var(--font-sans);
+  font: 600 calc(var(--text-base) - 0.5px)/1 var(--font-sans);
   color: var(--dim);
   padding: 11px 14px;
   border-bottom: 2px solid transparent;

package/src/styles/topbar.css

@@ -40,7 +40,7 @@
 }
 .brand svg { display: block; flex: none; }
 /* Topbar wordmark runs a touch smaller than the auth-card lockup. */
-.topbar .brand { font-size: 13px; }
+.topbar .brand { font-size: var(--text-sm); }
 .topbar .spacer { flex: 1; }
 
 /* Deck / Text (segmented, pill) */
@@ -57,7 +57,7 @@
 .dtsw a {
   text-decoration: none;
   font-family: var(--font-sans);
-  font-size: 12px;
+  font-size: calc(var(--text-xs) + 1px);
   font-weight: 600;
   letter-spacing: 0.04em;
   color: var(--muted);
@@ -97,7 +97,7 @@
   gap: 8px;
   cursor: pointer;
   font-family: var(--font-sans);
-  font-size: 12.5px;
+  font-size: calc(var(--text-sm) - 0.5px);
   font-weight: 500;
   color: var(--text);
   background: var(--surface);
@@ -183,8 +183,8 @@
    src/styles/dropdown.css:155 `.ui-dropdown__item:hover`.
    why: docs/specification.md#elevation */
 .vopt:hover { background: var(--surface-3); }
-.vopt .vname { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
-.vopt .vmeta { font-size: 11px; color: var(--muted); margin-top: 2px; }
+.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 .vbadge {
   /* rank: chip */
   font-size: var(--text-xs);
@@ -213,7 +213,7 @@
   color: var(--accent-contrast);
   font: inherit;
   font-weight: 600;
-  font-size: 12.5px;
+  font-size: calc(var(--text-sm) - 0.5px);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -255,9 +255,9 @@
 .amenu .ahead { padding: 13px 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 11px; }
 .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: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.amenu .ahead .aem { color: var(--muted); font-size: 11.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: 13px; cursor: pointer; }
+.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 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.cur { color: var(--accent); }
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.85; }