@ulu/frontend 0.2.0-beta.8 → 0.2.1

package/README.dev.md

@@ -1,22 +1,45 @@
-# Development
+# Development Overview
 
-## Dist
+## System Architecture
 
-- Dist can be used standalone (browser, etc) (stylesheet with everything currently)
-- Used for examples in docs
-- Rebuild by running `npm run build`
+The library is designed with a clear separation between styles (SCSS) and behavior (JavaScript). They are loosely coupled, interacting through CSS classes and data attributes in the HTML.
 
-## Docs
+*   **SCSS:** Provides the styling layer. It is highly modular, with global settings (color, typography), base element styles, and individual component styles. The file `lib/scss/stylesheets/full.scss` compiles everything into a single, comprehensive stylesheet for easy consumption.
 
-## Updating SCSS
+*   **JavaScript:** Provides interactivity. It is also modular, with `core` logic, `utility` functions, and `ui` components. The JavaScript is designed to be "tree-shakable," so a project using this library will only bundle the code for the components it actually uses.
 
-- Update sassdocs markdown by `npm run docs:update:scss`
+### How They Interact
 
-## Updating JS Docs
+1.  **Component Structure:** Components are composed of SCSS and JavaScript files. A component might be SCSS-only (providing styles for a static element), JavaScript-only (providing some background logic), or a pair of both that work together (e.g., `_tabs.scss` and `tabs.js`).
 
-- Run `npm run docs:build:js` to update jsdoc markdown
-- Run `npm run types` to update Typescript declarations (extracted from JS docs)
+2.  **Initialization:** For components with JavaScript, an `init` function (e.g., `tabsInit`) is typically provided. This function scans the DOM for specific elements, usually identified by a `data-ulu-component` attribute.
 
-## Building/Deploying
+3.  **Styling Agnosticism:** A key design principle is that the JavaScript is styling-agnostic. It identifies and interacts with elements exclusively through `data-ulu-*` attributes, not CSS classes. This intentional separation means you can use the provided JavaScript functionality with completely custom component styling, simply by structuring your HTML with the correct data attributes.
 
-- Use `npm run docs:build`
+4.  **Activation:** When an `init` function finds its corresponding component in the HTML, it instantiates a JavaScript class to manage its state and handle user interactions (like clicks or keyboard events).
+
+5.  **State & Styling:** While the JavaScript itself is not tied to the SCSS styling, it does manage state by adding or removing state-based CSS classes (e.g., `.is-active`). The library's SCSS uses these classes to apply styles, and you can use them in your own stylesheets as well.
+
+In short, the SCSS defines what components and their different states *look like*, while the JavaScript is responsible for activating components and changing their states based on user interaction. This creates a flexible and efficient system.
+
+
+## Benchmark Notes
+
+### Javascript
+
+- Old Vite 4 
+  - No build.target
+  - /dist/es 183kb (js, types, etc)
+  - Included aria-tablist dep
+  - Wasn't minified
+- Current Build (Vite 7)
+  - Javascript Bundle
+    - Uncompressed: ~74.7 kB
+    - Gzip: ~30 kB (less when actually bundled with tree-shaking)
+    - About the size of jquery or a small image
+  - CSS Bundle
+    - Uncompressed: ~139 kB
+    - Gzip: ~21 kB (compresses well)
+    - In a real project not using every scss module
+      - Uncompressed: ~80-100 kB
+      - Gzip: ~13-16 kB

package/README.md

@@ -6,11 +6,13 @@ Versatile frontend toolkit designed for a variety of web development scenarios.
 
 ## key Features
 
+- **Lightweight Footprint:** The core library is very small, with the full UMD JavaScript bundle at ~20kb (gzipped) and the complete CSS bundle at ~19kb (gzipped). With tree-shaking and modular SCSS, the final footprint in a project is often even smaller.
 - **Target Environment:** The JavaScript "UI" modules are specifically tailored for traditional sites, such as static websites and CMS-driven platforms. However, the comprehensive SCSS modules are fully compatible and can be utilized in modern JavaScript applications built with frameworks like React or Vue.
 - **Configuration & Consistency:** The system's main goal is to allow for highly flexible, per-site configuration while maintaining a consistent set of accessible and high-quality components.
 - **Flexible Usage:** This library is designed as a toolkit, offering the flexibility to be used as a complete stylesheet solution or to pick and choose individual SCSS modules and components as needed.
