@expressivecss/expressive 0.2.0 → 0.4.0

package/dist/js/expressive.mjs

@@ -1,10 +1,3 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-
 // src/ts/core/utils.ts
 var _Utils = class _Utils {
   /**
@@ -220,7 +213,7 @@ var _Utils = class _Utils {
    * Renders a button with optional callback function
    */
   static createButton(container, text, className = [], visibility = true, callback = null) {
-    className = className.concat(["btn", "waves-effect", "text"]);
+    className = className.concat(["waves-effect", "text"]);
     const button = document.createElement("button");
     button.className = className.join(" ");
     button.style.visibility = visibility ? "visible" : "hidden";
@@ -399,11 +392,9 @@ var Component = class {
 // src/ts/components/cards.ts
 var _defaults = {
   onOpen: null,
-  onClose: null,
-  inDuration: 225,
-  outDuration: 300
+  onClose: null
 };
-var CARDS_SELECTOR = ".card, article:has(> aside), article:has(.card-reveal)";
+var CARDS_SELECTOR = "article:has(> aside)";
 var Cards = class _Cards extends Component {
   constructor(el, options) {
     super(el, options, _Cards);
@@ -449,16 +440,10 @@ var Cards = class _Cards extends Component {
      * Show card reveal.
      */
     this.open = () => {
-      if (this.isOpen) return;
+      if (this.isOpen || !this.cardReveal) return;
       this.isOpen = true;
-      this.el.style.overflow = "hidden";
-      this.cardReveal.style.display = "block";
       this.cardReveal.ariaExpanded = "true";
       if (this.cardRevealClose) this.cardRevealClose.tabIndex = 0;
-      setTimeout(() => {
-        this.cardReveal.style.transition = `transform ${this.options.outDuration}ms ease`;
-        this.cardReveal.style.transform = "translateY(-100%)";
-      }, 1);
       if (typeof this.options.onOpen === "function") {
         this.options.onOpen.call(this);
       }
@@ -468,17 +453,11 @@ var Cards = class _Cards extends Component {
      * Hide card reveal.
      */
     this.close = () => {
-      if (!this.isOpen) return;
+      if (!this.isOpen || !this.cardReveal) return;
       this.isOpen = false;
-      this.cardReveal.style.transition = `transform ${this.options.inDuration}ms ease`;
-      this.cardReveal.style.transform = "translateY(0)";
-      setTimeout(() => {
-        this.cardReveal.style.display = "none";
-        this.cardReveal.ariaExpanded = "false";
-        this._activators.forEach((el) => el.tabIndex = 0);
-        if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
-        this.el.style.overflow = this.initialOverflow;
-      }, this.options.inDuration);
+      this.cardReveal.ariaExpanded = "false";
+      this._activators.forEach((el) => el.tabIndex = 0);
+      if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
       if (typeof this.options.onClose === "function") {
         this.options.onClose.call(this);
       }
@@ -490,15 +469,14 @@ var Cards = class _Cards extends Component {
       ...options
     };
     this._activators = [];
-    this.cardReveal = this.el.querySelector(":scope > aside, .card-reveal");
+    this.cardReveal = this.el.querySelector(":scope > aside");
     if (this.cardReveal) {
-      this.initialOverflow = getComputedStyle(this.el).overflow;
       this._activators = Array.from(this.el.querySelectorAll(".activator"));
       this._activators.forEach((el2) => {
         if (el2) el2.tabIndex = 0;
       });
       this.cardRevealClose = this.cardReveal.querySelector(
-        ".card-title, :scope > :is(h1, h2, h3, h4, h5, h6)"
+        ":scope > :is(h1, h2, h3, h4, h5, h6)"
       );
       if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
       this.cardReveal.ariaExpanded = "false";
@@ -575,7 +553,7 @@ var _Dropdown = class _Dropdown extends Component {
         this.close();
         return;
       }
-      const leaveToDropdownContent = !!toEl.closest(".dropdown-content, menu");
+      const leaveToDropdownContent = !!(this.dropdownEl && toEl && this.dropdownEl.contains(toEl));
       let leaveToActiveDropdownTrigger = false;
       const closestTrigger = toEl.closest(".dropdown-trigger");
       if (closestTrigger && !!closestTrigger["Expressive_Dropdown"] && closestTrigger["Expressive_Dropdown"].isOpen) {
@@ -587,9 +565,10 @@ var _Dropdown = class _Dropdown extends Component {
     };
     this._handleDocumentClick = (e) => {
       const target = e.target;
-      if (this.options.closeOnClick && target.closest(".dropdown-content, menu") && !this.isTouchMoving) {
+      if (this._isSubmenuTriggerClick(target)) return;
+      if (this.options.closeOnClick && this.dropdownEl?.contains(target) && !this.isTouchMoving) {
         this.close();
-      } else if (!target.closest(".dropdown-content, menu")) {
+      } else if (!this.dropdownEl?.contains(target)) {
         setTimeout(() => {
           if (this.isOpen) {
             this.close();
@@ -607,14 +586,29 @@ var _Dropdown = class _Dropdown extends Component {
     };
     this._handleDocumentTouchmove = (e) => {
       const target = e.target;
-      if (target.closest(".dropdown-content, menu")) {
+      if (this.dropdownEl?.contains(target)) {
         this.isTouchMoving = true;
       }
     };
     this._handleDropdownClick = (e) => {
+      const target = e.target;
+      const li = target.closest("li");
+      if (li && this._isSubmenuTriggerClick(target)) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._toggleSubmenu(li);
+        return;
+      }
       if (typeof this.options.onItemClick === "function") {
-        const itemEl = e.target.closest("li");
-        this.options.onItemClick.call(this, itemEl);
+        this.options.onItemClick.call(this, li);
+      }
+    };
+    this._handleSubmenuAlign = (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      const li = target.closest("li");
+      if (li?.querySelector(":scope > menu") && this.dropdownEl?.contains(li)) {
+        this._alignSubmenu(li);
       }
     };
     this._handleDropdownKeydown = (e) => {
@@ -622,37 +616,70 @@ var _Dropdown = class _Dropdown extends Component {
       if (Utils.keys.TAB.includes(e.key)) {
         e.preventDefault();
         this.close();
+      } else if (Utils.keys.ARROW_RIGHT.includes(e.key) && this.isOpen) {
+        const li = this._focusedRow(e);
+        if (li?.querySelector(":scope > menu")) {
+          e.preventDefault();
+          li.classList.add("open");
+          this._alignSubmenu(li);
+          this._syncSubmenuAria(li, true);
+          const first = li.querySelector(":scope > menu > li");
+          first?.focus();
+        }
+      } else if (Utils.keys.ARROW_LEFT.includes(e.key) && this.isOpen) {
+        const submenu = this._containingSubmenu(e);
+        if (submenu) {
+          e.preventDefault();
+          const parentLi = submenu.parentElement;
+          parentLi.classList.remove("open", "submenu-start");
+          this._syncSubmenuAria(parentLi, false);
+          parentLi.focus();
+        }
       } else if (arrowUpOrDown && this.isOpen) {
         e.preventDefault();
         const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
+        const list = this._containingSubmenu(e) ?? this.dropdownEl;
         let newFocusedIndex = this.focusedIndex;
         let hasFoundNewIndex = false;
         do {
           newFocusedIndex = newFocusedIndex + direction;
-          if (!!this.dropdownEl.children[newFocusedIndex] && this.dropdownEl.children[newFocusedIndex].tabIndex !== -1) {
+          if (!!list.children[newFocusedIndex] && list.children[newFocusedIndex].tabIndex !== -1) {
             hasFoundNewIndex = true;
             break;
           }
-        } while (newFocusedIndex < this.dropdownEl.children.length && newFocusedIndex >= 0);
+        } while (newFocusedIndex < list.children.length && newFocusedIndex >= 0);
         if (hasFoundNewIndex) {
           if (this.focusedIndex >= 0)
-            this.dropdownEl.children[this.focusedIndex].classList.remove("active");
+            list.children[this.focusedIndex]?.classList.remove("active");
           this.focusedIndex = newFocusedIndex;
-          this._focusFocusedItem();
+          const item = list.children[this.focusedIndex];
+          item.classList.add("active");
+          item.focus({ preventScroll: true });
         }
       } else if (Utils.keys.ENTER.includes(e.key) && this.isOpen) {
-        const focusedElement = this.dropdownEl.children[this.focusedIndex];
+        const li = this._focusedRow(e);
+        if (li?.querySelector(":scope > menu")) {
+          e.preventDefault();
+          this._toggleSubmenu(li);
+          return;
+        }
+        const focusedElement = li ?? this.dropdownEl.children[this.focusedIndex];
         const activatableElement = focusedElement?.querySelector("a, button");
         if (!!activatableElement) {
           activatableElement.click();
-        } else if (!!focusedElement) {
-          if (focusedElement instanceof HTMLElement) {
-            focusedElement.click();
-          }
+        } else if (focusedElement instanceof HTMLElement) {
+          focusedElement.click();
         }
       } else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
         e.preventDefault();
-        this.close();
+        const openSub = this.dropdownEl.querySelector("li.open");
+        if (openSub) {
+          openSub.classList.remove("open", "submenu-start");
+          this._syncSubmenuAria(openSub, false);
+          openSub.focus();
+        } else {
+          this.close();
+        }
       }
       const keyText = e.key.toLowerCase();
       const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
@@ -666,7 +693,8 @@ var _Dropdown = class _Dropdown extends Component {
       if (isLetter && !specialKeys.includes(e.key)) {
         this.filterQuery.push(keyText);
         const string = this.filterQuery.join("");
-        const newOptionEl = Array.from(this.dropdownEl.querySelectorAll("li")).find(
+        const list = this._containingSubmenu(e) ?? this.dropdownEl;
+        const newOptionEl = Array.from(list.querySelectorAll(":scope > li")).find(
           (el) => el.textContent.trim().toLowerCase().indexOf(string) === 0
         );
         if (newOptionEl) {
@@ -708,6 +736,7 @@ var _Dropdown = class _Dropdown extends Component {
       if (!this.isOpen) return;
       this.isOpen = false;
       this.focusedIndex = -1;
+      this._closeSubmenus();
       if (typeof this.options.onCloseStart === "function") {
         this.options.onCloseStart.call(this, this.el);
       }
@@ -731,7 +760,6 @@ var _Dropdown = class _Dropdown extends Component {
     _Dropdown._dropdowns.push(this);
     this.id = Utils.getIdFromTrigger(el);
     this.dropdownEl = document.getElementById(this.id);
-    this.dropdownEl?.classList.add("dropdown-content");
     this.options = {
       ..._Dropdown.defaults,
       ...options
@@ -744,6 +772,7 @@ var _Dropdown = class _Dropdown extends Component {
     this.el.ariaExpanded = "false";
     this._moveDropdownToElement();
     this._makeDropdownFocusable();
+    this._setupSubmenus();
     this._setupEventHandlers();
   }
   static get defaults() {
@@ -772,6 +801,9 @@ var _Dropdown = class _Dropdown extends Component {
   _setupEventHandlers() {
     this.el.addEventListener("keydown", this._handleTriggerKeydown);
     this.dropdownEl?.addEventListener("click", this._handleDropdownClick);
+    if (this.dropdownEl?.querySelector(":scope > li > menu")) {
+      this.dropdownEl.addEventListener("mouseover", this._handleSubmenuAlign);
+    }
     if (this.options.hover) {
       this.el.addEventListener("mouseenter", this._handleMouseEnter);
       this.el.addEventListener("mouseleave", this._handleMouseLeave);
@@ -783,6 +815,7 @@ var _Dropdown = class _Dropdown extends Component {
   _removeEventHandlers() {
     this.el.removeEventListener("keydown", this._handleTriggerKeydown);
     this.dropdownEl?.removeEventListener("click", this._handleDropdownClick);
+    this.dropdownEl?.removeEventListener("mouseover", this._handleSubmenuAlign);
     if (this.options.hover) {
       this.el.removeEventListener("mouseenter", this._handleMouseEnter);
       this.el.removeEventListener("mouseleave", this._handleMouseLeave);
@@ -803,6 +836,68 @@ var _Dropdown = class _Dropdown extends Component {
     this.dropdownEl?.removeEventListener("keydown", this._handleDropdownKeydown);
     window.removeEventListener("resize", this._handleWindowResize);
   }
+  _isSubmenuTriggerClick(target) {
+    if (!this.dropdownEl) return false;
+    const li = target.closest("li");
+    if (!li || !this.dropdownEl.contains(li)) return false;
+    const submenu = li.querySelector(":scope > menu");
+    if (!submenu) return false;
+    return !submenu.contains(target);
+  }
+  _setupSubmenus() {
+    this.dropdownEl?.querySelectorAll("li").forEach((li) => {
+      if (!li.querySelector(":scope > menu")) return;
+      const trigger = li.querySelector(":scope > a, :scope > button, :scope > span") ?? li;
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-expanded", "false");
+    });
+  }
+  _toggleSubmenu(li) {
+    const open = !li.classList.contains("open");
+    li.parentElement?.querySelectorAll(":scope > li.open").forEach((other) => {
+      if (other !== li) {
+        other.classList.remove("open", "submenu-start");
+        this._syncSubmenuAria(other, false);
+      }
+    });
+    li.classList.toggle("open", open);
+    if (open) this._alignSubmenu(li);
+    this._syncSubmenuAria(li, open);
+  }
+  _syncSubmenuAria(li, open) {
+    const trigger = li.querySelector(":scope > a, :scope > button, :scope > span") ?? li;
+    trigger.setAttribute("aria-expanded", open ? "true" : "false");
+  }
+  _alignSubmenu(li) {
+    const menu = li.querySelector(":scope > menu");
+    if (!menu) return;
+    const wasHidden = getComputedStyle(menu).display === "none";
+    if (wasHidden) menu.style.display = "block";
+    li.classList.remove("submenu-start");
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth - 8) li.classList.add("submenu-start");
+    if (wasHidden) menu.style.display = "";
+  }
+  _closeSubmenus() {
+    this.dropdownEl?.querySelectorAll("li.open").forEach((li) => {
+      li.classList.remove("open", "submenu-start");
+      this._syncSubmenuAria(li, false);
+    });
+  }
+  _containingSubmenu(e) {
+    const target = e.target;
+    if (!(target instanceof Element)) return null;
+    const submenu = target.closest("li > menu");
+    if (submenu instanceof HTMLElement && this.dropdownEl?.contains(submenu)) return submenu;
+    return null;
+  }
+  _focusedRow(e) {
+    const target = e.target;
+    if (!(target instanceof Element)) return null;
+    const li = target.closest("li");
+    if (li instanceof HTMLElement && this.dropdownEl?.contains(li)) return li;
+    return null;
+  }
   _resetDropdownStyles() {
     this.dropdownEl.style.display = "";
     this._resetDropdownPositioningStyles();
@@ -831,7 +926,7 @@ var _Dropdown = class _Dropdown extends Component {
     if (!this.dropdownEl) return;
     this.dropdownEl.popover = "";
     this.dropdownEl.tabIndex = 0;
-    Array.from(this.dropdownEl.children).forEach((el) => {
+    this.dropdownEl.querySelectorAll(":scope li, :scope > hr").forEach((el) => {
       if (el instanceof HTMLHRElement || el.classList.contains("divider")) {
         el.setAttribute("tabindex", "-1");
         return;
@@ -1179,10 +1274,10 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
   }
   _setupDropdown() {
-    this.container = document.createElement("ul");
+    this.container = document.createElement("menu");
     this.container.style.maxHeight = this.options.maxDropDownHeight;
     this.container.id = `autocomplete-options-${Utils.guid()}`;
-    this.container.classList.add("autocomplete-content", "dropdown-content");
+    this.container.classList.add("autocomplete-content");
     this.container.ariaExpanded = "true";
     this.el.setAttribute("data-target", this.container.id);
     this.menuItems.forEach((menuItem) => {
@@ -1363,19 +1458,6 @@ var _Autocomplete = class _Autocomplete extends Component {
     this._updateSelectedInfo();
     this._triggerChanged();
   }
-  /**
-   * Sets selected values.
-   * @deprecated @see https://github.com/materializecss/materialize/issues/552
-   * @param entries
-   */
-  setValues(entries) {
-    this.selectedValues = entries;
-    this._updateSelectedInfo();
-    if (!this.options.isMultiSelect) {
-      this._refreshInputText();
-    }
-    this._triggerChanged();
-  }
   /**
    * Select a specific autocomplete option via id-property.
    * @param id The id of a data-entry.
@@ -1401,14 +1483,6 @@ var _Autocomplete = class _Autocomplete extends Component {
     this._updateSelectedInfo();
     this._triggerChanged();
   }
-  selectOptions(ids) {
-    const entries = this.menuItems.filter(
-      (item) => !(ids.indexOf(item.id) === -1)
-    );
-    if (!entries) return;
-    this.selectedValues = entries;
-    this._renderDropdown();
-  }
 };
 /**
  * The three-dot loading indicator, parsed once and cloned thereafter.
@@ -1425,7 +1499,7 @@ var _defaults4 = {
   data: [],
   placeholder: "",
   secondaryPlaceholder: "",
-  closeIconClass: "material-icons",
+  closeIconClass: "material-symbols",
   autocompleteOptions: {},
   autocompleteOnly: false,
   limit: Infinity,
@@ -1488,7 +1562,7 @@ var _Chips = class _Chips extends Component {
       this._renderChips();
     }
     if (this.options.allowUserInput) {
-      this.el.classList.add("input-field");
+      this.el.classList.add("field");
       this._setupInput();
       this._setupEventHandlers();
       this.el.append(this._input);
@@ -2064,83 +2138,76 @@ var _defaults6 = {
 var FloatingActionButton = class _FloatingActionButton extends Component {
   constructor(el, options) {
     super(el, options, _FloatingActionButton);
-    /** Toolbar-mode backdrop, kept so closing can take it back out. */
-    this._backdrop = null;
-    this._handleFABClick = () => {
-      this._handleFABToggle();
-    };
-    this._handleFABKeyPress = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
-        this._handleFABToggle();
-      }
-    };
-    this._handleFABToggle = () => {
-      if (this.isOpen) {
-        this.close();
-      } else {
-        this.open();
-      }
-    };
-    this._handleDocumentClick = (e) => {
-      const elem = e.target;
-      if (elem !== this._menu) this.close();
-    };
     /**
      * Open FAB.
      */
     this.open = () => {
       if (this.isOpen) return;
-      if (this.options.toolbarEnabled) this._animateInToolbar();
-      else this._animateInFAB();
       this.isOpen = true;
+      this.el.classList.add("active");
+      this._anchor?.setAttribute("aria-expanded", "true");
+      document.addEventListener("click", this._handleDocumentClick);
+      document.addEventListener("keydown", this._handleDocumentKeydown);
     };
     /**
      * Close FAB.
      */
     this.close = () => {
       if (!this.isOpen) return;
-      if (this.options.toolbarEnabled) {
-        window.removeEventListener("scroll", this.close, true);
-        document.body.removeEventListener("click", this._handleDocumentClick, true);
-        this._animateOutToolbar();
-      } else {
-        this._animateOutFAB();
-      }
       this.isOpen = false;
+      this.el.classList.remove("active");
+      this._anchor?.setAttribute("aria-expanded", "false");
+      document.removeEventListener("click", this._handleDocumentClick);
+      document.removeEventListener("keydown", this._handleDocumentKeydown);
+    };
+    this._handleFABClick = (e) => {
+      e.stopPropagation();
+      this._toggle();
+    };
+    this._handleAnchorKeydown = (e) => {
+      if (Utils.keys.ENTER.includes(e.key) || e.key === " ") {
+        e.preventDefault();
+        this._toggle();
+      }
+    };
+    this._handleDocumentKeydown = (e) => {
+      if (Utils.keys.ESC.includes(e.key)) this.close();
+    };
+    this._handleDocumentClick = (e) => {
+      const target = e.target;
+      if (!(target instanceof Node) || this.el.contains(target)) return;
+      this.close();
     };
     this.el["Expressive_FloatingActionButton"] = this;
+    const fromMarkup = this._directionFromClass();
+    const toolbar = el.classList.contains("toolbar") || options.toolbarEnabled === true;
+    const clickToToggle = el.classList.contains("click-to-toggle") || options.hoverEnabled === false;
     this.options = {
       ..._FloatingActionButton.defaults,
-      ...options
+      ...options,
+      direction: options.direction ?? fromMarkup ?? _FloatingActionButton.defaults.direction,
+      hoverEnabled: !clickToToggle,
+      toolbarEnabled: toolbar
     };
     this.isOpen = false;
-    this._anchor = this.el.querySelector("a, button");
-    this._menu = this.el.querySelector("ul");
-    this._floatingBtns = Array.from(this.el.querySelectorAll("ul .btn-floating"));
-    this._floatingBtnsReverse = this._floatingBtns.reverse();
-    this.offsetY = 0;
-    this.offsetX = 0;
+    this._anchor = this.el.querySelector(":scope > a, :scope > button");
+    this._menu = this.el.querySelector("ul, menu");
     this.el.classList.add(`direction-${this.options.direction}`);
-    if (this._anchor) this._anchor.tabIndex = 0;
-    if (this._menu) this._menu.ariaExpanded = "false";
-    if (this.options.direction === "top")
-      this.offsetY = 40;
-    else if (this.options.direction === "right")
-      this.offsetX = -40;
-    else if (this.options.direction === "bottom")
-      this.offsetY = -40;
-    else
-      this.offsetX = 40;
+    if (clickToToggle) this.el.classList.add("click-to-toggle");
+    if (toolbar) this.el.classList.add("toolbar");
+    if (this._anchor) {
+      this._anchor.setAttribute("aria-haspopup", "menu");
+      this._anchor.setAttribute("aria-expanded", "false");
+      if (this._anchor instanceof HTMLAnchorElement && !this._anchor.hasAttribute("href") && this._anchor.tabIndex < 0) {
+        this._anchor.tabIndex = 0;
+      }
+    }
+    if (this._menu) this._menu.setAttribute("role", "menu");
     this._setupEventHandlers();
   }
   static get defaults() {
     return _defaults6;
   }
-  /**
-   * Initializes instances of FloatingActionButton.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
   static init(els, options = {}) {
     return super.init(els, options, _FloatingActionButton);
   }
@@ -2148,229 +2215,109 @@ var FloatingActionButton = class _FloatingActionButton extends Component {
     return el["Expressive_FloatingActionButton"];
   }
   destroy() {
-    this._removeEventHandlers();
     this.close();
+    this._removeEventHandlers();
     this.el["Expressive_FloatingActionButton"] = void 0;
   }
+  _directionFromClass() {
+    const match = [...this.el.classList].find((c) => c.startsWith("direction-"));
+    const value = match?.slice("direction-".length);
+    if (value === "top" || value === "right" || value === "bottom" || value === "left") {
+      return value;
+    }
+    return null;
+  }
   _setupEventHandlers() {
-    if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
-      this.el.addEventListener("mouseenter", this.open);
-      this.el.addEventListener("mouseleave", this.close);
-    } else {
-      this.el.addEventListener("click", this._handleFABClick);
+    this.el.addEventListener("click", this._handleFABClick);
+    if (this._anchor instanceof HTMLAnchorElement && !this._anchor.hasAttribute("href")) {
+      this._anchor.addEventListener("keydown", this._handleAnchorKeydown);
     }
-    this.el.addEventListener("keypress", this._handleFABKeyPress);
   }
   _removeEventHandlers() {
-    if (this.options.hoverEnabled && !this.options.toolbarEnabled) {
-      this.el.removeEventListener("mouseenter", this.open);
-      this.el.removeEventListener("mouseleave", this.close);
-    } else {
-      this.el.removeEventListener("click", this._handleFABClick);
-    }
-    this.el.removeEventListener("keypress", this._handleFABKeyPress);
-  }
-  _animateInFAB() {
-    this.el.classList.add("active");
-    if (this._menu) this._menu.ariaExpanded = "true";
-    const delayIncrement = 40;
-    const duration = 275;
-    this._floatingBtnsReverse.forEach((el, index) => {
-      const delay = delayIncrement * index;
-      el.style.transition = "none";
-      el.style.opacity = "0";
-      el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
-      setTimeout(() => {
-        el.style.opacity = "0.4";
-        setTimeout(() => {
-          el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
-          el.style.opacity = "1";
-          el.style.transform = "translate(0, 0) scale(1)";
-          el.tabIndex = 0;
-        }, 1);
-      }, delay);
-    });
-  }
-  _animateOutFAB() {
-    const duration = 175;
-    setTimeout(() => {
-      this.el.classList.remove("active");
-      if (this._menu) this._menu.ariaExpanded = "false";
-    }, duration);
-    this._floatingBtnsReverse.forEach((el) => {
-      el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
-      el.style.opacity = "0";
-      el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
-      el.tabIndex = -1;
-    });
+    this.el.removeEventListener("click", this._handleFABClick);
+    this._anchor?.removeEventListener("keydown", this._handleAnchorKeydown);
   }
-  _animateInToolbar() {
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    const btnRect = this.el.getBoundingClientRect();
-    const fabColor = getComputedStyle(this._anchor).backgroundColor;
-    const backdrop = document.createElement("div");
-    backdrop.classList.add("fab-backdrop");
-    backdrop.style.backgroundColor = fabColor;
-    this._anchor.append(backdrop);
-    this._backdrop = backdrop;
-    const backdropWidth = backdrop.clientWidth;
-    const scaleFactor = backdropWidth > 0 ? windowWidth / backdropWidth : 1;
-    this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
-    this.offsetY = windowHeight - btnRect.bottom;
-    this.btnBottom = btnRect.bottom;
-    this.btnLeft = btnRect.left;
-    this.btnWidth = btnRect.width;
-    this.el.classList.add("active");
-    this.el.style.textAlign = "center";
-    this.el.style.width = "100%";
-    this.el.style.bottom = "0";
-    this.el.style.left = "0";
-    this.el.style.transform = "translateX(" + this.offsetX + "px)";
-    this.el.style.transition = "none";
-    if (this._menu) this._menu.ariaExpanded = "true";
-    this._anchor.style.transform = `translateY(${this.offsetY}px)`;
-    this._anchor.style.transition = "none";
-    setTimeout(() => {
-      this.el.style.transform = "";
-      this.el.style.transition = "transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s";
-      this._anchor.style.overflow = "visible";
-      this._anchor.style.transform = "";
-      this._anchor.style.transition = "transform .2s";
-      setTimeout(() => {
-        this.el.style.overflow = "hidden";
-        this.el.style.backgroundColor = fabColor;
-        backdrop.style.transform = "scale(" + scaleFactor + ")";
-        backdrop.style.transition = "transform .2s cubic-bezier(0.550, 0.055, 0.675, 0.190)";
-        this._menu.querySelectorAll("li > a").forEach((a) => {
-          a.style.opacity = "1";
-          a.tabIndex = 0;
-        });
-        window.addEventListener("scroll", this.close, true);
-        document.body.addEventListener("click", this._handleDocumentClick, true);
-      }, 100);
-    }, 0);
-  }
-  /**
-   * Reverse {@link _animateInToolbar}.
-   *
-   * Closing used to only unbind the listeners, leaving the FAB stretched
-   * across the viewport with its backdrop still in the DOM - and a fresh
-   * backdrop appended on every subsequent open.
-   */
-  _animateOutToolbar() {
-    const backdrop = this._backdrop;
-    this._backdrop = null;
-    this._menu?.querySelectorAll("li > a").forEach((a) => {
-      a.style.opacity = "";
-      a.tabIndex = -1;
-    });
-    if (backdrop) {
-      backdrop.style.transition = "transform .2s";
-      backdrop.style.transform = "scale(0)";
-    }
-    this.el.style.overflow = "";
-    this.el.style.backgroundColor = "";
-    this.el.style.transition = "transform .2s";
-    this.el.style.transform = `translateX(${this.offsetX}px)`;
-    this._anchor.style.transition = "transform .2s";
-    this._anchor.style.transform = `translateY(${this.offsetY}px)`;
-    setTimeout(() => {
-      backdrop?.remove();
-      this.el.classList.remove("active");
-      if (this._menu) this._menu.ariaExpanded = "false";
-      this.el.style.textAlign = "";
-      this.el.style.width = "";
-      this.el.style.bottom = "";
-      this.el.style.left = "";
-      this.el.style.transform = "";
-      this.el.style.transition = "";
-      this._anchor.style.overflow = "";
-      this._anchor.style.transform = "";
-      this._anchor.style.transition = "";
-    }, 200);
+  _toggle() {
+    if (this.isOpen) this.close();
+    else this.open();
   }
 };
 
 // src/ts/components/carousel.ts
 var _defaults7 = {
   duration: 200,
-  // ms
   dist: -100,
-  // zoom scale TODO: make this more intuitive as an option
   shift: 0,
-  // spacing for center image
   padding: 0,
-  // Padding between non center items
   numVisible: 5,
-  // Number of visible items in carousel
   fullWidth: false,
-  // Change to full width styles
   indicators: false,
-  // Toggle indicators
   noWrap: false,
-  // Don't wrap around and cycle through items.
   onCycleTo: null
-  // Callback for when a new slide is cycled to.
 };
-var Carousel = class _Carousel extends Component {
+var _Carousel = class _Carousel extends Component {
   constructor(el, options) {
     super(el, options, _Carousel);
-    /** The index of the center carousel item. */
     this.center = 0;
-    // Built once per instance. Creating the throttled function inside the
-    // handler - as this used to - produced a fresh closure per resize event and
-    // never actually called it, so resizing did nothing at all.
+    this._ownIndicators = false;
+    this._trackEl = null;
+    this._ignoreScroll = false;
+    this._trackRaf = null;
+    this._started = false;
     this._handleThrottledResize = Utils.throttle(() => this._handleResize(), 200);
     this._handleCarouselTap = (e) => {
-      if (e.type === "mousedown" && e.target.tagName === "IMG") {
+      if (e.pointerType === "mouse" && e.button !== 0) return;
+      if (e.target instanceof HTMLElement && e.target.tagName === "IMG") {
         e.preventDefault();
       }
       this.pressed = true;
       this.dragged = false;
       this.verticalDragged = false;
-      this.reference = this._xpos(e);
-      this.referenceY = this._ypos(e);
+      this.reference = e.clientX;
+      this.referenceY = e.clientY;
       this.velocity = this.amplitude = 0;
       this.frame = this.offset;
       this.timestamp = Date.now();
-      clearInterval(this.ticker);
-      this.ticker = setInterval(this._track, 100);
+      try {
+        this.el.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      if (this._trackRaf !== null) cancelAnimationFrame(this._trackRaf);
+      const loop = () => {
+        this._track();
+        if (this.pressed) this._trackRaf = requestAnimationFrame(loop);
+        else this._trackRaf = null;
+      };
+      this._trackRaf = requestAnimationFrame(loop);
     };
     this._handleCarouselDrag = (e) => {
-      let x, y, delta, deltaY;
-      if (this.pressed) {
-        x = this._xpos(e);
-        y = this._ypos(e);
-        delta = this.reference - x;
-        deltaY = Math.abs(this.referenceY - y);
-        if (deltaY < 30 && !this.verticalDragged) {
-          if (delta > 2 || delta < -2) {
-            this.dragged = true;
-            this.reference = x;
-            this._scroll(this.offset + delta);
-          }
-        } else if (this.dragged) {
-          e.preventDefault();
-          e.stopPropagation();
-          return false;
-        } else {
-          this.verticalDragged = true;
+      if (!this.pressed) return;
+      const delta = this.reference - e.clientX;
+      const deltaY = Math.abs(this.referenceY - e.clientY);
+      if (deltaY < 30 && !this.verticalDragged) {
+        if (delta > 2 || delta < -2) {
+          this.dragged = true;
+          this.reference = e.clientX;
+          this._scroll(this.offset + delta);
         }
-      }
-      if (this.dragged) {
+      } else if (this.dragged) {
         e.preventDefault();
-        e.stopPropagation();
-        return false;
+      } else {
+        this.verticalDragged = true;
       }
+      if (this.dragged) e.preventDefault();
     };
     this._handleCarouselRelease = (e) => {
-      if (this.pressed) {
-        this.pressed = false;
-      } else {
-        return;
+      if (!this.pressed) return;
+      this.pressed = false;
+      if (this._trackRaf !== null) {
+        cancelAnimationFrame(this._trackRaf);
+        this._trackRaf = null;
+      }
+      try {
+        this.el.releasePointerCapture(e.pointerId);
+      } catch {
       }
-      clearInterval(this.ticker);
       this.target = this.offset;
       if (this.velocity > 10 || this.velocity < -10) {
         this.amplitude = 0.9 * this.velocity;
@@ -2387,86 +2334,91 @@ var Carousel = class _Carousel extends Component {
       this.amplitude = this.target - this.offset;
       this.timestamp = Date.now();
       requestAnimationFrame(this._autoScroll);
+      if (this.dragged) e.preventDefault();
+    };
+    this._handleCarouselClick = (e) => {
       if (this.dragged) {
         e.preventDefault();
         e.stopPropagation();
+        return;
       }
-      return false;
-    };
-    this._handleCarouselClick = (e) => {
-      if (this.dragged) {
+      const clickedElem = e.target.closest(".carousel-item");
+      if (!clickedElem || !this.el.contains(clickedElem)) return;
+      const clickedIndex = this.images.indexOf(clickedElem);
+      const diff = this._wrap(this.center) - clickedIndex;
+      if (diff !== 0) {
         e.preventDefault();
         e.stopPropagation();
-        return false;
-      } else if (!this.options.fullWidth) {
-        const clickedElem = e.target.closest(".carousel-item");
-        if (!clickedElem) return;
-        const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
-        const diff = this._wrap(this.center) - clickedIndex;
-        if (diff !== 0) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-        if (clickedIndex < 0) {
-          if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) {
-            this.next();
-          } else {
-            this.prev();
-          }
+      }
+      if (clickedIndex < 0) {
+        if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth / 2) {
+          this.next();
         } else {
-          this._cycleTo(clickedIndex);
+          this.prev();
         }
+      } else {
+        this._cycleTo(clickedIndex);
       }
     };
     this._handleIndicatorClick = (e) => {
       e.stopPropagation();
-      this._handleIndicatorInteraction(e);
+      const indicator = e.target.closest(".indicator-item");
+      if (!indicator || !this._indicators.contains(indicator)) return;
+      const index = [...this._indicators.children].indexOf(indicator);
+      if (index < 0) return;
+      this._cycleTo(index);
     };
-    this._handleIndicatorKeyPress = (e) => {
-      e.stopPropagation();
-      if (Utils.keys.ENTER.includes(e.key)) {
-        this._handleIndicatorInteraction(e);
+    this._handleKeydown = (e) => {
+      const target = e.target;
+      if (target.closest('input, textarea, select, [contenteditable="true"]')) return;
+      if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
+        e.preventDefault();
+        this.next();
+      } else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
+        e.preventDefault();
+        this.prev();
       }
     };
-    this._handleIndicatorInteraction = (e) => {
-      const indicator = e.target.closest(".indicator-item");
-      if (indicator) {
-        const index = [...indicator.parentNode.children].indexOf(indicator);
-        this._cycleTo(index);
-      }
+    this._handleFlatScroll = () => {
+      if (this._ignoreScroll) return;
+      const index = this._nearestIndex();
+      if (index !== this.center) this._syncActive(index, this.dragged);
     };
     this._handleResize = () => {
+      if (!this.images.length) return;
+      if (this._flat) {
+        this._scrollToIndex(this.center, false);
+        return;
+      }
       if (this.options.fullWidth) {
-        const firstItem = this.el.querySelector(".carousel-item");
-        const activeItem = this.el.querySelector(".carousel-item.active");
-        if (!firstItem || !activeItem) return;
+        const firstItem = this.images[0];
+        if (!firstItem) return;
         this.itemWidth = firstItem.clientWidth;
-        this.imageHeight = activeItem.clientHeight;
         this.dim = this.itemWidth * 2 + this.options.padding;
         this.offset = this.center * 2 * this.itemWidth;
         this.target = this.offset;
-        this._setCarouselHeight(true);
       } else {
         this._scroll();
       }
     };
     this._track = () => {
-      const now = Date.now(), elapsed = now - this.timestamp, delta = this.offset - this.frame, v = 1e3 * delta / (1 + elapsed);
+      const now = Date.now();
+      const elapsed = now - this.timestamp;
+      const delta = this.offset - this.frame;
+      const v = 1e3 * delta / (1 + elapsed);
       this.timestamp = now;
       this.frame = this.offset;
       this.velocity = 0.8 * v + 0.2 * this.velocity;
     };
     this._autoScroll = () => {
-      let elapsed, delta;
-      if (this.amplitude) {
-        elapsed = Date.now() - this.timestamp;
-        delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
-        if (delta > 2 || delta < -2) {
-          this._scroll(this.target - delta);
-          requestAnimationFrame(this._autoScroll);
-        } else {
-          this._scroll(this.target);
-        }
+      if (!this.amplitude) return;
+      const elapsed = Date.now() - this.timestamp;
+      const delta = this.amplitude * Math.exp(-elapsed / this.options.duration);
+      if (delta > 2 || delta < -2) {
+        this._scroll(this.target - delta);
+        requestAnimationFrame(this._autoScroll);
+      } else {
+        this._scroll(this.target);
       }
     };
     this.el["Expressive_Carousel"] = this;
@@ -2474,56 +2426,58 @@ var Carousel = class _Carousel extends Component {
       ..._Carousel.defaults,
       ...options
     };
-    this.hasMultipleSlides = this.el.querySelectorAll(".carousel-item").length > 1;
-    this.showIndicators = this.options.indicators && this.hasMultipleSlides;
-    this.noWrap = this.options.noWrap || !this.hasMultipleSlides;
+    this._flat = this.options.fullWidth || this.el.classList.contains("flat");
+    if (this._flat) {
+      this.el.classList.add("flat");
+      this.options.fullWidth = true;
+      this.options.dist = 0;
+    }
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      this.options.duration = 1;
+      if (!this._flat) this.options.dist = 0;
+    }
     this.pressed = false;
     this.dragged = false;
     this.offset = this.target = 0;
-    this.images = [];
-    const firstItem = this.el.querySelector(".carousel-item");
-    if (!firstItem) {
+    this.images = this._collectItems();
+    if (!this.images.length) {
       console.error("Carousel: no .carousel-item elements to show");
       return;
     }
-    this.itemWidth = firstItem.clientWidth;
-    this.itemHeight = firstItem.clientHeight;
-    this.dim = this.itemWidth * 2 + this.options.padding || 1;
-    if (this.options.fullWidth) {
-      this.options.dist = 0;
-      this._setCarouselHeight();
-      if (this.showIndicators) {
-        this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators");
-      }
-    }
-    this._indicators = document.createElement("ul");
-    this._indicators.classList.add("indicators");
-    this.el.querySelectorAll(".carousel-item").forEach((item, i) => {
-      this.images.push(item);
-      if (this.showIndicators) {
-        const indicator = document.createElement("li");
-        indicator.classList.add("indicator-item");
-        indicator.tabIndex = 0;
-        if (i === 0) {
-          indicator.classList.add("active");
-        }
-        this._indicators.appendChild(indicator);
-      }
-    });
-    if (this.showIndicators) this.el.appendChild(this._indicators);
+    this.hasMultipleSlides = this.images.length > 1;
+    this.showIndicators = this.options.indicators && this.hasMultipleSlides;
+    this.noWrap = this.options.noWrap || !this.hasMultipleSlides || this._flat;
     this.count = this.images.length;
     this.options.numVisible = Math.min(this.count, this.options.numVisible);
+    this.images.forEach((item) => item.classList.add("carousel-item"));
+    if (this._flat) this._wrapTrack();
+    const firstItem = this.images[0];
+    this.itemWidth = firstItem.clientWidth || this.el.clientWidth || 1;
+    this.itemHeight = firstItem.clientHeight || this.el.clientHeight || 1;
+    this.dim = this.itemWidth * 2 + this.options.padding || 1;
+    if (this.showIndicators) this._setupIndicators();
+    this.el.tabIndex = this.el.tabIndex >= 0 ? this.el.tabIndex : 0;
+    this.el.setAttribute("aria-roledescription", "carousel");
     this._setupEventHandlers();
-    this._scroll(this.offset);
+    this._started = true;
+    if (this._flat) {
+      const start = Math.max(
+        0,
+        this.images.findIndex((el2) => el2.classList.contains("active"))
+      );
+      this.center = start;
+      this._syncActive(start, false);
+      this._scrollToIndex(start, false);
+    } else {
+      this._scroll(this.offset);
+    }
+  }
+  get _scroller() {
+    return this._trackEl ?? this.el;
   }
   static get defaults() {
     return _defaults7;
   }
-  /**
-   * Initializes instances of Carousel.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
   static init(els, options = {}) {
     return super.init(els, options, _Carousel);
   }
@@ -2531,81 +2485,104 @@ var Carousel = class _Carousel extends Component {
     return el["Expressive_Carousel"];
   }
   destroy() {
-    this._removeEventHandlers();
+    if (this._started) this._teardown();
     this.el["Expressive_Carousel"] = void 0;
   }
+  _collectItems() {
+    const explicit = Array.from(this.el.children).filter(
+      (el) => el instanceof HTMLElement && el.classList.contains("carousel-item")
+    );
+    if (explicit.length) return explicit;
+    return Array.from(this.el.children).filter((el) => {
+      if (!(el instanceof HTMLElement)) return false;
+      if (el.classList.contains("indicators") || el.classList.contains("carousel-fixed-item")) {
+        return false;
+      }
+      return el.tagName !== "NAV";
+    });
+  }
+  _setupIndicators() {
+    const existing = Array.from(this.el.children).find(
+      (el) => el instanceof HTMLElement && el.classList.contains("indicators")
+    );
+    this._indicators = existing ?? document.createElement("nav");
+    this._ownIndicators = !existing;
+    this._indicators.classList.add("indicators");
+    this._indicators.setAttribute("aria-label", "Slides");
+    this._indicators.replaceChildren();
+    this.images.forEach((_, i) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.classList.add("indicator-item");
+      if (i === 0) {
+        button.classList.add("active");
+        button.setAttribute("aria-current", "true");
+      }
+      button.setAttribute("aria-label", `Slide ${i + 1}`);
+      this._indicators.appendChild(button);
+    });
+    if (this._ownIndicators) this.el.appendChild(this._indicators);
+    if (this._flat) {
+      this.el.querySelector(".carousel-fixed-item")?.classList.add("with-indicators");
+    }
+  }
   _setupEventHandlers() {
-    if (typeof window.ontouchstart !== "undefined") {
-      this.el.addEventListener("touchstart", this._handleCarouselTap);
-      this.el.addEventListener("touchmove", this._handleCarouselDrag);
-      this.el.addEventListener("touchend", this._handleCarouselRelease);
-    }
-    this.el.addEventListener("mousedown", this._handleCarouselTap);
-    this.el.addEventListener("mousemove", this._handleCarouselDrag);
-    this.el.addEventListener("mouseup", this._handleCarouselRelease);
-    this.el.addEventListener("mouseleave", this._handleCarouselRelease);
-    this.el.addEventListener("click", this._handleCarouselClick);
+    this.el.addEventListener("keydown", this._handleKeydown);
     if (this.showIndicators && this._indicators) {
-      this._indicators.querySelectorAll(".indicator-item").forEach((el) => {
-        el.addEventListener("click", this._handleIndicatorClick);
-        el.addEventListener("keypress", this._handleIndicatorKeyPress);
-      });
+      this._indicators.addEventListener("click", this._handleIndicatorClick);
+    }
+    _Carousel._live.add(this);
+    if (!_Carousel._resizeListening) {
+      window.addEventListener("resize", _Carousel._onResize, { passive: true });
+      _Carousel._resizeListening = true;
     }
-    window.addEventListener("resize", this._handleThrottledResize);
+    if (this._flat) {
+      this._scroller.addEventListener("scroll", this._handleFlatScroll, { passive: true });
+      return;
+    }
+    this.el.addEventListener("pointerdown", this._handleCarouselTap);
+    this.el.addEventListener("pointermove", this._handleCarouselDrag);
+    this.el.addEventListener("pointerup", this._handleCarouselRelease);
+    this.el.addEventListener("pointercancel", this._handleCarouselRelease);
+    this.el.addEventListener("click", this._handleCarouselClick);
   }
   _removeEventHandlers() {
-    if (typeof window.ontouchstart !== "undefined") {
-      this.el.removeEventListener("touchstart", this._handleCarouselTap);
-      this.el.removeEventListener("touchmove", this._handleCarouselDrag);
-      this.el.removeEventListener("touchend", this._handleCarouselRelease);
-    }
-    this.el.removeEventListener("mousedown", this._handleCarouselTap);
-    this.el.removeEventListener("mousemove", this._handleCarouselDrag);
-    this.el.removeEventListener("mouseup", this._handleCarouselRelease);
-    this.el.removeEventListener("mouseleave", this._handleCarouselRelease);
+    this.el.removeEventListener("keydown", this._handleKeydown);
+    if (this._indicators) {
+      this._indicators.removeEventListener("click", this._handleIndicatorClick);
+    }
+    this._scroller.removeEventListener("scroll", this._handleFlatScroll);
+    this.el.removeEventListener("pointerdown", this._handleCarouselTap);
+    this.el.removeEventListener("pointermove", this._handleCarouselDrag);
+    this.el.removeEventListener("pointerup", this._handleCarouselRelease);
+    this.el.removeEventListener("pointercancel", this._handleCarouselRelease);
     this.el.removeEventListener("click", this._handleCarouselClick);
-    if (this.showIndicators && this._indicators) {
-      this._indicators.querySelectorAll(".indicator-item").forEach((el) => {
-        el.removeEventListener("click", this._handleIndicatorClick);
-      });
+    _Carousel._live.delete(this);
+    if (_Carousel._live.size === 0 && _Carousel._resizeListening) {
+      window.removeEventListener("resize", _Carousel._onResize);
+      _Carousel._resizeListening = false;
     }
-    window.removeEventListener("resize", this._handleThrottledResize);
   }
-  _setCarouselHeight(imageOnly = false) {
-    const firstSlide = this.el.querySelector(".carousel-item.active") ? this.el.querySelector(".carousel-item.active") : this.el.querySelector(".carousel-item");
-    const firstImage = firstSlide.querySelector("img");
-    if (firstImage) {
-      if (firstImage.complete) {
-        const imageHeight = firstImage.clientHeight;
-        if (imageHeight > 0) {
-          this.el.style.height = imageHeight + "px";
-        } else {
-          const naturalWidth = firstImage.naturalWidth;
-          const naturalHeight = firstImage.naturalHeight;
-          const adjustedHeight = this.el.clientWidth / naturalWidth * naturalHeight;
-          this.el.style.height = adjustedHeight + "px";
-        }
-      } else {
-        firstImage.addEventListener("load", () => {
-          this.el.style.height = firstImage.offsetHeight + "px";
-        });
-      }
-    } else if (!imageOnly) {
-      const slideHeight = firstSlide.clientHeight;
-      this.el.style.height = slideHeight + "px";
-    }
+  _teardown() {
+    this._removeEventHandlers();
+    if (this._trackRaf !== null) cancelAnimationFrame(this._trackRaf);
+    window.clearTimeout(this.scrollingTimeout);
+    if (this._ownIndicators) this._indicators?.remove();
+    this._unwrapTrack();
+    this.images.forEach((el) => {
+      el.style.transform = "";
+      el.style.zIndex = "";
+      el.style.opacity = "";
+      el.style.visibility = "";
+    });
   }
   _xpos(e) {
-    if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
-      return e.targetTouches[0].clientX;
-    }
-    return e.clientX;
+    if ("clientX" in e) return e.clientX;
+    return 0;
   }
   _ypos(e) {
-    if (e.type.startsWith("touch") && e.targetTouches.length >= 1) {
-      return e.targetTouches[0].clientY;
-    }
-    return e.clientY;
+    if ("clientY" in e) return e.clientY;
+    return 0;
   }
   _wrap(x) {
     return x >= this.count ? x % this.count : x < 0 ? this._wrap(this.count + x % this.count) : x;
@@ -2614,18 +2591,20 @@ var Carousel = class _Carousel extends Component {
     if (!this.el.classList.contains("scrolling")) {
       this.el.classList.add("scrolling");
     }
-    if (this.scrollingTimeout != null) {
-      clearTimeout(this.scrollingTimeout);
-    }
+    window.clearTimeout(this.scrollingTimeout);
     this.scrollingTimeout = setTimeout(() => {
       this.el.classList.remove("scrolling");
     }, this.options.duration);
     this.offset = typeof x === "number" ? x : this.offset;
     this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
-    const half = this.count >> 1, delta = this.offset - this.center * this.dim, dir = delta < 0 ? 1 : -1, tween = -dir * delta * 2 / this.dim;
-    let i, el, alignment, zTranslation, tweenedOpacity, centerTweenedOpacity;
+    const half = this.count >> 1;
+    const delta = this.offset - this.center * this.dim;
+    const dir = delta < 0 ? 1 : -1;
+    const tween = -dir * delta * 2 / this.dim;
     const lastCenter = this.center;
     const numVisibleOffset = 1 / this.options.numVisible;
+    let alignment;
+    let centerTweenedOpacity;
     if (this.options.fullWidth) {
       alignment = "translateX(0)";
       centerTweenedOpacity = 1;
@@ -2634,26 +2613,17 @@ var Carousel = class _Carousel extends Component {
       alignment += "translateY(" + (this.el.clientHeight - this.itemHeight) / 2 + "px)";
       centerTweenedOpacity = 1 - numVisibleOffset * tween;
     }
-    if (this.showIndicators) {
-      const diff = this.center % this.count;
-      const activeIndicator = this._indicators.querySelector(".indicator-item.active");
-      const activeIndicatorIndex = [...activeIndicator.parentNode.children].indexOf(
-        activeIndicator
-      );
-      if (activeIndicatorIndex !== diff) {
-        activeIndicator.classList.remove("active");
-        const pos = diff < 0 ? this.count + diff : diff;
-        this._indicators.querySelectorAll(".indicator-item")[pos].classList.add("active");
-      }
-    }
+    this._paintIndicators(this.center);
     if (!this.noWrap || this.center >= 0 && this.center < this.count) {
-      el = this.images[this._wrap(this.center)];
-      if (!el.classList.contains("active")) {
+      const el = this.images[this._wrap(this.center)];
+      if (el && !el.classList.contains("active")) {
         this.el.querySelector(".carousel-item.active")?.classList.remove("active");
         el.classList.add("active");
       }
     }
-    for (i = 1; i <= half; ++i) {
+    for (let i = 1; i <= half; ++i) {
+      let zTranslation;
+      let tweenedOpacity;
       if (this.options.fullWidth) {
         zTranslation = this.options.dist;
         tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
@@ -2662,7 +2632,7 @@ var Carousel = class _Carousel extends Component {
         tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
       }
       if (!this.noWrap || this.center + i < this.count) {
-        el = this.images[this._wrap(this.center + i)];
+        const el = this.images[this._wrap(this.center + i)];
         const transformString = `${alignment} translateX(${this.options.shift + (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
         this._updateItemStyle(el, tweenedOpacity, -i, transformString);
       }
@@ -2674,32 +2644,113 @@ var Carousel = class _Carousel extends Component {
         tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
       }
       if (!this.noWrap || this.center - i >= 0) {
-        el = this.images[this._wrap(this.center - i)];
+        const el = this.images[this._wrap(this.center - i)];
         const transformString = `${alignment} translateX(${-this.options.shift + (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
         this._updateItemStyle(el, tweenedOpacity, -i, transformString);
       }
     }
     if (!this.noWrap || this.center >= 0 && this.center < this.count) {
-      el = this.images[this._wrap(this.center)];
+      const el = this.images[this._wrap(this.center)];
       const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * this.options.shift * tween}px) translateZ(${this.options.dist * tween}px)`;
       this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);
     }
-    const _currItem = this.el.querySelectorAll(".carousel-item")[this._wrap(this.center)];
+    const currItem = this.images[this._wrap(this.center)];
+    this._syncA11y(this._wrap(this.center));
     if (lastCenter !== this.center && typeof this.options.onCycleTo === "function") {
-      this.options.onCycleTo.call(this, _currItem, this.dragged);
+      this.options.onCycleTo.call(this, currItem, this.dragged);
     }
     if (typeof this.oneTimeCallback === "function") {
-      this.oneTimeCallback.call(this, _currItem, this.dragged);
+      this.oneTimeCallback.call(this, currItem, this.dragged);
       this.oneTimeCallback = null;
     }
   }
   _updateItemStyle(el, opacity, zIndex, transform) {
+    if (!el) return;
     el.style.transform = transform;
     el.style.zIndex = zIndex.toString();
     el.style.opacity = opacity.toString();
     el.style.visibility = "visible";
   }
+  _paintIndicators(center) {
+    if (!this.showIndicators || !this._indicators) return;
+    const pos = (center % this.count + this.count) % this.count;
+    this._indicators.querySelectorAll(".indicator-item").forEach((el, i) => {
+      const on = i === pos;
+      el.classList.toggle("active", on);
+      if (on) el.setAttribute("aria-current", "true");
+      else el.removeAttribute("aria-current");
+    });
+  }
+  _syncA11y(index) {
+    this.images.forEach((el, i) => {
+      if (i === index) el.removeAttribute("aria-hidden");
+      else el.setAttribute("aria-hidden", "true");
+    });
+  }
+  _syncActive(index, dragged) {
+    const prev = this.center;
+    this.center = index;
+    this.images.forEach((el, i) => el.classList.toggle("active", i === index));
+    this._paintIndicators(index);
+    this._syncA11y(index);
+    const curr = this.images[index];
+    if (prev !== index && typeof this.options.onCycleTo === "function") {
+      this.options.onCycleTo.call(this, curr, dragged);
+    }
+    if (typeof this.oneTimeCallback === "function") {
+      this.oneTimeCallback.call(this, curr, dragged);
+      this.oneTimeCallback = null;
+    }
+  }
+  _wrapTrack() {
+    const track = document.createElement("div");
+    track.className = "carousel-track";
+    this.images[0].before(track);
+    this.images.forEach((el) => track.appendChild(el));
+    this._trackEl = track;
+  }
+  _unwrapTrack() {
+    if (!this._trackEl) return;
+    this.images.forEach((el) => this.el.insertBefore(el, this._trackEl));
+    this._trackEl.remove();
+    this._trackEl = null;
+  }
+  _nearestIndex() {
+    const left = this._scroller.scrollLeft;
+    let best = 0;
+    let bestDist = Infinity;
+    this.images.forEach((el, i) => {
+      const dist = Math.abs(el.offsetLeft - left);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = i;
+      }
+    });
+    return best;
+  }
+  _scrollToIndex(n, smooth = true) {
+    const el = this.images[n];
+    if (!el) return;
+    const left = el.offsetLeft;
+    if (Math.abs(this._scroller.scrollLeft - left) < 1) {
+      this._syncActive(n, false);
+      return;
+    }
+    this._ignoreScroll = true;
+    this._scroller.scrollTo({ left, behavior: smooth ? "smooth" : "auto" });
+    const done = () => {
+      this._ignoreScroll = false;
+    };
+    this._scroller.addEventListener("scrollend", done, { once: true });
+    window.setTimeout(done, this.options.duration + 350);
+  }
   _cycleTo(n, callback = null) {
+    if (this._flat) {
+      if (typeof callback === "function") this.oneTimeCallback = callback;
+      this._syncActive(n, false);
+      this._scrollToIndex(n);
+      return;
+    }
     let diff = this.center % this.count - n;
     if (!this.noWrap) {
       if (diff < 0) {
@@ -2727,14 +2778,8 @@ var Carousel = class _Carousel extends Component {
       requestAnimationFrame(this._autoScroll);
     }
   }
-  /**
-   * Move carousel to next slide or go forward a given amount of slides.
-   * @param n How many times the carousel slides.
-   */
   next(n = 1) {
-    if (n === void 0 || isNaN(n)) {
-      n = 1;
-    }
+    if (n === void 0 || isNaN(n)) n = 1;
     let index = this.center + n;
     if (index >= this.count || index < 0) {
       if (this.noWrap) return;
@@ -2742,14 +2787,8 @@ var Carousel = class _Carousel extends Component {
     }
     this._cycleTo(index);
   }
-  /**
-   * Move carousel to previous slide or go back a given amount of slides.
-   * @param n How many times the carousel slides.
-   */
   prev(n = 1) {
-    if (n === void 0 || isNaN(n)) {
-      n = 1;
-    }
+    if (n === void 0 || isNaN(n)) n = 1;
     let index = this.center - n;
     if (index >= this.count || index < 0) {
       if (this.noWrap) return;
@@ -2757,15 +2796,8 @@ var Carousel = class _Carousel extends Component {
     }
     this._cycleTo(index);
   }
-  /**
-   * Move carousel to nth slide.
-   * @param n Index of slide.
-   * @param callback "onCycleTo" optional callback.
-   */
   set(n, callback) {
-    if (n === void 0 || isNaN(n)) {
-      n = 0;
-    }
+    if (n === void 0 || isNaN(n)) n = 0;
     if (n > this.count || n < 0) {
       if (this.noWrap) return;
       n = this._wrap(n);
@@ -2773,6 +2805,12 @@ var Carousel = class _Carousel extends Component {
     this._cycleTo(n, callback);
   }
 };
+_Carousel._live = /* @__PURE__ */ new Set();
+_Carousel._resizeListening = false;
+_Carousel._onResize = Utils.throttle(() => {
+  _Carousel._live.forEach((c) => c._handleResize());
+}, 200);
+var Carousel = _Carousel;
 
 // src/ts/components/characterCounter.ts
 var _defaults8 = Object.freeze({});
@@ -2855,84 +2893,55 @@ var _defaults9 = {
   onOpenStart: null,
   onOpenEnd: null,
   onCloseStart: null,
-  onCloseEnd: null,
-  inDuration: 300,
-  outDuration: 300
+  onCloseEnd: null
 };
 var Collapsible = class _Collapsible extends Component {
   constructor(el, options) {
     super(el, options, _Collapsible);
-    this._handleCollapsibleClick = (e) => {
-      const header = e.target.closest(".collapsible-header");
-      if (e.target && header) {
-        const collapsible = header.closest(".collapsible");
-        if (collapsible !== this.el) return;
-        const li = header.closest("li");
-        const isActive = li.classList.contains("active");
-        const index = [...li.parentNode.children].indexOf(li);
-        if (isActive) this.close(index);
-        else this.open(index);
-      }
-    };
-    this._handleCollapsibleKeydown = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
-        this._handleCollapsibleClick(e);
-      }
-    };
+    this._items = [];
+    this._endTimers = [];
+    this._wrappedBodies = [];
     /**
      * Open collapsible section.
-     * @param n Nth section to open.
+     * @param index 0-based index of the section to open.
      */
     this.open = (index) => {
-      const listItems = Array.from(this.el.children).filter((c) => c.tagName === "LI");
-      const li = listItems[index];
-      if (li && !li.classList.contains("active")) {
-        if (typeof this.options.onOpenStart === "function") {
-          this.options.onOpenStart.call(this, li);
-        }
-        if (this.options.accordion) {
-          const activeLis = listItems.filter((li2) => li2.classList.contains("active"));
-          activeLis.forEach((activeLi) => {
-            const index2 = listItems.indexOf(activeLi);
-            this.close(index2);
-          });
-        }
-        li.classList.add("active");
-        this._animateIn(index);
+      const item = this._items[index];
+      if (!item || this._isOpen(item)) return;
+      if (this.options.accordion) {
+        this._items.forEach((other, i) => {
+          if (i !== index && this._isOpen(other)) this.close(i);
+        });
       }
+      this._setOpen(item, true);
     };
     /**
      * Close collapsible section.
-     * @param n Nth section to close.
+     * @param index 0-based index of the section to close.
      */
     this.close = (index) => {
-      const li = Array.from(this.el.children).filter((c) => c.tagName === "LI")[index];
-      if (li && li.classList.contains("active")) {
-        if (typeof this.options.onCloseStart === "function") {
-          this.options.onCloseStart.call(this, li);
-        }
-        li.classList.remove("active");
-        this._animateOut(index);
-      }
+      const item = this._items[index];
+      if (!item || !this._isOpen(item)) return;
+      this._setOpen(item, false);
+    };
+    this._handleToggle = (e) => {
+      const item = e.target;
+      if (!(item instanceof HTMLDetailsElement)) return;
+      if (!this._items.includes(item)) return;
+      this._notify(item, item.open);
     };
     this.el["Expressive_Collapsible"] = this;
+    const accordion = options.accordion !== void 0 ? options.accordion : !el.classList.contains("expandable");
     this.options = {
       ..._Collapsible.defaults,
-      ...options
+      ...options,
+      accordion
     };
-    this._headers = Array.from(this.el.querySelectorAll("li > .collapsible-header"));
-    this._headers.forEach((el2) => el2.tabIndex = 0);
+    this._groupName = el.id ? `collapsible-${el.id}` : `collapsible-${Utils.guid()}`;
+    this._items = this._collectItems();
+    this._wrapDetailsBodies();
+    this._setupItems();
     this._setupEventHandlers();
-    const activeBodies = Array.from(
-      this.el.querySelectorAll("li.active > .collapsible-body")
-    );
-    if (this.options.accordion) {
-      if (activeBodies.length > 0) {
-        this._setExpanded(activeBodies[0]);
-      }
-    } else {
-      activeBodies.forEach((el2) => this._setExpanded(el2));
-    }
   }
   static get defaults() {
     return _defaults9;
@@ -2950,48 +2959,99 @@ var Collapsible = class _Collapsible extends Component {
   }
   destroy() {
     this._removeEventHandlers();
+    this._endTimers.forEach((id) => clearTimeout(id));
+    this._endTimers = [];
+    this._unwrapDetailsBodies();
     this.el["Expressive_Collapsible"] = void 0;
   }
-  _setupEventHandlers() {
-    this.el.addEventListener("click", this._handleCollapsibleClick);
-    this._headers.forEach(
-      (header) => header.addEventListener("keydown", this._handleCollapsibleKeydown)
-    );
+  _collectItems() {
+    return Array.from(this.el.querySelectorAll(":scope > details"));
   }
-  _removeEventHandlers() {
-    this.el.removeEventListener("click", this._handleCollapsibleClick);
-    this._headers.forEach(
-      (header) => header.removeEventListener("keydown", this._handleCollapsibleKeydown)
-    );
+  _setupItems() {
+    if (this.options.accordion) {
+      this._items.forEach((item) => {
+        if (item instanceof HTMLDetailsElement && !item.getAttribute("name")) {
+          item.setAttribute("name", this._groupName);
+        }
+      });
+    }
+    const opened = this._items.filter((item) => this._isOpen(item));
+    if (this.options.accordion && opened.length > 1) {
+      opened.slice(1).forEach((item) => {
+        if (item instanceof HTMLDetailsElement) item.open = false;
+      });
+    }
   }
-  _setExpanded(li) {
-    li.style.maxHeight = li.scrollHeight + "px";
+  _isOpen(item) {
+    return item instanceof HTMLDetailsElement && item.open;
   }
-  _animateIn(index) {
-    const li = this.el.children[index];
-    if (!li) return;
-    const body = li.querySelector(".collapsible-body");
-    const duration = this.options.inDuration;
-    body.style.transition = `max-height ${duration}ms ease-out`;
-    this._setExpanded(body);
-    setTimeout(() => {
-      if (typeof this.options.onOpenEnd === "function") {
-        this.options.onOpenEnd.call(this, li);
-      }
-    }, duration);
+  _setOpen(item, open) {
+    if (item instanceof HTMLDetailsElement) item.open = open;
   }
-  _animateOut(index) {
-    const li = this.el.children[index];
-    if (!li) return;
-    const body = li.querySelector(".collapsible-body");
-    const duration = this.options.outDuration;
-    body.style.transition = `max-height ${duration}ms ease-out`;
-    body.style.maxHeight = "0";
-    setTimeout(() => {
-      if (typeof this.options.onCloseEnd === "function") {
-        this.options.onCloseEnd.call(this, li);
+  _wrapDetailsBodies() {
+    this._items.forEach((item) => {
+      if (!(item instanceof HTMLDetailsElement)) return;
+      if (item.querySelector(":scope > :not(summary)")) {
+        const already = Array.from(item.children).filter((c) => c.tagName !== "SUMMARY");
+        if (already.length === 1 && already[0].tagName === "DIV") {
+          this._wrappedBodies.push(already[0]);
+          return;
+        }
       }
-    }, duration);
+      const body = document.createElement("div");
+      Array.from(item.childNodes).forEach((node) => {
+        if (node instanceof HTMLElement && node.tagName === "SUMMARY") return;
+        body.appendChild(node);
+      });
+      item.appendChild(body);
+      this._wrappedBodies.push(body);
+    });
+  }
+  _unwrapDetailsBodies() {
+    this._wrappedBodies.forEach((body) => {
+      const parent = body.parentNode;
+      if (!parent) return;
+      while (body.firstChild) parent.insertBefore(body.firstChild, body);
+      body.remove();
+    });
+    this._wrappedBodies = [];
+  }
+  _bodyOf(item) {
+    return item.querySelector(":scope > :not(summary)");
+  }
+  _setupEventHandlers() {
+    this.el.addEventListener("toggle", this._handleToggle, true);
+  }
+  _removeEventHandlers() {
+    this.el.removeEventListener("toggle", this._handleToggle, true);
+  }
+  _notify(item, opening) {
+    const start = opening ? this.options.onOpenStart : this.options.onCloseStart;
+    if (typeof start === "function") start.call(this, item);
+    const end = opening ? this.options.onOpenEnd : this.options.onCloseEnd;
+    if (typeof end !== "function") return;
+    const target = this._bodyOf(item) ?? item;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      target.removeEventListener("transitionend", onEnd);
+      end.call(this, item);
+    };
+    const onEnd = (ev) => {
+      if (ev.target !== target) return;
+      finish();
+    };
+    target.addEventListener("transitionend", onEnd);
+    this._endTimers.push(window.setTimeout(finish, this._durationMs() + 50));
+  }
+  _durationMs() {
+    const raw = getComputedStyle(this.el).getPropertyValue("--md-comp-collapsible-duration").trim();
+    if (!raw) return 500;
+    if (raw.endsWith("ms")) return parseFloat(raw);
+    if (raw.endsWith("s")) return parseFloat(raw) * 1e3;
+    const n = parseFloat(raw);
+    return Number.isFinite(n) ? n : 500;
   }
 };
 
@@ -3017,6 +3077,12 @@ var FormSelect = class _FormSelect extends Component {
       this._selectOptionElement(virtualOption);
       e.stopPropagation();
     };
+    this._handleOptionFocus = (e) => {
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      const li = target.closest('li[role="option"]');
+      if (li?.id) this.input.setAttribute("aria-activedescendant", li.id);
+    };
     this._handleInputClick = () => {
       if (this.dropdown && this.dropdown.isOpen) {
         this._setValueToInput();
@@ -3033,6 +3099,8 @@ var FormSelect = class _FormSelect extends Component {
     this.nativeTabIndex = this.el.tabIndex ?? -1;
     this.el.tabIndex = -1;
     this._values = [];
+    this._createdWrapper = false;
+    this._originalLabelFor = null;
     this._setupDropdown();
     this._setupEventHandlers();
   }
@@ -3054,6 +3122,7 @@ var FormSelect = class _FormSelect extends Component {
     this._removeEventHandlers();
     this.dropdown?.destroy();
     this._removeDropdown();
+    this.el.tabIndex = this.nativeTabIndex;
     this.el["Expressive_FormSelect"] = void 0;
   }
   /**
@@ -3061,27 +3130,38 @@ var FormSelect = class _FormSelect extends Component {
    *
    * Assigning `select.value` from script fires no `change` event, so nothing
    * else syncs the visible input text or the `.selected` state on the virtual
-   * options. Call this after mutating the underlying select programmatically.
+   * options. Adding or removing `<option>`s also requires this — the menu is
+   * rebuilt from the native list, the field and Dropdown instance stay put.
    */
   refresh() {
+    if (!this.dropdownOptions) return;
+    this._rebuildOptions();
     this._setValueToInput();
     this._setSelectedStates();
   }
   _setupEventHandlers() {
-    this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((el) => {
-      el.addEventListener("click", this._handleOptionClick);
-      el.addEventListener("keydown", this._handleOptionKeydown);
-    });
+    this._setupOptionHandlers();
     this.el.addEventListener("change", this._handleSelectChange);
     this.input.addEventListener("click", this._handleInputClick);
+    this.dropdownOptions.addEventListener("focusin", this._handleOptionFocus);
   }
   _removeEventHandlers() {
+    this._removeOptionHandlers();
+    this.el.removeEventListener("change", this._handleSelectChange);
+    this.input?.removeEventListener("click", this._handleInputClick);
+    this.dropdownOptions?.removeEventListener("focusin", this._handleOptionFocus);
+  }
+  _setupOptionHandlers() {
     this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((el) => {
+      el.addEventListener("click", this._handleOptionClick);
+      el.addEventListener("keydown", this._handleOptionKeydown);
+    });
+  }
+  _removeOptionHandlers() {
+    this.dropdownOptions?.querySelectorAll("li:not(.optgroup)").forEach((el) => {
       el.removeEventListener("click", this._handleOptionClick);
       el.removeEventListener("keydown", this._handleOptionKeydown);
     });
-    this.el.removeEventListener("change", this._handleSelectChange);
-    this.input.removeEventListener("click", this._handleInputClick);
   }
   _arraysEqual(a, b) {
     if (a === b) return true;
@@ -3093,6 +3173,7 @@ var FormSelect = class _FormSelect extends Component {
   _selectOptionElement(virtualOption) {
     if (!virtualOption.classList.contains("disabled") && !virtualOption.classList.contains("optgroup")) {
       const value = this._values.find((value2) => value2.optionEl === virtualOption);
+      if (!value) return;
       const previousSelectedValues = this.getSelectedValues();
       if (this.isMultiple) {
         this._toggleEntryFromArray(value);
@@ -3108,70 +3189,54 @@ var FormSelect = class _FormSelect extends Component {
           new Event("change", { bubbles: true, cancelable: true, composed: true })
         );
     }
-    if (!this.isMultiple) this.dropdown.close();
+    if (!this.isMultiple) this.dropdown?.close();
   }
   _setupDropdown() {
     this.labelEl = this.el.labels?.[0] ?? null;
-    this.wrapper = document.createElement("div");
-    this.wrapper.classList.add("select-wrapper", "input-field");
-    if (this.options.classes.length > 0) {
-      this.wrapper.classList.add(...this.options.classes.split(" ").filter(Boolean));
-    }
-    this.el.before(this.wrapper);
-    const hiddenDiv = document.createElement("div");
-    hiddenDiv.classList.add("hide-select");
-    this.wrapper.append(hiddenDiv);
-    hiddenDiv.appendChild(this.el);
+    this._setupWrapper();
+    this._hideNativeSelect();
     if (this.el.disabled) this.wrapper.classList.add("disabled");
-    this.selectOptions = Array.from(this.el.children).filter((el) => ["OPTION", "OPTGROUP"].includes(el.tagName));
-    this.dropdownOptions = document.createElement("ul");
+    this.dropdownOptions = document.createElement("menu");
     this.dropdownOptions.id = `select-options-${Utils.guid()}`;
     this.dropdownOptions.setAttribute("popover", "auto");
-    this.dropdownOptions.classList.add("dropdown-content", "select-dropdown");
     this.dropdownOptions.setAttribute("role", "listbox");
     this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
     if (this.isMultiple) this.dropdownOptions.classList.add("multiple-select-dropdown");
-    if (this.selectOptions.length > 0) {
-      this.selectOptions.forEach((realOption) => {
-        if (realOption.tagName === "OPTION") {
-          const virtualOption = this._createAndAppendOptionWithIcon(
-            realOption,
-            this.isMultiple ? "multiple" : void 0
-          );
-          this._addOptionToValues(realOption, virtualOption);
-        } else if (realOption.tagName === "OPTGROUP") {
-          const groupId = "opt-group-" + Utils.guid();
-          const groupParent = document.createElement("li");
-          groupParent.classList.add("optgroup");
-          groupParent.tabIndex = -1;
-          groupParent.setAttribute("role", "group");
-          groupParent.setAttribute("aria-labelledby", groupId);
-          const groupLabel = document.createElement("span");
-          groupLabel.id = groupId;
-          groupLabel.setAttribute("role", "presentation");
-          groupLabel.textContent = realOption.getAttribute("label") ?? "";
-          groupParent.replaceChildren(groupLabel);
-          this.dropdownOptions.append(groupParent);
-          const groupChildren = [];
-          const selectOptions = Array.from(realOption.children).filter((el) => el.tagName === "OPTION");
-          selectOptions.forEach((realOption2) => {
-            const virtualOption = this._createAndAppendOptionWithIcon(
-              realOption2,
-              "optgroup-option"
-            );
-            const childId = "opt-child-" + Utils.guid();
-            virtualOption.id = childId;
-            groupChildren.push(childId);
-            this._addOptionToValues(realOption2, virtualOption);
-          });
-          groupParent.setAttribute("aria-owns", groupChildren.join(" "));
-        }
-      });
-    }
+    this._buildOptions();
     this.wrapper.append(this.dropdownOptions);
+    this._buildInput();
+    this._buildCaret();
+    this._initDropdown();
+    this._setSelectedStates();
+    if (this.labelEl) this.input.after(this.labelEl);
+  }
+  _setupWrapper() {
+    const parent = this.el.parentElement;
+    const reuse = parent && parent.matches(".field") && !parent.querySelector(":scope > .hide-select") && !parent.querySelector(":scope > input, :scope > textarea");
+    if (reuse) {
+      this.wrapper = parent;
+      this._createdWrapper = false;
+    } else {
+      this.wrapper = document.createElement("div");
+      this.wrapper.classList.add("field");
+      this._createdWrapper = true;
+      this.el.before(this.wrapper);
+    }
+    if (this.options.classes.length > 0) {
+      this.wrapper.classList.add(...this.options.classes.split(" ").filter(Boolean));
+    }
+  }
+  _hideNativeSelect() {
+    const hiddenDiv = document.createElement("div");
+    hiddenDiv.classList.add("hide-select");
+    this.el.before(hiddenDiv);
+    hiddenDiv.appendChild(this.el);
+    this.wrapper.append(hiddenDiv);
+  }
+  _buildInput() {
     this.input = document.createElement("input");
-    this.input.id = "m_select-input-" + Utils.guid();
-    this.input.classList.add("select-dropdown", "dropdown-trigger");
+    this.input.id = "select-input-" + Utils.guid();
+    this.input.classList.add("dropdown-trigger");
     this.input.type = "text";
     this.input.readOnly = true;
     this.input.setAttribute("data-target", this.dropdownOptions.id);
@@ -3185,71 +3250,131 @@ var FormSelect = class _FormSelect extends Component {
       if (attr.name.startsWith("aria-")) this.input.setAttribute(attr.name, attr.value);
     }
     this.input.setAttribute("role", "combobox");
+    this.input.setAttribute("aria-haspopup", "listbox");
     this.input.ariaExpanded = "false";
-    this.input.setAttribute("aria-owns", this.dropdownOptions.id);
     this.input.setAttribute("aria-controls", this.dropdownOptions.id);
     this.input.placeholder = " ";
+    if (this.labelEl) {
+      this._originalLabelFor = this.labelEl.htmlFor;
+      this.labelEl.htmlFor = this.input.id;
+    }
     this.wrapper.prepend(this.input);
     this._setValueToInput();
-    const dropdownIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    dropdownIcon.classList.add("caret");
-    dropdownIcon.setAttribute("height", "24");
-    dropdownIcon.setAttribute("width", "24");
-    dropdownIcon.setAttribute("viewBox", "0 0 24 24");
-    dropdownIcon.ariaHidden = "true";
-    dropdownIcon.innerHTML = `<path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/>`;
-    this.wrapper.prepend(dropdownIcon);
-    if (!this.el.disabled) {
-      const dropdownOptions = { ...this.options.dropdownOptions };
-      dropdownOptions.coverTrigger = false;
-      const userOnOpenEnd = dropdownOptions.onOpenEnd;
-      const userOnCloseEnd = dropdownOptions.onCloseEnd;
-      dropdownOptions.onOpenEnd = () => {
-        const selectedOption = this.dropdownOptions.querySelector(".selected");
-        if (selectedOption) {
-          Utils.keyDown = true;
-          this.dropdown.focusedIndex = [...selectedOption.parentNode.children].indexOf(
-            selectedOption
-          );
-          this.dropdown._focusFocusedItem();
-          Utils.keyDown = false;
-          if (this.dropdown.isScrollable) {
-            let scrollOffset = selectedOption.getBoundingClientRect().top - this.dropdownOptions.getBoundingClientRect().top;
-            scrollOffset -= this.dropdownOptions.clientHeight / 2;
-            this.dropdownOptions.scrollTop = scrollOffset;
-          }
+  }
+  _buildCaret() {
+    const caret = document.createElement("span");
+    caret.classList.add("caret");
+    caret.setAttribute("aria-hidden", "true");
+    this.wrapper.prepend(caret);
+  }
+  _initDropdown() {
+    if (this.el.disabled) return;
+    const dropdownOptions = { ...this.options.dropdownOptions };
+    dropdownOptions.coverTrigger = false;
+    const userOnOpenEnd = dropdownOptions.onOpenEnd;
+    const userOnCloseEnd = dropdownOptions.onCloseEnd;
+    dropdownOptions.onOpenEnd = () => {
+      const selectedOption = this.dropdownOptions.querySelector(".selected");
+      if (selectedOption) {
+        Utils.keyDown = true;
+        this.dropdown.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+        this.dropdown._focusFocusedItem();
+        Utils.keyDown = false;
+        if (this.dropdown.isScrollable) {
+          let scrollOffset = selectedOption.getBoundingClientRect().top - this.dropdownOptions.getBoundingClientRect().top;
+          scrollOffset -= this.dropdownOptions.clientHeight / 2;
+          this.dropdownOptions.scrollTop = scrollOffset;
         }
-        this.input.ariaExpanded = "true";
-        if (userOnOpenEnd && typeof userOnOpenEnd === "function")
-          userOnOpenEnd.call(this.dropdown, this.el);
-      };
-      dropdownOptions.onCloseEnd = () => {
-        this.input.ariaExpanded = "false";
-        if (userOnCloseEnd && typeof userOnCloseEnd === "function")
-          userOnCloseEnd.call(this.dropdown, this.el);
-      };
-      dropdownOptions.closeOnClick = false;
-      this.dropdown = Dropdown.init(this.input, dropdownOptions);
-    }
-    this._setSelectedStates();
-    if (this.labelEl) this.input.after(this.labelEl);
+        if (selectedOption.id) this.input.setAttribute("aria-activedescendant", selectedOption.id);
+      }
+      this.input.ariaExpanded = "true";
+      if (userOnOpenEnd && typeof userOnOpenEnd === "function")
+        userOnOpenEnd.call(this.dropdown, this.el);
+    };
+    dropdownOptions.onCloseEnd = () => {
+      this.input.ariaExpanded = "false";
+      this.input.removeAttribute("aria-activedescendant");
+      if (userOnCloseEnd && typeof userOnCloseEnd === "function")
+        userOnCloseEnd.call(this.dropdown, this.el);
+    };
+    dropdownOptions.closeOnClick = false;
+    this.dropdown = Dropdown.init(this.input, dropdownOptions);
+  }
+  _nativeOptions() {
+    return Array.from(this.el.children).filter((el) => ["OPTION", "OPTGROUP"].includes(el.tagName));
+  }
+  _buildOptions() {
+    this.selectOptions = this._nativeOptions();
+    this._values = [];
+    this.selectOptions.forEach((realOption) => {
+      if (realOption.tagName === "OPTION") {
+        const virtualOption = this._createAndAppendOptionWithIcon(
+          realOption,
+          this.isMultiple ? "multiple" : void 0
+        );
+        this._addOptionToValues(realOption, virtualOption);
+      } else if (realOption.tagName === "OPTGROUP") {
+        const groupId = "opt-group-" + Utils.guid();
+        const groupParent = document.createElement("li");
+        groupParent.classList.add("optgroup");
+        groupParent.tabIndex = -1;
+        groupParent.setAttribute("role", "group");
+        groupParent.setAttribute("aria-labelledby", groupId);
+        const groupLabel = document.createElement("span");
+        groupLabel.id = groupId;
+        groupLabel.setAttribute("role", "presentation");
+        groupLabel.textContent = realOption.getAttribute("label") ?? "";
+        groupParent.replaceChildren(groupLabel);
+        this.dropdownOptions.append(groupParent);
+        const groupChildren = [];
+        const selectOptions = Array.from(realOption.children).filter((el) => el.tagName === "OPTION");
+        selectOptions.forEach((child) => {
+          const virtualOption = this._createAndAppendOptionWithIcon(child, "optgroup-option");
+          groupChildren.push(virtualOption.id);
+          this._addOptionToValues(child, virtualOption);
+        });
+        groupParent.setAttribute("aria-owns", groupChildren.join(" "));
+      }
+    });
+  }
+  _rebuildOptions() {
+    this._removeOptionHandlers();
+    this.dropdownOptions.replaceChildren();
+    this._buildOptions();
+    this._setupOptionHandlers();
+    this.dropdown?._makeDropdownFocusable();
   }
   _addOptionToValues(realOption, virtualOption) {
     this._values.push({ el: realOption, optionEl: virtualOption });
   }
   _removeDropdown() {
-    this.wrapper.querySelector(".caret").remove();
-    this.input.remove();
-    this.dropdownOptions.remove();
-    this.wrapper.before(this.el);
-    this.wrapper.remove();
+    this.wrapper?.querySelector(":scope > .caret")?.remove();
+    this.input?.remove();
+    this.dropdownOptions?.remove();
+    const hide = this.el.parentElement;
+    if (hide?.classList.contains("hide-select")) hide.replaceWith(this.el);
+    if (this.labelEl && this._originalLabelFor !== null) {
+      this.labelEl.htmlFor = this._originalLabelFor;
+    }
+    if (!this.wrapper) return;
+    if (this._createdWrapper) {
+      this.wrapper.replaceWith(this.el);
+    } else {
+      this.wrapper.classList.remove("disabled");
+      if (this.options.classes.length > 0) {
+        this.wrapper.classList.remove(...this.options.classes.split(" ").filter(Boolean));
+      }
+    }
   }
   _createAndAppendOptionWithIcon(realOption, type) {
     const li = document.createElement("li");
+    li.id = "select-option-" + Utils.guid();
     li.setAttribute("role", "option");
+    li.tabIndex = 0;
     if (realOption.disabled) {
       li.classList.add("disabled");
       li.ariaDisabled = "true";
+      li.tabIndex = -1;
     }
     if (type === "optgroup-option") li.classList.add(type);
     const optionText = realOption.textContent;
@@ -3258,6 +3383,7 @@ var FormSelect = class _FormSelect extends Component {
       const label = document.createElement("label");
       const checkbox = document.createElement("input");
       checkbox.type = "checkbox";
+      checkbox.tabIndex = -1;
       const labelText = document.createElement("span");
       labelText.textContent = optionText;
       label.append(checkbox, labelText);
@@ -3321,7 +3447,7 @@ var FormSelect = class _FormSelect extends Component {
     if (texts.length === 0) {
       const firstDisabledOption = this.el.querySelector("option:disabled");
       if (firstDisabledOption && firstDisabledOption.value === "") {
-        this.input.value = firstDisabledOption.innerText;
+        this.input.value = firstDisabledOption.textContent;
         return;
       }
     }
@@ -3343,7 +3469,7 @@ var FormSelect = class _FormSelect extends Component {
   _activateOption(ul, li) {
     if (!li) return;
     if (!this.isMultiple)
-      ul.querySelectorAll("li.selected").forEach((li2) => li2.classList.remove("selected"));
+      ul.querySelectorAll("li.selected").forEach((row) => row.classList.remove("selected"));
     li.classList.add("selected");
     li.ariaSelected = "true";
   }
@@ -3629,7 +3755,6 @@ var _Datepicker = class _Datepicker extends Component {
         }
       }
     };
-    // Set input value to the selected date and close Datepicker
     this._finishSelection = () => {
       this.setInputValues();
     };
@@ -4185,7 +4310,7 @@ var _Datepicker = class _Datepicker extends Component {
     if (opts.yearRangeReverse) arr.reverse();
     const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join("")}</select>`;
     const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
-    html += `<button class="month-prev${prev ? "" : " is-disabled"} btn" type="button">${leftArrow}</button>`;
+    html += `<button class="month-prev${prev ? "" : " is-disabled"}" type="button">${leftArrow}</button>`;
     html += '<div class="selects-container">';
     if (opts.showMonthAfterYear) {
       html += yearHtml + monthHtml;
@@ -4194,7 +4319,7 @@ var _Datepicker = class _Datepicker extends Component {
     }
     html += "</div>";
     const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
-    html += `<button class="month-next${next ? "" : " is-disabled"} btn" type="button">${rightArrow}</button>`;
+    html += `<button class="month-next${next ? "" : " is-disabled"}" type="button">${rightArrow}</button>`;
     return html += "</div>";
   }
   /**
@@ -4392,17 +4517,6 @@ var _Datepicker = class _Datepicker extends Component {
     this.el.parentElement.appendChild(dateInput);
     return dateInput;
   }
-  // deprecated
-  open() {
-    console.warn("Datepicker.open() is deprecated. Remove this method and wrap in modal yourself.");
-    return this;
-  }
-  close() {
-    console.warn(
-      "Datepicker.close() is deprecated. Remove this method and wrap in modal yourself."
-    );
-    return this;
-  }
 };
 _Datepicker._template = `
         <div class="datepicker-container">
@@ -4412,13 +4526,7 @@ _Datepicker._template = `
           </div>
           <div class="datepicker-calendar-container">
             <div class="datepicker-calendar"></div>
-            <div class="datepicker-footer">
-              <!--<button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button"></button>
-              <div class="confirmation-btns">
-                <button class="btn-flat datepicker-cancel waves-effect" type="button"></button>
-                <button class="btn-flat datepicker-done waves-effect" type="button"></button>
-              </div>-->
-            </div>
+            <div class="datepicker-footer"></div>
           </div>
         </div>`;
 var Datepicker = _Datepicker;
@@ -4707,122 +4815,23 @@ var Lightbox = class _Lightbox extends Component {
   }
 };
 
-// src/ts/components/modal.ts
-var _defaults14 = {
-  opacity: 0.5,
-  inDuration: 250,
-  outDuration: 250,
-  onOpenStart: null,
-  onOpenEnd: null,
-  onCloseStart: null,
-  onCloseEnd: null,
-  preventScrolling: true,
-  dismissible: true,
-  startingTop: "4%",
-  endingTop: "10%"
-};
-var _Modal_static, createHtml_fn, createHtmlElement_fn;
-var _Modal = class _Modal extends Component {
-  constructor(el, options) {
-    super(el, options, _Modal);
-    this.el["Expressive_Modal"] = this;
-    this.options = {
-      ..._Modal.defaults,
-      ...options
-    };
-    this.el.tabIndex = 0;
-    this._setupEventHandlers();
-  }
-  static get defaults() {
-    return _defaults14;
-  }
-  static init(els, options = {}) {
-    return super.init(els, options, _Modal);
-  }
-  static getInstance(el) {
-    return el["Expressive_Modal"];
-  }
-  destroy() {
-  }
-  _setupEventHandlers() {
-  }
-  _removeEventHandlers() {
-  }
-  _handleTriggerClick() {
-  }
-  _handleOverlayClick() {
-  }
-  _handleModalCloseClick() {
-  }
-  _handleKeydown() {
-  }
-  _handleFocus() {
-  }
-  open() {
-    return this;
-  }
-  close() {
-    return this;
-  }
-  static create(config) {
-    const isServer = false;
-    if (isServer) return __privateMethod(this, _Modal_static, createHtml_fn).call(this, config);
-    return __privateMethod(this, _Modal_static, createHtmlElement_fn).call(this, config);
-  }
-};
-_Modal_static = new WeakSet();
-createHtml_fn = function(config) {
-  const title = config.header ? `<h2>${typeof config.header === "string" ? config.header : ""}</h2>` : "";
-  const actions = config.footer ? `<form method="dialog">${typeof config.footer === "string" ? config.footer : ""}</form>` : "";
-  return `<dialog id="${config.id}">
-      ${title}
-      <div>${typeof config.content === "string" ? config.content : ""}</div>
-      ${actions}
-    </dialog>`;
-};
-createHtmlElement_fn = function(config) {
-  const dialog = document.createElement("dialog");
-  dialog.id = config.id;
-  return dialog;
-};
-__privateAdd(_Modal, _Modal_static);
-var Modal = _Modal;
-
 // src/ts/components/parallax.ts
-var _defaults15 = {
-  responsiveThreshold: 0
-  // breakpoint for swipeable
-};
-var _Parallax = class _Parallax extends Component {
+var _defaults14 = {};
+var Parallax = class _Parallax extends Component {
   constructor(el, options) {
     super(el, options, _Parallax);
-    this._handleImageLoad = () => {
-      this._updateParallax();
-    };
     this.el["Expressive_Parallax"] = this;
     this.options = {
       ..._Parallax.defaults,
       ...options
     };
-    this._enabled = window.innerWidth > this.options.responsiveThreshold;
-    this._img = this.el.querySelector("img");
-    if (!this._img) {
-      console.error("Parallax: no <img> to move inside the .parallax element");
-      return;
+    if (!this.el.querySelector("img, video")) {
+      console.error("Parallax: no <img> or <video> to move inside the .parallax element");
     }
-    this._updateParallax();
-    this._setupEventHandlers();
-    this._setupStyles();
-    _Parallax._parallaxes.push(this);
   }
   static get defaults() {
-    return _defaults15;
+    return _defaults14;
   }
-  /**
-   * Initializes instances of Parallax.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
   static init(els, options = {}) {
     return super.init(els, options, _Parallax);
   }
@@ -4830,87 +4839,12 @@ var _Parallax = class _Parallax extends Component {
     return el["Expressive_Parallax"];
   }
   destroy() {
-    const index = _Parallax._parallaxes.indexOf(this);
-    if (index >= 0) _Parallax._parallaxes.splice(index, 1);
-    if (this._img) this._img.style.transform = "";
-    this._removeEventHandlers();
     this.el["Expressive_Parallax"] = void 0;
   }
-  static _handleScroll() {
-    for (let i = 0; i < _Parallax._parallaxes.length; i++) {
-      const parallaxInstance = _Parallax._parallaxes[i];
-      parallaxInstance._updateParallax.call(parallaxInstance);
-    }
-  }
-  static _handleWindowResize() {
-    for (let i = 0; i < _Parallax._parallaxes.length; i++) {
-      const parallaxInstance = _Parallax._parallaxes[i];
-      parallaxInstance._enabled = window.innerWidth > parallaxInstance.options.responsiveThreshold;
-    }
-  }
-  _setupEventHandlers() {
-    this._img?.addEventListener("load", this._handleImageLoad);
-    if (_Parallax._parallaxes.length === 0) {
-      if (!_Parallax._handleWindowResizeThrottled) {
-        _Parallax._handleWindowResizeThrottled = Utils.throttle(_Parallax._handleWindowResize, 100);
-      }
-      window.addEventListener("scroll", _Parallax._requestScrollUpdate, { passive: true });
-      window.addEventListener("resize", _Parallax._handleWindowResizeThrottled, { passive: true });
-    }
-  }
-  _removeEventHandlers() {
-    this._img?.removeEventListener("load", this._handleImageLoad);
-    if (_Parallax._parallaxes.length === 0) {
-      window.removeEventListener("scroll", _Parallax._requestScrollUpdate);
-      window.removeEventListener("resize", _Parallax._handleWindowResizeThrottled);
-      if (_Parallax._scrollFrame !== null) {
-        cancelAnimationFrame(_Parallax._scrollFrame);
-        _Parallax._scrollFrame = null;
-      }
-    }
-  }
-  _setupStyles() {
-    if (this._img) this._img.style.opacity = "1";
-  }
-  _updateParallax() {
-    const rect = this.el.getBoundingClientRect();
-    const containerHeight = rect.height > 0 ? this.el.parentElement.offsetHeight : 500;
-    const imgHeight = this._img.offsetHeight;
-    const parallaxDist = imgHeight - containerHeight;
-    const top = rect.top + window.scrollY - document.documentElement.clientTop;
-    const bottom = top + containerHeight;
-    const scrollTop = Utils.getDocumentScrollTop();
-    const windowHeight = window.innerHeight;
-    const windowBottom = scrollTop + windowHeight;
-    const percentScrolled = (windowBottom - top) / (containerHeight + windowHeight);
-    const parallax = parallaxDist * percentScrolled;
-    if (!this._enabled) {
-      this._img.style.transform = "";
-    } else if (bottom > scrollTop && top < scrollTop + windowHeight) {
-      this._img.style.transform = `translate3D(-50%, ${parallax}px, 0)`;
-    }
-  }
-};
-_Parallax._parallaxes = [];
-_Parallax._scrollFrame = null;
-/**
- * Coalesce scroll events onto animation frames.
- *
- * The handler reads layout and then writes a transform, so running it more
- * than once per frame is wasted work - and the 5ms throttle it replaces was
- * short enough to let several run per frame anyway.
- */
-_Parallax._requestScrollUpdate = () => {
-  if (_Parallax._scrollFrame !== null) return;
-  _Parallax._scrollFrame = requestAnimationFrame(() => {
-    _Parallax._scrollFrame = null;
-    _Parallax._handleScroll();
-  });
 };
-var Parallax = _Parallax;
 
 // src/ts/components/pushpin.ts
-var _defaults16 = {
+var _defaults15 = {
   top: 0,
   bottom: Infinity,
   offset: 0,
@@ -4930,7 +4864,7 @@ var _Pushpin = class _Pushpin extends Component {
     this._updatePosition();
   }
   static get defaults() {
-    return _defaults16;
+    return _defaults15;
   }
   /**
    * Initializes instances of Pushpin.
@@ -4999,16 +4933,12 @@ _Pushpin._pushpins = [];
 var Pushpin = _Pushpin;
 
 // src/ts/components/scrollspy.ts
-var _defaults17 = {
-  throttle: 100,
+var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
+var _defaults16 = {
   scrollOffset: 200,
-  // offset - 200 allows elements near bottom of page to scroll
   activeClass: "active",
-  getActiveElement: (id) => {
-    return 'a[href="#' + id + '"]';
-  },
-  keepTopElementActive: false,
-  animationDuration: null
+  getActiveElement: _defaultGetActiveElement,
+  keepTopElementActive: false
 };
 var _ScrollSpy = class _ScrollSpy extends Component {
   constructor(el, options) {
@@ -5018,22 +4948,17 @@ var _ScrollSpy = class _ScrollSpy extends Component {
       ..._ScrollSpy.defaults,
       ...options
     };
+    this.el.style.setProperty(
+      "--md-comp-scrollspy-offset",
+      `${this.options.scrollOffset}px`
+    );
     _ScrollSpy._elements.push(this);
-    _ScrollSpy._count++;
-    _ScrollSpy._increment++;
-    this.tickId = -1;
-    this.id = _ScrollSpy._increment.toString();
-    this._setupEventHandlers();
-    _ScrollSpy._handleWindowScroll();
+    _ScrollSpy._ensureObserver(this.options.scrollOffset);
+    _ScrollSpy._observer?.observe(this.el);
   }
   static get defaults() {
-    return _defaults17;
+    return _defaults16;
   }
-  /**
-   * Initializes instances of ScrollSpy.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
   static init(els, options = {}) {
     return super.init(els, options, _ScrollSpy);
   }
@@ -5041,348 +4966,233 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     return el["Expressive_ScrollSpy"];
   }
   destroy() {
-    const elementIndex = _ScrollSpy._elements.indexOf(this);
-    if (elementIndex >= 0) _ScrollSpy._elements.splice(elementIndex, 1);
-    const inViewIndex = _ScrollSpy._elementsInView.indexOf(this);
-    if (inViewIndex >= 0) _ScrollSpy._elementsInView.splice(inViewIndex, 1);
-    const visibleIndex = _ScrollSpy._visibleElements.indexOf(this.el);
-    if (visibleIndex >= 0) _ScrollSpy._visibleElements.splice(visibleIndex, 1);
-    _ScrollSpy._count--;
-    this._removeEventHandlers();
-    const actElem = document.querySelector(this.options.getActiveElement(this.el.id));
-    actElem?.classList.remove(this.options.activeClass);
-    this.el["Expressive_ScrollSpy"] = void 0;
-  }
-  _setupEventHandlers() {
-    if (_ScrollSpy._count === 1) {
-      _ScrollSpy._throttledScroll = Utils.throttle(_ScrollSpy._handleWindowScroll, this.options.throttle);
-      _ScrollSpy._throttledResize = Utils.throttle(_ScrollSpy._handleWindowScroll, 200);
-      window.addEventListener("scroll", _ScrollSpy._throttledScroll, { passive: true });
-      window.addEventListener("resize", _ScrollSpy._throttledResize, { passive: true });
-      document.body.addEventListener("click", _ScrollSpy._handleTriggerClick);
-    }
-  }
-  _removeEventHandlers() {
-    if (_ScrollSpy._count === 0) {
-      window.removeEventListener("scroll", _ScrollSpy._throttledScroll);
-      window.removeEventListener("resize", _ScrollSpy._throttledResize);
-      document.body.removeEventListener("click", _ScrollSpy._handleTriggerClick);
-      _ScrollSpy._throttledScroll = null;
-      _ScrollSpy._throttledResize = null;
+    const index = _ScrollSpy._elements.indexOf(this);
+    if (index >= 0) _ScrollSpy._elements.splice(index, 1);
+    _ScrollSpy._ratios.delete(this.el);
+    _ScrollSpy._observer?.unobserve(this.el);
+    const link = _ScrollSpy._linkFor(this.el.id, this.options);
+    if (link && link === _ScrollSpy._active) {
+      _ScrollSpy._clearActive(this.options);
+    } else {
+      link?.classList.remove(this.options.activeClass);
+      link?.removeAttribute("aria-current");
+    }
+    if (_ScrollSpy._elements.length === 0) {
+      _ScrollSpy._observer?.disconnect();
+      _ScrollSpy._observer = null;
+      _ScrollSpy._ratios.clear();
+      _ScrollSpy._active = null;
+    } else {
+      _ScrollSpy._syncActive();
     }
+    this.el["Expressive_ScrollSpy"] = void 0;
   }
-  static _findElements(top, right, bottom, left) {
-    const hits = [];
-    const docElem = document.documentElement;
-    const clientTop = docElem.clientTop;
-    const clientLeft = docElem.clientLeft;
-    const scrollY = window.scrollY;
-    const scrollX = window.scrollX;
-    for (let i = 0; i < _ScrollSpy._elements.length; i++) {
-      const scrollspy = _ScrollSpy._elements[i];
-      const currTop = top + scrollspy.options.scrollOffset || 200;
-      const box = scrollspy.el.getBoundingClientRect();
-      if (box.height > 0) {
-        const elTop = box.top + scrollY - clientTop, elLeft = box.left + scrollX - clientLeft, elRight = elLeft + box.width, elBottom = elTop + box.height;
-        const isIntersect = !(elLeft > right || elRight < left || elTop > bottom || elBottom < currTop);
-        if (isIntersect) {
-          hits.push(scrollspy);
-        }
-      }
-    }
-    return hits;
+  static _ensureObserver(offset) {
+    if (_ScrollSpy._observer) return;
+    if (typeof IntersectionObserver === "undefined") return;
+    _ScrollSpy._observer = new IntersectionObserver(_ScrollSpy._onIntersect, {
+      rootMargin: `-${offset}px 0px -45% 0px`,
+      threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]
+    });
   }
-  _enter() {
-    _ScrollSpy._visibleElements = _ScrollSpy._visibleElements.filter(
-      (value) => value.getBoundingClientRect().height !== 0
-    );
-    if (_ScrollSpy._visibleElements[0]) {
-      const actElem = document.querySelector(
-        this.options.getActiveElement(_ScrollSpy._visibleElements[0].id)
-      );
-      actElem?.classList.remove(this.options.activeClass);
-      if (_ScrollSpy._visibleElements[0]["Expressive_ScrollSpy"] && this.id < _ScrollSpy._visibleElements[0]["Expressive_ScrollSpy"].id) {
-        _ScrollSpy._visibleElements.unshift(this.el);
+  static _syncActive() {
+    if (!_ScrollSpy._elements.length) return;
+    const options = _ScrollSpy._elements[0].options;
+    let best = null;
+    let bestRatio = 0;
+    for (const spy of _ScrollSpy._elements) {
+      const ratio = _ScrollSpy._ratios.get(spy.el) ?? 0;
+      if (ratio > bestRatio) {
+        bestRatio = ratio;
+        best = spy;
+      }
+    }
+    if (!best) {
+      if (options.keepTopElementActive) {
+        best = _ScrollSpy._nearestAbove() ?? _ScrollSpy._elements[0];
       } else {
-        _ScrollSpy._visibleElements.push(this.el);
+        _ScrollSpy._clearActive(options);
+        return;
       }
-    } else {
-      _ScrollSpy._visibleElements.push(this.el);
     }
-    _ScrollSpy._resetKeptTopActiveElement(this.options.activeClass);
-    const selector = this.options.getActiveElement(_ScrollSpy._visibleElements[0].id);
-    document.querySelector(selector)?.classList.add(this.options.activeClass);
+    const next = _ScrollSpy._linkFor(best.el.id, best.options);
+    if (next === _ScrollSpy._active) return;
+    _ScrollSpy._clearActive(options);
+    if (!next) return;
+    next.classList.add(best.options.activeClass);
+    next.setAttribute("aria-current", "true");
+    _ScrollSpy._active = next;
   }
-  _exit() {
-    _ScrollSpy._visibleElements = _ScrollSpy._visibleElements.filter(
-      (value) => value.getBoundingClientRect().height !== 0
-    );
-    if (_ScrollSpy._visibleElements[0]) {
-      const actElem = document.querySelector(
-        this.options.getActiveElement(_ScrollSpy._visibleElements[0].id)
-      );
-      actElem?.classList.remove(this.options.activeClass);
-      _ScrollSpy._visibleElements = _ScrollSpy._visibleElements.filter((x) => x.id != this.el.id);
-      if (_ScrollSpy._visibleElements[0]) {
-        const selector = this.options.getActiveElement(_ScrollSpy._visibleElements[0].id);
-        document.querySelector(selector)?.classList.add(this.options.activeClass);
-        _ScrollSpy._resetKeptTopActiveElement(this.options.activeClass);
-      }
-    }
-  }
-  static _resetKeptTopActiveElement(activeClass) {
-    if (_ScrollSpy._keptTopActiveElement) {
-      _ScrollSpy._keptTopActiveElement.classList.remove(activeClass);
-      _ScrollSpy._keptTopActiveElement = null;
-    }
-  }
-  static _getDistanceToViewport(element) {
-    const rect = element.getBoundingClientRect();
-    const distance = rect.top;
-    return distance;
-  }
-  static _smoothScrollIntoView(element, duration = 300) {
-    const targetPosition = element.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
-    const startPosition = window.scrollY || window.pageYOffset;
-    const distance = targetPosition - startPosition;
-    const startTime = performance.now();
-    function scrollStep(currentTime) {
-      const elapsed = currentTime - startTime;
-      const progress = Math.min(elapsed / duration, 1);
-      const scrollY = startPosition + distance * progress;
-      if (progress < 1) {
-        window.scrollTo(0, scrollY);
-        requestAnimationFrame(scrollStep);
-      } else {
-        window.scrollTo(0, targetPosition);
+  static _nearestAbove() {
+    let best = null;
+    let bestTop = -Infinity;
+    for (const spy of _ScrollSpy._elements) {
+      const top = spy.el.getBoundingClientRect().top;
+      if (top <= 0 && top >= bestTop) {
+        bestTop = top;
+        best = spy;
       }
     }
-    requestAnimationFrame(scrollStep);
+    return best;
   }
-};
-_ScrollSpy._keptTopActiveElement = null;
-// The document-level listeners are shared by every instance, so the
-// references they are registered with have to be shared too - registering
-// with one instance's bound handler and unregistering with another's is a
-// silent no-op that leaves the listener attached forever.
-_ScrollSpy._throttledScroll = null;
-_ScrollSpy._throttledResize = null;
-_ScrollSpy._handleTriggerClick = (e) => {
-  const trigger = e.target;
-  for (let i = _ScrollSpy._elements.length - 1; i >= 0; i--) {
-    const scrollspy = _ScrollSpy._elements[i];
-    const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
-    if (trigger === x) {
-      e.preventDefault();
-      if (scrollspy.el["Expressive_ScrollSpy"].options.animationDuration) {
-        _ScrollSpy._smoothScrollIntoView(
-          scrollspy.el,
-          scrollspy.el["Expressive_ScrollSpy"].options.animationDuration
-        );
-      } else {
-        scrollspy.el.scrollIntoView({ behavior: "smooth" });
+  static _clearActive(options) {
+    if (!_ScrollSpy._active) return;
+    _ScrollSpy._active.classList.remove(options.activeClass);
+    _ScrollSpy._active.removeAttribute("aria-current");
+    _ScrollSpy._active = null;
+  }
+  /**
+   * Default lookup compares href attributes (no interpolated selector).
+   * A custom getActiveElement still returns a selector.
+   */
+  static _linkFor(id, options) {
+    if (!id) return null;
+    if (options.getActiveElement !== _defaultGetActiveElement) {
+      try {
+        return document.querySelector(options.getActiveElement(id));
+      } catch {
+        return null;
       }
-      break;
     }
+    const href = `#${id}`;
+    const links = document.querySelectorAll('a[href^="#"]');
+    for (let i = 0; i < links.length; i++) {
+      if (links[i].getAttribute("href") === href) return links[i];
+    }
+    return null;
   }
 };
-_ScrollSpy._handleWindowScroll = () => {
-  _ScrollSpy._ticks++;
-  const top = Utils.getDocumentScrollTop(), left = Utils.getDocumentScrollLeft(), right = left + window.innerWidth, bottom = top + window.innerHeight;
-  const intersections = _ScrollSpy._findElements(top, right, bottom, left);
-  for (let i = 0; i < intersections.length; i++) {
-    const scrollspy = intersections[i];
-    const lastTick = scrollspy.tickId;
-    if (lastTick < 0) {
-      scrollspy._enter();
-    }
-    scrollspy.tickId = _ScrollSpy._ticks;
-  }
-  for (let i = 0; i < _ScrollSpy._elementsInView.length; i++) {
-    const scrollspy = _ScrollSpy._elementsInView[i];
-    const lastTick = scrollspy.tickId;
-    if (lastTick >= 0 && lastTick !== _ScrollSpy._ticks) {
-      scrollspy._exit();
-      scrollspy.tickId = -1;
-    }
-  }
-  _ScrollSpy._elementsInView = intersections;
-  if (_ScrollSpy._elements.length) {
-    const options = _ScrollSpy._elements[0].el["Expressive_ScrollSpy"].options;
-    if (options.keepTopElementActive && _ScrollSpy._visibleElements.length === 0) {
-      _ScrollSpy._resetKeptTopActiveElement(options.activeClass);
-      const topElements = _ScrollSpy._elements.map((value) => ({ value, distance: _ScrollSpy._getDistanceToViewport(value.el) })).filter((entry) => entry.distance <= 0).sort((a, b) => a.distance - b.distance).map((entry) => entry.value);
-      const nearestTopElement = topElements.length ? topElements[topElements.length - 1] : _ScrollSpy._elements[0];
-      const actElem = document.querySelector(options.getActiveElement(nearestTopElement.el.id));
-      actElem?.classList.add(options.activeClass);
-      _ScrollSpy._keptTopActiveElement = actElem;
+_ScrollSpy._elements = [];
+_ScrollSpy._observer = null;
+_ScrollSpy._ratios = /* @__PURE__ */ new Map();
+_ScrollSpy._active = null;
+_ScrollSpy._onIntersect = (entries) => {
+  for (const entry of entries) {
+    if (entry.isIntersecting && entry.intersectionRatio > 0) {
+      _ScrollSpy._ratios.set(entry.target, entry.intersectionRatio);
+    } else {
+      _ScrollSpy._ratios.delete(entry.target);
     }
   }
+  _ScrollSpy._syncActive();
 };
-_ScrollSpy._elements = [];
-_ScrollSpy._elementsInView = [];
-_ScrollSpy._visibleElements = [];
-_ScrollSpy._count = 0;
-_ScrollSpy._increment = 0;
-_ScrollSpy._ticks = 0;
 var ScrollSpy = _ScrollSpy;
 
 // src/ts/components/sidenav.ts
-var _defaults18 = {
+var _defaults17 = {
   edge: "left",
   draggable: true,
   dragTargetWidth: "10px",
-  inDuration: 250,
-  outDuration: 200,
   onOpenStart: null,
   onOpenEnd: null,
   onCloseStart: null,
-  onCloseEnd: null,
-  preventScrolling: true
+  onCloseEnd: null
 };
+var LARGE_UP = "(width >= 993px)";
 var _Sidenav = class _Sidenav extends Component {
   constructor(el, options) {
     super(el, options, _Sidenav);
-    this._handleDragTargetDrag = (e) => {
-      if (!this._isDraggable()) return;
-      let totalDeltaX = this._calculateDelta(e);
-      const dragDirection = totalDeltaX > 0 ? "right" : "left";
-      totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
-      if (this.options.edge === dragDirection) {
-        totalDeltaX = 0;
-      }
-      let transformX = totalDeltaX;
-      let transformPrefix = "translateX(-100%)";
-      if (this.options.edge === "right") {
-        transformPrefix = "translateX(100%)";
-        transformX = -transformX;
-      }
-      this.percentOpen = Math.min(1, totalDeltaX / this._width);
-      this.el.style.transform = `${transformPrefix} translateX(${transformX}px)`;
-      this._overlay.style.opacity = this.percentOpen.toString();
-    };
-    this._handleDragTargetRelease = () => {
-      if (this.isDragged) {
-        if (this.percentOpen > 0.2) {
-          this.open();
-        } else {
-          this._animateOut();
+    /**
+     * Opens the overlay drawer. No-op while the sidenav is docked
+     * (sidenav-fixed at the large breakpoint).
+     */
+    this.open = () => {
+      if (this._isCurrentlyFixed() || this.isOpen || !this._dialog) return;
+      _Sidenav._sidenavs.forEach((other) => {
+        if (other !== this && other.isOpen) other.close();
+      });
+      if (typeof this.options.onOpenStart === "function") {
+        this.options.onOpenStart.call(this, this.el);
+      }
+      this.isOpen = true;
+      this._dialog.classList.remove("dragging");
+      this._clearShift();
+      if (!this._dialog.open) {
+        try {
+          this._dialog.showModal();
+        } catch {
         }
-        this.isDragged = false;
-        this._verticallyScrolling = false;
       }
-    };
-    this._handleCloseDrag = (e) => {
-      if (!this.isOpen || !this._isDraggable()) return;
-      let totalDeltaX = this._calculateDelta(e);
-      const dragDirection = totalDeltaX > 0 ? "right" : "left";
-      totalDeltaX = Math.min(this._width, Math.abs(totalDeltaX));
-      if (this.options.edge !== dragDirection) {
-        totalDeltaX = 0;
+      this._syncTriggers();
+      if (typeof this.options.onOpenEnd === "function") {
+        this.options.onOpenEnd.call(this, this.el);
       }
-      let transformX = -totalDeltaX;
-      if (this.options.edge === "right") {
-        transformX = -transformX;
+    };
+    /**
+     * Closes the overlay drawer. No-op while the sidenav is docked.
+     */
+    this.close = () => {
+      if (this._isCurrentlyFixed() || !this.isOpen) return;
+      this._beginClose();
+      if (this._dialog?.open) {
+        this._closing = true;
+        this._dialog.close();
+      } else {
+        this._finishClose();
       }
-      this.percentOpen = Math.min(1, 1 - totalDeltaX / this._width);
-      this.el.style.transform = `translateX(${transformX}px)`;
-      this._overlay.style.opacity = this.percentOpen.toString();
     };
-    this._calculateDelta = (e) => {
-      if (!this.isDragged) {
-        this._startDrag(e);
+    this._onDialogClose = () => {
+      if (this.isOpen) {
+        this._beginClose();
+        this._finishClose();
+        return;
+      }
+      if (this._closing) {
+        this._closing = false;
+        this._finishClose();
       }
-      this._dragMoveUpdate(e);
-      return this._xPos - this._startingXpos;
     };
-    this._handleCloseRelease = () => {
-      if (this.isOpen && this.isDragged) {
-        if (this.percentOpen > 0.8) {
-          this._animateIn();
-        } else {
-          this.close();
-        }
-        this.isDragged = false;
-        this._verticallyScrolling = false;
+    this._onBreakpointChange = () => {
+      if (this._isCurrentlyFixed() && this.isOpen) {
+        this.close();
       }
     };
-    // Handles closing of Sidenav when element with class .sidenav-close
     this._handleCloseTriggerClick = (e) => {
-      const closeTrigger = e.target.closest(".sidenav-close");
+      const target = e.target;
+      if (!(target instanceof Element)) return;
+      const closeTrigger = target.closest(".sidenav-close");
       if (closeTrigger && !this._isCurrentlyFixed()) {
         this.close();
       }
     };
-    this._handleWindowResize = () => {
-      if (this.lastWindowWidth !== window.innerWidth) {
-        if (window.innerWidth > 992) {
-          this.open();
-        } else {
-          this.close();
-        }
-      }
-      this.lastWindowWidth = window.innerWidth;
-      this.lastWindowHeight = window.innerHeight;
+    this._handleDragTargetDrag = (e) => {
+      if (!this._isDraggable()) return;
+      const delta = this._rawDelta(e);
+      const towardOpen = this.options.edge === "left" ? delta : -delta;
+      const visible = Math.min(this._width, Math.max(0, towardOpen));
+      const percentOpen = this._width ? visible / this._width : 0;
+      this._applyShift(visible - this._width, percentOpen);
     };
-    /**
-     * Opens Sidenav.
-     */
-    this.open = () => {
-      if (this.isOpen === true) return;
-      this.isOpen = true;
-      if (typeof this.options.onOpenStart === "function") {
-        this.options.onOpenStart.call(this, this.el);
-      }
-      if (this._isCurrentlyFixed()) {
-        this.el.style.transform = "translateX(0)";
-        this._enableBodyScrolling();
-        this._overlay.style.display = "none";
-      } else {
-        if (this.options.preventScrolling) this._preventBodyScrolling();
-        if (!this.isDragged || this.percentOpen != 1) this._animateIn();
-        this._setAriaHidden();
-        this._setTabIndex();
+    this._handleDragTargetRelease = () => {
+      if (!this.isDragged) return;
+      this._dialog?.classList.remove("dragging");
+      if (this.percentOpen > 0.2) {
+        this.open();
+      } else if (this._dialog?.open && !this.isOpen) {
+        this._clearShift();
+        this._dialog.close();
       }
+      this.isDragged = false;
+      this._verticallyScrolling = false;
     };
-    /**
-     * Closes Sidenav.
-     */
-    this.close = () => {
-      if (this.isOpen === false) return;
-      this.isOpen = false;
-      if (typeof this.options.onCloseStart === "function") {
-        this.options.onCloseStart.call(this, this.el);
-      }
-      if (this._isCurrentlyFixed()) {
-        const transformX = this.options.edge === "left" ? "-105%" : "105%";
-        this.el.style.transform = `translateX(${transformX})`;
+    this._handleCloseDrag = (e) => {
+      if (!this.isOpen || !this._isDraggable()) return;
+      const delta = this._rawDelta(e);
+      const towardClose = this.options.edge === "left" ? -delta : delta;
+      const hidden = Math.min(this._width, Math.max(0, towardClose));
+      const percentOpen = this._width ? 1 - hidden / this._width : 1;
+      this._applyShift(-hidden, percentOpen);
+    };
+    this._handleCloseRelease = () => {
+      if (!this.isOpen || !this.isDragged) return;
+      this._dialog?.classList.remove("dragging");
+      if (this.percentOpen > 0.8) {
+        this._clearShift();
       } else {
-        this._enableBodyScrolling();
-        if (!this.isDragged || this.percentOpen != 0) {
-          this._animateOut();
-        } else {
-          this._overlay.style.display = "none";
-        }
-        this._setAriaHidden();
-        this._setTabIndex();
+        this.close();
       }
-    };
-    this._setAriaHidden = () => {
-      this.el.ariaHidden = this.isOpen ? "false" : "true";
-      const navWrapper = document.querySelector(".nav-wrapper ul");
-      if (navWrapper) navWrapper.ariaHidden = this.isOpen.toString();
-    };
-    this._setTabIndex = () => {
-      const navLinks = document.querySelectorAll(".nav-wrapper ul li a");
-      const sideNavLinks = document.querySelectorAll(".sidenav li a");
-      if (navLinks)
-        navLinks.forEach((navLink) => {
-          navLink.tabIndex = this.isOpen ? -1 : 0;
-        });
-      if (sideNavLinks)
-        sideNavLinks.forEach((sideNavLink) => {
-          sideNavLink.tabIndex = this.isOpen ? 0 : -1;
-        });
+      this.isDragged = false;
+      this._verticallyScrolling = false;
     };
     this.el["Expressive_Sidenav"] = this;
     this.options = {
@@ -5393,17 +5203,26 @@ var _Sidenav = class _Sidenav extends Component {
     this.isOpen = false;
     this.isFixed = this.el.classList.contains("sidenav-fixed");
     this.isDragged = false;
-    this.lastWindowWidth = window.innerWidth;
-    this.lastWindowHeight = window.innerHeight;
-    this._createOverlay();
+    this.dragTarget = null;
+    this._dialog = null;
+    this._createdDialog = false;
+    this._closing = false;
+    this.percentOpen = 0;
+    this._startingXpos = 0;
+    this._xPos = 0;
+    this._width = 0;
+    this._initialScrollTop = 0;
+    this._verticallyScrolling = false;
+    this._mql = window.matchMedia(LARGE_UP);
+    this._setupDialog();
     this._createDragTarget();
-    this._setupEventHandlers();
     this._setupClasses();
-    this._setupFixed();
+    this._setupEventHandlers();
+    this._syncTriggers();
     _Sidenav._sidenavs.push(this);
   }
   static get defaults() {
-    return _defaults18;
+    return _defaults17;
   }
   /**
    * Initializes instances of Sidenav.
@@ -5418,182 +5237,178 @@ var _Sidenav = class _Sidenav extends Component {
   }
   destroy() {
     this._removeEventHandlers();
-    this._enableBodyScrolling();
-    this._overlay.parentNode.removeChild(this._overlay);
-    this.dragTarget.parentNode.removeChild(this.dragTarget);
+    if (this._dialog?.open) {
+      try {
+        this._dialog.close();
+      } catch {
+      }
+    }
+    this._clearShift();
+    this._unwrapDialog();
+    this._removeDragTarget();
     this.el["Expressive_Sidenav"] = void 0;
-    this.el.style.transform = "";
     const index = _Sidenav._sidenavs.indexOf(this);
     if (index >= 0) {
       _Sidenav._sidenavs.splice(index, 1);
     }
   }
-  _createOverlay() {
-    this._overlay = document.createElement("div");
-    this._overlay.classList.add("sidenav-overlay");
-    this._overlay.addEventListener("click", this.close);
-    document.body.appendChild(this._overlay);
+  _beginClose() {
+    this.isOpen = false;
+    this._dialog?.classList.remove("dragging");
+    this._clearShift();
+    if (typeof this.options.onCloseStart === "function") {
+      this.options.onCloseStart.call(this, this.el);
+    }
+    this._syncTriggers();
+  }
+  _finishClose() {
+    if (typeof this.options.onCloseEnd === "function") {
+      this.options.onCloseEnd.call(this, this.el);
+    }
+  }
+  _setupDialog() {
+    if (this.el instanceof HTMLDialogElement) {
+      this._dialog = this.el;
+      this._createdDialog = false;
+      return;
+    }
+    const parent = this.el.parentElement;
+    if (parent instanceof HTMLDialogElement && parent.classList.contains("sidenav-overlay")) {
+      this._dialog = parent;
+      this._createdDialog = false;
+      return;
+    }
+    const dialog = document.createElement("dialog");
+    dialog.classList.add("sidenav-overlay");
+    this.el.replaceWith(dialog);
+    dialog.appendChild(this.el);
+    this._dialog = dialog;
+    this._createdDialog = true;
+  }
+  _unwrapDialog() {
+    if (!this._createdDialog || !this._dialog) return;
+    this._dialog.replaceWith(this.el);
+    this._dialog = null;
+    this._createdDialog = false;
+  }
+  _createDragTarget() {
+    if (!this.options.draggable) return;
+    const dragTarget = document.createElement("div");
+    dragTarget.classList.add("drag-target");
+    dragTarget.style.width = this.options.dragTargetWidth;
+    if (this.isFixed) dragTarget.dataset.fixed = "";
+    document.body.appendChild(dragTarget);
+    this.dragTarget = dragTarget;
+  }
+  _removeDragTarget() {
+    this.dragTarget?.remove();
+    this.dragTarget = null;
+  }
+  _setupClasses() {
+    if (this.options.edge === "right") {
+      this.el.classList.add("right-aligned");
+      this._dialog?.classList.add("right-aligned");
+      this.dragTarget?.classList.add("right-aligned");
+    }
   }
   _setupEventHandlers() {
     if (_Sidenav._sidenavs.length === 0) {
-      document.body.addEventListener("click", this._handleTriggerClick);
+      document.body.addEventListener("click", _Sidenav._handleTriggerClick);
     }
     const passive = { passive: true };
-    this.dragTarget.addEventListener("touchmove", this._handleDragTargetDrag, passive);
-    this.dragTarget.addEventListener("touchend", this._handleDragTargetRelease);
-    this._overlay.addEventListener("touchmove", this._handleCloseDrag, passive);
-    this._overlay.addEventListener("touchend", this._handleCloseRelease);
-    this.el.addEventListener("touchmove", this._handleCloseDrag, passive);
-    this.el.addEventListener("touchend", this._handleCloseRelease);
+    this.dragTarget?.addEventListener("touchmove", this._handleDragTargetDrag, passive);
+    this.dragTarget?.addEventListener("touchend", this._handleDragTargetRelease);
+    this._dialog?.addEventListener("touchmove", this._handleCloseDrag, passive);
+    this._dialog?.addEventListener("touchend", this._handleCloseRelease);
+    this._dialog?.addEventListener("close", this._onDialogClose);
     this.el.addEventListener("click", this._handleCloseTriggerClick);
-    if (this.isFixed) {
-      window.addEventListener("resize", this._handleWindowResize, passive);
-    }
-    this._setAriaHidden();
-    this._setTabIndex();
+    this._mql.addEventListener("change", this._onBreakpointChange);
   }
   _removeEventHandlers() {
     if (_Sidenav._sidenavs.length === 1) {
-      document.body.removeEventListener("click", this._handleTriggerClick);
-    }
-    this.dragTarget.removeEventListener("touchmove", this._handleDragTargetDrag);
-    this.dragTarget.removeEventListener("touchend", this._handleDragTargetRelease);
-    this._overlay.removeEventListener("touchmove", this._handleCloseDrag);
-    this._overlay.removeEventListener("touchend", this._handleCloseRelease);
-    this.el.removeEventListener("touchmove", this._handleCloseDrag);
-    this.el.removeEventListener("touchend", this._handleCloseRelease);
-    this.el.removeEventListener("click", this._handleCloseTriggerClick);
-    if (this.isFixed) {
-      window.removeEventListener("resize", this._handleWindowResize);
+      document.body.removeEventListener("click", _Sidenav._handleTriggerClick);
     }
+    this.dragTarget?.removeEventListener("touchmove", this._handleDragTargetDrag);
+    this.dragTarget?.removeEventListener("touchend", this._handleDragTargetRelease);
+    this._dialog?.removeEventListener("touchmove", this._handleCloseDrag);
+    this._dialog?.removeEventListener("touchend", this._handleCloseRelease);
+    this._dialog?.removeEventListener("close", this._onDialogClose);
+    this.el.removeEventListener("click", this._handleCloseTriggerClick);
+    this._mql.removeEventListener("change", this._onBreakpointChange);
   }
-  _handleTriggerClick(e) {
-    const trigger = e.target.closest(".sidenav-trigger");
-    if (e.target && trigger) {
-      const sidenavId = Utils.getIdFromTrigger(trigger);
-      const sidenavInstance = document.getElementById(sidenavId)?.["Expressive_Sidenav"];
-      if (sidenavInstance) {
-        sidenavInstance.open();
-      }
+  static _handleTriggerClick(e) {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    const trigger = target.closest(".sidenav-trigger");
+    if (!trigger || !(trigger instanceof HTMLElement)) return;
+    const sidenavId = Utils.getIdFromTrigger(trigger);
+    const sidenavInstance = document.getElementById(sidenavId)?.["Expressive_Sidenav"];
+    if (sidenavInstance) {
+      sidenavInstance.open();
       e.preventDefault();
     }
   }
-  // Set variables needed at the beginning of drag and stop any current transition.
+  _isDraggable() {
+    return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
+  }
+  _isCurrentlyFixed() {
+    return this.isFixed && this._mql.matches;
+  }
   _startDrag(e) {
     const clientX = e.targetTouches[0].clientX;
     this.isDragged = true;
     this._startingXpos = clientX;
-    this._xPos = this._startingXpos;
-    this._time = Date.now();
-    this._width = this.el.getBoundingClientRect().width;
-    this._overlay.style.display = "block";
+    this._xPos = clientX;
+    this._width = this._dialog?.getBoundingClientRect().width || this.el.getBoundingClientRect().width;
     this._initialScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
     this._verticallyScrolling = false;
+    this._dialog?.classList.add("dragging");
+    if (this._dialog && !this._dialog.open) {
+      try {
+        this._dialog.showModal();
+      } catch {
+      }
+    }
   }
-  //Set variables needed at each drag move update tick
   _dragMoveUpdate(e) {
     const clientX = e.targetTouches[0].clientX;
     const currentScrollTop = this.isOpen ? this.el.scrollTop : Utils.getDocumentScrollTop();
-    this.deltaX = Math.abs(this._xPos - clientX);
     this._xPos = clientX;
-    this.velocityX = this.deltaX / (Date.now() - this._time);
-    this._time = Date.now();
     if (this._initialScrollTop !== currentScrollTop) {
       this._verticallyScrolling = true;
     }
   }
-  _setupClasses() {
-    if (this.options.edge === "right") {
-      this.el.classList.add("right-aligned");
-      this.dragTarget.classList.add("right-aligned");
-    }
-  }
-  _removeClasses() {
-    this.el.classList.remove("right-aligned");
-    this.dragTarget.classList.remove("right-aligned");
-  }
-  _setupFixed() {
-    if (this._isCurrentlyFixed()) this.open();
-  }
-  _isDraggable() {
-    return this.options.draggable && !this._isCurrentlyFixed() && !this._verticallyScrolling;
-  }
-  _isCurrentlyFixed() {
-    return this.isFixed && window.innerWidth > 992;
-  }
-  _createDragTarget() {
-    const dragTarget = document.createElement("div");
-    dragTarget.classList.add("drag-target");
-    dragTarget.style.width = this.options.dragTargetWidth;
-    document.body.appendChild(dragTarget);
-    this.dragTarget = dragTarget;
-  }
-  _preventBodyScrolling() {
-    document.body.style.overflow = "hidden";
-  }
-  _enableBodyScrolling() {
-    document.body.style.overflow = "";
-  }
-  _animateIn() {
-    this._animateSidenavIn();
-    this._animateOverlayIn();
-  }
-  _animateOut() {
-    this._animateSidenavOut();
-    this._animateOverlayOut();
-  }
-  _animateSidenavIn() {
-    let slideOutPercent = this.options.edge === "left" ? -1 : 1;
-    if (this.isDragged) {
-      slideOutPercent = this.options.edge === "left" ? slideOutPercent + this.percentOpen : slideOutPercent - this.percentOpen;
-    }
-    const duration = this.options.inDuration;
-    this.el.style.transition = "none";
-    this.el.style.transform = "translateX(" + slideOutPercent * 100 + "%)";
-    setTimeout(() => {
-      this.el.style.transition = `transform ${duration}ms ease`;
-      this.el.style.transform = "translateX(0)";
-    }, 1);
-    setTimeout(() => {
-      if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
-    }, duration);
-  }
-  _animateSidenavOut() {
-    const endPercent = this.options.edge === "left" ? -1 : 1;
-    const duration = this.options.outDuration;
-    this.el.style.transition = `transform ${duration}ms ease`;
-    this.el.style.transform = "translateX(" + endPercent * 100 + "%)";
-    setTimeout(() => {
-      if (typeof this.options.onCloseEnd === "function")
-        this.options.onCloseEnd.call(this, this.el);
-    }, duration);
-  }
-  _animateOverlayIn() {
-    let start = 0;
-    if (this.isDragged) start = this.percentOpen;
-    else this._overlay.style.display = "block";
-    const duration = this.options.inDuration;
-    this._overlay.style.transition = "none";
-    this._overlay.style.opacity = start.toString();
-    setTimeout(() => {
-      this._overlay.style.transition = `opacity ${duration}ms ease`;
-      this._overlay.style.opacity = "1";
-    }, 1);
-  }
-  _animateOverlayOut() {
-    const duration = this.options.outDuration;
-    this._overlay.style.transition = `opacity ${duration}ms ease`;
-    this._overlay.style.opacity = "0";
-    setTimeout(() => {
-      this._overlay.style.display = "none";
-    }, duration);
+  _rawDelta(e) {
+    if (!this.isDragged) this._startDrag(e);
+    this._dragMoveUpdate(e);
+    return this._xPos - this._startingXpos;
+  }
+  _applyShift(shift, percentOpen) {
+    this.percentOpen = percentOpen;
+    const host = this._dialog ?? this.el;
+    host.style.setProperty("--md-comp-nav-drawer-shift", `${shift}px`);
+    host.style.setProperty("--md-comp-nav-drawer-open", String(percentOpen));
+  }
+  _clearShift() {
+    const host = this._dialog ?? this.el;
+    host.style.removeProperty("--md-comp-nav-drawer-shift");
+    host.style.removeProperty("--md-comp-nav-drawer-open");
+  }
+  _syncTriggers() {
+    if (!this.id) return;
+    document.querySelectorAll(".sidenav-trigger").forEach((trigger) => {
+      if (!(trigger instanceof HTMLElement)) return;
+      if (Utils.getIdFromTrigger(trigger) !== this.id) return;
+      trigger.setAttribute("aria-expanded", this.isOpen ? "true" : "false");
+      trigger.setAttribute("aria-controls", this.id);
+    });
   }
 };
 _Sidenav._sidenavs = [];
 var Sidenav = _Sidenav;
 
 // src/ts/components/slider.ts
-var _defaults19 = {
+var _defaults18 = {
   indicators: true,
   height: 400,
   duration: 500,
@@ -5741,7 +5556,7 @@ var Slider = class _Slider extends Component {
     this.start();
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults18;
   }
   /**
    * Initializes instances of Slider.
@@ -5894,7 +5709,7 @@ var Slider = class _Slider extends Component {
 };
 
 // src/ts/components/tabs.ts
-var _defaults20 = {
+var _defaults19 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -5972,7 +5787,7 @@ var Tabs = class _Tabs extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults20;
+    return _defaults19;
   }
   /**
    * Initializes instances of Tabs.
@@ -6011,7 +5826,7 @@ var Tabs = class _Tabs extends Component {
   }
   _queryTabLinks() {
     return this.el.querySelectorAll(
-      ":scope > a, :scope > .tab > a, :scope > li.tab > a"
+      ":scope > a, :scope > .tab > a"
     );
   }
   _createIndicator() {
@@ -6053,7 +5868,7 @@ var Tabs = class _Tabs extends Component {
       }
     });
     const tabsWrapper = document.createElement("div");
-    tabsWrapper.classList.add("tabs-content", "carousel", "carousel-slider");
+    tabsWrapper.classList.add("tabs-content", "carousel", "flat");
     tabsContent[0].parentElement.insertBefore(tabsWrapper, tabsContent[0]);
     tabsContent.forEach((tabContent) => {
       tabsWrapper.appendChild(tabContent);
@@ -6140,67 +5955,103 @@ var Tabs = class _Tabs extends Component {
 };
 
 // src/ts/components/tapTarget.ts
-var _defaults21 = {
+var _defaults20 = {
   onOpen: null,
   onClose: null
 };
 var _TapTarget = class _TapTarget extends Component {
   constructor(el, options) {
     super(el, options, _TapTarget);
-    // Built once per instance; see the note in carousel.ts - the previous form
-    // returned a new throttled function on every resize and never invoked it.
-    this._handleThrottledResize = Utils.throttle(() => this._handleResize(), 200);
-    this._handleKeyboardInteraction = (e) => {
-      if (Utils.keys.ENTER.includes(e.key)) {
-        this._handleTargetToggle();
-      }
-    };
-    this._handleTargetToggle = () => {
-      if (!this.isOpen) this.open();
-      else this.close();
-    };
-    /*_handleOriginClick = () => {
-      this.close();
-    }*/
-    this._handleResize = () => {
-      this._calculatePositioning();
-    };
-    this._handleDocumentClick = (e) => {
-      const target = e.target;
-      if (!(target instanceof Element)) return;
-      if (!this.originEl.contains(target) && !target.closest(".tap-target-wrapper")) {
-        this.close();
-      }
-    };
+    this.wrapper = null;
+    this.waveEl = null;
+    this.contentEl = null;
+    this._createdWrapper = false;
+    this._createdWave = false;
+    this._usePopover = false;
+    this._liftedStatic = false;
+    this._opening = false;
     /**
      * Open Tap Target.
      */
     this.open = () => {
-      if (this.isOpen) return;
+      if (this.isOpen || !this.originEl || !this.wrapper) return;
+      _TapTarget._taptargets.forEach((other) => {
+        if (other !== this) other.close();
+      });
+      this._calculatePositioning();
       if (typeof this.options.onOpen === "function") {
         this.options.onOpen.call(this, this.originEl);
       }
       this.isOpen = true;
       this.wrapper.classList.add("open");
-      this.wrapper.ariaExpanded = "true";
-      document.body.addEventListener("click", this._handleDocumentClick, true);
-      document.body.addEventListener("keypress", this._handleDocumentClick, true);
-      document.body.addEventListener("touchend", this._handleDocumentClick);
+      this.originEl.setAttribute("aria-expanded", "true");
+      if (!this._usePopover) {
+        this.originEl.classList.add("tap-target-origin");
+        if (getComputedStyle(this.originEl).position === "static") {
+          this.originEl.style.position = "relative";
+          this._liftedStatic = true;
+        }
+      }
+      if (this._usePopover) {
+        this._opening = true;
+        try {
+          this.wrapper.showPopover();
+        } catch {
+        }
+        requestAnimationFrame(() => {
+          this._opening = false;
+        });
+      }
     };
     /**
      * Close Tap Target.
      */
     this.close = () => {
       if (!this.isOpen) return;
-      if (typeof this.options.onClose === "function") {
+      if (typeof this.options.onClose === "function" && this.originEl) {
         this.options.onClose.call(this, this.originEl);
       }
       this.isOpen = false;
-      this.wrapper.classList.remove("open");
-      this.wrapper.ariaExpanded = "false";
-      document.body.removeEventListener("click", this._handleDocumentClick, true);
-      document.body.removeEventListener("keypress", this._handleDocumentClick, true);
-      document.body.removeEventListener("touchend", this._handleDocumentClick);
+      this.wrapper?.classList.remove("open");
+      this.originEl?.setAttribute("aria-expanded", "false");
+      this.originEl?.classList.remove("tap-target-origin");
+      if (this._liftedStatic && this.originEl) {
+        this.originEl.style.position = "";
+        this._liftedStatic = false;
+      }
+      if (this._usePopover && this.wrapper) {
+        try {
+          this.wrapper.hidePopover();
+        } catch {
+        }
+      }
+    };
+    // Built once per instance; a fresh throttle per event never fires.
+    this._handleThrottledResize = Utils.throttle(() => this._handleResize(), 200);
+    this._handleOriginKeydown = (e) => {
+      if (Utils.keys.ENTER.includes(e.key) || e.key === " ") {
+        e.preventDefault();
+        this._handleTargetToggle();
+      }
+    };
+    this._handleTargetToggle = () => {
+      if (!this.isOpen) this.open();
+      else this.close();
+    };
+    this._handleResize = () => {
+      if (this.isOpen) this._calculatePositioning();
+    };
+    this._handlePopoverToggle = (e) => {
+      const state = "newState" in e ? String(e.newState) : "";
+      if (state === "open") return;
+      if (this._opening) {
+        try {
+          this.wrapper?.showPopover();
+        } catch {
+        }
+        return;
+      }
+      if (this.isOpen) this.close();
     };
     this.el["Expressive_TapTarget"] = this;
     this.options = {
@@ -6213,20 +6064,14 @@ var _TapTarget = class _TapTarget extends Component {
       console.error(`TapTarget: no element with id "${el.dataset.target ?? ""}" to attach to`);
       return;
     }
-    this.originEl.tabIndex = 0;
     this._setup();
     this._calculatePositioning();
     this._setupEventHandlers();
     _TapTarget._taptargets.push(this);
   }
   static get defaults() {
-    return _defaults21;
+    return _defaults20;
   }
-  /**
-   * Initializes instances of TapTarget.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
   static init(els, options = {}) {
     return super.init(els, options, _TapTarget);
   }
@@ -6236,123 +6081,102 @@ var _TapTarget = class _TapTarget extends Component {
   destroy() {
     this.close();
     this._removeEventHandlers();
+    this._teardownDom();
     this.el["Expressive_TapTarget"] = void 0;
     const index = _TapTarget._taptargets.indexOf(this);
-    if (index >= 0) {
-      _TapTarget._taptargets.splice(index, 1);
-    }
-  }
-  _setupEventHandlers() {
-    if (!this.originEl) return;
-    this.originEl.addEventListener("click", this._handleTargetToggle);
-    this.originEl.addEventListener("keypress", this._handleKeyboardInteraction, true);
-    window.addEventListener("resize", this._handleThrottledResize);
-  }
-  _removeEventHandlers() {
-    if (!this.originEl) return;
-    this.originEl.removeEventListener("click", this._handleTargetToggle);
-    this.originEl.removeEventListener("keypress", this._handleKeyboardInteraction, true);
-    window.removeEventListener("resize", this._handleThrottledResize);
+    if (index >= 0) _TapTarget._taptargets.splice(index, 1);
   }
   _setup() {
-    this.wrapper = this.el.parentElement;
-    this.waveEl = this.wrapper.querySelector(".tap-target-wave");
-    this.el.parentElement.ariaExpanded = "false";
-    this.originEl.style.zIndex = "1002";
-    this.contentEl = this.el.querySelector(".tap-target-content");
-    if (!this.wrapper.classList.contains(".tap-target-wrapper")) {
+    const parent = this.el.parentElement;
+    if (parent?.classList.contains("tap-target-wrapper")) {
+      this.wrapper = parent;
+    } else {
       this.wrapper = document.createElement("div");
       this.wrapper.classList.add("tap-target-wrapper");
       this.el.before(this.wrapper);
       this.wrapper.append(this.el);
+      this._createdWrapper = true;
     }
+    this.contentEl = this.el.querySelector(".tap-target-content");
     if (!this.contentEl) {
       this.contentEl = document.createElement("div");
-      this.contentEl.classList.add("tap-target-content");
+      this.contentEl.className = "tap-target-content";
+      while (this.el.firstChild) this.contentEl.append(this.el.firstChild);
       this.el.append(this.contentEl);
     }
+    this.waveEl = this.el.querySelector(".tap-target-wave") ?? this.wrapper.querySelector(".tap-target-wave");
     if (!this.waveEl) {
       this.waveEl = document.createElement("div");
-      this.waveEl.classList.add("tap-target-wave");
-      this.wrapper.append(this.waveEl);
+      this.waveEl.className = "tap-target-wave";
+      this._createdWave = true;
+    }
+    this.el.prepend(this.waveEl);
+    this.el.setAttribute("role", "dialog");
+    this._labelFromHeading();
+    const origin = this.originEl;
+    origin.setAttribute("aria-expanded", "false");
+    origin.setAttribute("aria-controls", this.el.id || this._ensureId());
+    this._usePopover = typeof this.wrapper.showPopover === "function";
+    if (this._usePopover) {
+      this.wrapper.setAttribute("popover", "auto");
+    }
+  }
+  _ensureId() {
+    if (!this.el.id) this.el.id = `tap-target-${Utils.guid()}`;
+    return this.el.id;
+  }
+  _labelFromHeading() {
+    const heading = this.contentEl?.querySelector("h1, h2, h3, h4, h5, h6");
+    if (!heading) return;
+    if (!heading.id) heading.id = `tap-target-title-${Utils.guid()}`;
+    this.el.setAttribute("aria-labelledby", heading.id);
+  }
+  _teardownDom() {
+    if (this._createdWave) this.waveEl?.remove();
+    if (this._createdWrapper && this.wrapper) {
+      this.wrapper.before(this.el);
+      this.wrapper.remove();
+    }
+    this.wrapper = null;
+    this.waveEl = null;
+  }
+  _setupEventHandlers() {
+    if (!this.originEl) return;
+    this.originEl.addEventListener("click", this._handleTargetToggle);
+    if (!this.originEl.matches('button, a, [tabindex], [role="button"]')) {
+      this.originEl.tabIndex = 0;
+      this.originEl.addEventListener("keydown", this._handleOriginKeydown);
     }
+    this.wrapper?.addEventListener("toggle", this._handlePopoverToggle);
+    window.addEventListener("resize", this._handleThrottledResize, { passive: true });
   }
-  _offset(el) {
-    const box = el.getBoundingClientRect();
-    const docElem = document.documentElement;
-    return {
-      top: box.top + window.pageYOffset - docElem.clientTop,
-      left: box.left + window.pageXOffset - docElem.clientLeft
-    };
+  _removeEventHandlers() {
+    if (!this.originEl) return;
+    this.originEl.removeEventListener("click", this._handleTargetToggle);
+    this.originEl.removeEventListener("keydown", this._handleOriginKeydown);
+    this.wrapper?.removeEventListener("toggle", this._handlePopoverToggle);
+    window.removeEventListener("resize", this._handleThrottledResize);
   }
   _calculatePositioning() {
-    let isFixed = getComputedStyle(this.originEl).position === "fixed";
-    if (!isFixed) {
-      let currentElem = this.originEl;
-      const parents = [];
-      while ((currentElem = currentElem.parentNode) && currentElem !== document)
-        parents.push(currentElem);
-      for (let i = 0; i < parents.length; i++) {
-        isFixed = getComputedStyle(parents[i]).position === "fixed";
-        if (isFixed) break;
-      }
-    }
-    const originWidth = this.originEl.offsetWidth;
-    const originHeight = this.originEl.offsetHeight;
-    const originOffset = this._offset(this.originEl);
-    const originTop = isFixed ? originOffset.top - Utils.getDocumentScrollTop() : originOffset.top;
-    const originLeft = isFixed ? originOffset.left - Utils.getDocumentScrollLeft() : originOffset.left;
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-    const scrollBarWidth = windowWidth - document.documentElement.clientWidth;
-    const centerX = windowWidth / 2;
-    const centerY = windowHeight / 2;
-    const isLeft = originLeft <= centerX;
-    const isRight = originLeft > centerX;
-    const isTop = originTop <= centerY;
-    const isBottom = originTop > centerY;
-    const isCenterX = originLeft >= windowWidth * 0.25 && originLeft <= windowWidth * 0.75;
-    const tapTargetWidth = this.el.offsetWidth;
-    const tapTargetHeight = this.el.offsetHeight;
-    const tapTargetTop = originTop + originHeight / 2 - tapTargetHeight / 2;
-    const tapTargetLeft = originLeft + originWidth / 2 - tapTargetWidth / 2;
-    const tapTargetPosition = isFixed ? "fixed" : "absolute";
-    const tapTargetTextWidth = isCenterX ? tapTargetWidth : tapTargetWidth / 2 + originWidth;
-    const tapTargetTextHeight = tapTargetHeight / 2;
-    const tapTargetTextTop = isTop ? tapTargetHeight / 2 : 0;
-    const tapTargetTextBottom = 0;
-    const tapTargetTextLeft = isLeft && !isCenterX ? tapTargetWidth / 2 - originWidth : 0;
-    const tapTargetTextRight = 0;
-    const tapTargetTextPadding = originWidth;
-    const tapTargetTextAlign = isBottom ? "bottom" : "top";
-    const tapTargetWaveWidth = originWidth > originHeight ? originWidth * 2 : originWidth * 2;
-    const tapTargetWaveHeight = tapTargetWaveWidth;
-    const tapTargetWaveTop = tapTargetHeight / 2 - tapTargetWaveHeight / 2;
-    const tapTargetWaveLeft = tapTargetWidth / 2 - tapTargetWaveWidth / 2;
-    this.wrapper.style.top = isTop ? tapTargetTop + "px" : "";
-    this.wrapper.style.right = isRight ? windowWidth - tapTargetLeft - tapTargetWidth - scrollBarWidth + "px" : "";
-    this.wrapper.style.bottom = isBottom ? windowHeight - tapTargetTop - tapTargetHeight + "px" : "";
-    this.wrapper.style.left = isLeft ? tapTargetLeft + "px" : "";
-    this.wrapper.style.position = tapTargetPosition;
-    this.contentEl.style.width = tapTargetTextWidth + "px";
-    this.contentEl.style.height = tapTargetTextHeight + "px";
-    this.contentEl.style.top = tapTargetTextTop + "px";
-    this.contentEl.style.right = tapTargetTextRight + "px";
-    this.contentEl.style.bottom = tapTargetTextBottom + "px";
-    this.contentEl.style.left = tapTargetTextLeft + "px";
-    this.contentEl.style.padding = tapTargetTextPadding + "px";
-    this.contentEl.style.verticalAlign = tapTargetTextAlign;
-    this.waveEl.style.top = tapTargetWaveTop + "px";
-    this.waveEl.style.left = tapTargetWaveLeft + "px";
-    this.waveEl.style.width = tapTargetWaveWidth + "px";
-    this.waveEl.style.height = tapTargetWaveHeight + "px";
+    if (!this.originEl || !this.wrapper) return;
+    const rect = this.originEl.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const size = Math.max(rect.width, rect.height, 1);
+    this.wrapper.style.setProperty("--md-comp-tap-target-x", `${x}px`);
+    this.wrapper.style.setProperty("--md-comp-tap-target-y", `${y}px`);
+    this.wrapper.style.setProperty("--md-comp-tap-target-origin-size", `${size}px`);
+    const vertical = y <= window.innerHeight / 2 ? "top" : "bottom";
+    const onCenter = x >= window.innerWidth * 0.25 && x <= window.innerWidth * 0.75;
+    const horizontal = onCenter ? "center" : x <= window.innerWidth / 2 ? "left" : "right";
+    this.wrapper.dataset.edge = `${vertical}-${horizontal}`;
   }
 };
 _TapTarget._taptargets = [];
 var TapTarget = _TapTarget;
 
 // src/ts/components/timepicker.ts
-var _defaults22 = {
+var _defaults21 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -6550,7 +6374,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults22;
+    return _defaults21;
   }
   /**
    * Initializes instances of Timepicker.
@@ -6633,7 +6457,7 @@ var _Timepicker = class _Timepicker extends Component {
   }
   /*private _createButton(text: string, visibility: string): HTMLButtonElement {
     const button = document.createElement('button');
-    button.classList.add('btn', 'waves-effect', 'text');
+    button.classList.add('waves-effect', 'text');
     button.style.visibility = visibility;
     button.type = 'button';
     button.tabIndex = -1;
@@ -6674,14 +6498,14 @@ var _Timepicker = class _Timepicker extends Component {
   _clockSetup() {
     if (this.options.twelveHour) {
       this._amBtn = document.createElement("div");
-      this._amBtn.classList.add("am-btn", "btn");
+      this._amBtn.classList.add("am-btn");
       this._amBtn.innerText = "AM";
       this._amBtn.tabIndex = 0;
       this._amBtn.addEventListener("click", this._handleAmPmClick);
       this._amBtn.addEventListener("keypress", this._handleAmPmKeypress);
       this.spanAmPm.appendChild(this._amBtn);
       this._pmBtn = document.createElement("div");
-      this._pmBtn.classList.add("pm-btn", "btn");
+      this._pmBtn.classList.add("pm-btn");
       this._pmBtn.innerText = "PM";
       this._pmBtn.tabIndex = 0;
       this._pmBtn.addEventListener("click", this._handleAmPmClick);
@@ -6888,19 +6712,6 @@ var _Timepicker = class _Timepicker extends Component {
     this.hours = (/* @__PURE__ */ new Date()).getHours();
     this.inputHours.value = (this.hours % (this.options.twelveHour ? 12 : 24)).toString();
   }
-  // deprecated
-  open() {
-    console.warn(
-      "Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."
-    );
-    return this;
-  }
-  close() {
-    console.warn(
-      "Timepicker.close() is deprecated. Remove this method and wrap in modal yourself."
-    );
-    return this;
-  }
 };
 _Timepicker._template = `<div class="timepicker-container">
           <div class="timepicker-digital-display">
@@ -6933,7 +6744,7 @@ _Timepicker._template = `<div class="timepicker-container">
 var Timepicker = _Timepicker;
 
 // src/ts/components/toasts.ts
-var _defaults23 = {
+var _defaults22 = {
   text: "",
   action: "",
   onAction: null,
@@ -6965,7 +6776,7 @@ var _Toast = class _Toast {
     this._setTimer();
   }
   static get defaults() {
-    return _defaults23;
+    return _defaults22;
   }
   static getInstance(el) {
     return el["Expressive_Toast"];
@@ -6990,8 +6801,8 @@ var _Toast = class _Toast {
   }
   static _onDragStart(e) {
     const target = e.target;
-    if (target && !target.closest("button, a") && target.closest(".toast, .snackbar")) {
-      const toastElem = target.closest(".toast, .snackbar");
+    if (target && !target.closest("button, a") && target.closest(".snackbar")) {
+      const toastElem = target.closest(".snackbar");
       const toast = toastElem["Expressive_Toast"];
       if (!toast) return;
       toast.panning = true;
@@ -7058,7 +6869,7 @@ var _Toast = class _Toast {
       const node = toast.content.cloneNode(true);
       toast = node.firstElementChild;
     }
-    toast.classList.add("toast", "snackbar");
+    toast.classList.add("snackbar");
     toast.setAttribute("role", "status");
     toast.setAttribute("aria-live", "polite");
     toast.setAttribute("aria-atomic", "true");
@@ -7089,7 +6900,7 @@ var _Toast = class _Toast {
       close.className = "circle";
       close.setAttribute("aria-label", "Dismiss");
       const icon = document.createElement("i");
-      icon.className = "material-icons";
+      icon.className = "material-symbols";
       icon.setAttribute("aria-hidden", "true");
       icon.textContent = "close";
       close.appendChild(icon);
@@ -7178,7 +6989,7 @@ _Toast._draggedToast = null;
 var Toast = _Toast;
 
 // src/ts/components/tooltip.ts
-var _defaults24 = {
+var _defaults23 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -7246,7 +7057,7 @@ var Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults24;
+    return _defaults23;
   }
   /**
    * Initializes instances of Tooltip.
@@ -7269,7 +7080,7 @@ var Tooltip = class _Tooltip extends Component {
   }
   _appendTooltipEl() {
     this.tooltipEl = document.createElement("div");
-    this.tooltipEl.classList.add("tooltip", "material-tooltip");
+    this.tooltipEl.classList.add("tooltip");
     this.tooltipEl.id = `tooltip-${Utils.guid()}`;
     this.tooltipEl.setAttribute("role", "tooltip");
     this.el.setAttribute("aria-describedby", this.tooltipEl.id);
@@ -7430,7 +7241,6 @@ var AUTO_INIT_COMPONENTS = {
   Datepicker: { component: Datepicker, selector: ".datepicker" },
   Dropdown: { component: Dropdown, selector: ".dropdown-trigger" },
   Lightbox: { component: Lightbox, selector: ".lightboxed" },
-  Modal: { component: Modal, selector: ".modal" },
   Parallax: { component: Parallax, selector: ".parallax" },
   Pushpin: { component: Pushpin, selector: ".pushpin" },
   ScrollSpy: { component: ScrollSpy, selector: ".scrollspy" },
@@ -7454,7 +7264,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/index.ts
-var version = "0.2.0";
+var version = "0.4.0";
 if (typeof document !== "undefined") {
   document.addEventListener("keydown", Utils.docHandleKeydown, true);
   document.addEventListener("keyup", Utils.docHandleKeyup, true);
@@ -7482,7 +7292,6 @@ export {
   FormSelect,
   Forms,
   Lightbox,
-  Modal,
   Parallax,
   Pushpin,
   Range,