@ponchia/ui 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -5,6 +5,57 @@
 |> `^0` / `*` wildcard does **not** protect you. See README → Versioning, and
 |> the deprecation policy in CONTRIBUTING.md.
 
+## 0.13.0 — 2026-10-01
+
+### Added
+
+- **`ui-prose--blocks`: prose on a block editor's geometry.** A read view that
+  must put every line where a block editor (BlockNote's model) draws it: 3px
+  block padding instead of flow margins, line-height 1.5, headings with an 18px
+  lead and a 1.6/1.3/1.15em scale at weight 600, a 24px list column with disc,
+  circle and square, and the editor's task-row geometry. The px are exposed as
+  `--prose-block`, `--prose-heading-lead` and `--prose-list-column`.
+  `recipes.prose({ blocks: true })` emits it.
+- **`css/blocknote.css`: BlockNote interop.** Maps BlockNote's `--bn-*` theme
+  variables (editor, menus, tooltips, side menu, selection, border, font,
+  radius) to bronto tokens, and its nine text highlights to the categorical
+  identity inks and tints, so the editor follows theme, skins, contrast and the
+  OLED surface. Import the unlayered build after BlockNote's stylesheet. See
+  [BlockNote interop](docs/interop/blocknote.md).
+- **Half spacing steps for dense tool chrome.** `--space-0-5`, `--space-0-75`,
+  `--space-1-5` and `--space-2-5` (2, 3, 6 and 10px at a 16px root), scaled by
+  the density presets with the rest of the scale.
+- **Workspace layers.** `--z-canvas`, `--z-chrome`, `--z-panel`, `--z-modal`,
+  `--z-menu`, `--z-tooltip` and `--z-navigation` name the stack of a tool drawn
+  over a canvas, aliased to the page layers where they mean the same.
+- **Zoom-aware hairlines and focus rings.** A host that scales bronto UI marks
+  the scaled element `[data-ui-zoom]` and sets `--ui-zoom`; inside it `--ui-px`
+  is one screen pixel and `--hairline`, `--focus-ring-width` and
+  `--focus-ring-offset` are re-declared in it.
+
+### Changed
+
+- Every bronto focus ring reads `--focus-ring-width` and `--focus-ring-offset`
+  instead of literal px. At the default zoom they are the same 2px, so nothing
+  moves; inside a `[data-ui-zoom]` surface a ring keeps its on-screen width.
+- The default bundle grows from 92.8 kB / 16.0 kB gzip to 95.8 kB / 16.6 kB:
+  1.9 kB is the block prose variant, the rest the new tokens and the focus-ring
+  variables. Notes are now the main reading surface, so block prose ships in
+  the core prose vocabulary rather than a leaf.
+
+### Internal
+
+- `npm run check` runs every gate and ends with one line naming each gate
+  that failed; `npm run check -- --bail` stops at the first. It was an `&&`
+  chain that stopped at the first failure: since 0.8, 13 of the 20 failed CI
+  runs were the Dependabot dev-dependency group stopping at `check:exports`
+  on TypeScript 7, so no run measured the rest of the group. The gate list is
+  the `check:*` scripts themselves, so `check:chain`, which checked that the
+  hand-kept chain named every gate, is gone.
+- The package contract no longer lists `react/`, `solid/`, `qwik/`,
+  `svelte/` and `vue/` as authored JS directories; the package has none. The
+  list is now read from `tsconfig.dts.json`.
+
 ## 0.12.0 — 2026-10-01
 
 ### Changed

package/README.md

@@ -3,7 +3,7 @@
 [![npm](https://img.shields.io/npm/v/@ponchia/ui?logo=npm)](https://www.npmjs.com/package/@ponchia/ui)
 [![npm provenance](https://img.shields.io/badge/npm-provenance-blue?logo=npm)](https://www.npmjs.com/package/@ponchia/ui#provenance)
 [![runtime deps](https://img.shields.io/badge/runtime%20deps-0-brightgreen)](https://github.com/Ponchia/bronto-ui/blob/main/package.json)
-[![default CSS](https://img.shields.io/badge/default%20CSS-~93kB%20%2F%20~16kB%20gzip-informational)](https://github.com/Ponchia/bronto-ui/blob/main/scripts/check-dist.mjs)
+[![default CSS](https://img.shields.io/badge/default%20CSS-~96kB%20%2F%20~17kB%20gzip-informational)](https://github.com/Ponchia/bronto-ui/blob/main/scripts/check-dist.mjs)
 [![CI](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/Ponchia/bronto-ui/actions/workflows/ci.yml)
 [![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/Ponchia/bronto-ui/badge)](https://scorecard.dev/viewer/?uri=github.com/Ponchia/bronto-ui)
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue)](https://github.com/Ponchia/bronto-ui/blob/main/LICENSE)
@@ -93,12 +93,12 @@ Or drop it in with no build step, straight from a CDN (replace the version only
 when deliberately upgrading across a breaking pre-1.0 minor):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.12.0/dist/bronto.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ponchia/ui@0.13.0/dist/bronto.css">
 ```
 
 ## Quick start
 
-**1. Load the CSS.** One flattened, minified default CSS bundle — the standard component set, one request (~93 kB raw / ~16 kB gzip) — that is `dist/bronto.css`, not the whole package tarball:
+**1. Load the CSS.** One flattened, minified default CSS bundle — the standard component set, one request (~96 kB raw / ~17 kB gzip) — that is `dist/bronto.css`, not the whole package tarball:
 
 ```css
 @import '@ponchia/ui';            /* via a bundler */

package/classes/classes.json

@@ -1,7 +1,7 @@
 {
   "$comment": "@ponchia/ui class vocabulary as language-neutral data — validate emitted markup without executing the ESM cls map or parsing the .d.ts. Generated from classes/index.js — do not edit by hand; run `npm run classes:json:build`. Drift-checked in CI. `groups[].base` is null for a parts-only namespace (no standalone base class — do NOT emit it). A modifier whose name contains `__` (e.g. `ui-spark__bar--pos`) attaches to THAT part, not the base host. `states` is the author-applied `is-*` hooks (runtime/behavior-managed hooks are excluded); `behaviorAttributes` are the `data-bronto-*` wiring hooks the optional behaviors delegate on; `requiredAria` is the role/aria a generator must emit per component. `states` + `customProperties` are documented in docs/reference.md and ship outside `cls` by design.",
   "counts": {
-    "classes": 695,
+    "classes": 696,
     "groups": 187
   },
   "groups": {
@@ -993,6 +993,7 @@
     "ui-prose": {
       "base": "ui-prose",
       "modifiers": [
+        "ui-prose--blocks",
         "ui-prose--compact"
       ],
       "parts": []
@@ -2040,6 +2041,7 @@
     "ui-property__label",
     "ui-property__value",
     "ui-prose",
+    "ui-prose--blocks",
     "ui-prose--compact",
     "ui-provenance",
     "ui-provenance__item",

package/classes/index.d.ts

@@ -241,6 +241,7 @@ export declare const cls: {
   readonly eyebrowSm: 'ui-eyebrow--sm';
   readonly prose: 'ui-prose';
   readonly proseCompact: 'ui-prose--compact';
+  readonly proseBlocks: 'ui-prose--blocks';
   readonly quote: 'ui-quote';
   readonly quoteCite: 'ui-quote__cite';
   readonly container: 'ui-container';
@@ -822,6 +823,7 @@ export interface AvatarOpts {
 }
 export interface ProseOpts {
   compact?: boolean;
+  blocks?: boolean;
 }
 export interface ContainerOpts {
   narrow?: boolean;

package/classes/index.js

@@ -255,6 +255,7 @@ export const cls = Object.freeze({
   eyebrowSm: 'ui-eyebrow--sm',
   prose: 'ui-prose',
   proseCompact: 'ui-prose--compact',
+  proseBlocks: 'ui-prose--blocks',
   quote: 'ui-quote',
   quoteCite: 'ui-quote__cite',
   // site shell
@@ -1036,7 +1037,8 @@ export const ui = {
   tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
   avatar: ({ size } = {}) =>
     j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
-  prose: ({ compact } = {}) => j(cls.prose, compact && cls.proseCompact),
+  prose: ({ compact, blocks } = {}) =>
+    j(cls.prose, compact && cls.proseCompact, blocks && cls.proseBlocks),
   container: ({ narrow, wide } = {}) =>
     j(cls.container, narrow && cls.containerNarrow, wide && cls.containerWide),
   tag: ({ accent } = {}) => j(cls.tag, accent && cls.tagAccent),

package/classes/vscode.css-custom-data.json

@@ -201,6 +201,18 @@
       "name": "--focus-ring",
       "description": "Theme token. Light: `var(--accent)` · Dark: `var(--accent)`"
     },
+    {
+      "name": "--focus-ring-offset",
+      "description": "Global scale token. Value: `2px`"
+    },
+    {
+      "name": "--focus-ring-width",
+      "description": "Global scale token. Value: `2px`"
+    },
+    {
+      "name": "--hairline",
+      "description": "Global scale token. Value: `1px`"
+    },
     {
       "name": "--info",
       "description": "Theme token. Light: `#1f63c4` · Dark: `#6fb0e6`"
@@ -285,6 +297,22 @@
       "name": "--shadow-raised",
       "description": "Theme token. Light: `0 0 0 1px var(--line-strong)` · Dark: `0 0 0 1px var(--line-strong)`"
     },
+    {
+      "name": "--space-0-5",
+      "description": "Global scale token. Value: `0.125rem`"
+    },
+    {
+      "name": "--space-0-75",
+      "description": "Global scale token. Value: `0.1875rem`"
+    },
+    {
+      "name": "--space-1-5",
+      "description": "Global scale token. Value: `0.375rem`"
+    },
+    {
+      "name": "--space-2-5",
+      "description": "Global scale token. Value: `0.625rem`"
+    },
     {
       "name": "--space-2xl",
       "description": "Global scale token. Value: `2.5rem`"
@@ -409,6 +437,14 @@
       "name": "--tracking-wider",
       "description": "Global scale token. Value: `0.22em`"
     },
+    {
+      "name": "--ui-px",
+      "description": "Global scale token. Value: `1px`"
+    },
+    {
+      "name": "--ui-zoom",
+      "description": "Global scale token. Value: `1`"
+    },
     {
       "name": "--warning",
       "description": "Theme token. Light: `#806414` · Dark: `#d8bd72`"
@@ -421,10 +457,34 @@
       "name": "--z-base",
       "description": "Global scale token. Value: `0`"
     },
+    {
+      "name": "--z-canvas",
+      "description": "Global scale token. Value: `var(--z-base)`"
+    },
+    {
+      "name": "--z-chrome",
+      "description": "Global scale token. Value: `var(--z-sticky)`"
+    },
+    {
+      "name": "--z-menu",
+      "description": "Global scale token. Value: `var(--z-popover)`"
+    },
+    {
+      "name": "--z-modal",
+      "description": "Global scale token. Value: `var(--z-overlay)`"
+    },
+    {
+      "name": "--z-navigation",
+      "description": "Global scale token. Value: `80`"
+    },
     {
       "name": "--z-overlay",
       "description": "Global scale token. Value: `30`"
     },
+    {
+      "name": "--z-panel",
+      "description": "Global scale token. Value: `25`"
+    },
     {
       "name": "--z-popover",
       "description": "Global scale token. Value: `50`"
@@ -440,6 +500,10 @@
     {
       "name": "--z-toast",
       "description": "Global scale token. Value: `60`"
+    },
+    {
+      "name": "--z-tooltip",
+      "description": "Global scale token. Value: `70`"
     }
   ],
   "atDirectives": [

package/css/base.css

@@ -164,8 +164,8 @@ input:focus-visible,
 select:focus-visible,
 textarea:focus-visible,
 [tabindex]:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* Small global helpers reused across apps. */

package/css/blocknote.css

@@ -0,0 +1,61 @@
+/* ==========================================================================
+   blocknote — BlockNote's theme variables, mapped to bronto tokens.
+
+   INTEROP LEAF, opt-in. BlockNote (https://www.blocknotejs.org) themes its
+   editor, menus, side menu, toolbar and text highlights through `--bn-*`
+   custom properties on `.bn-root`, with its own light and dark values. Point
+   them at the bronto tokens and the editor follows the theme, skins, contrast
+   and the OLED surface like the rest of the page.
+
+   BlockNote's stylesheet is unlayered, and an unlayered rule outranks any
+   layered one, so import this leaf's UNLAYERED build, after BlockNote's:
+
+     @import '@blocknote/mantine/style.css';
+     @import '@ponchia/ui/css/unlayered/blocknote.css';
+
+   Text and background highlights are categorical identity (a colour a person
+   chose for a span), so they take `--cat-N-ink` and `--cat-N-tint` from
+   css/dataviz.css. Without that leaf they fall back to the status colours.
+   ========================================================================== */
+
+.bn-root,
+.bn-root[data-color-scheme] {
+  --bn-font-family: var(--sans);
+  --bn-border-radius: var(--radius-lg);
+  --bn-colors-editor-text: var(--text);
+  --bn-colors-editor-background: var(--panel);
+  --bn-colors-menu-text: var(--text);
+  --bn-colors-menu-background: var(--panel-strong);
+  --bn-colors-tooltip-text: var(--text);
+  --bn-colors-tooltip-background: var(--panel-soft);
+  --bn-colors-hovered-text: var(--text);
+  --bn-colors-hovered-background: var(--panel-soft);
+  --bn-colors-selected-text: var(--on-accent);
+  --bn-colors-selected-background: var(--accent);
+  --bn-colors-disabled-text: var(--text-dim);
+  --bn-colors-disabled-background: var(--panel-soft);
+  --bn-colors-shadow: var(--line);
+  --bn-colors-border: var(--line);
+  --bn-colors-side-menu: var(--text-dim);
+
+  /* Highlights: BlockNote's nine names onto the categorical hues. Gray is the
+     neutral ink; brown, which the palette has no hue for, is the orange ink. */
+  --bn-colors-highlights-gray-text: var(--text-dim);
+  --bn-colors-highlights-gray-background: var(--panel-soft);
+  --bn-colors-highlights-brown-text: var(--cat-2-ink, var(--warning));
+  --bn-colors-highlights-brown-background: var(--panel-soft);
+  --bn-colors-highlights-red-text: var(--cat-8-ink, var(--danger));
+  --bn-colors-highlights-red-background: var(--cat-8-tint, var(--panel-soft));
+  --bn-colors-highlights-orange-text: var(--cat-2-ink, var(--warning));
+  --bn-colors-highlights-orange-background: var(--cat-2-tint, var(--panel-soft));
+  --bn-colors-highlights-yellow-text: var(--cat-4-ink, var(--warning));
+  --bn-colors-highlights-yellow-background: var(--cat-4-tint, var(--panel-soft));
+  --bn-colors-highlights-green-text: var(--cat-6-ink, var(--success));
+  --bn-colors-highlights-green-background: var(--cat-6-tint, var(--panel-soft));
+  --bn-colors-highlights-blue-text: var(--cat-1-ink, var(--info));
+  --bn-colors-highlights-blue-background: var(--cat-1-tint, var(--panel-soft));
+  --bn-colors-highlights-purple-text: var(--cat-7-ink, var(--info));
+  --bn-colors-highlights-purple-background: var(--cat-7-tint, var(--panel-soft));
+  --bn-colors-highlights-pink-text: var(--cat-5-ink, var(--danger));
+  --bn-colors-highlights-pink-background: var(--cat-5-tint, var(--panel-soft));
+}

package/css/clamp.css

@@ -55,8 +55,8 @@
 }
 
 .ui-clamp__toggle:focus-visible + .ui-clamp__body + .ui-clamp__control {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .ui-clamp__less {

package/css/content.css

@@ -308,6 +308,132 @@
   margin-block-start: var(--space-lg);
 }
 
+/* --- Blocks variant — the block editor's geometry ---
+   For a surface that is both read and edited, where the editor is a block
+   editor (BlockNote's model): the read view has to put every line where the
+   editor will draw it, or the text jumps when the surface switches mode.
+   Blocks carry a small padding instead of flow margins; headings a lead above
+   and a 1.6/1.3/1.15em scale at weight 600; lists a fixed marker column with
+   disc, circle and square; a task row the editor's checkbox geometry. The
+   measure is released: a block surface is as wide as its container. The
+   geometry is the editor's own px, exposed so a host can retune it. */
+
+.ui-prose--blocks {
+  --prose-measure: none;
+  --prose-block: 3px;
+  --prose-heading-lead: 18px;
+  --prose-list-column: 24px;
+
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.ui-prose--blocks > *,
+.ui-prose--blocks > * + *,
+.ui-prose--blocks > * + :is(h1, h2, h3, h4, h5, h6),
+.ui-prose--blocks li,
+.ui-prose--blocks li + li,
+.ui-prose--blocks li > *,
+.ui-prose--blocks :is(ul, ol) :is(ul, ol),
+.ui-prose--blocks blockquote > *,
+.ui-prose--blocks blockquote > * + * {
+  margin-block: 0;
+}
+
+.ui-prose--blocks > :not(ul, ol),
+.ui-prose--blocks li {
+  padding-block: var(--prose-block);
+}
+
+/* An item's own block ends before its nested list, as the editor nests it. */
+.ui-prose--blocks li:has(> :is(ul, ol)) {
+  padding-block-end: 0;
+}
+
+.ui-prose--blocks li > :is(ul, ol) {
+  padding-block-start: var(--prose-block);
+}
+
+.ui-prose--blocks :is(h1, h2, h3, h4, h5, h6) {
+  padding-block: var(--prose-heading-lead) var(--prose-block);
+  border: 0;
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.ui-prose--blocks h1 {
+  font-size: 1.6em;
+}
+
+.ui-prose--blocks h2 {
+  font-size: 1.3em;
+}
+
+.ui-prose--blocks h3 {
+  font-size: 1.15em;
+}
+
+.ui-prose--blocks :is(ul, ol) {
+  padding-inline-start: var(--prose-list-column);
+}
+
+.ui-prose--blocks ul {
+  list-style: disc;
+}
+
+.ui-prose--blocks ul ul {
+  list-style: circle;
+}
+
+.ui-prose--blocks ul ul ul {
+  list-style: square;
+}
+
+.ui-prose--blocks li::marker {
+  color: inherit;
+}
+
+/* A task row is the editor's: the checkbox centred in a hit area at the text
+   column, the text padded inside the block. A loose list may put the checkbox
+   in the item's paragraph rather than the item. */
+.ui-prose--blocks li:has(> input[type='checkbox'], > p > input[type='checkbox']) {
+  margin-inline-start: calc(-1 * var(--prose-list-column));
+  padding-block: 10px;
+  list-style: none;
+}
+
+.ui-prose--blocks :is(li, li > p):has(> input[type='checkbox']) {
+  display: flex;
+  align-items: flex-start;
+}
+
+.ui-prose--blocks :is(li, li > p) > input[type='checkbox'] {
+  flex: none;
+  inline-size: 20px;
+  block-size: 20px;
+  margin: 2px 6px 0;
+}
+
+@media (pointer: coarse) {
+  .ui-prose--blocks li:has(> input[type='checkbox'], > p > input[type='checkbox']) {
+    padding-block: 16px;
+  }
+
+  .ui-prose--blocks :is(li, li > p) > input[type='checkbox'] {
+    margin-inline: 12px;
+  }
+}
+
+/* A quote is one block: its text on the body's line, its rule at the column. */
+.ui-prose--blocks blockquote {
+  margin-inline: 0;
+}
+
+.ui-prose--blocks blockquote > * {
+  line-height: inherit;
+}
+
 /* ==========================================================================
    ui-quote — pull-quote with attribution. A long-form companion to
    .ui-prose (works inside it or standalone). Emphasis via scale + a

package/css/disclosure.css

@@ -75,8 +75,8 @@
      distinction — colour stays the solid accent used by every other
      control's ring (the --focus-ring token wiring is decided globally,
      not per-component). */
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -3px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1.5 * var(--focus-ring-offset));
 }
 
 .ui-tabs__panel[hidden] {
@@ -216,8 +216,8 @@
 }
 
 .ui-segmented__option:has(input:focus-visible) {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 @media (hover: hover) {
@@ -439,8 +439,8 @@
 }
 
 .ui-carousel__viewport:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 .ui-carousel__slide {
@@ -519,8 +519,8 @@
 
 .ui-carousel__prev:focus-visible,
 .ui-carousel__next:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* Position counter ("3 / 12") — initCarousel fills the text; aria-live. */
@@ -584,8 +584,8 @@
 }
 
 .ui-carousel__thumb:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/css/forms.css

@@ -66,8 +66,8 @@
 .ui-input:focus-visible,
 .ui-select:focus-visible,
 .ui-textarea:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 1px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(var(--focus-ring-offset) / 2);
 }
 
 .ui-input:disabled,
@@ -292,8 +292,8 @@
 }
 
 .ui-range:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 4px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(2 * var(--focus-ring-offset));
 }
 
 /* --- Error summary: one focusable, assertive list of form errors --- */
@@ -358,8 +358,8 @@
    border-colour shift alone read markedly fainter on this one control. Keyed to
    :focus-visible on the inner input so it stays keyboard-only. */
 .ui-search:has(input:focus-visible) {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 1px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(var(--focus-ring-offset) / 2);
 }
 
 .ui-search:focus-within::before {
@@ -429,8 +429,8 @@
 }
 
 .ui-switch input:focus-visible + .ui-switch__track {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* ARIA contract: `.ui-switch` is a visually-styled checkbox. Author

package/css/primitives.css

@@ -812,12 +812,11 @@
 
 /* --- Touch: comfortable hit targets on coarse pointers.
 
-   The floor is `--tap-target`, not a bare rem. Bronto's own base sets
-   `html { font-size: 0.9375rem }`, so the 2.9rem this family used to carry
-   resolved to 43.5px — half a pixel under the 44px WCAG 2.5.5 / platform-HIG
-   target, and under any host that shrinks the root further it drifted further
-   still. The token clamps in px against the rem so the standard holds however
-   the root is re-pointed. --- */
+   The floor is `--tap-target`, not a bare rem. Under a 15px root the 2.9rem
+   this family used to carry resolved to 43.5px — half a pixel under the 44px
+   WCAG 2.5.5 / platform-HIG target, and under any host that shrinks the root
+   further it drifted further still. The token clamps in px against the rem so
+   the standard holds however the root is re-pointed. --- */
 
 @media (pointer: coarse) {
   .ui-button {

package/css/row.css

@@ -126,8 +126,8 @@
 .ui-row:focus-visible {
   background: var(--bg-accent);
   color: var(--text);
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 /* Touch: a row is a primary target in a list, so it floats to the full

package/css/term.css

@@ -39,8 +39,8 @@
 }
 
 .ui-term:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* The definition — a native popover. Reset the UA popover chrome to the Bronto

package/css/textref.css

@@ -39,8 +39,8 @@
 }
 
 .ui-textref:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
 }
 
 /* The browser-painted highlight on the matched fragment. Scoped to the page

package/css/toc.css

@@ -64,8 +64,8 @@
 }
 
 .ui-toc__link:focus-visible {
-  outline: 2px solid var(--focus-ring);
-  outline-offset: -2px;
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
 }
 
 @media (hover: hover) {