@junoput01/junoui 0.7.0 → 0.8.0

package/docs/components/gizmo.md

@@ -0,0 +1,114 @@
+# Viewport orientation gizmo
+
+The orientation widget any 3D or map viewport ships: a compass ring with
+clickable snap targets, a secondary arc for a second angle (pitch, tilt,
+elevation) inside a clamped range, and a centre target that resets the view.
+
+CAD and BIM viewers, product configurators, virtual tours, model previews, floor
+plans, any map with a tilt.
+
+## A ring, not a cube
+
+An Autodesk-style ViewCube is the wrong shape for anything with a **privileged
+up-vector** — a map, a terrain, a site plan — because there is no meaningful
+front, right or bottom face to click. A ring degrades to that case and
+generalises to free orbit; a cube does not go the other way.
+
+## Web
+
+```html
+<div
+  class="juno-gizmo"
+  role="group"
+  aria-label="View orientation"
+  style="--juno-gizmo-heading:45deg; --juno-gizmo-pitch:35deg;"
+>
+  <p class="juno-gizmo__readout" aria-live="polite">
+    Facing north-east, 45 degrees. Tilted 35 degrees.
+  </p>
+  <div class="juno-gizmo__ring">
+    <span class="juno-gizmo__needle" aria-hidden="true"></span>
+    <button class="juno-gizmo__mark" style="--juno-gizmo-at:0deg" aria-label="Face north">N</button>
+    <!-- …seven more, every 45° -->
+    <button class="juno-gizmo__center" aria-label="Reset view to north, level">⌖</button>
+  </div>
+  <div class="juno-gizmo__arc"><span class="juno-gizmo__arc-hand" aria-hidden="true"></span></div>
+</div>
+```
+
+| Class / prop                      | Effect                                       |
+| --------------------------------- | -------------------------------------------- |
+| `.juno-gizmo`                     | Root. Holds the angles and the derived size. |
+| `.juno-gizmo__readout`            | The spoken state. `aria-live="polite"`.      |
+| `.juno-gizmo__ring`               | The compass ring.                            |
+| `.juno-gizmo__needle`             | Points at `--juno-gizmo-heading`.            |
+| `.juno-gizmo__mark`               | A snap target. A real `<button>`.            |
+| `.juno-gizmo__center`             | Reset target.                                |
+| `.juno-gizmo__arc` / `__arc-hand` | The second angle, clamped.                   |
+| `--juno-gizmo-heading` / `-pitch` | **The app writes these.**                    |
+| `--juno-gizmo-at`                 | One mark's own bearing.                      |
+| `--juno-gizmo-pitch-min` / `-max` | The clamp (default `0deg`–`85deg`).          |
+| `--juno-gizmo-size`               | Ring diameter. Derived — see below.          |
+
+**The app owns the camera.** junoui rotates the needle and the hand; it never
+stores or changes an angle.
+
+## The accessibility contract
+
+This is why the component is upstream rather than in each app.
+
+- **`role="group"`** with an accessible name on the root.
+- **Snap targets are real `<button>`s.** Not a canvas hit test, not a `div` with
+  a click handler. A button is focusable, activates on Enter _and_ Space, is
+  announced as a control, and works in a screen reader's forms mode.
+- **Every mark carries an accessible name**, because `"N"` is a letter, not a
+  name. `aria-label="Face north"`.
+- **One focus stop.** Tab reaches the gizmo once; arrow keys move between marks
+  and **wrap**, Enter activates. Eight tab stops for eight compass points is what
+  apps ship and what makes the widget unusable by keyboard.
+- **The bearing is announced in words.** A rotating needle announces nothing, and
+  `"37deg"` is a number the listener has to convert. The readout is a live region
+  saying _"Facing north-east, 37 degrees. Tilted 45 degrees."_
+- **`aria-current="true"`** on the mark the camera is nearest — not a class, since
+  the app must say it for the screen reader anyway.
+
+```js
+import { enhanceGizmo, orientationLabel, bearingLabel } from 'junoui/gizmo';
+
+enhanceGizmo(el); // one focus stop, wrapping arrows
+readout.textContent = orientationLabel(yaw, pitch);
+bearingLabel(37); // → "north-east"
+```
+
+Stateless, like `junoui/tree`: it moves focus and lets the marks' own click
+handlers fire. It never writes an angle.
+
+## The diameter is derived, not chosen
+
+`N` marks sit evenly around the rim, and each is inset from it by half a target,
+so their centres lie on a circle of radius `d/2 − tap/2`. The straight-line
+distance between two adjacent centres — the **chord**, not the arc — must be at
+least one tap target:
+
+```
+d ≥ tap · (1 / sin(π / N) + 1)
+```
+
+which is what `--juno-gizmo-size` computes: `158.98px` at `N = 8` and a 44px
+target.
+
+**This derivation was wrong twice, and both errors were invisible in the
+source.** Sizing off the _arc_ between centres (`N · tap / π`) gives 112.05px,
+whose chord is 42.9px — every neighbouring pair overlapping by 1.1px. Correcting
+to the chord but forgetting the inset gives 114.98px and measures 27.16px between
+centres. Both were caught by measuring a laid-out ring, which is why
+`test/visual/gizmo.spec.mjs` asserts the distance between every pair of marks
+rather than trusting the formula. The tap floor **moves** — 24px on a
+fine pointer, 44px on a coarse one — so a ring with a hard-coded diameter has
+eight overlapping targets on a phone. Setting `--juno-gizmo-size` larger is fine;
+`max()` stops it going below what the marks need.
+
+## Motion
+
+Snap transitions run on `--juno-motion-scale`, so `prefers-reduced-motion`
+collapses them through the base layer without a component-local media query.

