npm - @ponchia/ui - Versions diffs - 0.6.0 → 0.6.3 - Mend

@ponchia/ui 0.6.0 → 0.6.3

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 (156) hide show

package/CHANGELOG.md +64 -4
package/README.md +1 -1
package/annotations/index.d.ts.map +1 -1
package/annotations/index.js +36 -33
package/behaviors/carousel.d.ts +28 -0
package/behaviors/carousel.d.ts.map +1 -0
package/behaviors/carousel.js +3 -0
package/behaviors/combobox.d.ts +40 -0
package/behaviors/combobox.d.ts.map +1 -0
package/behaviors/combobox.js +71 -20
package/behaviors/command.d.ts +41 -0
package/behaviors/command.d.ts.map +1 -0
package/behaviors/command.js +9 -0
package/behaviors/connectors.d.ts +17 -0
package/behaviors/connectors.d.ts.map +1 -0
package/behaviors/connectors.js +3 -0
package/behaviors/crosshair.d.ts +42 -0
package/behaviors/crosshair.d.ts.map +1 -0
package/behaviors/crosshair.js +19 -1
package/behaviors/dialog.d.ts +20 -0
package/behaviors/dialog.d.ts.map +1 -0
package/behaviors/dialog.js +3 -0
package/behaviors/disclosure.d.ts +10 -0
package/behaviors/disclosure.d.ts.map +1 -0
package/behaviors/disclosure.js +3 -0
package/behaviors/dismissible.d.ts +10 -0
package/behaviors/dismissible.d.ts.map +1 -0
package/behaviors/dismissible.js +3 -0
package/behaviors/forms.d.ts +27 -0
package/behaviors/forms.d.ts.map +1 -0
package/behaviors/forms.js +18 -5
package/behaviors/glyph.d.ts +14 -0
package/behaviors/glyph.d.ts.map +1 -0
package/behaviors/glyph.js +24 -0
package/behaviors/index.d.ts +31 -237
package/behaviors/index.d.ts.map +1 -0
package/behaviors/index.js +17 -0
package/behaviors/inert.d.ts +20 -0
package/behaviors/inert.d.ts.map +1 -0
package/behaviors/inert.js +46 -0
package/behaviors/internal.d.ts +25 -0
package/behaviors/internal.d.ts.map +1 -0
package/behaviors/internal.js +30 -1
package/behaviors/legend.d.ts +35 -0
package/behaviors/legend.d.ts.map +1 -0
package/behaviors/legend.js +9 -0
package/behaviors/menu.d.ts +16 -0
package/behaviors/menu.d.ts.map +1 -0
package/behaviors/menu.js +3 -0
package/behaviors/modal.d.ts +41 -0
package/behaviors/modal.d.ts.map +1 -0
package/behaviors/modal.js +124 -0
package/behaviors/popover.d.ts +28 -0
package/behaviors/popover.d.ts.map +1 -0
package/behaviors/popover.js +17 -17
package/behaviors/spotlight.d.ts +17 -0
package/behaviors/spotlight.d.ts.map +1 -0
package/behaviors/spotlight.js +3 -0
package/behaviors/table.d.ts +36 -0
package/behaviors/table.d.ts.map +1 -0
package/behaviors/table.js +48 -8
package/behaviors/tabs.d.ts +20 -0
package/behaviors/tabs.d.ts.map +1 -0
package/behaviors/tabs.js +3 -0
package/behaviors/theme.d.ts +54 -0
package/behaviors/theme.d.ts.map +1 -0
package/behaviors/theme.js +17 -0
package/behaviors/toast.d.ts +49 -0
package/behaviors/toast.d.ts.map +1 -0
package/behaviors/toast.js +34 -2
package/classes/classes.json +683 -13
package/classes/index.d.ts +106 -2
package/classes/index.js +249 -65
package/connectors/index.d.ts +12 -0
package/connectors/index.d.ts.map +1 -1
package/connectors/index.js +23 -2
package/css/app.css +26 -0
package/css/bullet.css +108 -0
package/css/code.css +98 -0
package/css/content.css +15 -2
package/css/crosshair.css +7 -7
package/css/diff.css +153 -0
package/css/disclosure.css +18 -4
package/css/dots.css +37 -7
package/css/feedback.css +39 -7
package/css/forms.css +71 -3
package/css/legend.css +5 -2
package/css/motion.css +79 -14
package/css/overlay.css +59 -2
package/css/primitives.css +67 -8
package/css/report.css +40 -0
package/css/sidenote.css +67 -0
package/css/spark.css +62 -0
package/css/table.css +9 -2
package/css/term.css +110 -0
package/css/textref.css +63 -0
package/css/toc.css +91 -0
package/css/tokens.css +14 -1
package/css/tree.css +134 -0
package/dist/bronto.css +1 -1
package/dist/css/analytical.css +1 -1
package/dist/css/app.css +1 -1
package/dist/css/bullet.css +1 -0
package/dist/css/code.css +1 -0
package/dist/css/content.css +1 -1
package/dist/css/crosshair.css +1 -1
package/dist/css/diff.css +1 -0
package/dist/css/disclosure.css +1 -1
package/dist/css/dots.css +1 -1
package/dist/css/feedback.css +1 -1
package/dist/css/forms.css +1 -1
package/dist/css/legend.css +1 -1
package/dist/css/motion.css +1 -1
package/dist/css/overlay.css +1 -1
package/dist/css/primitives.css +1 -1
package/dist/css/report.css +1 -1
package/dist/css/sidenote.css +1 -0
package/dist/css/spark.css +1 -0
package/dist/css/table.css +1 -1
package/dist/css/term.css +1 -0
package/dist/css/textref.css +1 -0
package/dist/css/toc.css +1 -0
package/dist/css/tokens.css +1 -1
package/dist/css/tree.css +1 -0
package/docs/annotations.md +39 -0
package/docs/architecture.md +2 -3
package/docs/bullet.md +78 -0
package/docs/code.md +76 -0
package/docs/d2.md +4 -3
package/docs/diff.md +146 -0
package/docs/legends.md +8 -4
package/docs/mermaid.md +21 -4
package/docs/reference.md +127 -8
package/docs/reporting.md +35 -14
package/docs/sidenote.md +64 -0
package/docs/spark.md +78 -0
package/docs/stability.md +1 -0
package/docs/term.md +81 -0
package/docs/textref.md +78 -0
package/docs/theming.md +44 -5
package/docs/toc.md +83 -0
package/docs/tree.md +74 -0
package/docs/usage.md +264 -23
package/docs/vega.md +22 -3
package/glyphs/glyphs.js +7 -1
package/llms.txt +159 -13
package/package.json +47 -7
package/qwik/index.d.ts +4 -2
package/qwik/index.d.ts.map +1 -1
package/qwik/index.js +10 -0
package/react/index.d.ts +4 -2
package/react/index.d.ts.map +1 -1
package/react/index.js +6 -0
package/solid/index.d.ts +6 -2
package/solid/index.d.ts.map +1 -1
package/solid/index.js +6 -0

