@ponchia/ui 0.6.10 → 0.6.11

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,CAuE3C;;;;;;;;;;6BAhHY,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":"AAuBA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,wDAHW,cAAc,GACZ,IAAI,CAahB;AAED;;;;;;;;;;;;;;GAcG;AACH,uDAHW,gBAAgB,GAAG,OAAO,eAAe,EAAE,YAAY,GACrD,OAAO,eAAe,EAAE,OAAO,CAgH3C;;;;;;;;;;6BAzJY,gBAAgB,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE;;;;;WAIpC,OAAO,GAAG,MAAM"}

package/behaviors/theme.js

@@ -1,6 +1,25 @@
 import { hasDom, resolveHost, noop, bindOnce, collectHosts, closestSafe } from './internal.js';
 
 const THEMES = ['light', 'dark'];
+const DARK_SCHEME_QUERY = '(prefers-color-scheme: dark)';
+
+const colorSchemeQuery = () =>
+  typeof matchMedia === 'function' ? matchMedia(DARK_SCHEME_QUERY) : null;
+
+function onColorSchemeChange(query, listener) {
+  if (
+    typeof query?.addEventListener === 'function' &&
+    typeof query.removeEventListener === 'function'
+  ) {
+    query.addEventListener('change', listener);
+    return () => query.removeEventListener('change', listener);
+  }
+  if (typeof query?.addListener === 'function' && typeof query.removeListener === 'function') {
+    query.addListener(listener);
+    return () => query.removeListener(listener);
+  }
+  return null;
+}
 
 /**
  * @typedef {object} ThemeStorageOpts
@@ -66,8 +85,12 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     }
   };
 
-  const prefersDark = () =>
-    typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches;
+  let schemeQuery = null;
+  let removeSchemeListener = noop;
+
+  const hasExplicitTheme = () => THEMES.includes(docEl.getAttribute('data-theme'));
+
+  const prefersDark = () => (schemeQuery || colorSchemeQuery())?.matches === true;
 
   const current = () => {
     const attr = docEl.getAttribute('data-theme');
@@ -87,6 +110,38 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     });
   };
 
+  const clearSchemeListener = () => {
+    removeSchemeListener();
+    removeSchemeListener = noop;
+    schemeQuery = null;
+  };
+
+  const syncSchemeListener = () => {
+    if (hasExplicitTheme()) {
+      clearSchemeListener();
+      return;
+    }
+    if (schemeQuery) return;
+    const query = colorSchemeQuery();
+    const cleanup = onColorSchemeChange(query, onSchemeChange);
+    if (!cleanup) return;
+    schemeQuery = query;
+    removeSchemeListener = cleanup;
+  };
+
+  function onSchemeChange() {
+    if (hasExplicitTheme()) {
+      clearSchemeListener();
+      return;
+    }
+    reflect();
+  }
+
+  const onThemeChange = () => {
+    reflect();
+    syncSchemeListener();
+  };
+
   const onClick = (e) => {
     const trigger = closestSafe(e.target, '[data-bronto-theme-toggle]');
     if (!trigger || !host.contains(trigger)) return;
@@ -94,6 +149,7 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     const forced = trigger.getAttribute('data-bronto-theme-toggle');
     const next = THEMES.includes(forced) ? forced : current() === 'dark' ? 'light' : 'dark';
     docEl.setAttribute('data-theme', next);
+    clearSchemeListener();
     try {
       localStorage.setItem(storageKey, next);
     } catch {
@@ -105,12 +161,16 @@ export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
     );
   };
 
-  applyStoredTheme({ storageKey, root: docEl });
-  reflect();
   return bindOnce(host, 'themeToggle', () => {
+    applyStoredTheme({ storageKey, root: docEl });
+    reflect();
+    syncSchemeListener();
+    docEl.addEventListener('bronto:themechange', onThemeChange);
     host.addEventListener('click', onClick);
     return () => {
+      docEl.removeEventListener('bronto:themechange', onThemeChange);
       host.removeEventListener('click', onClick);
+      clearSchemeListener();
       for (const [el, state] of toggleStates) {
         if (state.had) el.setAttribute('aria-pressed', state.value);
         else el.removeAttribute('aria-pressed');

package/behaviors/toast.d.ts

@@ -5,6 +5,7 @@
  * @property {number} [duration] Auto-dismiss delay in ms. `0` keeps it until dismissed. Default: `4000`.
  * @property {boolean} [assertive] Route to the assertive live region so AT interrupts immediately. Defaults to `true` when `tone === 'danger'`.
  * @property {boolean} [closable] Render a dismiss button on the toast.
+ * @property {string} [dismissLabel] Accessible label for the generated dismiss button. Default: `Dismiss`.
  */
 /**
  * Push a transient toast into a shared, screen-anchored stack. The stack
@@ -23,7 +24,7 @@
  * @param {ToastOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
  */