package/docs/components/swatch.md

@@ -0,0 +1,95 @@
+# Colour swatch & palette
+
+Showing a user-chosen colour, and letting someone pick one. Diagrams, calendars,
+tag and label systems, chart series colours, annotation tools, theming UIs,
+kanban boards.
+
+## The hard part is not the square
+
+A swatch shows an **arbitrary** colour, so every piece of chrome on it — its
+border, its focus ring, its checked indicator — has to stay visible against a
+colour junoui has never seen. A single hairline fails at one end of the range: a
+dark border vanishes on near-black, a light one vanishes on near-white, and the
+swatch that loses its border is the one that has merged with the panel behind it.
+
+So the border is a **pair** of hairlines, one dark (inset) and one light
+(outset). Whatever the swatch, one of them contrasts; the other is the one you
+do not notice. `test/swatch.test.mjs` sweeps the swatch colour and asserts one
+ring always clears 3:1, rather than asserting a border value.
+
+**Focus rings sit outside the swatch, with an offset**, so their contrast is
+against the panel — a known surface — rather than against a hue junoui cannot
+predict. A ring drawn _on_ the swatch has the same unsolvable problem, and a
+thicker ring does not fix a hue collision.
+
+## Web
+
+```html
+<span
+  class="juno-swatch"
+  style="--juno-swatch-color:#C41E3A"
+  role="img"
+  aria-label="Crimson"
+></span>
+
+<button
+  class="juno-swatch juno-swatch--button"
+  style="--juno-swatch-color:#1F6FEB"
+  aria-label="Annotation colour: Azure"
+  popovertarget="palette"
+></button>
+
+<div class="juno-popover" popover id="palette">
+  <div class="juno-palette" role="listbox" aria-label="Annotation colour">
+    <button
+      class="juno-palette__option"
+      role="option"
+      aria-selected="true"
+      style="--juno-swatch-color:#1F6FEB"
+      aria-label="Azure"
+    >
+      <svg class="juno-icon juno-palette__check" aria-hidden="true">
+        <use href="…#juno-i-check" />
+      </svg>
+    </button>
+  </div>
+</div>
+```
+
+| Class / prop                  | Effect                                                  |
+| ----------------------------- | ------------------------------------------------------- |
+| `.juno-swatch`                | The square. Two-tone ring, sized off the control scale. |
+| `.juno-swatch--circle`        | Round rather than square.                               |
+| `.juno-swatch--sm`            | `space.16` — inline with body text.                     |
+| `.juno-swatch--lg`            | `size.tap.comfortable` — a primary trigger.             |
+| `.juno-swatch--button`        | Swatch used as a trigger.                               |
+| `.juno-swatch--none`          | "No colour" — a slash, not a grey.                      |
+| `.juno-palette__option--none` | The same, as a choice in the grid.                      |
+| `.juno-palette`               | The grid inside a `.juno-popover`.                      |
+| `.juno-palette__option`       | One choice. Selected shows a glyph **and** a ring.      |
+| `--juno-swatch-color`         | **The app writes this.**                                |
+| `--juno-swatch-size`          | Defaults to `size.tap.min`.                             |
+| `--juno-palette-columns`      | Grid width (default `6`).                               |
+
+The app owns the colour list and which one is chosen.
+
+## Colour is never the only signal
+
+junoui's standing rule, and a bare swatch is exactly what violates it.
+
+- **Every swatch carries an accessible name.** `aria-label="Crimson"`, not a bare
+  square. A decorative swatch beside its own visible label can be `aria-hidden`,
+  but a swatch that _is_ the information needs the name.
+- **The checked state is a glyph**, not a hue. "The chosen one looks slightly
+  different" is invisible to anyone who cannot separate the two hues — and to
+  anyone reading a screenshot. The selected option also grows a ring in the
+  active role, so there are two non-colour cues.
+- **The check itself sits on an arbitrary colour**, so it gets a light glyph with
+  a dark halo — the canvas-ink pair at glyph scale.
+- **"No colour" is a slash, not a grey.** A consumer without this paints unset as
+  a mid grey and the user cannot tell _grey_ from _none_, which is a different
+  thing to know.
+
+`role="listbox"` + `role="option"` + `aria-selected` is the contract for a
+single-choice palette. The popover, its trigger and the open/close behaviour are
+`.juno-popover`'s — this is the grid that goes inside it.

