@sableui/react 0.15.0 → 0.17.0

package/dist/lib/scrub-gesture.js

@@ -15,6 +15,8 @@ function beginScrub(e, {
   const startValue = value;
   const target = e.currentTarget;
   let moved = false;
+  const gesture = new AbortController();
+  const { signal } = gesture;
   function onMove(ev) {
     const dx = ev.clientX - startX;
     if (!moved) {
@@ -37,13 +39,11 @@ function beginScrub(e, {
         { capture: true, once: true }
       );
     }
-    window.removeEventListener("pointermove", onMove);
-    window.removeEventListener("pointerup", onUp);
-    window.removeEventListener("pointercancel", onUp);
+    gesture.abort();
   }
-  window.addEventListener("pointermove", onMove);
-  window.addEventListener("pointerup", onUp);
-  window.addEventListener("pointercancel", onUp);
+  window.addEventListener("pointermove", onMove, { signal });
+  window.addEventListener("pointerup", onUp, { signal });
+  window.addEventListener("pointercancel", onUp, { signal });
 }
 export {
   beginScrub

package/dist/lib/taxonomy.js

@@ -90,6 +90,7 @@ var COMPONENT_TAXONOMY = {
   BottomNav: ["Navigation", "page"],
   NavigationMenu: ["Navigation", "page"],
   Pagination: ["Navigation", "either"],
+  SectionRail: ["Navigation", "page"],
   ShowMore: ["Navigation", "page"],
   SideNav: ["Navigation", "page"],
   Sidebar: ["Navigation", "page"],

package/dist/lib/use-active-section.js

@@ -0,0 +1,59 @@
+"use client";
+
+// src/lib/use-active-section.ts
+import { useEffect, useState } from "react";
+var END_SLACK = 2;
+function useActiveSection(ids, { offset = 0.35, root } = {}) {
+  const [active, setActive] = useState(ids[0] ?? null);
+  const key = ids.join("\n");
+  useEffect(() => {
+    const list = key ? key.split("\n") : [];
+    if (list.length === 0) {
+      setActive(null);
+      return;
+    }
+    const scroller = root?.current ?? null;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const top = scroller ? scroller.getBoundingClientRect().top : 0;
+      const height = scroller ? scroller.clientHeight : window.innerHeight;
+      const line = top + height * offset;
+      const bottom = top + height;
+      const scrolled = scroller ? scroller.scrollTop : window.scrollY;
+      const range = scroller ? scroller.scrollHeight - scroller.clientHeight : document.documentElement.scrollHeight - window.innerHeight;
+      const atEnd = range > END_SLACK && scrolled >= range - END_SLACK;
+      let current = list[0];
+      for (const id of list) {
+        const section = document.getElementById(id);
+        if (!section) continue;
+        const sectionTop = section.getBoundingClientRect().top;
+        if (sectionTop <= line || atEnd && sectionTop < bottom) current = id;
+      }
+      setActive(current);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    measure();
+    const target = scroller ?? window;
+    target.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    const resize = new ResizeObserver(schedule);
+    resize.observe(scroller ?? document.documentElement);
+    for (const id of list) {
+      const section = document.getElementById(id);
+      if (section) resize.observe(section);
+    }
+    return () => {
+      cancelAnimationFrame(frame);
+      target.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      resize.disconnect();
+    };
+  }, [key, offset, root]);
+  return active;
+}
+export {
+  useActiveSection
+};

package/dist/lib/use-caret-trigger.js

@@ -36,24 +36,17 @@ function useCaretTrigger({ triggers }) {
     const onInput = (event) => {
       if (event.target === field) evaluate();
     };
-    doc.addEventListener("input", onInput);
-    field.addEventListener("focus", evaluate);
-    field.addEventListener("click", evaluate);
-    field.addEventListener("keyup", evaluate);
-    field.addEventListener("compositionstart", onCompositionStart);
-    field.addEventListener("compositionend", onCompositionEnd);
-    field.addEventListener("blur", onBlur);
-    doc.addEventListener("selectionchange", onSelection);
-    return () => {
-      doc.removeEventListener("input", onInput);
-      field.removeEventListener("focus", evaluate);
-      field.removeEventListener("click", evaluate);
-      field.removeEventListener("keyup", evaluate);
-      field.removeEventListener("compositionstart", onCompositionStart);
-      field.removeEventListener("compositionend", onCompositionEnd);
-      field.removeEventListener("blur", onBlur);
-      doc.removeEventListener("selectionchange", onSelection);
-    };
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    doc.addEventListener("input", onInput, { signal });
+    field.addEventListener("focus", evaluate, { signal });
+    field.addEventListener("click", evaluate, { signal });
+    field.addEventListener("keyup", evaluate, { signal });
+    field.addEventListener("compositionstart", onCompositionStart, { signal });
+    field.addEventListener("compositionend", onCompositionEnd, { signal });
+    field.addEventListener("blur", onBlur, { signal });
+    doc.addEventListener("selectionchange", onSelection, { signal });
+    return () => listeners.abort();
   }, [field, evaluate]);
   const dismiss = useCallback(() => {
     setMatch((current) => {

package/dist/lib/use-match-highlight.js

@@ -0,0 +1,69 @@
+"use client";
+
+// src/lib/use-match-highlight.ts
+import { useEffect, useState } from "react";
+function useMatchHighlight(query, options = {}) {
+  const { selector, enabled = true } = options;
+  const [element, setElement] = useState(null);
+  useEffect(() => {
+    const highlight = enabled && element ? sharedHighlight() : null;
+    if (!highlight || !element) return;
+    let ranges = [];
+    const paint = () => {
+      for (const range of ranges) highlight.delete(range);
+      ranges = matchRanges(element, query, selector);
+      for (const range of ranges) highlight.add(range);
+    };
+    paint();
+    let frame = 0;
+    const observer = new MutationObserver(() => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        paint();
+      });
+    });
+    observer.observe(element, { subtree: true, childList: true, characterData: true });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      for (const range of ranges) highlight.delete(range);
+    };
+  }, [element, query, selector, enabled]);
+  return setElement;
+}
+var MATCH_HIGHLIGHT = "sable-match";
+var shared = null;
+function sharedHighlight() {
+  if (typeof CSS === "undefined" || !("highlights" in CSS) || typeof Highlight === "undefined") {
+    return null;
+  }
+  shared ??= new Highlight();
+  if (CSS.highlights.get(MATCH_HIGHLIGHT) !== shared) CSS.highlights.set(MATCH_HIGHLIGHT, shared);
+  return shared;
+}
+function matchRanges(root, query, selector) {
+  const needle = query.trim().toLocaleLowerCase();
+  if (!needle) return [];
+  const scopes = selector ? Array.from(root.querySelectorAll(selector)) : [root];
+  const ranges = [];
+  for (const scope of scopes) {
+    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const haystack = node.data.toLocaleLowerCase();
+      if (haystack.length !== node.data.length) continue;
+      for (let at = haystack.indexOf(needle); at !== -1; at = haystack.indexOf(needle, at + needle.length)) {
+        const range = document.createRange();
+        range.setStart(node, at);
+        range.setEnd(node, at + needle.length);
+        ranges.push(range);
+      }
+    }
+  }
+  return ranges;
+}
+export {
+  MATCH_HIGHLIGHT,
+  matchRanges,
+  useMatchHighlight
+};

package/dist/lib/use-smooth-wheel.js

@@ -112,21 +112,23 @@ function useSmoothWheel({
   const activeRef = useRef(active);
   activeRef.current = active;
   const attached = useRef(null);
+  const listeners = useRef(null);
   const sync = useCallback(() => {
     const want = activeRef.current ? nodeRef.current : null;
     if (attached.current === want) return;
-    const was = attached.current;
-    if (was) {
-      was.removeEventListener("wheel", onWheel);
-      was.removeEventListener("scroll", onScroll);
-      was.removeEventListener("pointerdown", stop);
+    if (attached.current) {
+      listeners.current?.abort();
+      listeners.current = null;
       stop();
     }
     attached.current = want;
     if (want) {
-      want.addEventListener("wheel", onWheel, { passive: false });
-      want.addEventListener("scroll", onScroll, { passive: true });
-      want.addEventListener("pointerdown", stop, { passive: true });
+      const controller = new AbortController();
+      listeners.current = controller;
+      const { signal } = controller;
+      want.addEventListener("wheel", onWheel, { passive: false, signal });
+      want.addEventListener("scroll", onScroll, { passive: true, signal });
+      want.addEventListener("pointerdown", stop, { passive: true, signal });
     }
   }, [onWheel, onScroll, stop]);
   useEffect(sync, [active, sync]);

package/dist/presets/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../_contract-CDa9-NdB.js';
 
 /** An OKLCH colour, lightness 0–1. Extra fields (alpha) ride along untouched. */
 interface OklchColor {
@@ -31,6 +31,17 @@ declare function fitFillToInk<T extends OklchColor>(fill: T, ink: OklchColor): T
  * once, on the colour as picked, then `fitFillToInk` each mode's fill to it.
  */
 declare function inkPolarity<T extends OklchColor>(color: OklchColor, inks: readonly T[]): T;
+/** A mark's floor against the surfaces it sits on: visibility, not text contrast. */
+declare const MARK_FLOOR = 2;
+/**
+ * The mark for a fill: its hue at graphic strength. In light mode the fill is
+ * lifted to its hue's mark lightness and its chroma raised 1.3× (never past the
+ * gamut, never below its own); in dark mode, where fills are already light, a
+ * red is lifted a little and every hue gains 1.15×. A grey tone stays grey.
+ * Then it steps back toward the ink until it clears MARK_FLOOR on every surface
+ * given, so a pale amber never vanishes into a cream page.
+ */
+declare function markFor<T extends OklchColor>(fill: T, mode: "light" | "dark", surfaces?: readonly OklchColor[]): T;
 /** Fills a theme or preset authors from its brand. Their ink follows the colour as picked. */
 declare const BRAND_FILLS: readonly ["primary", "sidebar-primary", "highlight"];
 /**
@@ -143,4 +154,4 @@ declare function presetLabelContrast(input: SablePreset): {
     unmeasured: string[];
 };
 
-export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, type OklchColor, PAGE_WIDTH_TOKENS, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };
+export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, MARK_FLOOR, type OklchColor, PAGE_WIDTH_TOKENS, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, markFor, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };

package/dist/presets/index.js

@@ -11,6 +11,9 @@ import {
   LAYERING_TOKENS,
   WORKSPACE_SURFACE_TOKENS,
   DERIVED_EDGE_TOKENS,
+  FIELD_TOKENS,
+  APP_SHELL_TOKENS,
+  MARK_TOKENS,
   TYPE_UI_TOKENS,
   ART_TOKENS,
   PALETTE_TOKENS
@@ -25,7 +28,9 @@ import {
   fitFillToInk,
   inkFor,
   inkPolarity,
-  labelContrast
+  labelContrast,
+  MARK_FLOOR,
+  markFor
 } from "../themes/contrast.js";
 var PAGE_WIDTH_TOKENS = [
   "page-inset",
@@ -39,11 +44,20 @@ var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   ...SEMANTIC_TOKENS,
   ...WORKSPACE_SURFACE_TOKENS.map((name) => `theme-${name}`),
   ...DERIVED_EDGE_TOKENS.map((name) => `theme-${name}`),
+  // The field's fill and outline: optional — a preset without them keeps outlined fields.
+  ...FIELD_TOKENS.map((name) => `theme-${name}`),
+  // The inset frame's ground: optional — a preset without it keeps the derived step off the rail.
+  ...APP_SHELL_TOKENS.map((name) => `theme-${name}`),
+  // Graphic-strength status colours: optional — a preset without them derives them from its fills.
+  ...MARK_TOKENS.map((name) => `theme-${name}`),
   // Art direction: optional hooks — a preset without them paints the default art.
   ...ART_TOKENS.map((name) => `theme-${name}`),
   ...PALETTE_TOKENS.map((name) => `theme-${name}`),
   ...WORKSPACE_SURFACE_TOKENS,
   ...DERIVED_EDGE_TOKENS,
+  ...FIELD_TOKENS,
+  ...APP_SHELL_TOKENS,
+  ...MARK_TOKENS,
   ...RADIUS_TOKENS,
   ...MOTION_TOKENS,
   ...TYPE_SCALE_TOKENS,
@@ -226,6 +240,7 @@ export {
   BRAND_FILLS,
   LABELLED_FILLS2 as LABELLED_FILLS,
   LABEL_CONTRAST_RULE2 as LABEL_CONTRAST_RULE,
+  MARK_FLOOR,
   PAGE_WIDTH_TOKENS,
   PRESET_TOKEN_NAMES,
   STATUS_FILLS,
@@ -234,6 +249,7 @@ export {
   inkFor,
   inkPolarity,
   labelContrast,
+  markFor,
   parsePreset,
   presetCss,
   presetLabelContrast,

package/dist/styles.css

@@ -86,6 +86,16 @@
 	--color-border-strong: var(--border-strong);
 	--color-border-floating: var(--border-floating);
 	--color-input: var(--input);
+	--color-field: var(--field);
+	--color-field-border: var(--field-border);
+	--color-shell-ground: var(--shell-ground);
+	--color-destructive-mark: var(--destructive-mark);
+	--color-success-mark: var(--success-mark);
+	--color-tone-warning-mark: var(--tone-warning-mark);
+	--color-tone-info-mark: var(--tone-info-mark);
+	--color-tone-1-mark: var(--tone-1-mark);
+	--color-tone-2-mark: var(--tone-2-mark);
+	--color-tone-3-mark: var(--tone-3-mark);
 	--color-control-border: var(--control-border);
 	--color-ring: var(--ring);
 
@@ -378,6 +388,33 @@
 	   and reads as a faint lit edge in dark mode, where shadows barely show. */
 	--border-floating: var(--theme-border-floating, color-mix(in oklch, transparent 92%, var(--foreground)));
 
+	/* The text field: its fill and its outline. Outlined on the card by default;
+	   a theme fills its fields instead with `--theme-field: var(--muted)` and
+	   `--theme-field-border: transparent`. Every field reads the pair through
+	   lib/field-shell, so one choice restyles them all. */
+	--field: var(--theme-field, var(--card));
+	--field-border: var(--theme-field-border, var(--input));
+
+	/* The ground of an inset app frame (`AppShell frame="inset"`): the rail and
+	   the gap around the raised main panel. One step off the rail toward its ink,
+	   because most themes paint the rail the page's colour and the panel would
+	   otherwise sit on its own colour. */
+	--shell-ground: var(--theme-shell-ground, color-mix(in oklch, var(--sidebar) 97%, var(--sidebar-foreground)));
+
+	/* Status and tone colours at graphic strength: a meter's fill, a segmented
+	   bar, a status dot, a chart series, a soft tint. The label fill is dark
+	   enough for white ink; a mark carries no ink, so it is the same hue lifted
+	   and saturated (MARK_TOKENS in themes/_contract.ts). Every bundled theme
+	   tunes its own through the hooks; this derivation is the fallback for a
+	   preset that does not. */
+	--destructive-mark: var(--theme-destructive-mark, oklch(from var(--destructive) max(l, 0.62) calc(c * 1.25) h));
+	--success-mark: var(--theme-success-mark, oklch(from var(--success) max(l, 0.68) calc(c * 1.25) h));
+	--tone-warning-mark: var(--theme-tone-warning-mark, oklch(from var(--tone-warning) max(l, 0.71) calc(c * 1.25) h));
+	--tone-info-mark: var(--theme-tone-info-mark, oklch(from var(--tone-info) max(l, 0.63) calc(c * 1.25) h));
+	--tone-1-mark: var(--theme-tone-1-mark, oklch(from var(--tone-1) max(l, 0.62) calc(c * 1.25) h));
+	--tone-2-mark: var(--theme-tone-2-mark, oklch(from var(--tone-2) max(l, 0.6) calc(c * 1.25) h));
+	--tone-3-mark: var(--theme-tone-3-mark, oklch(from var(--tone-3) max(l, 0.66) calc(c * 1.25) h));
+
 	/* The Switch knob when OFF: light in BOTH modes, like every physical toggle.
 	   It used to be `--background`, which in a dark theme is a near-black knob on
 	   a dark track (well under 3:1). */
@@ -848,6 +885,24 @@
 	}
 }
 
+/* ==========================================================================
+   Search matches — the paint behind `useMatchHighlight` (lib/use-match-highlight),
+   which Combobox and CommandMenu run on their rows and a consumer can run on any
+   results list. The CSS Custom Highlight API marks text Ranges, so nothing is
+   wrapped in a <mark> and React's text nodes stay as rendered.
+
+   On `highlight` because that token exists for exactly this ("search hits" in
+   its intent). A tint of it, not the solid pair: a solid fill behind a few
+   letters is what a text selection looks like, and a list where every row
+   seems half-selected reads as a bug. The tint leaves the row's own ink, so
+   contrast stays the row's. Where the API is missing no ranges are registered
+   and this rule matches nothing.
+   ========================================================================== */
+
+::highlight(sable-match) {
+	background-color: color-mix(in oklab, var(--highlight) 36%, transparent);
+}
+
 /* ==========================================================================
    UI tier — the WORKSPACE register's chrome typography. A separate ramp from the
    six page tiers above, on purpose.
@@ -1995,6 +2050,51 @@
 	background-position: 0 0;
 }
 
+/* texture-dither — a faint field of tiny squares that dissolves, the pixel /
+   halftone texture products lay over the top of a content area or behind an
+   empty-state heading. Pure CSS and static: the dots are the element's own
+   background, cut out by a mask of a small pixel tile intersected with a fade.
+
+   The tile is 12×12 cells of one square each on a 2-unit pitch, about 40%
+   filled at random (no runs of three, no 2×2 clumps) and a third of the dots at
+   half strength, so it reads as dither rather than as a grid of dots. It is a
+   MASK, so the SVG carries no colour of its own: the dots paint in
+   `--border-strong`, the structural-divider ink, which every theme tunes for
+   both modes — faint on a light page, a soft grey on a dark one.
+
+   Decoration only: put it on its own absolutely-positioned, aria-hidden element
+   (it sets pointer-events: none but no position, so it never takes layout),
+   first in a `relative isolate` parent and at -z-10, so the content after it
+   paints on top without a z-index of its own:
+
+     <div class="relative isolate">
+       <div aria-hidden class="texture-dither absolute inset-x-0 top-0 -z-10 h-40" />
+       …content…
+     </div>
+
+   Three hooks, all optional, read with fallbacks (the checkerboard pattern):
+     --dither-fade   the fade's direction, any linear-gradient side or angle
+                     (default `to bottom`: dense at the top, gone at the bottom)
+     --dither-size   the tile (default 48px → 2px squares on a 4px pitch)
+     --dither-color  the dot ink (default var(--border-strong))
+
+   Not `bg-dither`, for the reason `checkerboard` is not `bg-checkerboard`: a
+   `bg-` name joins tailwind-merge's background group and would evict, or be
+   evicted by, a real colour class. */
+@utility texture-dither {
+	pointer-events: none;
+	background-color: var(--dither-color, var(--border-strong));
+	--dither-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1H4zM8 0h1v1H8zM16 0h1v1H16zM2 2h1v1H2zM6 2h1v1H6zM14 2h1v1H14zM6 4h1v1H6zM10 4h1v1H10zM22 4h1v1H22zM2 6h1v1H2zM8 6h1v1H8zM14 6h1v1H14zM20 6h1v1H20zM2 8h1v1H2zM12 8h1v1H12zM18 8h1v1H18zM20 8h1v1H20zM12 10h1v1H12zM8 12h1v1H8zM2 14h1v1H2zM6 14h1v1H6zM16 14h1v1H16zM18 14h1v1H18zM0 16h1v1H0zM4 16h1v1H4zM6 16h1v1H6zM22 16h1v1H22zM10 18h1v1H10zM12 18h1v1H12zM16 18h1v1H16zM4 20h1v1H4zM20 20h1v1H20zM22 20h1v1H22zM0 22h1v1H0zM8 22h1v1H8zM12 22h1v1H12zM14 22h1v1H14zM20 22h1v1H20z'/%3E%3Cpath fill-opacity='.5' d='M0 0h1v1H0zM22 0h1v1H22zM20 2h1v1H20zM8 8h1v1H8zM14 8h1v1H14zM0 10h1v1H0zM4 10h1v1H4zM16 10h1v1H16zM22 10h1v1H22zM2 12h1v1H2zM4 12h1v1H4zM10 12h1v1H10zM18 12h1v1H18zM10 14h1v1H10zM0 18h1v1H0zM18 18h1v1H18zM10 20h1v1H10zM16 20h1v1H16zM18 22h1v1H18z'/%3E%3C/svg%3E");
+	-webkit-mask-image: var(--dither-tile), linear-gradient(var(--dither-fade, to bottom), rgb(0 0 0), rgb(0 0 0 / 0.45) 35%, rgb(0 0 0 / 0));
+	mask-image: var(--dither-tile), linear-gradient(var(--dither-fade, to bottom), rgb(0 0 0), rgb(0 0 0 / 0.45) 35%, rgb(0 0 0 / 0));
+	-webkit-mask-size: var(--dither-size, 48px) var(--dither-size, 48px), 100% 100%;
+	mask-size: var(--dither-size, 48px) var(--dither-size, 48px), 100% 100%;
+	-webkit-mask-repeat: repeat, no-repeat;
+	mask-repeat: repeat, no-repeat;
+	-webkit-mask-composite: source-in;
+	mask-composite: intersect;
+}
+
 /* The default transition for interactive chrome — hover/focus/selection colour
    shifts plus the press/slide transforms. The single transition declarer for
    interactive controls: it lists scale + translate too, so `motion-press` and

package/dist/{theme-provider-CdSicAad.d.ts → theme-provider-BydfM5Z0.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { T as ThemeManifest } from './_contract-CkqXDVww.js';
+import { T as ThemeManifest } from './_contract-CDa9-NdB.js';
 
 declare const SABLE_THEME_ATTRIBUTE: "data-sable-theme";
 declare const DEFAULT_THEME_ID: string;

package/dist/themes/_contract.js

@@ -312,6 +312,17 @@ var PALETTE_SLOT_TOKENS = [
   "palette-solid-ink"
 ];
 var DERIVED_EDGE_TOKENS = ["border-floating"];
+var FIELD_TOKENS = ["field", "field-border"];
+var APP_SHELL_TOKENS = ["shell-ground"];
+var MARK_TOKENS = [
+  "destructive-mark",
+  "success-mark",
+  "tone-warning-mark",
+  "tone-info-mark",
+  "tone-1-mark",
+  "tone-2-mark",
+  "tone-3-mark"
+];
 var TYPE_UI_TOKENS = [
   "type-ui-md-size",
   "type-ui-md-weight",
@@ -323,10 +334,13 @@ var TYPE_UI_TOKENS = [
   "type-ui-micro-weight"
 ];
 export {
+  APP_SHELL_TOKENS,
   ART_TOKENS,
   DENSITY_TOKENS,
   DERIVED_EDGE_TOKENS,
+  FIELD_TOKENS,
   LAYERING_TOKENS,
+  MARK_TOKENS,
   MOTION_TOKENS,
   PALETTE_SLOT_TOKENS,
   PALETTE_TOKENS,

package/dist/themes/atelier/atelier.css

@@ -128,6 +128,15 @@
 	--tone-1-foreground: #ffffff;
 	--tone-info-foreground: #ffffff;
 	--tone-warning-foreground: #ffffff;
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.234 22.0);
+	--theme-success-mark: oklch(70.0% 0.130 173.0);
+	--theme-tone-warning-mark: oklch(71.0% 0.156 52.0);
+	--theme-tone-info-mark: oklch(63.0% 0.130 250.0);
+	--theme-tone-1-mark: oklch(70.0% 0.117 173.0);
+	--theme-tone-2-mark: oklch(62.0% 0.143 300.0);
+	--theme-tone-3-mark: oklch(60.0% 0.000 0.0);
 	--highlight-foreground: #000000;
 	--overlay: oklch(7% 0 0 / 0.55);
 	--overlay-foreground: #ffffff;
@@ -211,6 +220,15 @@
 	--tone-1-foreground: oklch(13% 0 0);
 	--tone-info-foreground: oklch(13% 0 0);
 	--tone-warning-foreground: oklch(13% 0 0);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(65.0% 0.218 22.0);
+	--theme-success-mark: oklch(74.0% 0.137 173.0);
+	--theme-tone-warning-mark: oklch(80.0% 0.129 52.0);
+	--theme-tone-info-mark: oklch(76.0% 0.114 250.0);
+	--theme-tone-1-mark: oklch(76.0% 0.114 173.0);
+	--theme-tone-2-mark: oklch(76.0% 0.137 300.0);
+	--theme-tone-3-mark: oklch(80.0% 0.000 0.0);
 	--highlight-foreground: #ffffff;
 	--overlay: oklch(0% 0 0 / 0.7);
 	--overlay-foreground: #ffffff;

package/dist/themes/atelier/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../../_contract-CDa9-NdB.js';
 
 /**
  * Mono Editorial — a Sable theme. Concrete token values live in

package/dist/themes/contrast.js

@@ -127,7 +127,16 @@ var NON_TEXT_PAIRS = {
   // The sidebar family repeats the set against its own surface, which is exactly
   // why it exists as a family (see token-docs: "tuned against `sidebar`").
   "sidebar-border": { surfaces: ["sidebar"], tier: "hairline" },
-  "sidebar-ring": { surfaces: ["sidebar"], tier: "focus" }
+  "sidebar-ring": { surfaces: ["sidebar"], tier: "focus" },
+  // Status and tone colours at graphic strength, on the surfaces a meter, dot
+  // or chart sits on. Bundled themes declare these as `--theme-*-mark` hooks.
+  "destructive-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "success-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-warning-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-info-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-1-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-2-mark": { surfaces: ["background", "card"], tier: "graphic" },
+  "tone-3-mark": { surfaces: ["background", "card"], tier: "graphic" }
 };
 function evaluateNonTextContrast(mark, surface, tier = "focus") {
   const ratio = contrastRatio(mark, surface);
@@ -140,6 +149,10 @@ function evaluateNonTextContrast(mark, surface, tier = "focus") {
   if (tier === "control") {
     return { ratio, lc, wcagRatioPasses, passes: wcagRatioPasses, basis: wcagRatioPasses ? "wcag" : "none" };
   }
+  if (tier === "graphic") {
+    const passes = ratio >= NON_TEXT_HARD_FLOOR;
+    return { ratio, lc, wcagRatioPasses, passes, basis: wcagRatioPasses ? "wcag" : passes ? "visibility" : "none" };
+  }
   if (wcagRatioPasses) return { ratio, lc, wcagRatioPasses, passes: true, basis: "wcag" };
   if (Math.abs(lc) >= NON_TEXT_PERCEPTUAL_FLOOR && ratio >= NON_TEXT_HARD_FLOOR) {
     return { ratio, lc, wcagRatioPasses, passes: true, basis: "perceptual" };
@@ -198,6 +211,38 @@ function inkPolarity(color, inks) {
   };
   return inks.reduce((best, ink) => cost(ink) < cost(best) ? ink : best);
 }
+var MARK_FLOOR = NON_TEXT_HARD_FLOOR;
+var MARK_NEUTRAL_CHROMA = 0.03;
+function markLightness(h) {
+  const hue = (h % 360 + 360) % 360;
+  if (hue < 38 || hue >= 350) return 0.62;
+  if (hue < 70) return 0.71;
+  if (hue < 110) return 0.78;
+  if (hue < 190) return 0.7;
+  if (hue < 268) return 0.63;
+  if (hue < 300) return 0.6;
+  return 0.62;
+}
+function markFor(fill, mode, surfaces = []) {
+  const neutral = fill.c < MARK_NEUTRAL_CHROMA;
+  const hue = (fill.h % 360 + 360) % 360;
+  let l = fill.l;
+  if (mode === "light") l = neutral ? Math.max(l, 0.6) : Math.max(l, markLightness(hue));
+  else if (!neutral && (hue < 38 || hue >= 350)) l = Math.max(l, 0.65);
+  const lift = mode === "light" ? 1.3 : 1.15;
+  const chromaAt = (lightness) => {
+    if (neutral) return fill.c;
+    const max = maxChromaAt(lightness, fill.h);
+    return Math.max(Math.min(fill.c, max), Math.min(max * FILL_GAMUT_SAFETY, fill.c * lift));
+  };
+  let mark = { ...fill, l, c: chromaAt(l) };
+  const reads = (m) => surfaces.every((s) => contrastRatio(linearOf(m), linearOf(s)) >= MARK_FLOOR);
+  for (let i = 0; i < 60 && !reads(mark); i++) {
+    l = Math.min(0.98, Math.max(0.05, l + (mode === "light" ? -0.01 : 0.01)));
+    mark = { ...mark, l, c: neutral ? fill.c : Math.min(mark.c, maxChromaAt(l, fill.h)) };
+  }
+  return mark;
+}
 function linearRgbToOklch([r, g, b]) {
   const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
   const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
@@ -257,6 +302,7 @@ export {
   HAIRLINE_VISIBILITY_FLOOR,
   LABELLED_FILLS,
   LABEL_CONTRAST_RULE,
+  MARK_FLOOR,
   NON_TEXT_FLOOR,
   NON_TEXT_HARD_FLOOR,
   NON_TEXT_PAIRS,
@@ -280,6 +326,7 @@ export {
   linearRgbToOklch,
   linearToSrgb,
   luminance,
+  markFor,
   maxChromaAt,
   oklchToLinearRgb,
   parseColor,

package/dist/themes/ember/ember.css

@@ -184,6 +184,15 @@
 	--tone-1-foreground: oklch(100% 0 0);
 	--tone-info-foreground: oklch(100% 0 0);
 	--tone-warning-foreground: oklch(100% 0 0);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(62.0% 0.221 25.0);
+	--theme-success-mark: oklch(70.0% 0.130 165.0);
+	--theme-tone-warning-mark: oklch(71.0% 0.156 52.0);
+	--theme-tone-info-mark: oklch(63.0% 0.169 250.0);
+	--theme-tone-1-mark: oklch(62.0% 0.195 309.0);
+	--theme-tone-2-mark: oklch(60.0% 0.182 285.0);
+	--theme-tone-3-mark: oklch(70.0% 0.091 130.0);
 	--highlight-foreground: oklch(100% 0 0);
 	--overlay: oklch(14.1% 0.018 70.5);
 	--overlay-foreground: oklch(100% 0 0);
@@ -272,6 +281,15 @@
 	--tone-1-foreground: oklch(14.1% 0.018 70.5);
 	--tone-info-foreground: oklch(14.1% 0.018 70.5);
 	--tone-warning-foreground: oklch(14.1% 0.018 70.5);
+	/* Graphic strength (MARK_TOKENS): meters, bars, dots, chart series and soft tints.
+	   The same hues lifted and saturated; held to 2:1 on the page, not a text ratio. */
+	--theme-destructive-mark: oklch(65.0% 0.184 25.0);
+	--theme-success-mark: oklch(74.0% 0.137 165.0);
+	--theme-tone-warning-mark: oklch(78.0% 0.149 60.0);
+	--theme-tone-info-mark: oklch(75.5% 0.126 250.0);
+	--theme-tone-1-mark: oklch(68.0% 0.161 309.0);
+	--theme-tone-2-mark: oklch(70.0% 0.137 285.0);
+	--theme-tone-3-mark: oklch(70.0% 0.103 130.0);
 	--highlight-foreground: oklch(100% 0 0);
 	--overlay: oklch(14.1% 0.018 70.5);
 	--overlay-foreground: oklch(100% 0 0);

package/dist/themes/ember/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../../_contract-CDa9-NdB.js';
 
 /**
  * Ember — a Sable theme. Concrete token values live in