@ponchia/ui 0.11.0 → 0.13.0

package/css/dataviz.css

@@ -1,27 +1,39 @@
 /* @ponchia/ui — GENERATED from tokens/charts.js by scripts/gen-charts.mjs.
  *  Do not edit by hand; run `npm run charts:build`. Drift-checked in CI.
  *
- *  Tier-4 data-viz palette (ADR-0001). OPT-IN: import `@ponchia/ui/css/dataviz.css`
- *  on demand; never in the default bundle, never UI chrome. --chart-1 is the live
- *  accent (series 1 = brand). Pair colour N with pattern N (a 2nd, non-colour
- *  channel): background: var(--chart-3); background-image: var(--chart-pattern-3);
+ *  Tier-4 categorical + data-viz palette (ADR-0001). OPT-IN: import
+ *  `@ponchia/ui/css/dataviz.css` on demand; never in the default bundle, never
+ *  UI chrome. Eight fixed hues (blue, orange, aqua, yellow, magenta, green,
+ *  violet, red) in two namespaces:
+ *    --cat-N / --cat-N-tint / --cat-N-ink  categorical identity (a tag, a
+ *      participant, a user-chosen tint): ink holds 4.5:1 on the panel and tint.
+ *    --chart-N, --chart-seq-*, --chart-div-*  data-viz series and ramps.
+ *  Pair colour N with pattern N (a 2nd, non-colour channel):
+ *  background: var(--chart-3); background-image: var(--chart-pattern-3);
  *  background-size: var(--chart-pattern-size); --chart-pattern-ink: <contrast>. */
 
 :root {
-  --chart-1: var(--accent);
-  --chart-2: #e69f00;
-  --chart-3: #56b4e9;
-  --chart-4: #009e73;
-  --chart-5: #f0e442;
-  --chart-6: #0072b2;
-  --chart-7: #cc79a7;
-  --chart-8: #4d5358;
-  --chart-seq-1: oklch(94% 0.03 25deg);
-  --chart-seq-2: oklch(85% 0.07 25deg);
-  --chart-seq-3: oklch(74% 0.12 25deg);
-  --chart-seq-4: oklch(62% 0.16 25deg);
-  --chart-seq-5: oklch(50% 0.16 25deg);
-  --chart-seq-6: oklch(38% 0.13 25deg);
+  --cat-1: #2a78d6;
+  --cat-2: #eb6834;
+  --cat-3: #1baf7a;
+  --cat-4: #eda100;
+  --cat-5: #e87ba4;
+  --cat-6: #008300;
+  --cat-7: #4a3aa7;
+  --cat-8: #e34948;
+  --cat-1-ink: #1467c3;
+  --cat-2-ink: #bf3f00;
+  --cat-3-ink: #007d4c;
+  --cat-4-ink: #a45d00;
+  --cat-5-ink: #b04972;
+  --cat-6-ink: #007800;
+  --cat-7-ink: #4a3aa7;
+  --cat-8-ink: #c62b30;
+  --chart-seq-1: #80b0e8;
+  --chart-seq-2: #5598e7;
+  --chart-seq-3: #2a78d6;
+  --chart-seq-4: #1c5cab;
+  --chart-seq-5: #104281;
   --chart-div-1: oklch(45% 0.14 255deg);
   --chart-div-2: oklch(62% 0.1 250deg);
   --chart-div-3: oklch(82% 0.05 245deg);
@@ -30,11 +42,31 @@
   --chart-div-6: oklch(66% 0.13 55deg);
   --chart-div-7: oklch(56% 0.15 45deg);
 
+  /* Theme-independent: each series and tint follows its slot, and the tint
+     follows whichever --panel the page, a skin or the OLED preset set. */
+  --cat-1-tint: color-mix(in oklch, var(--cat-1) 16%, var(--panel));
+  --cat-2-tint: color-mix(in oklch, var(--cat-2) 16%, var(--panel));
+  --cat-3-tint: color-mix(in oklch, var(--cat-3) 16%, var(--panel));
+  --cat-4-tint: color-mix(in oklch, var(--cat-4) 16%, var(--panel));
+  --cat-5-tint: color-mix(in oklch, var(--cat-5) 16%, var(--panel));
+  --cat-6-tint: color-mix(in oklch, var(--cat-6) 16%, var(--panel));
+  --cat-7-tint: color-mix(in oklch, var(--cat-7) 16%, var(--panel));
+  --cat-8-tint: color-mix(in oklch, var(--cat-8) 16%, var(--panel));
+  --chart-1: var(--cat-1);
+  --chart-2: var(--cat-2);
+  --chart-3: var(--cat-3);
+  --chart-4: var(--cat-4);
+  --chart-5: var(--cat-5);
+  --chart-6: var(--cat-6);
+  --chart-7: var(--cat-7);
+  --chart-8: var(--cat-8);
+
   /* Dot-matrix pattern fills — pair with the matching colour (WCAG 1.4.1).
-     Series 1 (the accent) is intentionally `none`: absence-of-pattern IS its
-     redundant channel. The colour palette is CVD-safe on its own (gated by
-     check:charts), so a colour+pattern chart stays distinguishable; a
-     pattern-ONLY chart must still give series 1 a fill or a labelled legend. */
+     Series 1 is intentionally `none`: absence-of-pattern IS its redundant
+     channel. Adjacent series are separated under simulated colour-vision
+     deficiency (gated by check:charts), so a colour+pattern chart stays
+     distinguishable; a pattern-ONLY chart must still give series 1 a fill or
+     a labelled legend. */
   --chart-pattern-size: 8px;
   --chart-pattern-ink: rgb(0 0 0 / 0.34);
   --chart-pattern-1: none;
@@ -49,20 +81,27 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
-    --chart-1: var(--accent);
-    --chart-2: #e69f00;
-    --chart-3: #56b4e9;
-    --chart-4: #009e73;
-    --chart-5: #f0e442;
-    --chart-6: #0072b2;
-    --chart-7: #cc79a7;
-    --chart-8: #4d5358;
-    --chart-seq-1: oklch(30% 0.1 25deg);
-    --chart-seq-2: oklch(42% 0.15 25deg);
-    --chart-seq-3: oklch(55% 0.17 25deg);
-    --chart-seq-4: oklch(68% 0.15 25deg);
-    --chart-seq-5: oklch(80% 0.1 25deg);
-    --chart-seq-6: oklch(90% 0.05 25deg);
+    --cat-1: #3987e5;
+    --cat-2: #d95926;
+    --cat-3: #199e70;
+    --cat-4: #c98500;
+    --cat-5: #d55181;
+    --cat-6: #008300;
+    --cat-7: #9085e9;
+    --cat-8: #e66767;
+    --cat-1-ink: #4694f3;
+    --cat-2-ink: #e86f42;
+    --cat-3-ink: #27a677;
+    --cat-4-ink: #cb8705;
+    --cat-5-ink: #e46792;
+    --cat-6-ink: #38a433;
+    --cat-7-ink: #9187eb;
+    --cat-8-ink: #eb6c6c;
+    --chart-seq-1: #1b5298;
+    --chart-seq-2: #256abf;
+    --chart-seq-3: #3987e5;
+    --chart-seq-4: #6da7ec;
+    --chart-seq-5: #9ec5f4;
     --chart-div-1: oklch(70% 0.13 250deg);
     --chart-div-2: oklch(60% 0.12 252deg);
     --chart-div-3: oklch(48% 0.08 255deg);
@@ -75,20 +114,27 @@
 }
 
 :root[data-theme='dark'] {
-  --chart-1: var(--accent);
-  --chart-2: #e69f00;
-  --chart-3: #56b4e9;
-  --chart-4: #009e73;
-  --chart-5: #f0e442;
-  --chart-6: #0072b2;
-  --chart-7: #cc79a7;
-  --chart-8: #4d5358;
-  --chart-seq-1: oklch(30% 0.1 25deg);
-  --chart-seq-2: oklch(42% 0.15 25deg);
-  --chart-seq-3: oklch(55% 0.17 25deg);
-  --chart-seq-4: oklch(68% 0.15 25deg);
-  --chart-seq-5: oklch(80% 0.1 25deg);
-  --chart-seq-6: oklch(90% 0.05 25deg);
+  --cat-1: #3987e5;
+  --cat-2: #d95926;
+  --cat-3: #199e70;
+  --cat-4: #c98500;
+  --cat-5: #d55181;
+  --cat-6: #008300;
+  --cat-7: #9085e9;
+  --cat-8: #e66767;
+  --cat-1-ink: #4694f3;
+  --cat-2-ink: #e86f42;
+  --cat-3-ink: #27a677;
+  --cat-4-ink: #cb8705;
+  --cat-5-ink: #e46792;
+  --cat-6-ink: #38a433;
+  --cat-7-ink: #9187eb;
+  --cat-8-ink: #eb6c6c;
+  --chart-seq-1: #1b5298;
+  --chart-seq-2: #256abf;
+  --chart-seq-3: #3987e5;
+  --chart-seq-4: #6da7ec;
+  --chart-seq-5: #9ec5f4;
   --chart-div-1: oklch(70% 0.13 250deg);
   --chart-div-2: oklch(60% 0.12 252deg);
   --chart-div-3: oklch(48% 0.08 255deg);
@@ -101,20 +147,27 @@
 
 @media print {
   :root:not([data-theme='light']) {
-    --chart-1: var(--accent);
-    --chart-2: #e69f00;
-    --chart-3: #56b4e9;
-    --chart-4: #009e73;
-    --chart-5: #f0e442;
-    --chart-6: #0072b2;
-    --chart-7: #cc79a7;
-    --chart-8: #4d5358;
-    --chart-seq-1: oklch(94% 0.03 25deg);
-    --chart-seq-2: oklch(85% 0.07 25deg);
-    --chart-seq-3: oklch(74% 0.12 25deg);
-    --chart-seq-4: oklch(62% 0.16 25deg);
-    --chart-seq-5: oklch(50% 0.16 25deg);
-    --chart-seq-6: oklch(38% 0.13 25deg);
+    --cat-1: #2a78d6;
+    --cat-2: #eb6834;
+    --cat-3: #1baf7a;
+    --cat-4: #eda100;
+    --cat-5: #e87ba4;
+    --cat-6: #008300;
+    --cat-7: #4a3aa7;
+    --cat-8: #e34948;
+    --cat-1-ink: #1467c3;
+    --cat-2-ink: #bf3f00;
+    --cat-3-ink: #007d4c;
+    --cat-4-ink: #a45d00;
+    --cat-5-ink: #b04972;
+    --cat-6-ink: #007800;
+    --cat-7-ink: #4a3aa7;
+    --cat-8-ink: #c62b30;
+    --chart-seq-1: #80b0e8;
+    --chart-seq-2: #5598e7;
+    --chart-seq-3: #2a78d6;
+    --chart-seq-4: #1c5cab;
+    --chart-seq-5: #104281;
     --chart-div-1: oklch(45% 0.14 255deg);
     --chart-div-2: oklch(62% 0.1 250deg);
     --chart-div-3: oklch(82% 0.05 245deg);

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/legend.css

@@ -158,8 +158,7 @@
     var(--chart-seq-2),
     var(--chart-seq-3),
     var(--chart-seq-4),
-    var(--chart-seq-5),
-    var(--chart-seq-6)
+    var(--chart-seq-5)
   );
   block-size: 0.7rem;
   border: 1px solid var(--line);

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) {

package/css/tokens.css

@@ -25,6 +25,10 @@
   --space-lg: 1.35rem;
   --space-xl: 1.75rem;
   --space-2xl: 2.5rem;
+  --space-0-5: 0.125rem;
+  --space-0-75: 0.1875rem;
+  --space-1-5: 0.375rem;
+  --space-2-5: 0.625rem;
   --tap-target: max(44px, 2.9rem);
   --tap-target-min: max(24px, 1.6rem);
   --safe-area-top: env(safe-area-inset-top, 0px);
@@ -68,6 +72,22 @@
   --z-popover: 50;
   --z-toast: 60;
 
+  /* Workspace layers over a canvas, aliased to the page layer where they mean the same. */
+  --z-canvas: var(--z-base);
+  --z-chrome: var(--z-sticky);
+  --z-panel: 25;
+  --z-modal: var(--z-overlay);
+  --z-menu: var(--z-popover);
+  --z-tooltip: 70;
+  --z-navigation: 80;
+
+  /* Zoom — --ui-px is one screen pixel; [data-ui-zoom] re-declares it for a scaled surface. */
+  --ui-zoom: 1;
+  --ui-px: 1px;
+  --hairline: 1px;
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+
   /* Accent ramp — a stepped family for charts / data-viz, derived from the single --accent knob via OKLCH color-mix against a per-theme white/black endpoint. */
   --accent-1: color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end));
   --accent-2: color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end));