package/docs/components/tree.md

@@ -0,0 +1,112 @@
+# Tree / outliner
+
+Nested rows at arbitrary depth with disclosure, selection and a reorder handle.
+Layer stacks, file browsers, settings trees, org charts, comment threads, nested
+navigation. `.juno-list` is flat and `.juno-accordion` is single-level; this
+nests.
+
+## Web
+
+```html
+<ul class="juno-tree" role="tree" aria-label="Scene">
+  <li
+    class="juno-tree__item"
+    role="treeitem"
+    aria-level="1"
+    aria-expanded="true"
+    aria-selected="false"
+  >
+    <div class="juno-tree__row">
+      <button class="juno-tree__caret" tabindex="-1" aria-hidden="true"></button>
+      <svg class="juno-icon juno-tree__icon" aria-hidden="true"><use href="…#juno-i-stack" /></svg>
+      <span class="juno-tree__label">Basemap</span>
+      <span class="juno-tree__count">3</span>
+      <span class="juno-tree__trail"><span class="juno-badge juno--nominal">ON</span></span>
+      <button class="juno-tree__handle" aria-label="Reorder Basemap"></button>
+    </div>
+    <ul class="juno-tree__group" role="group">
+      <li class="juno-tree__item" role="treeitem" aria-level="2" aria-selected="true">…</li>
+    </ul>
+  </li>
+</ul>
+```
+
+| Class / prop         | Effect                                                                   |
+| -------------------- | ------------------------------------------------------------------------ |
+| `.juno-tree`         | The `role="tree"` root. Sets `--juno-tree-indent`.                       |
+| `.juno-tree__item`   | One `role="treeitem"`. Carries `aria-expanded` / `-level` / `-selected`. |
+| `.juno-tree__group`  | A nested `role="group"`. One indent step; depth is structural.           |
+| `.juno-tree__row`    | The focusable line. Holds the tap floor.                                 |
+| `.juno-tree__caret`  | Disclosure triangle; rotates on `aria-expanded="true"`.                  |
+| `.juno-tree__count`  | Count badge slot on a group row.                                         |
+| `.juno-tree__trail`  | Trailing-control slot, as on `.juno-list__row`.                          |
+| `.juno-tree__handle` | Reorder affordance and its hit area.                                     |
+| `--juno-tree-indent` | One indent step (default `space.16`).                                    |
+
+Expansion and collapse are `aria-expanded` on the item — the app owns it, as with
+`aria-pressed` elsewhere in junoui. No JS is needed for the visuals.
+
+## The ARIA contract
+
+This is the half apps get wrong, so it is stated rather than implied.
+
+- **`role="tree"`** on the root, with an accessible name (`aria-label` or
+  `aria-labelledby`). **`role="group"`** on every nested list, **`role="treeitem"`**
+  on every item.
+- **`aria-level`** on every item, 1-based. Required: the nesting is visual, and
+  a screen reader does not infer depth from indentation.
+- **`aria-expanded`** on branches only. **Its absence is what makes an item a
+  leaf** — do not put `aria-expanded="false"` on a childless row, or it is
+  announced as a collapsed branch that never opens.
+- **`aria-selected`** for what the next action applies to. Distinct from
+  `aria-current` (which node you are _on_) and from `:hover`. A layer stack has
+  all three at once, which is why they paint differently.
+- **Roving tabindex**: exactly one row has `tabindex="0"`, the rest `-1`. One Tab
+  stop for the whole tree, not one per node.
+- **Multi-select** is `aria-multiselectable="true"` on the root plus
+  `aria-selected` on each item.
+
+### Keyboard
+
+| Key          | Action                                                          |
+| ------------ | --------------------------------------------------------------- |
+| ↓ / ↑        | Next / previous **visible** item, across levels                 |
+| →            | Closed branch: expand. Open branch: first child. Leaf: nothing. |
+| ←            | Open branch: collapse. Otherwise: parent.                       |
+| Home / End   | First / last visible item                                       |
+| Enter, Space | Select                                                          |
+| `*`          | Expand every sibling at this level                              |
+
+A tree without this is a list of buttons wearing tree roles. Because it is
+behaviour, no stylesheet can ship it — so junoui ships a stateless enhancer:
+
+```js
+import { enhanceTree } from 'junoui/tree';
+const stop = enhanceTree(document.querySelector('.juno-tree'));
+```
+
+It stores nothing: expansion and selection live on the DOM and belong to you. It
+moves focus and dispatches `juno-tree-toggle` / `juno-tree-select` (bubbling,
+cancelable, `detail.item`) — it does **not** expand, collapse, select or reorder,
+because in a real outliner expanding a node may need to load it.
+
+## Touch
+
+The row holds `--juno-size-tap-min`, which becomes the 44px comfortable target on
+a coarse pointer. The caret and the handle **paint** small so a dense tree stays
+dense, and grow only their **hit area** with a transparent overlay — a 44px
+painted caret would swallow the row it sits in.
+
+**The reorder handle is explicit, and that is not a style choice.** Long-press-drag
+is the obvious gesture and the wrong one: a tree sitting on or beside a pan/zoom
+surface has to let the pan win, and a gesture that means "reorder" here and "pan"
+one pixel to the left is a coin flip. The handle carries `touch-action: none` on
+itself alone, so dragging it never scrolls while the rest of the row still pans.
+
+## What junoui does not do
+
+Reorder **logic** — the drop calculation, the model mutation, autoscroll. junoui
+ships the affordance, its hit area, and the drop-target styling
+(`data-juno-drop="before|after|into"`, plus `data-juno-dragging`). A drop lands
+_between_ rows by default: the edge line says "between", a filled highlight says
+"into this one", and those are different operations in a tree.

