@expressivecss/expressive 0.8.0 → 0.9.1

package/dist/js/expressive.mjs

@@ -380,103 +380,120 @@ var _defaults = {
   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();
     }
   }
@@ -499,13 +516,28 @@ var Cards = class _Cards extends Component {
    */
   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);
       });
@@ -518,13 +550,12 @@ var _defaults2 = {
   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);
@@ -550,7 +581,8 @@ var ExpandingCard = class _ExpandingCard extends Component {
       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";
@@ -586,10 +618,7 @@ var ExpandingCard = class _ExpandingCard extends Component {
     };
     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";
@@ -604,6 +633,7 @@ var ExpandingCard = class _ExpandingCard extends Component {
     };
     this.close = () => {
       if (!this.isOpen || !this.dialog || !this.trigger) return;
+      const generation = ++this.closeGeneration;
       this._setTransitionOrigin();
       this.isOpen = false;
       this.trigger.ariaExpanded = "false";
@@ -613,15 +643,16 @@ var ExpandingCard = class _ExpandingCard extends Component {
         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 = {
@@ -658,7 +689,10 @@ var ExpandingCard = class _ExpandingCard extends Component {
   }
   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;
@@ -697,6 +731,8 @@ var SPACE = " ";
 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) {
@@ -730,7 +766,7 @@ var _Menu = class _Menu extends Component {
       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();
           }
@@ -884,16 +920,18 @@ var _Menu = class _Menu extends Component {
      * 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";
     };
     /**
@@ -901,18 +939,20 @@ var _Menu = class _Menu extends Component {
      */
     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.
@@ -961,6 +1001,9 @@ var _Menu = class _Menu extends Component {
     return el["Expressive_Menu"];
   }
   destroy() {
+    this._clearPendingTimers();
+    this.isOpen = false;
+    this.el.ariaExpanded = "false";
     clearTimeout(this.filterTimeout);
     this._resetMenuStyles();
     this._removeEventHandlers();
@@ -1223,18 +1266,32 @@ var _Menu = class _Menu extends Component {
       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);
   }
@@ -1243,7 +1300,7 @@ var _Menu = class _Menu extends Component {
     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);
@@ -2512,8 +2569,89 @@ var Forms = class _Forms {
   }
 };
 
+// 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
@@ -2586,7 +2724,7 @@ var FloatingActionButton = class _FloatingActionButton extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults7;
+    return _defaults8;
   }
   static init(els, options = {}) {
     return super.init(els, options, _FloatingActionButton);
@@ -2623,8 +2761,226 @@ var FloatingActionButton = class _FloatingActionButton extends Component {
   }
 };
 
+// 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,
@@ -2867,7 +3223,7 @@ var _Carousel = class _Carousel extends Component {
     return this._trackEl ?? this.el;
   }
   static get defaults() {
-    return _defaults8;
+    return _defaults10;
   }
   static init(els, options = {}) {
     return super.init(els, options, _Carousel);
@@ -3263,7 +3619,7 @@ _Carousel._onResize = Utils.throttle(() => {
 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);
@@ -3288,7 +3644,7 @@ var CharacterCounter = class _CharacterCounter extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults9;
+    return _defaults11;
   }
   /**
    * Initializes instances of CharacterCounter.
@@ -3340,7 +3696,7 @@ var CharacterCounter = class _CharacterCounter extends Component {
 };
 
 // src/ts/components/select.ts
-var _defaults10 = {
+var _defaults12 = {
   classes: "",
   menuOptions: {}
 };
@@ -3389,7 +3745,7 @@ var FormSelect = class _FormSelect extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults10;
+    return _defaults12;
   }
   /**
    * Initializes instances of FormSelect.
@@ -3520,7 +3876,7 @@ var FormSelect = class _FormSelect extends Component {
   _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);
@@ -3675,11 +4031,21 @@ var FormSelect = class _FormSelect extends Component {
     }
     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);
     }
@@ -3761,7 +4127,7 @@ var FormSelect = class _FormSelect extends Component {
 };
 
 // src/ts/plugins/dockedDisplayPlugin.ts
-var _defaults11 = {
+var _defaults13 = {
   margin: 5,
   transition: 10,
   duration: 250,
@@ -3810,7 +4176,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     };
     this.el = el;
     this.options = {
-      ..._defaults11,
+      ..._defaults13,
       ...options
     };
     this.container = document.createElement("div");
@@ -3831,7 +4197,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 };
 
 // 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
@@ -4096,7 +4462,7 @@ var _Datepicker = class _Datepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults12;
+    return _defaults14;
   }
   /**
    * Initializes instances of Datepicker.
@@ -4510,13 +4876,18 @@ var _Datepicker = class _Datepicker extends Component {
         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 = [];
@@ -4528,8 +4899,40 @@ var _Datepicker = class _Datepicker extends Component {
     }
     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.
@@ -4569,7 +4972,7 @@ var _Datepicker = class _Datepicker extends Component {
   }
   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(
@@ -4814,7 +5217,7 @@ _Datepicker._template = `
 var Datepicker = _Datepicker;
 
 // src/ts/components/lightbox.ts
-var _defaults13 = {
+var _defaults15 = {
   inDuration: 275,
   outDuration: 200,
   onOpenStart: null,
@@ -4933,7 +5336,7 @@ var Lightbox = class _Lightbox extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults13;
+    return _defaults15;
   }
   /**
    * Initializes instances of Lightbox.
@@ -5099,7 +5502,7 @@ var Lightbox = class _Lightbox extends Component {
 
 // src/ts/components/scrollspy.ts
 var _defaultGetActiveElement = (id) => `a[href="#${id}"]`;
-var _defaults14 = {
+var _defaults16 = {
   scrollOffset: 200,
   activeClass: "active",
   getActiveElement: _defaultGetActiveElement,
@@ -5122,7 +5525,7 @@ var _ScrollSpy = class _ScrollSpy extends Component {
     _ScrollSpy._observer?.observe(this.el);
   }
   static get defaults() {
-    return _defaults14;
+    return _defaults16;
   }
   static init(els, options = {}) {
     return super.init(els, options, _ScrollSpy);
@@ -5244,7 +5647,7 @@ _ScrollSpy._onIntersect = (entries) => {
 var ScrollSpy = _ScrollSpy;
 
 // src/ts/components/navigationDrawer.ts
-var _defaults15 = {
+var _defaults17 = {
   edge: "left",
   draggable: true,
   dragTargetWidth: "10px",
@@ -5387,7 +5790,7 @@ var _NavigationDrawer = class _NavigationDrawer extends Component {
     _NavigationDrawer._sidenavs.push(this);
   }
   static get defaults() {
-    return _defaults15;
+    return _defaults17;
   }
   /**
    * Initializes instances of NavigationDrawer.
@@ -5578,7 +5981,7 @@ _NavigationDrawer._sidenavs = [];
 var NavigationDrawer = _NavigationDrawer;
 
 // src/ts/components/navigationRail.ts
-var _defaults16 = {
+var _defaults18 = {
   onOpenStart: null,
   onOpenEnd: null,
   onCloseStart: null,
@@ -5654,7 +6057,7 @@ var NavigationRail = class _NavigationRail extends Component {
     document.addEventListener("keydown", this._onKeyDown);
   }
   static get defaults() {
-    return _defaults16;
+    return _defaults18;
   }
   static init(els, options = {}) {
     return super.init(els, options, _NavigationRail);
@@ -5684,7 +6087,7 @@ var NavigationRail = class _NavigationRail extends Component {
 };
 
 // src/ts/components/tabs.ts
-var _defaults17 = {
+var _defaults19 = {
   duration: 300,
   onShow: null,
   swipeable: false,
@@ -5760,7 +6163,7 @@ var Tabs = class _Tabs extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults17;
+    return _defaults19;
   }
   /**
    * Initializes instances of Tabs.
@@ -5947,7 +6350,7 @@ var Tabs = class _Tabs extends Component {
 };
 
 // src/ts/components/timepicker.ts
-var _defaults18 = {
+var _defaults20 = {
   dialRadius: 135,
   outerRadius: 105,
   innerRadius: 70,
@@ -6000,12 +6403,6 @@ var _Timepicker = class _Timepicker extends Component {
         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;
@@ -6160,7 +6557,7 @@ var _Timepicker = class _Timepicker extends Component {
     }
   }
   static get defaults() {
-    return _defaults18;
+    return _defaults20;
   }
   /**
    * Initializes instances of Timepicker.
@@ -6510,7 +6907,7 @@ _Timepicker._template = `<div class="timepicker-container">
 var Timepicker = _Timepicker;
 
 // src/ts/components/snackbar.ts
-var _defaults19 = {
+var _defaults21 = {
   text: "",
   action: "",
   onAction: null,
@@ -6557,7 +6954,7 @@ var _Snackbar = class _Snackbar {
     this._setTimer();
   }
   static get defaults() {
-    return _defaults19;
+    return _defaults21;
   }
   static getInstance(el) {
     return el["Expressive_Snackbar"];
@@ -6792,7 +7189,7 @@ _Snackbar._draggedSnackbar = null;
 var Snackbar = _Snackbar;
 
 // src/ts/components/tooltip.ts
-var _defaults20 = {
+var _defaults22 = {
   exitDelay: 200,
   enterDelay: 0,
   text: "",
@@ -6862,7 +7259,7 @@ var Tooltip = class _Tooltip extends Component {
     this._setupEventHandlers();
   }
   static get defaults() {
-    return _defaults20;
+    return _defaults22;
   }
   /**
    * Initializes instances of Tooltip.
@@ -6876,6 +7273,12 @@ var Tooltip = class _Tooltip extends Component {
     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");
     }
@@ -6967,32 +7370,15 @@ var Tooltip = class _Tooltip extends Component {
     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();
@@ -7001,7 +7387,8 @@ var Tooltip = class _Tooltip extends Component {
     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);
@@ -7011,7 +7398,8 @@ var Tooltip = class _Tooltip extends Component {
     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);
@@ -7036,13 +7424,21 @@ var Tooltip = class _Tooltip extends Component {
 
 // 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
@@ -7078,14 +7474,20 @@ var AUTO_INIT_COMPONENTS = {
 };
 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();
@@ -7095,9 +7497,11 @@ Dialogs.Init();
 BottomSheets.Init();
 SideSheets.Init();
 export {
+  AppBar,
   AutoInit,
   Autocomplete,
   BottomSheets,
+  ButtonGroup,
   Cards,
   Carousel,
   CharacterCounter,