@ponchia/ui 0.6.7 → 0.6.8

package/behaviors/tabs.js

@@ -1,4 +1,12 @@
-import { hasDom, resolveHost, noop, bindOnce, nextFieldUid, collectHosts } from './internal.js';
+import {
+  hasDom,
+  resolveHost,
+  noop,
+  bindOnce,
+  nextFieldUid,
+  collectHosts,
+  closestSafe,
+} from './internal.js';
 
 /**
  * Wire `[data-bronto-tabs]` groups for full keyboard a11y. The framework
@@ -24,6 +32,23 @@ export function initTabs({ root } = {}) {
   if (!host) return noop;
   const cleanups = [];
   const groups = collectHosts(host, '[data-bronto-tabs]');
+  const snapshotAttrs = (el, names) => {
+    const out = {};
+    for (const name of names) {
+      out[name] = {
+        had: el.hasAttribute(name),
+        value: el.getAttribute(name),
+      };
+    }
+    return out;
+  };
+  const restoreAttrs = (el, attrs) => {
+    for (const [name, attr] of Object.entries(attrs)) {
+      if (attr.had) el.setAttribute(name, attr.value);
+      else el.removeAttribute(name);
+    }
+  };
+
   for (const group of groups) {
     // Own group only — a tab/panel inside a nested [data-bronto-tabs]
     // belongs to that inner group, not this one.
@@ -31,20 +56,43 @@ export function initTabs({ root } = {}) {
     const tabs = [...group.querySelectorAll('.ui-tab')].filter(owned);
     const panels = [...group.querySelectorAll('.ui-tabs__panel')].filter(owned);
     if (!tabs.length) continue;
-    const list = group.querySelector('.ui-tabs__list');
-    if (list) list.setAttribute('role', 'tablist');
-
-    // APG: bind each tab to its panel (aria-controls) and back
-    // (aria-labelledby), minting stable ids only where absent.
-    for (const t of tabs) {
-      const p = panels.find((x) => x.dataset.panel === t.dataset.tab);
-      if (!p) continue;
-      const n = nextFieldUid();
-      if (!t.id) t.id = `bronto-tab-${n}`;
-      if (!p.id) p.id = `bronto-tabpanel-${n}`;
-      t.setAttribute('aria-controls', p.id);
-      p.setAttribute('aria-labelledby', t.id);
-    }
+    const list = [...group.querySelectorAll('.ui-tabs__list')].find(owned);
+    const rememberState = () => ({
+      list: list ? snapshotAttrs(list, ['role']) : null,
+      tabs: new Map(
+        tabs.map((tab) => [
+          tab,
+          {
+            active: tab.classList.contains('is-active'),
+            attrs: snapshotAttrs(tab, ['id', 'role', 'aria-selected', 'aria-controls', 'tabindex']),
+          },
+        ]),
+      ),
+      panels: new Map(
+        panels.map((panel) => [
+          panel,
+          {
+            hidden: panel.hidden,
+            attrs: snapshotAttrs(panel, ['id', 'role', 'aria-labelledby', 'tabindex']),
+          },
+        ]),
+      ),
+    });
+    const restoreState = (state) => {
+      if (list && state.list) restoreAttrs(list, state.list);
+      for (const tab of tabs) {
+        const tabState = state.tabs.get(tab);
+        if (!tabState) continue;
+        tab.classList.toggle('is-active', tabState.active);
+        restoreAttrs(tab, tabState.attrs);
+      }
+      for (const panel of panels) {
+        const panelState = state.panels.get(panel);
+        if (!panelState) continue;
+        panel.hidden = panelState.hidden;
+        restoreAttrs(panel, panelState.attrs);
+      }
+    };
 
     const select = (tab) => {
       for (const t of tabs) {
@@ -70,14 +118,15 @@ export function initTabs({ root } = {}) {
     const onClick = (e) => {
       // `tabs` is filtered to this group, so membership (not mere DOM
       // containment) is what isolates nested [data-bronto-tabs] groups.
-      const tab = e.target.closest('.ui-tab');
+      const tab = closestSafe(e.target, '.ui-tab');
       if (tab && tabs.includes(tab)) {
+        e.preventDefault();
         select(tab);
         tab.focus();
       }
     };
     const onKey = (e) => {
-      const i = tabs.indexOf(e.target.closest('.ui-tab'));
+      const i = tabs.indexOf(closestSafe(e.target, '.ui-tab'));
       if (i < 0) return;
       let n = i;
       if (e.key === 'ArrowRight' || e.key === 'ArrowDown') n = (i + 1) % tabs.length;
@@ -90,14 +139,29 @@ export function initTabs({ root } = {}) {
       select(tabs[n]);
       tabs[n].focus();
     };
-    select(tabs.find((t) => t.classList.contains('is-active')) || tabs[0]);
     cleanups.push(
       bindOnce(group, 'tabs', () => {
+        const state = rememberState();
+        if (list) list.setAttribute('role', 'tablist');
+
+        // APG: bind each tab to its panel (aria-controls) and back
+        // (aria-labelledby), minting stable ids only where absent.
+        for (const t of tabs) {
+          const p = panels.find((x) => x.dataset.panel === t.dataset.tab);
+          if (!p) continue;
+          const n = nextFieldUid();
+          if (!t.id) t.id = `bronto-tab-${n}`;
+          if (!p.id) p.id = `bronto-tabpanel-${n}`;
+          t.setAttribute('aria-controls', p.id);
+          p.setAttribute('aria-labelledby', t.id);
+        }
+        select(tabs.find((t) => t.classList.contains('is-active')) || tabs[0]);
         group.addEventListener('click', onClick);
         group.addEventListener('keydown', onKey);
         return () => {
           group.removeEventListener('click', onClick);
           group.removeEventListener('keydown', onKey);
+          restoreState(state);
         };
       }),
     );

package/behaviors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["theme.js"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;GAcG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAmD3C;;;;;;;;;;6BA5FY,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;WAIpC,OAAO,GAAG,MAAM"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["theme.js"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;GAcG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAuE3C;;;;;;;;;;6BAhHY,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;WAIpC,OAAO,GAAG,MAAM"}

package/behaviors/theme.js

@@ -1,4 +1,4 @@
-import { hasDom, resolveHost, noop, bindOnce, collectHosts } from './internal.js';
+import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 const THEMES = ['light', 'dark'];
 
@@ -53,7 +53,18 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
   if (!hasDom()) return noop;
   const host = resolveHost(root);
   if (!host) return noop;
-  const docEl = document.documentElement;
+  const doc = host.nodeType === 9 ? host : host.ownerDocument || document;
+  const docEl = doc.documentElement;
+  const toggleStates = new Map();
+
+  const rememberToggle = (el) => {
+    if (!toggleStates.has(el)) {
+      toggleStates.set(el, {
+        had: el.hasAttribute('aria-pressed'),
+        value: el.getAttribute('aria-pressed'),
+      });
+    }
+  };
 
   const prefersDark = () =>
     typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches;
@@ -67,6 +78,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
   const reflect = () => {
     const c = current();
     collectHosts(host, '[data-bronto-theme-toggle]').forEach((el) => {
+      rememberToggle(el);
       const forced = el.getAttribute('data-bronto-theme-toggle');
       // A forced control is "pressed" when its theme is the active one;
       // a plain toggle reflects whether dark is active.
@@ -76,8 +88,9 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
   };
 
   const onClick = (e) => {
-    const trigger = e.target.closest('[data-bronto-theme-toggle]');
+    const trigger = closestSafe(e.target, '[data-bronto-theme-toggle]');
     if (!trigger || !host.contains(trigger)) return;
+    e.preventDefault();
     const forced = trigger.getAttribute('data-bronto-theme-toggle');
     const next = THEMES.includes(forced) ? forced : current() === 'dark' ? 'light' : 'dark';
     docEl.setAttribute('data-theme', next);
@@ -92,10 +105,17 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     );
   };
 
-  applyStoredTheme({ storageKey });
+  applyStoredTheme({ storageKey, root: docEl });
   reflect();
   return bindOnce(host, 'themeToggle', () => {
     host.addEventListener('click', onClick);
-    return () => host.removeEventListener('click', onClick);
+    return () => {
+      host.removeEventListener('click', onClick);
+      for (const [el, state] of toggleStates) {
+        if (state.had) el.setAttribute('aria-pressed', state.value);
+        else el.removeAttribute('aria-pressed');
+      }
+      toggleStates.clear();
+    };
   });
 }

package/classes/index.d.ts

@@ -959,9 +959,22 @@ export interface ValueAttrs {
   'aria-valuemax': number;
   style: { '--value': number };
 }
+export interface MeterValueAttrs extends ValueAttrs {
+  role: 'meter';
+}
+export interface ProgressValueAttrs extends ValueAttrs {
+  role: 'progressbar';
+}
+export interface IndeterminateProgressAttrs {
+  role: 'progressbar';
+  'aria-busy': 'true';
+}
 export interface Attrs {
-  meter(value: number, opts?: ValueRangeOpts): ValueAttrs;
-  progress(value: number, opts?: ValueRangeOpts): ValueAttrs;
+  meter(value: number, opts?: ValueRangeOpts): MeterValueAttrs;
+  progress(value: number, opts?: ValueRangeOpts): ProgressValueAttrs;
+  progress(value?: undefined, opts?: ValueRangeOpts): IndeterminateProgressAttrs;
+  dotbar(value: number, opts?: ValueRangeOpts): ProgressValueAttrs;
+  dotbar(value?: undefined, opts?: ValueRangeOpts): IndeterminateProgressAttrs;
 }
 /** Set the painted value AND its ARIA together so they cannot drift. */
 export declare const attrs: Attrs;

