@ponchia/ui 0.6.7 → 0.6.9

package/connectors/index.js

@@ -43,46 +43,95 @@
  */
 
 // Shared scalar/geometry primitives. Exported so the annotations layer composes
-// on the SAME kernel instead of copy-pasting it (the copies had silently
-// diverged — see `clamp`). Low-level helpers; the documented API is the path
-// builders below.
+// on the same kernel as the connector path builders. Low-level helpers; the
+// documented API is the path builders below.
 export const PRECISION = 1000;
 
+/**
+ * Resolve a numeric option with an optional fallback.
+ * @param {string} name
+ * @param {number | null | undefined} value
+ * @param {number | null | undefined} [fallback]
+ * @returns {number}
+ */
 export function finite(name, value, fallback) {
   const v = value ?? fallback;
   if (!Number.isFinite(v)) throw new TypeError(`${name} must be a finite number`);
   return v;
 }
 
+/**
+ * Resolve a non-negative numeric option with an optional fallback.
+ * @param {string} name
+ * @param {number | null | undefined} value
+ * @param {number | null | undefined} [fallback]
+ * @returns {number}
+ */
 export function dimension(name, value, fallback) {
   const v = finite(name, value, fallback);
   if (v < 0) throw new RangeError(`${name} must be greater than or equal to 0`);
   return v;
 }
 
-// Round to PRECISION, normalising -0 → 0, and return the NUMBER (the numeric
-// core `fmt` stringifies). Shared with the annotations layer for the rounded
-// coordinates it echoes back to the host. (code-quality audit Q5.)
+// Round to PRECISION, normalising -0 → 0, and return the NUMBER. `fmt`
+// stringifies the numeric core; annotations use the same rounded coordinates.
+/**
+ * @param {number} value
+ * @returns {number}
+ */
 export function roundNumber(value) {
   const rounded = Math.round((Object.is(value, -0) ? 0 : value) * PRECISION) / PRECISION;
   return Object.is(rounded, -0) ? 0 : rounded;
 }
 
+/**
+ * @param {number} value
+ * @returns {string}
+ */
 export function fmt(value) {
   return String(roundNumber(value));
 }
 
+/**
+ * @param {number} x
+ * @param {number} y
+ * @returns {string}
+ */
 export function point(x, y) {
   return `${fmt(x)},${fmt(y)}`;
 }
 
-// Guarded form (returns min when the range is inverted) — the reconciled body;
-// connectors only ever calls clamp(v, 0, 1) so this is output-identical here.
+// Guarded form: an inverted range resolves to `min`.
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @returns {number}
+ */
 export function clamp(value, min, max) {
   if (max < min) return min;
   return Math.min(max, Math.max(min, value));
 }
 
