@ulu/frontend 0.2.0-beta.9 → 0.3.0

package/README.dev.md

@@ -1,22 +1,61 @@
-# 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.
+
+## SCSS Development Conventions
+
+When developing new SCSS components or maintaining existing ones, adhere to the following architectural patterns:
+
+1.  **Configuration Property Naming:** 
+    *   Modifier-specific properties must begin with the modifier name. 
+    *   *Correct:* `clickable-background-color-hover`
+    *   *Incorrect:* `background-color-clickable-hover`
+    *   Responsive state variables should describe the *behavior*, not a hardcoded viewport/breakpoint name if possible. Example a component that stacks when on smaller screens might refer to that breakpoint as `stacked-breakpoint`
+  
+TODO: This section should be added to... (sassdoc type naming, etc). Formatting...
+
+## Documentation
+
+-   `site/`: Contains the source code for the documentation website (Eleventy). **Edit files here.**
+-   `docs/`: The build output for GitHub Pages. **Do not edit files here directly.**
+
+## 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,8 +4,8 @@ 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 P, init as h, initializer as A, setDefaults as k, setupDialog as G, setupTrigger as L } from "./ui/dialog.js";
-import { Flipcard as w, init as M, initializer as U } from "./ui/flipcard.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 { ProgrammaticModalManager as J } from "./ui/programmatic-modal.js";
@@ -18,43 +18,45 @@ 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 Te, init as Be, initializer as Pe } from "./ui/scrollpoint.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 { init as we, initializer as Me, instances as Ue, setup as Ve } from "./ui/tabs.js";
-import { defaults as Oe, init as He, initializer as Ne, setDefaults as Re, setupToggle as We } from "./ui/theme-toggle.js";
-import { Tooltip as je, init as qe, initializer as Je } from "./ui/tooltip.js";
-import { log as Xe, logError as Ye, logWarning as Ze, set as _e } from "./utils/class-logger.js";
-import { dataAttributeToDatasetKey as et, resolveClasses as tt, setPositionClasses as it } from "./utils/dom.js";
-import { FileSave as at } from "./utils/file-save.js";
-import { createFloatingUi as st, defaults as lt } from "./utils/floating-ui.js";
-import { configureIcons as pt } from "./utils/font-awesome.js";
-import { ensureId as ut, newId as ft } from "./utils/id.js";
-import { pauseVideos as mt, prepVideos as xt } from "./utils/pause-youtube-video.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,
-  at as FileSave,
-  w as Flipcard,
+  st as FileSave,
+  M as Flipcard,
   X as OverflowScroller,
   te as Popover,
   J as ProgrammaticModalManager,
   De as Resizer,
-  Te as Scrollpoint,
+  ye as Scrollpoint,
   Ae as Slider,
-  je as Tooltip,
-  Xe as classLoggerLog,
-  Ye as classLoggerLogError,
-  Ze as classLoggerLogWarning,
-  _e as classLoggerSet,
-  st as createFloatingUi,
+  Me as TabManager,
+  Je as Tooltip,
+  Ze as classLoggerLog,
+  _e as classLoggerLogError,
+  $e as classLoggerLogWarning,
+  et as classLoggerSet,
+  nt as createFloatingUi,
   i as createUluEvent,
-  et 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,
   P as dialogGetDialogOptions,
   h as dialogInit,
