@expressivecss/expressive 0.4.0 → 0.5.0

package/dist/js/expressive.mjs

@@ -516,13 +516,13 @@ var Cards = class _Cards extends Component {
   }
 };
 
-// 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,
@@ -533,9 +533,9 @@ var _defaults2 = {
   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) {
@@ -553,22 +553,22 @@ var _Dropdown = class _Dropdown extends Component {
         this.close();
         return;
       }
-      const leaveToDropdownContent = !!(this.dropdownEl && toEl && this.dropdownEl.contains(toEl));
-      let leaveToActiveDropdownTrigger = false;
-      const closestTrigger = toEl.closest(".dropdown-trigger");
-      if (closestTrigger && !!closestTrigger["Expressive_Dropdown"] && closestTrigger["Expressive_Dropdown"].isOpen) {
-        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._isSubmenuTriggerClick(target)) return;
-      if (this.options.closeOnClick && this.dropdownEl?.contains(target) && !this.isTouchMoving) {
+      if (this.options.closeOnClick && this.menuEl?.contains(target) && !this.isTouchMoving) {
         this.close();
-      } else if (!this.dropdownEl?.contains(target)) {
+      } else if (!this.menuEl?.contains(target)) {
         setTimeout(() => {
           if (this.isOpen) {
             this.close();
@@ -586,11 +586,11 @@ var _Dropdown = class _Dropdown extends Component {
     };
     this._handleDocumentTouchmove = (e) => {
       const target = e.target;
-      if (this.dropdownEl?.contains(target)) {
+      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)) {
@@ -607,11 +607,11 @@ var _Dropdown = class _Dropdown extends Component {
       const target = e.target;
       if (!(target instanceof Element)) return;
       const li = target.closest("li");
-      if (li?.querySelector(":scope > menu") && this.dropdownEl?.contains(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();
@@ -638,7 +638,7 @@ var _Dropdown = class _Dropdown extends Component {
       } else if (arrowUpOrDown && this.isOpen) {
         e.preventDefault();
         const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
-        const list = this._containingSubmenu(e) ?? this.dropdownEl;
+        const list = this._containingSubmenu(e) ?? this.menuEl;
         let newFocusedIndex = this.focusedIndex;
         let hasFoundNewIndex = false;
         do {
@@ -663,7 +663,7 @@ var _Dropdown = class _Dropdown extends Component {
           this._toggleSubmenu(li);
           return;
         }
-        const focusedElement = li ?? this.dropdownEl.children[this.focusedIndex];
+        const focusedElement = li ?? this.menuEl.children[this.focusedIndex];
         const activatableElement = focusedElement?.querySelector("a, button");
         if (!!activatableElement) {
           activatableElement.click();
@@ -672,7 +672,7 @@ var _Dropdown = class _Dropdown extends Component {
         }
       } else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
         e.preventDefault();
-        const openSub = this.dropdownEl.querySelector("li.open");
+        const openSub = this.menuEl.querySelector("li.open");
         if (openSub) {
           openSub.classList.remove("open", "submenu-start");
           this._syncSubmenuAria(openSub, false);
@@ -693,7 +693,7 @@ var _Dropdown = class _Dropdown extends Component {
       if (isLetter && !specialKeys.includes(e.key)) {
         this.filterQuery.push(keyText);
         const string = this.filterQuery.join("");
-        const list = this._containingSubmenu(e) ?? this.dropdownEl;
+        const list = this._containingSubmenu(e) ?? this.menuEl;
         const newOptionEl = Array.from(list.querySelectorAll(":scope > li")).find(
           (el) => el.textContent.trim().toLowerCase().indexOf(string) === 0
         );
@@ -714,7 +714,7 @@ var _Dropdown = class _Dropdown extends Component {
       this.filterQuery = [];
     };
     /**
-     * Open dropdown.
+     * Open menu.
      */
     this.open = () => {
       if (this.isOpen) return;
@@ -722,15 +722,15 @@ var _Dropdown = class _Dropdown extends Component {
       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;
@@ -748,20 +748,20 @@ var _Dropdown = class _Dropdown extends Component {
       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.menuEl = document.getElementById(this.id);
     this.options = {
-      ..._Dropdown.defaults,
+      ..._Menu.defaults,
       ...options
     };
     this.isOpen = false;
@@ -770,8 +770,8 @@ var _Dropdown = class _Dropdown extends Component {
     this.focusedIndex = -1;
     this.filterQuery = [];
     this.el.ariaExpanded = "false";
-    this._moveDropdownToElement();
-    this._makeDropdownFocusable();
+    this._moveMenuToElement();
+    this._makeMenuFocusable();
     this._setupSubmenus();
     this._setupEventHandlers();
   }
@@ -779,47 +779,47 @@ var _Dropdown = class _Dropdown extends Component {
     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);
-    if (this.dropdownEl?.querySelector(":scope > li > menu")) {
-      this.dropdownEl.addEventListener("mouseover", this._handleSubmenuAlign);
+    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.dropdownEl?.removeEventListener("mouseover", this._handleSubmenuAlign);
+    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);
     }
@@ -827,25 +827,25 @@ var _Dropdown = class _Dropdown extends Component {
   _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);
   }
   _isSubmenuTriggerClick(target) {
-    if (!this.dropdownEl) return false;
+    if (!this.menuEl) return false;
     const li = target.closest("li");
-    if (!li || !this.dropdownEl.contains(li)) return false;
+    if (!li || !this.menuEl.contains(li)) return false;
     const submenu = li.querySelector(":scope > menu");
     if (!submenu) return false;
     return !submenu.contains(target);
   }
   _setupSubmenus() {
-    this.dropdownEl?.querySelectorAll("li").forEach((li) => {
+    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");
@@ -871,15 +871,12 @@ var _Dropdown = class _Dropdown extends Component {
   _alignSubmenu(li) {
     const menu = li.querySelector(":scope > menu");
     if (!menu) return;
-    const wasHidden = getComputedStyle(menu).display === "none";
-    if (wasHidden) menu.style.display = "block";
     li.classList.remove("submenu-start");
     const rect = menu.getBoundingClientRect();
     if (rect.right > window.innerWidth - 8) li.classList.add("submenu-start");
-    if (wasHidden) menu.style.display = "";
   }
   _closeSubmenus() {
-    this.dropdownEl?.querySelectorAll("li.open").forEach((li) => {
+    this.menuEl?.querySelectorAll("li.open").forEach((li) => {
       li.classList.remove("open", "submenu-start");
       this._syncSubmenuAria(li, false);
     });
@@ -888,46 +885,46 @@ var _Dropdown = class _Dropdown extends Component {
     const target = e.target;
     if (!(target instanceof Element)) return null;
     const submenu = target.closest("li > menu");
-    if (submenu instanceof HTMLElement && this.dropdownEl?.contains(submenu)) return submenu;
+    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.dropdownEl?.contains(li)) return li;
+    if (li instanceof HTMLElement && this.menuEl?.contains(li)) return li;
     return null;
   }
-  _resetDropdownStyles() {
-    this.dropdownEl.style.display = "";
-    this._resetDropdownPositioningStyles();
-    this.dropdownEl.style.transform = "";
-    this.dropdownEl.style.opacity = "";
+  _resetMenuStyles() {
+    this.menuEl.style.display = "";
+    this._resetMenuPositioningStyles();
+    this.menuEl.style.transform = "";
+    this.menuEl.style.opacity = "";
   }
-  _resetDropdownPositioningStyles() {
-    this.dropdownEl.style.width = "";
-    this.dropdownEl.style.height = "";
-    this.dropdownEl.style.left = "";
-    this.dropdownEl.style.top = "";
-    this.dropdownEl.style.transformOrigin = "";
+  _resetMenuPositioningStyles() {
+    this.menuEl.style.width = "";
+    this.menuEl.style.height = "";
+    this.menuEl.style.left = "";
+    this.menuEl.style.top = "";
+    this.menuEl.style.transformOrigin = "";
   }
-  _moveDropdownToElement(containerEl = null) {
+  _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;
-    this.dropdownEl.querySelectorAll(":scope li, :scope > hr").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;
       }
@@ -935,25 +932,25 @@ var _Dropdown = class _Dropdown extends Component {
     });
   }
   _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,
@@ -962,7 +959,7 @@ var _Dropdown = class _Dropdown extends Component {
     const alignments = Utils.checkPossibleAlignments(
       this.el,
       closestOverflowParent,
-      dropdownBounds,
+      menuBounds,
       this.options.coverTrigger ? 0 : triggerBRect.height
     );
     let verticalAlignment = "top";
@@ -1003,10 +1000,10 @@ var _Dropdown = class _Dropdown extends Component {
       }
     }
     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,
@@ -1019,26 +1016,26 @@ var _Dropdown = class _Dropdown extends Component {
   }
   _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);
@@ -1053,30 +1050,31 @@ var _Dropdown = class _Dropdown extends Component {
     }
     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 = {
@@ -1084,8 +1082,8 @@ var _defaults3 = {
   // Autocomplete data set
   onAutocomplete: null,
   // Callback for when autocompleted
-  dropdownOptions: {
-    // Default dropdown options
+  menuOptions: {
+    // Default menu options
     autoFocus: false,
     closeOnClick: false,
     coverTrigger: false
@@ -1101,7 +1099,7 @@ var _defaults3 = {
       )
     );
   },
-  maxDropDownHeight: "300px",
+  maxMenuHeight: "300px",
   allowUnsafeHTML: false,
   selected: []
 };
@@ -1186,19 +1184,19 @@ var _Autocomplete = class _Autocomplete extends Component {
       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 = {
@@ -1213,7 +1211,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.menuItems = this.options.data || [];
     this.$active = null;
     this._mousedown = false;
-    this._setupDropdown();
+    this._setupMenu();
     this._setupEventHandlers();
   }
   static get defaults() {
@@ -1244,7 +1242,7 @@ var _Autocomplete = class _Autocomplete extends Component {
   }
   destroy() {
     this._removeEventHandlers();
-    this._removeDropdown();
+    this._removeMenu();
     this.el["Expressive_Autocomplete"] = void 0;
   }
   _setupEventHandlers() {
@@ -1273,34 +1271,33 @@ var _Autocomplete = class _Autocomplete extends Component {
       this.container.removeEventListener("touchend", this._handleContainerMouseupAndTouchend);
     }
   }
-  _setupDropdown() {
+  _setupMenu() {
     this.container = document.createElement("menu");
-    this.container.style.maxHeight = this.options.maxDropDownHeight;
+    this.container.style.maxHeight = this.options.maxMenuHeight;
     this.container.id = `autocomplete-options-${Utils.guid()}`;
     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;
@@ -1312,7 +1309,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     this.el.parentElement.appendChild(div);
     this._updateSelectedInfo();
   }
-  _removeDropdown() {
+  _removeMenu() {
     this.container.ariaExpanded = "false";
     this.container.parentNode.removeChild(this.container);
   }
@@ -1335,7 +1332,7 @@ var _Autocomplete = class _Autocomplete extends Component {
     }
     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(
@@ -1402,13 +1399,13 @@ var _Autocomplete = class _Autocomplete extends Component {
     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);
     }
   }
@@ -1439,7 +1436,7 @@ var _Autocomplete = class _Autocomplete extends Component {
    * 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;
@@ -1450,7 +1447,7 @@ var _Autocomplete = class _Autocomplete extends Component {
       );
     }
     if (this.options.isMultiSelect) {
-      this._renderDropdown();
+      this._renderMenu();
     } else {
       this._refreshInputText();
     }
@@ -1472,7 +1469,7 @@ var _Autocomplete = class _Autocomplete extends Component {
       else this.selectedValues = this.selectedValues.filter(
         (selectedEntry) => selectedEntry.id !== entry.id
       );
-      this._renderDropdown();
+      this._renderMenu();
       this.el.focus();
     } else {
       this.selectedValues = [entry];
@@ -1790,12 +1787,14 @@ var Range = class _Range extends Component {
   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");
@@ -1803,6 +1802,7 @@ var Range = class _Range extends Component {
     };
     this._handleRangeInputMousemoveTouchmove = () => {
       if (this._mousedown) {
+        this._clampDual();
         this._sync();
         this.thumb.classList.add("active");
       }
@@ -1887,16 +1887,48 @@ var Range = class _Range extends Component {
   _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`;
@@ -1984,6 +2016,170 @@ var _Dialogs = class _Dialogs {
 _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 {
   /**
@@ -2887,178 +3083,10 @@ var CharacterCounter = class _CharacterCounter extends Component {
   }
 };
 
-// src/ts/components/collapsible.ts
-var _defaults9 = {
-  accordion: true,
-  onOpenStart: null,
-  onOpenEnd: null,
-  onCloseStart: null,
-  onCloseEnd: null
-};
-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._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() {
-    return Array.from(this.el.querySelectorAll(":scope > details"));
-  }
-  _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;
-      });
-    }
-  }
-  _isOpen(item) {
-    return item instanceof HTMLDetailsElement && item.open;
-  }
-  _setOpen(item, open) {
-    if (item instanceof HTMLDetailsElement) item.open = open;
-  }
-  _wrapDetailsBodies() {
-    this._items.forEach((item) => {
-      if (!(item instanceof HTMLDetailsElement)) return;
-      if (item.querySelector(":scope > :not(summary)")) {
-        const already = Array.from(item.children).filter((c) => c.tagName !== "SUMMARY");
-        if (already.length === 1 && already[0].tagName === "DIV") {
-          this._wrappedBodies.push(already[0]);
-          return;
-        }
-      }
-      const body = document.createElement("div");
-      Array.from(item.childNodes).forEach((node) => {
-        if (node instanceof HTMLElement && node.tagName === "SUMMARY") return;
-        body.appendChild(node);
-      });
-      item.appendChild(body);
-      this._wrappedBodies.push(body);
-    });
-  }
-  _unwrapDetailsBodies() {
-    this._wrappedBodies.forEach((body) => {
-      const parent = body.parentNode;
-      if (!parent) return;
-      while (body.firstChild) parent.insertBefore(body.firstChild, body);
-      body.remove();
-    });
-    this._wrappedBodies = [];
-  }
-  _bodyOf(item) {
-    return item.querySelector(":scope > :not(summary)");
-  }
-  _setupEventHandlers() {
-    this.el.addEventListener("toggle", this._handleToggle, true);
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("toggle", this._handleToggle, true);
-  }
-  _notify(item, opening) {
-    const start = opening ? this.options.onOpenStart : this.options.onCloseStart;
-    if (typeof start === "function") start.call(this, item);
-    const end = opening ? this.options.onOpenEnd : this.options.onCloseEnd;
-    if (typeof end !== "function") return;
-    const target = this._bodyOf(item) ?? item;
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      target.removeEventListener("transitionend", onEnd);
-      end.call(this, item);
-    };
-    const onEnd = (ev) => {
-      if (ev.target !== target) return;
-      finish();
-    };
-    target.addEventListener("transitionend", onEnd);
-    this._endTimers.push(window.setTimeout(finish, this._durationMs() + 50));
-  }
-  _durationMs() {
-    const raw = getComputedStyle(this.el).getPropertyValue("--md-comp-collapsible-duration").trim();
-    if (!raw) return 500;
-    if (raw.endsWith("ms")) return parseFloat(raw);
-    if (raw.endsWith("s")) return parseFloat(raw) * 1e3;
-    const n = parseFloat(raw);
-    return Number.isFinite(n) ? n : 500;
-  }
-};
-
 // src/ts/components/select.ts
-var _defaults10 = {
+var _defaults9 = {
   classes: "",
-  dropdownOptions: {}
+  menuOptions: {}
 };
 var FormSelect = class _FormSelect extends Component {
   constructor(el, options) {
@@ -3084,7 +3112,7 @@ var FormSelect = class _FormSelect extends Component {
       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();
       }
@@ -3101,11 +3129,11 @@ var FormSelect = class _FormSelect extends Component {
     this._values = [];
     this._createdWrapper = false;
     this._originalLabelFor = null;
-    this._setupDropdown();
+    this._setupMenu();
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults10;
+    return _defaults9;
   }
   /**
    * Initializes instances of FormSelect.
@@ -3120,21 +3148,21 @@ var FormSelect = class _FormSelect extends Component {
   }
   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. Adding or removing `<option>`s also requires this — the menu is
-   * rebuilt from the native list, the field and Dropdown instance stay put.
+   * rebuilt from the native list, the field and Menu instance stay put.
    */
   refresh() {
-    if (!this.dropdownOptions) return;
+    if (!this.menuEl) return;
     this._rebuildOptions();
     this._setValueToInput();
     this._setSelectedStates();
@@ -3143,22 +3171,22 @@ var FormSelect = class _FormSelect extends Component {
     this._setupOptionHandlers();
     this.el.addEventListener("change", this._handleSelectChange);
     this.input.addEventListener("click", this._handleInputClick);
-    this.dropdownOptions.addEventListener("focusin", this._handleOptionFocus);
+    this.menuEl.addEventListener("focusin", this._handleOptionFocus);
   }
   _removeEventHandlers() {
     this._removeOptionHandlers();
     this.el.removeEventListener("change", this._handleSelectChange);
     this.input?.removeEventListener("click", this._handleInputClick);
-    this.dropdownOptions?.removeEventListener("focusin", this._handleOptionFocus);
+    this.menuEl?.removeEventListener("focusin", this._handleOptionFocus);
   }
   _setupOptionHandlers() {
-    this.dropdownOptions.querySelectorAll("li:not(.optgroup)").forEach((el) => {
+    this.menuEl.querySelectorAll("li:not(.optgroup)").forEach((el) => {
       el.addEventListener("click", this._handleOptionClick);
       el.addEventListener("keydown", this._handleOptionKeydown);
     });
   }
   _removeOptionHandlers() {
-    this.dropdownOptions?.querySelectorAll("li:not(.optgroup)").forEach((el) => {
+    this.menuEl?.querySelectorAll("li:not(.optgroup)").forEach((el) => {
       el.removeEventListener("click", this._handleOptionClick);
       el.removeEventListener("keydown", this._handleOptionKeydown);
     });
@@ -3189,24 +3217,24 @@ var FormSelect = class _FormSelect extends Component {
           new Event("change", { bubbles: true, cancelable: true, composed: true })
         );
     }
-    if (!this.isMultiple) this.dropdown?.close();
+    if (!this.isMultiple) this.menu?.close();
   }
-  _setupDropdown() {
+  _setupMenu() {
     this.labelEl = this.el.labels?.[0] ?? null;
     this._setupWrapper();
     this._hideNativeSelect();
     if (this.el.disabled) this.wrapper.classList.add("disabled");
-    this.dropdownOptions = document.createElement("menu");
-    this.dropdownOptions.id = `select-options-${Utils.guid()}`;
-    this.dropdownOptions.setAttribute("popover", "auto");
-    this.dropdownOptions.setAttribute("role", "listbox");
-    this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
-    if (this.isMultiple) this.dropdownOptions.classList.add("multiple-select-dropdown");
+    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.dropdownOptions);
+    this.wrapper.append(this.menuEl);
     this._buildInput();
     this._buildCaret();
-    this._initDropdown();
+    this._initMenu();
     this._setSelectedStates();
     if (this.labelEl) this.input.after(this.labelEl);
   }
@@ -3236,10 +3264,10 @@ var FormSelect = class _FormSelect extends Component {
   _buildInput() {
     this.input = document.createElement("input");
     this.input.id = "select-input-" + Utils.guid();
-    this.input.classList.add("dropdown-trigger");
+    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;
@@ -3252,7 +3280,7 @@ var FormSelect = class _FormSelect extends Component {
     this.input.setAttribute("role", "combobox");
     this.input.setAttribute("aria-haspopup", "listbox");
     this.input.ariaExpanded = "false";
-    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;
@@ -3267,38 +3295,38 @@ var FormSelect = class _FormSelect extends Component {
     caret.setAttribute("aria-hidden", "true");
     this.wrapper.prepend(caret);
   }
-  _initDropdown() {
+  _initMenu() {
     if (this.el.disabled) return;
-    const dropdownOptions = { ...this.options.dropdownOptions };
-    dropdownOptions.coverTrigger = false;
-    const userOnOpenEnd = dropdownOptions.onOpenEnd;
-    const userOnCloseEnd = dropdownOptions.onCloseEnd;
-    dropdownOptions.onOpenEnd = () => {
-      const selectedOption = this.dropdownOptions.querySelector(".selected");
+    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.dropdown.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
-        this.dropdown._focusFocusedItem();
+        this.menu.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+        this.menu._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;
+        if (this.menu.isScrollable) {
+          let scrollOffset = selectedOption.getBoundingClientRect().top - this.menuEl.getBoundingClientRect().top;
+          scrollOffset -= this.menuEl.clientHeight / 2;
+          this.menuEl.scrollTop = scrollOffset;
         }
         if (selectedOption.id) this.input.setAttribute("aria-activedescendant", selectedOption.id);
       }
       this.input.ariaExpanded = "true";
       if (userOnOpenEnd && typeof userOnOpenEnd === "function")
-        userOnOpenEnd.call(this.dropdown, this.el);
+        userOnOpenEnd.call(this.menu, this.el);
     };
-    dropdownOptions.onCloseEnd = () => {
+    menuOptions.onCloseEnd = () => {
       this.input.ariaExpanded = "false";
       this.input.removeAttribute("aria-activedescendant");
       if (userOnCloseEnd && typeof userOnCloseEnd === "function")
-        userOnCloseEnd.call(this.dropdown, this.el);
+        userOnCloseEnd.call(this.menu, this.el);
     };
-    dropdownOptions.closeOnClick = false;
-    this.dropdown = Dropdown.init(this.input, dropdownOptions);
+    menuOptions.closeOnClick = false;
+    this.menu = Menu.init(this.input, menuOptions);
   }
   _nativeOptions() {
     return Array.from(this.el.children).filter((el) => ["OPTION", "OPTGROUP"].includes(el.tagName));
@@ -3325,7 +3353,7 @@ var FormSelect = class _FormSelect extends Component {
         groupLabel.setAttribute("role", "presentation");
         groupLabel.textContent = realOption.getAttribute("label") ?? "";
         groupParent.replaceChildren(groupLabel);
-        this.dropdownOptions.append(groupParent);
+        this.menuEl.append(groupParent);
         const groupChildren = [];
         const selectOptions = Array.from(realOption.children).filter((el) => el.tagName === "OPTION");
         selectOptions.forEach((child) => {
@@ -3339,18 +3367,18 @@ var FormSelect = class _FormSelect extends Component {
   }
   _rebuildOptions() {
     this._removeOptionHandlers();
-    this.dropdownOptions.replaceChildren();
+    this.menuEl.replaceChildren();
     this._buildOptions();
     this._setupOptionHandlers();
-    this.dropdown?._makeDropdownFocusable();
+    this.menu?._makeMenuFocusable();
   }
   _addOptionToValues(realOption, virtualOption) {
     this._values.push({ el: realOption, optionEl: virtualOption });
   }
-  _removeDropdown() {
+  _removeMenu() {
     this.wrapper?.querySelector(":scope > .caret")?.remove();
     this.input?.remove();
-    this.dropdownOptions?.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) {
@@ -3401,7 +3429,7 @@ var FormSelect = class _FormSelect extends Component {
       img.ariaHidden = "true";
       li.prepend(img);
     }
-    this.dropdownOptions.append(li);
+    this.menuEl.append(li);
     return li;
   }
   _selectValue(value) {
@@ -3459,7 +3487,7 @@ var FormSelect = class _FormSelect extends Component {
       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";
@@ -3479,7 +3507,7 @@ var FormSelect = class _FormSelect extends Component {
 };
 
 // src/ts/plugins/dockedDisplayPlugin.ts
-var _defaults11 = {
+var _defaults10 = {
   margin: 5,
   transition: 10,
   duration: 250,
@@ -3528,7 +3556,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     };
     this.el = el;
     this.options = {
-      ..._defaults11,
+      ..._defaults10,
       ...options
     };
     this.container = document.createElement("div");
@@ -3549,7 +3577,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 };
 
 // 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
@@ -3814,7 +3842,7 @@ var _Datepicker = class _Datepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults12;
+    return _defaults11;
   }
   /**
    * Initializes instances of Datepicker.
@@ -4397,11 +4425,11 @@ var _Datepicker = class _Datepicker extends Component {
     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);
@@ -4532,7 +4560,7 @@ _Datepicker._template = `
 var Datepicker = _Datepicker;
 
 // src/ts/components/lightbox.ts
-var _defaults13 = {
+var _defaults12 = {
   inDuration: 275,
   outDuration: 200,
   onOpenStart: null,
@@ -4651,7 +4679,7 @@ var Lightbox = class _Lightbox extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults13;
+    return _defaults12;
   }
   /**
    * Initializes instances of Lightbox.
@@ -4816,7 +4844,7 @@ var Lightbox = class _Lightbox extends Component {
 };
 
 // src/ts/components/parallax.ts
-var _defaults14 = {};
+var _defaults13 = {};
 var Parallax = class _Parallax extends Component {
   constructor(el, options) {
     super(el, options, _Parallax);
@@ -4830,7 +4858,7 @@ var Parallax = class _Parallax extends Component {
     }
   }
   static get defaults() {
-    return _defaults14;
+    return _defaults13;
   }
   static init(els, options = {}) {
     return super.init(els, options, _Parallax);
@@ -4843,98 +4871,9 @@ var Parallax = class _Parallax extends Component {
   }
 };
 
-// src/ts/components/pushpin.ts
-var _defaults15 = {
-  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 _defaults15;
-  }
-  /**
-   * 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");
-  }
-};
-_Pushpin._pushpins = [];
-var Pushpin = _Pushpin;
-
 // src/ts/components/scrollspy.ts
 var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-var _defaults16 = {
+var _defaults14 = {
   scrollOffset: 200,
   activeClass: "active",
   getActiveElement: _defaultGetActiveElement,
@@ -4957,7 +4896,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     _ScrollSpy._observer?.observe(this.el);
   }
   static get defaults() {
-    return _defaults16;
+    return _defaults14;
   }
   static init(els, options = {}) {
     return super.init(els, options, _ScrollSpy);
@@ -5079,7 +5018,7 @@ _ScrollSpy._onIntersect = (entries) => {
 var ScrollSpy = _ScrollSpy;
 
 // src/ts/components/sidenav.ts
-var _defaults17 = {
+var _defaults15 = {
   edge: "left",
   draggable: true,
   dragTargetWidth: "10px",
@@ -5222,7 +5161,7 @@ var _Sidenav = class _Sidenav extends Component {
     _Sidenav._sidenavs.push(this);
   }
   static get defaults() {
-    return _defaults17;
+    return _defaults15;
   }
   /**
    * Initializes instances of Sidenav.
@@ -5407,8 +5346,114 @@ var _Sidenav = class _Sidenav extends Component {
 _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);
+  }
+  static get defaults() {
+    return _defaults16;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _NavigationRail);
+  }
+  static getInstance(el) {
+    return el["Expressive_NavigationRail"];
+  }
+  destroy() {
+    this.el.removeEventListener("click", this._onClick);
+    document.removeEventListener("keydown", this._onKeyDown);
+    this.el["Expressive_NavigationRail"] = void 0;
+  }
+  _findToggle() {
+    const first = this.el.querySelector(":scope > button:not(.button)");
+    return first instanceof HTMLButtonElement ? first : null;
+  }
+  _isCompact() {
+    return this._mql.matches;
+  }
+  _isModal() {
+    return this.el.classList.contains("modal") || this._isCompact();
+  }
+  _sync() {
+    this.el.setAttribute("aria-expanded", this.isExpanded ? "true" : "false");
+    this._toggle?.setAttribute("aria-expanded", this.isExpanded ? "true" : "false");
+  }
+};
+
 // src/ts/components/slider.ts
-var _defaults18 = {
+var _defaults17 = {
   indicators: true,
   height: 400,
   duration: 500,
@@ -5556,7 +5601,7 @@ var Slider = class _Slider extends Component {
     this.start();
   }
   static get defaults() {
-    return _defaults18;
+    return _defaults17;
   }
   /**
    * Initializes instances of Slider.
@@ -5709,7 +5754,7 @@ var Slider = class _Slider extends Component {
 };
 
 // src/ts/components/tabs.ts
-var _defaults19 = {
+var _defaults18 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -5787,7 +5832,7 @@ var Tabs = class _Tabs extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults18;
   }
   /**
    * Initializes instances of Tabs.
@@ -5954,229 +5999,8 @@ var Tabs = class _Tabs extends Component {
   }
 };
 
-// src/ts/components/tapTarget.ts
-var _defaults20 = {
-  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 _defaults20;
-  }
-  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], [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 _defaults21 = {
+var _defaults19 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -6374,7 +6198,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults21;
+    return _defaults19;
   }
   /**
    * Initializes instances of Timepicker.
@@ -6743,8 +6567,8 @@ _Timepicker._template = `<div class="timepicker-container">
         </div>`;
 var Timepicker = _Timepicker;
 
-// src/ts/components/toasts.ts
-var _defaults22 = {
+// src/ts/components/snackbar.ts
+var _defaults20 = {
   text: "",
   action: "",
   onAction: null,
@@ -6756,97 +6580,109 @@ var _defaults22 = {
   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;
     }
-    _Toast._toasts.push(this);
-    const toastElement = this._createToast();
-    toastElement["Expressive_Toast"] = this;
-    this.el = toastElement;
+    if (!_Snackbar._container || !_Snackbar._container.isConnected) {
+      _Snackbar._createContainer();
+    }
+    _Snackbar._snackbars.push(this);
+    const snackbarElement = this._createSnackbar();
+    snackbarElement["Expressive_Snackbar"] = this;
+    this.el = snackbarElement;
     this._animateIn();
     this._setTimer();
   }
   static get defaults() {
-    return _defaults22;
+    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(".snackbar")) {
-      const toastElem = target.closest(".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);
+      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) {
@@ -6856,30 +6692,30 @@ var _Toast = class _Toast {
     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("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");
@@ -6892,7 +6728,7 @@ var _Toast = class _Toast {
         }
         this.dismiss();
       });
-      toast.appendChild(action);
+      snackbar.appendChild(action);
     }
     if (this.options.dismissible) {
       const close = document.createElement("button");
@@ -6908,20 +6744,21 @@ var _Toast = class _Toast {
         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);
   }
@@ -6929,7 +6766,7 @@ var _Toast = class _Toast {
    * 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() {
@@ -6950,9 +6787,11 @@ var _Toast = class _Toast {
     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;
@@ -6972,24 +6811,24 @@ var _Toast = class _Toast {
       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 _defaults23 = {
+var _defaults21 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -7057,7 +6896,7 @@ var Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults23;
+    return _defaults21;
   }
   /**
    * Initializes instances of Tooltip.
@@ -7237,17 +7076,15 @@ var AUTO_INIT_COMPONENTS = {
   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" },
   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: {
@@ -7264,7 +7101,7 @@ function AutoInit(context = document.body, options) {
 }
 
 // src/ts/index.ts
-var version = "0.4.0";
+var version = "0.5.0";
 if (typeof document !== "undefined") {
   document.addEventListener("keydown", Utils.docHandleKeydown, true);
   document.addEventListener("keyup", Utils.docHandleKeyup, true);
@@ -7277,31 +7114,33 @@ Waves.Init();
 Range.Init();
 Cards.Init();
 Dialogs.Init();
+BottomSheets.Init();
+SideSheets.Init();
 export {
   AutoInit,
   Autocomplete,
+  BottomSheets,
   Cards,
   Carousel,
   CharacterCounter,
   Chips,
-  Collapsible,
   Datepicker,
   Dialogs,
-  Dropdown,
   FloatingActionButton,
   FormSelect,
   Forms,
   Lightbox,
+  Menu,
+  NavigationRail,
   Parallax,
-  Pushpin,
   Range,
   ScrollSpy,
+  SideSheets,
   Sidenav,
   Slider,
+  Snackbar,
   Tabs,
-  TapTarget,
   Timepicker,
-  Toast,
   Tooltip,
   Waves,
   version