+function connectorShape(value) {
+  const shape = value ?? 'straight';
+  if (shape === 'straight' || shape === 'elbow' || shape === 'curve') return shape;
+  throw new TypeError('shape must be "straight", "elbow" or "curve"');
+}
+
+function sideValue(value) {
+  const side = value ?? 'center';
+  if (
+    side === 'top' ||
+    side === 'right' ||
+    side === 'bottom' ||
+    side === 'left' ||
+    side === 'center'
+  )
+    return side;
+  throw new TypeError('side must be "top", "right", "bottom", "left" or "center"');
+}
+
 /**
  * A point on a rect's edge (or centre). `rect` is `{ x, y, width, height }`.
  * @param {Rect} rect
@@ -90,11 +139,11 @@ export function clamp(value, min, max) {
  * @returns {Point}
  */
 export function anchorPoint(rect, side = 'center') {
-  const x = finite('rect.x', rect?.x, 0);
-  const y = finite('rect.y', rect?.y, 0);
-  const w = dimension('rect.width', rect?.width, 0);
-  const h = dimension('rect.height', rect?.height, 0);
-  switch (side) {
+  const x = finite('rect.x', rect?.x);
+  const y = finite('rect.y', rect?.y);
+  const w = dimension('rect.width', rect?.width);
+  const h = dimension('rect.height', rect?.height);
+  switch (sideValue(side)) {
     case 'top':
       return { x: x + w / 2, y };
     case 'bottom':
@@ -185,7 +234,8 @@ export function curvePath(from, to, opts = {}) {
  * @returns {string}
  */
 export function connectorPath(opts = {}) {
-  const { from, to, shape = 'straight' } = opts;
+  const { from, to } = opts;
+  const shape = connectorShape(opts.shape);
   if (shape === 'elbow') return elbowPath(from, to, opts);
   if (shape === 'curve') return curvePath(from, to, opts);
   return straightPath(from, to);
@@ -231,8 +281,8 @@ export function dotMark(p, radius = 3) {
 
 /**
  * An axis-aligned rectangle path from its corners (callers derive the corners
- * from a centre or a top-left as they need). Shared by the annotation
- * rect/band and evidence-marker subjects. (code-quality audit Q5.)
+ * from a centre or a top-left as they need). Shared by annotation rect/band
+ * and evidence-marker subjects.
  * @param {number} left
  * @param {number} top
  * @param {number} right
@@ -270,7 +320,8 @@ export function autoSides(fromRect, toRect) {
  * @returns {number}
  */
 export function endTangentAngle(from, to, shape = 'straight') {
-  if (shape === 'straight') return angleBetween(from, to);
+  const resolved = connectorShape(shape);
+  if (resolved === 'straight') return angleBetween(from, to);
   const dx = finite('to.x', to?.x) - finite('from.x', from?.x);
   const dy = finite('to.y', to?.y) - finite('from.y', from?.y);
   if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? 0 : Math.PI;
@@ -285,10 +336,14 @@ export function endTangentAngle(from, to, shape = 'straight') {
  * @returns {ConnectRectsResult}
  */
 export function connectRects(opts = {}) {
-  const { fromRect, toRect, shape = 'straight', curvature, mid } = opts;
+  const { fromRect, toRect, curvature, mid } = opts;
+  const shape = connectorShape(opts.shape);
   // Honor each side override independently; auto-pick whichever is unset.
   const auto = autoSides(fromRect, toRect);
-  const sides = { from: opts.fromSide || auto.from, to: opts.toSide || auto.to };
+  const sides = {
+    from: opts.fromSide == null ? auto.from : sideValue(opts.fromSide),
+    to: opts.toSide == null ? auto.to : sideValue(opts.toSide),
+  };
   const from = anchorPoint(fromRect, sides.from);
   const to = anchorPoint(toRect, sides.to);
   const d = connectorPath({ from, to, shape, curvature, mid });

package/css/annotations.css

@@ -278,8 +278,20 @@
     animation: none !important;
     opacity: 1;
     stroke-dashoffset: 0;
+  }
+
+  .ui-annotation__subject,
+  .ui-annotation__connector,
+  .ui-annotation__note-line,
+  .ui-annotation__badge {
     transform: none;
   }
+
+  .ui-annotation--draw .ui-annotation__connector,
+  .ui-annotation--draw .ui-annotation__note-line {
+    stroke-dasharray: none;
+    stroke-dashoffset: 0;
+  }
 }
 
 @media (forced-colors: active) {

package/css/app.css

@@ -123,7 +123,7 @@
    near-imperceptible tint/dot opacity delta survives, and current-page becomes
    invisible to HCM users. Re-assert "current" on channels HCM preserves: a
    Highlight start-border and marker dot, plus a NON-colour bold weight so the
-   cue does not rely on colour alone (WCAG 1.4.1). (component audit C8.) */
+   cue does not rely on colour alone (WCAG 1.4.1). */
 @media (forced-colors: active) {
   .ui-app-nav a.is-active,
   .ui-app-nav a[aria-current]:not([aria-current='false']) {
@@ -276,7 +276,7 @@
     /* The shell keeps `min-block-size: 100dvh`, so with two auto rows the default
        `align-content: stretch` distributes the leftover viewport across BOTH
        tracks — ballooning the horizontal rail to ~half the screen. Pin tracks to
-       their content and let the content row absorb the slack. (component audit C7.) */
+       their content and let the content row absorb the slack. */
     align-content: start;
     grid-template-rows: auto 1fr;
   }
@@ -296,8 +296,7 @@
 
   /* The rail is flex-row here, so the base `margin-block-start: auto` (which
      pushed account to the bottom in the column layout) is inert and account can
-     scroll off. Push it to the inline end instead so sign-out stays reachable.
-     (layout review C21.) */
+     scroll off. Push it to the inline end instead so sign-out stays reachable. */
   .ui-app-rail__account {
     margin-block-start: 0;
     margin-inline-start: auto;

package/css/base.css

@@ -230,7 +230,7 @@ textarea:focus-visible,
   /* NB: the active-tab forced-colors re-assert lives in disclosure.css, right
      after the `.ui-tab.is-active` default — placing it here (an earlier bundle
      leaf) let the later default win even in forced-colors mode, since @media
-     adds no specificity. (a11y review C10.) */
+     adds no specificity. */
 
   /* Keyboard focus must never depend on a colour that gets overridden. */
   a:focus-visible,

package/css/content.css

@@ -15,7 +15,7 @@
 
   /* Machine-generated Markdown carries long unbreakable tokens (URLs, hashes,
      code) that otherwise force horizontal page scroll on the prose surface
-     itself. Break them. (css-robustness review C9; the table cell already does.) */
+     itself. Break them; table cells already do this locally. */
   overflow-wrap: break-word;
 
   /* Readable measure; the container can still be wider for tables/media. */
@@ -108,7 +108,7 @@
    is the opt-in marks leaf (marks.css) and must win: this rule is higher-specificity
    (0,1,1) than `.ui-mark` (0,1,0) and sits in the same `bronto` layer, so without the
    `:not(.ui-mark)` it silently overrides every `.ui-mark` tone/draw modifier in prose —
-   the most-documented mark usage. (component audit C1.) */
+   the most-documented mark usage. */
 .ui-prose mark:not(.ui-mark) {
   background: var(--accent-soft);
   color: var(--text);
@@ -255,7 +255,7 @@
    because `.ui-prose` is generated prose, not a data grid — but for a table whose
    semantics MUST survive on WebKit, author the `.ui-table` component inside a
    `.ui-table-wrap` instead (the wrap scrolls, the <table> keeps `display: table`),
-   or add `role="table"` to the markdown output. (component audit C29.) */
+   or add `role="table"` to the markdown output. */
 
 .ui-prose table {
   border: 1px solid var(--line);

package/css/crosshair.css

@@ -13,6 +13,9 @@
   --crosshair-x: 0;
   --crosshair-y: 0;
   --crosshair-color: var(--accent);
+  --crosshair-readout-gap: 0.35rem;
+  --crosshair-readout-x: var(--crosshair-readout-gap);
+  --crosshair-readout-y: var(--crosshair-readout-gap);
 
   inset: 0;
   opacity: 0;
@@ -25,6 +28,22 @@
   opacity: 1;
 }
 
+.ui-crosshair[data-readout-inline='before'] {
+  --crosshair-readout-x: calc(-100% - var(--crosshair-readout-gap));
+}
+
+.ui-crosshair[data-readout-block='above'] {
+  --crosshair-readout-y: calc(-100% - var(--crosshair-readout-gap));
+}
+
+.ui-crosshair:dir(rtl) {
+  --crosshair-readout-x: calc(100% + var(--crosshair-readout-gap));
+}
+
+.ui-crosshair:dir(rtl)[data-readout-inline='before'] {
+  --crosshair-readout-x: calc(-1 * var(--crosshair-readout-gap));
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ui-crosshair {
     transition: none;
@@ -76,8 +95,9 @@
   color: var(--text);
 }
 
-/* A pinned readout chip — host fills the content; it follows the crosshair. */
-.ui-readout {
+/* A pinned readout chip — host fills the content; it follows the crosshair.
+   Scoped so report-kit/crosshair imports do not restyle standalone dot readouts. */
+.ui-crosshair .ui-readout {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
@@ -87,10 +107,15 @@
   font-size: var(--text-xs);
   inset-block-start: var(--crosshair-y);
   inset-inline-start: var(--crosshair-x);
+  max-inline-size: calc(100% - var(--crosshair-readout-gap) * 2);
+  overflow: hidden;
   padding-block: 0.2rem;
   padding-inline: 0.4rem;
   pointer-events: none;
   position: absolute;
+  text-overflow: ellipsis;
+  transform: translate(var(--crosshair-readout-x), var(--crosshair-readout-y));
+  white-space: nowrap;
 }
 
 @media (forced-colors: active) {

package/css/disclosure.css

@@ -59,7 +59,7 @@
 
 /* Forced-colors re-assert MUST sit after the default above (same specificity,
    @media adds none) or the accent default wins and the selected tab loses its
-   only cue. Moved here from base.css, an earlier bundle leaf. (a11y review C10.) */
+   only cue. Moved here from base.css, an earlier bundle leaf. */
 @media (forced-colors: active) {
   .ui-tab.is-active {
     border-block-end-color: Highlight;
@@ -306,7 +306,7 @@
 /* Active page keys on BOTH `.is-active` and `[aria-current]` — usage.md calls
    aria-current "the framework rule", and every nav sibling (breadcrumb, sitenav,
    app-nav) highlights on it, so a pagination author who sets only aria-current
-   must still get the highlight. (component audit C17.) */
+   must still get the highlight. */
 .ui-pagination__item.is-active,
 .ui-pagination__item[aria-current]:not([aria-current='false']) {
   border-color: var(--accent);
@@ -319,7 +319,7 @@
    (CSS can't intercept keys). For a fully-inert control prefer native
    `<button disabled>`, run `initDisabledGuard()` (intercepts Enter/Space), or
    pair aria-disabled with `tabindex="-1"`. See docs/usage.md "Disabled vs
-   aria-disabled". (audit C4.) */
+   aria-disabled". */
 .ui-pagination__item[aria-disabled='true'],
 .ui-pagination__item:disabled {
   cursor: not-allowed;

package/css/dots.css

@@ -283,7 +283,7 @@
 
 /* The comet expects exactly 8 `<i>`; a 9th+ child has no rotation rule and
    would pile up dead-centre. Hide the overflow so extra children fail safe
-   rather than rendering a stray static dot (C26). */
+   rather than rendering a stray static dot. */
 .ui-dotspinner i:nth-child(n + 9) {
   display: none;
 }
@@ -523,7 +523,7 @@
    clipped from-state on `scripting: enabled`: with JS off, `.is-in` is never
    toggled, so without the gate the content stays permanently clipped away and
    invisible to every no-JS/static/print reader. Same graceful default as
-   `.ui-reveal`. (component audit C12.) */
+   `.ui-reveal`. */
 @media (scripting: enabled) {
   .ui-matrix {
     clip-path: inset(0 100% 0 0);
@@ -583,7 +583,7 @@
 
   /* Brand/live dots aren't status tones, but they still encode meaning via
      background-color alone, which HCM flattens. Keep them on a distinct,
-     opted-out system colour for completeness. (audit C31.) */
+     opted-out system colour for completeness. */
   .ui-dot--accent,
   .ui-dot--live {
     forced-color-adjust: none;
@@ -599,7 +599,7 @@
      glyph vanishes (white-on-white) — yet .ui-icon is the recommended
      icon-at-scale path AND backs .ui-legend__symbol, and the print block
      already special-cases it. Opt out and pin the fill to the system text
-     colour so the glyph stays visible. (audit C1.) */
+     colour so the glyph stays visible. */
   .ui-icon {
     forced-color-adjust: none;
     background: CanvasText;

package/css/feedback.css

@@ -9,8 +9,7 @@
    a stray `--value: 50%` is invalid against the typed syntax and falls back to
    the initial `0` (empty bar) instead of poisoning the `clamp()` and painting a
    FULL bar (the old failure mode). It inherits so the value set on the host
-   `.ui-meter` / `.ui-progress` cascades to the inner `__fill`/`__bar`.
-   (component audit C8.) */
+   `.ui-meter` / `.ui-progress` cascades to the inner `__fill`/`__bar`. */
 @property --value {
   syntax: '<number>';
   inherits: true;
@@ -335,9 +334,7 @@
   position: absolute;
   text-transform: uppercase;
   transform: translate(-50%, 4px);
-  transition:
-    opacity var(--duration-fast) var(--ease-standard),
-    transform var(--duration-fast) var(--ease-standard);
+  transition: opacity var(--duration-fast) var(--ease-standard);
   white-space: nowrap;
   z-index: var(--z-popover);
 }
@@ -348,33 +345,6 @@
   transform: translate(-50%, 0);
 }
 
-/* Progressive enhancement: where CSS anchor positioning exists, lift
-   the bubble out of the normal flow so it can't be clipped by an
-   ancestor's overflow/scroll and auto-flips at the viewport edge.
-   Unsupported browsers keep the absolutely-positioned fallback above
-   (fine for short labels; use .ui-popover + initPopover for rich or
-   edge-critical content). */
-@supports (anchor-name: --x) {
-  .ui-tooltip {
-    anchor-name: --ui-tooltip;
-  }
-
-  .ui-tooltip__bubble {
-    inset: auto;
-    margin-block-end: 0.5rem;
-    position: fixed;
-    position-anchor: --ui-tooltip;
-    position-area: block-start center;
-    position-try-fallbacks: flip-block;
-    transform: translateY(4px);
-  }
-
-  .ui-tooltip:hover .ui-tooltip__bubble,
-  .ui-tooltip:focus-within .ui-tooltip__bubble {
-    transform: translateY(0);
-  }
-}
-
 /* Popover surface — a top-layer panel positioned by initPopover (JS
    collision-aware, dependency-free). Uses the native [popover] top
    layer when available so it never clips; the class styles it either
@@ -389,6 +359,7 @@
   inline-size: max-content;
   margin: 0;
   max-inline-size: min(22rem, calc(100vw - 2rem));
+  overflow: auto;
   padding: var(--space-sm) var(--space-md);
   position: fixed;
   z-index: var(--z-popover);
@@ -470,7 +441,7 @@
     /* A still, solid, full-width bar reads as "100% complete" — the opposite of
        indeterminate. Fall back to a static diagonal hatch that fills the track
        (so it's clearly active) but doesn't read as done. AT is covered via
-       aria-busy. (audit C26.) */
+       aria-busy. */
     background: repeating-linear-gradient(
       -45deg,
       var(--accent) 0,
@@ -494,7 +465,7 @@
    Drive the fill with the same --value knob as progress; tone the fill by
    threshold. Author role="meter" + aria-valuenow/min/max for AT — but role=meter
    has uneven AT support, so keep the visible .ui-meter__label/__value (they are
-   the real channel, not just decoration). (component audit C25.) --- */
+   the real channel, not just decoration). --- */
 
 .ui-meter {
   background: var(--panel-soft);
@@ -565,7 +536,7 @@
   /* Prefer the natural one-line width, but never wider than the container: a
      long step label at `max-content` couldn't shrink and overflowed the page on
      narrow viewports (tabs scroll; steps didn't). Capping at 100% lets an
-     over-long label wrap instead of overflowing. (component audit C18.) */
+     over-long label wrap instead of overflowing. */
   min-inline-size: min(100%, max-content);
   text-transform: uppercase;
 }
@@ -625,10 +596,10 @@
 /* Forced-colors flattens the fill's tone to the system palette and can erase it
    against the track, dropping the only visual cue of the measured proportion.
    Re-assert a system colour so the bar stays visible; the tone's *semantic* is
-   carried by the author-written label beside it, not the colour. (a11y C10.)
+   carried by the author-written label beside it, not the colour.
    The toned `.ui-meter--TONE .ui-meter__fill` rules are (0,2,0); the bare
    `.ui-meter__fill` reset is only (0,1,0), so it lost — a toned fill stayed
-   `var(--TONE)` and was forced to black-on-black (component-audit C3). Match the
+   `var(--TONE)` and was forced to black-on-black. Match the
    tone specificity here (and set `forced-color-adjust: none`) so every meter,
    toned or not, paints `Highlight`, mirroring the `.ui-dot` precedent. */
 @media (forced-colors: active) {

package/css/forms.css

@@ -79,8 +79,7 @@
 
 /* Read-only is editable-looking but not editable; give it a distinct, quieter
    cue (muted fill + default cursor) so it doesn't read as a live field. Not
-   disabled — value still submits and the field stays focusable/selectable.
-   (component audit C28.) */
+   disabled — value still submits and the field stays focusable/selectable. */
 .ui-input:read-only:not(:disabled),
 .ui-textarea:read-only:not(:disabled) {
   background: var(--panel-soft);
@@ -91,7 +90,7 @@
    the controls that WRAP a native input (switch/check/segmented) showed no
    disabled cue and their label kept cursor:pointer — a lie. Mirror the cue via
    :has(input:disabled); the native-element controls (range/file) take :disabled
-   directly. (a11y/forms review C4.) */
+   directly. */
 .ui-range:disabled,
 .ui-file:disabled,
 .ui-switch:has(input:disabled),
@@ -102,7 +101,7 @@
 }
 
 /* Keep autofilled fields on-theme — the UA's yellow fill otherwise paints over
-   the monochrome surface and breaks the contrast story. (forms review C24.) */
+   the monochrome surface and breaks the contrast story. */
 .ui-input:autofill,
 .ui-select:autofill,
 .ui-textarea:autofill,
@@ -121,8 +120,7 @@
 /* Wrapper controls (switch / check / segmented) hide their native <input>, so
    the `[aria-invalid]` the validator sets on it paints nothing — a sighted,
    non-AT user couldn't see the error (WCAG 1.4.1). Mirror the invalid cue onto
-   the visible surface via :has(), the same way the disabled cue is mirrored.
-   (component audit C7.) */
+   the visible surface via :has(), the same way the disabled cue is mirrored. */
 .ui-check:has(input[aria-invalid='true']) input {
   outline: 2px solid var(--danger);
   outline-offset: 1px;
@@ -141,8 +139,7 @@
    one and sighted HCM users lose the only error cue (WCAG 1.4.1). The switch got
    a forced-colors block; the error family did not. Re-assert the state on a
    NON-colour channel — a thicker, doubled border — that survives HCM, and prefix
-   the error hint with a glyph so the message itself carries the error.
-   (component audit C5.) */
+   the error hint with a glyph so the message itself carries the error. */
 @media (forced-colors: active) {
   .ui-input[aria-invalid='true'],
   .ui-select[aria-invalid='true'],
@@ -151,7 +148,7 @@
     border-width: 3px;
   }
 
-  /* Same NON-colour re-assertion for the wrapper controls (C7): a thicker,
+  /* Same NON-colour re-assertion for the wrapper controls: a thicker,
      doubled outline/border survives the HCM colour flattening. */
   .ui-check:has(input[aria-invalid='true']) input {
     outline-width: 3px;
@@ -205,7 +202,7 @@
 
 .ui-input-group > .ui-input:focus-visible,
 .ui-input-group > .ui-select:focus-visible {
-  z-index: 1; /* keep the focus ring above the adjacent addon border (select too — audit C29) */
+  z-index: 1; /* keep the focus ring above the adjacent addon border */
 }
 
 .ui-input-group__addon {
@@ -213,7 +210,7 @@
   background: var(--panel-soft);
 
   /* Match the wrapped control's `--line-strong` border so the prefix/suffix seam
-     isn't a fainter cap than the field it abuts. (component audit C33.) */
+     isn't a fainter cap than the field it abuts. */
   border: 1px solid var(--line-strong);
   color: var(--text-dim);
   display: flex;
@@ -358,7 +355,7 @@
 
 /* Keyboard focus ring to match every sibling input (which use a 2px ring); the
    border-colour shift alone read markedly fainter on this one control. Keyed to
-   :focus-visible on the inner input so it stays keyboard-only. (a11y review C12.) */
+   :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;

package/css/legend.css

@@ -93,7 +93,7 @@
 /* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. Match the
    __swatch fallback chain exactly (--chart-color → --chart-1 → --accent): without
    the --chart-1 layer, a symbol and a swatch for the SAME series diverge to two
-   colours whenever a theme overrides --chart-1. (audit C22.) */
+   colours whenever a theme overrides --chart-1. */
 .ui-legend__symbol {
   block-size: 0.95rem;
   color: var(--chart-color, var(--chart-1, var(--accent)));

package/css/marks.css

@@ -91,7 +91,7 @@
 @media (prefers-reduced-motion: no-preference) {
   /* The sweep animates `background-size`, i.e. the highlight FILL — so it is
      inert on the no-fill styles (underline/box/strike). Scope it out rather
-     than let `--draw` look applied but do nothing. (content review C14.) */
+     than let `--draw` look applied but do nothing. */
   .ui-mark--draw:not(.ui-mark--underline, .ui-mark--box, .ui-mark--strike) {
     animation: ui-mark-draw 0.6s var(--ease, ease) both;
   }

package/css/motion.css

@@ -57,7 +57,7 @@
    scroll far enough to finish its range, so a fade-to-opacity-1 would strand the
    content permanently transparent. Reach full opacity early (35%) and hold it,
    so even a partially-driven reveal is fully legible — only the last few px of
-   the rise are left unfinished. (component audit C9.) */
+   the rise are left unfinished. */
 @keyframes uiScrollReveal {
   0% {
     opacity: 0;
@@ -183,7 +183,7 @@
 /* Stagger children: set --i on each child (or use nth-child cap). Cap the manual
    --i path at index 6 (360ms) to match the .ui-stagger--auto ceiling — a long
    list with --i:30 would otherwise hold the last child at opacity:0 for 1.8s
-   before popping in. (audit C32.) */
+   before popping in. */
 .ui-stagger > * {
   animation: uiRise var(--duration-slow) var(--ease-spring) both;
   animation-delay: calc(min(var(--i, 0), 6) * 60ms);
@@ -307,7 +307,7 @@
    rest to one system colour, so the ring looks uniform with no visible sweep,
    and the scroll-progress bar can vanish into the canvas. Re-assert distinct
    system colours so each keeps a visible channel; AT is already covered via
-   aria-busy / role="status" / role="progressbar". (component audit C35.) */
+   aria-busy / role="status" / role="progressbar". */
 @media (forced-colors: active) {
   .ui-spinner {
     border-color: CanvasText;
@@ -321,7 +321,7 @@
   /* HCM strips the shimmer gradient, leaving an invisible box where a loading
      placeholder should be. Give it a system-colour border so the skeleton
      still reads as present. Same decorative-loading family as the spinner +
-     scroll-progress above. (audit C15.) */
+     scroll-progress above. */
   .ui-skeleton {
     border: 1px solid CanvasText;
   }
@@ -346,7 +346,7 @@
    The range is `entry 0% entry 100%`, NOT the old `cover 40%`: `cover` only
    completes once the element has scrolled most of the way THROUGH the viewport,
    which an element near the document bottom can never do — it froze part-way,
-   leaving a conclusion section permanently semi-transparent (C9). `entry`
+   leaving a conclusion section permanently semi-transparent. `entry`
    completes the moment the element is fully in view, which any scroll-to-bottom
    reaches. Paired with the early-opacity uiScrollReveal keyframe, an element
    taller than the viewport is legible even if its range never fully completes. */
@@ -405,7 +405,7 @@
     /* Zero the delay too: `.ui-stagger` children animate `uiRise` with
        `fill-mode: both`, so a non-zero `animation-delay` holds them at the
        `opacity: 0` from-state for the full delay and then pops them in — the
-       exact late flash a reduced-motion user asked to avoid (C4). */
+       exact late flash a reduced-motion user asked to avoid. */
     animation-delay: 0s !important;
     transition-duration: 0.01ms !important;
   }

package/css/navigation.css

@@ -70,6 +70,18 @@
   transform: translateX(0.6rem);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .ui-themetoggle__thumb {
+    background: var(--accent);
+    transform: translateX(0.6rem);
+  }
+
+  :root[dir='rtl']:not([data-theme='light']) .ui-themetoggle__thumb,
+  :root:not([data-theme='light']) [dir='rtl'] .ui-themetoggle__thumb {
+    transform: translateX(-0.6rem);
+  }
+}
+
 [dir='rtl'][data-theme='dark'] .ui-themetoggle__thumb,
 [dir='rtl'] [data-theme='dark'] .ui-themetoggle__thumb {
   transform: translateX(-0.6rem);