-export function toast(message: string, { tone, title, duration, assertive, closable }?: ToastOpts): import("./internal.js").Cleanup;
+export function toast(message: string, { tone, title, duration, assertive, closable, dismissLabel }?: ToastOpts): import("./internal.js").Cleanup;
 export type ToastOpts = {
     /**
      * Status tone — maps to `ui-toast--<tone>`.
@@ -45,5 +46,9 @@ export type ToastOpts = {
      * Render a dismiss button on the toast.
      */
     closable?: boolean | undefined;
+    /**
+     * Accessible label for the generated dismiss button. Default: `Dismiss`.
+     */
+    dismissLabel?: string | undefined;
 };
 //# sourceMappingURL=toast.d.ts.map

package/behaviors/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["toast.js"],"names":[],"mappings":"AA2HA;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,+BAJW,MAAM,mDACN,SAAS,GACP,OAAO,eAAe,EAAE,OAAO,CAgD3C"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["toast.js"],"names":[],"mappings":"AAwJA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,+BAJW,MAAM,iEACN,SAAS,GACP,OAAO,eAAe,EAAE,OAAO,CAsD3C"}

package/behaviors/toast.js

@@ -27,10 +27,10 @@ function toastStack(isAssertive) {
     stack.setAttribute('aria-live', isAssertive ? 'assertive' : 'polite');
     if (isAssertive) {
       stack.setAttribute('role', 'alert');
-      // The assertive region carries one error at a time and must be read whole;
-      // aria-atomic ensures the full toast (title + message) announces, not just
-      // the changed fragment.
-      stack.setAttribute('aria-atomic', 'true');
+      // The assertive stack may hold more than one sticky danger toast. Keep the
+      // container non-atomic so adding a new toast announces that toast only,
+      // while the per-toast aria-atomic below still reads its title + message.
+      stack.setAttribute('aria-atomic', 'false');
     }
     document.body.appendChild(stack);
   }
@@ -102,25 +102,54 @@ function removeToast(el) {
   }
   el.classList.add('is-leaving');
   let done = false;
+  let timer;
   const finish = () => {
     if (done) return;
     done = true;
+    el.removeEventListener('transitionend', finish);
+    if (timer !== undefined) clearTimeout(timer);
     el.remove();
   };
-  el.addEventListener('transitionend', finish, { once: true });
-  const timer = setTimeout(finish, dur * 1000 + 120);
+  el.addEventListener('transitionend', finish);
+  timer = setTimeout(finish, dur * 1000 + 120);
   timer?.unref?.(); // don't keep a Node test process alive
 }
 
