@expressivecss/expressive 0.3.0 → 0.5.0

package/dist/js/expressive.js

@@ -3,9 +3,6 @@ var Expressive = (() => {
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   var __getOwnPropNames = Object.getOwnPropertyNames;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __typeError = (msg) => {
-    throw TypeError(msg);
-  };
   var __export = (target, all) => {
     for (var name in all)
       __defProp(target, name, { get: all[name], enumerable: true });
@@ -19,38 +16,34 @@ var Expressive = (() => {
     return to;
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-  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/index.ts
   var index_exports = {};
   __export(index_exports, {
     AutoInit: () => AutoInit,
     Autocomplete: () => Autocomplete,
+    BottomSheets: () => BottomSheets,
     Cards: () => Cards,
     Carousel: () => Carousel,
     CharacterCounter: () => CharacterCounter,
     Chips: () => Chips,
-    Collapsible: () => Collapsible,
     Datepicker: () => Datepicker,
     Dialogs: () => Dialogs,
-    Dropdown: () => Dropdown,
     FloatingActionButton: () => FloatingActionButton,
     FormSelect: () => FormSelect,
     Forms: () => Forms,
     Lightbox: () => Lightbox,
-    Modal: () => Modal,
+    Menu: () => Menu,
+    NavigationRail: () => NavigationRail,
     Parallax: () => Parallax,
-    Pushpin: () => Pushpin,
     Range: () => Range,
     ScrollSpy: () => ScrollSpy,
+    SideSheets: () => SideSheets,
     Sidenav: () => Sidenav,
     Slider: () => Slider,
+    Snackbar: () => Snackbar,
     Tabs: () => Tabs,
-    TapTarget: () => TapTarget,
     Timepicker: () => Timepicker,
-    Toast: () => Toast,
     Tooltip: () => Tooltip,
     Waves: () => Waves,
     version: () => version
@@ -271,7 +264,7 @@ var Expressive = (() => {
      * 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";
@@ -450,11 +443,9 @@ var Expressive = (() => {
   // 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);
@@ -500,16 +491,10 @@ var Expressive = (() => {
        * 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);
         }
@@ -519,17 +504,11 @@ var Expressive = (() => {
        * 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);
         }
@@ -541,15 +520,14 @@ var Expressive = (() => {
         ...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";
@@ -589,13 +567,13 @@ var Expressive = (() => {
     }
   };
 
-  // src/ts/components/dropdown.ts
+  // src/ts/components/menu.ts
   var _defaults2 = {
     alignment: "left",
     autoFocus: true,
     constrainWidth: true,
     container: null,
-    coverTrigger: true,
+    coverTrigger: false,
     closeOnClick: true,
     hover: false,
     inDuration: 150,
@@ -606,9 +584,9 @@ var Expressive = (() => {
     onCloseEnd: null,
     onItemClick: null
   };
-  var _Dropdown = class _Dropdown extends Component {
+  var _Menu = class _Menu extends Component {
     constructor(el, options) {
-      super(el, options, _Dropdown);
+      super(el, options, _Menu);
       this._handleClick = (e) => {
         e.preventDefault();
         if (this.isOpen) {
@@ -626,21 +604,22 @@ var Expressive = (() => {
           this.close();
           return;
         }
-        const leaveToDropdownContent = !!toEl.closest(".dropdown-content, menu");
-        let leaveToActiveDropdownTrigger = false;
-        const closestTrigger = toEl.closest(".dropdown-trigger");
-        if (closestTrigger && !!closestTrigger["Expressive_Dropdown"] && closestTrigger["Expressive_Dropdown"].isOpen) {
-          leaveToActiveDropdownTrigger = true;
+        const leaveToMenuContent = !!(this.menuEl && toEl && this.menuEl.contains(toEl));
+        let leaveToActiveMenuTrigger = false;
+        const closestTrigger = toEl.closest(".menu-trigger");
+        if (closestTrigger && !!closestTrigger["Expressive_Menu"] && closestTrigger["Expressive_Menu"].isOpen) {
+          leaveToActiveMenuTrigger = true;
         }
-        if (!leaveToActiveDropdownTrigger && !leaveToDropdownContent) {
+        if (!leaveToActiveMenuTrigger && !leaveToMenuContent) {
           this.close();
         }
       };
       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.menuEl?.contains(target) && !this.isTouchMoving) {
           this.close();
-        } else if (!target.closest(".dropdown-content, menu")) {
+        } else if (!this.menuEl?.contains(target)) {
           setTimeout(() => {
             if (this.isOpen) {
               this.close();
@@ -658,52 +637,100 @@ var Expressive = (() => {
       };
       this._handleDocumentTouchmove = (e) => {
         const target = e.target;
-        if (target.closest(".dropdown-content, menu")) {
+        if (this.menuEl?.contains(target)) {
           this.isTouchMoving = true;
         }
       };
-      this._handleDropdownClick = (e) => {
+      this._handleMenuClick = (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.menuEl?.contains(li)) {
+          this._alignSubmenu(li);
         }
       };
-      this._handleDropdownKeydown = (e) => {
+      this._handleMenuKeydown = (e) => {
         const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
         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.menuEl;
           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.menuEl.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.menuEl.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);
@@ -717,7 +744,8 @@ var Expressive = (() => {
         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.menuEl;
+          const newOptionEl = Array.from(list.querySelectorAll(":scope > li")).find(
             (el) => el.textContent.trim().toLowerCase().indexOf(string) === 0
           );
           if (newOptionEl) {
@@ -737,7 +765,7 @@ var Expressive = (() => {
         this.filterQuery = [];
       };
       /**
-       * Open dropdown.
+       * Open menu.
        */
       this.open = () => {
         if (this.isOpen) return;
@@ -745,20 +773,21 @@ var Expressive = (() => {
         if (typeof this.options.onOpenStart === "function") {
           this.options.onOpenStart.call(this, this.el);
         }
-        this._resetDropdownStyles();
-        this.dropdownEl.style.display = "block";
-        this._placeDropdown();
+        this._resetMenuStyles();
+        this.menuEl.style.display = "block";
+        this._placeMenu();
         this._animateIn();
         setTimeout(() => this._setupTemporaryEventHandlers(), 0);
         this.el.ariaExpanded = "true";
       };
       /**
-       * Close dropdown.
+       * Close menu.
        */
       this.close = () => {
         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);
         }
@@ -770,21 +799,20 @@ var Expressive = (() => {
         this.el.ariaExpanded = "false";
       };
       /**
-       * While dropdown is open, you can recalculate its dimensions if its contents have changed.
+       * While menu is open, you can recalculate its dimensions if its contents have changed.
        */
       this.recalculateDimensions = () => {
         if (this.isOpen) {
-          this._resetDropdownPositioningStyles();
-          this._placeDropdown();
+          this._resetMenuPositioningStyles();
+          this._placeMenu();
         }
       };
-      this.el["Expressive_Dropdown"] = this;
-      _Dropdown._dropdowns.push(this);
+      this.el["Expressive_Menu"] = this;
+      _Menu._menus.push(this);
       this.id = Utils.getIdFromTrigger(el);
-      this.dropdownEl = document.getElementById(this.id);
-      this.dropdownEl?.classList.add("dropdown-content");
+      this.menuEl = document.getElementById(this.id);
       this.options = {
-        ..._Dropdown.defaults,
+        ..._Menu.defaults,
         ...options
       };
       this.isOpen = false;
@@ -793,51 +821,56 @@ var Expressive = (() => {
       this.focusedIndex = -1;
       this.filterQuery = [];
       this.el.ariaExpanded = "false";
-      this._moveDropdownToElement();
-      this._makeDropdownFocusable();
+      this._moveMenuToElement();
+      this._makeMenuFocusable();
+      this._setupSubmenus();
       this._setupEventHandlers();
     }
     static get defaults() {
       return _defaults2;
     }
     /**
-     * Initializes instances of Dropdown.
+     * Initializes instances of Menu.
      * @param els HTML elements.
      * @param options Component options.
      */
     static init(els, options = {}) {
-      return super.init(els, options, _Dropdown);
+      return super.init(els, options, _Menu);
     }
     static getInstance(el) {
-      return el["Expressive_Dropdown"];
+      return el["Expressive_Menu"];
     }
     destroy() {
       clearTimeout(this.filterTimeout);
-      this._resetDropdownStyles();
+      this._resetMenuStyles();
       this._removeEventHandlers();
       this._removeTemporaryEventHandlers();
-      const index = _Dropdown._dropdowns.indexOf(this);
-      if (index >= 0) _Dropdown._dropdowns.splice(index, 1);
-      this.el["Expressive_Dropdown"] = void 0;
+      const index = _Menu._menus.indexOf(this);
+      if (index >= 0) _Menu._menus.splice(index, 1);
+      this.el["Expressive_Menu"] = void 0;
     }
     _setupEventHandlers() {
       this.el.addEventListener("keydown", this._handleTriggerKeydown);
-      this.dropdownEl?.addEventListener("click", this._handleDropdownClick);
+      this.menuEl?.addEventListener("click", this._handleMenuClick);
+      if (this.menuEl?.querySelector(":scope > li > menu")) {
+        this.menuEl.addEventListener("mouseover", this._handleSubmenuAlign);
+      }
       if (this.options.hover) {
         this.el.addEventListener("mouseenter", this._handleMouseEnter);
         this.el.addEventListener("mouseleave", this._handleMouseLeave);
-        this.dropdownEl.addEventListener("mouseleave", this._handleMouseLeave);
+        this.menuEl.addEventListener("mouseleave", this._handleMouseLeave);
       } else {
         this.el.addEventListener("click", this._handleClick);
       }
     }
     _removeEventHandlers() {
       this.el.removeEventListener("keydown", this._handleTriggerKeydown);
-      this.dropdownEl?.removeEventListener("click", this._handleDropdownClick);
+      this.menuEl?.removeEventListener("click", this._handleMenuClick);
+      this.menuEl?.removeEventListener("mouseover", this._handleSubmenuAlign);
       if (this.options.hover) {
         this.el.removeEventListener("mouseenter", this._handleMouseEnter);
         this.el.removeEventListener("mouseleave", this._handleMouseLeave);
-        this.dropdownEl?.removeEventListener("mouseleave", this._handleMouseLeave);
+        this.menuEl?.removeEventListener("mouseleave", this._handleMouseLeave);
       } else {
         this.el.removeEventListener("click", this._handleClick);
       }
@@ -845,45 +878,104 @@ var Expressive = (() => {
     _setupTemporaryEventHandlers() {
       document.body.addEventListener("click", this._handleDocumentClick);
       document.body.addEventListener("touchmove", this._handleDocumentTouchmove, { passive: true });
-      this.dropdownEl?.addEventListener("keydown", this._handleDropdownKeydown);
+      this.menuEl?.addEventListener("keydown", this._handleMenuKeydown);
       window.addEventListener("resize", this._handleWindowResize);
     }
     _removeTemporaryEventHandlers() {
       document.body.removeEventListener("click", this._handleDocumentClick);
       document.body.removeEventListener("touchmove", this._handleDocumentTouchmove);
-      this.dropdownEl?.removeEventListener("keydown", this._handleDropdownKeydown);
+      this.menuEl?.removeEventListener("keydown", this._handleMenuKeydown);
       window.removeEventListener("resize", this._handleWindowResize);
     }
-    _resetDropdownStyles() {
-      this.dropdownEl.style.display = "";
-      this._resetDropdownPositioningStyles();
-      this.dropdownEl.style.transform = "";
-      this.dropdownEl.style.opacity = "";
+    _isSubmenuTriggerClick(target) {
+      if (!this.menuEl) return false;
+      const li = target.closest("li");
+      if (!li || !this.menuEl.contains(li)) return false;
+      const submenu = li.querySelector(":scope > menu");
+      if (!submenu) return false;
+      return !submenu.contains(target);
+    }
+    _setupSubmenus() {
+      this.menuEl?.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;
+      li.classList.remove("submenu-start");
+      const rect = menu.getBoundingClientRect();
+      if (rect.right > window.innerWidth - 8) li.classList.add("submenu-start");
+    }
+    _closeSubmenus() {
+      this.menuEl?.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.menuEl?.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.menuEl?.contains(li)) return li;
+      return null;
     }
-    _resetDropdownPositioningStyles() {
-      this.dropdownEl.style.width = "";
-      this.dropdownEl.style.height = "";
-      this.dropdownEl.style.left = "";
-      this.dropdownEl.style.top = "";
-      this.dropdownEl.style.transformOrigin = "";
+    _resetMenuStyles() {
+      this.menuEl.style.display = "";
+      this._resetMenuPositioningStyles();
+      this.menuEl.style.transform = "";
+      this.menuEl.style.opacity = "";
     }
-    _moveDropdownToElement(containerEl = null) {
+    _resetMenuPositioningStyles() {
+      this.menuEl.style.width = "";
+      this.menuEl.style.height = "";
+      this.menuEl.style.left = "";
+      this.menuEl.style.top = "";
+      this.menuEl.style.transformOrigin = "";
+    }
+    _moveMenuToElement(containerEl = null) {
       if (this.options.container) {
-        this.options.container.append(this.dropdownEl);
+        this.options.container.append(this.menuEl);
         return;
       }
       if (containerEl) {
-        if (!containerEl.contains(this.dropdownEl)) containerEl.append(this.dropdownEl);
+        if (!containerEl.contains(this.menuEl)) containerEl.append(this.menuEl);
         return;
       }
-      this.el.after(this.dropdownEl);
+      this.el.after(this.menuEl);
     }
-    _makeDropdownFocusable() {
-      if (!this.dropdownEl) return;
-      this.dropdownEl.popover = "";
-      this.dropdownEl.tabIndex = 0;
-      Array.from(this.dropdownEl.children).forEach((el) => {
-        if (el instanceof HTMLHRElement || el.classList.contains("divider")) {
+    _makeMenuFocusable() {
+      if (!this.menuEl) return;
+      this.menuEl.popover = "";
+      this.menuEl.tabIndex = 0;
+      this.menuEl.querySelectorAll(":scope li, :scope > hr").forEach((el) => {
+        if (el instanceof HTMLHRElement || el.classList.contains("divider") || el.classList.contains("gap") || el.classList.contains("label") || el.classList.contains("optgroup")) {
           el.setAttribute("tabindex", "-1");
           return;
         }
@@ -891,25 +983,25 @@ var Expressive = (() => {
       });
     }
     _focusFocusedItem() {
-      if (this.focusedIndex >= 0 && this.focusedIndex < this.dropdownEl.children.length && this.options.autoFocus) {
-        this.dropdownEl.children[this.focusedIndex].focus({
+      if (this.focusedIndex >= 0 && this.focusedIndex < this.menuEl.children.length && this.options.autoFocus) {
+        this.menuEl.children[this.focusedIndex].focus({
           preventScroll: true
         });
-        this.dropdownEl.children[this.focusedIndex].scrollIntoView({
+        this.menuEl.children[this.focusedIndex].scrollIntoView({
           behavior: "smooth",
           block: "nearest",
           inline: "nearest"
         });
       }
     }
-    _getDropdownPosition(closestOverflowParent) {
+    _getMenuPosition(closestOverflowParent) {
       const triggerBRect = this.el.getBoundingClientRect();
-      const dropdownBRect = this.dropdownEl.getBoundingClientRect();
-      let idealHeight = dropdownBRect.height;
-      let idealWidth = dropdownBRect.width;
-      let idealXPos = triggerBRect.left - dropdownBRect.left;
-      let idealYPos = triggerBRect.top - dropdownBRect.top;
-      const dropdownBounds = {
+      const menuBRect = this.menuEl.getBoundingClientRect();
+      let idealHeight = menuBRect.height;
+      let idealWidth = menuBRect.width;
+      let idealXPos = triggerBRect.left - menuBRect.left;
+      let idealYPos = triggerBRect.top - menuBRect.top;
+      const menuBounds = {
         left: idealXPos,
         top: idealYPos,
         height: idealHeight,
@@ -918,7 +1010,7 @@ var Expressive = (() => {
       const alignments = Utils.checkPossibleAlignments(
         this.el,
         closestOverflowParent,
-        dropdownBounds,
+        menuBounds,
         this.options.coverTrigger ? 0 : triggerBRect.height
       );
       let verticalAlignment = "top";
@@ -959,10 +1051,10 @@ var Expressive = (() => {
         }
       }
       if (verticalAlignment === "bottom") {
-        idealYPos = idealYPos - dropdownBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
+        idealYPos = idealYPos - menuBRect.height + (this.options.coverTrigger ? triggerBRect.height : 0);
       }
       if (horizontalAlignment === "right") {
-        idealXPos = idealXPos - dropdownBRect.width + triggerBRect.width;
+        idealXPos = idealXPos - menuBRect.width + triggerBRect.width;
       }
       return {
         x: idealXPos,
@@ -975,26 +1067,26 @@ var Expressive = (() => {
     }
     _animateIn() {
       const duration = this.options.inDuration;
-      this.dropdownEl.style.transition = "none";
-      this.dropdownEl.style.opacity = "0";
-      this.dropdownEl.style.transform = "scale(0.3, 0.3)";
+      this.menuEl.style.transition = "none";
+      this.menuEl.style.opacity = "0";
+      this.menuEl.style.transform = "scale(0.85)";
       setTimeout(() => {
-        this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
-        this.dropdownEl.style.opacity = "1";
-        this.dropdownEl.style.transform = "scale(1, 1)";
+        this.menuEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        this.menuEl.style.opacity = "1";
+        this.menuEl.style.transform = "scale(1)";
       }, 1);
       setTimeout(() => {
-        if (this.options.autoFocus) this.dropdownEl.focus();
+        if (this.options.autoFocus) this.menuEl.focus();
         if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
       }, duration);
     }
     _animateOut() {
       const duration = this.options.outDuration;
-      this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
-      this.dropdownEl.style.opacity = "0";
-      this.dropdownEl.style.transform = "scale(0.3, 0.3)";
+      this.menuEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+      this.menuEl.style.opacity = "0";
+      this.menuEl.style.transform = "scale(0.85)";
       setTimeout(() => {
-        this._resetDropdownStyles();
+        this._resetMenuStyles();
         if (typeof this.options.onCloseEnd === "function")
           this.options.onCloseEnd.call(this, this.el);
       }, duration);
@@ -1009,30 +1101,31 @@ var Expressive = (() => {
       }
       return null;
     }
-    _placeDropdown() {
+    _placeMenu() {
       let closestOverflowParent = this._getClosestAncestor(
-        this.dropdownEl,
+        this.menuEl,
         (ancestor) => {
           return !["HTML", "BODY"].includes(ancestor.tagName) && getComputedStyle(ancestor).overflow !== "visible";
         }
       );
       if (!closestOverflowParent) {
-        closestOverflowParent = !!this.dropdownEl.offsetParent ? this.dropdownEl.offsetParent : this.dropdownEl.parentNode;
+        closestOverflowParent = !!this.menuEl.offsetParent ? this.menuEl.offsetParent : this.menuEl.parentNode;
       }
       if (getComputedStyle(closestOverflowParent).position === "static")
         closestOverflowParent.style.position = "relative";
-      const idealWidth = this.options.constrainWidth ? this.el.getBoundingClientRect().width : this.dropdownEl.getBoundingClientRect().width;
-      this.dropdownEl.style.width = idealWidth + "px";
-      const positionInfo = this._getDropdownPosition(closestOverflowParent);
-      this.dropdownEl.style.left = positionInfo.x + "px";
-      this.dropdownEl.style.top = positionInfo.y + "px";
-      this.dropdownEl.style.height = positionInfo.height + "px";
-      this.dropdownEl.style.width = positionInfo.width + "px";
-      this.dropdownEl.style.transformOrigin = `${positionInfo.horizontalAlignment === "left" ? "0" : "100%"} ${positionInfo.verticalAlignment === "top" ? "0" : "100%"}`;
+      const natural = this.menuEl.getBoundingClientRect().width;
+      const idealWidth = this.options.constrainWidth ? this.el.getBoundingClientRect().width : Math.min(280, Math.max(112, natural));
+      this.menuEl.style.width = idealWidth + "px";
+      const positionInfo = this._getMenuPosition(closestOverflowParent);
+      this.menuEl.style.left = positionInfo.x + "px";
+      this.menuEl.style.top = positionInfo.y + "px";
+      this.menuEl.style.height = positionInfo.height + "px";
+      this.menuEl.style.width = positionInfo.width + "px";
+      this.menuEl.style.transformOrigin = `${positionInfo.horizontalAlignment === "left" ? "0" : "100%"} ${positionInfo.verticalAlignment === "top" ? "0" : "100%"}`;
     }
   };
-  _Dropdown._dropdowns = [];
-  var Dropdown = _Dropdown;
+  _Menu._menus = [];
+  var Menu = _Menu;
 
   // src/ts/components/autocomplete.ts
   var _defaults3 = {
@@ -1040,8 +1133,8 @@ var Expressive = (() => {
     // Autocomplete data set
     onAutocomplete: null,
     // Callback for when autocompleted
-    dropdownOptions: {
-      // Default dropdown options
+    menuOptions: {
+      // Default menu options
       autoFocus: false,
       closeOnClick: false,
       coverTrigger: false
@@ -1057,7 +1150,7 @@ var Expressive = (() => {
         )
       );
     },
-    maxDropDownHeight: "300px",
+    maxMenuHeight: "300px",
     allowUnsafeHTML: false,
     selected: []
   };
@@ -1142,19 +1235,19 @@ var Expressive = (() => {
         this._resetAutocomplete();
         if (inputText.length >= this.options.minLength) {
           this.isOpen = true;
-          this._renderDropdown();
+          this._renderMenu();
         }
-        if (!this.dropdown.isOpen) {
+        if (!this.menu.isOpen) {
           setTimeout(() => {
-            this.dropdown.open();
+            this.menu.open();
           }, 0);
-        } else this.dropdown.recalculateDimensions();
+        } else this.menu.recalculateDimensions();
       };
       /**
        * Hide autocomplete.
        */
       this.close = () => {
-        this.dropdown.close();
+        this.menu.close();
       };
       this.el["Expressive_Autocomplete"] = this;
       this.options = {
@@ -1169,7 +1262,7 @@ var Expressive = (() => {
       this.menuItems = this.options.data || [];
       this.$active = null;
       this._mousedown = false;
-      this._setupDropdown();
+      this._setupMenu();
       this._setupEventHandlers();
     }
     static get defaults() {
@@ -1200,7 +1293,7 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
-      this._removeDropdown();
+      this._removeMenu();
       this.el["Expressive_Autocomplete"] = void 0;
     }
     _setupEventHandlers() {
@@ -1229,34 +1322,33 @@ var Expressive = (() => {
         this.container.removeEventListener("touchend", this._handleContainerMouseupAndTouchend);
       }
     }
-    _setupDropdown() {
-      this.container = document.createElement("ul");
-      this.container.style.maxHeight = this.options.maxDropDownHeight;
+    _setupMenu() {
+      this.container = document.createElement("menu");
+      this.container.style.maxHeight = this.options.maxMenuHeight;
       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) => {
-        const itemElement = this._createDropdownItem(menuItem);
+        const itemElement = this._createMenuItem(menuItem);
         this.container.append(itemElement);
       });
       this.el.parentElement.appendChild(this.container);
-      const dropdownOptions = {
-        ..._Autocomplete.defaults.dropdownOptions,
-        ...this.options.dropdownOptions
+      const menuOptions = {
+        ..._Autocomplete.defaults.menuOptions,
+        ...this.options.menuOptions
       };
-      const userOnItemClick = dropdownOptions.onItemClick;
-      dropdownOptions.onItemClick = (li) => {
+      const userOnItemClick = menuOptions.onItemClick;
+      menuOptions.onItemClick = (li) => {
         if (!li) return;
         const entryID = li.getAttribute("data-id");
         this.selectOption(entryID);
-        if (userOnItemClick && typeof userOnItemClick === "function")
-          userOnItemClick.call(this.dropdown, this.el);
+        if (typeof userOnItemClick === "function") userOnItemClick.call(this.menu, li);
       };
-      this.dropdown = Dropdown.init(this.el, dropdownOptions);
+      this.menu = Menu.init(this.el, menuOptions);
       const label = this.el.parentElement.querySelector("label");
       if (label) this.el.after(label);
-      this.el.removeEventListener("click", this.dropdown._handleClick);
+      this.el.removeEventListener("click", this.menu._handleClick);
       if (!this.options.isMultiSelect && !(this.options.selected.length === 0)) {
         const selectedValue = this.menuItems.filter((value) => value.id === this.selectedValues[0].id);
         this.el.value = selectedValue[0].text;
@@ -1268,7 +1360,7 @@ var Expressive = (() => {
       this.el.parentElement.appendChild(div);
       this._updateSelectedInfo();
     }
-    _removeDropdown() {
+    _removeMenu() {
       this.container.ariaExpanded = "false";
       this.container.parentNode.removeChild(this.container);
     }
@@ -1291,7 +1383,7 @@ var Expressive = (() => {
       }
       return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
     }
-    _createDropdownItem(entry) {
+    _createMenuItem(entry) {
       const item = document.createElement("li");
       item.setAttribute("data-id", entry.id);
       item.setAttribute(
@@ -1358,13 +1450,13 @@ var Expressive = (() => {
       item.style.gridTemplateColumns = getGridConfig();
       return item;
     }
-    _renderDropdown() {
+    _renderMenu() {
       this._resetAutocomplete();
       if (this.menuItems.length === 0) {
         this.menuItems = this.selectedValues;
       }
       for (let i = 0; i < this.menuItems.length; i++) {
-        const item = this._createDropdownItem(this.menuItems[i]);
+        const item = this._createMenuItem(this.menuItems[i]);
         this.container.append(item);
       }
     }
@@ -1395,7 +1487,7 @@ var Expressive = (() => {
      * Updates the visible or selectable items shown in the menu.
      * @param menuItems Items to be available.
      * @param selected Selected item ids
-     * @param open Option to conditionally open dropdown
+     * @param open Option to conditionally open menu
      */
     setMenuItems(menuItems, selected = null, open = true) {
       this.menuItems = menuItems;
@@ -1406,7 +1498,7 @@ var Expressive = (() => {
         );
       }
       if (this.options.isMultiSelect) {
-        this._renderDropdown();
+        this._renderMenu();
       } else {
         this._refreshInputText();
       }
@@ -1414,19 +1506,6 @@ var Expressive = (() => {
       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.
@@ -1441,7 +1520,7 @@ var Expressive = (() => {
         else this.selectedValues = this.selectedValues.filter(
           (selectedEntry) => selectedEntry.id !== entry.id
         );
-        this._renderDropdown();
+        this._renderMenu();
         this.el.focus();
       } else {
         this.selectedValues = [entry];
@@ -1452,14 +1531,6 @@ var Expressive = (() => {
       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.
@@ -1539,7 +1610,7 @@ var Expressive = (() => {
         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);
@@ -1767,12 +1838,14 @@ var Expressive = (() => {
     constructor(el, options) {
       super(el, options, _Range);
       this._handleRangeChange = () => {
+        this._clampDual();
         this._sync();
         this.thumb.classList.add("active");
       };
       this._handleRangeMousedownTouchstart = (e) => {
         this._mousedown = true;
         this.el.classList.add("active");
+        this._clampDual();
         this._sync();
         if (e.type !== "input") {
           this.thumb.classList.add("active");
@@ -1780,6 +1853,7 @@ var Expressive = (() => {
       };
       this._handleRangeInputMousemoveTouchmove = () => {
         if (this._mousedown) {
+          this._clampDual();
           this._sync();
           this.thumb.classList.add("active");
         }
@@ -1864,16 +1938,48 @@ var Expressive = (() => {
     _isVertical() {
       return !!this.el.closest(".vertical");
     }
+    _host() {
+      return this.el.closest(".range, .range-field, label");
+    }
+    _clampDual() {
+      const host = this._host();
+      const peers = host?.querySelectorAll('input[type="range"]');
+      if (!peers || peers.length !== 2) return;
+      const start = peers[0];
+      const end = peers[1];
+      if (this.el === start && +start.value > +end.value) start.value = end.value;
+      if (this.el === end && +end.value < +start.value) end.value = start.value;
+    }
+    _fraction(el) {
+      const max = parseFloat(el.max) || 100;
+      const min = parseFloat(el.min) || 0;
+      const val = parseFloat(el.value) || 0;
+      return max === min ? 0 : (val - min) / (max - min);
+    }
     _sync() {
-      const max = parseFloat(this.el.getAttribute("max")) || 100;
-      const min = parseFloat(this.el.getAttribute("min")) || 0;
-      const val = parseFloat(this.el.value) || 0;
-      const percent = max === min ? 0 : (val - min) / (max - min);
+      const percent = this._fraction(this.el);
+      const fraction = `${percent * 100}%`;
       const left = this.el.offsetLeft;
       const top = this.el.offsetTop;
       const width = this.el.offsetWidth;
       const height = this.el.offsetHeight;
-      this.el.style.setProperty("--md-comp-slider-active-fraction", `${percent * 100}%`);
+      this.el.style.setProperty("--md-comp-slider-active-fraction", fraction);
+      const host = this._host();
+      const peers = host?.querySelectorAll('input[type="range"]');
+      if (host && peers && peers.length === 2) {
+        const nums = Array.from(peers).map((el) => this._fraction(el));
+        host.style.setProperty("--md-comp-slider-start-fraction", `${Math.min(...nums) * 100}%`);
+        host.style.setProperty("--md-comp-slider-end-fraction", `${Math.max(...nums) * 100}%`);
+      }
+      if (host?.classList.contains("stops")) {
+        const max = parseFloat(this.el.max) || 100;
+        const min = parseFloat(this.el.min) || 0;
+        const step = parseFloat(this.el.step);
+        if (step > 0 && Number.isFinite(step)) {
+          const n = Math.round((max - min) / step) + 1;
+          host.style.setProperty("--md-comp-slider-stop-count", String(Math.max(2, n)));
+        }
+      }
       this.value.textContent = this.el.value;
       if (this._isVertical()) {
         this.thumb.style.left = `${left + width / 2}px`;
@@ -1961,6 +2067,170 @@ var Expressive = (() => {
   _Dialogs._down = null;
   var Dialogs = _Dialogs;
 
+  // src/ts/behaviors/bottomSheets.ts
+  var _BottomSheets = class _BottomSheets {
+    static Init() {
+      Utils.onDocumentReady(() => {
+        document.addEventListener("pointerdown", _BottomSheets._onDown, { passive: true });
+        document.addEventListener("pointermove", _BottomSheets._onMove, { passive: true });
+        document.addEventListener("pointerup", _BottomSheets._onUp, { passive: true });
+        document.addEventListener("pointercancel", _BottomSheets._onCancel, { passive: true });
+      });
+    }
+    static _onDown(event) {
+      if (!event.isPrimary) return;
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      const dialog = _BottomSheets._sheet(event.target);
+      if (!dialog?.open) {
+        _BottomSheets._drag = null;
+        return;
+      }
+      if (!_BottomSheets._inHandle(event, dialog)) {
+        _BottomSheets._drag = null;
+        return;
+      }
+      dialog.style.transition = "none";
+      _BottomSheets._drag = {
+        dialog,
+        pointerId: event.pointerId,
+        startY: event.clientY,
+        lastY: event.clientY,
+        lastT: Date.now(),
+        shift: 0
+      };
+    }
+    static _onMove(event) {
+      const drag = _BottomSheets._drag;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const shift = Math.max(0, event.clientY - drag.startY);
+      drag.shift = shift;
+      drag.lastY = event.clientY;
+      drag.lastT = Date.now();
+      drag.dialog.style.setProperty("--md-comp-bottom-sheet-shift", `${shift}px`);
+    }
+    static _onUp(event) {
+      const drag = _BottomSheets._drag;
+      _BottomSheets._drag = null;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const dialog = drag.dialog;
+      dialog.style.transition = "";
+      const dt = Math.max(1, Date.now() - drag.lastT);
+      const velocity = (event.clientY - drag.lastY) / dt;
+      const dismiss = drag.shift > 96 || velocity > 0.5;
+      if (dismiss && dialog.open) {
+        dialog.close();
+      }
+      dialog.style.setProperty("--md-comp-bottom-sheet-shift", "0px");
+    }
+    static _onCancel() {
+      const drag = _BottomSheets._drag;
+      _BottomSheets._drag = null;
+      if (!drag) return;
+      drag.dialog.style.transition = "";
+      drag.dialog.style.setProperty("--md-comp-bottom-sheet-shift", "0px");
+    }
+    static _sheet(target) {
+      if (!(target instanceof Element)) return null;
+      const dialog = target.closest("dialog.bottom-sheet, dialog.bottom");
+      return dialog instanceof HTMLDialogElement ? dialog : null;
+    }
+    static _inHandle(event, dialog) {
+      const target = event.target;
+      if (target instanceof Element && target.closest(".handle")) return true;
+      const rect = dialog.getBoundingClientRect();
+      return event.clientY >= rect.top && event.clientY <= rect.top + 48;
+    }
+  };
+  _BottomSheets._drag = null;
+  var BottomSheets = _BottomSheets;
+
+  // src/ts/behaviors/sideSheets.ts
+  var _SideSheets = class _SideSheets {
+    static Init() {
+      Utils.onDocumentReady(() => {
+        document.addEventListener("pointerdown", _SideSheets._onDown, { passive: true });
+        document.addEventListener("pointermove", _SideSheets._onMove, { passive: true });
+        document.addEventListener("pointerup", _SideSheets._onUp, { passive: true });
+        document.addEventListener("pointercancel", _SideSheets._onCancel, { passive: true });
+      });
+    }
+    static _onDown(event) {
+      if (!event.isPrimary) return;
+      if (event.pointerType === "mouse" && event.button !== 0) return;
+      const dialog = _SideSheets._sheet(event.target);
+      if (!dialog?.open) {
+        _SideSheets._drag = null;
+        return;
+      }
+      if (!_SideSheets._inHandle(event, dialog)) {
+        _SideSheets._drag = null;
+        return;
+      }
+      dialog.style.transition = "none";
+      _SideSheets._drag = {
+        dialog,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        lastX: event.clientX,
+        lastT: Date.now(),
+        shift: 0,
+        startDocked: _SideSheets._startDocked(dialog)
+      };
+    }
+    static _onMove(event) {
+      const drag = _SideSheets._drag;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const delta = event.clientX - drag.startX;
+      const shift = drag.startDocked ? Math.min(0, delta) : Math.max(0, delta);
+      drag.shift = shift;
+      drag.lastX = event.clientX;
+      drag.lastT = Date.now();
+      drag.dialog.style.setProperty("--md-comp-side-sheet-shift", `${shift}px`);
+    }
+    static _onUp(event) {
+      const drag = _SideSheets._drag;
+      _SideSheets._drag = null;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const dialog = drag.dialog;
+      dialog.style.transition = "";
+      const dt = Math.max(1, Date.now() - drag.lastT);
+      const velocity = (event.clientX - drag.lastX) / dt;
+      const dismiss = drag.startDocked ? drag.shift < -96 || velocity < -0.5 : drag.shift > 96 || velocity > 0.5;
+      if (dismiss && dialog.open) {
+        dialog.close();
+      }
+      dialog.style.setProperty("--md-comp-side-sheet-shift", "0px");
+    }
+    static _onCancel() {
+      const drag = _SideSheets._drag;
+      _SideSheets._drag = null;
+      if (!drag) return;
+      drag.dialog.style.transition = "";
+      drag.dialog.style.setProperty("--md-comp-side-sheet-shift", "0px");
+    }
+    static _sheet(target) {
+      if (!(target instanceof Element)) return null;
+      const dialog = target.closest(
+        "dialog.side-sheet, dialog.right, dialog.right-sheet, dialog.left, dialog.left-sheet"
+      );
+      return dialog instanceof HTMLDialogElement ? dialog : null;
+    }
+    static _startDocked(dialog) {
+      return dialog.classList.contains("left") || dialog.classList.contains("left-sheet") || dialog.classList.contains("start");
+    }
+    static _inHandle(event, dialog) {
+      const target = event.target;
+      if (target instanceof Element && target.closest("header")) return true;
+      const rect = dialog.getBoundingClientRect();
+      if (_SideSheets._startDocked(dialog)) {
+        return event.clientX >= rect.right - 24 && event.clientX <= rect.right;
+      }
+      return event.clientX >= rect.left && event.clientX <= rect.left + 24;
+    }
+  };
+  _SideSheets._drag = null;
+  var SideSheets = _SideSheets;
+
   // src/ts/behaviors/forms.ts
   var Forms = class _Forms {
     /**
@@ -2403,7 +2673,7 @@ var Expressive = (() => {
         ..._Carousel.defaults,
         ...options
       };
-      this._flat = this.options.fullWidth || this.el.classList.contains("flat") || this.el.classList.contains("carousel-slider");
+      this._flat = this.options.fullWidth || this.el.classList.contains("flat");
       if (this._flat) {
         this.el.classList.add("flat");
         this.options.fullWidth = true;
@@ -2864,236 +3134,10 @@ var Expressive = (() => {
     }
   };
 
-  // src/ts/components/collapsible.ts
-  var _defaults9 = {
-    accordion: true,
-    onOpenStart: null,
-    onOpenEnd: null,
-    onCloseStart: null,
-    onCloseEnd: null,
-    inDuration: 300,
-    outDuration: 300
-  };
-  var Collapsible = class _Collapsible extends Component {
-    constructor(el, options) {
-      super(el, options, _Collapsible);
-      this._items = [];
-      this._endTimers = [];
-      this._wrappedBodies = [];
-      /**
-       * Open collapsible section.
-       * @param index 0-based index of the section to open.
-       */
-      this.open = (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 index 0-based index of the section to close.
-       */
-      this.close = (index) => {
-        const item = this._items[index];
-        if (!item || !this._isOpen(item)) return;
-        this._setOpen(item, false);
-      };
-      this._handleClick = (e) => {
-        const header = e.target.closest(".collapsible-header");
-        if (!header || header.closest(".collapsible") !== this.el) return;
-        if (header.closest("details")) return;
-        const item = header.closest("li");
-        if (!item) return;
-        const index = this._items.indexOf(item);
-        if (index < 0) return;
-        if (this._isOpen(item)) this.close(index);
-        else this.open(index);
-      };
-      this._handleKeydown = (e) => {
-        if (!Utils.keys.ENTER.includes(e.key) && e.key !== " ") return;
-        const header = e.target.closest(".collapsible-header");
-        if (!header || header.closest(".collapsible") !== this.el) return;
-        if (header.closest("details")) return;
-        if (header.matches("a, button")) return;
-        e.preventDefault();
-        const item = header.closest("li");
-        if (!item) return;
-        const index = this._items.indexOf(item);
-        if (index < 0) return;
-        if (this._isOpen(item)) this.close(index);
-        else this.open(index);
-      };
-      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,
-        accordion
-      };
-      this._groupName = el.id ? `collapsible-${el.id}` : `collapsible-${Utils.guid()}`;
-      this._items = this._collectItems();
-      this._wrapDetailsBodies();
-      this._setupItems();
-      this._setupEventHandlers();
-    }
-    static get defaults() {
-      return _defaults9;
-    }
-    /**
-     * Initializes instances of Collapsible.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els, options = {}) {
-      return super.init(els, options, _Collapsible);
-    }
-    static getInstance(el) {
-      return el["Expressive_Collapsible"];
-    }
-    destroy() {
-      this._removeEventHandlers();
-      this._endTimers.forEach((id) => clearTimeout(id));
-      this._endTimers = [];
-      this._unwrapDetailsBodies();
-      this.el["Expressive_Collapsible"] = void 0;
-    }
-    _collectItems() {
-      const details = Array.from(this.el.querySelectorAll(":scope > details"));
-      if (details.length) return details;
-      return Array.from(this.el.children).filter((c) => c.tagName === "LI");
-    }
-    _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;
-          else item.classList.remove("active");
-        });
-      }
-      this._items.forEach((item) => this._syncAria(item));
-    }
-    _isOpen(item) {
-      if (item instanceof HTMLDetailsElement) return item.open;
-      return item.classList.contains("active");
-    }
-    _setOpen(item, open) {
-      if (item instanceof HTMLDetailsElement) {
-        item.open = open;
-        return;
-      }
-      item.classList.toggle("active", open);
-      this._syncAria(item);
-      this._notify(item, open);
-    }
-    _headerOf(item) {
-      if (item instanceof HTMLDetailsElement) {
-        return item.querySelector(":scope > summary");
-      }
-      return item.querySelector(":scope > .collapsible-header");
-    }
-    _wrapDetailsBodies() {
-      this._items.forEach((item) => {
-        if (!(item instanceof HTMLDetailsElement)) return;
-        if (item.querySelector(":scope > .collapsible-body")) return;
-        const body = document.createElement("div");
-        body.className = "collapsible-body";
-        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 > .collapsible-body");
-    }
-    _syncAria(item) {
-      if (item instanceof HTMLDetailsElement) return;
-      const header = this._headerOf(item);
-      const body = this._bodyOf(item);
-      if (!header) return;
-      header.setAttribute("aria-expanded", String(this._isOpen(item)));
-      if (body) {
-        if (!body.id) body.id = `collapsible-body-${Utils.guid()}`;
-        header.setAttribute("aria-controls", body.id);
-      }
-      if (!header.matches("a, button, summary")) {
-        header.setAttribute("role", "button");
-        if (header.tabIndex < 0) header.tabIndex = 0;
-      }
-    }
-    _setupEventHandlers() {
-      this.el.addEventListener("click", this._handleClick);
-      this.el.addEventListener("keydown", this._handleKeydown);
-      this.el.addEventListener("toggle", this._handleToggle, true);
-    }
-    _removeEventHandlers() {
-      this.el.removeEventListener("click", this._handleClick);
-      this.el.removeEventListener("keydown", this._handleKeydown);
-      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;
-    }
-  };
-
   // src/ts/components/select.ts
-  var _defaults10 = {
+  var _defaults9 = {
     classes: "",
-    dropdownOptions: {}
+    menuOptions: {}
   };
   var FormSelect = class _FormSelect extends Component {
     constructor(el, options) {
@@ -3112,8 +3156,14 @@ var Expressive = (() => {
         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) {
+        if (this.menu && this.menu.isOpen) {
           this._setValueToInput();
           this._setSelectedStates();
         }
@@ -3128,11 +3178,13 @@ var Expressive = (() => {
       this.nativeTabIndex = this.el.tabIndex ?? -1;
       this.el.tabIndex = -1;
       this._values = [];
-      this._setupDropdown();
+      this._createdWrapper = false;
+      this._originalLabelFor = null;
+      this._setupMenu();
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults10;
+      return _defaults9;
     }
     /**
      * Initializes instances of FormSelect.
@@ -3147,36 +3199,48 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
-      this.dropdown?.destroy();
-      this._removeDropdown();
+      this.menu?.destroy();
+      this._removeMenu();
+      this.el.tabIndex = this.nativeTabIndex;
       this.el["Expressive_FormSelect"] = void 0;
     }
     /**
-     * Re-read the native `<select>` and update the generated dropdown to match.
+     * Re-read the native `<select>` and update the generated menu to match.
      *
      * 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 Menu instance stay put.
      */
     refresh() {
+      if (!this.menuEl) 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.menuEl.addEventListener("focusin", this._handleOptionFocus);
     }
     _removeEventHandlers() {
-      this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((el) => {
+      this._removeOptionHandlers();
+      this.el.removeEventListener("change", this._handleSelectChange);
+      this.input?.removeEventListener("click", this._handleInputClick);
+      this.menuEl?.removeEventListener("focusin", this._handleOptionFocus);
+    }
+    _setupOptionHandlers() {
+      this.menuEl.querySelectorAll("li:not(.optgroup)").forEach((el) => {
+        el.addEventListener("click", this._handleOptionClick);
+        el.addEventListener("keydown", this._handleOptionKeydown);
+      });
+    }
+    _removeOptionHandlers() {
+      this.menuEl?.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;
@@ -3188,6 +3252,7 @@ var Expressive = (() => {
     _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);
@@ -3203,73 +3268,57 @@ var Expressive = (() => {
             new Event("change", { bubbles: true, cancelable: true, composed: true })
           );
       }
-      if (!this.isMultiple) this.dropdown.close();
+      if (!this.isMultiple) this.menu?.close();
     }
-    _setupDropdown() {
+    _setupMenu() {
       this.labelEl = this.el.labels?.[0] ?? null;
-      this.wrapper = document.createElement("div");
-      this.wrapper.classList.add("select-wrapper", "input-field");
+      this._setupWrapper();
+      this._hideNativeSelect();
+      if (this.el.disabled) this.wrapper.classList.add("disabled");
+      this.menuEl = document.createElement("menu");
+      this.menuEl.id = `select-options-${Utils.guid()}`;
+      this.menuEl.setAttribute("popover", "auto");
+      this.menuEl.setAttribute("role", "listbox");
+      this.menuEl.ariaMultiSelectable = this.isMultiple.toString();
+      if (this.isMultiple) this.menuEl.classList.add("multiple-select-menu");
+      this._buildOptions();
+      this.wrapper.append(this.menuEl);
+      this._buildInput();
+      this._buildCaret();
+      this._initMenu();
+      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));
       }
-      this.el.before(this.wrapper);
+    }
+    _hideNativeSelect() {
       const hiddenDiv = document.createElement("div");
       hiddenDiv.classList.add("hide-select");
-      this.wrapper.append(hiddenDiv);
+      this.el.before(hiddenDiv);
       hiddenDiv.appendChild(this.el);
-      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.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.wrapper.append(this.dropdownOptions);
+      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("menu-trigger");
       this.input.type = "text";
       this.input.readOnly = true;
-      this.input.setAttribute("data-target", this.dropdownOptions.id);
+      this.input.setAttribute("data-target", this.menuEl.id);
       this.input.ariaReadOnly = "true";
       this.input.ariaRequired = this.el.hasAttribute("required").toString();
       if (this.el.disabled) this.input.disabled = true;
@@ -3280,71 +3329,131 @@ var Expressive = (() => {
         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.setAttribute("aria-controls", this.menuEl.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);
+    }
+    _initMenu() {
+      if (this.el.disabled) return;
+      const menuOptions = { ...this.options.menuOptions };
+      menuOptions.coverTrigger = false;
+      const userOnOpenEnd = menuOptions.onOpenEnd;
+      const userOnCloseEnd = menuOptions.onCloseEnd;
+      menuOptions.onOpenEnd = () => {
+        const selectedOption = this.menuEl.querySelector(".selected");
+        if (selectedOption) {
+          Utils.keyDown = true;
+          this.menu.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+          this.menu._focusFocusedItem();
+          Utils.keyDown = false;
+          if (this.menu.isScrollable) {
+            let scrollOffset = selectedOption.getBoundingClientRect().top - this.menuEl.getBoundingClientRect().top;
+            scrollOffset -= this.menuEl.clientHeight / 2;
+            this.menuEl.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.menu, this.el);
+      };
+      menuOptions.onCloseEnd = () => {
+        this.input.ariaExpanded = "false";
+        this.input.removeAttribute("aria-activedescendant");
+        if (userOnCloseEnd && typeof userOnCloseEnd === "function")
+          userOnCloseEnd.call(this.menu, this.el);
+      };
+      menuOptions.closeOnClick = false;
+      this.menu = Menu.init(this.input, menuOptions);
+    }
+    _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.menuEl.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.menuEl.replaceChildren();
+      this._buildOptions();
+      this._setupOptionHandlers();
+      this.menu?._makeMenuFocusable();
     }
     _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();
+    _removeMenu() {
+      this.wrapper?.querySelector(":scope > .caret")?.remove();
+      this.input?.remove();
+      this.menuEl?.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;
@@ -3353,6 +3462,7 @@ var Expressive = (() => {
         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);
@@ -3370,7 +3480,7 @@ var Expressive = (() => {
         img.ariaHidden = "true";
         li.prepend(img);
       }
-      this.dropdownOptions.append(li);
+      this.menuEl.append(li);
       return li;
     }
     _selectValue(value) {
@@ -3416,7 +3526,7 @@ var Expressive = (() => {
       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;
         }
       }
@@ -3428,7 +3538,7 @@ var Expressive = (() => {
         const cb = value.optionEl.querySelector('input[type="checkbox"]');
         if (cb) cb.checked = optionIsSelected;
         if (optionIsSelected) {
-          this._activateOption(this.dropdownOptions, value.optionEl);
+          this._activateOption(this.menuEl, value.optionEl);
         } else {
           value.optionEl.classList.remove("selected");
           value.optionEl.ariaSelected = "false";
@@ -3438,7 +3548,7 @@ var Expressive = (() => {
     _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";
     }
@@ -3448,7 +3558,7 @@ var Expressive = (() => {
   };
 
   // src/ts/plugins/dockedDisplayPlugin.ts
-  var _defaults11 = {
+  var _defaults10 = {
     margin: 5,
     transition: 10,
     duration: 250,
@@ -3497,7 +3607,7 @@ var Expressive = (() => {
       };
       this.el = el;
       this.options = {
-        ..._defaults11,
+        ..._defaults10,
         ...options
       };
       this.container = document.createElement("div");
@@ -3518,7 +3628,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/datepicker.ts
-  var _defaults12 = {
+  var _defaults11 = {
     // the default output format for the input field value
     format: "mmm dd, yyyy",
     // Used to create date object from current input string
@@ -3724,7 +3834,6 @@ var Expressive = (() => {
           }
         }
       };
-      // Set input value to the selected date and close Datepicker
       this._finishSelection = () => {
         this.setInputValues();
       };
@@ -3784,7 +3893,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults12;
+      return _defaults11;
     }
     /**
      * Initializes instances of Datepicker.
@@ -4280,7 +4389,7 @@ var Expressive = (() => {
       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;
@@ -4289,7 +4398,7 @@ var Expressive = (() => {
       }
       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>";
     }
     /**
@@ -4367,11 +4476,11 @@ var Expressive = (() => {
       const monthSelect = this.calendarEl.querySelector(".orig-select-month");
       FormSelect.init(yearSelect, {
         classes: "select-year",
-        dropdownOptions: { container: document.body, constrainWidth: false }
+        menuOptions: { container: document.body, constrainWidth: false }
       });
       FormSelect.init(monthSelect, {
         classes: "select-month",
-        dropdownOptions: { container: document.body, constrainWidth: false }
+        menuOptions: { container: document.body, constrainWidth: false }
       });
       yearSelect.addEventListener("change", this._handleYearChange);
       monthSelect.addEventListener("change", this._handleMonthChange);
@@ -4487,17 +4596,6 @@ var Expressive = (() => {
       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">
@@ -4507,19 +4605,13 @@ var Expressive = (() => {
           </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;
 
   // src/ts/components/lightbox.ts
-  var _defaults13 = {
+  var _defaults12 = {
     inDuration: 275,
     outDuration: 200,
     onOpenStart: null,
@@ -4638,7 +4730,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults13;
+      return _defaults12;
     }
     /**
      * Initializes instances of Lightbox.
@@ -4802,217 +4894,41 @@ var Expressive = (() => {
     }
   };
 
-  // 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 {
+  // src/ts/components/parallax.ts
+  var _defaults13 = {};
+  var Parallax = class _Parallax extends Component {
     constructor(el, options) {
-      super(el, options, _Modal);
-      this.el["Expressive_Modal"] = this;
+      super(el, options, _Parallax);
+      this.el["Expressive_Parallax"] = this;
       this.options = {
-        ..._Modal.defaults,
+        ..._Parallax.defaults,
         ...options
       };
-      this.el.tabIndex = 0;
-      this._setupEventHandlers();
+      if (!this.el.querySelector("img, video")) {
+        console.error("Parallax: no <img> or <video> to move inside the .parallax element");
+      }
     }
     static get defaults() {
-      return _defaults14;
+      return _defaults13;
     }
     static init(els, options = {}) {
-      return super.init(els, options, _Modal);
+      return super.init(els, options, _Parallax);
     }
     static getInstance(el) {
-      return el["Expressive_Modal"];
+      return el["Expressive_Parallax"];
     }
     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
-  };
-  var Parallax = class _Parallax extends Component {
-    constructor(el, options) {
-      super(el, options, _Parallax);
-      this.el["Expressive_Parallax"] = this;
-      this.options = {
-        ..._Parallax.defaults,
-        ...options
-      };
-      if (!this.el.querySelector("img, video")) {
-        console.error("Parallax: no <img> or <video> to move inside the .parallax element");
-      }
-    }
-    static get defaults() {
-      return _defaults15;
-    }
-    static init(els, options = {}) {
-      return super.init(els, options, _Parallax);
-    }
-    static getInstance(el) {
-      return el["Expressive_Parallax"];
-    }
-    destroy() {
-      this.el["Expressive_Parallax"] = void 0;
-    }
-  };
-
-  // src/ts/components/pushpin.ts
-  var _defaults16 = {
-    top: 0,
-    bottom: Infinity,
-    offset: 0,
-    onPositionChange: null
-  };
-  var _Pushpin = class _Pushpin extends Component {
-    constructor(el, options) {
-      super(el, options, _Pushpin);
-      this.el["Expressive_Pushpin"] = this;
-      this.options = {
-        ..._Pushpin.defaults,
-        ...options
-      };
-      this.originalOffset = this.el.offsetTop;
-      _Pushpin._pushpins.push(this);
-      this._setupEventHandlers();
-      this._updatePosition();
-    }
-    static get defaults() {
-      return _defaults16;
-    }
-    /**
-     * Initializes instances of Pushpin.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els, options = {}) {
-      return super.init(els, options, _Pushpin);
-    }
-    static getInstance(el) {
-      return el["Expressive_Pushpin"];
-    }
-    destroy() {
-      this.el.style.top = null;
-      this._removePinClasses();
-      const index = _Pushpin._pushpins.indexOf(this);
-      _Pushpin._pushpins.splice(index, 1);
-      if (_Pushpin._pushpins.length === 0) {
-        this._removeEventHandlers();
-      }
-      this.el["Expressive_Pushpin"] = void 0;
-    }
-    static _updateElements() {
-      for (let i = 0; i < _Pushpin._pushpins.length; i++) {
-        _Pushpin._pushpins[i]._updatePosition();
-      }
-    }
-    _setupEventHandlers() {
-      document.addEventListener("scroll", _Pushpin._updateElements, { passive: true });
-    }
-    _removeEventHandlers() {
-      document.removeEventListener("scroll", _Pushpin._updateElements);
-    }
-    _updatePosition() {
-      const scrolled = Utils.getDocumentScrollTop() + this.options.offset;
-      if (this.options.top <= scrolled && this.options.bottom >= scrolled && !this.el.classList.contains("pinned")) {
-        this._removePinClasses();
-        this.el.style.top = `${this.options.offset}px`;
-        this.el.classList.add("pinned");
-        if (typeof this.options.onPositionChange === "function") {
-          this.options.onPositionChange.call(this, "pinned");
-        }
-      }
-      if (scrolled < this.options.top && !this.el.classList.contains("pin-top")) {
-        this._removePinClasses();
-        this.el.style.top = "0";
-        this.el.classList.add("pin-top");
-        if (typeof this.options.onPositionChange === "function") {
-          this.options.onPositionChange.call(this, "pin-top");
-        }
-      }
-      if (scrolled > this.options.bottom && !this.el.classList.contains("pin-bottom")) {
-        this._removePinClasses();
-        this.el.classList.add("pin-bottom");
-        this.el.style.top = `${this.options.bottom - this.originalOffset}px`;
-        if (typeof this.options.onPositionChange === "function") {
-          this.options.onPositionChange.call(this, "pin-bottom");
-        }
-      }
-    }
-    _removePinClasses() {
-      this.el.classList.remove("pin-top", "pinned", "pin-bottom");
+      this.el["Expressive_Parallax"] = void 0;
     }
   };
-  _Pushpin._pushpins = [];
-  var Pushpin = _Pushpin;
 
   // src/ts/components/scrollspy.ts
-  var _defaults17 = {
-    throttle: 100,
+  var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
+  var _defaults14 = {
     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) {
@@ -5022,22 +4938,17 @@ var Expressive = (() => {
         ..._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 _defaults14;
     }
-    /**
-     * Initializes instances of ScrollSpy.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
     static init(els, options = {}) {
       return super.init(els, options, _ScrollSpy);
     }
@@ -5045,348 +4956,233 @@ var Expressive = (() => {
       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 _defaults15 = {
     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 = {
@@ -5397,17 +5193,26 @@ var Expressive = (() => {
       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 _defaults15;
     }
     /**
      * Initializes instances of Sidenav.
@@ -5422,182 +5227,284 @@ var Expressive = (() => {
     }
     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;
+    _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);
+      });
     }
-    _isCurrentlyFixed() {
-      return this.isFixed && window.innerWidth > 992;
+  };
+  _Sidenav._sidenavs = [];
+  var Sidenav = _Sidenav;
+
+  // src/ts/components/navigationRail.ts
+  var _defaults16 = {
+    onOpenStart: null,
+    onOpenEnd: null,
+    onCloseStart: null,
+    onCloseEnd: null
+  };
+  var COMPACT = "(width < 601px)";
+  var NavigationRail = class _NavigationRail extends Component {
+    constructor(el, options) {
+      super(el, options, _NavigationRail);
+      /**
+       * Expands the rail. On compact windows the overlay (scrim) is CSS.
+       */
+      this.expand = () => {
+        if (this.isExpanded) return;
+        if (typeof this.options.onOpenStart === "function") {
+          this.options.onOpenStart.call(this, this.el);
+        }
+        this.isExpanded = true;
+        this.el.classList.add("expanded");
+        this._sync();
+        if (typeof this.options.onOpenEnd === "function") {
+          this.options.onOpenEnd.call(this, this.el);
+        }
+      };
+      /**
+       * Collapses the rail.
+       */
+      this.collapse = () => {
+        if (!this.isExpanded) return;
+        if (typeof this.options.onCloseStart === "function") {
+          this.options.onCloseStart.call(this, this.el);
+        }
+        this.isExpanded = false;
+        this.el.classList.remove("expanded");
+        this._sync();
+        if (typeof this.options.onCloseEnd === "function") {
+          this.options.onCloseEnd.call(this, this.el);
+        }
+      };
+      /**
+       * Toggles expanded / collapsed.
+       */
+      this.toggle = () => {
+        if (this.isExpanded) this.collapse();
+        else this.expand();
+      };
+      this._onClick = (e) => {
+        const target = e.target;
+        if (!(target instanceof Node)) return;
+        if (this._toggle && (target === this._toggle || this._toggle.contains(target))) {
+          this.toggle();
+          e.preventDefault();
+          return;
+        }
+        if (target === this.el && this.isExpanded && this._isModal()) {
+          this.collapse();
+        }
+      };
+      this._onKeyDown = (e) => {
+        if (e.key !== "Escape") return;
+        if (this.isExpanded && this._isModal()) this.collapse();
+      };
+      this.el["Expressive_NavigationRail"] = this;
+      this.options = {
+        ..._NavigationRail.defaults,
+        ...options
+      };
+      this._toggle = this._findToggle();
+      this._mql = window.matchMedia(COMPACT);
+      this.isExpanded = this.el.classList.contains("expanded");
+      this._sync();
+      this.el.addEventListener("click", this._onClick);
+      document.addEventListener("keydown", this._onKeyDown);
     }
-    _createDragTarget() {
-      const dragTarget = document.createElement("div");
-      dragTarget.classList.add("drag-target");
-      dragTarget.style.width = this.options.dragTargetWidth;
-      document.body.appendChild(dragTarget);
-      this.dragTarget = dragTarget;
+    static get defaults() {
+      return _defaults16;
     }
-    _preventBodyScrolling() {
-      document.body.style.overflow = "hidden";
+    static init(els, options = {}) {
+      return super.init(els, options, _NavigationRail);
     }
-    _enableBodyScrolling() {
-      document.body.style.overflow = "";
+    static getInstance(el) {
+      return el["Expressive_NavigationRail"];
     }
-    _animateIn() {
-      this._animateSidenavIn();
-      this._animateOverlayIn();
+    destroy() {
+      this.el.removeEventListener("click", this._onClick);
+      document.removeEventListener("keydown", this._onKeyDown);
+      this.el["Expressive_NavigationRail"] = void 0;
     }
-    _animateOut() {
-      this._animateSidenavOut();
-      this._animateOverlayOut();
+    _findToggle() {
+      const first = this.el.querySelector(":scope > button:not(.button)");
+      return first instanceof HTMLButtonElement ? first : null;
     }
-    _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);
+    _isCompact() {
+      return this._mql.matches;
     }
-    _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);
+    _isModal() {
+      return this.el.classList.contains("modal") || this._isCompact();
     }
-    _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);
+    _sync() {
+      this.el.setAttribute("aria-expanded", this.isExpanded ? "true" : "false");
+      this._toggle?.setAttribute("aria-expanded", this.isExpanded ? "true" : "false");
     }
   };
-  _Sidenav._sidenavs = [];
-  var Sidenav = _Sidenav;
 
   // src/ts/components/slider.ts
-  var _defaults19 = {
+  var _defaults17 = {
     indicators: true,
     height: 400,
     duration: 500,
@@ -5745,7 +5652,7 @@ var Expressive = (() => {
       this.start();
     }
     static get defaults() {
-      return _defaults19;
+      return _defaults17;
     }
     /**
      * Initializes instances of Slider.
@@ -5898,7 +5805,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/tabs.ts
-  var _defaults20 = {
+  var _defaults18 = {
     duration: 300,
     onShow: null,
     swipeable: false,
@@ -5976,7 +5883,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults20;
+      return _defaults18;
     }
     /**
      * Initializes instances of Tabs.
@@ -6015,7 +5922,7 @@ var Expressive = (() => {
     }
     _queryTabLinks() {
       return this.el.querySelectorAll(
-        ":scope > a, :scope > .tab > a, :scope > li.tab > a"
+        ":scope > a, :scope > .tab > a"
       );
     }
     _createIndicator() {
@@ -6057,7 +5964,7 @@ var Expressive = (() => {
         }
       });
       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);
@@ -6143,229 +6050,8 @@ var Expressive = (() => {
     }
   };
 
-  // src/ts/components/tapTarget.ts
-  var _defaults21 = {
-    onOpen: null,
-    onClose: null
-  };
-  var _TapTarget = class _TapTarget extends Component {
-    constructor(el, options) {
-      super(el, options, _TapTarget);
-      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 || !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.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" && this.originEl) {
-          this.options.onClose.call(this, this.originEl);
-        }
-        this.isOpen = false;
-        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 = {
-        ..._TapTarget.defaults,
-        ...options
-      };
-      this.isOpen = false;
-      this.originEl = el.dataset.target ? document.getElementById(el.dataset.target) : null;
-      if (!this.originEl) {
-        console.error(`TapTarget: no element with id "${el.dataset.target ?? ""}" to attach to`);
-        return;
-      }
-      this._setup();
-      this._calculatePositioning();
-      this._setupEventHandlers();
-      _TapTarget._taptargets.push(this);
-    }
-    static get defaults() {
-      return _defaults21;
-    }
-    static init(els, options = {}) {
-      return super.init(els, options, _TapTarget);
-    }
-    static getInstance(el) {
-      return el["Expressive_TapTarget"];
-    }
-    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);
-    }
-    _setup() {
-      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.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.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], .btn, [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 });
-    }
-    _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() {
-      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 _defaults19 = {
     dialRadius: 135,
     outerRadius: 105,
     innerRadius: 70,
@@ -6563,7 +6249,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults22;
+      return _defaults19;
     }
     /**
      * Initializes instances of Timepicker.
@@ -6646,7 +6332,7 @@ var Expressive = (() => {
     }
     /*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;
@@ -6687,14 +6373,14 @@ var Expressive = (() => {
     _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);
@@ -6901,19 +6587,6 @@ var Expressive = (() => {
       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">
@@ -6945,8 +6618,8 @@ var Expressive = (() => {
         </div>`;
   var Timepicker = _Timepicker;
 
-  // src/ts/components/toasts.ts
-  var _defaults23 = {
+  // src/ts/components/snackbar.ts
+  var _defaults20 = {
     text: "",
     action: "",
     onAction: null,
@@ -6958,97 +6631,109 @@ var Expressive = (() => {
     completeCallback: null,
     activationPercent: 0.8
   };
-  var _Toast = class _Toast {
-    constructor(options) {
+  var _Snackbar = class _Snackbar {
+    constructor(options = {}) {
+      this._dismissed = false;
       this.options = {
-        ..._Toast.defaults,
+        ..._Snackbar.defaults,
         ...options
       };
+      if (options.displayLength === void 0 && this.options.action) {
+        this.options.displayLength = 1e4;
+      }
       this.message = this.options.text;
       this.panning = false;
       this.timeRemaining = this.options.displayLength;
-      if (_Toast._toasts.length === 0) {
-        _Toast._createContainer();
+      if (_Snackbar._snackbars.length > 0) {
+        for (const snackbar of [..._Snackbar._snackbars]) {
+          snackbar._dismissed = true;
+          clearTimeout(snackbar.counterTimeout);
+          snackbar.el.remove();
+        }
+        _Snackbar._snackbars.length = 0;
+      }
+      if (!_Snackbar._container || !_Snackbar._container.isConnected) {
+        _Snackbar._createContainer();
       }
-      _Toast._toasts.push(this);
-      const toastElement = this._createToast();
-      toastElement["Expressive_Toast"] = this;
-      this.el = toastElement;
+      _Snackbar._snackbars.push(this);
+      const snackbarElement = this._createSnackbar();
+      snackbarElement["Expressive_Snackbar"] = this;
+      this.el = snackbarElement;
       this._animateIn();
       this._setTimer();
     }
     static get defaults() {
-      return _defaults23;
+      return _defaults20;
     }
     static getInstance(el) {
-      return el["Expressive_Toast"];
+      return el["Expressive_Snackbar"];
     }
     static _createContainer() {
       const container = document.createElement("div");
-      container.setAttribute("id", "toast-container");
-      container.addEventListener("touchstart", _Toast._onDragStart);
-      container.addEventListener("touchmove", _Toast._onDragMove);
-      container.addEventListener("touchend", _Toast._onDragEnd);
-      container.addEventListener("mousedown", _Toast._onDragStart);
-      document.addEventListener("mousemove", _Toast._onDragMove);
-      document.addEventListener("mouseup", _Toast._onDragEnd);
+      container.setAttribute("id", "snackbar-container");
+      container.addEventListener("touchstart", _Snackbar._onDragStart);
+      container.addEventListener("touchmove", _Snackbar._onDragMove);
+      container.addEventListener("touchend", _Snackbar._onDragEnd);
+      container.addEventListener("mousedown", _Snackbar._onDragStart);
+      document.addEventListener("mousemove", _Snackbar._onDragMove);
+      document.addEventListener("mouseup", _Snackbar._onDragEnd);
       document.body.appendChild(container);
-      _Toast._container = container;
+      _Snackbar._container = container;
     }
     static _removeContainer() {
-      document.removeEventListener("mousemove", _Toast._onDragMove);
-      document.removeEventListener("mouseup", _Toast._onDragEnd);
-      _Toast._container.remove();
-      _Toast._container = null;
+      document.removeEventListener("mousemove", _Snackbar._onDragMove);
+      document.removeEventListener("mouseup", _Snackbar._onDragEnd);
+      _Snackbar._container.remove();
+      _Snackbar._container = null;
     }
     static _onDragStart(e) {
       const target = e.target;
-      if (target && !target.closest("button, a") && target.closest(".toast, .snackbar")) {
-        const toastElem = target.closest(".toast, .snackbar");
-        const toast = toastElem["Expressive_Toast"];
-        if (!toast) return;
-        toast.panning = true;
-        toast._pauseTimer();
-        _Toast._draggedToast = toast;
-        toast.el.classList.add("panning");
-        toast.el.style.transition = "";
-        toast.startingXPos = _Toast._xPos(e);
-        toast.time = Date.now();
-        toast.xPos = _Toast._xPos(e);
+      if (target && !target.closest("button, a") && target.closest(".snackbar")) {
+        const snackbarElem = target.closest(".snackbar");
+        const snackbar = snackbarElem["Expressive_Snackbar"];
+        if (!snackbar) return;
+        snackbar.panning = true;
+        snackbar._pauseTimer();
+        _Snackbar._draggedSnackbar = snackbar;
+        snackbar.el.classList.add("panning");
+        snackbar.el.style.transition = "";
+        snackbar.startingXPos = _Snackbar._xPos(e);
+        snackbar.time = Date.now();
+        snackbar.xPos = _Snackbar._xPos(e);
       }
     }
     static _onDragMove(e) {
-      if (!!_Toast._draggedToast) {
+      if (!!_Snackbar._draggedSnackbar) {
         e.preventDefault();
-        const toast = _Toast._draggedToast;
-        toast.deltaX = Math.abs(toast.xPos - _Toast._xPos(e));
-        toast.xPos = _Toast._xPos(e);
-        toast.velocityX = toast.deltaX / (Date.now() - toast.time);
-        toast.time = Date.now();
-        const totalDeltaX = toast.xPos - toast.startingXPos;
-        const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-        toast.el.style.transform = `translateX(${totalDeltaX}px)`;
-        toast.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
+        const snackbar = _Snackbar._draggedSnackbar;
+        snackbar.deltaX = Math.abs(snackbar.xPos - _Snackbar._xPos(e));
+        snackbar.xPos = _Snackbar._xPos(e);
+        snackbar.velocityX = snackbar.deltaX / (Date.now() - snackbar.time);
+        snackbar.time = Date.now();
+        const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
+        const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
+        snackbar.el.style.transform = `translateX(${totalDeltaX}px)`;
+        snackbar.el.style.opacity = (1 - Math.abs(totalDeltaX / activationDistance)).toString();
       }
     }
     static _onDragEnd() {
-      if (!!_Toast._draggedToast) {
-        const toast = _Toast._draggedToast;
-        toast.panning = false;
-        toast.el.classList.remove("panning");
-        const totalDeltaX = toast.xPos - toast.startingXPos;
-        const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
-        const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.velocityX > 1;
+      if (!!_Snackbar._draggedSnackbar) {
+        const snackbar = _Snackbar._draggedSnackbar;
+        snackbar.panning = false;
+        snackbar.el.classList.remove("panning");
+        const totalDeltaX = snackbar.xPos - snackbar.startingXPos;
+        const activationDistance = snackbar.el.offsetWidth * snackbar.options.activationPercent;
+        const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || snackbar.velocityX > 1;
         if (shouldBeDismissed) {
-          toast.wasSwiped = true;
-          toast.dismiss();
+          snackbar.wasSwiped = true;
+          snackbar.dismiss();
         } else {
-          toast.el.style.transition = "transform .2s, opacity .2s";
-          toast.el.style.transform = "";
-          toast.el.style.opacity = "";
-          toast._resumeTimer();
+          snackbar.el.style.transition = "transform .2s, opacity .2s";
+          snackbar.el.style.transform = "";
+          snackbar.el.style.opacity = "";
+          snackbar._resumeTimer();
         }
-        _Toast._draggedToast = null;
+        _Snackbar._draggedSnackbar = null;
       }
     }
     static _xPos(e) {
@@ -7058,30 +6743,30 @@ var Expressive = (() => {
       return e.clientX;
     }
     /**
-     * dismiss all toasts.
+     * dismiss all snackbars.
      */
     static dismissAll() {
-      for (const toast of [..._Toast._toasts]) {
-        toast.dismiss();
+      for (const snackbar of [..._Snackbar._snackbars]) {
+        snackbar.dismiss();
       }
     }
-    _createToast() {
-      let toast = this.options.toastId ? document.getElementById(this.options.toastId) : document.createElement("div");
-      if (toast instanceof HTMLTemplateElement) {
-        const node = toast.content.cloneNode(true);
-        toast = node.firstElementChild;
+    _createSnackbar() {
+      let snackbar = this.options.snackbarId ? document.getElementById(this.options.snackbarId) : document.createElement("div");
+      if (snackbar instanceof HTMLTemplateElement) {
+        const node = snackbar.content.cloneNode(true);
+        snackbar = node.firstElementChild;
       }
-      toast.classList.add("toast", "snackbar");
-      toast.setAttribute("role", "status");
-      toast.setAttribute("aria-live", "polite");
-      toast.setAttribute("aria-atomic", "true");
+      snackbar.classList.add("snackbar");
+      snackbar.setAttribute("role", "status");
+      snackbar.setAttribute("aria-live", "polite");
+      snackbar.setAttribute("aria-atomic", "true");
       if (this.options.classes.length > 0) {
-        toast.classList.add(...this.options.classes.split(" ").filter(Boolean));
+        snackbar.classList.add(...this.options.classes.split(" ").filter(Boolean));
       }
       if (this.message) {
         const text = document.createElement("p");
         text.textContent = this.message;
-        toast.replaceChildren(text);
+        snackbar.replaceChildren(text);
       }
       if (this.options.action) {
         const action = document.createElement("button");
@@ -7094,7 +6779,7 @@ var Expressive = (() => {
           }
           this.dismiss();
         });
-        toast.appendChild(action);
+        snackbar.appendChild(action);
       }
       if (this.options.dismissible) {
         const close = document.createElement("button");
@@ -7110,20 +6795,21 @@ var Expressive = (() => {
           e.stopPropagation();
           this.dismiss();
         });
-        toast.appendChild(close);
+        snackbar.appendChild(close);
       }
-      _Toast._container.appendChild(toast);
-      return toast;
+      _Snackbar._container.appendChild(snackbar);
+      return snackbar;
     }
     _animateIn() {
       this.el.style.display = "";
       this.el.style.opacity = "0";
+      this.el.style.transform = "translateY(24px)";
       this.el.style.transition = `
-      top ${this.options.inDuration}ms ease,
+      transform ${this.options.inDuration}ms ease,
       opacity ${this.options.inDuration}ms ease
     `;
       setTimeout(() => {
-        this.el.style.top = "0";
+        this.el.style.transform = "";
         this.el.style.opacity = "1";
       }, 1);
     }
@@ -7131,7 +6817,7 @@ var Expressive = (() => {
      * Arm the dismissal timer.
      *
      * One timeout, not a 20ms interval ticking a counter down: the old form woke
-     * the page up 50 times a second per toast purely to subtract 20 from a
+     * the page up 50 times a second per snackbar purely to subtract 20 from a
      * number. Dragging pauses the countdown via _pauseTimer/_resumeTimer instead.
      */
     _setTimer() {
@@ -7152,9 +6838,11 @@ var Expressive = (() => {
       this._setTimer();
     }
     /**
-     * Dismiss toast with animation.
+     * Dismiss snackbar with animation.
      */
     dismiss() {
+      if (this._dismissed) return;
+      this._dismissed = true;
       clearTimeout(this.counterTimeout);
       this.counterTimeout = null;
       const activationDistance = this.el.offsetWidth * this.options.activationPercent;
@@ -7174,24 +6862,24 @@ var Expressive = (() => {
         if (typeof this.options.completeCallback === "function") {
           this.options.completeCallback();
         }
-        if (this.el.id != this.options.toastId) {
+        if (this.el.id != this.options.snackbarId) {
           this.el.remove();
-          const index = _Toast._toasts.indexOf(this);
-          if (index >= 0) _Toast._toasts.splice(index, 1);
-          if (_Toast._toasts.length === 0 && _Toast._container) {
-            _Toast._removeContainer();
+          const index = _Snackbar._snackbars.indexOf(this);
+          if (index >= 0) _Snackbar._snackbars.splice(index, 1);
+          if (_Snackbar._snackbars.length === 0 && _Snackbar._container && _Snackbar._container.childElementCount === 0) {
+            _Snackbar._removeContainer();
           }
         }
       }, this.options.outDuration);
     }
   };
-  _Toast._toasts = [];
-  _Toast._container = null;
-  _Toast._draggedToast = null;
-  var Toast = _Toast;
+  _Snackbar._snackbars = [];
+  _Snackbar._container = null;
+  _Snackbar._draggedSnackbar = null;
+  var Snackbar = _Snackbar;
 
   // src/ts/components/tooltip.ts
-  var _defaults24 = {
+  var _defaults21 = {
     exitDelay: 200,
     enterDelay: 0,
     text: "",
@@ -7259,7 +6947,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults24;
+      return _defaults21;
     }
     /**
      * Initializes instances of Tooltip.
@@ -7282,7 +6970,7 @@ var Expressive = (() => {
     }
     _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);
@@ -7439,18 +7127,15 @@ var Expressive = (() => {
     Cards: { component: Cards, selector: CARDS_SELECTOR },
     Carousel: { component: Carousel, selector: ".carousel" },
     Chips: { component: Chips, selector: ".chips" },
-    Collapsible: { component: Collapsible, selector: ".collapsible" },
     Datepicker: { component: Datepicker, selector: ".datepicker" },
-    Dropdown: { component: Dropdown, selector: ".dropdown-trigger" },
+    Menu: { component: Menu, selector: ".menu-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" },
     FormSelect: { component: FormSelect, selector: "select" },
     Sidenav: { component: Sidenav, selector: ".sidenav" },
+    NavigationRail: { component: NavigationRail, selector: ".navigation-rail" },
     Tabs: { component: Tabs, selector: ".tabs" },
-    TapTarget: { component: TapTarget, selector: ".tap-target" },
     Timepicker: { component: Timepicker, selector: ".timepicker" },
     Tooltip: { component: Tooltip, selector: ".tooltipped" },
     FloatingActionButton: {
@@ -7467,7 +7152,7 @@ var Expressive = (() => {
   }
 
   // src/ts/index.ts
-  var version = "0.3.0";
+  var version = "0.5.0";
   if (typeof document !== "undefined") {
     document.addEventListener("keydown", Utils.docHandleKeydown, true);
     document.addEventListener("keyup", Utils.docHandleKeyup, true);
@@ -7480,6 +7165,8 @@ var Expressive = (() => {
   Range.Init();
   Cards.Init();
   Dialogs.Init();
+  BottomSheets.Init();
+  SideSheets.Init();
   return __toCommonJS(index_exports);
 })();
 //# sourceMappingURL=expressive.js.map