@expressivecss/expressive 0.8.0 → 0.9.1

package/dist/js/expressive.js

@@ -20,9 +20,11 @@ var Expressive = (() => {
   // src/ts/index.ts
   var index_exports = {};
   __export(index_exports, {
+    AppBar: () => AppBar,
     AutoInit: () => AutoInit,
     Autocomplete: () => Autocomplete,
     BottomSheets: () => BottomSheets,
+    ButtonGroup: () => ButtonGroup,
     Cards: () => Cards,
     Carousel: () => Carousel,
     CharacterCounter: () => CharacterCounter,
@@ -431,103 +433,120 @@ var Expressive = (() => {
     onOpen: null,
     onClose: null
   };
-  var CARDS_SELECTOR = "article:has(> aside)";
+  var CARDS_SELECTOR = 'article:has(> aside[id]:not([id=""])):not(:has(> aside ~ aside)):has(> button.card-reveal-trigger[type="button"], > :not(aside) button.card-reveal-trigger[type="button"])';
+  var REVEAL_INITIALIZED_CLASS = "card-reveal-initialized";
+  function hasAccessibleName(trigger) {
+    const label = trigger.getAttribute("aria-label");
+    if (label?.trim()) return true;
+    const labelledBy = trigger.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const referencedText = labelledBy.trim().split(/\s+/).map((id) => trigger.ownerDocument.getElementById(id)?.textContent ?? "").join(" ").trim();
+      if (referencedText) return true;
+    }
+    const content = trigger.cloneNode(true);
+    content.querySelectorAll('[aria-hidden="true"]').forEach((node) => node.remove());
+    return Boolean(content.textContent?.trim());
+  }
+  function isUsableCardTrigger(trigger, card, panel) {
+    return trigger.closest("article") === card && !panel.contains(trigger) && !trigger.disabled && trigger.getAttribute("aria-disabled") !== "true" && hasAccessibleName(trigger);
+  }
+  function isCardReveal(el) {
+    if (el.tagName !== "ARTICLE") return false;
+    const panels = el.querySelectorAll(":scope > aside");
+    if (panels.length !== 1 || !panels[0].id) return false;
+    return Array.from(
+      el.querySelectorAll('button.card-reveal-trigger[type="button"]')
+    ).some((trigger) => isUsableCardTrigger(trigger, el, panels[0]));
+  }
   var Cards = class _Cards extends Component {
-    constructor(el, options) {
+    constructor(el, options = {}) {
       super(el, options, _Cards);
       this.isOpen = false;
+      this._ownsRevealInitializedClass = false;
+      this._initialAriaControls = /* @__PURE__ */ new Map();
+      this._lastActivator = null;
       this._setupEventHandlers = () => {
-        this._activators.forEach((el) => {
-          el.addEventListener("click", this._handleClickInteraction);
-          el.addEventListener("keypress", this._handleKeypressEvent);
+        this._activators.forEach((activator) => {
+          activator.addEventListener("click", this._handleClickInteraction);
         });
+        this.el.addEventListener("keydown", this._handleKeydownEvent);
       };
       this._removeEventHandlers = () => {
-        this._activators.forEach((el) => {
-          el.removeEventListener("click", this._handleClickInteraction);
-          el.removeEventListener("keypress", this._handleKeypressEvent);
+        this._activators.forEach((activator) => {
+          activator.removeEventListener("click", this._handleClickInteraction);
         });
+        this.el.removeEventListener("keydown", this._handleKeydownEvent);
       };
-      this._handleClickInteraction = () => {
+      this._handleClickInteraction = (event) => {
+        this._lastActivator = event.currentTarget;
         this._handleRevealEvent();
       };
-      this._handleKeypressEvent = (e) => {
-        if (e.key === Utils.keys.ENTER || e.key === " ") {
-          e.preventDefault();
-          this._handleRevealEvent();
-        }
+      this._handleKeydownEvent = (event) => {
+        const target = event.target instanceof Element ? event.target.closest("article") : null;
+        if (target !== this.el || event.key !== "Escape" || !this.isOpen) return;
+        event.preventDefault();
+        this.close();
       };
       this._handleRevealEvent = () => {
         if (this.isOpen) this.close();
         else this.open();
       };
-      this._setupRevealCloseEventHandlers = () => {
-        this.cardRevealClose.addEventListener("click", this.close);
-        this.cardRevealClose.addEventListener("keypress", this._handleKeypressCloseEvent);
-      };
-      this._removeRevealCloseEventHandlers = () => {
-        this.cardRevealClose.removeEventListener("click", this.close);
-        this.cardRevealClose.removeEventListener("keypress", this._handleKeypressCloseEvent);
-      };
-      this._handleKeypressCloseEvent = (e) => {
-        if (e.key === Utils.keys.ENTER) {
-          this.close();
-        }
-      };
       /**
        * Show card reveal.
        */
       this.open = () => {
         if (this.isOpen || !this.cardReveal) return;
         this.isOpen = true;
-        this.cardReveal.ariaExpanded = "true";
-        this._activators.forEach((el) => el.ariaExpanded = "true");
-        if (this.cardRevealClose) this.cardRevealClose.tabIndex = 0;
+        this.cardReveal.classList.add("open");
+        this.cardReveal.inert = false;
+        this._activators.forEach((activator) => activator.ariaExpanded = "true");
         if (typeof this.options.onOpen === "function") {
-          this.options.onOpen.call(this);
+          this.options.onOpen.call(this, this.el);
         }
-        if (this.cardRevealClose) this._setupRevealCloseEventHandlers();
       };
       /**
        * Hide card reveal.
        */
       this.close = () => {
         if (!this.isOpen || !this.cardReveal) return;
+        const focusWasInside = this.cardReveal.contains(document.activeElement);
         this.isOpen = false;
-        this.cardReveal.ariaExpanded = "false";
-        this._activators.forEach((el) => el.ariaExpanded = "false");
-        if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
+        this.cardReveal.classList.remove("open");
+        this.cardReveal.inert = true;
+        this._activators.forEach((activator) => activator.ariaExpanded = "false");
         if (typeof this.options.onClose === "function") {
-          this.options.onClose.call(this);
+          this.options.onClose.call(this, this.el);
+        }
+        if (focusWasInside) {
+          (this._lastActivator ?? this._activators[0])?.focus();
         }
-        if (this.cardRevealClose) this._removeRevealCloseEventHandlers();
       };
       this.el["Expressive_Cards"] = this;
       this.options = {
         ..._Cards.defaults,
         ...options
       };
-      this._activators = [];
-      this.cardReveal = this.el.querySelector(":scope > aside");
+      const cardReveals = this.el.querySelectorAll(":scope > aside");
+      const cardReveal = cardReveals.length === 1 ? cardReveals[0] : null;
+      const activators = cardReveal ? Array.from(
+        this.el.querySelectorAll(
+          'button.card-reveal-trigger[type="button"]'
+        )
+      ).filter(
+        (activator) => isUsableCardTrigger(activator, this.el, cardReveal)
+      ) : [];
+      this.cardReveal = cardReveal?.id && activators.length > 0 ? cardReveal : null;
+      this._activators = this.cardReveal ? activators : [];
       if (this.cardReveal) {
-        this._activators = Array.from(
-          this.el.querySelectorAll(".activator")
-        ).filter(
-          (activator) => !this.cardReveal.contains(activator)
-        );
-        this._activators.forEach((el2) => {
-          if (!el2) return;
-          el2.tabIndex = 0;
-          el2.ariaExpanded = "false";
-          if (!el2.matches("a[href], button, input, select, textarea")) {
-            el2.setAttribute("role", "button");
-          }
+        this._ownsRevealInitializedClass = !this.el.classList.contains(REVEAL_INITIALIZED_CLASS);
+        this.el.classList.add(REVEAL_INITIALIZED_CLASS);
+        this._activators.forEach((activator) => {
+          this._initialAriaControls.set(activator, activator.getAttribute("aria-controls"));
+          activator.ariaExpanded = "false";
+          activator.setAttribute("aria-controls", this.cardReveal.id);
         });
-        this.cardRevealClose = this.cardReveal.querySelector(
-          ":scope > :is(h1, h2, h3, h4, h5, h6)"
-        );
-        if (this.cardRevealClose) this.cardRevealClose.tabIndex = -1;
-        this.cardReveal.ariaExpanded = "false";
+        this.cardReveal.classList.remove("open");
+        this.cardReveal.inert = true;
         this._setupEventHandlers();
       }
     }
@@ -550,13 +569,28 @@ var Expressive = (() => {
      */
     destroy() {
       this._removeEventHandlers();
-      if (this.cardRevealClose) this._removeRevealCloseEventHandlers();
+      if (this.cardReveal) {
+        this.cardReveal.classList.remove("open");
+        this.cardReveal.inert = false;
+        if (this._ownsRevealInitializedClass) this.el.classList.remove(REVEAL_INITIALIZED_CLASS);
+      }
+      this._activators.forEach((activator) => {
+        activator.removeAttribute("aria-expanded");
+        const initialAriaControls = this._initialAriaControls.get(activator);
+        if (initialAriaControls === null) activator.removeAttribute("aria-controls");
+        else if (initialAriaControls !== void 0) {
+          activator.setAttribute("aria-controls", initialAriaControls);
+        }
+      });
+      this.isOpen = false;
       this._activators = [];
+      this._initialAriaControls.clear();
+      this._lastActivator = null;
       this.el["Expressive_Cards"] = void 0;
     }
     static Init() {
       Utils.onDocumentReady(() => {
-        const cards = document.querySelectorAll(CARDS_SELECTOR);
+        const cards = Array.from(document.querySelectorAll(CARDS_SELECTOR)).filter(isCardReveal);
         cards.forEach((el) => {
           if (el && el["Expressive_Cards"] == void 0) this.init(el);
         });
@@ -569,13 +603,12 @@ var Expressive = (() => {
     onOpen: null,
     onClose: null
   };
-  var MOTION_DURATION = 500;
   var EXPANDING_CARD_SELECTOR = "article.expanding-card:has(> dialog.expanding-card-dialog)";
   var ExpandingCard = class _ExpandingCard extends Component {
     constructor(el, options) {
       super(el, options, _ExpandingCard);
       this.isOpen = false;
-      this.closeTimer = null;
+      this.closeGeneration = 0;
       this._setupEventHandlers = () => {
         this.trigger?.addEventListener("click", this.open);
         this.trigger?.addEventListener("keypress", this._handleTriggerKeypress);
@@ -601,7 +634,8 @@ var Expressive = (() => {
         this.close();
       };
       this._handleNativeClose = () => {
-        if (!this.isOpen) return;
+        if (this.dialog.open) return;
+        this.closeGeneration++;
         this.isOpen = false;
         this.trigger.ariaExpanded = "false";
         this.dialog.ariaExpanded = "false";
@@ -637,10 +671,7 @@ var Expressive = (() => {
       };
       this.open = () => {
         if (this.isOpen || !this.dialog || !this.trigger) return;
-        if (this.closeTimer !== null) {
-          window.clearTimeout(this.closeTimer);
-          this.closeTimer = null;
-        }
+        this.closeGeneration++;
         this._setTransitionOrigin();
         this.isOpen = true;
         this.trigger.ariaExpanded = "true";
@@ -655,6 +686,7 @@ var Expressive = (() => {
       };
       this.close = () => {
         if (!this.isOpen || !this.dialog || !this.trigger) return;
+        const generation = ++this.closeGeneration;
         this._setTransitionOrigin();
         this.isOpen = false;
         this.trigger.ariaExpanded = "false";
@@ -664,15 +696,16 @@ var Expressive = (() => {
           this.options.onClose.call(this, this.el);
         }
         const finish = () => {
-          this.closeTimer = null;
-          if (this.dialog.open) this.dialog.close();
-          this.trigger.focus();
+          if (generation !== this.closeGeneration || this.isOpen || !this.dialog.open) return;
+          this.dialog.close();
+          if (this.dialog.isConnected && this.trigger.isConnected) this.trigger.focus();
         };
         const reducedMotion = window.matchMedia(
           "(prefers-reduced-motion: reduce)"
         ).matches;
-        if (reducedMotion) finish();
-        else this.closeTimer = window.setTimeout(finish, MOTION_DURATION);
+        const transitions = reducedMotion ? [] : (this.dialog.getAnimations?.() ?? []).filter((animation) => animation.transitionProperty === "clip-path");
+        if (transitions.length === 0) finish();
+        else void Promise.allSettled(transitions.map((animation) => animation.finished)).then(finish);
       };
       this.el["Expressive_ExpandingCard"] = this;
       this.options = {
@@ -709,7 +742,10 @@ var Expressive = (() => {
     }
     destroy() {
       this._removeEventHandlers();
-      if (this.closeTimer !== null) window.clearTimeout(this.closeTimer);
+      this.closeGeneration++;
+      this.isOpen = false;
+      if (this.trigger) this.trigger.ariaExpanded = "false";
+      if (this.dialog) this.dialog.ariaExpanded = "false";
       this.dialog?.classList.remove("expanded");
       if (this.dialog?.open) this.dialog.close();
       this.el["Expressive_ExpandingCard"] = void 0;
@@ -748,6 +784,8 @@ var Expressive = (() => {
   var _Menu = class _Menu extends Component {
     constructor(el, options) {
       super(el, options, _Menu);
+      this._pendingTimers = /* @__PURE__ */ new Set();
+      this._transition = 0;
       this._handleClick = (e) => {
         e.preventDefault();
         if (this.isOpen) {
@@ -781,7 +819,7 @@ var Expressive = (() => {
         if (this.options.closeOnClick && this.menuEl?.contains(target) && !this.isTouchMoving) {
           this.close();
         } else if (!this.menuEl?.contains(target)) {
-          setTimeout(() => {
+          this._schedule(() => {
             if (this.isOpen) {
               this.close();
             }
@@ -935,16 +973,18 @@ var Expressive = (() => {
        * Open menu.
        */
       this.open = () => {
-        if (this.isOpen) return;
+        if (this.isOpen || this.el["Expressive_Menu"] !== this) return;
+        const transition = this._clearPendingTimers();
         this.isOpen = true;
         if (typeof this.options.onOpenStart === "function") {
           this.options.onOpenStart.call(this, this.el);
         }
+        if (transition !== this._transition) return;
         this._resetMenuStyles();
         this.menuEl.style.display = "block";
         this._placeMenu();
+        this._schedule(() => this._setupTemporaryEventHandlers(), 0);
         this._animateIn();
-        setTimeout(() => this._setupTemporaryEventHandlers(), 0);
         this.el.ariaExpanded = "true";
       };
       /**
@@ -952,18 +992,20 @@ var Expressive = (() => {
        */
       this.close = () => {
         if (!this.isOpen) return;
+        const transition = this._clearPendingTimers();
         this.isOpen = false;
         this.focusedIndex = -1;
         this._closeSubmenus();
         if (typeof this.options.onCloseStart === "function") {
           this.options.onCloseStart.call(this, this.el);
         }
+        if (transition !== this._transition) return;
         this._animateOut();
         this._removeTemporaryEventHandlers();
+        this.el.ariaExpanded = "false";
         if (this.options.autoFocus) {
           this.el.focus();
         }
-        this.el.ariaExpanded = "false";
       };
       /**
        * While menu is open, you can recalculate its dimensions if its contents have changed.
@@ -1012,6 +1054,9 @@ var Expressive = (() => {
       return el["Expressive_Menu"];
     }
     destroy() {
+      this._clearPendingTimers();
+      this.isOpen = false;
+      this.el.ariaExpanded = "false";
       clearTimeout(this.filterTimeout);
       this._resetMenuStyles();
       this._removeEventHandlers();
@@ -1274,18 +1319,32 @@ var Expressive = (() => {
         width: idealWidth
       };
     }
+    _schedule(callback, delay) {
+      const timer = setTimeout(() => {
+        this._pendingTimers.delete(timer);
+        callback();
+      }, delay);
+      this._pendingTimers.add(timer);
+    }
+    _clearPendingTimers() {
+      for (const timer of this._pendingTimers) clearTimeout(timer);
+      this._pendingTimers.clear();
+      return ++this._transition;
+    }
     _animateIn() {
+      const transition = this._transition;
       const duration = this.options.inDuration;
       this.menuEl.style.transition = "none";
       this.menuEl.style.opacity = "0";
       this.menuEl.style.transform = "scale(0.85)";
-      setTimeout(() => {
+      this._schedule(() => {
         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(() => {
+      this._schedule(() => {
         this._focusInitialItem();
+        if (transition !== this._transition) return;
         if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
       }, duration);
     }
@@ -1294,7 +1353,7 @@ var Expressive = (() => {
       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._schedule(() => {
         this._resetMenuStyles();
         if (typeof this.options.onCloseEnd === "function")
           this.options.onCloseEnd.call(this, this.el);
@@ -2563,8 +2622,89 @@ var Expressive = (() => {
     }
   };
 
+  // src/ts/components/appBar.ts
+  var _defaults7 = {};
+  var AppBar = class _AppBar extends Component {
+    constructor(el, options) {
+      super(el, options, _AppBar);
+      this._observer = null;
+      this._sentinel = null;
+      this._input = null;
+      this._view = null;
+      this._suppressSearchOpen = false;
+      this._onIntersect = (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        this.el.classList.toggle("collapsed", !entry.isIntersecting);
+      };
+      this._onSearchViewClose = () => {
+        this._suppressSearchOpen = true;
+      };
+      this._onSearchFocus = () => {
+        if (!this._view) return;
+        if (this._suppressSearchOpen) {
+          this._suppressSearchOpen = false;
+          return;
+        }
+        if (this._view instanceof HTMLDialogElement) {
+          if (!this._view.open) this._view.showModal();
+          return;
+        }
+        this._view.hidden = false;
+        this._input?.setAttribute("aria-expanded", "true");
+      };
+      this.el["Expressive_AppBar"] = this;
+      this.options = { ..._AppBar.defaults, ...options };
+      this._setupCollapse();
+      this._setupSearch();
+    }
+    static get defaults() {
+      return _defaults7;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options, _AppBar);
+    }
+    static getInstance(el) {
+      return el["Expressive_AppBar"];
+    }
+    destroy() {
+      this._observer?.disconnect();
+      this._observer = null;
+      this._sentinel?.remove();
+      this._sentinel = null;
+      this._input?.removeEventListener("focus", this._onSearchFocus);
+      this._view?.removeEventListener("close", this._onSearchViewClose);
+      this.el.classList.remove("collapsed");
+      this.el["Expressive_AppBar"] = void 0;
+    }
+    _setupCollapse() {
+      if (!this.el.classList.contains("medium") && !this.el.classList.contains("large")) {
+        return;
+      }
+      if (typeof IntersectionObserver === "undefined") return;
+      this._sentinel = document.createElement("span");
+      this._sentinel.setAttribute("aria-hidden", "true");
+      this._sentinel.style.cssText = "display:block;width:100%;height:1px;margin-top:-1px;pointer-events:none;visibility:hidden";
+      this.el.insertAdjacentElement("beforebegin", this._sentinel);
+      this._observer = new IntersectionObserver(this._onIntersect);
+      this._observer.observe(this._sentinel);
+    }
+    _setupSearch() {
+      this._input = this.el.querySelector('input[type="search"]');
+      if (!this._input) return;
+      const id = this._input.getAttribute("aria-controls");
+      if (id) this._view = document.getElementById(id);
+      if (!this._view) this._view = this.el.querySelector(".search-view");
+      if (!this._view) return;
+      this._input.addEventListener("focus", this._onSearchFocus);
+      if (this._view instanceof HTMLDialogElement) {
+        this._view.addEventListener("close", this._onSearchViewClose);
+      }
+    }
+  };
+
   // src/ts/components/buttons.ts
-  var _defaults7 = {
+  var _defaults8 = {
     direction: "top",
     hoverEnabled: true,
     toolbarEnabled: false
@@ -2637,7 +2777,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults7;
+      return _defaults8;
     }
     static init(els, options = {}) {
       return super.init(els, options, _FloatingActionButton);
@@ -2674,8 +2814,226 @@ var Expressive = (() => {
     }
   };
 
+  // src/ts/components/buttonGroup.ts
+  var _defaults9 = {};
+  var VALID_SELECTION_MODES = /* @__PURE__ */ new Set(["single", "multiple"]);
+  var PRESSED_CLASS = "button-group-pressed";
+  var MAX_ICON_COMPRESSION = 0.15;
+  var ButtonGroup = class _ButtonGroup extends Component {
+    constructor(el, options = {}) {
+      super(el, options, _ButtonGroup);
+      this._pressedStyles = /* @__PURE__ */ new Map();
+      this._releaseStyles = /* @__PURE__ */ new Map();
+      this._releaseTimer = null;
+      this._originalPressed = /* @__PURE__ */ new Map();
+      this._activeItem = null;
+      this._handleClick = (event) => {
+        if (!this._selectionMode) return;
+        const item = this._itemFromEvent(event);
+        if (!(item instanceof HTMLButtonElement) || this._isDisabled(item)) return;
+        this._rememberPressed(item);
+        const willSelect = item.getAttribute("aria-pressed") !== "true";
+        const selectedCount = this._toggleItems.filter(
+          (button) => button.getAttribute("aria-pressed") === "true"
+        ).length;
+        if (!willSelect && this.el.hasAttribute("data-selection-required") && selectedCount === 1) {
+          return;
+        }
+        if (this._selectionMode === "single" && willSelect) {
+          this._toggleItems.forEach((button) => {
+            this._rememberPressed(button);
+            button.setAttribute("aria-pressed", "false");
+          });
+        }
+        item.setAttribute("aria-pressed", willSelect ? "true" : "false");
+      };
+      this._handlePointerDown = (event) => {
+        if (event.button !== 0) return;
+        const item = this._itemFromEvent(event);
+        if (item && !this._isDisabled(item)) this._startPress(item);
+      };
+      this._handleKeyDown = (event) => {
+        if (event.repeat || event.key !== " " && event.key !== "Enter") return;
+        const item = this._itemFromEvent(event);
+        if (item && !this._isDisabled(item)) this._startPress(item);
+      };
+      this._handleKeyUp = (event) => {
+        if (event.key === " " || event.key === "Enter") this._resetPress();
+      };
+      this._handleFocusOut = (event) => {
+        if (event.target === this._activeItem) this._resetPress();
+      };
+      this._resetPress = () => {
+        this._activeItem?.classList.remove(PRESSED_CLASS);
+        this._activeItem = null;
+        if (!this._pressedStyles.size) return;
+        this._finishRelease();
+        this._releaseStyles = new Map(this._pressedStyles);
+        for (const [item, style] of this._releaseStyles) {
+          item.style.width = `${style.baseWidth}px`;
+        }
+        this._pressedStyles.clear();
+        this._releaseTimer = window.setTimeout(this._finishRelease, 200);
+      };
+      this._finishRelease = () => {
+        if (this._releaseTimer !== null) window.clearTimeout(this._releaseTimer);
+        this._releaseTimer = null;
+        for (const [item, style] of this._releaseStyles) item.style.width = style.width;
+        this._releaseStyles.clear();
+      };
+      this.el["Expressive_ButtonGroup"] = this;
+      this.options = { ..._ButtonGroup.defaults, ...options };
+      if (this._selectionMode) {
+        this._normalizeSelection();
+        this.el.addEventListener("click", this._handleClick, true);
+      }
+      this.el.addEventListener("pointerdown", this._handlePointerDown);
+      this.el.addEventListener("keydown", this._handleKeyDown);
+      this.el.addEventListener("focusout", this._handleFocusOut);
+      document.addEventListener("pointerup", this._resetPress);
+      document.addEventListener("pointercancel", this._resetPress);
+      document.addEventListener("keyup", this._handleKeyUp);
+      window.addEventListener("blur", this._resetPress);
+    }
+    static get defaults() {
+      return _defaults9;
+    }
+    static init(els, options = {}) {
+      return super.init(els, options, _ButtonGroup);
+    }
+    static getInstance(el) {
+      return el["Expressive_ButtonGroup"];
+    }
+    destroy() {
+      this._resetPress();
+      this._finishRelease();
+      this.el.removeEventListener("click", this._handleClick, true);
+      this.el.removeEventListener("pointerdown", this._handlePointerDown);
+      this.el.removeEventListener("keydown", this._handleKeyDown);
+      this.el.removeEventListener("focusout", this._handleFocusOut);
+      document.removeEventListener("pointerup", this._resetPress);
+      document.removeEventListener("pointercancel", this._resetPress);
+      document.removeEventListener("keyup", this._handleKeyUp);
+      window.removeEventListener("blur", this._resetPress);
+      for (const [item, value] of this._originalPressed) {
+        if (value === null) item.removeAttribute("aria-pressed");
+        else item.setAttribute("aria-pressed", value);
+      }
+      this._originalPressed.clear();
+      this.el["Expressive_ButtonGroup"] = void 0;
+    }
+    get _selectionMode() {
+      const mode = this.el.dataset.selection;
+      return VALID_SELECTION_MODES.has(mode) ? mode : null;
+    }
+    get _items() {
+      return Array.from(this.el.children).filter(
+        (child) => child instanceof HTMLButtonElement || child instanceof HTMLAnchorElement && child.classList.contains("button")
+      );
+    }
+    get _toggleItems() {
+      return this._items.filter(
+        (item) => item instanceof HTMLButtonElement
+      );
+    }
+    _normalizeSelection() {
+      const items = this._toggleItems;
+      items.forEach((item) => {
+        this._rememberPressed(item);
+        if (!["true", "false"].includes(item.getAttribute("aria-pressed") || "")) {
+          item.setAttribute("aria-pressed", "false");
+        }
+      });
+      if (this._selectionMode === "single") {
+        const selected = items.filter((item) => item.getAttribute("aria-pressed") === "true");
+        selected.slice(1).forEach((item) => item.setAttribute("aria-pressed", "false"));
+      }
+      if (this.el.hasAttribute("data-selection-required") && !items.some((item) => item.getAttribute("aria-pressed") === "true")) {
+        items.find((item) => !this._isDisabled(item))?.setAttribute("aria-pressed", "true");
+      }
+    }
+    _itemFromEvent(event) {
+      if (!(event.target instanceof Element)) return null;
+      const item = event.target.closest("button, a.button");
+      return item instanceof HTMLElement && item.parentElement === this.el ? item : null;
+    }
+    _isDisabled(item) {
+      return item instanceof HTMLButtonElement && item.disabled || item.getAttribute("aria-disabled") === "true" || item.classList.contains("disabled");
+    }
+    _rememberPressed(item) {
+      if (!this._originalPressed.has(item)) {
+        this._originalPressed.set(item, item.getAttribute("aria-pressed"));
+      }
+    }
+    _startPress(item) {
+      if (this._activeItem) return;
+      this._finishRelease();
+      const items = this._items;
+      const activeIndex = items.indexOf(item);
+      if (activeIndex < 0) return;
+      this._activeItem = item;
+      item.classList.add(PRESSED_CLASS);
+      if (this.el.classList.contains("connected") || items.length < 2) return;
+      const rects = items.map((candidate) => candidate.getBoundingClientRect());
+      const activeWidth = rects[activeIndex].width;
+      if (activeWidth <= 0) return;
+      const parsedMultiplier = Number.parseFloat(
+        getComputedStyle(this.el).getPropertyValue(
+          "--md-comp-button-group-pressed-item-width-multiplier"
+        )
+      );
+      const multiplier = Number.isFinite(parsedMultiplier) ? parsedMultiplier : 0.15;
+      const desiredGrowth = activeWidth * multiplier;
+      const neighborIndexes = [activeIndex - 1, activeIndex + 1].filter(
+        (index) => index >= 0 && index < items.length
+      );
+      const compression = /* @__PURE__ */ new Map();
+      if (neighborIndexes.length === 1) {
+        const index = neighborIndexes[0];
+        compression.set(
+          index,
+          Math.min(desiredGrowth, this._compressionCapacity(items[index], rects[index]))
+        );
+      } else {
+        const half = desiredGrowth / 2;
+        for (const index of neighborIndexes) {
+          compression.set(
+            index,
+            Math.min(half, this._compressionCapacity(items[index], rects[index]))
+          );
+        }
+        let remaining = desiredGrowth - [...compression.values()].reduce((sum, value) => sum + value, 0);
+        for (const index of neighborIndexes) {
+          if (remaining <= 0) break;
+          const capacity = this._compressionCapacity(items[index], rects[index]) - compression.get(index);
+          const extra = Math.min(remaining, capacity);
+          compression.set(index, compression.get(index) + extra);
+          remaining -= extra;
+        }
+      }
+      const actualGrowth = [...compression.values()].reduce((sum, value) => sum + value, 0);
+      if (actualGrowth <= 0) return;
+      items.forEach((candidate, index) => {
+        this._pressedStyles.set(candidate, {
+          width: candidate.style.width,
+          baseWidth: rects[index].width
+        });
+        candidate.style.width = `${rects[index].width}px`;
+      });
+      void this.el.offsetWidth;
+      items.forEach((candidate, index) => {
+        const adjustment = index === activeIndex ? actualGrowth : -(compression.get(index) || 0);
+        candidate.style.width = `${rects[index].width + adjustment}px`;
+      });
+    }
+    _compressionCapacity(item, rect) {
+      const minimumWidth = item.classList.contains("icon-button") ? rect.width * (1 - MAX_ICON_COMPRESSION) : rect.height;
+      return Math.max(0, rect.width - minimumWidth);
+    }
+  };
+
   // src/ts/components/carousel.ts
-  var _defaults8 = {
+  var _defaults10 = {
     duration: 200,
     fullWidth: false,
     indicators: false,
@@ -2918,7 +3276,7 @@ var Expressive = (() => {
       return this._trackEl ?? this.el;
     }
     static get defaults() {
-      return _defaults8;
+      return _defaults10;
     }
     static init(els, options = {}) {
       return super.init(els, options, _Carousel);
@@ -3314,7 +3672,7 @@ var Expressive = (() => {
   var Carousel = _Carousel;
 
   // src/ts/components/characterCounter.ts
-  var _defaults9 = Object.freeze({});
+  var _defaults11 = Object.freeze({});
   var CharacterCounter = class _CharacterCounter extends Component {
     constructor(el, options) {
       super(el, {}, _CharacterCounter);
@@ -3339,7 +3697,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults9;
+      return _defaults11;
     }
     /**
      * Initializes instances of CharacterCounter.
@@ -3391,7 +3749,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/select.ts
-  var _defaults10 = {
+  var _defaults12 = {
     classes: "",
     menuOptions: {}
   };
@@ -3440,7 +3798,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults10;
+      return _defaults12;
     }
     /**
      * Initializes instances of FormSelect.
@@ -3571,7 +3929,7 @@ var Expressive = (() => {
     _buildInput() {
       this.input = document.createElement("input");
       this.input.id = "select-input-" + Utils.guid();
-      this.input.classList.add("menu-trigger");
+      this.input.classList.add("menu-trigger", "no-autoinit");
       this.input.type = "text";
       this.input.readOnly = true;
       this.input.setAttribute("data-target", this.menuEl.id);
@@ -3726,11 +4084,21 @@ var Expressive = (() => {
       }
       li.appendChild(span);
       const iconUrl = realOption.getAttribute("data-icon");
-      const classes = realOption.getAttribute("class")?.split(" ").filter(Boolean);
+      let imageUrl;
       if (iconUrl) {
+        try {
+          const url = new URL(iconUrl, this.el.ownerDocument.baseURI);
+          if (["http:", "https:", "blob:"].includes(url.protocol) || /^data:image\/(?:avif|bmp|gif|jpeg|png|svg\+xml|webp|x-icon)(?:;|,)/i.test(url.href)) {
+            imageUrl = url;
+          }
+        } catch {
+        }
+      }
+      const classes = realOption.getAttribute("class")?.split(" ").filter(Boolean);
+      if (imageUrl) {
         const img = document.createElement("img");
         if (classes?.length) img.classList.add(...classes);
-        img.src = iconUrl;
+        img.src = imageUrl.href;
         img.ariaHidden = "true";
         li.prepend(img);
       }
@@ -3812,7 +4180,7 @@ var Expressive = (() => {
   };
 
   // src/ts/plugins/dockedDisplayPlugin.ts
-  var _defaults11 = {
+  var _defaults13 = {
     margin: 5,
     transition: 10,
     duration: 250,
@@ -3861,7 +4229,7 @@ var Expressive = (() => {
       };
       this.el = el;
       this.options = {
-        ..._defaults11,
+        ..._defaults13,
         ...options
       };
       this.container = document.createElement("div");
@@ -3882,7 +4250,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/datepicker.ts
-  var _defaults12 = {
+  var _defaults14 = {
     // the default output format for the input field value
     format: "mmm dd, yyyy",
     // Used to create date object from current input string
@@ -4147,7 +4515,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults12;
+      return _defaults14;
     }
     /**
      * Initializes instances of Datepicker.
@@ -4561,13 +4929,18 @@ var Expressive = (() => {
           arr.push(className);
         }
       }
-      return `<td data-day="${opts.day}" class="${arr.join(" ")}" aria-selected="${ariaSelected}"><button class="datepicker-day-button" type="button" data-year="${opts.year}" data-month="${opts.month}" data-day="${opts.day}">${opts.day}</button></td>`;
+      const day = _Datepicker._escape(opts.day);
+      const month = _Datepicker._escape(opts.month);
+      const year = _Datepicker._escape(opts.year);
+      return `<td data-day="${day}" class="${arr.join(" ")}" aria-selected="${ariaSelected}"><button class="datepicker-day-button" type="button" data-year="${year}" data-month="${month}" data-day="${day}">${day}</button></td>`;
     }
+    /** Assemble calendar cells; reject unsupported elements and attributes. */
     renderRow(days, isRTL, isRowSelected) {
-      return '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + (isRTL ? days.reverse() : days).join("") + "</tr>";
+      return '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
     }
+    /** Assemble calendar rows; reject unsupported elements and attributes. */
     renderTable(opts, data, randId) {
-      return '<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' + randId + '">' + this.renderHead(opts) + this.renderBody(data) + "</table></div>";
+      return '<div class="datepicker-table-wrapper"><table cellpadding="0" cellspacing="0" class="datepicker-table" role="grid" aria-labelledby="' + _Datepicker._escape(randId) + '">' + this.renderHead(opts) + this.renderBody(data) + "</table></div>";
     }
     renderHead(opts) {
       const arr = [];
@@ -4579,8 +4952,40 @@ var Expressive = (() => {
       }
       return "<thead><tr>" + (opts.isRTL ? arr.reverse() : arr).join("") + "</tr></thead>";
     }
+    /** Wrap calendar rows after validating and encoding their contents. */
     renderBody(rows) {
-      return "<tbody>" + rows.join("") + "</tbody>";
+      return "<tbody>" + _Datepicker._calendarMarkup(rows.join(""), "tbody") + "</tbody>";
+    }
+    static _calendarMarkup(html, parent) {
+      const template = document.createElement("template");
+      template.innerHTML = html;
+      const attributes = {
+        tr: ["class"],
+        td: ["class", "data-day", "aria-selected"],
+        button: ["class", "type", "data-year", "data-month", "data-day", "aria-label", "disabled", "tabindex"]
+      };
+      const render = (node, container) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          if (container === "tbody" || container === "tr") {
+            if (node.textContent.trim()) throw new TypeError("Unsupported calendar row content");
+          }
+          return _Datepicker._escape(node.textContent);
+        }
+        if (!(node instanceof HTMLElement)) throw new TypeError("Unsupported calendar row content");
+        const tag = node.localName === "tr" ? "tr" : node.localName === "td" ? "td" : node.localName === "button" ? "button" : null;
+        if (!tag || !(container === "tbody" && tag === "tr" || container === "tr" && tag === "td" || container === "td" && tag === "button")) {
+          throw new TypeError("Unsupported calendar row element");
+        }
+        if ([...node.attributes].some((attr) => !attributes[tag].includes(attr.name))) {
+          throw new TypeError("Unsupported calendar row attribute");
+        }
+        if (tag === "button" && node.getAttribute("type") !== "button") {
+          throw new TypeError('Calendar day buttons require type="button"');
+        }
+        const attrs = attributes[tag].filter((name) => node.hasAttribute(name)).map((name) => ` ${name}="${_Datepicker._escape(node.getAttribute(name))}"`).join("");
+        return `<${tag}${attrs}>${[...node.childNodes].map((child) => render(child, tag)).join("")}</${tag}>`;
+      };
+      return [...template.content.childNodes].map((node) => render(node, parent)).join("");
     }
     /**
      * Whether each month arrow is usable at this position in the allowed range.
@@ -4620,7 +5025,7 @@ var Expressive = (() => {
     }
     renderTitle(instance, c, year, month, refYear, randId) {
       const opts = this.options, isMinYear = year === opts.minYear, isMaxYear = year === opts.maxYear;
-      let i, j, arr = [], html = '<div id="' + randId + '" class="datepicker-controls" role="heading" aria-live="assertive">';
+      let i, j, arr = [], html = '<div id="' + _Datepicker._escape(randId) + '" class="datepicker-controls" role="heading" aria-live="assertive">';
       const { prev, next } = this._arrowState(year, month);
       for (i = 0; i < 12; i++) {
         arr.push(
@@ -4865,7 +5270,7 @@ var Expressive = (() => {
   var Datepicker = _Datepicker;
 
   // src/ts/components/lightbox.ts
-  var _defaults13 = {
+  var _defaults15 = {
     inDuration: 275,
     outDuration: 200,
     onOpenStart: null,
@@ -4984,7 +5389,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults13;
+      return _defaults15;
     }
     /**
      * Initializes instances of Lightbox.
@@ -5150,7 +5555,7 @@ var Expressive = (() => {
 
   // src/ts/components/scrollspy.ts
   var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-  var _defaults14 = {
+  var _defaults16 = {
     scrollOffset: 200,
     activeClass: "active",
     getActiveElement: _defaultGetActiveElement,
@@ -5173,7 +5578,7 @@ var Expressive = (() => {
       _ScrollSpy._observer?.observe(this.el);
     }
     static get defaults() {
-      return _defaults14;
+      return _defaults16;
     }
     static init(els, options = {}) {
       return super.init(els, options, _ScrollSpy);
@@ -5295,7 +5700,7 @@ var Expressive = (() => {
   var ScrollSpy = _ScrollSpy;
 
   // src/ts/components/navigationDrawer.ts
-  var _defaults15 = {
+  var _defaults17 = {
     edge: "left",
     draggable: true,
     dragTargetWidth: "10px",
@@ -5438,7 +5843,7 @@ var Expressive = (() => {
       _NavigationDrawer._sidenavs.push(this);
     }
     static get defaults() {
-      return _defaults15;
+      return _defaults17;
     }
     /**
      * Initializes instances of NavigationDrawer.
@@ -5629,7 +6034,7 @@ var Expressive = (() => {
   var NavigationDrawer = _NavigationDrawer;
 
   // src/ts/components/navigationRail.ts
-  var _defaults16 = {
+  var _defaults18 = {
     onOpenStart: null,
     onOpenEnd: null,
     onCloseStart: null,
@@ -5705,7 +6110,7 @@ var Expressive = (() => {
       document.addEventListener("keydown", this._onKeyDown);
     }
     static get defaults() {
-      return _defaults16;
+      return _defaults18;
     }
     static init(els, options = {}) {
       return super.init(els, options, _NavigationRail);
@@ -5735,7 +6140,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/tabs.ts
-  var _defaults17 = {
+  var _defaults19 = {
     duration: 300,
     onShow: null,
     swipeable: false,
@@ -5811,7 +6216,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults17;
+      return _defaults19;
     }
     /**
      * Initializes instances of Tabs.
@@ -5998,7 +6403,7 @@ var Expressive = (() => {
   };
 
   // src/ts/components/timepicker.ts
-  var _defaults18 = {
+  var _defaults20 = {
     dialRadius: 135,
     outerRadius: 105,
     innerRadius: 70,
@@ -6051,12 +6456,6 @@ var Expressive = (() => {
           if (this.displayPlugin) this.displayPlugin.show();
         }
       };
-      this._handleTimeInputEnterKey = (e) => {
-        if (e.key === Utils.keys.ENTER) {
-          e.preventDefault();
-          this._inputFromTextField();
-        }
-      };
       this._handleClockClickStart = (e) => {
         if (!e.isPrimary) return;
         if (e.pointerType === "mouse" && e.button !== 0) return;
@@ -6211,7 +6610,7 @@ var Expressive = (() => {
       }
     }
     static get defaults() {
-      return _defaults18;
+      return _defaults20;
     }
     /**
      * Initializes instances of Timepicker.
@@ -6561,7 +6960,7 @@ var Expressive = (() => {
   var Timepicker = _Timepicker;
 
   // src/ts/components/snackbar.ts
-  var _defaults19 = {
+  var _defaults21 = {
     text: "",
     action: "",
     onAction: null,
@@ -6608,7 +7007,7 @@ var Expressive = (() => {
       this._setTimer();
     }
     static get defaults() {
-      return _defaults19;
+      return _defaults21;
     }
     static getInstance(el) {
       return el["Expressive_Snackbar"];
@@ -6843,7 +7242,7 @@ var Expressive = (() => {
   var Snackbar = _Snackbar;
 
   // src/ts/components/tooltip.ts
-  var _defaults20 = {
+  var _defaults22 = {
     exitDelay: 200,
     enterDelay: 0,
     text: "",
@@ -6913,7 +7312,7 @@ var Expressive = (() => {
       this._setupEventHandlers();
     }
     static get defaults() {
-      return _defaults20;
+      return _defaults22;
     }
     /**
      * Initializes instances of Tooltip.
@@ -6927,6 +7326,12 @@ var Expressive = (() => {
       return el["Expressive_Tooltip"];
     }
     destroy() {
+      clearTimeout(this._enterDelayTimeout);
+      clearTimeout(this._exitDelayTimeout);
+      clearTimeout(this._animationTimeout);
+      this.isOpen = false;
+      this.isHovered = false;
+      this.isFocused = false;
       if (this.el.getAttribute("aria-describedby") === this.tooltipEl.id) {
         this.el.removeAttribute("aria-describedby");
       }
@@ -7018,32 +7423,15 @@ var Expressive = (() => {
       tooltip.style.left = newCoordinates.x + "px";
     }
     _repositionWithinScreen(x, y, width, height) {
-      const scrollLeft = Utils.getDocumentScrollLeft();
-      const scrollTop = Utils.getDocumentScrollTop();
-      let newX = x - scrollLeft;
-      let newY = y - scrollTop;
-      const bounding = {
-        left: newX,
-        top: newY,
+      return Utils._repositionWithinScreen(
+        x,
+        y,
         width,
-        height
-      };
-      const offset = this.options.margin + this.options.transitionMovement;
-      const edges = Utils.checkWithinContainer(document.body, bounding, offset);
-      if (edges.left) {
-        newX = offset;
-      } else if (edges.right) {
-        newX -= newX + width - window.innerWidth;
-      }
-      if (edges.top) {
-        newY = offset;
-      } else if (edges.bottom) {
-        newY -= newY + height - window.innerHeight;
-      }
-      return {
-        x: newX + scrollLeft,
-        y: newY + scrollTop
-      };
+        height,
+        this.options.margin,
+        this.options.transitionMovement,
+        "center"
+      );
     }
     _animateIn() {
       this._positionTooltip();
@@ -7052,7 +7440,8 @@ var Expressive = (() => {
       this.tooltipEl.style.transition = `
       transform ${duration}ms ease-out,
       opacity ${duration}ms ease-out`;
-      setTimeout(() => {
+      clearTimeout(this._animationTimeout);
+      this._animationTimeout = setTimeout(() => {
         this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
         this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
       }, 1);
@@ -7062,7 +7451,8 @@ var Expressive = (() => {
       this.tooltipEl.style.transition = `
       transform ${duration}ms ease-out,
       opacity ${duration}ms ease-out`;
-      setTimeout(() => {
+      clearTimeout(this._animationTimeout);
+      this._animationTimeout = setTimeout(() => {
         this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
         this.tooltipEl.style.opacity = "0";
       }, 1);
@@ -7087,13 +7477,21 @@ var Expressive = (() => {
 
   // src/ts/components/registry.ts
   var AUTO_INIT_COMPONENTS = {
+    AppBar: {
+      component: AppBar,
+      selector: "header.medium, header.large, header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar))"
+    },
     Autocomplete: {
       component: Autocomplete,
       selector: ".autocomplete"
     },
+    ButtonGroup: {
+      component: ButtonGroup,
+      selector: ".button-group"
+    },
     // Shared with Cards.Init() - see CARDS_SELECTOR. This entry used to read
     // '.cards', which no card markup uses.
-    Cards: { component: Cards, selector: CARDS_SELECTOR },
+    Cards: { component: Cards, selector: CARDS_SELECTOR, filter: isCardReveal },
     ExpandingCard: {
       component: ExpandingCard,
       selector: EXPANDING_CARD_SELECTOR
@@ -7129,14 +7527,20 @@ var Expressive = (() => {
   };
   function AutoInit(context = document.body, options) {
     for (const name of Object.keys(AUTO_INIT_COMPONENTS)) {
-      const { component, selector } = AUTO_INIT_COMPONENTS[name];
+      const { component, selector, filter } = AUTO_INIT_COMPONENTS[name];
       const els = context.querySelectorAll(`:is(${selector}):not(.no-autoinit)`);
-      component.init(els, options?.[name] ?? {});
+      if (filter) {
+        els.forEach((el) => {
+          if (filter(el)) component.init(el, options?.[name] ?? {});
+        });
+      } else {
+        component.init(els, options?.[name] ?? {});
+      }
     }
   }
 
   // src/ts/index.ts
-  var version = "0.8.0";
+  var version = "0.9.1";
   Forms.Init();
   Chips.Init();
   Slider.Init();