-function addToastClose(el, dismiss) {
+function addToastClose(el, dismiss, label = 'Dismiss') {
   const close = document.createElement('button');
   close.type = 'button';
   close.className = 'ui-toast__close';
-  close.setAttribute('aria-label', 'Dismiss');
+  close.setAttribute('aria-label', label);
   close.addEventListener('click', dismiss);
   el.appendChild(close);
 }
 
+function normalizeToastDuration(duration) {
+  let value;
+  try {
+    value = Number(duration);
+  } catch {
+    value = NaN;
+  }
+  if (Number.isFinite(value) && value >= 0) return value;
+  if (typeof console !== 'undefined') {
+    console.warn(
+      '[bronto] toast(): duration must be a finite non-negative number. Rendering a sticky, closable toast instead.',
+    );
+  }
+  return 0;
+}
+
+function toastDismissLabel(stack, dismissLabel) {
+  return (
+    (typeof dismissLabel === 'string' && dismissLabel.trim()) ||
+    stack.getAttribute('data-bronto-toast-dismiss-label')?.trim() ||
+    document.body?.getAttribute('data-bronto-toast-dismiss-label')?.trim() ||
+    document.documentElement?.getAttribute('data-bronto-toast-dismiss-label')?.trim() ||
+    'Dismiss'
+  );
+}
+
 /**
  * @typedef {object} ToastOpts
  * @property {'accent' | 'success' | 'warning' | 'danger' | 'info'} [tone] Status tone — maps to `ui-toast--<tone>`.
@@ -128,6 +157,7 @@ function addToastClose(el, dismiss) {
  * @property {number} [duration] Auto-dismiss delay in ms. `0` keeps it until dismissed. Default: `4000`.
  * @property {boolean} [assertive] Route to the assertive live region so AT interrupts immediately. Defaults to `true` when `tone === 'danger'`.
  * @property {boolean} [closable] Render a dismiss button on the toast.
+ * @property {string} [dismissLabel] Accessible label for the generated dismiss button. Default: `Dismiss`.
  */
 
 /**
@@ -147,7 +177,10 @@ function addToastClose(el, dismiss) {
  * @param {ToastOpts} [opts]
  * @returns {import('./internal.js').Cleanup}
  */
-export function toast(message, { tone, title, duration = 4000, assertive, closable } = {}) {
+export function toast(
+  message,
+  { tone, title, duration = 4000, assertive, closable, dismissLabel } = {},
+) {
   if (!hasDom()) return noop;
   // Errors must interrupt: danger toasts (or an explicit `assertive`)
   // go to a SEPARATE assertive region so they announce immediately,
@@ -157,6 +190,7 @@ export function toast(message, { tone, title, duration = 4000, assertive, closab
   const isAssertive = assertive ?? tone === 'danger';
   const { stack, fresh: freshStack } = toastStack(isAssertive);
   const el = toastElement(message, { tone, title });
+  const normalizedDuration = normalizeToastDuration(duration);
   // Append after a frame the *first* time so the empty live region is
   // observed by AT before its first child arrives; once the region has
   // been observed, later toasts append synchronously.
@@ -185,12 +219,14 @@ export function toast(message, { tone, title, duration = 4000, assertive, closab
   // Explicitly opting OUT of the close button on a sticky toast strands it with
   // no in-UI dismissal; warn that the caller must retain and call the returned
   // dismiss function.
-  if (duration === 0 && closable === false && typeof console !== 'undefined') {
+  if (normalizedDuration === 0 && closable === false && typeof console !== 'undefined') {
     console.warn(
       '[bronto] toast(): duration:0 + closable:false has no in-UI dismissal — keep the returned dismiss() and call it yourself, or set closable:true.',
     );
   }
-  if (closable ?? duration === 0) addToastClose(el, dismiss);
-  if (duration > 0) timer = setTimeout(dismiss, duration);
+  if (closable ?? normalizedDuration === 0) {
+    addToastClose(el, dismiss, toastDismissLabel(stack, dismissLabel));
+  }
+  if (normalizedDuration > 0) timer = setTimeout(dismiss, normalizedDuration);
   return dismiss;
 }

package/classes/classes.json

@@ -2754,6 +2754,30 @@
       "behavior": "initCommand",
       "note": "wires the filter input + active-option keyboard model"
     },
+    {
+      "name": "data-bronto-carousel-roledescription",
+      "on": "a .ui-carousel host",
+      "behavior": "initCarousel",
+      "note": "localized override for the carousel aria-roledescription; the behavior applies its English default only when this attribute and any authored aria-roledescription are absent."
+    },
+    {
+      "name": "data-bronto-carousel-slide-roledescription",
+      "on": "a .ui-carousel host (applies to each slide)",
+      "behavior": "initCarousel",
+      "note": "localized override for the per-slide aria-roledescription; an authored slide aria-roledescription is preserved and the English \"slide\" default applies only when both are absent."
+    },
+    {
+      "name": "data-bronto-error-summary-title",
+      "on": "a form/error-summary host enhanced by initFormValidation",
+      "behavior": "initFormValidation",
+      "note": "localized heading for the generated validation error summary; an authored title or this attribute is preserved, English is only the fallback."
+    },
+    {
+      "name": "data-bronto-toast-dismiss-label",
+      "on": "the toast host (or via toast() options)",
+      "behavior": "toast",
+      "note": "localized aria-label for the generated toast dismiss button; defaults to the English 'Dismiss' only when absent."
+    },
     {
       "name": "data-bronto-sources",
       "on": "a source/citation island",

package/classes/index.d.ts

@@ -10,7 +10,7 @@ export type ClassValue =
   | boolean
   | null
   | undefined
-  | ClassValue[];
+  | readonly ClassValue[];
 
 /** The flat registry of every class @ponchia/ui defines (literal). */
 export declare const cls: {
@@ -661,7 +661,7 @@ export declare const cls: {
 };
 
 /** classnames-style joiner: skips falsy, flattens arrays. */
-export declare function cx(...parts: ClassValue[]): string;
+export declare function cx(...parts: readonly ClassValue[]): string;
 
 export interface ButtonOpts {
   variant?: 'ghost' | 'subtle' | 'danger';
@@ -715,6 +715,7 @@ export interface DotgridOpts {
 export interface TableOpts {
   density?: 'dense' | 'comfortable';
   lined?: boolean;
+  breakAnywhere?: boolean;
 }
 export interface EyebrowOpts {
   muted?: boolean;

package/classes/index.js

@@ -703,50 +703,70 @@ export const cls = Object.freeze({
   themetoggleThumb: 'ui-themetoggle__thumb',
 });
 
-/** classnames-style joiner: skips falsy, flattens nested arrays of any depth. */
+/**
+ * Mirrors clsx's permissive input: `number`/`boolean` accepted so guarded class
+ * expressions type-check; readonly arrays/tuples flatten the same as mutable ones.
+ * @typedef {string | number | boolean | null | undefined | ReadonlyArray<ClassValue>} ClassValue
+ */
+
+/**
+ * classnames-style joiner: skips falsy, flattens nested arrays of any depth.
+ * @param {...ClassValue} parts
+ * @returns {string}
+ */
 export function cx(...parts) {
   const out = [];
-  for (const p of parts.flat(Infinity)) if (p) out.push(p);
+  for (const p of parts.flat(Infinity)) if (p && typeof p !== 'boolean') out.push(p);
   return out.join(' ');
 }
 
 const j = (...p) => p.filter(Boolean).join(' ');
+const valueClass = (map, value) => (value == null || !Object.hasOwn(map, value) ? '' : map[value]);
 
 // Lifecycle state → canonical tone class.
 const stateTone = (state) =>
-  ({
-    saving: cls.stateSaving,
-    saved: cls.stateSaved,
-    queued: cls.stateQueued,
-    offline: cls.stateOffline,
-    stale: cls.stateStale,
-    conflict: cls.stateConflict,
-    error: cls.stateError,
-    locked: cls.stateLocked,
-    reviewed: cls.stateReviewed,
-    'needs-review': cls.stateNeedsReview,
-  })[state] || '';
+  valueClass(
+    {
+      saving: cls.stateSaving,
+      saved: cls.stateSaved,
+      queued: cls.stateQueued,
+      offline: cls.stateOffline,
+      stale: cls.stateStale,
+      conflict: cls.stateConflict,
+      error: cls.stateError,
+      locked: cls.stateLocked,
+      reviewed: cls.stateReviewed,
+      'needs-review': cls.stateNeedsReview,
+    },
+    state,
+  );
 
 const jobTone = (state) =>
-  ({
-    queued: cls.jobQueued,
-    running: cls.jobRunning,
-    blocked: cls.jobBlocked,
-    failed: cls.jobFailed,
-    complete: cls.jobComplete,
-  })[state] || '';
+  valueClass(
+    {
+      queued: cls.jobQueued,
+      running: cls.jobRunning,
+      blocked: cls.jobBlocked,
+      failed: cls.jobFailed,
+      complete: cls.jobComplete,
+    },
+    state,
+  );
 
 // Trust-state → tone class, shared by the source/citation/provenance recipes.
-// Object-literal lookup to match stateTone above (shorter, greppable, one idiom).
+// Own-property object-literal lookup to match stateTone above.
 const srcTone = (state) =>
-  ({
-    verified: cls.srcVerified,
-    unverified: cls.srcUnverified,
-    generated: cls.srcGenerated,
-    reviewed: cls.srcReviewed,
-    stale: cls.srcStale,
-    conflict: cls.srcConflict,
-  })[state] || '';
+  valueClass(
+    {
+      verified: cls.srcVerified,
+      unverified: cls.srcUnverified,
+      generated: cls.srcGenerated,
+      reviewed: cls.srcReviewed,
+      stale: cls.srcStale,
+      conflict: cls.srcConflict,
+    },
+    state,
+  );
 
 // Component tone → modifier class. Same object-literal idiom as srcTone/stateTone
 // while keeping modifier classes grep-friendly.
@@ -759,13 +779,13 @@ const srcTone = (state) =>
 // is fine and returns no modifier.
 const toneClass = (component, map, tone) => {
   if (tone == null) return '';
-  const hit = map[tone];
+  const hit = valueClass(map, tone);
   if (!hit && typeof console !== 'undefined') {
     console.warn(
       `[bronto] ui.${component}(): "${tone}" is not a ${component} tone (use one of: ${Object.keys(map).join(', ')}).`,
     );
   }
-  return hit || '';
+  return hit;
 };
 
 const badgeTone = (tone) =>
@@ -862,8 +882,6 @@ const claimStatus = (status) =>
     status,
   );
 
-const valueClass = (map, value) => (value == null ? '' : map[value] || '');
-
 const annotationVariants = Object.freeze({
   label: cls.annotationLabelVariant,
   callout: cls.annotationCallout,
@@ -899,6 +917,13 @@ const annotationMotions = Object.freeze({
   focus: cls.annotationFocus,
 });
 
+/**
+ * @typedef {object} TableOpts
+ * @property {'dense' | 'comfortable'} [density] Density modifier.
+ * @property {boolean} [lined] Add row separator lines.
+ * @property {boolean} [breakAnywhere] Allow long unspaced cell content to wrap instead of overflowing.
+ */
+
 export const ui = {
   button: ({ variant, icon, size } = {}) =>
     j(
@@ -930,6 +955,7 @@ export const ui = {
   dot: ({ tone, live } = {}) => j(cls.dot, dotTone(tone), live && cls.dotLive),
   dotgrid: ({ accent, dense } = {}) =>
     j(cls.dotgrid, accent && cls.dotgridAccent, dense && cls.dotgridDense),
+  /** @type {(opts?: TableOpts) => string} */
   table: ({ density, lined, breakAnywhere } = {}) =>
     j(
       cls.table,
@@ -1078,9 +1104,19 @@ export const ui = {
 // unknown; a meter is never indeterminate so it passes false. (Kept a boolean
 // flag rather than testing the role string, so check:recipe-types doesn't read it
 // as a recipe option literal.)
-const valueAttrs = (role, value, min, max, busyWhenIndeterminate) => {
+const valueAttrs = (component, role, value, min, max, busyWhenIndeterminate) => {
   const lo = Number(min);
   const hi = Number(max);
+  const validRange = Number.isFinite(lo) && Number.isFinite(hi) && hi > lo;
+  if (!validRange) {
+    if (typeof console !== 'undefined') {
+      console.warn(
+        `[bronto] attrs.${component}(): invalid range (expected finite min/max with max > min); omitting value ARIA.`,
+      );
+    }
+    return busyWhenIndeterminate ? { role, 'aria-busy': 'true' } : { role };
+  }
+
   const raw = Number(value);
   // Indeterminate: an omitted/unknown value (attrs.progress() with no argument).
   // ARIA requires aria-valuenow be OMITTED here — emitting 0 announces "0%",
@@ -1093,7 +1129,7 @@ const valueAttrs = (role, value, min, max, busyWhenIndeterminate) => {
     return busyWhenIndeterminate ? { role, 'aria-busy': 'true' } : { role };
   }
   const now = Math.min(hi, Math.max(lo, raw));
-  const pct = hi > lo ? ((now - lo) / (hi - lo)) * 100 : 0;
+  const pct = ((now - lo) / (hi - lo)) * 100;
   return {
     role,
     'aria-valuenow': now,
@@ -1119,10 +1155,12 @@ const valueAttrs = (role, value, min, max, busyWhenIndeterminate) => {
  * call with no value for the indeterminate sweep.
  */
 export const attrs = Object.freeze({
-  meter: (value, { min = 0, max = 100 } = {}) => valueAttrs('meter', value, min, max, false),
+  meter: (value, { min = 0, max = 100 } = {}) =>
+    valueAttrs('meter', 'meter', value, min, max, false),
   progress: (value, { min = 0, max = 100 } = {}) =>
-    valueAttrs('progressbar', value, min, max, true),
-  dotbar: (value, { min = 0, max = 100 } = {}) => valueAttrs('progressbar', value, min, max, true),
+    valueAttrs('progress', 'progressbar', value, min, max, true),
+  dotbar: (value, { min = 0, max = 100 } = {}) =>
+    valueAttrs('dotbar', 'progressbar', value, min, max, true),
 });
 
 export default ui;

package/connectors/index.d.ts

@@ -80,10 +80,10 @@ export function curvePath(from: Point, to: Point, opts?: {
 }): string;
 /**
  * Build a path between two points by `shape` (`straight` | `elbow` | `curve`).
- * @param {ConnectorPathOptions} [opts]
+ * @param {ConnectorPathOptions} opts
  * @returns {string}
  */
-export function connectorPath(opts?: ConnectorPathOptions): string;
+export function connectorPath(opts: ConnectorPathOptions): string;
 /**
  * A filled triangle arrowhead at `p`, pointing along `angle` (radians).
  * @param {Point} p
@@ -136,10 +136,10 @@ export function endTangentAngle(from: Point, to: Point, shape?: ConnectorShape):
  * Connect two rects. Resolves anchor points (explicit `fromSide`/`toSide`, else
  * auto), builds the path, and returns `{ d, from, to, angle }` so the caller can
  * place an arrowhead/dot at `to` rotated by `angle`.
- * @param {ConnectRectsOptions} [opts]
+ * @param {ConnectRectsOptions} opts
  * @returns {ConnectRectsResult}
  */
-export function connectRects(opts?: ConnectRectsOptions): ConnectRectsResult;
+export function connectRects(opts: ConnectRectsOptions): ConnectRectsResult;
 /**
  * @ponchia/ui/connectors — dependency-free SVG geometry for connecting two
  * elements (or two points) with a leader line.

package/connectors/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":"AAiDA;;;;;;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;AAID;;;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;AAGD;;;;;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;AA9VD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAKH,wBAAyB,IAAI,CAAC;oBA/BjB;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":"AAiDA;;;;;;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;AAID;;;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;AAGD;;;;;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,oCAHW,oBAAoB,GAClB,MAAM,CASlB;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,mCAHW,mBAAmB,GACjB,kBAAkB,CAgB9B;AAhWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAKH,wBAAyB,IAAI,CAAC;oBA/BjB;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

@@ -230,14 +230,15 @@ export function curvePath(from, to, opts = {}) {
 
 /**
  * Build a path between two points by `shape` (`straight` | `elbow` | `curve`).
- * @param {ConnectorPathOptions} [opts]
+ * @param {ConnectorPathOptions} opts
  * @returns {string}
  */
-export function connectorPath(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);
+export function connectorPath(opts) {
+  const options = opts ?? {};
+  const { from, to } = options;
+  const shape = connectorShape(options.shape);
+  if (shape === 'elbow') return elbowPath(from, to, options);
+  if (shape === 'curve') return curvePath(from, to, options);
   return straightPath(from, to);
 }
 
@@ -332,17 +333,18 @@ export function endTangentAngle(from, to, shape = 'straight') {
  * Connect two rects. Resolves anchor points (explicit `fromSide`/`toSide`, else
  * auto), builds the path, and returns `{ d, from, to, angle }` so the caller can
  * place an arrowhead/dot at `to` rotated by `angle`.
- * @param {ConnectRectsOptions} [opts]
+ * @param {ConnectRectsOptions} opts
  * @returns {ConnectRectsResult}
  */
-export function connectRects(opts = {}) {
-  const { fromRect, toRect, curvature, mid } = opts;
-  const shape = connectorShape(opts.shape);
+export function connectRects(opts) {
+  const options = opts ?? {};
+  const { fromRect, toRect, curvature, mid } = options;
+  const shape = connectorShape(options.shape);
   // Honor each side override independently; auto-pick whichever is unset.
   const auto = autoSides(fromRect, toRect);
   const sides = {
-    from: opts.fromSide == null ? auto.from : sideValue(opts.fromSide),
-    to: opts.toSide == null ? auto.to : sideValue(opts.toSide),
+    from: options.fromSide == null ? auto.from : sideValue(options.fromSide),
+    to: options.toSide == null ? auto.to : sideValue(options.toSide),
   };
   const from = anchorPoint(fromRect, sides.from);
   const to = anchorPoint(toRect, sides.to);

package/css/annotations.css

@@ -275,6 +275,7 @@
   .ui-annotation__note,
   .ui-annotation__note-line,
   .ui-annotation__badge {
+    /* Intentional !important: print must freeze opt-in draw/reveal animations. */
     animation: none !important;
     opacity: 1;
     stroke-dashoffset: 0;

package/css/app.css

@@ -184,6 +184,13 @@
   z-index: var(--z-raised);
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .ui-app-topbar {
+    backdrop-filter: none;
+    background: var(--surface-1);
+  }
+}
+
 .ui-app-topbar__title {
   color: var(--text);
   font-family: var(--display);

package/css/base.css

@@ -267,6 +267,7 @@ textarea:focus-visible,
   .ui-dotloader,
   .ui-dotspinner,
   dialog.ui-modal::backdrop {
+    /* Intentional !important: print chrome must stay hidden across component display rules. */
     display: none !important;
   }
 
@@ -274,6 +275,7 @@ textarea:focus-visible,
   *,
   *::before,
   *::after {
+    /* Intentional !important: print output drops decorative shadows globally. */
     box-shadow: none !important;
     text-shadow: none !important;
   }
@@ -291,6 +293,7 @@ textarea:focus-visible,
   .ui-prose table,
   .ui-tabs__list,
   pre {
+    /* Intentional !important: print must spill scroll containers even if component rules clip. */
     overflow: visible !important;
   }