npm - @ponchia/ui - Versions diffs - 0.4.0 → 0.4.1 - Mend

@ponchia/ui 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/CHANGELOG.md +128 -10
package/README.md +20 -13
package/behaviors/index.d.ts +3 -1
package/behaviors/index.js +179 -106
package/classes/index.d.ts +40 -0
package/classes/index.js +41 -0
package/classes/vscode.css-custom-data.json +18 -14
package/css/disclosure.css +29 -0
package/css/dots.css +2 -0
package/css/feedback.css +53 -0
package/css/motion.css +88 -0
package/css/overlay.css +52 -1
package/css/report.css +382 -0
package/css/tokens.css +56 -26
package/dist/bronto.css +1 -1
package/dist/css/disclosure.css +1 -1
package/dist/css/dots.css +1 -1
package/dist/css/feedback.css +1 -1
package/dist/css/motion.css +1 -1
package/dist/css/overlay.css +1 -1
package/dist/css/report.css +1 -0
package/dist/css/tokens.css +1 -1
package/docs/adr/0001-color-system.md +26 -27
package/docs/adr/0002-scope-and-2026-baseline.md +104 -0
package/docs/adr/0003-theme-model.md +94 -0
package/docs/contrast.md +42 -42
package/docs/reference.md +112 -15
package/docs/reporting.md +270 -0
package/docs/stability.md +37 -0
package/docs/theming.md +18 -6
package/docs/usage.md +21 -3
package/llms.txt +61 -4
package/package.json +28 -3
package/qwik/index.d.ts +55 -0
package/qwik/index.js +129 -0
package/react/index.d.ts +35 -14
package/react/index.js +22 -5
package/solid/index.d.ts +35 -14
package/solid/index.js +21 -3
package/tokens/index.d.ts +3 -3
package/tokens/index.js +16 -14
package/tokens/index.json +32 -28
package/tokens/resolved.json +34 -32
package/tokens/tokens.dtcg.json +22 -14

package/behaviors/index.js CHANGED Viewed

@@ -54,6 +54,24 @@ function bindOnce(target, key, add) {
   return cleanup;
 }