package/docs/conformance-kit.md

@@ -121,9 +121,21 @@ file that deliberately names wrong classes, and 3 consumer-owned names.
    Generated, the typo class of defect cannot exist and the divergence becomes
    a visible decision.
 
-**Open question for review:** the two lists should probably become one set with
-a per-property opt-out, but "which primitives want `manipulation`" and "which
-want the highlight killed" may genuinely differ. Needs a decision, not a merge.
+**Shipped**, and the question is answered: **one set**, decided on the rules'
+own rationales rather than merged for tidiness. The tap-highlight rule exists so
+a UA square "never flashes past a rounded control on tap", and every name the
+shorter list omitted is a rounded tappable — `.juno-chip` and
+`.juno-pillbar__overflow` are 999px pills, `.juno-seg__opt` and
+`.juno-toggle-btn` carry `radius-3`. The omission had no stated reason and the
+rationale covers them, so it was an omission, not a decision.
+
+`src/css/touch-surfaces.mjs` declares the set; `bundle-css.mjs` emits both
+rules. `touch-action` stays out of the coarse block (a hybrid device reports a
+fine primary pointer while still taking touch input); the highlight stays in it.
+
+The guard checks the declared set against the **component sources**, not the
+manifest — the manifest is built from the bundle, and the bundle now contains
+these lists, so a misspelled member would vouch for itself there.
 
 ## C. Pointer-first responsiveness
 
