@expressivecss/expressive 0.9.1 → 0.10.0

package/dist/js/chunks/chunk-MISGHDUU.mjs

@@ -0,0 +1,326 @@
+// src/ts/core/utils.ts
+var _Utils = class _Utils {
+  /**
+   * Run `callback` once the document is parsed.
+   *
+   * The document-level behaviors all used a bare DOMContentLoaded listener,
+   * which never fires if the bundle is loaded after that event - an async or
+   * deferred script tag, or a dynamic import. Checking readyState first covers
+   * both orders.
+   */
+  static onDocumentReady(callback) {
+    if (typeof document === "undefined") return;
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", callback, { once: true });
+    } else {
+      callback();
+    }
+  }
+  /**
+   * Generates a unique string identifier. Every caller prefixes the result and
+   * uses it as an element id, and a UUID is valid in that position.
+   *
+   * `randomUUID` is exposed only in secure contexts, and a dev server on a
+   * plain-HTTP LAN address - the usual way a page is opened on a phone - is
+   * not one. Without the fallback every component that stamps an id would
+   * throw there. The ids only have to be unique within one document, so the
+   * fallback does not need to be cryptographic.
+   */
+  static guid() {
+    return globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  }
+  /**
+   * Where an element created at runtime has to be appended to stay in the same
+   * tree as `el`. A stylesheet adopted into a shadow root cannot match a node
+   * in the document, so a portal that lands on `document.body` is unstyled
+   * whenever its origin lives in a shadow root (adr/0002).
+   *
+   * Light-DOM elements still get `document.body`, which is what escapes an
+   * ancestor's `overflow: hidden` and stacking context. Inside a shadow root
+   * both hazards come back: the host's own ancestors still form the containing
+   * block, so a transformed ancestor re-anchors `position: fixed` and a
+   * positioned one re-anchors `position: absolute`.
+   */
+  static portalRoot(el) {
+    const root = el.getRootNode();
+    return root.host ? root : document.body;
+  }
+  /**
+   * `getElementById` against the tree `el` lives in. The mirror of
+   * `portalRoot`: an id in a shadow root is invisible to
+   * `document.getElementById`, so a trigger and its target inside the same
+   * root could not find each other at all.
+   *
+   * Falls back to the document for a detached `el`, whose root is a plain
+   * element with no lookup of its own.
+   */
+  static getElementById(el, id) {
+    const root = el.getRootNode();
+    return root.getElementById ? root.getElementById(id) : document.getElementById(id);
+  }
+  /**
+   * Checks for exceeded edges
+   * @param container Container element.
+   * @param bounding Bounding rect.
+   * @param offset Element offset.
+   */
+  static checkWithinContainer(container, bounding, offset) {
+    const edges = {
+      top: false,
+      right: false,
+      bottom: false,
+      left: false
+    };
+    const containerRect = container.getBoundingClientRect();
+    const containerBottom = container === document.body ? Math.max(containerRect.bottom, window.innerHeight) : containerRect.bottom;
+    const scrollLeft = container.scrollLeft;
+    const scrollTop = container.scrollTop;
+    const scrolledX = bounding.left - scrollLeft;
+    const scrolledY = bounding.top - scrollTop;
+    if (scrolledX < containerRect.left + offset || scrolledX < offset) {
+      edges.left = true;
+    }
+    if (scrolledX + bounding.width > containerRect.right - offset || scrolledX + bounding.width > window.innerWidth - offset) {
+      edges.right = true;
+    }
+    if (scrolledY < containerRect.top + offset || scrolledY < offset) {
+      edges.top = true;
+    }
+    if (scrolledY + bounding.height > containerBottom - offset || scrolledY + bounding.height > window.innerHeight - offset) {
+      edges.bottom = true;
+    }
+    return edges;
+  }
+  /**
+   * Checks if element can be aligned in multiple directions.
+   * @param el Element to be inspected.
+   * @param container Container element.
+   * @param bounding Bounding rect.
+   * @param offset Element offset.
+   */
+  static checkPossibleAlignments(el, container, bounding, offset) {
+    const canAlign = {
+      top: true,
+      right: true,
+      bottom: true,
+      left: true,
+      spaceOnTop: null,
+      spaceOnRight: null,
+      spaceOnBottom: null,
+      spaceOnLeft: null
+    };
+    const containerAllowsOverflow = getComputedStyle(container).overflow === "visible";
+    const containerRect = container.getBoundingClientRect();
+    const containerHeight = Math.min(containerRect.height, window.innerHeight);
+    const containerWidth = Math.min(containerRect.width, window.innerWidth);
+    const elOffsetRect = el.getBoundingClientRect();
+    const scrollLeft = container.scrollLeft;
+    const scrollTop = container.scrollTop;
+    const scrolledX = bounding.left - scrollLeft;
+    const scrolledYTopEdge = bounding.top - scrollTop;
+    const scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;
+    canAlign.spaceOnRight = !containerAllowsOverflow ? containerWidth - (scrolledX + bounding.width) : window.innerWidth - (elOffsetRect.left + bounding.width);
+    if (canAlign.spaceOnRight < 0) {
+      canAlign.left = false;
+    }
+    canAlign.spaceOnLeft = !containerAllowsOverflow ? scrolledX - bounding.width + elOffsetRect.width : elOffsetRect.right - bounding.width;
+    if (canAlign.spaceOnLeft < 0) {
+      canAlign.right = false;
+    }
+    canAlign.spaceOnBottom = !containerAllowsOverflow ? containerHeight - (scrolledYTopEdge + bounding.height + offset) : window.innerHeight - (elOffsetRect.top + bounding.height + offset);
+    if (canAlign.spaceOnBottom < 0) {
+      canAlign.top = false;
+    }
+    canAlign.spaceOnTop = !containerAllowsOverflow ? scrolledYBottomEdge - (bounding.height - offset) : elOffsetRect.bottom - (bounding.height + offset);
+    if (canAlign.spaceOnTop < 0) {
+      canAlign.bottom = false;
+    }
+    return canAlign;
+  }
+  /**
+   * Retrieves target element id from trigger.
+   * @param trigger Trigger element.
+   */
+  static getIdFromTrigger(trigger) {
+    let id = trigger.dataset.target;
+    if (!id) {
+      id = trigger.getAttribute("href");
+      return id ? id.slice(1) : "";
+    }
+    return id;
+  }
+  /**
+   * Retrieves document scroll postion from top.
+   */
+  static getDocumentScrollTop() {
+    return window.scrollY;
+  }
+  /**
+   * Retrieves document scroll postion from left.
+   */
+  static getDocumentScrollLeft() {
+    return window.scrollX;
+  }
+  /**
+   * Trailing-edge throttle: run `func` now, then at most once per `wait` ms
+   * with the most recent arguments.
+   *
+   * This used to carry its underscore ancestor's whole configuration - leading
+   * and trailing switches, a result passthrough - and both call sites are
+   * resize handlers passing nothing but a function and a delay.
+   *
+   * Assign the return value once. `x = Utils.throttle(fn, 200)` is right;
+   * wrapping it in an arrow builds a fresh closure per event and never calls
+   * it, which is how resize handling was dead in three components.
+   */
+  static throttle(func, wait) {
+    let timeout = null;
+    let lastArgs = null;
+    let previous = 0;
+    return (...args) => {
+      const now = Date.now();
+      const remaining = wait - (now - previous);
+      if (remaining <= 0) {
+        clearTimeout(timeout);
+        timeout = null;
+        previous = now;
+        lastArgs = null;
+        func(...args);
+      } else if (!timeout) {
+        lastArgs = args;
+        timeout = setTimeout(() => {
+          previous = Date.now();
+          timeout = null;
+          func(...lastArgs ?? []);
+          lastArgs = null;
+        }, remaining);
+      } else {
+        lastArgs = args;
+      }
+    };
+  }
+  /**
+   * Renders confirm/close buttons with callback function
+   */
+  static createConfirmationContainer(container, confirmText, cancelText, onConfirm, onCancel) {
+    const confirmationButtonsContainer = document.createElement("div");
+    confirmationButtonsContainer.classList.add("confirmation-btns");
+    container.append(confirmationButtonsContainer);
+    this.createButton(confirmationButtonsContainer, cancelText, ["btn-cancel"], true, onCancel);
+    this.createButton(confirmationButtonsContainer, confirmText, ["btn-confirm"], true, onConfirm);
+  }
+  /**
+   * Renders a button with optional callback function
+   */
+  static createButton(container, text, className = [], visibility = true, callback = null) {
+    className = className.concat(["text"]);
+    const button = document.createElement("button");
+    button.className = className.join(" ");
+    button.style.visibility = visibility ? "visible" : "hidden";
+    button.type = "button";
+    button.tabIndex = !!visibility ? 0 : -1;
+    button.innerText = text;
+    if (typeof callback === "function") {
+      button.addEventListener("click", callback);
+      button.addEventListener("keypress", (e) => {
+        if (e.key === _Utils.keys.ENTER) callback(e);
+      });
+    }
+    container.append(button);
+  }
+  static _setAbsolutePosition(origin, container, position, margin, transitionMovement, align = "center") {
+    const originHeight = origin.offsetHeight, originWidth = origin.offsetWidth, containerHeight = container.offsetHeight, containerWidth = container.offsetWidth, originRect = origin.getBoundingClientRect();
+    let xMovement = 0, yMovement = 0, targetTop = originRect.top + _Utils.getDocumentScrollTop(), targetLeft = originRect.left + _Utils.getDocumentScrollLeft();
+    if (position === "top") {
+      targetTop += -containerHeight - margin;
+      if (align === "center") {
+        targetLeft += originWidth / 2 - containerWidth / 2;
+      }
+      yMovement = -transitionMovement;
+    } else if (position === "right") {
+      targetTop += originHeight / 2 - containerHeight / 2;
+      targetLeft = originWidth + margin;
+      xMovement = transitionMovement;
+    } else if (position === "left") {
+      targetTop += originHeight / 2 - containerHeight / 2;
+      targetLeft = -containerWidth - margin;
+      xMovement = -transitionMovement;
+    } else {
+      targetTop += originHeight + margin;
+      if (align === "center") {
+        targetLeft += originWidth / 2 - containerWidth / 2;
+      }
+      yMovement = transitionMovement;
+    }
+    if (align === "right") {
+      targetLeft += originWidth - containerWidth - margin;
+    }
+    const newCoordinates = _Utils._repositionWithinScreen(
+      targetLeft,
+      targetTop,
+      containerWidth,
+      containerHeight,
+      margin,
+      transitionMovement,
+      align
+    );
+    container.style.top = newCoordinates.y + "px";
+    container.style.left = newCoordinates.x + "px";
+    return { x: xMovement, y: yMovement };
+  }
+  static _repositionWithinScreen(x, y, width, height, margin, transitionMovement, align) {
+    const scrollLeft = _Utils.getDocumentScrollLeft();
+    const scrollTop = _Utils.getDocumentScrollTop();
+    let newX = x - scrollLeft;
+    let newY = y - scrollTop;
+    const bounding = {
+      left: newX,
+      top: newY,
+      width,
+      height
+    };
+    let offset;
+    if (align === "left" || align == "center") {
+      offset = margin + transitionMovement;
+    } else if (align === "right") {
+      offset = margin - transitionMovement;
+    }
+    const edges = _Utils.checkWithinContainer(document.body, bounding, offset);
+    if (edges.left) {
+      newX = offset;
+    } else if (edges.right) {
+      newX -= newX + width - window.innerWidth;
+    }
+    if (edges.top) {
+      newY = offset;
+    } else if (edges.bottom) {
+      newY -= newY + height - window.innerHeight;
+    }
+    return {
+      x: newX + scrollLeft,
+      y: newY + scrollTop
+    };
+  }
+};
+/**
+ * Key maps. One `KeyboardEvent.key` value each: the second entries these used
+ * to carry (`Esc`, `Up`, `Del`, ...) were IE and Edge Legacy spellings, and
+ * the support baseline excludes both.
+ */
+_Utils.keys = {
+  TAB: "Tab",
+  ENTER: "Enter",
+  ESC: "Escape",
+  BACKSPACE: "Backspace",
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  DELETE: "Delete"
+};
+var Utils = _Utils;
+
+export {
+  Utils
+};
+//# sourceMappingURL=chunk-MISGHDUU.mjs.map