+- **Styling Agnostic JavaScript:** The JavaScript components use `data-*` attributes for behavior, not CSS classes. This means you can use the powerful JavaScript-driven interactions with your own custom-styled components.
 - **Integration Adaptability:** All SCSS base selectors (for components, utilities, etc.) can be easily adjusted, making it highly adaptable for seamless integration into pre-existing systems and diverse development environments.
-- API Documentation for both SCSS and JS with examples
+- **API Documentation:** API Documentation for both SCSS and JS with demos
 
 ## Related Links
 

package/dist/es/core/events.js

@@ -1,45 +1,56 @@
-import { debounce as s } from "@ulu/utils/performance.js";
-import { isBrowser as a } from "@ulu/utils/browser/dom.js";
-a() && (u(), f());
-const i = {
+var u = Object.defineProperty;
+var d = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
+var s = (e, n, t) => n in e ? u(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t, a = (e, n) => {
+  for (var t in n || (n = {}))
+    f.call(n, t) && s(e, t, n[t]);
+  if (d)
+    for (var t of d(n))
+      v.call(n, t) && s(e, t, n[t]);
+  return e;
+};
+import { debounce as l } from "@ulu/utils/performance.js";
+import { isBrowser as p } from "@ulu/utils/browser/dom.js";
+p() && (b(), m());
+const r = {
   pageModified(e) {
-    e.dispatchEvent(n("pageModified"));
+    e.dispatchEvent(i("pageModified"));
   },
   pageResized(e) {
-    e.dispatchEvent(n("pageResized"));
+    e.dispatchEvent(i("pageResized"));
   },
   beforePrint(e) {
-    e.dispatchEvent(n("beforePrint"));
+    e.dispatchEvent(i("beforePrint"));
   },
   afterPrint(e) {
-    e.dispatchEvent(n("afterPrint"));
+    e.dispatchEvent(i("afterPrint"));
   }
-}, c = Object.keys(i);
-function r(e, t) {
-  i[e] ? i[e](t) : console.warn(`Unable to dispatch non-core event: ${e}`);
+}, E = Object.keys(r);
+function o(e, n) {
+  r[e] ? r[e](n) : console.warn(`Unable to dispatch non-core event: ${e}`);
 }
-function o(e) {
+function c(e) {
   return "ulu:" + e;
 }
-function p(e) {
-  return c.includes(e) ? o(e) : (console.warn(`'${e}' is not a valid core event type.`), null);
+function h(e) {
+  return E.includes(e) ? c(e) : (console.warn(`'${e}' is not a valid core event type.`), null);
 }
-function n(e, t = null, d = { bubbles: !0 }) {
-  return new CustomEvent(o(e), { detail: t, ...d });
+function i(e, n = null, t = { bubbles: !0 }) {
+  return new CustomEvent(c(e), a({ detail: n }, t));
 }
-function u() {
-  window.addEventListener("resize", s(() => r("pageResized", document), 250));
+function b() {
+  window.addEventListener("resize", l(() => o("pageResized", document), 250));
 }
-function f() {
+function m() {
   window.addEventListener("beforeprint", () => {
-    r("beforePrint", document);
+    o("beforePrint", document);
   }), window.addEventListener("afterprint", () => {
-    r("afterPrint", document);
+    o("afterPrint", document);
   });
 }
 export {
-  n as createUluEvent,
-  r as dispatchCoreEvent,
-  p as getCoreEventName,
-  o as getUluEventName
+  i as createUluEvent,
+  o as dispatchCoreEvent,
+  h as getCoreEventName,
+  c as getUluEventName
 };

package/dist/es/core/settings.js

@@ -1,4 +1,15 @@
-const c = {
+var a = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var o = (n, t, s) => t in n ? a(n, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[t] = s, c = (n, t) => {
+  for (var s in t || (t = {}))
+    g.call(t, s) && o(n, s, t[s]);
+  if (i)
+    for (var s of i(t))
+      u.call(t, s) && o(n, s, t[s]);
+  return n;
+};
+const r = {
   iconClassClose: "css-icon css-icon--close",
   iconClassDragX: "css-icon css-icon--drag-x",
   iconClassDragBoth: "css-icon css-icon--drag-both",
@@ -6,39 +17,39 @@ const c = {
   iconClassNext: "css-icon  css-icon--angle-right",
   cssvarPrefix: ""
 };
-let t = { ...c };
-function o() {
-  return { ...c };
+let e = c({}, r);
+function S() {
+  return c({}, r);
 }
-function r(n) {
-  Object.assign(t, n);
+function d(n) {
+  Object.assign(e, n);
 }
-function a() {
-  return { ...t };
+function p() {
+  return c({}, e);
 }
-function i(n) {
-  if (!t.hasOwnProperty(n)) {
+function l(n) {
+  if (!e.hasOwnProperty(n)) {
     console.warn(`Attempted to access non-existent setting: ${n}`);
     return;
   }
-  return t[n];
+  return e[n];
 }
-function g(n, s) {
-  t[n] = s;
+function C(n, t) {
+  e[n] = t;
 }
-function u(n, s) {
+function x(n, t) {
   return {
     toString() {
-      const e = i(n);
-      return s ? s(e) : e;
+      const s = l(n);
+      return t ? t(s) : s;
     }
   };
 }
 export {
-  o as getDefaultSettings,
-  i as getSetting,
-  a as getSettings,
-  g as updateSetting,
-  r as updateSettings,
-  u as wrapSettingString
+  S as getDefaultSettings,
+  l as getSetting,
+  p as getSettings,
+  C as updateSetting,
+  d as updateSettings,
+  x as wrapSettingString
 };

package/dist/es/index.js

@@ -4,120 +4,124 @@ import { ComponentInitializer as m } from "./core/component.js";
 import { BreakpointManager as I } from "./ui/breakpoints.js";
 import { Collapsible as z } from "./ui/collapsible.js";
 import { init as D, initializer as C, setupGroup as v } from "./ui/details-group.js";
-import { baseAttribute as y, closeAttribute as T, defaults as B, getDialogOptions as h, init as A, initializer as P, setDefaults as k, setupDialog as G, setupTrigger as L } from "./ui/dialog.js";
-import { Flipcard as w, init as U, initializer as V } from "./ui/flipcard.js";
-import { init as M, initializer as O } from "./ui/grid.js";
+import { baseAttribute as T, closeAttribute as y, defaults as B, getDialogOptions as P, init as h, initializer as A, setDefaults as k, setupDialog as G, setupTrigger as L } from "./ui/dialog.js";
+import { Flipcard as M, init as w, initializer as U } from "./ui/flipcard.js";
+import { init as F, initializer as O } from "./ui/grid.js";
 import { buildModal as N, defaults as R, init as W, initializer as K, setDefaults as j } from "./ui/modal-builder.js";
-import { OverflowScroller as J } from "./ui/overflow-scroller.js";
-import { createPager as X } from "./ui/overflow-scroller-pager.js";
-import { init as Z } from "./ui/page.js";
-import { Popover as $, getContentByTrigger as ee, init as te, initializer as ie, instances as re, resolve as ae } from "./ui/popover.js";
-import { attrs as se, init as le } from "./ui/print-details.js";
-import { init as pe } from "./ui/print.js";
-import { attachHandlers as ue, defaults as fe, init as de, initializer as me, setDefaults as xe, setupProxy as Ie } from "./ui/proxy-click.js";
-import { Resizer as ze } from "./ui/resizer.js";
-import { init as De, initializer as Ce } from "./ui/scroll-slider.js";
-import { Scrollpoint as be, init as ye, initializer as Te } from "./ui/scrollpoint.js";
-import { Slider as he, init as Ae, initializer as Pe, setupSlider as ke } from "./ui/slider.js";
-import { init as Le, initializer as Ee, instances as we, setup as Ue } from "./ui/tabs.js";
-import { defaults as Fe, init as Me, initializer as Oe, setDefaults as He, setupToggle as Ne } from "./ui/theme-toggle.js";
-import { Tooltip as We, init as Ke, initializer as je } from "./ui/tooltip.js";
-import { log as Je, logError as Qe, logWarning as Xe, set as Ye } from "./utils/class-logger.js";
-import { dataAttributeToDatasetKey as _e, resolveClasses as $e, setPositionClasses as et } from "./utils/dom.js";
-import { FileSave as it } from "./utils/file-save.js";
-import { createFloatingUi as at, defaults as ot } from "./utils/floating-ui.js";
-import { configureIcons as lt } from "./utils/font-awesome.js";
-import { ensureId as pt, newId as gt } from "./utils/id.js";
-import { pauseVideos as ft, prepVideos as dt } from "./utils/pause-youtube-video.js";
+import { ProgrammaticModalManager as J } from "./ui/programmatic-modal.js";
+import { OverflowScroller as X } from "./ui/overflow-scroller.js";
+import { createPager as Z } from "./ui/overflow-scroller-pager.js";
+import { init as $ } from "./ui/page.js";
+import { Popover as te, getContentByTrigger as ie, init as re, initializer as ae, instances as oe, resolve as se } from "./ui/popover.js";
+import { attrs as ne, init as pe } from "./ui/print-details.js";
+import { init as ue } from "./ui/print.js";
+import { attachHandlers as de, defaults as me, init as xe, initializer as Ie, setDefaults as ce, setupProxy as ze } from "./ui/proxy-click.js";
+import { Resizer as De } from "./ui/resizer.js";
+import { init as ve, initializer as be } from "./ui/scroll-slider.js";
+import { Scrollpoint as ye, init as Be, initializer as Pe } from "./ui/scrollpoint.js";
+import { Slider as Ae, init as ke, initializer as Ge, setupSlider as Le } from "./ui/slider.js";
+import { TabManager as Me } from "./ui/tab-manager.js";
+import { init as Ue, initializer as Ve, instances as Fe, setup as Oe } from "./ui/tabs.js";
+import { defaults as Ne, init as Re, initializer as We, setDefaults as Ke, setupToggle as je } from "./ui/theme-toggle.js";
+import { Tooltip as Je, init as Qe, initializer as Xe } from "./ui/tooltip.js";
+import { log as Ze, logError as _e, logWarning as $e, set as et } from "./utils/class-logger.js";
+import { dataAttributeToDatasetKey as it, resolveClasses as rt, setPositionClasses as at } from "./utils/dom.js";
+import { FileSave as st } from "./utils/file-save.js";
+import { createFloatingUi as nt, defaults as pt } from "./utils/floating-ui.js";
+import { configureIcons as ut } from "./utils/font-awesome.js";
+import { ensureId as dt, newId as mt } from "./utils/id.js";
+import { pauseVideos as It, prepVideos as ct } from "./utils/pause-youtube-video.js";
 export {
   I as BreakpointManager,
   z as Collapsible,
   m as ComponentInitializer,
-  it as FileSave,
-  w as Flipcard,
-  J as OverflowScroller,
-  $ as Popover,
-  ze as Resizer,
-  be as Scrollpoint,
-  he as Slider,
-  We as Tooltip,
-  Je as classLoggerLog,
-  Qe as classLoggerLogError,
-  Xe as classLoggerLogWarning,
-  Ye as classLoggerSet,
-  at as createFloatingUi,
+  st as FileSave,
+  M as Flipcard,
+  X as OverflowScroller,
+  te as Popover,
+  J as ProgrammaticModalManager,
+  De as Resizer,
+  ye as Scrollpoint,
+  Ae as Slider,
+  Me as TabManager,
+  Je as Tooltip,
+  Ze as classLoggerLog,
+  _e as classLoggerLogError,
+  $e as classLoggerLogWarning,
+  et as classLoggerSet,
+  nt as createFloatingUi,
   i as createUluEvent,
-  _e as dataAttributeToDatasetKey,
+  it as dataAttributeToDatasetKey,
   D as detailsGroupInit,
   C as detailsGroupInitializer,
   v as detailsGroupSetupGroup,
-  y as dialogBaseAttribute,
-  T as dialogCloseAttribute,
+  T as dialogBaseAttribute,
+  y as dialogCloseAttribute,
   B as dialogDefaults,
-  h as dialogGetDialogOptions,
-  A as dialogInit,
-  P as dialogInitializer,
+  P as dialogGetDialogOptions,
+  h as dialogInit,
+  A as dialogInitializer,
   k as dialogSetDefaults,
   G as dialogSetupDialog,
   L as dialogSetupTrigger,
   r as dispatchCoreEvent,
-  pt as ensureId,
-  U as flipcardInit,
-  V as flipcardInitializer,
-  ot as floatingUiDefaults,
-  lt as fontAwesomeConfigureIcons,
+  dt as ensureId,
+  w as flipcardInit,
+  U as flipcardInitializer,
+  pt as floatingUiDefaults,
+  ut as fontAwesomeConfigureIcons,
   a as getCoreEventName,
   l as getDefaultSettings,
   n as getSetting,
   p as getSettings,
   o as getUluEventName,
-  M as gridInit,
+  F as gridInit,
   O as gridInitializer,
   N as modalBuilderBuildModal,
   R as modalBuilderDefaults,
   W as modalBuilderInit,
   K as modalBuilderInitializer,
   j as modalBuilderSetDefaults,
-  gt as newId,
-  X as overflowScrollerCreatePager,
-  Z as pageInit,
-  ee as popoverGetContentByTrigger,
-  te as popoverInit,
-  ie as popoverInitializer,
-  re as popoverInstances,
-  ae as popoverResolve,
-  se as printDetailsAttrs,
-  le as printDetailsInit,
-  pe as printInit,
-  ue as proxyClickAttachHandlers,
-  fe as proxyClickDefaults,
-  de as proxyClickInit,
-  me as proxyClickInitializer,
-  xe as proxyClickSetDefaults,
-  Ie as proxyClickSetupProxy,
-  $e as resolveClasses,
-  De as scrollSliderInit,
-  Ce as scrollSliderInitializer,
-  ye as scrollpointInit,
-  Te as scrollpointInitializer,
-  et as setPositionClasses,
-  Ae as sliderInit,
-  Pe as sliderInitializer,
-  ke as sliderSetupSlider,
-  Le as tabsInit,
-  Ee as tabsInitializer,
-  we as tabsInstances,
-  Ue as tabsSetup,
-  Fe as themeToggleDefaults,
-  Me as themeToggleInit,
-  Oe as themeToggleInitializer,
-  He as themeToggleSetDefaults,
-  Ne as themeToggleSetupToggle,
-  Ke as tooltipInit,
-  je as tooltipInitializer,
+  mt as newId,
+  Z as overflowScrollerCreatePager,
+  $ as pageInit,
+  ie as popoverGetContentByTrigger,
+  re as popoverInit,
+  ae as popoverInitializer,
+  oe as popoverInstances,
+  se as popoverResolve,
+  ne as printDetailsAttrs,
+  pe as printDetailsInit,
+  ue as printInit,
+  de as proxyClickAttachHandlers,
+  me as proxyClickDefaults,
+  xe as proxyClickInit,
+  Ie as proxyClickInitializer,
+  ce as proxyClickSetDefaults,
+  ze as proxyClickSetupProxy,
+  rt as resolveClasses,
+  ve as scrollSliderInit,
+  be as scrollSliderInitializer,
+  Be as scrollpointInit,
+  Pe as scrollpointInitializer,
+  at as setPositionClasses,
+  ke as sliderInit,
+  Ge as sliderInitializer,
+  Le as sliderSetupSlider,
+  Ue as tabsInit,
+  Ve as tabsInitializer,
+  Fe as tabsInstances,
+  Oe as tabsSetup,
+  Ne as themeToggleDefaults,
+  Re as themeToggleInit,
+  We as themeToggleInitializer,
+  Ke as themeToggleSetDefaults,
+  je as themeToggleSetupToggle,
+  Qe as tooltipInit,
+  Xe as tooltipInitializer,
   g as updateSetting,
   u as updateSettings,
   f as wrapSettingString,
-  ft as youtubePauseVideos,
-  dt as youtubePrepVideos
+  It as youtubePauseVideos,
+  ct as youtubePrepVideos
 };

package/dist/es/ui/dialog.js

@@ -1,8 +1,19 @@
-import { getUluEventName as f } from "../core/events.js";
-import { ComponentInitializer as v } from "../core/component.js";
-import { preventScroll as h, wasClickOutside as E } from "@ulu/utils/browser/dom.js";
-import { prepVideos as O, pauseVideos as S } from "../utils/pause-youtube-video.js";
-const b = "data-ulu-dialog", i = new v({ type: "dialog", baseAttribute: b }), F = i.getAttribute("close"), V = {
+var O = Object.defineProperty;
+var f = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var m = (e, o, t) => o in e ? O(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, g = (e, o) => {
+  for (var t in o || (o = {}))
+    S.call(o, t) && m(e, t, o[t]);
+  if (f)
+    for (var t of f(o))
+      b.call(o, t) && m(e, t, o[t]);
+  return e;
+};
+import { getUluEventName as v } from "../core/events.js";
+import { ComponentInitializer as V } from "../core/component.js";
+import { preventScroll as w, wasClickOutside as C } from "@ulu/utils/browser/dom.js";
+import { prepVideos as D, pauseVideos as k } from "../utils/pause-youtube-video.js";
+const L = "data-ulu-dialog", i = new V({ type: "dialog", baseAttribute: L }), x = i.getAttribute("close"), y = {
   /**
    * Use non-modal interface for dialog
    */
@@ -30,83 +41,83 @@ const b = "data-ulu-dialog", i = new v({ type: "dialog", baseAttribute: b }), F
    */
   preventScrollShift: !0
 };
-let a = { ...V };
-function R(e) {
+let a = g({}, y);
+function P(e) {
   a = Object.assign({}, a, e);
 }
-function T() {
+function U() {
   i.init({
     coreEvents: ["pageModified"],
     withData: !0,
-    setup({ element: e, initialize: s, data: t }) {
-      C(e, t), s();
+    setup({ element: e, initialize: o, data: t }) {
+      M(e, t), o();
     }
   }), i.init({
     key: "trigger",
     coreEvents: ["pageModified"],
     withData: !0,
-    setup({ element: e, initialize: s, data: t }) {
-      w(e, t), s();
+    setup({ element: e, initialize: o, data: t }) {
+      z(e, t), o();
     }
   });
 }
-function w(e, s) {
+function z(e, o) {
   e.addEventListener("click", t);
   function t(r) {
     var c;
     r.target.closest("a") && r.preventDefault();
-    const o = document.getElementById(s);
-    if (!o) {
-      console.error("Could not locate dialog (id)", s);
+    const n = document.getElementById(o);
+    if (!n) {
+      console.error("Could not locate dialog (id)", o);
       return;
     }
-    if (((c = o == null ? void 0 : o.tagName) == null ? void 0 : c.toLowerCase()) !== "dialog") {
+    if (((c = n == null ? void 0 : n.tagName) == null ? void 0 : c.toLowerCase()) !== "dialog") {
       console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");
       return;
     }
-    const u = D(o);
-    o[u.nonModal ? "show" : "showModal"]();
+    const u = A(n);
+    n[u.nonModal ? "show" : "showModal"]();
   }
 }
-function C(e, s) {
-  const t = Object.assign({}, a, s), r = document.body, { preventScrollShift: d } = t;
-  let o;
-  if (e.addEventListener(f("resizer:start"), c), e.addEventListener(f("resizer:end"), m), e.addEventListener("click", u), t.documentEnd && r.appendChild(e), t.pauseVideos && k(e), !t.nonModal && t.preventScroll) {
-    let n;
+function M(e, o) {
+  const t = Object.assign({}, a, o), r = document.body, { preventScrollShift: d } = t;
+  let n;
+  if (e.addEventListener(v("resizer:start"), c), e.addEventListener(v("resizer:end"), h), e.addEventListener("click", u), t.documentEnd && r.appendChild(e), t.pauseVideos && I(e), !t.nonModal && t.preventScroll) {
+    let s;
     e.addEventListener("toggle", (l) => {
-      l.newState === "open" ? n = h({ preventShift: d }) : n && n();
+      l.newState === "open" ? s = w({ preventShift: d }) : s && s();
     });
   }
-  function u(n) {
-    const { target: l } = n, p = l === e, g = l.closest(i.attributeSelector("close"));
-    (!o && t.clickOutsideCloses && p && E(e, n) || g) && (t.pauseVideos && L(e), e.close());
+  function u(s) {
+    const { target: l } = s, p = l === e, E = l.closest(i.attributeSelector("close"));
+    (!n && t.clickOutsideCloses && p && C(e, s) || E) && (t.pauseVideos && j(e), e.close());
   }
-  function c(n) {
-    o = n.pointerId;
+  function c(s) {
+    n = s.pointerId;
   }
-  function m(n) {
-    o === n.pointerId && setTimeout(() => {
-      o = null;
+  function h(s) {
+    n === s.pointerId && setTimeout(() => {
+      n = null;
     }, 0);
   }
 }
-function D(e) {
+function A(e) {
   return Object.assign({}, a, i.getData(e));
 }
-function k(e) {
-  O(e);
+function I(e) {
+  D(e);
 }
-function L(e) {
-  S(e), e.querySelectorAll("video").forEach((t) => t.pause());
+function j(e) {
+  k(e), e.querySelectorAll("video").forEach((t) => t.pause());
 }
 export {
-  b as baseAttribute,
-  F as closeAttribute,
-  V as defaults,
-  D as getDialogOptions,
-  T as init,
+  L as baseAttribute,
+  x as closeAttribute,
+  y as defaults,
+  A as getDialogOptions,
+  U as init,
   i as initializer,
-  R as setDefaults,
-  C as setupDialog,
-  w as setupTrigger
+  P as setDefaults,
+  M as setupDialog,
+  z as setupTrigger
 };

package/dist/es/ui/index.d.ts

@@ -1,10 +1,12 @@
 export { BreakpointManager } from './breakpoints.js';
 export { Collapsible } from './collapsible.js';
+export { ProgrammaticModalManager } from './programmatic-modal.js';
 export { OverflowScroller } from './overflow-scroller.js';
 export { createPager as overflowScrollerCreatePager } from './overflow-scroller-pager.js';
 export { init as pageInit } from './page.js';
 export { init as printInit } from './print.js';
 export { Resizer } from './resizer.js';
+export { TabManager } from './tab-manager.js';
 export { init as detailsGroupInit, initializer as detailsGroupInitializer, setupGroup as detailsGroupSetupGroup } from './details-group.js';
 export { baseAttribute as dialogBaseAttribute, closeAttribute as dialogCloseAttribute, defaults as dialogDefaults, getDialogOptions as dialogGetDialogOptions, init as dialogInit, initializer as dialogInitializer, setDefaults as dialogSetDefaults, setupDialog as dialogSetupDialog, setupTrigger as dialogSetupTrigger } from './dialog.js';
 export { Flipcard, init as flipcardInit, initializer as flipcardInitializer } from './flipcard.js';