@@ -63,11 +65,11 @@ export {
   G as dialogSetupDialog,
   L as dialogSetupTrigger,
   r as dispatchCoreEvent,
-  ut as ensureId,
-  M as flipcardInit,
+  dt as ensureId,
+  w as flipcardInit,
   U as flipcardInitializer,
-  lt as floatingUiDefaults,
-  pt as fontAwesomeConfigureIcons,
+  pt as floatingUiDefaults,
+  ut as fontAwesomeConfigureIcons,
   a as getCoreEventName,
   l as getDefaultSettings,
   n as getSetting,
@@ -80,7 +82,7 @@ export {
   W as modalBuilderInit,
   K as modalBuilderInitializer,
   j as modalBuilderSetDefaults,
-  ft as newId,
+  mt as newId,
   Z as overflowScrollerCreatePager,
   $ as pageInit,
   ie as popoverGetContentByTrigger,
@@ -97,29 +99,29 @@ export {
   Ie as proxyClickInitializer,
   ce as proxyClickSetDefaults,
   ze as proxyClickSetupProxy,
-  tt as resolveClasses,
+  rt as resolveClasses,
   ve as scrollSliderInit,
   be as scrollSliderInitializer,
   Be as scrollpointInit,
   Pe as scrollpointInitializer,
-  it as setPositionClasses,
+  at as setPositionClasses,
   ke as sliderInit,
   Ge as sliderInitializer,
   Le as sliderSetupSlider,
-  we as tabsInit,
-  Me as tabsInitializer,
-  Ue as tabsInstances,
-  Ve as tabsSetup,
-  Oe as themeToggleDefaults,
-  He as themeToggleInit,
-  Ne as themeToggleInitializer,
-  Re as themeToggleSetDefaults,
-  We as themeToggleSetupToggle,
-  qe as tooltipInit,
-  Je as tooltipInitializer,
+  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,
-  mt as youtubePauseVideos,
-  xt as youtubePrepVideos
+  It as youtubePauseVideos,
+  ct as youtubePrepVideos
 };

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

@@ -18,7 +18,9 @@ export function setupTrigger(trigger: Node, dialogId: string): void;
  * Setup click handlers for a dialog
  * @param {Node} dialog
  */
-export function setupDialog(dialog: Node, userOptions: any): void;
+export function setupDialog(dialog: Node, userOptions: any): {
+    destroy: () => void;
+};
 /**
  * For a given dialog, get it's options (from data attribute)
  * @param {Node} dialog

package/dist/es/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/dialog.js"],"names":[],"mappings":"AA6DA;;GAEG;AACH,qCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI,0BA6Dd;AAED;;;;GAIG;AACH,yCAHW,IAAI,GACF,MAAM,CAIlB;AA7LD;;GAEG;AACH,4BAA6B,iBAAiB,CAAC;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAjB3B,sBAAsB"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/dialog.js"],"names":[],"mappings":"AA8DA;;GAEG;AACH,qCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,6BAqBC;AAED;;;;GAIG;AACH,sCAHW,IAAI,0BA2Bd;AAED;;;GAGG;AACH,oCAFW,IAAI;;EAgFd;AAED;;;;GAIG;AACH,yCAHW,IAAI,GACF,MAAM,CAIlB;AAhND;;GAEG;AACH,4BAA6B,iBAAiB,CAAC;AAE/C;;GAEG;AACH,+CAAuF;AAEvF;;GAEG;AACH,oCAAgE;;;;;;;;;qCAlB3B,sBAAsB"}

package/dist/es/ui/dialog.js

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

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

@@ -6,6 +6,7 @@ export { createPager as overflowScrollerCreatePager } from './overflow-scroller-
 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';

package/dist/es/ui/modal-builder.d.ts

@@ -37,6 +37,7 @@ export namespace defaults {
     export let size: string;
     export let print: boolean;
     export let noMinHeight: boolean;
+    export let fullscreenMobile: boolean;
     let _class: string;
     export { _class as class };
     export let baseClass: string;
@@ -47,6 +48,7 @@ export namespace defaults {
     export let classResizerIcon: Object;
     export let classResizerIconBoth: Object;
     export let debug: boolean;
+    export let autoIframe: boolean;
     export function templateCloseIcon(config: any): string;
     export function templateResizerIcon(config: any): string;
     /**
@@ -152,6 +154,10 @@ export type DefaultModalOptions = {
      * - Enables debug logging. Defaults to `false`.
      */
     debug: boolean;
+    /**
+     * - Opt-in convenience behavior. If the modal body's sole content is an iframe, it automatically applies layout fixes. If the iframe has static width/height attributes (like YouTube), it retains that aspect ratio responsively. Otherwise, it forces the iframe to fill the modal. Defaults to `false`.
+     */
+    autoIframe: boolean;
     /**
      * - A function that returns the HTML for the close icon.
      */

package/dist/es/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/modal-builder.js"],"names":[],"mappings":"AAoJA;;GAEG;AACH,qCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI,WACJ,MAAM;;;EAqEhB;AApOD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;;;IAiED,uDAGC;IACD,yDAIC;IACD;;;;;OAKG;IACH,6CAHW,MAAM,UA8ChB;;;;;;;;;;;;WAnHW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;gBACN,MAAM;;;;iBACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;gBACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;uBACP,CAAS,IAAM,EAAN,MAAM,KAAG,MAAM;;;;YACxB,CAAS,IAAM,EAAN,MAAM,KAAG,MAAM;;wBA1Cd,cAAc;qCAHD,sBAAsB"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../../lib/js/ui/modal-builder.js"],"names":[],"mappings":"AAyJA;;GAEG;AACH,qCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI,WACJ,MAAM;;;EAqFhB;AAxPD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoED,uDAGC;IACD,yDAIC;IACD;;;;;OAKG;IACH,6CAHW,MAAM,UA+ChB;;;;;;;;;;;;WAvHW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;gBACN,MAAM;;;;iBACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;gBACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;mBACN,MAAM,GAAC,IAAI;;;;gBACX,MAAM,GAAC,IAAI;;;;WACX,OAAO;;;;gBACP,OAAO;;;;uBACP,CAAS,IAAM,EAAN,MAAM,KAAG,MAAM;;;;YACxB,CAAS,IAAM,EAAN,MAAM,KAAG,MAAM;;wBA5Cd,cAAc;qCAHD,sBAAsB"}