@@ -225,17 +237,17 @@ the guard that would have failed did not exist on that branch (20260826-039).
 
 ## Sequencing
 
-| Slice | Contents                                     | Depends on |
-| ----- | -------------------------------------------- | ---------- |
-| ~~1~~ | ~~A (manifest + helper)~~ — **shipped**      | —          |
-| 2     | B2 (generate the `:where()` lists)           | 1          |
-| 3     | C (one pointer-first mechanism)              | —          |
-| 4     | D (buckets + floating chrome owns its inset) | 3          |
-| 5     | E (pillbar budget)                           | —          |
-| 6     | F (doctor)                                   | 1, 3       |
-| 7     | G (checklist, reduced to what F checks)      | 6          |
-
-Slice 1, B1 and E-for-dock are done. 024–027 are absorbed and closed.
+| Slice | Contents                                             | Depends on |
+| ----- | ---------------------------------------------------- | ---------- |
+| ~~1~~ | ~~A (manifest + helper)~~ — **shipped**              | —          |
+| ~~2~~ | ~~B2 (generate the `:where()` lists)~~ — **shipped** | 1          |
+| 3     | C (one pointer-first mechanism)                      | —          |
+| 4     | D (buckets + floating chrome owns its inset)         | 3          |
+| 5     | E (pillbar budget)                                   | —          |
+| 6     | F (doctor)                                           | 1, 3       |
+| 7     | G (checklist, reduced to what F checks)              | 6          |
+
+Slices 1 and 2, B1 and E-for-dock are done. 024–027 are absorbed and closed.
 
 **Review asks:** the three open questions above (A's public subset, B's two
 lists, C's condition), and whether slice 6 is worth its cost before slice 1

package/docs/native.md

@@ -1,4 +1,4 @@
-# Native mobile (Android / iOS)
+# Native (Android / iOS / Rust)
 
 Native platforms can't parse `oklch()`, so colors are pre-converted to sRGB hex
 during the build. Values match the web rendering.
@@ -43,6 +43,43 @@ let body: CGFloat = JunoTokens.fontSize14
 - Colors are `UIColor` constants named `<palette><Mode><Role>` (camelCase).
 - Dimensions are `CGFloat` constants.
 
+## Rust
+
+Any native Rust stack — egui, iced, Slint, Bevy, Dioxus desktop, Tauri's Rust
+side. Vendor `dist/rust/juno_tokens.rs` into your crate, or add junoui as a
+build dependency and copy it in `build.rs`.
+
+```rust
+include!(concat!(env!("OUT_DIR"), "/juno_tokens.rs")); // or `mod juno_tokens;`
+
+let bg = STANDARD_DARK.s0.to_f32_array();   // a whole theme, picked at runtime
+let accent = STANDARD_DARK_ACTIVE;          // or one role, flat
+let gap = SPACE_16;                         // f32 px
+let fade = MOTION_DURATION_BASE_MS;         // f32 milliseconds
+```
+
+| Emitted as                                         | From                                                 |
+| -------------------------------------------------- | ---------------------------------------------------- |
+| `Rgba` (`hex()`, `to_f32_array()`, `with_alpha()`) | every color token                                    |
+| `Palette` + one const per palette/mode             | the same colors, grouped                             |
+| `f32`                                              | `px` lengths                                         |
+| `f32`, suffixed `_MS`                              | `ms` durations                                       |
+| `i32`                                              | whole numbers (z-index, font weight)                 |
+| `f32`                                              | ratios (opacity, line height)                        |
+| `&str`                                             | CSS-authored values, verbatim (shadows, font stacks) |
+
+**`to_f32_array()` is sRGB-encoded, not linear.** If your pipeline wants linear
+(wgpu with a non-sRGB surface format), convert at your boundary — junoui cannot
+know which surface you created.
+
+**Shadows and font stacks are shipped unparsed.** A Rust renderer cannot consume
+`0 4px 14px rgb(0 0 0 / 0.35)` directly; they are here so the values live in one
+place, not as ready-made native input.
+
+**Do not transcribe these values into your own crate.** That copy is exactly
+what this target exists to stop — it goes stale on the first patch release and
+no lint catches it.
+
 ## Keeping in sync
 
 Re-run `npm run build` in junoui and re-copy the files (or script the copy in your

package/docs/tokens-reference.md

@@ -113,6 +113,21 @@ Color encodes status, never decoration. Each role has exactly one meaning.
 | `shadow.2` | `0 4px 14px rgb(0 0 0 / 0.35)` | `var(--juno-shadow-2)` | `JunoTokens.shadow2` |
 | `shadow.3` | `0 12px 32px rgb(0 0 0 / 0.50)` | `var(--juno-shadow-3)` | `JunoTokens.shadow3` |
 
+### ink
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `ink.canvas.ink` | `#FFFFFF` | `var(--juno-ink-canvas-ink)` | `JunoTokens.inkCanvasInk` |
+| `ink.canvas.halo` | `#000000` | `var(--juno-ink-canvas-halo)` | `JunoTokens.inkCanvasHalo` |
+| `ink.canvas.halo-width` | `2px` | `var(--juno-ink-canvas-halo-width)` | `JunoTokens.inkCanvasHalo-width` |
+| `ink.canvas.halo-width-lg` | `3px` | `var(--juno-ink-canvas-halo-width-lg)` | `JunoTokens.inkCanvasHalo-width-lg` |
+| `ink.canvas.scrim` | `0.28` | `var(--juno-ink-canvas-scrim)` | `JunoTokens.inkCanvasScrim` |
+| `ink.vivid.nominal` | `oklch(76% 0.28 148)` | `var(--juno-ink-vivid-nominal)` | `JunoTokens.inkVividNominal` |
+| `ink.vivid.active` | `oklch(76% 0.24 205)` | `var(--juno-ink-vivid-active)` | `JunoTokens.inkVividActive` |
+| `ink.vivid.target` | `oklch(70% 0.30 328)` | `var(--juno-ink-vivid-target)` | `JunoTokens.inkVividTarget` |
+| `ink.vivid.caution` | `oklch(82% 0.20 82)` | `var(--juno-ink-vivid-caution)` | `JunoTokens.inkVividCaution` |
+| `ink.vivid.warning` | `oklch(68% 0.28 25)` | `var(--juno-ink-vivid-warning)` | `JunoTokens.inkVividWarning` |
+
 ### Motion
 
 | Token | Value | CSS variable | Flutter / iOS |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junoput01/junoui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "junoui — a token-driven design system. Color carries semantic meaning, never decoration: every hue has one assigned role (NOMINAL / ACTIVE / TARGET / CAUTION / WARNING). Ships multi-platform tokens (CSS, SCSS, JS/TS, JSON, Android, iOS, Flutter) plus a framework-agnostic CSS component layer.",
   "type": "module",
   "license": "MIT",
@@ -48,8 +48,11 @@
     "./android/dimens": "./dist/android/dimens.xml",
     "./ios": "./dist/ios/JunoTokens.swift",
     "./flutter": "./dist/flutter/juno_tokens.dart",
+    "./rust": "./dist/rust/juno_tokens.rs",
     "./icons": "./dist/icons/juno-icons.svg",
     "./subset": "./tools/subset-sprite.mjs",
+    "./tree": "./tools/tree.mjs",
+    "./gizmo": "./tools/gizmo.mjs",
     "./testing": "./tools/testing.mjs",
     "./classes.json": "./dist/classes.json",
     "./icons/inline": "./dist/icons/inline.js",

package/src/css/base.css

@@ -189,47 +189,18 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
      `.juno-input` font-size later in the bundle. It did, silently, until
      20260815-006's coarse-pointer project measured it. */
 
-  /* Kill the UA tap-highlight square on the interactive surfaces so it never
-     flashes past a rounded control on tap. Consumers were adding this by hand
-     per component; make it a first-class touch default. See 20260802-020. */
-  :where(
-    .juno-btn,
-    .juno-dock__item,
-    .juno-pillbar__item,
-    .juno-tabs__tab,
-    .juno-list__row,
-    .juno-menu__item
-  ) {
-    -webkit-tap-highlight-color: transparent;
-  }
+  /* The tap-highlight default that used to live here is GENERATED now, from
+     src/css/touch-surfaces.mjs, together with the touch-action default that
+     shares its member list. Two hand-maintained lists had drifted from the
+     classes and from each other; see that file. */
 }
 
-/* Tappable primitives opt out of double-tap-to-zoom. A browser that still
-   recognises that gesture has to WAIT after the first tap to see whether a
-   second one is coming, which reads as a late, mushy tap on exactly the
-   surfaces a phone UI is built from. `manipulation` keeps panning and
-   pinch-zoom (so the page stays zoomable — never `none` here, that would be an
-   a11y regression) and drops only the double-tap.
-   NOT inside the pointer:coarse block above: a hybrid device (touch laptop,
-   iPad with a trackpad) reports a fine primary pointer while still taking
-   touch input, and the property is inert on a mouse anyway.
-   Community convention — no primary Apple/WebKit source names it; see
-   docs/ios-conformance.md. Named components only, so a consumer's own elements
-   are untouched. See 20260803-038. */
-:where(
-  .juno-btn,
-  .juno-dock__item,
-  .juno-pillbar__item,
-  .juno-pillbar__overflow,
-  .juno-tabs__tab,
-  .juno-list__row,
-  .juno-menu__item,
-  .juno-seg__opt,
-  .juno-chip,
-  .juno-toggle-btn
-) {
-  touch-action: manipulation;
-}
+/* The touch defaults that used to be two hand-maintained `:where()` lists here
+   are GENERATED from src/css/touch-surfaces.mjs and emitted straight after this
+   file. Both lists had drifted — from the classes (`.juno-seg__option`,
+   `.juno-list__item`: neither exists, so `:where()` matched nothing and the
+   rule parsed anyway) and from each other. One declared set now feeds both.
+   See 20260826-024 and docs/conformance-kit.md. */
 
 /* Gesture-owned surfaces — for an element whose pointer events are fully
    driven by app JS (drag-pan, pinch-zoom, swipe classification: a state

package/src/css/components/canvas-ink.css

@@ -0,0 +1,97 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Canvas ink (marks drawn over arbitrary imagery)
+ *  For text and vector ink sitting on a photo, a map, a video frame or a
+ *  camera feed: anywhere the background is CONTENT rather than one of
+ *  junoui's surfaces.
+ *
+ *  WHY IT IS NOT JUST A COLOUR. junoui's whole contrast story assumes a
+ *  controlled surface, s0 through s3 — every role colour's ratio is
+ *  computed against a known background. Over imagery there is no known
+ *  background. In one orthophoto a black shadow and a snowfield are
+ *  adjacent pixels, so no single ink colour is legible and no contrast
+ *  ratio can be asserted about one. The answer is a PAIR that spans the
+ *  luminance range: over a light backing the halo carries the contrast,
+ *  over a dark one the ink does. Neither half works alone, which is why
+ *  they are applied together by one class.
+ *
+ *  NOT THEMED, on purpose. A satellite image does not get lighter because
+ *  the user chose light mode. Theming this pair would make it track the
+ *  app's surface, which is precisely the background it is NOT over.
+ *  Usage:
+ *    <figcaption class="juno-canvas-ink">Sector 7 · 1.2 km</figcaption>
+ *    <svg class="juno-canvas-ink"><path class="juno-canvas-ink__stroke" …/></svg>
+ *    <div class="juno-canvas-scrim">…chrome floating over the content…</div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* Text. Four offset shadows rather than one blur: a blurred shadow fades at
+   the glyph's corners, which is exactly where a thin stroke needs the most
+   help, and it costs the same. `paint-order` is for SVG text, where a real
+   stroke is available and better. */
+.juno-canvas-ink {
+  color: var(--juno-ink-canvas-ink);
+  paint-order: stroke fill;
+  stroke: var(--juno-ink-canvas-halo);
+  stroke-width: var(--juno-ink-canvas-halo-width);
+  text-shadow:
+    var(--juno-ink-canvas-halo-width) 0 0 var(--juno-ink-canvas-halo),
+    calc(-1 * var(--juno-ink-canvas-halo-width)) 0 0 var(--juno-ink-canvas-halo),
+    0 var(--juno-ink-canvas-halo-width) 0 var(--juno-ink-canvas-halo),
+    0 calc(-1 * var(--juno-ink-canvas-halo-width)) 0 var(--juno-ink-canvas-halo);
+}
+
+/* Display sizes: a 2px halo reads as a hairline against a heavier stroke. */
+.juno-canvas-ink--lg {
+  stroke-width: var(--juno-ink-canvas-halo-width-lg);
+  text-shadow:
+    var(--juno-ink-canvas-halo-width-lg) 0 0 var(--juno-ink-canvas-halo),
+    calc(-1 * var(--juno-ink-canvas-halo-width-lg)) 0 0 var(--juno-ink-canvas-halo),
+    0 var(--juno-ink-canvas-halo-width-lg) 0 var(--juno-ink-canvas-halo),
+    0 calc(-1 * var(--juno-ink-canvas-halo-width-lg)) 0 var(--juno-ink-canvas-halo);
+}
+
+/* Vector ink — measurement lines, selection outlines. Two passes: the halo
+   is the same path drawn wider underneath. In SVG give the halo element
+   this class and the mark element __stroke; in canvas, stroke twice. */
+.juno-canvas-ink__halo {
+  fill: none;
+  stroke: var(--juno-ink-canvas-halo);
+  stroke-width: calc(var(--juno-ink-canvas-halo-width) * 2);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.juno-canvas-ink__stroke {
+  fill: none;
+  stroke: var(--juno-ink-canvas-ink);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Status over canvas. The themed role hues are chosen against s0–s3 and wash
+   out over a saturated backdrop, so these are the same hues at raised chroma.
+   Louder than the panel roles by design — they will look wrong on a panel. */
+.juno-canvas-ink--nominal { color: var(--juno-ink-vivid-nominal); }
+.juno-canvas-ink--active { color: var(--juno-ink-vivid-active); }
+.juno-canvas-ink--target { color: var(--juno-ink-vivid-target); }
+.juno-canvas-ink--caution { color: var(--juno-ink-vivid-caution); }
+.juno-canvas-ink--warning { color: var(--juno-ink-vivid-warning); }
+
+/* Chrome floating over live content. Deliberately NOT --juno-opacity-scrim
+   (0.62): that value suppresses a modal's background, and here the background
+   is the thing the chrome is annotating — greying it out defeats the purpose. */
+.juno-canvas-scrim {
+  background: color-mix(in srgb, var(--juno-s0) calc(var(--juno-ink-canvas-scrim) * 100%), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+/* A translucent bar over moving content is the case where reduced
+   transparency matters most — the motion behind the text is the problem, not
+   the blur. Fall back to the opaque surface. */
+@media (prefers-reduced-transparency: reduce) {
+  .juno-canvas-scrim {
+    background: var(--juno-s0);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}