package/behaviors/tabs.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,oCAHW,OAAO,eAAe,EAAE,YAAY,GAClC,OAAO,eAAe,EAAE,OAAO,CAuF3C"}

package/behaviors/tabs.js CHANGED Viewed

@@ -14,6 +14,9 @@ import { hasDom, resolveHost, noop, bindOnce, nextFieldUid, collectHosts } from
  * `initTabs` is guaranteed to run client-side — without it the panels
  * stay hidden with no keyboard/pointer way to reveal them. Prefer
  * authoring all panels visible and letting `initTabs` add `hidden`.
+ *
+ * @param {import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initTabs({ root } = {}) {
   if (!hasDom()) return noop;

package/behaviors/theme.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+/**
+ * @typedef {object} ThemeStorageOpts
+ * @property {string} [storageKey] localStorage key for the persisted theme. Default: `"bronto-theme"`.
+ *
+ * @typedef {ThemeStorageOpts & { root?: Element }} ApplyThemeOpts
+ *   `root` is the element to set `data-theme` on. Default: `<html>`.
+ *
+ * @typedef {object} ThemeChangeDetail
+ * @property {'light' | 'dark'} theme `bronto:themechange` CustomEvent detail.
+ */
+/**
+ * Apply the persisted theme to <html data-theme>. Call as early as
+ * possible (an inline module in <head>) to avoid a flash before the
+ * toggle wires up. No stored value → leaves prefers-color-scheme to act.
+ *
+ * @param {ApplyThemeOpts} [opts]
+ * @returns {void}
+ */
+export function applyStoredTheme({ storageKey, root }?: ApplyThemeOpts): void;
+/**
+ * Wire `[data-bronto-theme-toggle]` controls. Click toggles light/dark,
+ * persists to localStorage, and **always** sets `data-theme` on <html>
+ * (a theme is document-global). State is reflected via `aria-pressed`
+ * and a `bronto:themechange` CustomEvent ({ detail: { theme } }) is
+ * dispatched on <html> so consumers can sync their own UI without
+ * racing the click handler. A control may set
+ * `data-bronto-theme-toggle="dark"` to force a specific theme.
+ *
+ * `root` scopes event delegation and which controls are queried/reflected
+ * (default `document`); it does not change where the theme is applied.
+ *
+ * @param {ThemeStorageOpts & import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function initThemeToggle({ storageKey, root }?: ThemeStorageOpts & import("./internal.js").DelegateOpts): import("./internal.js").Cleanup;
+export type ThemeStorageOpts = {
+    /**
+     * localStorage key for the persisted theme. Default: `"bronto-theme"`.
+     */
+    storageKey?: string | undefined;
+};
+/**
+ * `root` is the element to set `data-theme` on. Default: `<html>`.
+ */
+export type ApplyThemeOpts = ThemeStorageOpts & {
+    root?: Element;
+};
+export type ThemeChangeDetail = {
+    /**
+     * `bronto:themechange` CustomEvent detail.
+     */
+    theme: "light" | "dark";
+};
+//# sourceMappingURL=theme.d.ts.map

package/behaviors/theme.d.ts.map ADDED Viewed

	@@ -0,0 +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"}

package/behaviors/theme.js CHANGED Viewed

@@ -2,10 +2,24 @@ import { hasDom, resolveHost, noop, bindOnce } from './internal.js';
 const THEMES = ['light', 'dark'];
+/**
+ * @typedef {object} ThemeStorageOpts
+ * @property {string} [storageKey] localStorage key for the persisted theme. Default: `"bronto-theme"`.
+ *
+ * @typedef {ThemeStorageOpts & { root?: Element }} ApplyThemeOpts
+ *   `root` is the element to set `data-theme` on. Default: `<html>`.
+ *
+ * @typedef {object} ThemeChangeDetail
+ * @property {'light' | 'dark'} theme `bronto:themechange` CustomEvent detail.
+ */
 /**
  * Apply the persisted theme to <html data-theme>. Call as early as
  * possible (an inline module in <head>) to avoid a flash before the
  * toggle wires up. No stored value → leaves prefers-color-scheme to act.
+ *
+ * @param {ApplyThemeOpts} [opts]
+ * @returns {void}
  */
 export function applyStoredTheme({ storageKey = 'bronto-theme', root } = {}) {
   if (!hasDom()) return;
@@ -31,6 +45,9 @@ export function applyStoredTheme({ storageKey = 'bronto-theme', root } = {}) {
  *
  * `root` scopes event delegation and which controls are queried/reflected
  * (default `document`); it does not change where the theme is applied.
+ *
+ * @param {ThemeStorageOpts & import('./internal.js').DelegateOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function initThemeToggle({ storageKey = 'bronto-theme', root } = {}) {
   if (!hasDom()) return noop;

package/behaviors/toast.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * @typedef {object} ToastOpts
+ * @property {'accent' | 'success' | 'warning' | 'danger' | 'info'} [tone] Status tone — maps to `ui-toast--<tone>`.
+ * @property {string} [title] Optional uppercase label rendered above the message.
+ * @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.
+ */
+/**
+ * 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).
+ *
+ * @param {string} message
+ * @param {ToastOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
+ */
+export function toast(message: string, { tone, title, duration, assertive, closable }?: ToastOpts): import("./internal.js").Cleanup;
+export type ToastOpts = {
+    /**
+     * Status tone — maps to `ui-toast--<tone>`.
+     */
+    tone?: "accent" | "success" | "warning" | "danger" | "info" | undefined;
+    /**
+     * Optional uppercase label rendered above the message.
+     */
+    title?: string | undefined;
+    /**
+     * Auto-dismiss delay in ms. `0` keeps it until dismissed. Default: `4000`.
+     */
+    duration?: number | undefined;
+    /**
+     * Route to the assertive live region so AT interrupts immediately. Defaults to `true` when `tone === 'danger'`.
+     */
+    assertive?: boolean | undefined;
+    /**
+     * Render a dismiss button on the toast.
+     */
+    closable?: boolean | undefined;
+};
+//# sourceMappingURL=toast.d.ts.map

package/behaviors/toast.d.ts.map ADDED Viewed

	@@ -0,0 +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"}

package/behaviors/toast.js CHANGED Viewed

@@ -25,7 +25,13 @@ function toastStack(isAssertive) {
     stack = document.createElement('div');
     stack.className = isAssertive ? 'ui-toast-stack ui-toast-stack--assertive' : 'ui-toast-stack';
     stack.setAttribute('aria-live', isAssertive ? 'assertive' : 'polite');
-    if (isAssertive) stack.setAttribute('role', 'alert');
+    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 diff. (component audit C38.)
+      stack.setAttribute('aria-atomic', 'true');
+    }
     document.body.appendChild(stack);
   }
   return { stack, fresh };
@@ -57,7 +63,12 @@ function toastElement(message, { tone, title }) {
   }
   el.className = validTone ? `ui-toast ui-toast--${validTone}` : 'ui-toast';
   // No per-item role: the stack itself is the live region; a nested
-  // live region risks double announcement in some SRs.
+  // live region risks double announcement in some SRs. But mark the toast
+  // aria-atomic so a *titled* toast announces title + message as one unit, not
+  // disjointly — and unlike aria-atomic on the polite STACK (which would re-read
+  // every resident toast on each new one), scoping it to the toast keeps sibling
+  // toasts out of the announcement. (component audit C23.)
+  el.setAttribute('aria-atomic', 'true');
   if (title) {
     const t = document.createElement('p');
     t.className = 'ui-toast__title';
@@ -110,6 +121,15 @@ function addToastClose(el, dismiss) {
   el.appendChild(close);
 }
+/**
+ * @typedef {object} ToastOpts
+ * @property {'accent' | 'success' | 'warning' | 'danger' | 'info'} [tone] Status tone — maps to `ui-toast--<tone>`.
+ * @property {string} [title] Optional uppercase label rendered above the message.
+ * @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.
+ */
 /**
  * Push a transient toast into a shared, screen-anchored stack. The stack
  * is the `aria-live="polite"` region: it is created once, appended to
@@ -122,6 +142,10 @@ function addToastClose(el, dismiss) {
  * 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).
+ *
+ * @param {string} message
+ * @param {ToastOpts} [opts]
+ * @returns {import('./internal.js').Cleanup}
  */
 export function toast(message, { tone, title, duration = 4000, assertive, closable } = {}) {
   if (!hasDom()) return noop;
@@ -158,6 +182,14 @@ 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.
+  // 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 fn. (component audit C37.)
+  if (duration === 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);
   return dismiss;