package/classes/index.js

@@ -467,7 +467,6 @@ export const cls = Object.freeze({
   crosshairLineX: 'ui-crosshair__line--x',
   crosshairLineY: 'ui-crosshair__line--y',
   crosshairBadge: 'ui-crosshair__badge',
-  readout: 'ui-readout',
   // selection-state vocabulary (cross-cutting — css/selection.css)
   sel: 'ui-sel',
   selOn: 'ui-sel--on',

package/connectors/index.d.ts

@@ -1,9 +1,42 @@
-export function finite(name: any, value: any, fallback: any): any;
-export function dimension(name: any, value: any, fallback: any): any;
-export function roundNumber(value: any): number;
-export function fmt(value: any): string;
-export function point(x: any, y: any): string;
-export function clamp(value: any, min: any, max: any): any;
+/**
+ * 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: string, value: number | null | undefined, fallback?: number | null | undefined): number;
+/**
+ * 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: string, value: number | null | undefined, fallback?: number | null | undefined): number;
+/**
+ * @param {number} value
+ * @returns {number}
+ */
+export function roundNumber(value: number): number;
+/**
+ * @param {number} value
+ * @returns {string}
+ */
+export function fmt(value: number): string;
+/**
+ * @param {number} x
+ * @param {number} y
+ * @returns {string}
+ */
+export function point(x: number, y: number): string;
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ * @returns {number}
+ */
+export function clamp(value: number, min: number, max: number): number;
 /**
  * A point on a rect's edge (or centre). `rect` is `{ x, y, width, height }`.
  * @param {Rect} rect

package/connectors/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAkDA,kEAIC;AAED,qEAIC;AAKD,gDAGC;AAED,wCAEC;AAED,8CAEC;AAID,2DAGC;AAED;;;;;GAKG;AACH,kCAJW,IAAI,SACJ,IAAI,GACF,KAAK,CAoBjB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACd,MAAM,CAgBlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpB,MAAM,CAclB;AAED;;;;GAIG;AACH,qCAHW,oBAAoB,GAClB,MAAM,CAOlB;AAED;;;;;;;;GAQG;AACH,6BAPW,KAAK,SACL,MAAM,SACN,MAAM,WACN,MAAM,GAEJ,MAAM,CAalB;AAED;;;;;GAKG;AACH,2BAJW,KAAK,WACL,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;GASG;AACH,+BANW,MAAM,OACN,MAAM,SACN,MAAM,UACN,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;GAKG;AACH,oCAJW,IAAI,UACJ,IAAI,GACF;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,IAAI,CAAA;CAAE,CAWpC;AAED;;;;;;;;GAQG;AACH,sCALW,KAAK,MACL,KAAK,UACL,cAAc,GACZ,MAAM,CAQlB;AAED;;;;;;GAMG;AACH,oCAHW,mBAAmB,GACjB,kBAAkB,CAW9B;AAvSD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAMH,wBAAyB,IAAI,CAAC;oBAhCjB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;mBACxB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;mBACvD,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ;6BAC9C,UAAU,GAAG,OAAO,GAAG,OAAO;;UAG7B,KAAK;QACL,KAAK;;;;;;;;;;;;cAML,IAAI;YACJ,IAAI;;;;;;;;;;;;;;OAQJ,MAAM;UACN,KAAK;QACL,KAAK;;;;WACL,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAkDA;;;;;;GAMG;AACH,6BALW,MAAM,SACN,MAAM,GAAG,IAAI,GAAG,SAAS,aACzB,MAAM,GAAG,IAAI,GAAG,SAAS,GACvB,MAAM,CAMlB;AAED;;;;;;GAMG;AACH,gCALW,MAAM,SACN,MAAM,GAAG,IAAI,GAAG,SAAS,aACzB,MAAM,GAAG,IAAI,GAAG,SAAS,GACvB,MAAM,CAMlB;AAKD;;;GAGG;AACH,mCAHW,MAAM,GACJ,MAAM,CAKlB;AAED;;;GAGG;AACH,2BAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;GAIG;AACH,yBAJW,MAAM,KACN,MAAM,GACJ,MAAM,CAIlB;AAID;;;;;GAKG;AACH,6BALW,MAAM,OACN,MAAM,OACN,MAAM,GACJ,MAAM,CAKlB;AAqBD;;;;;GAKG;AACH,kCAJW,IAAI,SACJ,IAAI,GACF,KAAK,CAoBjB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;GAKG;AACH,mCAJW,KAAK,MACL,KAAK,GACH,MAAM,CAOlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACd,MAAM,CAgBlB;AAED;;;;;;GAMG;AACH,gCALW,KAAK,MACL,KAAK,SACL;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACpB,MAAM,CAclB;AAED;;;;GAIG;AACH,qCAHW,oBAAoB,GAClB,MAAM,CAQlB;AAED;;;;;;;;GAQG;AACH,6BAPW,KAAK,SACL,MAAM,SACN,MAAM,WACN,MAAM,GAEJ,MAAM,CAalB;AAED;;;;;GAKG;AACH,2BAJW,KAAK,WACL,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;GASG;AACH,+BANW,MAAM,OACN,MAAM,SACN,MAAM,UACN,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;GAKG;AACH,oCAJW,IAAI,UACJ,IAAI,GACF;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,EAAE,IAAI,CAAA;CAAE,CAWpC;AAED;;;;;;;;GAQG;AACH,sCALW,KAAK,MACL,KAAK,UACL,cAAc,GACZ,MAAM,CASlB;AAED;;;;;;GAMG;AACH,oCAHW,mBAAmB,GACjB,kBAAkB,CAe9B;AAjWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAMH,wBAAyB,IAAI,CAAC;oBAhCjB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE;mBACxB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;mBACvD,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ;6BAC9C,UAAU,GAAG,OAAO,GAAG,OAAO;;UAG7B,KAAK;QACL,KAAK;;;;;;;;;;;;cAML,IAAI;YACJ,IAAI;;;;;;;;;;;;;;OAQJ,MAAM;UACN,KAAK;QACL,KAAK;;;;WACL,MAAM"}

package/connectors/index.js

@@ -48,12 +48,26 @@
 // 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`);
@@ -63,26 +77,64 @@ export function dimension(name, value, fallback) {
 // 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.)
+/**
+ * @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.
+/**
+ * @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 +142,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 +237,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);
@@ -270,7 +323,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 +339,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/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/feedback.css

@@ -335,9 +335,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 +346,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 +360,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);

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

package/css/tokens.css

@@ -360,9 +360,25 @@
     --line: #d9d9d9;
     --line-strong: #b3b3b3;
     --success: #2f7d4f;
+    --success-soft: rgb(47, 125, 79, 0.12);
     --danger: #c01622;
+    --danger-soft: rgb(192, 22, 34, 0.1);
     --warning: #806414;
+    --warning-soft: rgb(128, 100, 20, 0.13);
     --info: #1f63c4;
+    --info-soft: rgb(31, 99, 196, 0.12);
     --accent: #d71921;
+    --bg-accent: color-mix(in srgb, var(--accent) 6%, transparent);
+    --accent-ramp-end: #ffffff;
+    --accent-strong: color-mix(in srgb, var(--accent) 83%, #000);
+    --accent-text: var(--accent-strong);
+    --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+    --button-text: #ffffff;
+    --on-accent: var(--button-text);
+    --field-dot: rgb(17, 17, 17, 0.16);
+    --field-dot-hot: rgb(17, 17, 17, 0.4);
+    --field-dot-accent: color-mix(in srgb, var(--accent) 78%, transparent);
+    --focus-ring: var(--accent);
+    --code-bg: rgb(17, 17, 17, 0.05);
   }
 }