package/dist/js/chunks/chunk-MISGHDUU.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/core/utils.ts"],
+  "sourcesContent": ["/** The part of a `DOMRect` the positioning helpers below actually read. */\ntype Bounding = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;\n\n/** Which edges of a container a box has crossed. */\ntype Edges = { top: boolean; right: boolean; bottom: boolean; left: boolean };\n\n/**\n * Class with utilitary functions for global usage.\n */\nexport class Utils {\n  /**\n   * Key maps. One `KeyboardEvent.key` value each: the second entries these used\n   * to carry (`Esc`, `Up`, `Del`, ...) were IE and Edge Legacy spellings, and\n   * the support baseline excludes both.\n   */\n  static keys = {\n    TAB: 'Tab',\n    ENTER: 'Enter',\n    ESC: 'Escape',\n    BACKSPACE: 'Backspace',\n    ARROW_UP: 'ArrowUp',\n    ARROW_DOWN: 'ArrowDown',\n    ARROW_LEFT: 'ArrowLeft',\n    ARROW_RIGHT: 'ArrowRight',\n    DELETE: 'Delete'\n  };\n\n  /**\n   * Run `callback` once the document is parsed.\n   *\n   * The document-level behaviors all used a bare DOMContentLoaded listener,\n   * which never fires if the bundle is loaded after that event - an async or\n   * deferred script tag, or a dynamic import. Checking readyState first covers\n   * both orders.\n   */\n  static onDocumentReady(callback: () => void): void {\n    if (typeof document === 'undefined') return;\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', callback, { once: true });\n    } else {\n      callback();\n    }\n  }\n\n  /**\n   * Generates a unique string identifier. Every caller prefixes the result and\n   * uses it as an element id, and a UUID is valid in that position.\n   *\n   * `randomUUID` is exposed only in secure contexts, and a dev server on a\n   * plain-HTTP LAN address - the usual way a page is opened on a phone - is\n   * not one. Without the fallback every component that stamps an id would\n   * throw there. The ids only have to be unique within one document, so the\n   * fallback does not need to be cryptographic.\n   */\n  static guid(): string {\n    return (\n      globalThis.crypto?.randomUUID?.() ??\n      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`\n    );\n  }\n\n  /**\n   * Where an element created at runtime has to be appended to stay in the same\n   * tree as `el`. A stylesheet adopted into a shadow root cannot match a node\n   * in the document, so a portal that lands on `document.body` is unstyled\n   * whenever its origin lives in a shadow root (adr/0002).\n   *\n   * Light-DOM elements still get `document.body`, which is what escapes an\n   * ancestor's `overflow: hidden` and stacking context. Inside a shadow root\n   * both hazards come back: the host's own ancestors still form the containing\n   * block, so a transformed ancestor re-anchors `position: fixed` and a\n   * positioned one re-anchors `position: absolute`.\n   */\n  static portalRoot(el: Node): HTMLElement | ShadowRoot {\n    const root = el.getRootNode() as ShadowRoot;\n    // Only a ShadowRoot has a host; a Document or a detached subtree does not.\n    return root.host ? root : document.body;\n  }\n\n  /**\n   * `getElementById` against the tree `el` lives in. The mirror of\n   * `portalRoot`: an id in a shadow root is invisible to\n   * `document.getElementById`, so a trigger and its target inside the same\n   * root could not find each other at all.\n   *\n   * Falls back to the document for a detached `el`, whose root is a plain\n   * element with no lookup of its own.\n   */\n  static getElementById(el: Node, id: string): HTMLElement {\n    const root = el.getRootNode() as Document | ShadowRoot;\n    return (root.getElementById ? root.getElementById(id) : document.getElementById(id)) as HTMLElement;\n  }\n\n  /**\n   * Checks for exceeded edges\n   * @param container Container element.\n   * @param bounding Bounding rect.\n   * @param offset Element offset.\n   */\n  static checkWithinContainer(container: HTMLElement, bounding: Bounding, offset: number): Edges {\n    const edges = {\n      top: false,\n      right: false,\n      bottom: false,\n      left: false\n    };\n\n    const containerRect = container.getBoundingClientRect();\n    // If body element is smaller than viewport, use viewport height instead.\n    const containerBottom =\n      container === document.body\n        ? Math.max(containerRect.bottom, window.innerHeight)\n        : containerRect.bottom;\n\n    const scrollLeft = container.scrollLeft;\n    const scrollTop = container.scrollTop;\n\n    const scrolledX = bounding.left - scrollLeft;\n    const scrolledY = bounding.top - scrollTop;\n\n    // Check for container and viewport for each edge\n    if (scrolledX < containerRect.left + offset || scrolledX < offset) {\n      edges.left = true;\n    }\n\n    if (\n      scrolledX + bounding.width > containerRect.right - offset ||\n      scrolledX + bounding.width > window.innerWidth - offset\n    ) {\n      edges.right = true;\n    }\n\n    if (scrolledY < containerRect.top + offset || scrolledY < offset) {\n      edges.top = true;\n    }\n\n    if (\n      scrolledY + bounding.height > containerBottom - offset ||\n      scrolledY + bounding.height > window.innerHeight - offset\n    ) {\n      edges.bottom = true;\n    }\n\n    return edges;\n  }\n\n  /**\n   * Checks if element can be aligned in multiple directions.\n   * @param el Element to be inspected.\n   * @param container Container element.\n   * @param bounding Bounding rect.\n   * @param offset Element offset.\n   */\n  static checkPossibleAlignments(\n    el: HTMLElement,\n    container: HTMLElement,\n    bounding: Bounding,\n    offset: number\n  ) {\n    const canAlign: {\n      top: boolean;\n      right: boolean;\n      bottom: boolean;\n      left: boolean;\n      spaceOnTop: number;\n      spaceOnRight: number;\n      spaceOnBottom: number;\n      spaceOnLeft: number;\n    } = {\n      top: true,\n      right: true,\n      bottom: true,\n      left: true,\n      spaceOnTop: null,\n      spaceOnRight: null,\n      spaceOnBottom: null,\n      spaceOnLeft: null\n    };\n\n    const containerAllowsOverflow = getComputedStyle(container).overflow === 'visible';\n    const containerRect = container.getBoundingClientRect();\n    const containerHeight = Math.min(containerRect.height, window.innerHeight);\n    const containerWidth = Math.min(containerRect.width, window.innerWidth);\n    const elOffsetRect = el.getBoundingClientRect();\n\n    const scrollLeft = container.scrollLeft;\n    const scrollTop = container.scrollTop;\n\n    const scrolledX = bounding.left - scrollLeft;\n    const scrolledYTopEdge = bounding.top - scrollTop;\n    const scrolledYBottomEdge = bounding.top + elOffsetRect.height - scrollTop;\n\n    // Check for container and viewport for left\n    canAlign.spaceOnRight = !containerAllowsOverflow\n      ? containerWidth - (scrolledX + bounding.width)\n      : window.innerWidth - (elOffsetRect.left + bounding.width);\n    if (canAlign.spaceOnRight < 0) {\n      canAlign.left = false;\n    }\n\n    // Check for container and viewport for Right\n    canAlign.spaceOnLeft = !containerAllowsOverflow\n      ? scrolledX - bounding.width + elOffsetRect.width\n      : elOffsetRect.right - bounding.width;\n    if (canAlign.spaceOnLeft < 0) {\n      canAlign.right = false;\n    }\n\n    // Check for container and viewport for Top\n    canAlign.spaceOnBottom = !containerAllowsOverflow\n      ? containerHeight - (scrolledYTopEdge + bounding.height + offset)\n      : window.innerHeight - (elOffsetRect.top + bounding.height + offset);\n    if (canAlign.spaceOnBottom < 0) {\n      canAlign.top = false;\n    }\n\n    // Check for container and viewport for Bottom\n    canAlign.spaceOnTop = !containerAllowsOverflow\n      ? scrolledYBottomEdge - (bounding.height - offset)\n      : elOffsetRect.bottom - (bounding.height + offset);\n    if (canAlign.spaceOnTop < 0) {\n      canAlign.bottom = false;\n    }\n\n    return canAlign;\n  }\n\n  /**\n   * Retrieves target element id from trigger.\n   * @param trigger Trigger element.\n   */\n  static getIdFromTrigger(trigger: HTMLElement): string {\n    let id = trigger.dataset.target;\n    if (!id) {\n      id = trigger.getAttribute('href');\n      return id ? id.slice(1) : '';\n    }\n    return id;\n  }\n\n  /**\n   * Retrieves document scroll postion from top.\n   */\n  static getDocumentScrollTop(): number {\n    return window.scrollY;\n  }\n\n  /**\n   * Retrieves document scroll postion from left.\n   */\n  static getDocumentScrollLeft(): number {\n    return window.scrollX;\n  }\n\n  /**\n   * Trailing-edge throttle: run `func` now, then at most once per `wait` ms\n   * with the most recent arguments.\n   *\n   * This used to carry its underscore ancestor's whole configuration - leading\n   * and trailing switches, a result passthrough - and both call sites are\n   * resize handlers passing nothing but a function and a delay.\n   *\n   * Assign the return value once. `x = Utils.throttle(fn, 200)` is right;\n   * wrapping it in an arrow builds a fresh closure per event and never calls\n   * it, which is how resize handling was dead in three components.\n   */\n  static throttle(func: (...args: unknown[]) => void, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> = null;\n    let lastArgs: unknown[] = null;\n    let previous = 0;\n\n    return (...args: unknown[]) => {\n      const now = Date.now();\n      const remaining = wait - (now - previous);\n      if (remaining <= 0) {\n        clearTimeout(timeout);\n        timeout = null;\n        previous = now;\n        lastArgs = null;\n        func(...args);\n      } else if (!timeout) {\n        // The trailing call replays the most recent arguments; without this it\n        // used to fire with none at all.\n        lastArgs = args;\n        timeout = setTimeout(() => {\n          previous = Date.now();\n          timeout = null;\n          func(...(lastArgs ?? []));\n          lastArgs = null;\n        }, remaining);\n      } else {\n        lastArgs = args;\n      }\n    };\n  }\n\n  /**\n   * Renders confirm/close buttons with callback function\n   */\n  static createConfirmationContainer(\n    container: HTMLElement,\n    confirmText: string,\n    cancelText: string,\n    onConfirm: (Function: object) => void,\n    onCancel: (Function: object) => void\n  ): void {\n    const confirmationButtonsContainer = document.createElement('div');\n    confirmationButtonsContainer.classList.add('confirmation-btns');\n    container.append(confirmationButtonsContainer);\n\n    this.createButton(confirmationButtonsContainer, cancelText, ['btn-cancel'], true, onCancel);\n    this.createButton(confirmationButtonsContainer, confirmText, ['btn-confirm'], true, onConfirm);\n  }\n\n  /**\n   * Renders a button with optional callback function\n   */\n  static createButton(\n    container: HTMLElement,\n    text: string,\n    className: string[] = [],\n    visibility: boolean = true,\n    callback: (Function: object) => void = null\n  ): void {\n    className = className.concat(['text']);\n    const button = document.createElement('button');\n    button.className = className.join(' ');\n    button.style.visibility = visibility ? 'visible' : 'hidden';\n    button.type = 'button';\n    button.tabIndex = !!visibility ? 0 : -1;\n    button.innerText = text;\n    // The keypress handler used to call `callback` unconditionally, so a\n    // button created without one threw on Enter.\n    if (typeof callback === 'function') {\n      button.addEventListener('click', callback);\n      button.addEventListener('keypress', (e) => {\n        if (e.key === Utils.keys.ENTER) callback(e);\n      });\n    }\n    container.append(button);\n  }\n\n  static _setAbsolutePosition(\n    origin: HTMLElement,\n    container: HTMLElement,\n    position: string,\n    margin: number,\n    transitionMovement: number,\n    align: string = 'center'\n  ) {\n    const originHeight = origin.offsetHeight,\n      originWidth = origin.offsetWidth,\n      containerHeight = container.offsetHeight,\n      containerWidth = container.offsetWidth,\n      originRect = origin.getBoundingClientRect(); // one rect, read twice below\n    let xMovement = 0,\n      yMovement = 0,\n      targetTop = originRect.top + Utils.getDocumentScrollTop(),\n      targetLeft = originRect.left + Utils.getDocumentScrollLeft();\n\n    if (position === 'top') {\n      targetTop += -containerHeight - margin;\n      if (align === 'center') {\n        targetLeft += originWidth / 2 - containerWidth / 2; // This is center align\n      }\n      yMovement = -transitionMovement;\n    } else if (position === 'right') {\n      targetTop += originHeight / 2 - containerHeight / 2;\n      targetLeft = originWidth + margin;\n      xMovement = transitionMovement;\n    } else if (position === 'left') {\n      targetTop += originHeight / 2 - containerHeight / 2;\n      targetLeft = -containerWidth - margin;\n      xMovement = -transitionMovement;\n    } else {\n      targetTop += originHeight + margin;\n      if (align === 'center') {\n        targetLeft += originWidth / 2 - containerWidth / 2; // This is center align\n      }\n      yMovement = transitionMovement;\n    }\n    if (align === 'right') {\n      targetLeft += originWidth - containerWidth - margin;\n    }\n\n    const newCoordinates = Utils._repositionWithinScreen(\n      targetLeft,\n      targetTop,\n      containerWidth,\n      containerHeight,\n      margin,\n      transitionMovement,\n      align\n    );\n\n    container.style.top = newCoordinates.y + 'px';\n    container.style.left = newCoordinates.x + 'px';\n\n    return {x: xMovement, y: yMovement};\n  }\n\n  static _repositionWithinScreen(\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    margin: number,\n    transitionMovement: number,\n    align: string\n  ) {\n    const scrollLeft = Utils.getDocumentScrollLeft();\n    const scrollTop = Utils.getDocumentScrollTop();\n    let newX = x - scrollLeft;\n    let newY = y - scrollTop;\n\n    const bounding: Bounding = {\n      left: newX,\n      top: newY,\n      width: width,\n      height: height\n    };\n    let offset: number;\n    if (align === 'left' || align == 'center') {\n      offset = margin + transitionMovement;\n    } else if (align === 'right') {\n      offset = margin - transitionMovement;\n    }\n    const edges = Utils.checkWithinContainer(document.body, bounding, offset);\n\n    if (edges.left) {\n      newX = offset;\n    } else if (edges.right) {\n      newX -= newX + width - window.innerWidth;\n    }\n    if (edges.top) {\n      newY = offset;\n    } else if (edges.bottom) {\n      newY -= newY + height - window.innerHeight;\n    }\n    return {\n      x: newX + scrollLeft,\n      y: newY + scrollTop\n    };\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-N3UHGN3N.mjs

@@ -0,0 +1,175 @@
+import {
+  Utils
+} from "./chunk-MISGHDUU.mjs";
+import {
+  Component
+} from "./chunk-QSQ24FYT.mjs";
+
+// src/ts/components/expandingCard.ts
+var _defaults = {
+  onOpen: null,
+  onClose: null
+};
+var EXPANDING_CARD_SELECTOR = "article.expanding-card:has(> dialog.expanding-card-dialog)";
+var ExpandingCard = class _ExpandingCard extends Component {
+  constructor(el, options) {
+    super(el, options, _ExpandingCard);
+    this.isOpen = false;
+    this.closeGeneration = 0;
+    this._setupEventHandlers = () => {
+      this.trigger?.addEventListener("click", this.open);
+      this.trigger?.addEventListener("keypress", this._handleTriggerKeypress);
+      this.closeButton?.addEventListener("click", this.close);
+      this.dialog?.addEventListener("cancel", this._handleCancel);
+      this.dialog?.addEventListener("close", this._handleNativeClose);
+    };
+    this._removeEventHandlers = () => {
+      this.trigger?.removeEventListener("click", this.open);
+      this.trigger?.removeEventListener("keypress", this._handleTriggerKeypress);
+      this.closeButton?.removeEventListener("click", this.close);
+      this.dialog?.removeEventListener("cancel", this._handleCancel);
+      this.dialog?.removeEventListener("close", this._handleNativeClose);
+    };
+    this._handleTriggerKeypress = (event) => {
+      if (event.key === Utils.keys.ENTER || event.key === " ") {
+        event.preventDefault();
+        this.open();
+      }
+    };
+    this._handleCancel = (event) => {
+      event.preventDefault();
+      this.close();
+    };
+    this._handleNativeClose = () => {
+      if (this.dialog.open) return;
+      this.closeGeneration++;
+      this.isOpen = false;
+      this.trigger.ariaExpanded = "false";
+      this.dialog.ariaExpanded = "false";
+      this.dialog.classList.remove("expanded");
+    };
+    this._setTransitionOrigin = () => {
+      if (!this.dialog) return;
+      const card = this.el.getBoundingClientRect();
+      const media = this.el.querySelector(
+        ":scope > figure, :scope > img"
+      );
+      const mediaRect = media?.getBoundingClientRect();
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-top",
+        `${Math.max(0, card.top)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-right",
+        `${Math.max(0, window.innerWidth - card.right)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-bottom",
+        `${Math.max(0, window.innerHeight - card.bottom)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-left",
+        `${Math.max(0, card.left)}px`
+      );
+      this.dialog.style.setProperty(
+        "--md-comp-expanding-card-from-media-height",
+        `${Math.max(0, mediaRect?.height ?? 0)}px`
+      );
+    };
+    this.open = () => {
+      if (this.isOpen || !this.dialog || !this.trigger) return;
+      this.closeGeneration++;
+      this._setTransitionOrigin();
+      this.isOpen = true;
+      this.trigger.ariaExpanded = "true";
+      this.dialog.ariaExpanded = "true";
+      this.dialog.showModal();
+      void this.dialog.offsetWidth;
+      this.dialog.classList.add("expanded");
+      this.closeButton?.focus();
+      if (typeof this.options.onOpen === "function") {
+        this.options.onOpen.call(this, this.el);
+      }
+    };
+    this.close = () => {
+      if (!this.isOpen || !this.dialog || !this.trigger) return;
+      const generation = ++this.closeGeneration;
+      this._setTransitionOrigin();
+      this.isOpen = false;
+      this.trigger.ariaExpanded = "false";
+      this.dialog.ariaExpanded = "false";
+      this.dialog.classList.remove("expanded");
+      if (typeof this.options.onClose === "function") {
+        this.options.onClose.call(this, this.el);
+      }
+      const finish = () => {
+        if (generation !== this.closeGeneration || this.isOpen || !this.dialog.open) return;
+        this.dialog.close();
+        if (this.dialog.isConnected && this.trigger.isConnected) this.trigger.focus();
+      };
+      const reducedMotion = window.matchMedia(
+        "(prefers-reduced-motion: reduce)"
+      ).matches;
+      const transitions = reducedMotion ? [] : (this.dialog.getAnimations?.() ?? []).filter((animation) => animation.transitionProperty === "clip-path");
+      if (transitions.length === 0) finish();
+      else void Promise.allSettled(transitions.map((animation) => animation.finished)).then(finish);
+    };
+    this.el["Expressive_ExpandingCard"] = this;
+    this.options = {
+      ..._ExpandingCard.defaults,
+      ...options
+    };
+    this.dialog = this.el.querySelector(
+      ":scope > dialog.expanding-card-dialog"
+    );
+    this.trigger = this.el.querySelector(
+      ":scope > .expanding-card-trigger, :scope > figure > .expanding-card-trigger"
+    );
+    this.closeButton = this.dialog?.querySelector(".expanding-card-close") ?? null;
+    if (this.trigger && this.dialog) {
+      this.trigger.ariaExpanded = "false";
+      if (this.dialog.id)
+        this.trigger.setAttribute("aria-controls", this.dialog.id);
+      if (!this.trigger.matches("a[href], button, input, select, textarea")) {
+        this.trigger.tabIndex = 0;
+        this.trigger.setAttribute("role", "button");
+      }
+      this.dialog.ariaExpanded = "false";
+      this._setupEventHandlers();
+    }
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  static init(els, options) {
+    return super.init(els, options, _ExpandingCard);
+  }
+  static getInstance(el) {
+    return el["Expressive_ExpandingCard"];
+  }
+  destroy() {
+    this._removeEventHandlers();
+    this.closeGeneration++;
+    this.isOpen = false;
+    if (this.trigger) this.trigger.ariaExpanded = "false";
+    if (this.dialog) this.dialog.ariaExpanded = "false";
+    this.dialog?.classList.remove("expanded");
+    if (this.dialog?.open) this.dialog.close();
+    this.el["Expressive_ExpandingCard"] = void 0;
+  }
+  static Init() {
+    Utils.onDocumentReady(() => {
+      document.querySelectorAll(EXPANDING_CARD_SELECTOR).forEach((el) => {
+        if (el && el["Expressive_ExpandingCard"] == void 0) {
+          this.init(el);
+        }
+      });
+    });
+  }
+};
+
+export {
+  EXPANDING_CARD_SELECTOR,
+  ExpandingCard
+};
+//# sourceMappingURL=chunk-N3UHGN3N.mjs.map

package/dist/js/chunks/chunk-N3UHGN3N.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/expandingCard.ts"],
+  "sourcesContent": ["import { Utils } from \"../core/utils\";\nimport {\n  Component,\n  BaseOptions,\n  InitElements,\n  InitElement,\n  Openable,\n} from \"../core/component\";\n\nexport interface ExpandingCardOptions extends BaseOptions {\n  onOpen: (el: Element) => void;\n  onClose: (el: Element) => void;\n}\n\nconst _defaults: ExpandingCardOptions = {\n  onOpen: null,\n  onClose: null,\n};\n\nexport const EXPANDING_CARD_SELECTOR =\n  \"article.expanding-card:has(> dialog.expanding-card-dialog)\";\n\n/**\n * Morphs a compact card into a full-screen modal detail surface.\n */\nexport class ExpandingCard\n  extends Component<ExpandingCardOptions>\n  implements Openable\n{\n  isOpen: boolean = false;\n  private readonly trigger: HTMLElement | null;\n  private readonly dialog: HTMLDialogElement | null;\n  private readonly closeButton: HTMLElement | null;\n  private closeGeneration = 0;\n\n  constructor(el: HTMLElement, options: Partial<ExpandingCardOptions>) {\n    super(el, options, ExpandingCard);\n    this.el[\"Expressive_ExpandingCard\"] = this;\n\n    this.options = {\n      ...ExpandingCard.defaults,\n      ...options,\n    };\n\n    this.dialog = this.el.querySelector(\n      \":scope > dialog.expanding-card-dialog\",\n    );\n    this.trigger = this.el.querySelector(\n      \":scope > .expanding-card-trigger, :scope > figure > .expanding-card-trigger\",\n    );\n    this.closeButton =\n      this.dialog?.querySelector(\".expanding-card-close\") ?? null;\n\n    if (this.trigger && this.dialog) {\n      this.trigger.ariaExpanded = \"false\";\n      if (this.dialog.id)\n        this.trigger.setAttribute(\"aria-controls\", this.dialog.id);\n      if (!this.trigger.matches(\"a[href], button, input, select, textarea\")) {\n        this.trigger.tabIndex = 0;\n        this.trigger.setAttribute(\"role\", \"button\");\n      }\n      this.dialog.ariaExpanded = \"false\";\n      this._setupEventHandlers();\n    }\n  }\n\n  static get defaults(): ExpandingCardOptions {\n    return _defaults;\n  }\n\n  static init(\n    el: HTMLElement,\n    options?: Partial<ExpandingCardOptions>,\n  ): ExpandingCard;\n  static init(\n    els: InitElements<InitElement>,\n    options?: Partial<ExpandingCardOptions>,\n  ): ExpandingCard[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options?: Partial<ExpandingCardOptions>,\n  ): ExpandingCard | ExpandingCard[] {\n    return super.init(els, options, ExpandingCard);\n  }\n\n  static getInstance(el: HTMLElement): ExpandingCard {\n    return el[\"Expressive_ExpandingCard\"];\n  }\n\n  destroy() {\n    this._removeEventHandlers();\n    this.closeGeneration++;\n    this.isOpen = false;\n    if (this.trigger) this.trigger.ariaExpanded = \"false\";\n    if (this.dialog) this.dialog.ariaExpanded = \"false\";\n    this.dialog?.classList.remove(\"expanded\");\n    if (this.dialog?.open) this.dialog.close();\n    this.el[\"Expressive_ExpandingCard\"] = undefined;\n  }\n\n  private _setupEventHandlers = () => {\n    this.trigger?.addEventListener(\"click\", this.open);\n    this.trigger?.addEventListener(\"keypress\", this._handleTriggerKeypress);\n    this.closeButton?.addEventListener(\"click\", this.close);\n    this.dialog?.addEventListener(\"cancel\", this._handleCancel);\n    this.dialog?.addEventListener(\"close\", this._handleNativeClose);\n  };\n\n  private _removeEventHandlers = () => {\n    this.trigger?.removeEventListener(\"click\", this.open);\n    this.trigger?.removeEventListener(\"keypress\", this._handleTriggerKeypress);\n    this.closeButton?.removeEventListener(\"click\", this.close);\n    this.dialog?.removeEventListener(\"cancel\", this._handleCancel);\n    this.dialog?.removeEventListener(\"close\", this._handleNativeClose);\n  };\n\n  private _handleTriggerKeypress = (event: KeyboardEvent) => {\n    if (event.key === Utils.keys.ENTER || event.key === \" \") {\n      event.preventDefault();\n      this.open();\n    }\n  };\n\n  private _handleCancel = (event: Event) => {\n    event.preventDefault();\n    this.close();\n  };\n\n  private _handleNativeClose = () => {\n    // A queued close event can arrive after a caller has reopened the dialog.\n    if (this.dialog.open) return;\n    this.closeGeneration++;\n    this.isOpen = false;\n    this.trigger.ariaExpanded = \"false\";\n    this.dialog.ariaExpanded = \"false\";\n    this.dialog.classList.remove(\"expanded\");\n  };\n\n  private _setTransitionOrigin = () => {\n    if (!this.dialog) return;\n    const card = this.el.getBoundingClientRect();\n    const media = this.el.querySelector<HTMLElement>(\n      \":scope > figure, :scope > img\",\n    );\n    const mediaRect = media?.getBoundingClientRect();\n\n    this.dialog.style.setProperty(\n      \"--md-comp-expanding-card-from-top\",\n      `${Math.max(0, card.top)}px`,\n    );\n    this.dialog.style.setProperty(\n      \"--md-comp-expanding-card-from-right\",\n      `${Math.max(0, window.innerWidth - card.right)}px`,\n    );\n    this.dialog.style.setProperty(\n      \"--md-comp-expanding-card-from-bottom\",\n      `${Math.max(0, window.innerHeight - card.bottom)}px`,\n    );\n    this.dialog.style.setProperty(\n      \"--md-comp-expanding-card-from-left\",\n      `${Math.max(0, card.left)}px`,\n    );\n    this.dialog.style.setProperty(\n      \"--md-comp-expanding-card-from-media-height\",\n      `${Math.max(0, mediaRect?.height ?? 0)}px`,\n    );\n  };\n\n  open: () => void = () => {\n    if (this.isOpen || !this.dialog || !this.trigger) return;\n    this.closeGeneration++;\n\n    this._setTransitionOrigin();\n    this.isOpen = true;\n    this.trigger.ariaExpanded = \"true\";\n    this.dialog.ariaExpanded = \"true\";\n    this.dialog.showModal();\n    // Commit the clipped start frame before asking CSS to expand it.\n    void this.dialog.offsetWidth;\n    this.dialog.classList.add(\"expanded\");\n    this.closeButton?.focus();\n\n    if (typeof this.options.onOpen === \"function\") {\n      this.options.onOpen.call(this, this.el);\n    }\n  };\n\n  close: () => void = () => {\n    if (!this.isOpen || !this.dialog || !this.trigger) return;\n    const generation = ++this.closeGeneration;\n    this._setTransitionOrigin();\n    this.isOpen = false;\n    this.trigger.ariaExpanded = \"false\";\n    this.dialog.ariaExpanded = \"false\";\n    this.dialog.classList.remove(\"expanded\");\n\n    if (typeof this.options.onClose === \"function\") {\n      this.options.onClose.call(this, this.el);\n    }\n\n    const finish = () => {\n      if (generation !== this.closeGeneration || this.isOpen || !this.dialog.open) return;\n      this.dialog.close();\n      if (this.dialog.isConnected && this.trigger.isConnected) this.trigger.focus();\n    };\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n    // Wait only for the container's actual clip transition, not arbitrary\n    // animations in consumer content. Cancellation also completes cleanup.\n    const transitions = reducedMotion ? [] : (this.dialog.getAnimations?.() ?? [])\n      .filter((animation) => (animation as CSSTransition).transitionProperty === \"clip-path\");\n    if (transitions.length === 0) finish();\n    else void Promise.allSettled(transitions.map((animation) => animation.finished)).then(finish);\n  };\n\n  static Init() {\n    Utils.onDocumentReady(() => {\n      document.querySelectorAll(EXPANDING_CARD_SELECTOR).forEach((el) => {\n        if (el && el[\"Expressive_ExpandingCard\"] == undefined) {\n          this.init(el as HTMLElement);\n        }\n      });\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-PB5L3EXF.mjs

@@ -0,0 +1,7 @@
+// src/ts/modular.ts
+var version = "0.10.0";
+
+export {
+  version
+};
+//# sourceMappingURL=chunk-PB5L3EXF.mjs.map

package/dist/js/chunks/chunk-PB5L3EXF.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/modular.ts"],
+  "sourcesContent": ["export * from './components';\nexport { Dialogs } from './behaviors/dialogs';\nexport { BottomSheets } from './behaviors/bottomSheets';\nexport { SideSheets } from './behaviors/sideSheets';\nexport { Forms } from './behaviors/forms';\nexport { AutoInit } from './components/registry';\nexport type { AutoInitOptions } from './components/registry';\n\nexport const version = '0.10.0';\n\nexport type * from './components/autocomplete';\nexport type * from './components/appBar';\nexport type * from './components/buttons';\nexport type * from './components/buttonGroup';\nexport type * from './components/cards';\nexport type * from './components/expandingCard';\nexport type * from './components/carousel';\nexport type * from './components/characterCounter';\nexport type * from './components/chips';\nexport type * from './components/datepicker';\nexport type * from './components/menu';\nexport type * from './components/lightbox';\nexport type * from './components/slider';\nexport type * from './components/scrollspy';\nexport type * from './components/select';\nexport type * from './components/navigationRail';\nexport type * from './components/tabs';\nexport type * from './components/timepicker';\nexport type * from './components/snackbar';\nexport type * from './components/tooltip';\n"],
+  "mappings": ";AAQO,IAAM,UAAU;",
+  "names": []
+}