+function byIdInHost(host, id) {
+  if (!id) return null;
+  if (host === document) return document.getElementById(id);
+  if (host.id === id) return host;
+  return (
+    Array.from(host.querySelectorAll?.('[id]') || []).find((el) => el.id === id) ||
+    document.getElementById(id)
+  );
+}
+function closestSafe(el, selector) {
+  try {
+    return el.closest(selector);
+  } catch {
+    return null;
+  }
+}
 /**
  * Apply the persisted theme to <html data-theme>. Call as early as
  * possible (an inline module in <head>) to avoid a flash before the
@@ -145,7 +163,7 @@ export function dismissible({ root } = {}) {
     const btn = e.target.closest('[data-bronto-dismiss]');
     if (!btn || !host.contains(btn)) return;
     const sel = btn.getAttribute('data-bronto-dismiss');
-    const target = sel ? btn.closest(sel) : btn.closest('[data-bronto-dismissible]');
+    const target = sel ? closestSafe(btn, sel) : btn.closest('[data-bronto-dismissible]');
     if (!target) return;
     const ev = new CustomEvent('bronto:dismiss', { bubbles: true, cancelable: true });
     if (target.dispatchEvent(ev)) target.remove();
@@ -264,81 +282,73 @@ export function initTabs({ root } = {}) {
  * `close` event, so keyboard/SR users are never dropped at `<body>`.
  * SSR-safe and idempotent; returns cleanup.
  *
- * `root` scopes which triggers are delegated (default `document`); the
- * dialog itself is still resolved by id document-wide, because a modal
- * <dialog> is promoted to the top layer and is inherently document-global
- * (same model as `initThemeToggle`, where `root` scopes controls but the
- * theme applies to <html>).
+ * `root` scopes delegated triggers (default `document`). Controlled targets are
+ * resolved root-first, then document-wide, so scoped islands win duplicate-id
+ * conflicts without breaking body/portal-mounted overlays.
  */
 export function initDialog({ root } = {}) {
   if (!hasDom()) return noop;
   const host = root || document;
+  const managedDialogs = new WeakSet();
+  const canManageDialog = (dlg, origin) => host.contains(origin) || managedDialogs.has(dlg);
+  const openFrom = (opener) => {
+    const dlg = byIdInHost(host, opener.getAttribute('data-bronto-open'));
+    if (!dlg || typeof dlg.showModal !== 'function' || dlg.open) return;
+    managedDialogs.add(dlg);
+    dlg.addEventListener(
+      'close',
+      () => {
+        if (opener.isConnected && typeof opener.focus === 'function') opener.focus();
+      },
+      { once: true },
+    );
+    dlg.showModal();
+  };
+  const closeFrom = (closer) => {
+    const dlg = closer.closest('dialog');
+    if (dlg && dlg.open && canManageDialog(dlg, closer)) dlg.close();
+  };
+  const lightDismiss = (dlg) => {
+    if (
+      dlg.tagName === 'DIALOG' &&
+      dlg.open &&
+      dlg.hasAttribute('data-bronto-dialog-light') &&
+      canManageDialog(dlg, dlg)
+    ) {
+      dlg.close();
+    }
+  };
   const onClick = (e) => {
     const opener = e.target.closest('[data-bronto-open]');
     if (opener && host.contains(opener)) {
-      const dlg = document.getElementById(opener.getAttribute('data-bronto-open'));
-      if (dlg && typeof dlg.showModal === 'function' && !dlg.open) {
-        dlg.addEventListener(
-          'close',
-          () => {
-            if (opener.isConnected && typeof opener.focus === 'function') opener.focus();
-          },
-          { once: true },
-        );
-        dlg.showModal();
-      }
+      openFrom(opener);
       return;
     }
     const closer = e.target.closest('[data-bronto-close]');
-    if (closer && host.contains(closer)) {
-      const dlg = closer.closest('dialog');
-      if (dlg && dlg.open) dlg.close();
+    if (closer) {
+      closeFrom(closer);
       return;
     }
     // Light-dismiss: a click whose target is the <dialog> itself is the
     // backdrop (content sits in child elements).
-    const dlg = e.target;
-    if (
-      dlg.tagName === 'DIALOG' &&
-      dlg.open &&
-      dlg.hasAttribute('data-bronto-dialog-light') &&
-      host.contains(dlg)
-    ) {
-      dlg.close();
-    }
+    lightDismiss(e.target);
   };
   return bindOnce(host, 'dialog', () => {
-    host.addEventListener('click', onClick);
-    return () => host.removeEventListener('click', onClick);
+    document.addEventListener('click', onClick);
+    return () => document.removeEventListener('click', onClick);
   });
 }
-/**
- * Push a transient toast into a shared, screen-anchored stack. The stack
- * is the `aria-live="polite"` region: it is created once, appended to
- * <body>, and **kept resident even when empty** so the live region is
- * always present before content is inserted (a freshly created region
- * that receives its first child in the same tick is not reliably
- * announced by VoiceOver/NVDA). On first creation the empty region is
- * inserted and the toast is appended on the next frame for the same
- * reason. `tone` is accent/success/warning/danger/info; `title` is an
- * optional uppercase label; `duration` ms before auto-dismiss (0 keeps
- * it until dismissed). Returns a function that dismisses the toast
- * early. SSR-safe (no-op).
- */
-export function toast(message, { tone, title, duration = 4000, assertive, closable } = {}) {
-  if (!hasDom()) return noop;
-  // Errors must interrupt: danger toasts (or an explicit `assertive`)
-  // go to a SEPARATE assertive region so they announce immediately,
-  // while status toasts stay polite. Two regions — not a per-item
-  // role=alert nested in a polite parent — avoids the double
-  // announcement that nesting causes in some screen readers.
-  const isAssertive = assertive ?? tone === 'danger';
+function toastStack(isAssertive) {
   const stackSel = isAssertive
     ? '.ui-toast-stack--assertive'
     : '.ui-toast-stack:not(.ui-toast-stack--assertive)';
   let stack = document.querySelector(stackSel);
-  const freshStack = !stack;
+  const fresh = !stack;
   if (!stack) {
     stack = document.createElement('div');
     stack.className = isAssertive ? 'ui-toast-stack ui-toast-stack--assertive' : 'ui-toast-stack';
@@ -346,6 +356,26 @@ export function toast(message, { tone, title, duration = 4000, assertive, closab
     if (isAssertive) stack.setAttribute('role', 'alert');
     document.body.appendChild(stack);
   }
+  return { stack, fresh };
+}
+function enqueueToast(place, freshStack) {
+  const canDefer = typeof requestAnimationFrame === 'function';
+  if (freshStack && canDefer) {
+    toastQueue.push(place);
+    toastFlushScheduled = true;
+    requestAnimationFrame(() => {
+      toastFlushScheduled = false;
+      for (const fn of toastQueue.splice(0)) fn();
+    });
+  } else if (toastFlushScheduled) {
+    toastQueue.push(place);
+  } else {
+    place();
+  }
+}
+function toastElement(message, { tone, title }) {
   const el = document.createElement('div');
   el.className = tone ? `ui-toast ui-toast--${tone}` : 'ui-toast';
   // No per-item role: the stack itself is the live region; a nested
@@ -359,6 +389,72 @@ export function toast(message, { tone, title, duration = 4000, assertive, closab
   const body = document.createElement('div');
   body.textContent = message;
   el.appendChild(body);
+  return el;
+}
+// Remove a toast, animating its exit when — and only when — a transition
+// is actually in effect. Detached nodes, reduced-motion, and the no-CSS
+// test/SSR env all resolve to instant removal, so the dismiss contract
+// (toast gone now, the aria-live stack stays resident) is unchanged there;
+// a real browser with motion gets the CSS `.is-leaving` fade-out, with a
+// timeout fallback so an interrupted/never-firing transitionend can't strand
+// a toast in the live region.
+function removeToast(el) {
+  const reduce =
+    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const cs =
+    !reduce && el.isConnected && typeof getComputedStyle === 'function'
+      ? getComputedStyle(el)
+      : null;
+  const dur = cs ? parseFloat(cs.transitionDuration) || 0 : 0;
+  if (dur <= 0) {
+    el.remove();
+    return;
+  }
+  el.classList.add('is-leaving');
+  let done = false;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    el.remove();
+  };
+  el.addEventListener('transitionend', finish, { once: true });
+  const timer = setTimeout(finish, dur * 1000 + 120);
+  timer?.unref?.(); // don't keep a Node test process alive
+}
+function addToastClose(el, dismiss) {
+  const close = document.createElement('button');
+  close.type = 'button';
+  close.className = 'ui-toast__close';
+  close.setAttribute('aria-label', 'Dismiss');
+  close.addEventListener('click', dismiss);
+  el.appendChild(close);
+}
+/**
+ * Push a transient toast into a shared, screen-anchored stack. The stack
+ * is the `aria-live="polite"` region: it is created once, appended to
+ * <body>, and **kept resident even when empty** so the live region is
+ * always present before content is inserted (a freshly created region
+ * that receives its first child in the same tick is not reliably
+ * announced by VoiceOver/NVDA). On first creation the empty region is
+ * inserted and the toast is appended on the next frame for the same
+ * reason. `tone` is accent/success/warning/danger/info; `title` is an
+ * optional uppercase label; `duration` ms before auto-dismiss (0 keeps
+ * it until dismissed). Returns a function that dismisses the toast
+ * early. SSR-safe (no-op).
+ */
+export function toast(message, { tone, title, duration = 4000, assertive, closable } = {}) {
+  if (!hasDom()) return noop;
+  // Errors must interrupt: danger toasts (or an explicit `assertive`)
+  // go to a SEPARATE assertive region so they announce immediately,
+  // while status toasts stay polite. Two regions — not a per-item
+  // role=alert nested in a polite parent — avoids the double
+  // announcement that nesting causes in some screen readers.
+  const isAssertive = assertive ?? tone === 'danger';
+  const { stack, fresh: freshStack } = toastStack(isAssertive);
+  const el = toastElement(message, { tone, title });
   // 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.
@@ -369,28 +465,14 @@ export function toast(message, { tone, title, duration = 4000, assertive, closab
   const place = () => {
     if (!dismissed) stack.appendChild(el);
   };
-  const canDefer = typeof requestAnimationFrame === 'function';
-  if (freshStack && canDefer) {
-    toastQueue.push(place);
-    toastFlushScheduled = true;
-    requestAnimationFrame(() => {
-      toastFlushScheduled = false;
-      for (const fn of toastQueue.splice(0)) fn();
-    });
-  } else if (toastFlushScheduled) {
-    // A first-frame deferral is in flight — queue behind it so FIFO
-    // order holds and the region still isn't populated synchronously.
-    toastQueue.push(place);
-  } else {
-    place();
-  }
+  enqueueToast(place, freshStack);
   let timer;
   const dismiss = () => {
     if (dismissed) return;
     dismissed = true;
     if (timer) clearTimeout(timer);
-    el.remove();
+    removeToast(el);
     // The stack is a persistent live region — never removed on drain, so
     // the next toast does not recreate (and thus mis-announce) it.
   };
@@ -398,14 +480,7 @@ export function toast(message, { tone, title, duration = 4000, assertive, closab
   // it gets a dismiss affordance by default; any toast can opt in via
   // `closable`. The button carries no text node (glyph is a CSS
   // ::before) so the toast's announced/textContent stays the message.
-  if (closable ?? duration === 0) {
-    const close = document.createElement('button');
-    close.type = 'button';
-    close.className = 'ui-toast__close';
-    close.setAttribute('aria-label', 'Dismiss');
-    close.addEventListener('click', dismiss);
-    el.appendChild(close);
-  }
+  if (closable ?? duration === 0) addToastClose(el, dismiss);
   if (duration > 0) timer = setTimeout(dismiss, duration);
   return dismiss;
 }
@@ -422,7 +497,7 @@ export function initDisclosure({ root } = {}) {
     const trigger = e.target.closest('[data-bronto-disclosure]');
     if (!trigger || !host.contains(trigger)) return;
     const id = trigger.getAttribute('aria-controls');
-    const panel = id && document.getElementById(id);
+    const panel = byIdInHost(host, id);
     if (!panel) return;
     const open = trigger.getAttribute('aria-expanded') === 'true';
     trigger.setAttribute('aria-expanded', String(!open));
@@ -755,6 +830,24 @@ export function initCombobox({ root } = {}) {
       active = options.indexOf(vis[next]);
       setActive(options[active]);
     };
+    const activateEdge = (which) => {
+      if (list.hidden) return false;
+      const v = visible();
+      if (!v.length) return true;
+      active = options.indexOf(which === 'first' ? v[0] : v[v.length - 1]);
+      setActive(options[active]);
+      return true;
+    };
+    const selectActive = () => {
+      if (list.hidden || active < 0 || options[active].hidden) return false;
+      select(options[active]);
+      return true;
+    };
+    const closeIfOpen = () => {
+      if (list.hidden) return false;
+      close();
+      return true;
+    };
     const onInput = () => filter();
     const onKey = (e) => {
@@ -768,36 +861,16 @@ export function initCombobox({ root } = {}) {
           move(-1);
           break;
         case 'Home':
-          if (!list.hidden) {
-            e.preventDefault();
-            const v = visible();
-            if (v.length) {
-              active = options.indexOf(v[0]);
-              setActive(options[active]);
-            }
-          }
+          if (activateEdge('first')) e.preventDefault();
           break;
         case 'End':
-          if (!list.hidden) {
-            e.preventDefault();
-            const v = visible();
-            if (v.length) {
-              active = options.indexOf(v[v.length - 1]);
-              setActive(options[active]);
-            }
-          }
+          if (activateEdge('last')) e.preventDefault();
           break;
         case 'Enter':
-          if (!list.hidden && active >= 0 && !options[active].hidden) {
-            e.preventDefault();
-            select(options[active]);
-          }
+          if (selectActive()) e.preventDefault();
           break;
         case 'Escape':
-          if (!list.hidden) {
-            e.preventDefault();
-            close();
-          }
+          if (closeIfOpen()) e.preventDefault();
           break;
         case 'Tab':
           close();
@@ -904,8 +977,8 @@ export function initPopover({ root } = {}) {
   const onClick = (e) => {
     const trigger = e.target.closest?.('[data-bronto-popover]');
-    if (trigger) {
-      const panel = document.getElementById(trigger.getAttribute('data-bronto-popover'));
+    if (trigger && host.contains(trigger)) {
+      const panel = byIdInHost(host, trigger.getAttribute('data-bronto-popover'));
       if (!panel) return;
       e.preventDefault();
       if (openPanel === panel) close();
@@ -926,12 +999,12 @@ export function initPopover({ root } = {}) {
   };
   return bindOnce(host, 'popover', () => {
-    host.addEventListener('click', onClick);
+    document.addEventListener('click', onClick);
     document.addEventListener('keydown', onKey);
     view?.addEventListener('scroll', onReflow, true);
     view?.addEventListener('resize', onReflow);
     return () => {
-      host.removeEventListener('click', onClick);
+      document.removeEventListener('click', onClick);
       document.removeEventListener('keydown', onKey);
       view?.removeEventListener('scroll', onReflow, true);
       view?.removeEventListener('resize', onReflow);

package/classes/index.d.ts CHANGED Viewed

@@ -232,6 +232,43 @@ export declare const cls: {
   readonly timeline: 'ui-timeline';
   readonly timelineItem: 'ui-timeline__item';
   readonly timelineTime: 'ui-timeline__time';
+  readonly report: 'ui-report';
+  readonly reportCompact: 'ui-report--compact';
+  readonly reportNumbered: 'ui-report--numbered';
+  readonly reportCover: 'ui-report__cover';
+  readonly reportCoverCompact: 'ui-report__cover--compact';
+  readonly reportHeader: 'ui-report__header';
+  readonly reportTitle: 'ui-report__title';
+  readonly reportSubtitle: 'ui-report__subtitle';
+  readonly reportMeta: 'ui-report__meta';
+  readonly reportToc: 'ui-report__toc';
+  readonly reportSummary: 'ui-report__summary';
+  readonly reportSection: 'ui-report__section';
+  readonly reportSectionUnnumbered: 'ui-report__section--unnumbered';
+  readonly reportSectionHead: 'ui-report__section-head';
+  readonly reportFinding: 'ui-report__finding';
+  readonly reportEvidence: 'ui-report__evidence';
+  readonly reportFigure: 'ui-report__figure';
+  readonly reportCaption: 'ui-report__caption';
+  readonly reportSources: 'ui-report__sources';
+  readonly reportAppendix: 'ui-report__appendix';
+  readonly reportFootnotes: 'ui-report__footnotes';
+  readonly chart: 'ui-chart';
+  readonly chartLegend: 'ui-chart__legend';
+  readonly chartSwatch: 'ui-chart__swatch';
+  readonly chartCaption: 'ui-chart__caption';
+  readonly chartPlot: 'ui-chart__plot';
+  readonly chartBar: 'ui-chart__bar';
+  readonly chartLabel: 'ui-chart__label';
+  readonly chartTrack: 'ui-chart__track';
+  readonly chartFill: 'ui-chart__fill';
+  readonly chartFallback: 'ui-chart__fallback';
+  readonly printOnly: 'ui-print-only';
+  readonly screenOnly: 'ui-screen-only';
+  readonly breakBefore: 'ui-break-before';
+  readonly breakAfter: 'ui-break-after';
+  readonly keep: 'ui-keep';
+  readonly printExact: 'ui-print-exact';
   readonly kbd: 'ui-kbd';
   readonly display: 'ui-display';
   readonly mono: 'ui-mono';
@@ -248,6 +285,9 @@ export declare const cls: {
   readonly animateFade: 'ui-animate-fade';
   readonly animateDot: 'ui-animate-dot';
   readonly animateMatrix: 'ui-animate-matrix';
+  readonly scrollProgress: 'ui-scroll-progress';
+  readonly scrollReveal: 'ui-scroll-reveal';
+  readonly vt: 'ui-vt';
   readonly appShell: 'ui-app-shell';
   readonly appShellFull: 'ui-app-shell--full';
   readonly appRail: 'ui-app-rail';

package/classes/index.js CHANGED Viewed

@@ -245,6 +245,44 @@ export const cls = Object.freeze({
   timeline: 'ui-timeline',
   timelineItem: 'ui-timeline__item',
   timelineTime: 'ui-timeline__time',
+  // report kit (opt-in css/report.css)
+  report: 'ui-report',
+  reportCompact: 'ui-report--compact',
+  reportNumbered: 'ui-report--numbered',
+  reportCover: 'ui-report__cover',
+  reportCoverCompact: 'ui-report__cover--compact',
+  reportHeader: 'ui-report__header',
+  reportTitle: 'ui-report__title',
+  reportSubtitle: 'ui-report__subtitle',
+  reportMeta: 'ui-report__meta',
+  reportToc: 'ui-report__toc',
+  reportSummary: 'ui-report__summary',
+  reportSection: 'ui-report__section',
+  reportSectionUnnumbered: 'ui-report__section--unnumbered',
+  reportSectionHead: 'ui-report__section-head',
+  reportFinding: 'ui-report__finding',
+  reportEvidence: 'ui-report__evidence',
+  reportFigure: 'ui-report__figure',
+  reportCaption: 'ui-report__caption',
+  reportSources: 'ui-report__sources',
+  reportAppendix: 'ui-report__appendix',
+  reportFootnotes: 'ui-report__footnotes',
+  chart: 'ui-chart',
+  chartLegend: 'ui-chart__legend',
+  chartSwatch: 'ui-chart__swatch',
+  chartCaption: 'ui-chart__caption',
+  chartPlot: 'ui-chart__plot',
+  chartBar: 'ui-chart__bar',
+  chartLabel: 'ui-chart__label',
+  chartTrack: 'ui-chart__track',
+  chartFill: 'ui-chart__fill',
+  chartFallback: 'ui-chart__fallback',
+  printOnly: 'ui-print-only',
+  screenOnly: 'ui-screen-only',
+  breakBefore: 'ui-break-before',
+  breakAfter: 'ui-break-after',
+  keep: 'ui-keep',
+  printExact: 'ui-print-exact',
   kbd: 'ui-kbd',
   display: 'ui-display',
   mono: 'ui-mono',
@@ -262,6 +300,9 @@ export const cls = Object.freeze({
   animateFade: 'ui-animate-fade',
   animateDot: 'ui-animate-dot',
   animateMatrix: 'ui-animate-matrix',
+  scrollProgress: 'ui-scroll-progress',
+  scrollReveal: 'ui-scroll-reveal',
+  vt: 'ui-vt',
   // admin shell (was the legacy .app-* vocabulary; promoted in 0.3.0)
   appShell: 'ui-app-shell',
   appShellFull: 'ui-app-shell--full',

package/classes/vscode.css-custom-data.json CHANGED Viewed

@@ -7,19 +7,19 @@
     },
     {
       "name": "--accent-1",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 8%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-2",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 16%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-3",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 32%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-4",
-      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 60%, var(--bg))`"
+      "description": "Global scale token. Value: `color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end))`"
     },
     {
       "name": "--accent-5",
@@ -29,6 +29,10 @@
       "name": "--accent-6",
       "description": "Global scale token. Value: `var(--accent-strong)`"
     },
+    {
+      "name": "--accent-ramp-end",
+      "description": "Theme token. Light: `#ffffff` · Dark: `#000000`"
+    },
     {
       "name": "--accent-soft",
       "description": "Theme token. Light: `color-mix(in srgb, var(--accent) 10%, transparent)` · Dark: `color-mix(in srgb, var(--accent) 14%, transparent)`"
@@ -43,7 +47,7 @@
     },
     {
       "name": "--bg",
-      "description": "Theme token. Light: `#f4f4f2` · Dark: `#000000`"
+      "description": "Theme token. Light: `#f4f4f2` · Dark: `#121212`"
     },
     {
       "name": "--bg-accent",
@@ -51,7 +55,7 @@
     },
     {
       "name": "--bg-elevated",
-      "description": "Theme token. Light: `#fbfbfa` · Dark: `#0a0a0a`"
+      "description": "Theme token. Light: `#fbfbfa` · Dark: `#181818`"
     },
     {
       "name": "--border",
@@ -199,11 +203,11 @@
     },
     {
       "name": "--line",
-      "description": "Theme token. Light: `#d8d8d4` · Dark: `#2a2a2a`"
+      "description": "Theme token. Light: `#d8d8d4` · Dark: `#383838`"
     },
     {
       "name": "--line-strong",
-      "description": "Theme token. Light: `#a8a8a2` · Dark: `#444444`"
+      "description": "Theme token. Light: `#a8a8a2` · Dark: `#555555`"
     },
     {
       "name": "--mono",
@@ -211,15 +215,15 @@
     },
     {
       "name": "--panel",
-      "description": "Theme token. Light: `#ffffff` · Dark: `#0c0c0c`"
+      "description": "Theme token. Light: `#ffffff` · Dark: `#1c1c1c`"
     },
     {
       "name": "--panel-soft",
-      "description": "Theme token. Light: `#ececea` · Dark: `#1a1a1a`"
+      "description": "Theme token. Light: `#ececea` · Dark: `#242424`"
     },
     {
       "name": "--panel-strong",
-      "description": "Theme token. Light: `#ffffff` · Dark: `#141414`"
+      "description": "Theme token. Light: `#ffffff` · Dark: `#222222`"
     },
     {
       "name": "--radius-lg",
@@ -327,7 +331,7 @@
     },
     {
       "name": "--text",
-      "description": "Theme token. Light: `#0a0a0a` · Dark: `#f2f2f2`"
+      "description": "Theme token. Light: `#0a0a0a` · Dark: `#e6e6e6`"
     },
     {
       "name": "--text-2xs",
@@ -339,7 +343,7 @@
     },
     {
       "name": "--text-dim",
-      "description": "Theme token. Light: `#686863` · Dark: `#858585`"
+      "description": "Theme token. Light: `#686863` · Dark: `#a0a0a0`"
     },
     {
       "name": "--text-lg",
@@ -351,7 +355,7 @@
     },
     {
       "name": "--text-soft",
-      "description": "Theme token. Light: `#353533` · Dark: `#c4c4c4`"
+      "description": "Theme token. Light: `#353533` · Dark: `#c8c8c8`"
     },
     {
       "name": "--text-xl",

package/css/disclosure.css CHANGED Viewed

@@ -128,6 +128,35 @@
   margin-block-start: 0;
 }
+/* Auto-height open/close for the native <details> accordion: animate the
+   content box from 0 to its intrinsic height. `interpolate-size:
+   allow-keywords` makes `auto` interpolable; `::details-content` exposes
+   the otherwise-anonymous content box; `content-visibility ... allow-discrete`
+   keeps the content laid out (and the dot marker's own rotation in sync)
+   through the close. Strict progressive enhancement — gated on
+   `@supports selector(::details-content)` (Chrome 131+/Safari 18.4+; Firefox
+   not yet) so engines without it just snap open/closed exactly as before —
+   and on `prefers-reduced-motion: no-preference`. */
+@supports selector(::details-content) {
+  @media (prefers-reduced-motion: no-preference) {
+    .ui-accordion {
+      interpolate-size: allow-keywords;
+    }
+    .ui-accordion__item::details-content {
+      block-size: 0;
+      overflow: hidden;
+      transition:
+        block-size var(--duration-base) var(--ease-out),
+        content-visibility var(--duration-base) allow-discrete;
+    }
+    .ui-accordion__item[open]::details-content {
+      block-size: auto;
+    }
+  }
+}
 /* --- Segmented control — CSS-only radio group --- */
 .ui-segmented {

package/css/dots.css CHANGED Viewed

@@ -129,6 +129,8 @@
   block-size: var(--icon-size, 1em);
   background: currentcolor;
   vertical-align: -0.125em;
+  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari still needs the prefixed mask property. */
+  -webkit-mask: var(--icon-mask) center / contain no-repeat;
   mask: var(--icon-mask) center / contain no-repeat;
 }