@ulu/frontend 0.2.1 → 0.3.1

package/README.dev.md

@@ -22,6 +22,22 @@ The library is designed with a clear separation between styles (SCSS) and behavi
 
 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
 

package/dist/es/index.js

@@ -2,9 +2,9 @@ import { createUluEvent as i, dispatchCoreEvent as r, getCoreEventName as a, get
 import { getDefaultSettings as l, getSetting as n, getSettings as p, updateSetting as g, updateSettings as u, wrapSettingString as f } from "./core/settings.js";
 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 { Collapsible as S } from "./ui/collapsible.js";
 import { init as D, initializer as C, setupGroup as v } from "./ui/details-group.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 { baseAttribute as y, closeAttribute as T, defaults as B, getDialogOptions as P, init as h, initializer as A, setDefaults as L, setupDialog as k, setupTrigger as G } 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";
@@ -15,11 +15,11 @@ 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 { attachHandlers as de, defaults as me, init as xe, initializer as Ie, setDefaults as ce, setupProxy as Se } 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 { Scrollpoint as Te, init as Be, initializer as Pe } from "./ui/scrollpoint.js";
+import { Slider as Ae, init as Le, initializer as ke, setupSlider as Ge } 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";
@@ -31,9 +31,10 @@ 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";
+import { getSoleIframeLayout as zt } from "./utils/iframe.js";
 export {
   I as BreakpointManager,
-  z as Collapsible,
+  S as Collapsible,
   m as ComponentInitializer,
   st as FileSave,
   M as Flipcard,
@@ -41,7 +42,7 @@ export {
   te as Popover,
   J as ProgrammaticModalManager,
   De as Resizer,
-  ye as Scrollpoint,
+  Te as Scrollpoint,
   Ae as Slider,
   Me as TabManager,
   Je as Tooltip,
@@ -55,15 +56,15 @@ export {
   D as detailsGroupInit,
   C as detailsGroupInitializer,
   v as detailsGroupSetupGroup,
-  T as dialogBaseAttribute,
-  y as dialogCloseAttribute,
+  y as dialogBaseAttribute,
+  T as dialogCloseAttribute,
   B as dialogDefaults,
   P as dialogGetDialogOptions,
   h as dialogInit,
   A as dialogInitializer,
-  k as dialogSetDefaults,
-  G as dialogSetupDialog,
-  L as dialogSetupTrigger,
+  L as dialogSetDefaults,
+  k as dialogSetupDialog,
+  G as dialogSetupTrigger,
   r as dispatchCoreEvent,
   dt as ensureId,
   w as flipcardInit,
@@ -74,6 +75,7 @@ export {
   l as getDefaultSettings,
   n as getSetting,
   p as getSettings,
+  zt as getSoleIframeLayout,
   o as getUluEventName,
   F as gridInit,
   O as gridInitializer,
@@ -98,16 +100,16 @@ export {
   xe as proxyClickInit,
   Ie as proxyClickInitializer,
   ce as proxyClickSetDefaults,
-  ze as proxyClickSetupProxy,
+  Se 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,
+  Le as sliderInit,
+  ke as sliderInitializer,
+  Ge as sliderSetupSlider,
   Ue as tabsInit,
   Ve as tabsInitializer,
   Fe as tabsInstances,

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,19 +1,20 @@
-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) => {
+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 = {}))
-    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]);
+    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 v } from "../core/events.js";
+import { getUluEventName as g } 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 = {
+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
    */
@@ -41,31 +42,31 @@ const L = "data-ulu-dialog", i = new V({ type: "dialog", baseAttribute: L }), x
    */
   preventScrollShift: !0
 };
-let a = g({}, y);
-function P(e) {
+let a = m({}, M);
+function H(e) {
   a = Object.assign({}, a, e);
 }
-function U() {
-  i.init({
+function J() {
+  r.init({
     coreEvents: ["pageModified"],
     withData: !0,
     setup({ element: e, initialize: o, data: t }) {
-      M(e, t), o();
+      I(e, t), o();
     }
-  }), i.init({
+  }), r.init({
     key: "trigger",
     coreEvents: ["pageModified"],
     withData: !0,
     setup({ element: e, initialize: o, data: t }) {
-      z(e, t), o();
+      A(e, t), o();
     }
   });
 }
-function z(e, o) {
+function A(e, o) {
   e.addEventListener("click", t);
-  function t(r) {
+  function t(l) {
     var c;
-    r.target.closest("a") && r.preventDefault();
+    l.target.closest("a") && l.preventDefault();
     const n = document.getElementById(o);
     if (!n) {
       console.error("Could not locate dialog (id)", o);
@@ -75,49 +76,54 @@ function z(e, o) {
       console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?");
       return;
     }
-    const u = A(n);
-    n[u.nonModal ? "show" : "showModal"]();
+    const i = R(n);
+    n[i.nonModal ? "show" : "showModal"]();
   }
 }
-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) {
+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;
-    e.addEventListener("toggle", (l) => {
-      l.newState === "open" ? s = w({ preventShift: d }) : s && s();
+    n = z(e, (u) => {
+      u ? s = k({ preventShift: d }) : s && (s(), s = null);
     });
   }
-  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(s) {
-    n = s.pointerId;
+    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 v(s) {
+    i = s.pointerId;
   }
-  function h(s) {
-    n === s.pointerId && setTimeout(() => {
-      n = null;
+  function b(s) {
+    i === s.pointerId && setTimeout(() => {
+      i = null;
     }, 0);
   }
+  return {
+    destroy: () => {
+      n && n.destroy();
+    }
+  };
 }
-function A(e) {
-  return Object.assign({}, a, i.getData(e));
+function R(e) {
+  return Object.assign({}, a, r.getData(e));
 }
-function I(e) {
-  D(e);
+function T(e) {
+  w(e);
 }
 function j(e) {
-  k(e), e.querySelectorAll("video").forEach((t) => t.pause());
+  y(e), e.querySelectorAll("video").forEach((t) => t.pause());
 }
 export {
   L as baseAttribute,
-  x as closeAttribute,
-  y as defaults,
-  A as getDialogOptions,
-  U as init,
-  i as initializer,
-  P as setDefaults,
-  M as setupDialog,
-  z as setupTrigger
+  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/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"}

package/dist/es/ui/modal-builder.js

@@ -1,24 +1,25 @@
 var I = Object.defineProperty;
 var m = Object.getOwnPropertySymbols;
-var E = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
+var R = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
 var p = (s, t, e) => t in s ? I(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e, $ = (s, t) => {
   for (var e in t || (t = {}))
-    E.call(t, e) && p(s, e, t[e]);
+    R.call(t, e) && p(s, e, t[e]);
   if (m)
     for (var e of m(t))
-      v.call(t, e) && p(s, e, t[e]);
+      E.call(t, e) && p(s, e, t[e]);
   return s;
 };
-import { ComponentInitializer as R } from "../core/component.js";
-import { wrapSettingString as d } from "../core/settings.js";
+import { ComponentInitializer as v } from "../core/component.js";
+import { wrapSettingString as c } from "../core/settings.js";
 import { getCoreEventName as f } from "../core/events.js";
 import { Resizer as w } from "./resizer.js";
-import { baseAttribute as A, closeAttribute as g, defaults as D } from "./dialog.js";
-import { createElementFromHtml as O, getElement as M } from "@ulu/utils/browser/dom.js";
-const n = new R({
+import { baseAttribute as g, closeAttribute as A, defaults as H } from "./dialog.js";
+import { createElementFromHtml as M, getElement as S } from "@ulu/utils/browser/dom.js";
+import { getSoleIframeLayout as D } from "../utils/iframe.js";
+const n = new v({
   type: "modal-builder",
   baseAttribute: "data-ulu-modal-builder"
-}), B = {
+}), L = {
   title: null,
   titleIcon: null,
   titleClass: "",
@@ -33,22 +34,24 @@ const n = new R({
   size: "default",
   print: !1,
   noMinHeight: !1,
+  fullscreenMobile: !1,
   class: "",
   baseClass: "modal",
   footerElement: null,
   footerHtml: null,
   classClose: "button button--icon",
-  classCloseIcon: d("iconClassClose", (s) => `${s} button__icon`),
-  classResizerIcon: d("iconClassDragX"),
-  classResizerIconBoth: d("iconClassDragBoth"),
+  classCloseIcon: c("iconClassClose", (s) => `${s} button__icon`),
+  classResizerIcon: c("iconClassDragX"),
+  classResizerIconBoth: c("iconClassDragBoth"),
   debug: !1,
+  autoIframe: !1,
   templateCloseIcon(s) {
     const { baseClass: t, classCloseIcon: e } = s;
     return `<span class="${t}__close-icon ${e}" aria-hidden="true"></span>`;
   },
   templateResizerIcon(s) {
-    const { baseClass: t, classResizerIcon: e, classResizerIconBoth: i } = s, r = s.position === "center" ? i : e;
-    return `<span class="${t}__resizer-icon ${r}" aria-hidden="true"></span>`;
+    const { baseClass: t, classResizerIcon: e, classResizerIconBoth: a } = s, o = s.position === "center" ? a : e;
+    return `<span class="${t}__resizer-icon ${o}" aria-hidden="true"></span>`;
   },
   /**
    * Default modal template
@@ -57,7 +60,7 @@ const n = new R({
    * @returns {String} Markup for modal
    */
   template(s, t) {
-    const { baseClass: e, describedby: i, footerHtml: r } = t, o = [
+    const { baseClass: e, describedby: a, footerHtml: o } = t, i = [
       e,
       `${e}--${t.position}`,
       `${e}--${t.size}`,
@@ -66,28 +69,29 @@ const n = new R({
       ...t.bodyFills ? [`${e}--body-fills`] : [],
       ...t.noBackdrop ? [`${e}--no-backdrop`] : [],
       ...t.noMinHeight ? [`${e}--no-min-height`] : [],
+      ...t.fullscreenMobile ? [`${e}--fullscreen-mobile`] : [],
       ...t.class ? [t.class] : []
-    ], a = t.title ? `${s}--title` : t.labelledby;
+    ], r = t.title ? `${s}--title` : t.labelledby;
     return `
       <dialog 
         id="${s}" 
-        class="${o.join(" ")}" 
-        ${a ? `aria-labelledby="${a}"` : ""}
-        ${i ? `aria-describedby="${i}"` : ""}
+        class="${i.join(" ")}" 
+        ${r ? `aria-labelledby="${r}"` : ""}
+        ${a ? `aria-describedby="${a}"` : ""}
       >
         ${t.title ? `
           <header class="${e}__header">
-            <h2 id="${a}" class="${e}__title ${t.titleClass}">
+            <h2 id="${r}" class="${e}__title ${t.titleClass}">
               ${t.titleIcon ? `<span class="${e}__title-icon ${t.titleIcon}" aria-hidden="true"></span>` : ""}
               <span class="${e}__title-text">${t.title}</span>
             </h2>
-            <button class="${e}__close ${t.classClose}" aria-label="Close modal" ${g} autofocus>
+            <button class="${e}__close ${t.classClose}" aria-label="Close modal" ${A} autofocus>
               ${t.templateCloseIcon(t)}
             </button>
           </header>
         ` : ""}
         <div class="${e}__body" ${n.getAttribute("body")}></div>
-        ${r ? `<div class="${e}__footer">${r}</div>` : ""}
+        ${o ? `<div class="${e}__footer">${o}</div>` : ""}
         ${t.allowResize ? `<button class="${e}__resizer" type="button" ${n.getAttribute("resizer")}>
             ${t.templateResizerIcon(t)}
           </button>` : ""}
@@ -95,53 +99,57 @@ const n = new R({
     `;
   }
 };
-let c = $({}, B);
-function x(s) {
-  c = Object.assign({}, c, s);
+let u = $({}, L);
+function J(s) {
+  u = Object.assign({}, u, s);
 }
-function q() {
+function Y() {
   n.init({
     withData: !0,
     coreEvents: ["pageModified"],
     setup({ element: s, data: t }) {
-      H(s, t);
+      O(s, t);
     }
   });
 }
-function H(s, t) {
-  const e = Object.assign({}, c, t), { position: i } = e;
+function O(s, t) {
+  const e = Object.assign({}, u, t), { position: a } = e;
   if (e.debug && n.log(e, s), !s.id)
     throw new Error("Missing ID on modal");
-  const r = e.template(s.id, e), o = O(r.trim()), a = (l) => o.querySelector(n.attributeSelector(l)), u = a("body"), h = a("resizer"), z = S(e);
-  if (s.removeAttribute("id"), s.removeAttribute("hidden"), s.removeAttribute(n.getAttribute()), s.parentNode.replaceChild(o, s), u.appendChild(s), o.setAttribute(A, JSON.stringify(z)), e.footerElement) {
-    const l = M(e.footerElement);
-    l && (l.classList.add(`${e.baseClass}__footer`), u.after(l));
+  const o = e.template(s.id, e), i = M(o.trim()), r = (l) => i.querySelector(n.attributeSelector(l)), d = r("body"), h = r("resizer"), C = B(e);
+  if (s.removeAttribute("id"), s.removeAttribute("hidden"), s.removeAttribute(n.getAttribute()), s.parentNode.replaceChild(i, s), d.appendChild(s), i.setAttribute(g, JSON.stringify(C)), e.footerElement) {
+    const l = S(e.footerElement);
+    l && (l.classList.add(`${e.baseClass}__footer`), d.after(l));
+  }
+  if (e.autoIframe) {
+    const l = D(s);
+    l && (l.iframe.classList.add(`${e.baseClass}__frame-content`), l.isStaticSize ? (i.classList.add(`${e.baseClass}--frame-ratio`), d.style.aspectRatio = l.aspectRatio) : (i.classList.add(`${e.baseClass}--frame-fill`), l.fillHeight && (d.style.minHeight = l.fillHeight)));
   }
   let b;
-  const C = ["left", "right", "center"], _ = i === "center", y = i === "right";
+  const z = ["left", "right", "center"], _ = a === "center", y = a === "right";
   if (e.allowResize)
-    if (C.includes(i)) {
+    if (z.includes(a)) {
       const l = _ ? { fromX: "right", fromY: "bottom", multiplier: 2 } : { fromX: y ? "left" : "right" };
-      b = new w(o, h, l);
+      b = new w(i, h, l);
     } else
-      console.warn(`${i} is not supported for resizing`);
+      console.warn(`${a} is not supported for resizing`);
   if (e.print) {
     let l;
     document.addEventListener(f("beforePrint"), () => {
-      l = s.cloneNode(!0), o.after(l);
+      l = s.cloneNode(!0), i.after(l);
     }), document.addEventListener(f("afterPrint"), () => {
       l.remove();
     });
   }
-  return { modal: o, resizer: b };
+  return { modal: i, resizer: b };
 }
-function S(s) {
-  return Object.keys(D).reduce((t, e) => (e in s && (t[e] = s[e]), t), {});
+function B(s) {
+  return Object.keys(H).reduce((t, e) => (e in s && (t[e] = s[e]), t), {});
 }
 export {
-  H as buildModal,
-  B as defaults,
-  q as init,
+  O as buildModal,
+  L as defaults,
+  Y as init,
   n as initializer,
-  x as setDefaults
+  J as setDefaults
 };

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

@@ -0,0 +1,14 @@
+/**
+ * Utility functions for dialogs
+ * @module utils/dialog
+ */
+/**
+ * Workaround for poor Safari support of the dialog 'toggle' event.
+ * Watches for changes to the 'open' attribute and fires a callback.
+ *
+ * @param {HTMLDialogElement} dialog The dialog element to observe
+ * @param {Function} callback Function to call when the open state changes. Receives boolean indicating open state.
+ * @returns {Object} Object with a destroy method to disconnect the observer
+ */
+export function observeDialogToggle(dialog: HTMLDialogElement, callback: Function): Object;
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/dialog.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;GAOG;AACH,4CAJW,iBAAiB,uBAEf,MAAM,CAiBlB"}

package/dist/es/utils/dialog.js

@@ -0,0 +1,16 @@
+function i(e, r) {
+  const t = new MutationObserver((o) => {
+    o.forEach((n) => {
+      if (n.attributeName === "open") {
+        const s = e.hasAttribute("open");
+        r(s);
+      }
+    });
+  });
+  return t.observe(e, { attributes: !0, attributeFilter: ["open"] }), {
+    destroy: () => t.disconnect()
+  };
+}
+export {
+  i as observeDialogToggle
+};

package/dist/es/utils/iframe.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Checks if an element's sole content is an iframe, and determines its layout type.
+ * Useful for determining if layout fixes should be applied to containers.
+ * @param {HTMLElement} container The container to check
+ * @returns {{iframe: HTMLIFrameElement, isStaticSize: boolean, width: string|null, height: string|null, aspectRatio: string|null, fillHeight: string|null}|null} Returns an object with iframe details, or null if not a sole iframe
+ */
+export function getSoleIframeLayout(container: HTMLElement): {
+    iframe: HTMLIFrameElement;
+    isStaticSize: boolean;
+    width: string | null;
+    height: string | null;
+    aspectRatio: string | null;
+    fillHeight: string | null;
+} | null;
+//# sourceMappingURL=iframe.d.ts.map

package/dist/es/utils/iframe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iframe.d.ts","sourceRoot":"","sources":["../../../lib/js/utils/iframe.js"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,+CAHW,WAAW,GACT;IAAC,MAAM,EAAE,iBAAiB,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,WAAW,EAAE,MAAM,GAAC,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,GAAC,IAAI,CAAA;CAAC,GAAC,IAAI,CA8C/J"}

package/dist/es/utils/iframe.js

@@ -0,0 +1,33 @@
+import { separateCssUnit as u } from "@ulu/utils/string.js";
+const o = /^\d+$/;
+function h(a) {
+  const c = a.querySelectorAll("iframe");
+  if (c.length === 1 && a.textContent.trim() === "") {
+    const n = c[0], l = n.getAttribute("width"), t = n.getAttribute("height"), e = !!(l && t && o.test(l) && o.test(t));
+    let s = null;
+    if (!e) {
+      const i = n.style.height || t;
+      if (i)
+        if (o.test(i))
+          s = `${i}px`;
+        else
+          try {
+            const r = u(i);
+            r && r.unit && r.unit !== "%" && (s = i);
+          } catch (r) {
+          }
+    }
+    return {
+      iframe: n,
+      isStaticSize: e,
+      width: e ? l : null,
+      height: e ? t : null,
+      aspectRatio: e ? `${l} / ${t}` : null,
+      fillHeight: s
+    };
+  }
+  return null;
+}
+export {
+  h as getSoleIframeLayout
+};

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

@@ -1,5 +1,6 @@
 export { FileSave } from './file-save.js';
 export { configureIcons as fontAwesomeConfigureIcons } from './font-awesome.js';
+export { getSoleIframeLayout } from './iframe.js';
 export { set as classLoggerSet, log as classLoggerLog, logWarning as classLoggerLogWarning, logError as classLoggerLogError } from './class-logger.js';
 export { dataAttributeToDatasetKey, setPositionClasses, resolveClasses } from './dom.js';
 export { defaults as floatingUiDefaults, createFloatingUi } from './floating-ui.js';