@junoput01/junoui 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- 584359f: **Canvas ink — a halo pair for UI drawn over arbitrary imagery.**
+
+  junoui's contrast story assumes a controlled surface, `s0` through `s3`: every role colour's ratio is computed against a known background. Content drawn over a photo, a map, a video frame or a camera feed has 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.
+
+  New `ink.canvas.ink` / `ink.canvas.halo`: a pair that spans the luminance range, applied together. Over a light backing the halo carries the contrast, over a dark one the ink does. Plus `ink.vivid.*` (role hues at raised chroma, since chrome-tuned hues wash out over a saturated backdrop) and `ink.canvas.scrim` (`0.28`, for chrome floating over live content — deliberately distinct from `opacity.scrim` at `0.62`, which suppresses a modal's background and here would grey out the content being annotated).
+
+  Shipped as CSS you can apply, not only as tokens: `.juno-canvas-ink` (+ `--lg` and the role modifiers), `.juno-canvas-ink__halo` / `__stroke` for vector marks, and `.juno-canvas-scrim` with a reduced-transparency fallback. Every platform target carries the tokens — CSS, SCSS, JS, Swift, Dart, Android and Rust.
+
+  **The pair is not themed**, on purpose: a satellite image does not get lighter because the user chose light mode.
+
+  **The halo is pure black because the arithmetic requires it.** The worst backing is a mid grey where both halves are weakest; the sweep floor there is 4.61:1 against a 4.5:1 requirement, and a near-black with a blue cast measures 4.43:1 and fails. The guard sweeps all 256 grey backings rather than sampling the extremes, which are the easy cases.
+
+  Additive: no existing token or output changes.
+
+- 63ddc0e: **Viewport orientation gizmo — compass ring, pitch arc, snap targets.**
+
+  The orientation widget any 3D or map viewport ships: a ring showing a heading 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. For CAD and BIM viewers, product configurators, virtual tours, model previews, floor plans, and 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.
+
+  **The app owns the camera.** It writes `--juno-gizmo-heading` and `--juno-gizmo-pitch`; junoui rotates the needle and the hand and never stores an angle.
+
+  The accessibility contract is why this is upstream rather than app-local: snap targets are real `<button>`s (focusable, activate on Enter _and_ Space, announced as controls, work in a screen reader's forms mode); every mark carries a real name, because `"N"` is a letter and not one; the widget is **one focus stop** with wrapping arrow keys, not eight tab stops for eight compass points; and the bearing is announced in words through a live region, because a rotating needle announces nothing and `"37deg"` is a number the listener has to convert.
+
+  ```js
+  import { enhanceGizmo, orientationLabel, bearingLabel } from 'junoui/gizmo';
+  bearingLabel(37); // → "north-east"
+  ```
+
+  **The ring's diameter is derived, not chosen:** `d ≥ tap · (1 / sin(π/N) + 1)`. The tap floor moves from 24px to 44px on a coarse pointer, so a hard-coded diameter ships eight overlapping targets to a phone.
+
+- cc1e29d: **Rust token target — `junoui/rust`.**
+
+  junoui compiles one DTCG source to CSS, SCSS, JS, Android XML, iOS Swift, Flutter Dart and DTCG JSON. Rust was the one mainstream native target missing, so a Rust consumer had to hand-transcribe hex values — which drift silently on the first patch release, with no lint to catch the stale copy. That is the mirrored-constant defect; this removes the reason to commit it.
+
+  `dist/rust/juno_tokens.rs` (exported as `junoui/rust`) is a dependency-free const module for any native Rust stack — egui, iced, Slint, Bevy, Dioxus desktop, Tauri's Rust side:
+
+  ```rust
+  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
+  ```
+
+  Colors become an `Rgba` struct with `const fn hex()`, `to_f32_array()` and `with_alpha()`; core tokens are bucketed by the **form** of their value rather than by which file they came from — `px` → `f32`, `ms` → `f32` suffixed `_MS`, whole numbers → `i32`, ratios → `f32`, and CSS-authored strings (shadows, font stacks) shipped verbatim as `&str`.
+
+  Beyond the flat constants the Swift and Dart targets ship, there is a `Palette` struct and one const per palette/mode, because a Rust app picks a theme at runtime and wants a value it can pass around. Its fields and the constants that fill it both come from junoui's role list, so a role cannot reach one and miss the other.
+
+  `to_f32_array()` is sRGB-encoded, not linear — convert at your boundary if your pipeline wants linear.
+
+  Additive: no existing output changes.
+
+- cd1dd93: **Colour swatch + palette.**
+
+  `classes.json` 0.7.0 had no class matching _swatch_ or _color_: no way to show a user-chosen colour or let someone pick one. For diagrams, calendars, tag and label systems, chart series colours, annotation tools, theming UIs and kanban boards.
+
+  **The hard part is not the square.** A swatch shows an arbitrary colour, so its border, its focus ring and its checked indicator all have to stay visible against a colour junoui has never seen. The border is a **pair** of hairlines that do different jobs: the inset one composites over the _swatch_ and edges it against its own fill; the outset one composites over the _panel_ and separates it from the surface. With the swatch's own contrast against that panel, the boundary has three ways to be visible and needs only one.
+
+  The alphas are measured, not chosen: at 0.45 / 0.35 a mid-grey swatch on a light panel leaves the best of the three at **2.57:1**, under the 3:1 non-text floor. At 0.65 the worst case is 3.39:1. The guard sweeps the swatch colour against both panels and keeps the old values as its control.
+
+  **Focus rings sit outside the swatch**, so their contrast is against the panel — a known surface. A ring drawn _on_ the swatch has the same unsolvable problem as the border, and a thicker ring does not fix a hue collision.
+
+  **Colour is never the only signal**, which is junoui's own rule and exactly what a bare swatch violates: every swatch carries an accessible name, the checked state is a **glyph** (with a dark halo, since it sits on the arbitrary colour) _plus_ a ring, and `--none` is a slash rather than a grey — a consumer without it paints unset as mid grey and the user cannot tell _grey_ from _none_.
+
+  `.juno-palette` is the grid that goes inside an existing `.juno-popover`; the app owns the colour list and the state.
+
+- 671db90: **Tree / outliner — nested rows, disclosure, selection, reorder.**
+
+  `.juno-list` is flat and `.juno-accordion` is single-level. `.juno-tree` nests to arbitrary depth and carries a selection, a count slot, the same trailing-control slot `.juno-list__row` has, and a reorder handle. For layer stacks, file browsers, settings trees, org charts, comment threads and nested navigation.
+
+  **Zero JS for the visuals.** Indentation comes from the nested `role="group"` lists the ARIA pattern already requires, so depth is structural — no per-row custom property, no level number to keep in sync with `aria-level`. Collapse is `[aria-expanded="false"]` on the item, which the app owns, exactly like `aria-pressed` elsewhere.
+
+  **Keyboard is not optional and is not CSS.** A tree without arrow-key traversal and a roving tabindex is a list of buttons wearing tree roles, so junoui ships a stateless enhancer at `junoui/tree`:
+
+  ```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 expanding a node may need to load it.
+
+  **Three states that get conflated are painted separately:** `:hover` is where the pointer is, `aria-current` is which node you are on, `aria-selected` is what the next action applies to. A layer stack has all three at once.
+
+  **Touch.** The row holds `--juno-size-tap-min`. The caret and handle paint small so a dense tree stays dense and grow only their _hit area_ — a 44px painted caret would swallow its row. The handle is explicit and carries `touch-action: none` on itself alone: long-press-drag is the obvious gesture and the wrong one, because a tree beside a pan surface has to let the pan win.
+
+  Reorder _logic_ stays yours; junoui ships the affordance, its hit area, and the drop styling (`data-juno-drop="before|after|into"`, `data-juno-dragging`) — where a between-rows drop and an into-a-row drop look different, because they are different operations.
+
+### Patch Changes
+
+- 4f466ff: **The touch defaults are generated from one declared set — conformance kit slice 2.**
+
+  `base.css` carried two hand-maintained `:where()` lists, and both had drifted.
+
+  **From the classes:** `.juno-seg__option` (the shipped class is `.juno-seg__opt`) and `.juno-list__item` (it is `.juno-list__row`) sat in them. `:where()` matched nothing, the rule still parsed, every other member kept working — so every segmented control and every grouped list row in every consumer kept the ~300ms double-tap delay.
+
+  **From each other:** the tap-highlight list was a strict subset of the touch-action one, missing `__overflow`, `__opt`, `chip` and `toggle-btn`.
+
+  **Consumer-visible change:** `.juno-chip`, `.juno-pillbar__overflow`, `.juno-seg__opt` and `.juno-toggle-btn` now have their UA tap-highlight square suppressed on a coarse pointer, like every other tappable primitive. Verified in Chromium on both pointer types. Nothing else moves.
+
+  `src/css/touch-surfaces.mjs` is now the source of truth; the two rules are emitted from it. Adding a component to the touch defaults is one line and gets both. `touch-action` stays outside the coarse block — a hybrid device reports a fine primary pointer while still taking touch input — and the highlight stays inside it.
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/android/dimens.xml

@@ -9,6 +9,8 @@
   <dimen name="bp_lg">1024dp</dimen>
   <dimen name="bp_xl">1280dp</dimen>
   <dimen name="bp_2xl">1536dp</dimen>
+  <dimen name="ink_canvas_halo-width">2dp</dimen>
+  <dimen name="ink_canvas_halo-width-lg">3dp</dimen>
   <dimen name="radius_2">2dp</dimen>
   <dimen name="radius_3">3dp</dimen>
   <dimen name="radius_4">4dp</dimen>

package/dist/classes.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0",
+  "version": "0.8.0",
   "all": [
     "juno--active",
     "juno--caution",
@@ -57,6 +57,16 @@
     "juno-btn--dense",
     "juno-btn--ghost",
     "juno-btn--sm",
+    "juno-canvas-ink",
+    "juno-canvas-ink--active",
+    "juno-canvas-ink--caution",
+    "juno-canvas-ink--lg",
+    "juno-canvas-ink--nominal",
+    "juno-canvas-ink--target",
+    "juno-canvas-ink--warning",
+    "juno-canvas-ink__halo",
+    "juno-canvas-ink__stroke",
+    "juno-canvas-scrim",
     "juno-card",
     "juno-card--accent",
     "juno-card--alert",
@@ -104,6 +114,14 @@
     "juno-gauge__label",
     "juno-gauge__value",
     "juno-gesture-surface",
+    "juno-gizmo",
+    "juno-gizmo__arc",
+    "juno-gizmo__arc-hand",
+    "juno-gizmo__center",
+    "juno-gizmo__mark",
+    "juno-gizmo__needle",
+    "juno-gizmo__readout",
+    "juno-gizmo__ring",
     "juno-grid-auto",
     "juno-grid-auto--tiles",
     "juno-heading",
@@ -155,6 +173,10 @@
     "juno-pagination",
     "juno-pagination__gap",
     "juno-pagination__item",
+    "juno-palette",
+    "juno-palette__check",
+    "juno-palette__option",
+    "juno-palette__option--none",
     "juno-pan-x",
     "juno-pan-y",
     "juno-pillbar",
@@ -231,6 +253,12 @@
     "juno-stepper__label",
     "juno-stepper__marker",
     "juno-stepper__step",
+    "juno-swatch",
+    "juno-swatch--button",
+    "juno-swatch--circle",
+    "juno-swatch--lg",
+    "juno-swatch--none",
+    "juno-swatch--sm",
     "juno-switch",
     "juno-switch--sm",
     "juno-switch__input",
@@ -310,6 +338,16 @@
     "juno-tooltip__bubble--bottom",
     "juno-tooltip__bubble--left",
     "juno-tooltip__bubble--right",
+    "juno-tree",
+    "juno-tree__caret",
+    "juno-tree__count",
+    "juno-tree__group",
+    "juno-tree__handle",
+    "juno-tree__icon",
+    "juno-tree__item",
+    "juno-tree__label",
+    "juno-tree__row",
+    "juno-tree__trail",
     "juno-value"
   ],
   "public": [
@@ -364,6 +402,12 @@
     "juno-btn--dense",
     "juno-btn--ghost",
     "juno-btn--sm",
+    "juno-canvas-ink",
+    "juno-canvas-ink--lg",
+    "juno-canvas-ink--warning",
+    "juno-canvas-ink__halo",
+    "juno-canvas-ink__stroke",
+    "juno-canvas-scrim",
     "juno-card",
     "juno-card--accent",
     "juno-card--alert",
@@ -410,6 +454,14 @@
     "juno-gauge__label",
     "juno-gauge__value",
     "juno-gesture-surface",
+    "juno-gizmo",
+    "juno-gizmo__arc",
+    "juno-gizmo__arc-hand",
+    "juno-gizmo__center",
+    "juno-gizmo__mark",
+    "juno-gizmo__needle",
+    "juno-gizmo__readout",
+    "juno-gizmo__ring",
     "juno-grid-auto",
     "juno-grid-auto--tiles",
     "juno-hide-below-md",
@@ -456,6 +508,10 @@
     "juno-pagination",
     "juno-pagination__gap",
     "juno-pagination__item",
+    "juno-palette",
+    "juno-palette__check",
+    "juno-palette__option",
+    "juno-palette__option--none",
     "juno-pan-x",
     "juno-pan-y",
     "juno-pillbar",
@@ -524,6 +580,12 @@
     "juno-stepper__label",
     "juno-stepper__marker",
     "juno-stepper__step",
+    "juno-swatch",
+    "juno-swatch--button",
+    "juno-swatch--circle",
+    "juno-swatch--lg",
+    "juno-swatch--none",
+    "juno-swatch--sm",
     "juno-switch",
     "juno-switch--sm",
     "juno-switch__input",
@@ -589,6 +651,16 @@
     "juno-tooltip__bubble--bottom",
     "juno-tooltip__bubble--left",
     "juno-tooltip__bubble--right",
+    "juno-tree",
+    "juno-tree__caret",
+    "juno-tree__count",
+    "juno-tree__group",
+    "juno-tree__handle",
+    "juno-tree__icon",
+    "juno-tree__item",
+    "juno-tree__label",
+    "juno-tree__row",
+    "juno-tree__trail",
     "juno-value"
   ],
   "roles": [
@@ -723,6 +795,26 @@
         "juno-btn--sm"
       ]
     },
+    "canvas-ink": {
+      "block": "juno-canvas-ink",
+      "elements": [
+        "juno-canvas-ink__halo",
+        "juno-canvas-ink__stroke"
+      ],
+      "modifiers": [
+        "juno-canvas-ink--active",
+        "juno-canvas-ink--caution",
+        "juno-canvas-ink--lg",
+        "juno-canvas-ink--nominal",
+        "juno-canvas-ink--target",
+        "juno-canvas-ink--warning"
+      ]
+    },
+    "canvas-scrim": {
+      "block": "juno-canvas-scrim",
+      "elements": [],
+      "modifiers": []
+    },
     "card": {
       "block": "juno-card",
       "elements": [
@@ -847,6 +939,19 @@
       "elements": [],
       "modifiers": []
     },
+    "gizmo": {
+      "block": "juno-gizmo",
+      "elements": [
+        "juno-gizmo__arc",
+        "juno-gizmo__arc-hand",
+        "juno-gizmo__center",
+        "juno-gizmo__mark",
+        "juno-gizmo__needle",
+        "juno-gizmo__readout",
+        "juno-gizmo__ring"
+      ],
+      "modifiers": []
+    },
     "grid-auto": {
       "block": "juno-grid-auto",
       "elements": [],
@@ -978,6 +1083,15 @@
       ],
       "modifiers": []
     },
+    "palette": {
+      "block": "juno-palette",
+      "elements": [
+        "juno-palette__check",
+        "juno-palette__option",
+        "juno-palette__option--none"
+      ],
+      "modifiers": []
+    },
     "pan-x": {
       "block": "juno-pan-x",
       "elements": [],
@@ -1199,6 +1313,17 @@
         "juno-stepper--vertical"
       ]
     },
+    "swatch": {
+      "block": "juno-swatch",
+      "elements": [],
+      "modifiers": [
+        "juno-swatch--button",
+        "juno-swatch--circle",
+        "juno-swatch--lg",
+        "juno-swatch--none",
+        "juno-swatch--sm"
+      ]
+    },
     "switch": {
       "block": "juno-switch",
       "elements": [
@@ -1363,6 +1488,21 @@
       ],
       "modifiers": []
     },
+    "tree": {
+      "block": "juno-tree",
+      "elements": [
+        "juno-tree__caret",
+        "juno-tree__count",
+        "juno-tree__group",
+        "juno-tree__handle",
+        "juno-tree__icon",
+        "juno-tree__item",
+        "juno-tree__label",
+        "juno-tree__row",
+        "juno-tree__trail"
+      ],
+      "modifiers": []
+    },
     "value": {
       "block": "juno-value",
       "elements": [],
@@ -1458,10 +1598,27 @@
     "juno-gauge-size",
     "juno-gauge-value",
     "juno-gauge-width",
+    "juno-gizmo-at",
+    "juno-gizmo-heading",
+    "juno-gizmo-marks",
+    "juno-gizmo-pitch",
+    "juno-gizmo-pitch-max",
+    "juno-gizmo-pitch-min",
+    "juno-gizmo-size",
     "juno-grid-min",
     "juno-icon-loader-ring",
     "juno-icon-loader-ring-width",
     "juno-icon-size",
+    "juno-ink-canvas-halo",
+    "juno-ink-canvas-halo-width",
+    "juno-ink-canvas-halo-width-lg",
+    "juno-ink-canvas-ink",
+    "juno-ink-canvas-scrim",
+    "juno-ink-vivid-active",
+    "juno-ink-vivid-caution",
+    "juno-ink-vivid-nominal",
+    "juno-ink-vivid-target",
+    "juno-ink-vivid-warning",
     "juno-knob-edge",
     "juno-knob-face-hi",
     "juno-knob-face-lo",
@@ -1530,11 +1687,14 @@
     "juno-space-8",
     "juno-space-96",
     "juno-stepper-marker",
+    "juno-swatch-color",
+    "juno-swatch-size",
     "juno-target",
     "juno-thumb-glyph",
     "juno-thumb-ratio",
     "juno-tile-min",
     "juno-touch-action",
+    "juno-tree-indent",
     "juno-warning",
     "juno-z-alert",
     "juno-z-anchored",

package/dist/css/juno-tokens.css

@@ -16,6 +16,16 @@
   --juno-shadow-1: 0 1px 2px rgb(0 0 0 / 0.30);
   --juno-shadow-2: 0 4px 14px rgb(0 0 0 / 0.35);
   --juno-shadow-3: 0 12px 32px rgb(0 0 0 / 0.50);
+  --juno-ink-canvas-ink: #FFFFFF;
+  --juno-ink-canvas-halo: #000000;
+  --juno-ink-canvas-halo-width: 2px;
+  --juno-ink-canvas-halo-width-lg: 3px;
+  --juno-ink-canvas-scrim: 0.28;
+  --juno-ink-vivid-nominal: oklch(76% 0.28 148);
+  --juno-ink-vivid-active: oklch(76% 0.24 205);
+  --juno-ink-vivid-target: oklch(70% 0.30 328);
+  --juno-ink-vivid-caution: oklch(82% 0.20 82);
+  --juno-ink-vivid-warning: oklch(68% 0.28 25);
   --juno-motion-duration-instant: 80ms;
   --juno-motion-duration-quick: 140ms;
   --juno-motion-duration-base: 200ms;