@substrate-system/dialog 0.0.4

package/dist/index.cjs

@@ -0,0 +1,432 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  ModalWindow: () => ModalWindow
+});
+module.exports = __toCommonJS(index_exports);
+var import_web_component = require("@substrate-system/web-component");
+const ACTIVE = "active";
+const ANIMATED = "animated";
+const ANIMATION_DURATION = 250;
+const ARIA_LABEL = "aria-label";
+const CLOSE = "close";
+const CLOSE_TITLE = "Close";
+const DATA_HIDE = "data-modal-hide";
+const DATA_SHOW = "data-modal-show";
+const DATA_VISIBLE = "data-visible";
+const EMPTY_STRING = "";
+const ESCAPE = "escape";
+const FALSE = "false";
+const FOCUSIN = "focusin";
+const HIDDEN = "hidden";
+const KEYDOWN = "keydown";
+const MODAL_LABEL_FALLBACK = "modal";
+const PREFERS_REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+const SPACE = " ";
+const SPACE_REGEX = /\s+/g;
+const STATIC = "static";
+const TAB = "tab";
+const TRUE = "true";
+const FOCUSABLE_SELECTORS = [
+  "[contenteditable]",
+  '[tabindex="0"]:not([disabled])',
+  "a[href]",
+  "audio[controls]",
+  "button:not([disabled])",
+  "iframe",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "summary",
+  "textarea:not([disabled])",
+  "video[controls]"
+].join(",");
+class ModalWindow extends HTMLElement {
+  static {
+    __name(this, "ModalWindow");
+  }
+  // Element references (set during build).
+  _buttonClose = null;
+  _modal = null;
+  _modalOverlay = null;
+  _modalScroll = null;
+  _modalContent = null;
+  _focusTrap1 = null;
+  _focusTrap2 = null;
+  _heading = null;
+  static TAG = "modal-window";
+  // State.
+  _activeElement = null;
+  _isActive = false;
+  _isAnimated = true;
+  _isHideShow = false;
+  _isStatic = false;
+  _timerForHide;
+  _timerForShow;
+  _closable = true;
+  // =======================
+  // Lifecycle: constructor.
+  // =======================
+  constructor() {
+    super();
+    this._bind();
+    this._closable = this.getAttribute("closable") !== "false";
+    this._heading = this.querySelector("h1, h2, h3, h4, h5, h6");
+    const contentNodes = Array.from(this.childNodes);
+    this._buildModal(contentNodes);
+    this._setAnimationFlag();
+    this._setCloseTitle();
+    this._setModalLabel();
+    this._setStaticFlag();
+    this._setActiveFlag();
+  }
+  // ============================
+  // Helper: build modal structure.
+  // ============================
+  _buildModal(contentNodes) {
+    const createFocusTrap = /* @__PURE__ */ __name(() => {
+      const trap = document.createElement("span");
+      trap.setAttribute("aria-hidden", "true");
+      trap.setAttribute("data-modal-focus-trap", "");
+      trap.tabIndex = 0;
+      return trap;
+    }, "createFocusTrap");
+    const scroll = document.createElement("div");
+    scroll.setAttribute("data-modal-scroll", "");
+    this._modalScroll = scroll;
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-modal-overlay", "");
+    this._modalOverlay = overlay;
+    const dialog = document.createElement("div");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("data-modal-dialog", "");
+    dialog.setAttribute("role", "dialog");
+    dialog.tabIndex = -1;
+    this._modal = dialog;
+    if (this._closable) {
+      const closeBtn = document.createElement("button");
+      closeBtn.setAttribute("data-modal-close", "");
+      closeBtn.type = "button";
+      closeBtn.innerHTML = "×";
+      dialog.appendChild(closeBtn);
+      this._buttonClose = closeBtn;
+    }
+    const content = document.createElement("div");
+    content.setAttribute("data-modal-content", "");
+    this._modalContent = content;
+    contentNodes.forEach((node) => {
+      content.appendChild(node);
+    });
+    dialog.appendChild(content);
+    this._focusTrap1 = createFocusTrap();
+    this._focusTrap2 = createFocusTrap();
+    overlay.appendChild(dialog);
+    scroll.appendChild(this._focusTrap1);
+    scroll.appendChild(overlay);
+    scroll.appendChild(this._focusTrap2);
+    this.appendChild(scroll);
+  }
+  // ============================
+  // Lifecycle: watch attributes.
+  // ============================
+  static get observedAttributes() {
+    return [ACTIVE, ANIMATED, CLOSE, STATIC];
+  }
+  // ==============================
+  // Lifecycle: attributes changed.
+  // ==============================
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      if (name === ACTIVE) {
+        this._setActiveFlag();
+      }
+      if (name === ANIMATED) {
+        this._setAnimationFlag();
+      }
+      if (name === CLOSE) {
+        this._setCloseTitle();
+      }
+      if (name === STATIC) {
+        this._setStaticFlag();
+      }
+    }
+  }
+  // ===========================
+  // Lifecycle: component mount.
+  // ===========================
+  connectedCallback() {
+    this._addEvents();
+  }
+  // =============================
+  // Lifecycle: component unmount.
+  // =============================
+  disconnectedCallback() {
+    this._removeEvents();
+  }
+  // ============================
+  // Helper: bind `this` context.
+  // ============================
+  _bind() {
+    const propertyNames = Object.getOwnPropertyNames(
+      Object.getPrototypeOf(this)
+    );
+    propertyNames.forEach((name) => {
+      if (typeof this[name] === "function") {
+        this[name] = this[name].bind(this);
+      }
+    });
+  }
+  // ===================
+  // Helper: add events.
+  // ===================
+  _addEvents() {
+    this._removeEvents();
+    document.addEventListener(FOCUSIN, this._handleFocusIn);
+    document.addEventListener(KEYDOWN, this._handleKeyDown);
+    if (this._buttonClose) {
+      this._buttonClose.addEventListener("click", this._handleClickClose);
+    }
+    if (this._modalOverlay) {
+      this._modalOverlay.addEventListener("click", this._handleClickOverlay);
+    }
+  }
+  // ======================
+  // Helper: remove events.
+  // ======================
+  _removeEvents() {
+    document.removeEventListener(FOCUSIN, this._handleFocusIn);
+    document.removeEventListener(KEYDOWN, this._handleKeyDown);
+    if (this._buttonClose) {
+      this._buttonClose.removeEventListener("click", this._handleClickClose);
+    }
+    if (this._modalOverlay) {
+      this._modalOverlay.removeEventListener("click", this._handleClickOverlay);
+    }
+  }
+  // ===========================
+  // Helper: set animation flag.
+  // ===========================
+  _setAnimationFlag() {
+    this._isAnimated = this.getAttribute(ANIMATED) !== FALSE;
+  }
+  // ========================
+  // Helper: add close title.
+  // ========================
+  _setCloseTitle() {
+    const title = this.getAttribute(CLOSE) || CLOSE_TITLE;
+    if (this._buttonClose) {
+      this._buttonClose.title = title;
+      this._buttonClose.setAttribute(ARIA_LABEL, title);
+    }
+  }
+  // ========================
+  // Helper: add modal label.
+  // ========================
+  _setModalLabel() {
+    let label = MODAL_LABEL_FALLBACK;
+    if (this._heading) {
+      label = this._heading.textContent || label;
+      label = label.trim().replace(SPACE_REGEX, SPACE);
+    }
+    if (this._modal) {
+      this._modal.setAttribute(ARIA_LABEL, label);
+    }
+  }
+  // ========================
+  // Helper: set active flag.
+  // ========================
+  _setActiveFlag() {
+    const isActive = this.getAttribute(ACTIVE) === TRUE;
+    this._isActive = isActive;
+    this._toggleModalDisplay(() => {
+      if (this._isActive) {
+        this._focusModal();
+      }
+    });
+  }
+  // ========================
+  // Helper: set static flag.
+  // ========================
+  _setStaticFlag() {
+    this._isStatic = this.getAttribute(STATIC) === TRUE;
+  }
+  // ======================
+  // Helper: focus element.
+  // ======================
+  _focusElement(element) {
+    window.requestAnimationFrame(() => {
+      if (typeof element.focus === "function") {
+        element.focus();
+      }
+    });
+  }
+  // ====================
+  // Helper: focus modal.
+  // ====================
+  _focusModal() {
+    window.requestAnimationFrame(() => {
+      if (this._modal) {
+        this._modal.focus();
+      }
+      if (this._modalScroll) {
+        this._modalScroll.scrollTo(0, 0);
+      }
+    });
+  }
+  // =============================
+  // Helper: detect outside modal.
+  // =============================
+  _isOutsideModal(element) {
+    if (!this._isActive || !element || !this._modal) {
+      return false;
+    }
+    const hasElement = this.contains(element) || this._modal.contains(element);
+    const bool = !hasElement;
+    return bool;
+  }
+  // ===========================
+  // Helper: detect motion pref.
+  // ===========================
+  _isMotionOkay() {
+    const { matches } = window.matchMedia(PREFERS_REDUCED_MOTION);
+    return this._isAnimated && !matches;
+  }
+  // =====================
+  // Helper: toggle modal.
+  // =====================
+  _toggleModalDisplay(callback) {
+    if (!this._modalScroll) return;
+    this.setAttribute(ACTIVE, this._isActive);
+    const isModalVisible = this._modalScroll.getAttribute(DATA_VISIBLE) === TRUE;
+    const isMotionOkay = this._isMotionOkay();
+    const delay = isMotionOkay ? ANIMATION_DURATION : 0;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const activeElement = document.activeElement;
+    if (this._isActive && activeElement) {
+      this._activeElement = activeElement;
+    }
+    if (this._isActive) {
+      this._modalScroll.setAttribute(DATA_VISIBLE, TRUE);
+      document.documentElement.style.overflow = HIDDEN;
+      if (scrollbarWidth) {
+        document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
+      }
+      if (isMotionOkay) {
+        this._isHideShow = true;
+        this._modalScroll.setAttribute(DATA_SHOW, TRUE);
+      }
+      callback();
+      this._timerForShow = window.setTimeout(() => {
+        clearTimeout(this._timerForShow);
+        this._isHideShow = false;
+        this._modalScroll?.removeAttribute(DATA_SHOW);
+      }, delay);
+    } else if (isModalVisible) {
+      if (isMotionOkay) {
+        this._isHideShow = true;
+        this._modalScroll.setAttribute(DATA_HIDE, TRUE);
+      }
+      callback();
+      this._timerForHide = window.setTimeout(() => {
+        clearTimeout(this._timerForHide);
+        this._isHideShow = false;
+        this._modalScroll?.removeAttribute(DATA_HIDE);
+        this._modalScroll?.setAttribute(DATA_VISIBLE, FALSE);
+        document.documentElement.style.overflow = EMPTY_STRING;
+        document.documentElement.style.paddingRight = EMPTY_STRING;
+      }, delay);
+    }
+  }
+  // =====================
+  // Event: overlay click.
+  // =====================
+  _handleClickOverlay(event) {
+    if (this._isHideShow || this._isStatic) return;
+    if (!this._closable) return;
+    const target = event.target;
+    if (target === this._modalOverlay) {
+      this.close();
+    }
+  }
+  // ====================
+  // Event: close button click.
+  // ====================
+  _handleClickClose() {
+    this.close();
+  }
+  // =========================
+  // Event: focus in document.
+  // =========================
+  _handleFocusIn() {
+    if (!this._isActive || !this._modal) return;
+    const activeElement = document.activeElement;
+    const isFocusTrap1 = activeElement === this._focusTrap1;
+    const isFocusTrap2 = activeElement === this._focusTrap2;
+    const focusList = Array.from(
+      this._modal.querySelectorAll(FOCUSABLE_SELECTORS)
+    );
+    const focusItemFirst = focusList[0];
+    const focusItemLast = focusList[focusList.length - 1];
+    if (isFocusTrap1 && focusItemLast) {
+      this._focusElement(focusItemLast);
+    } else if (isFocusTrap2 && focusItemFirst) {
+      this._focusElement(focusItemFirst);
+    } else if (this._isOutsideModal(activeElement)) {
+      this._focusModal();
+    }
+  }
+  // =================
+  // Event: key press.
+  // =================
+  _handleKeyDown({ key }) {
+    if (!this._isActive) return;
+    key = key.toLowerCase();
+    if (key === ESCAPE && !this._isHideShow && !this._isStatic && this._closable) {
+      this.close();
+    }
+    if (key === TAB) {
+      this._handleFocusIn();
+    }
+  }
+  // =================
+  // Public: open modal.
+  // =================
+  open() {
+    this._isActive = true;
+    this._toggleModalDisplay(() => {
+      this._focusModal();
+    });
+  }
+  // =================
+  // Public: close modal.
+  // =================
+  close() {
+    this._isActive = false;
+    this._toggleModalDisplay(() => {
+      if (this._activeElement) {
+        this._focusElement(this._activeElement);
+      }
+    });
+  }
+}
+console.log("Defining modal-window...");
+(0, import_web_component.define)(ModalWindow.TAG, ModalWindow);
+console.log("modal-window defined");
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["import { define } from '@substrate-system/web-component'\n\n// for docuement.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'modal-window':ModalWindow\n    }\n}\n\n/**\n * Modal window web component.\n *\n * Opens/closes via the `active` attribute:\n *   modal.setAttribute('active', 'true')  // open\n *   modal.setAttribute('active', 'false') // close\n *   modal.removeAttribute('active')       // close\n *\n * Or via methods:\n *   modal.open()\n *   modal.close()\n */\n\n// ==========\n// Constants.\n// ==========\n\nconst ACTIVE = 'active'\nconst ANIMATED = 'animated'\nconst ANIMATION_DURATION = 250\nconst ARIA_LABEL = 'aria-label'\nconst CLOSE = 'close'\nconst CLOSE_TITLE = 'Close'\nconst DATA_HIDE = 'data-modal-hide'\nconst DATA_SHOW = 'data-modal-show'\nconst DATA_VISIBLE = 'data-visible'\nconst EMPTY_STRING = ''\nconst ESCAPE = 'escape'\nconst FALSE = 'false'\nconst FOCUSIN = 'focusin'\nconst HIDDEN = 'hidden'\nconst KEYDOWN = 'keydown'\nconst MODAL_LABEL_FALLBACK = 'modal'\nconst PREFERS_REDUCED_MOTION = '(prefers-reduced-motion: reduce)'\nconst SPACE = ' '\nconst SPACE_REGEX = /\\s+/g\nconst STATIC = 'static'\nconst TAB = 'tab'\nconst TRUE = 'true'\n\nconst FOCUSABLE_SELECTORS = [\n    '[contenteditable]',\n    '[tabindex=\"0\"]:not([disabled])',\n    'a[href]',\n    'audio[controls]',\n    'button:not([disabled])',\n    'iframe',\n    \"input:not([disabled]):not([type='hidden'])\",\n    'select:not([disabled])',\n    'summary',\n    'textarea:not([disabled])',\n    'video[controls]',\n].join(',')\n\n// ====================\n// The component\n// ====================\n\nexport class ModalWindow extends HTMLElement {\n    // Element references (set during build).\n    _buttonClose:HTMLButtonElement|null = null\n    _modal:HTMLDivElement|null = null\n    _modalOverlay:HTMLDivElement|null = null\n    _modalScroll:HTMLDivElement|null = null\n    _modalContent:HTMLDivElement|null = null\n    _focusTrap1:HTMLSpanElement|null = null\n    _focusTrap2:HTMLSpanElement|null = null\n    _heading:HTMLElement|null = null\n\n    static TAG:string = 'modal-window'\n\n    // State.\n    _activeElement:HTMLElement|null = null\n    _isActive = false\n    _isAnimated = true\n    _isHideShow = false\n    _isStatic = false\n    _timerForHide:number|undefined\n    _timerForShow:number|undefined\n    _closable:boolean = true\n\n    // =======================\n    // Lifecycle: constructor.\n    // =======================\n\n    constructor () {\n        super()\n\n        // Bind context.\n        this._bind()\n\n        this._closable = this.getAttribute('closable') !== 'false'\n\n        // Get heading for aria-label.\n        this._heading = this.querySelector('h1, h2, h3, h4, h5, h6')\n\n        // Collect all child nodes.\n        const contentNodes = Array.from(this.childNodes)\n\n        // Build the modal structure.\n        this._buildModal(contentNodes)\n\n        // Set animation flag.\n        this._setAnimationFlag()\n\n        // Set close title.\n        this._setCloseTitle()\n\n        // Set modal label.\n        this._setModalLabel()\n\n        // Set static flag.\n        this._setStaticFlag()\n\n        // Set active flag.\n        this._setActiveFlag()\n    }\n\n    // ============================\n    // Helper: build modal structure.\n    // ============================\n\n    _buildModal (contentNodes: Node[]) {\n        // Create focus trap\n        const createFocusTrap = () => {\n            const trap = document.createElement('span')\n            trap.setAttribute('aria-hidden', 'true')\n            trap.setAttribute('data-modal-focus-trap', '')\n            trap.tabIndex = 0\n            return trap\n        }\n\n        // Create scroll container\n        const scroll = document.createElement('div')\n        scroll.setAttribute('data-modal-scroll', '')\n        this._modalScroll = scroll\n\n        // Create overlay\n        const overlay = document.createElement('div')\n        overlay.setAttribute('data-modal-overlay', '')\n        this._modalOverlay = overlay\n\n        // Create dialog\n        const dialog = document.createElement('div')\n        dialog.setAttribute('aria-modal', 'true')\n        dialog.setAttribute('data-modal-dialog', '')\n        dialog.setAttribute('role', 'dialog')\n        dialog.tabIndex = -1\n        this._modal = dialog\n\n        // Create close button if closable\n        if (this._closable) {\n            const closeBtn = document.createElement('button')\n            closeBtn.setAttribute('data-modal-close', '')\n            closeBtn.type = 'button'\n            closeBtn.innerHTML = '×'\n            dialog.appendChild(closeBtn)\n            this._buttonClose = closeBtn\n        }\n\n        // Create content wrapper\n        const content = document.createElement('div')\n        content.setAttribute('data-modal-content', '')\n        this._modalContent = content\n\n        // Move content nodes into the content wrapper\n        contentNodes.forEach(node => {\n            content.appendChild(node)\n        })\n\n        dialog.appendChild(content)\n\n        // Create focus traps\n        this._focusTrap1 = createFocusTrap()\n        this._focusTrap2 = createFocusTrap()\n\n        // Assemble structure\n        overlay.appendChild(dialog)\n        scroll.appendChild(this._focusTrap1)\n        scroll.appendChild(overlay)\n        scroll.appendChild(this._focusTrap2)\n\n        // Add to component\n        this.appendChild(scroll)\n    }\n\n    // ============================\n    // Lifecycle: watch attributes.\n    // ============================\n\n    static get observedAttributes () {\n        return [ACTIVE, ANIMATED, CLOSE, STATIC]\n    }\n\n    // ==============================\n    // Lifecycle: attributes changed.\n    // ==============================\n\n    attributeChangedCallback (name: string, oldValue: string, newValue: string) {\n        // Different old/new values?\n        if (oldValue !== newValue) {\n            // Changed [active=\"\u2026\"] value?\n            if (name === ACTIVE) {\n                this._setActiveFlag()\n            }\n\n            // Changed [animated=\"\u2026\"] value?\n            if (name === ANIMATED) {\n                this._setAnimationFlag()\n            }\n\n            // Changed [close=\"\u2026\"] value?\n            if (name === CLOSE) {\n                this._setCloseTitle()\n            }\n\n            // Changed [static=\"\u2026\"] value?\n            if (name === STATIC) {\n                this._setStaticFlag()\n            }\n        }\n    }\n\n    // ===========================\n    // Lifecycle: component mount.\n    // ===========================\n\n    connectedCallback () {\n        this._addEvents()\n    }\n\n    // =============================\n    // Lifecycle: component unmount.\n    // =============================\n\n    disconnectedCallback () {\n        this._removeEvents()\n    }\n\n    // ============================\n    // Helper: bind `this` context.\n    // ============================\n\n    _bind () {\n        const propertyNames = Object.getOwnPropertyNames(\n            Object.getPrototypeOf(this)\n        ) as (keyof ModalWindow)[]\n\n        propertyNames.forEach((name) => {\n            // Bind functions.\n            if (typeof this[name] === 'function') {\n                // @ts-expect-error bind\n                this[name] = this[name].bind(this)\n            }\n        })\n    }\n\n    // ===================\n    // Helper: add events.\n    // ===================\n\n    _addEvents () {\n        // Prevent doubles.\n        this._removeEvents()\n\n        document.addEventListener(FOCUSIN, this._handleFocusIn)\n        document.addEventListener(KEYDOWN, this._handleKeyDown)\n\n        if (this._buttonClose) {\n            this._buttonClose.addEventListener('click', this._handleClickClose)\n        }\n        if (this._modalOverlay) {\n            this._modalOverlay.addEventListener('click', this._handleClickOverlay)\n        }\n    }\n\n    // ======================\n    // Helper: remove events.\n    // ======================\n\n    _removeEvents () {\n        document.removeEventListener(FOCUSIN, this._handleFocusIn)\n        document.removeEventListener(KEYDOWN, this._handleKeyDown)\n\n        if (this._buttonClose) {\n            this._buttonClose.removeEventListener('click', this._handleClickClose)\n        }\n        if (this._modalOverlay) {\n            this._modalOverlay.removeEventListener('click', this._handleClickOverlay)\n        }\n    }\n\n    // ===========================\n    // Helper: set animation flag.\n    // ===========================\n\n    _setAnimationFlag () {\n        this._isAnimated = this.getAttribute(ANIMATED) !== FALSE\n    }\n\n    // ========================\n    // Helper: add close title.\n    // ========================\n\n    _setCloseTitle () {\n        // Get title.\n        const title = this.getAttribute(CLOSE) || CLOSE_TITLE\n\n        // Set title.\n        if (this._buttonClose) {\n            this._buttonClose.title = title\n            this._buttonClose.setAttribute(ARIA_LABEL, title)\n        }\n    }\n\n    // ========================\n    // Helper: add modal label.\n    // ========================\n\n    _setModalLabel () {\n        // Set later.\n        let label = MODAL_LABEL_FALLBACK\n\n        // Heading exists?\n        if (this._heading) {\n            // Get text.\n            label = this._heading.textContent || label\n            label = label.trim().replace(SPACE_REGEX, SPACE)\n        }\n\n        // Set label.\n        if (this._modal) {\n            this._modal.setAttribute(ARIA_LABEL, label)\n        }\n    }\n\n    // ========================\n    // Helper: set active flag.\n    // ========================\n\n    _setActiveFlag () {\n        // Get flag.\n        const isActive = this.getAttribute(ACTIVE) === TRUE\n\n        // Set flag.\n        this._isActive = isActive\n\n        // Set display.\n        this._toggleModalDisplay(() => {\n            // Focus modal?\n            if (this._isActive) {\n                this._focusModal()\n            }\n        })\n    }\n\n    // ========================\n    // Helper: set static flag.\n    // ========================\n\n    _setStaticFlag () {\n        this._isStatic = this.getAttribute(STATIC) === TRUE\n    }\n\n    // ======================\n    // Helper: focus element.\n    // ======================\n\n    _focusElement (element: HTMLElement) {\n        window.requestAnimationFrame(() => {\n            if (typeof element.focus === 'function') {\n                element.focus()\n            }\n        })\n    }\n\n    // ====================\n    // Helper: focus modal.\n    // ====================\n\n    _focusModal () {\n        window.requestAnimationFrame(() => {\n            if (this._modal) {\n                this._modal.focus()\n            }\n            if (this._modalScroll) {\n                this._modalScroll.scrollTo(0, 0)\n            }\n        })\n    }\n\n    // =============================\n    // Helper: detect outside modal.\n    // =============================\n\n    _isOutsideModal (element?: HTMLElement) {\n        // Early exit.\n        if (!this._isActive || !element || !this._modal) {\n            return false\n        }\n\n        // Has element?\n        const hasElement = this.contains(element) || this._modal.contains(element)\n\n        // Get boolean.\n        const bool = !hasElement\n\n        // Expose boolean.\n        return bool\n    }\n\n    // ===========================\n    // Helper: detect motion pref.\n    // ===========================\n\n    _isMotionOkay () {\n        // Get pref.\n        const { matches } = window.matchMedia(PREFERS_REDUCED_MOTION)\n\n        // Expose boolean.\n        return this._isAnimated && !matches\n    }\n\n    // =====================\n    // Helper: toggle modal.\n    // =====================\n\n    _toggleModalDisplay (callback: () => void) {\n        if (!this._modalScroll) return\n\n        // @ts-expect-error boolean\n        this.setAttribute(ACTIVE, this._isActive)\n\n        // Get booleans.\n        const isModalVisible = this._modalScroll.getAttribute(DATA_VISIBLE) === TRUE\n        const isMotionOkay = this._isMotionOkay()\n\n        // Get delay.\n        const delay = isMotionOkay ? ANIMATION_DURATION : 0\n\n        // Get scrollbar width.\n        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth\n\n        // Get active element.\n        const activeElement = document.activeElement as HTMLElement\n\n        // Cache active element?\n        if (this._isActive && activeElement) {\n            this._activeElement = activeElement\n        }\n\n        // =============\n        // Modal active?\n        // =============\n\n        if (this._isActive) {\n            // Show modal.\n            this._modalScroll.setAttribute(DATA_VISIBLE, TRUE)\n\n            // Hide scrollbar.\n            document.documentElement.style.overflow = HIDDEN\n\n            // Add placeholder?\n            if (scrollbarWidth) {\n                document.documentElement.style.paddingRight = `${scrollbarWidth}px`\n            }\n\n            // Set flag.\n            if (isMotionOkay) {\n                this._isHideShow = true\n                this._modalScroll.setAttribute(DATA_SHOW, TRUE)\n            }\n\n            // Fire callback.\n            callback()\n\n            // Await CSS animation.\n            this._timerForShow = window.setTimeout(() => {\n                // Clear.\n                clearTimeout(this._timerForShow)\n\n                // Remove flag.\n                this._isHideShow = false\n                this._modalScroll?.removeAttribute(DATA_SHOW)\n            }, delay)\n        } else if (isModalVisible) {\n            // Set flag.\n            if (isMotionOkay) {\n                this._isHideShow = true\n                this._modalScroll.setAttribute(DATA_HIDE, TRUE)\n            }\n\n            // Fire callback?\n            callback()\n\n            // Await CSS animation.\n            this._timerForHide = window.setTimeout(() => {\n                // Clear.\n                clearTimeout(this._timerForHide)\n\n                // Remove flag.\n                this._isHideShow = false\n                this._modalScroll?.removeAttribute(DATA_HIDE)\n\n                // Hide modal.\n                this._modalScroll?.setAttribute(DATA_VISIBLE, FALSE)\n\n                // Show scrollbar.\n                document.documentElement.style.overflow = EMPTY_STRING\n\n                // Remove placeholder.\n                document.documentElement.style.paddingRight = EMPTY_STRING\n\n                // Delay.\n            }, delay)\n        }\n    }\n\n    // =====================\n    // Event: overlay click.\n    // =====================\n\n    _handleClickOverlay (event: MouseEvent) {\n        if (this._isHideShow || this._isStatic) return\n        if (!this._closable) return\n\n        // Get layer.\n        const target = event.target as HTMLElement\n\n        // Outside modal? (clicked directly on overlay, not dialog)\n        if (target === this._modalOverlay) {\n            this.close()\n        }\n    }\n\n    // ====================\n    // Event: close button click.\n    // ====================\n\n    _handleClickClose () {\n        this.close()\n    }\n\n    // =========================\n    // Event: focus in document.\n    // =========================\n\n    _handleFocusIn () {\n        if (!this._isActive || !this._modal) return\n\n        const activeElement = document.activeElement as HTMLElement\n\n        // Get booleans.\n        const isFocusTrap1 = activeElement === this._focusTrap1\n        const isFocusTrap2 = activeElement === this._focusTrap2\n\n        // Get focusable elements in modal.\n        const focusList = Array.from(\n            this._modal.querySelectorAll(FOCUSABLE_SELECTORS)\n        ) as HTMLElement[]\n\n        // Get first & last items.\n        const focusItemFirst = focusList[0]\n        const focusItemLast = focusList[focusList.length - 1]\n\n        // Focus trap: above?\n        if (isFocusTrap1 && focusItemLast) {\n            this._focusElement(focusItemLast)\n\n        // Focus trap: below?\n        } else if (isFocusTrap2 && focusItemFirst) {\n            this._focusElement(focusItemFirst)\n\n        // Outside modal?\n        } else if (this._isOutsideModal(activeElement)) {\n            this._focusModal()\n        }\n    }\n\n    // =================\n    // Event: key press.\n    // =================\n\n    _handleKeyDown ({ key }:KeyboardEvent) {\n        if (!this._isActive) return\n\n        key = key.toLowerCase()\n\n        // Escape key?\n        if (\n            key === ESCAPE &&\n            !this._isHideShow &&\n            !this._isStatic &&\n            this._closable\n        ) {\n            this.close()\n        }\n\n        // Tab key?\n        if (key === TAB) {\n            this._handleFocusIn()\n        }\n    }\n\n    // =================\n    // Public: open modal.\n    // =================\n\n    open () {\n        this._isActive = true\n        this._toggleModalDisplay(() => {\n            this._focusModal()\n        })\n    }\n\n    // =================\n    // Public: close modal.\n    // =================\n\n    close () {\n        this._isActive = false\n        this._toggleModalDisplay(() => {\n            if (this._activeElement) {\n                this._focusElement(this._activeElement)\n            }\n        })\n    }\n}\n\nconsole.log('Defining modal-window...')\ndefine(ModalWindow.TAG, ModalWindow)\nconsole.log('modal-window defined')\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/index.css

@@ -0,0 +1,164 @@
+@media (prefers-reduced-motion: reduce) {
+  *, :after, :before {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+@keyframes SHOW-OVERLAY {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes SHOW-DIALOG {
+  0% {
+    transform: scale(.95);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes HIDE-OVERLAY {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes HIDE-DIALOG {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(.95);
+  }
+}
+
+[data-modal-focus-trap] {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+[data-modal-scroll] {
+  width: 100%;
+  height: 100%;
+  z-index: var(--modal-overlay-z-index, 100000);
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden auto;
+}
+
+[data-modal-scroll][data-visible="true"] {
+  display: block;
+}
+
+[data-modal-overlay] {
+  background-color: var(--modal-overlay-background-color, #00000080);
+  padding-top: var(--modal-overlay-padding-top, 20px);
+  padding-left: var(--modal-overlay-padding-left, 20px);
+  padding-right: var(--modal-overlay-padding-right, 20px);
+  padding-bottom: var(--modal-overlay-padding-bottom, 20px);
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+}
+
+[data-modal-dialog] {
+  background-color: var(--modal-dialog-background-color, #fff);
+  border-radius: var(--modal-dialog-border-radius, 5px);
+  box-shadow: var(--modal-dialog-box-shadow, 0 2px 5px 0 #00000080);
+  padding-top: var(--modal-dialog-padding-top, 20px);
+  padding-left: var(--modal-dialog-padding-left, 20px);
+  padding-right: var(--modal-dialog-padding-right, 20px);
+  padding-bottom: var(--modal-dialog-padding-bottom, 20px);
+  width: var(--modal-dialog-width, 500px);
+  max-width: 100%;
+  position: relative;
+}
+
+[data-modal-show="true"] [data-modal-overlay] {
+  animation-name: SHOW-OVERLAY;
+  animation-duration: .25s;
+}
+
+[data-modal-show="true"] [data-modal-dialog] {
+  animation-name: SHOW-DIALOG;
+  animation-duration: .25s;
+}
+
+[data-modal-hide="true"] [data-modal-overlay] {
+  opacity: 0;
+  animation-name: HIDE-OVERLAY;
+  animation-duration: .25s;
+}
+
+[data-modal-hide="true"] [data-modal-dialog] {
+  animation-name: HIDE-DIALOG;
+  animation-duration: .25s;
+  transform: scale(.95);
+}
+
+[data-modal-close] {
+  appearance: none;
+  touch-action: none;
+  user-select: none;
+  color: var(--modal-close-color, #fff);
+  background-color: var(--modal-close-background-color, #000);
+  border-radius: var(--modal-close-border-radius, 50%);
+  box-shadow: var(--modal-close-box-shadow, 0 0 0 1px #fff);
+  display: var(--modal-close-display, block);
+  cursor: pointer;
+  font-family: var(--modal-close-font-family, "Arial", sans-serif);
+  font-size: var(--modal-close-font-size, 23px);
+  text-align: center;
+  line-height: var(--modal-close-line-height, 26px);
+  width: var(--modal-close-width, 26px);
+  border: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(40%, -40%);
+}
+
+[data-modal-close]:hover {
+  color: var(--modal-close-color-hover, #000);
+  background-color: var(--modal-close-background-color-hover, #fff);
+  box-shadow: var(--modal-close-box-shadow-hover, 0 0 0 1px #000);
+}
+
+@supports selector(:focus-visible) {
+  [data-modal-close]:focus-visible {
+    color: var(--modal-close-color-hover, #000);
+    background-color: var(--modal-close-background-color-hover, #fff);
+    box-shadow: var(--modal-close-box-shadow-hover, 0 0 0 1px #000);
+  }
+}
+
+@supports not selector(:focus-visible) {
+  [data-modal-close]:focus {
+    color: var(--modal-close-color-hover, #000);
+    background-color: var(--modal-close-background-color-hover, #fff);
+    box-shadow: var(--modal-close-box-shadow-hover, 0 0 0 1px #000);
+  }
+}