@@ -259,6 +279,10 @@
    -------------------------------------------------------------------------- */
 
 [data-density='compact'] {
+  --space-0-5: 0.1rem;
+  --space-0-75: 0.15rem;
+  --space-1-5: 0.3rem;
+  --space-2-5: 0.5rem;
   --space-2xs: 0.2rem;
   --space-xs: 0.4rem;
   --space-sm: 0.6rem;
@@ -269,6 +293,10 @@
 }
 
 [data-density='comfortable'] {
+  --space-0-5: 0.15rem;
+  --space-0-75: 0.225rem;
+  --space-1-5: 0.45rem;
+  --space-2-5: 0.75rem;
   --space-2xs: 0.3rem;
   --space-xs: 0.6rem;
   --space-sm: 0.95rem;
@@ -278,6 +306,21 @@
   --space-2xl: 3.1rem;
 }
 
+/* Zoom — a host that draws bronto UI inside a scaled surface (a zoomable
+   canvas) marks the scaled element [data-ui-zoom] and sets --ui-zoom to its
+   scale there. Inside it --ui-px is one SCREEN pixel, so hairlines, focus rings
+   and anything the host sizes in --ui-px keep their on-screen size at any zoom.
+   Re-declared here, not inherited, because a custom property that reads
+   --ui-zoom resolves where it is declared: the :root values cannot follow a
+   zoomed subtree. The 0.15 floor stops a far-out zoom inflating a ring past
+   the thing it rings. */
+[data-ui-zoom] {
+  --ui-px: calc(1px / max(var(--ui-zoom, 1), 0.15));
+  --hairline: var(--ui-px);
+  --focus-ring-width: calc(2 * var(--ui-px));
+  --focus-ring-offset: calc(2 * var(--ui-px));
+}
+
 /* High contrast — manual opt-in and the OS `prefers-contrast` signal.
    Both collapse the soft greys toward the strong end; theme-agnostic
    because they reference the per-theme *-strong / -soft tokens. */

package/css/workbench.css

@@ -432,8 +432,8 @@
 }
 
 .ui-splitter__handle: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-splitter--horizontal .ui-splitter__handle {