@stackoverflow/stacks 1.8.0 → 1.9.1

package/dist/js/stacks.js

@@ -2488,7 +2488,7 @@ Controller.values = {};
 
 
 
-;// CONCATENATED MODULE: ./lib/ts/stacks.ts
+;// CONCATENATED MODULE: ./lib/stacks.ts
 
 class StacksApplication extends Application {
     load(head, ...rest) {
@@ -2515,6 +2515,7 @@ class StacksApplication extends Application {
     }
 }
 StacksApplication._initializing = true;
+
 const application = StacksApplication.start();
 class StacksController extends Controller {
     getElementData(element, key) {
@@ -2571,7 +2572,116 @@ function addController(name, controller) {
     application.register(name, createController(controller));
 }
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-expandable-control.ts
+;// CONCATENATED MODULE: ./lib/components/banner/banner.ts
+
+class BannerController extends StacksController {
+    /**
+     * Toggles the visibility of the banner
+     */
+    toggle(dispatcher = null) {
+        this._toggle(undefined, dispatcher);
+    }
+    /**
+     * Shows the banner
+     */
+    show(dispatcher = null) {
+        this._toggle(true, dispatcher);
+    }
+    /**
+     * Hides the banner
+     */
+    hide(dispatcher = null) {
+        this._toggle(false, dispatcher);
+    }
+    /**
+     * Toggles the visibility of the banner element
+     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
+     */
+    _toggle(show, dispatcher = null) {
+        let toShow = show;
+        const isVisible = this.bannerTarget.getAttribute("aria-hidden") === "false";
+        // if we're letting the class toggle, we need to figure out if the banner is visible manually
+        if (typeof toShow === "undefined") {
+            toShow = !isVisible;
+        }
+        // if the state matches the disired state, return without changing anything
+        if ((toShow && isVisible) || (!toShow && !isVisible)) {
+            return;
+        }
+        const dispatchingElement = this.getDispatcher(dispatcher);
+        // show/hide events trigger before toggling the class
+        const triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
+            dispatcher: this.getDispatcher(dispatchingElement),
+        }, this.bannerTarget);
+        // if this pre-show/hide event was prevented, don't attempt to continue changing the banner state
+        if (triggeredEvent.defaultPrevented) {
+            return;
+        }
+        this.bannerTarget.setAttribute("aria-hidden", toShow ? "false" : "true");
+        if (!toShow) {
+            this.removeBannerOnHide();
+        }
+        this.triggerEvent(toShow ? "shown" : "hidden", {
+            dispatcher: dispatchingElement,
+        }, this.bannerTarget);
+    }
+    /**
+     * Remove the element on hide if the `remove-when-hidden` flag is set
+     */
+    removeBannerOnHide() {
+        if (this.data.get("remove-when-hidden") !== "true") {
+            return;
+        }
+        this.bannerTarget.addEventListener("s-banner:hidden", () => {
+            this.element.remove();
+        }, { once: true });
+    }
+    /**
+     * Determines the correct dispatching element from a potential input
+     * @param dispatcher The event or element to get the dispatcher from
+     */
+    getDispatcher(dispatcher = null) {
+        if (dispatcher instanceof Event) {
+            return dispatcher.target;
+        }
+        else if (dispatcher instanceof Element) {
+            return dispatcher;
+        }
+        else {
+            return this.element;
+        }
+    }
+}
+BannerController.targets = ["banner"];
+
+/**
+ * Helper to manually show an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ */
+function showBanner(element) {
+    toggleBanner(element, true);
+}
+/**
+ * Helper to manually hide an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ */
+function hideBanner(element) {
+    toggleBanner(element, false);
+}
+/**
+ * Helper to manually show an s-banner element via external JS
+ * @param element the element the `data-controller="s-banner"` attribute is on
+ * @param show whether to force show/hide the banner; toggles the banner if left undefined
+ */
+function toggleBanner(element, show) {
+    const controller = application.getControllerForElementAndIdentifier(element, "s-banner");
+    if (!controller) {
+        throw "Unable to get s-banner controller from element";
+    }
+    show ? controller.show() : controller.hide();
+}
+
+;// CONCATENATED MODULE: ./lib/components/expandable/expandable.ts
 
 // Radio buttons only trigger a change event when they're *checked*, but not when
 // they're *unchecked*. Therefore, if we have an active `s-expandable-control` in
@@ -2765,7 +2875,7 @@ class ExpandableController extends StacksController {
     }
 }
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-modal.ts
+;// CONCATENATED MODULE: ./lib/components/modal/modal.ts
 
 class ModalController extends StacksController {
     connect() {
@@ -3019,6 +3129,7 @@ class ModalController extends StacksController {
     }
 }
 ModalController.targets = ["modal", "initialFocus"];
+
 /**
  * Helper to manually show an s-modal element via external JS
  * @param element the element the `data-controller="s-modal"` attribute is on
@@ -3046,832 +3157,466 @@ function toggleModal(element, show) {
     show ? controller.show() : controller.hide();
 }
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-banner.ts
+;// CONCATENATED MODULE: ./lib/components/navigation/navigation.ts
 
-class BannerController extends StacksController {
-    /**
-     * Toggles the visibility of the banner
-     */
-    toggle(dispatcher = null) {
-        this._toggle(undefined, dispatcher);
+class TabListController extends StacksController {
+    connect() {
+        super.connect();
+        this.boundSelectTab = this.selectTab.bind(this);
+        this.boundHandleKeydown = this.handleKeydown.bind(this);
+        for (const tab of this.tabTargets) {
+            tab.addEventListener("click", this.boundSelectTab);
+            tab.addEventListener("keydown", this.boundHandleKeydown);
+        }
+    }
+    disconnect() {
+        super.disconnect();
+        for (const tab of this.tabTargets) {
+            tab.removeEventListener("click", this.boundSelectTab);
+            tab.removeEventListener("keydown", this.boundHandleKeydown);
+        }
     }
     /**
-     * Shows the banner
+     * Gets all tabs within the controller.
      */
-    show(dispatcher = null) {
-        this._toggle(true, dispatcher);
+    get tabTargets() {
+        return Array.from(this.element.querySelectorAll("[role=tab]"));
     }
     /**
-     * Hides the banner
+     * Handles click events on individual tabs, causing them to be selected.
      */
-    hide(dispatcher = null) {
-        this._toggle(false, dispatcher);
+    selectTab(event) {
+        this.switchToTab(event.currentTarget);
     }
     /**
-     * Toggles the visibility of the banner element
-     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
+     * Handles left and right arrow keydown events on individual tabs,
+     * selecting the adjacent tab corresponding to the event.
      */
-    _toggle(show, dispatcher = null) {
-        let toShow = show;
-        const isVisible = this.bannerTarget.getAttribute("aria-hidden") === "false";
-        // if we're letting the class toggle, we need to figure out if the banner is visible manually
-        if (typeof toShow === "undefined") {
-            toShow = !isVisible;
+    handleKeydown(event) {
+        var _a;
+        let tabElement = event.currentTarget;
+        const tabs = this.tabTargets;
+        let tabIndex = tabs.indexOf(tabElement);
+        if (event.key === "ArrowRight") {
+            tabIndex++;
         }
-        // if the state matches the disired state, return without changing anything
-        if ((toShow && isVisible) || (!toShow && !isVisible)) {
-            return;
+        else if (event.key === "ArrowLeft") {
+            tabIndex--;
         }
-        const dispatchingElement = this.getDispatcher(dispatcher);
-        // show/hide events trigger before toggling the class
-        const triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
-            dispatcher: this.getDispatcher(dispatchingElement),
-        }, this.bannerTarget);
-        // if this pre-show/hide event was prevented, don't attempt to continue changing the banner state
-        if (triggeredEvent.defaultPrevented) {
+        else {
             return;
         }
-        this.bannerTarget.setAttribute("aria-hidden", toShow ? "false" : "true");
-        if (!toShow) {
-            this.removeBannerOnHide();
+        // Use circular navigation when users go past the first or last tab.
+        if (tabIndex < 0) {
+            tabIndex = tabs.length - 1;
         }
-        this.triggerEvent(toShow ? "shown" : "hidden", {
-            dispatcher: dispatchingElement,
-        }, this.bannerTarget);
+        if (tabIndex >= tabs.length) {
+            tabIndex = 0;
+        }
+        tabElement = tabs[tabIndex];
+        this.switchToTab(tabElement);
+        // Focus the newly selected tab so it can receive keyboard events.
+        (_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
-     * Remove the element on hide if the `remove-when-hidden` flag is set
+     * Attempts to switch to a new tab, doing nothing if the tab is already selected or
+     * the s-navigation-tablist:select event is prevented.
      */
-    removeBannerOnHide() {
-        if (this.data.get("remove-when-hidden") !== "true") {
+    switchToTab(newTab) {
+        const oldTab = this.selectedTab;
+        if (oldTab === newTab) {
             return;
         }
-        this.bannerTarget.addEventListener("s-banner:hidden", () => {
-            this.element.remove();
-        }, { once: true });
+        if (this.triggerEvent("select", { oldTab, newTab }).defaultPrevented) {
+            return;
+        }
+        this.selectedTab = newTab;
+        this.triggerEvent("selected", { oldTab, newTab });
     }
     /**
-     * Determines the correct dispatching element from a potential input
-     * @param dispatcher The event or element to get the dispatcher from
+     * Returns the currently selected tab or null if no tabs are selected.
      */
-    getDispatcher(dispatcher = null) {
-        if (dispatcher instanceof Event) {
-            return dispatcher.target;
-        }
-        else if (dispatcher instanceof Element) {
-            return dispatcher;
-        }
-        else {
-            return this.element;
+    get selectedTab() {
+        return (this.tabTargets.find((e) => e.getAttribute("aria-selected") === "true") || null);
+    }
+    /**
+     * Switches the tablist to the provided tab, updating the tabs and panels
+     * to reflect the change.
+     * @param selectedTab The tab to select. If `null` is provided or the element
+     * is not a valid tab, all tabs will be unselected.
+     */
+    set selectedTab(selectedTab) {
+        for (const tab of this.tabTargets) {
+            const panelId = tab.getAttribute("aria-controls");
+            const panel = panelId ? document.getElementById(panelId) : null;
+            if (tab === selectedTab) {
+                tab.classList.add("is-selected");
+                tab.setAttribute("aria-selected", "true");
+                tab.removeAttribute("tabindex");
+                panel === null || panel === void 0 ? void 0 : panel.classList.remove("d-none");
+            }
+            else {
+                tab.classList.remove("is-selected");
+                tab.setAttribute("aria-selected", "false");
+                tab.setAttribute("tabindex", "-1");
+                panel === null || panel === void 0 ? void 0 : panel.classList.add("d-none");
+            }
         }
     }
 }
-BannerController.targets = ["banner"];
-/**
- * Helper to manually show an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- */
-function showBanner(element) {
-    toggleBanner(element, true);
-}
-/**
- * Helper to manually hide an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- */
-function hideBanner(element) {
-    toggleBanner(element, false);
+
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
+function getWindow(node) {
+  if (node == null) {
+    return window;
+  }
+
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  return node;
 }
-/**
- * Helper to manually show an s-banner element via external JS
- * @param element the element the `data-controller="s-banner"` attribute is on
- * @param show whether to force show/hide the banner; toggles the banner if left undefined
- */
-function toggleBanner(element, show) {
-    const controller = application.getControllerForElementAndIdentifier(element, "s-banner");
-    if (!controller) {
-        throw "Unable to get s-banner controller from element";
-    }
-    show ? controller.show() : controller.hide();
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js
+
+
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
+
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
 }
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-toast.ts
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
 
-class ToastController extends StacksController {
-    connect() {
-        this.validate();
-    }
-    /**
-     * Disconnects all added event listeners on controller disconnect
-     */
-    disconnect() {
-        this.unbindDocumentEvents();
-    }
-    /**
-     * Toggles the visibility of the toast
-     */
-    toggle(dispatcher = null) {
-        this._toggle(undefined, dispatcher);
-    }
-    /**
-     * Shows the toast
-     */
-    show(dispatcher = null) {
-        this._toggle(true, dispatcher);
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+
+
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/math.js
+var math_max = Math.max;
+var math_min = Math.min;
+var round = Math.round;
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/userAgent.js
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
+
+
+
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
+  var scaleX = 1;
+  var scaleY = 1;
+
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  }
+
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
+  return {
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js
+
+function getWindowScroll(node) {
+  var win = getWindow(node);
+  var scrollLeft = win.pageXOffset;
+  var scrollTop = win.pageYOffset;
+  return {
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js
+function getHTMLElementScroll(element) {
+  return {
+    scrollLeft: element.scrollLeft,
+    scrollTop: element.scrollTop
+  };
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js
+
+
+
+
+function getNodeScroll(node) {
+  if (node === getWindow(node) || !isHTMLElement(node)) {
+    return getWindowScroll(node);
+  } else {
+    return getHTMLElementScroll(node);
+  }
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js
+
+function getDocumentElement(element) {
+  // $FlowFixMe[incompatible-return]: assume body is always available
+  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
+  element.document) || window.document).documentElement;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js
+
+
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  // Popper 1 is broken in this case and never had a bug report so let's assume
+  // it's not an issue. I don't think anyone ever specifies width on <html>
+  // anyway.
+  // Browsers where the left scrollbar doesn't cause an issue report `0` for
+  // this (e.g. Edge 2019, IE11, Safari)
+  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js
+
+function getComputedStyle_getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js
+
+function isScrollParent(element) {
+  // Firefox wants us to check `-x` and `-y` variations as well
+  var _getComputedStyle = getComputedStyle_getComputedStyle(element),
+      overflow = _getComputedStyle.overflow,
+      overflowX = _getComputedStyle.overflowX,
+      overflowY = _getComputedStyle.overflowY;
+
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+}
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js
+
+
+
+
+
+
+
+
+
+function isElementScaled(element) {
+  var rect = element.getBoundingClientRect();
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
+  return scaleX !== 1 || scaleY !== 1;
+} // Returns the composite rect of an element relative to its offsetParent.
+// Composite means it takes into account transforms as well as layout.
+
+
+function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+
+  var isOffsetParentAnElement = isHTMLElement(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var documentElement = getDocumentElement(offsetParent);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
+  var scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  var offsets = {
+    x: 0,
+    y: 0
+  };
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
+    isScrollParent(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
     }
-    /**
-     * Hides the toast
-     */
-    hide(dispatcher = null) {
-        this._toggle(false, dispatcher);
+
+    if (isHTMLElement(offsetParent)) {
+      offsets = getBoundingClientRect(offsetParent, true);
+      offsets.x += offsetParent.clientLeft;
+      offsets.y += offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
     }
-    /**
-     * Validates the toast settings and attempts to set necessary internal variables
-     */
-    validate() {
-        // check for returnElement support
-        const returnElementSelector = this.data.get("return-element");
-        if (returnElementSelector) {
-            this.returnElement = (document.querySelector(returnElementSelector));
-            if (!this.returnElement) {
-                throw ("Unable to find element by return-element selector: " +
-                    returnElementSelector);
-            }
-        }
-    }
-    /**
-     * Toggles the visibility of the toast element
-     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
-     */
-    _toggle(show, dispatcher = null) {
-        let toShow = show;
-        const isVisible = this.toastTarget.getAttribute("aria-hidden") === "false";
-        // if we're letting the class toggle, we need to figure out if the toast is visible manually
-        if (typeof toShow === "undefined") {
-            toShow = !isVisible;
-        }
-        // if the state matches the disired state, return without changing anything
-        if ((toShow && isVisible) || (!toShow && !isVisible)) {
-            return;
-        }
-        const dispatchingElement = this.getDispatcher(dispatcher);
-        // show/hide events trigger before toggling the class
-        const triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
-            returnElement: this.returnElement,
-            dispatcher: this.getDispatcher(dispatchingElement),
-        }, this.toastTarget);
-        // if this pre-show/hide event was prevented, don't attempt to continue changing the toast state
-        if (triggeredEvent.defaultPrevented) {
-            return;
-        }
-        this.returnElement = triggeredEvent.detail.returnElement;
-        this.toastTarget.setAttribute("aria-hidden", toShow ? "false" : "true");
-        if (toShow) {
-            this.bindDocumentEvents();
-            this.hideAfterTimeout();
-            if (this.data.get("prevent-focus-capture") !== "true") {
-                this.focusInsideToast();
-            }
-        }
-        else {
-            this.unbindDocumentEvents();
-            this.focusReturnElement();
-            this.removeToastOnHide();
-            this.clearActiveTimeout();
-        }
-        // check for transitionend support
-        const supportsTransitionEnd = this.toastTarget.ontransitionend !== undefined;
-        // shown/hidden events trigger after toggling the class
-        if (supportsTransitionEnd) {
-            // wait until after the toast finishes transitioning to fire the event
-            this.toastTarget.addEventListener("transitionend", () => {
-                //TODO this is firing waaay to soon?
-                this.triggerEvent(toShow ? "shown" : "hidden", {
-                    dispatcher: dispatchingElement,
-                }, this.toastTarget);
-            }, { once: true });
-        }
-        else {
-            this.triggerEvent(toShow ? "shown" : "hidden", {
-                dispatcher: dispatchingElement,
-            }, this.toastTarget);
-        }
-    }
-    /**
-     * Listens for the s-toast:hidden event and focuses the returnElement when it is fired
-     */
-    focusReturnElement() {
-        if (!this.returnElement) {
-            return;
-        }
-        this.toastTarget.addEventListener("s-toast:hidden", () => {
-            // double check the element still exists when the event is called
-            if (this.returnElement &&
-                document.body.contains(this.returnElement)) {
-                this.returnElement.focus();
-            }
-        }, { once: true });
-    }
-    /**
-     * Remove the element on hide if the `remove-when-hidden` flag is set
-     */
-    removeToastOnHide() {
-        if (this.data.get("remove-when-hidden") !== "true") {
-            return;
-        }
-        this.toastTarget.addEventListener("s-toast:hidden", () => {
-            this.element.remove();
-        }, { once: true });
-    }
-    /**
-     * Hide the element after a delay
-     */
-    hideAfterTimeout() {
-        if (this.data.get("prevent-auto-hide") === "true" ||
-            this.data.get("hide-after-timeout") === "0") {
-            return;
-        }
-        const timeout = parseInt(this.data.get("hide-after-timeout"), 10) || 3000;
-        this.activeTimeout = window.setTimeout(() => this.hide(), timeout);
-    }
-    /**
-     * Cancels the activeTimeout
-     */
-    clearActiveTimeout() {
-        clearTimeout(this.activeTimeout);
-    }
-    /**
-     * Gets all elements within the toast that could receive keyboard focus.
-     */
-    getAllTabbables() {
-        return Array.from(this.toastTarget.querySelectorAll("[href], input, select, textarea, button, [tabindex]")).filter((el) => el.matches(":not([disabled]):not([tabindex='-1'])"));
-    }
-    /**
-     * Returns the first visible element in an array or `undefined` if no elements are visible.
-     */
-    firstVisible(elements) {
-        // https://stackoverflow.com/a/21696585
-        return elements === null || elements === void 0 ? void 0 : elements.find((el) => el.offsetParent !== null);
-    }
-    /**
-     * Attempts to shift keyboard focus into the toast.
-     * If elements with `data-s-toast-target="initialFocus"` are present and visible, one of those will be selected.
-     * Otherwise, the first visible focusable element will receive focus.
-     */
-    focusInsideToast() {
-        this.toastTarget.addEventListener("s-toast:shown", () => {
-            var _a;
-            const initialFocus = (_a = this.firstVisible(this.initialFocusTargets)) !== null && _a !== void 0 ? _a : this.firstVisible(this.getAllTabbables());
-            initialFocus === null || initialFocus === void 0 ? void 0 : initialFocus.focus();
-        }, { once: true });
-    }
-    /**
-     * Binds global events to the document for hiding toasts on user interaction
-     */
-    bindDocumentEvents() {
-        // in order for removeEventListener to remove the right event, this bound function needs a constant reference
-        this._boundClickFn =
-            this._boundClickFn || this.hideOnOutsideClick.bind(this);
-        this._boundKeypressFn =
-            this._boundKeypressFn || this.hideOnEscapePress.bind(this);
-        document.addEventListener("mousedown", this._boundClickFn);
-        document.addEventListener("keyup", this._boundKeypressFn);
-    }
-    /**
-     * Unbinds global events to the document for hiding toasts on user interaction
-     */
-    unbindDocumentEvents() {
-        document.removeEventListener("mousedown", this._boundClickFn);
-        document.removeEventListener("keyup", this._boundKeypressFn);
-    }
-    /**
-     * Forces the toast to hide if a user clicks outside of it or its reference element
-     */
-    hideOnOutsideClick(e) {
-        var _a;
-        const target = e.target;
-        // check if the document was clicked inside either the toggle element or the toast itself
-        // note: .contains also returns true if the node itself matches the target element
-        if (!((_a = this.toastTarget) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
-            document.body.contains(target) &&
-            this.data.get("hide-on-outside-click") !== "false") {
-            this._toggle(false, e);
-        }
-    }
-    /**
-     * Forces the toast to hide if the user presses escape while it, one of its childen, or the reference element are focused
-     */
-    hideOnEscapePress(e) {
-        // if the ESC key (27) wasn't pressed or if no toasts are showing, return
-        if (e.which !== 27 ||
-            this.toastTarget.getAttribute("aria-hidden") === "true") {
-            return;
-        }
-        this._toggle(false, e);
-    }
-    /**
-     * Determines the correct dispatching element from a potential input
-     * @param dispatcher The event or element to get the dispatcher from
-     */
-    getDispatcher(dispatcher = null) {
-        if (dispatcher instanceof Event) {
-            return dispatcher.target;
-        }
-        else if (dispatcher instanceof Element) {
-            return dispatcher;
-        }
-        else {
-            return this.element;
-        }
-    }
-}
-ToastController.targets = ["toast", "initialFocus"];
-/**
- * Helper to manually show an s-toast element via external JS
- * @param element the element the `data-controller="s-toast"` attribute is on
- */
-function showToast(element) {
-    toggleToast(element, true);
-}
-/**
- * Helper to manually hide an s-toast element via external JS
- * @param element the element the `data-controller="s-toast"` attribute is on
- */
-function hideToast(element) {
-    toggleToast(element, false);
+  }
+
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
 }
-/**
- * Helper to manually show an s-toast element via external JS
- * @param element the element the `data-controller="s-toast"` attribute is on
- * @param show whether to force show/hide the toast; toggles the toast if left undefined
- */
-function toggleToast(element, show) {
-    const controller = application.getControllerForElementAndIdentifier(element, "s-toast");
-    if (!controller) {
-        throw "Unable to get s-toast controller from element";
-    }
-    show ? controller.show() : controller.hide();
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js
+ // Returns the layout rect of an element relative to its offsetParent. Layout
+// means it doesn't take into account transforms.
+
+function getLayoutRect(element) {
+  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+  // Fixes https://github.com/popperjs/popper-core/issues/1223
+
+  var width = element.offsetWidth;
+  var height = element.offsetHeight;
+
+  if (Math.abs(clientRect.width - width) <= 1) {
+    width = clientRect.width;
+  }
+
+  if (Math.abs(clientRect.height - height) <= 1) {
+    height = clientRect.height;
+  }
+
+  return {
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    width: width,
+    height: height
+  };
 }
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-navigation-tablist.ts
 
-class TabListController extends StacksController {
-    connect() {
-        super.connect();
-        this.boundSelectTab = this.selectTab.bind(this);
-        this.boundHandleKeydown = this.handleKeydown.bind(this);
-        for (const tab of this.tabTargets) {
-            tab.addEventListener("click", this.boundSelectTab);
-            tab.addEventListener("keydown", this.boundHandleKeydown);
-        }
-    }
-    disconnect() {
-        super.disconnect();
-        for (const tab of this.tabTargets) {
-            tab.removeEventListener("click", this.boundSelectTab);
-            tab.removeEventListener("keydown", this.boundHandleKeydown);
-        }
-    }
-    /**
-     * Gets all tabs within the controller.
-     */
-    get tabTargets() {
-        return Array.from(this.element.querySelectorAll("[role=tab]"));
-    }
-    /**
-     * Handles click events on individual tabs, causing them to be selected.
-     */
-    selectTab(event) {
-        this.switchToTab(event.currentTarget);
-    }
-    /**
-     * Handles left and right arrow keydown events on individual tabs,
-     * selecting the adjacent tab corresponding to the event.
-     */
-    handleKeydown(event) {
-        var _a;
-        let tabElement = event.currentTarget;
-        const tabs = this.tabTargets;
-        let tabIndex = tabs.indexOf(tabElement);
-        if (event.key === "ArrowRight") {
-            tabIndex++;
-        }
-        else if (event.key === "ArrowLeft") {
-            tabIndex--;
-        }
-        else {
-            return;
-        }
-        // Use circular navigation when users go past the first or last tab.
-        if (tabIndex < 0) {
-            tabIndex = tabs.length - 1;
-        }
-        if (tabIndex >= tabs.length) {
-            tabIndex = 0;
-        }
-        tabElement = tabs[tabIndex];
-        this.switchToTab(tabElement);
-        // Focus the newly selected tab so it can receive keyboard events.
-        (_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Attempts to switch to a new tab, doing nothing if the tab is already selected or
-     * the s-navigation-tablist:select event is prevented.
-     */
-    switchToTab(newTab) {
-        const oldTab = this.selectedTab;
-        if (oldTab === newTab) {
-            return;
-        }
-        if (this.triggerEvent("select", { oldTab, newTab }).defaultPrevented) {
-            return;
-        }
-        this.selectedTab = newTab;
-        this.triggerEvent("selected", { oldTab, newTab });
-    }
-    /**
-     * Returns the currently selected tab or null if no tabs are selected.
-     */
-    get selectedTab() {
-        return (this.tabTargets.find((e) => e.getAttribute("aria-selected") === "true") || null);
-    }
-    /**
-     * Switches the tablist to the provided tab, updating the tabs and panels
-     * to reflect the change.
-     * @param selectedTab The tab to select. If `null` is provided or the element
-     * is not a valid tab, all tabs will be unselected.
-     */
-    set selectedTab(selectedTab) {
-        for (const tab of this.tabTargets) {
-            const panelId = tab.getAttribute("aria-controls");
-            const panel = panelId ? document.getElementById(panelId) : null;
-            if (tab === selectedTab) {
-                tab.classList.add("is-selected");
-                tab.setAttribute("aria-selected", "true");
-                tab.removeAttribute("tabindex");
-                panel === null || panel === void 0 ? void 0 : panel.classList.remove("d-none");
-            }
-            else {
-                tab.classList.remove("is-selected");
-                tab.setAttribute("aria-selected", "false");
-                tab.setAttribute("tabindex", "-1");
-                panel === null || panel === void 0 ? void 0 : panel.classList.add("d-none");
-            }
-        }
-    }
-}
 
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
-function getWindow(node) {
-  if (node == null) {
-    return window;
+function getParentNode(element) {
+  if (getNodeName(element) === 'html') {
+    return element;
   }
 
-  if (node.toString() !== '[object Window]') {
-    var ownerDocument = node.ownerDocument;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
+  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[prop-missing]
+    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+    element.parentNode || ( // DOM Element detected
+    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
+    getDocumentElement(element) // fallback
 
-  return node;
+  );
 }
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js
 
 
-function isElement(node) {
-  var OwnElement = getWindow(node).Element;
-  return node instanceof OwnElement || node instanceof Element;
-}
 
-function isHTMLElement(node) {
-  var OwnElement = getWindow(node).HTMLElement;
-  return node instanceof OwnElement || node instanceof HTMLElement;
-}
 
-function isShadowRoot(node) {
-  // IE 11 has no ShadowRoot
-  if (typeof ShadowRoot === 'undefined') {
-    return false;
+function getScrollParent(node) {
+  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
+    // $FlowFixMe[incompatible-return]: assume body is always available
+    return node.ownerDocument.body;
   }
 
-  var OwnElement = getWindow(node).ShadowRoot;
-  return node instanceof OwnElement || node instanceof ShadowRoot;
+  if (isHTMLElement(node) && isScrollParent(node)) {
+    return node;
+  }
+
+  return getScrollParent(getParentNode(node));
 }
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/math.js
-var math_max = Math.max;
-var math_min = Math.min;
-var round = Math.round;
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/userAgent.js
-function getUAString() {
-  var uaData = navigator.userAgentData;
 
-  if (uaData != null && uaData.brands) {
-    return uaData.brands.map(function (item) {
-      return item.brand + "/" + item.version;
-    }).join(' ');
+
+/*
+given a DOM element, return the list of all scroll parents, up the list of ancesors
+until we get to the top window object. This list is what we attach scroll listeners
+to, because if any of these parent elements scroll, we'll need to re-calculate the
+reference element's position.
+*/
+
+function listScrollParents(element, list) {
+  var _element$ownerDocumen;
+
+  if (list === void 0) {
+    list = [];
   }
 
-  return navigator.userAgent;
+  var scrollParent = getScrollParent(element);
+  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
+  var win = getWindow(scrollParent);
+  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+  var updatedList = list.concat(target);
+  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
+  updatedList.concat(listScrollParents(getParentNode(target)));
 }
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js
 
-function isLayoutViewport() {
-  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+function isTableElement(element) {
+  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
 }
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
-
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js
 
 
 
-function getBoundingClientRect(element, includeScale, isFixedStrategy) {
-  if (includeScale === void 0) {
-    includeScale = false;
-  }
 
-  if (isFixedStrategy === void 0) {
-    isFixedStrategy = false;
-  }
 
-  var clientRect = element.getBoundingClientRect();
-  var scaleX = 1;
-  var scaleY = 1;
 
-  if (includeScale && isHTMLElement(element)) {
-    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
-    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
-  }
 
-  var _ref = isElement(element) ? getWindow(element) : window,
-      visualViewport = _ref.visualViewport;
 
-  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
-  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
-  var width = clientRect.width / scaleX;
-  var height = clientRect.height / scaleY;
-  return {
-    width: width,
-    height: height,
-    top: y,
-    right: x + width,
-    bottom: y + height,
-    left: x,
-    x: x,
-    y: y
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js
+function getTrueOffsetParent(element) {
+  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
+  getComputedStyle_getComputedStyle(element).position === 'fixed') {
+    return null;
+  }
 
-function getWindowScroll(node) {
-  var win = getWindow(node);
-  var scrollLeft = win.pageXOffset;
-  var scrollTop = win.pageYOffset;
-  return {
-    scrollLeft: scrollLeft,
-    scrollTop: scrollTop
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js
-function getHTMLElementScroll(element) {
-  return {
-    scrollLeft: element.scrollLeft,
-    scrollTop: element.scrollTop
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js
+  return element.offsetParent;
+} // `.offsetParent` reports `null` for fixed elements, while absolute elements
+// return the containing block
 
 
+function getContainingBlock(element) {
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
 
-
-function getNodeScroll(node) {
-  if (node === getWindow(node) || !isHTMLElement(node)) {
-    return getWindowScroll(node);
-  } else {
-    return getHTMLElementScroll(node);
-  }
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js
-function getNodeName(element) {
-  return element ? (element.nodeName || '').toLowerCase() : null;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js
-
-function getDocumentElement(element) {
-  // $FlowFixMe[incompatible-return]: assume body is always available
-  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
-  element.document) || window.document).documentElement;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js
-
-
-
-function getWindowScrollBarX(element) {
-  // If <html> has a CSS width greater than the viewport, then this will be
-  // incorrect for RTL.
-  // Popper 1 is broken in this case and never had a bug report so let's assume
-  // it's not an issue. I don't think anyone ever specifies width on <html>
-  // anyway.
-  // Browsers where the left scrollbar doesn't cause an issue report `0` for
-  // this (e.g. Edge 2019, IE11, Safari)
-  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js
-
-function getComputedStyle_getComputedStyle(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js
-
-function isScrollParent(element) {
-  // Firefox wants us to check `-x` and `-y` variations as well
-  var _getComputedStyle = getComputedStyle_getComputedStyle(element),
-      overflow = _getComputedStyle.overflow,
-      overflowX = _getComputedStyle.overflowX,
-      overflowY = _getComputedStyle.overflowY;
-
-  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js
-
-
-
-
-
-
-
-
-
-function isElementScaled(element) {
-  var rect = element.getBoundingClientRect();
-  var scaleX = round(rect.width) / element.offsetWidth || 1;
-  var scaleY = round(rect.height) / element.offsetHeight || 1;
-  return scaleX !== 1 || scaleY !== 1;
-} // Returns the composite rect of an element relative to its offsetParent.
-// Composite means it takes into account transforms as well as layout.
-
-
-function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
-  if (isFixed === void 0) {
-    isFixed = false;
-  }
-
-  var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
-  var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
-  var scroll = {
-    scrollLeft: 0,
-    scrollTop: 0
-  };
-  var offsets = {
-    x: 0,
-    y: 0
-  };
-
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
-    isScrollParent(documentElement)) {
-      scroll = getNodeScroll(offsetParent);
-    }
-
-    if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent, true);
-      offsets.x += offsetParent.clientLeft;
-      offsets.y += offsetParent.clientTop;
-    } else if (documentElement) {
-      offsets.x = getWindowScrollBarX(documentElement);
-    }
-  }
-
-  return {
-    x: rect.left + scroll.scrollLeft - offsets.x,
-    y: rect.top + scroll.scrollTop - offsets.y,
-    width: rect.width,
-    height: rect.height
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js
- // Returns the layout rect of an element relative to its offsetParent. Layout
-// means it doesn't take into account transforms.
-
-function getLayoutRect(element) {
-  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
-  // Fixes https://github.com/popperjs/popper-core/issues/1223
-
-  var width = element.offsetWidth;
-  var height = element.offsetHeight;
-
-  if (Math.abs(clientRect.width - width) <= 1) {
-    width = clientRect.width;
-  }
-
-  if (Math.abs(clientRect.height - height) <= 1) {
-    height = clientRect.height;
-  }
-
-  return {
-    x: element.offsetLeft,
-    y: element.offsetTop,
-    width: width,
-    height: height
-  };
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js
-
-
-
-function getParentNode(element) {
-  if (getNodeName(element) === 'html') {
-    return element;
-  }
-
-  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
-    // $FlowFixMe[incompatible-return]
-    // $FlowFixMe[prop-missing]
-    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
-    element.parentNode || ( // DOM Element detected
-    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
-    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
-    getDocumentElement(element) // fallback
-
-  );
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js
-
-
-
-
-function getScrollParent(node) {
-  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
-    // $FlowFixMe[incompatible-return]: assume body is always available
-    return node.ownerDocument.body;
-  }
-
-  if (isHTMLElement(node) && isScrollParent(node)) {
-    return node;
-  }
-
-  return getScrollParent(getParentNode(node));
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js
-
-
-
-
-/*
-given a DOM element, return the list of all scroll parents, up the list of ancesors
-until we get to the top window object. This list is what we attach scroll listeners
-to, because if any of these parent elements scroll, we'll need to re-calculate the
-reference element's position.
-*/
-
-function listScrollParents(element, list) {
-  var _element$ownerDocumen;
-
-  if (list === void 0) {
-    list = [];
-  }
-
-  var scrollParent = getScrollParent(element);
-  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
-  var win = getWindow(scrollParent);
-  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
-  var updatedList = list.concat(target);
-  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
-  updatedList.concat(listScrollParents(getParentNode(target)));
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js
-
-function isTableElement(element) {
-  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
-}
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js
-
-
-
-
-
-
-
-
-function getTrueOffsetParent(element) {
-  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
-  getComputedStyle_getComputedStyle(element).position === 'fixed') {
-    return null;
-  }
-
-  return element.offsetParent;
-} // `.offsetParent` reports `null` for fixed elements, while absolute elements
-// return the containing block
-
-
-function getContainingBlock(element) {
-  var isFirefox = /firefox/i.test(getUAString());
-  var isIE = /Trident/i.test(getUAString());
-
-  if (isIE && isHTMLElement(element)) {
-    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
-    var elementCss = getComputedStyle_getComputedStyle(element);
+  if (isIE && isHTMLElement(element)) {
+    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
+    var elementCss = getComputedStyle_getComputedStyle(element);
 
     if (elementCss.position === 'fixed') {
       return null;
@@ -4420,10 +4165,9 @@ var unsetSides = {
 // Zooming can change the DPR, but it seems to report a value that will
 // cleanly divide the values into the appropriate subpixels.
 
-function roundOffsetsByDPR(_ref) {
+function roundOffsetsByDPR(_ref, win) {
   var x = _ref.x,
       y = _ref.y;
-  var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
     x: round(x * dpr) / dpr || 0,
@@ -4506,7 +4250,7 @@ function mapToStyles(_ref2) {
   var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
     x: x,
     y: y
-  }) : {
+  }, getWindow(popper)) : {
     x: x,
     y: y
   };
@@ -5455,767 +5199,1050 @@ function getSideOffsets(overflow, rect, preventedOffsets) {
     left: overflow.left - rect.width - preventedOffsets.x
   };
 }
-
-function isAnySideFullyClipped(overflow) {
-  return [enums_top, right, bottom, left].some(function (side) {
-    return overflow[side] >= 0;
-  });
+
+function isAnySideFullyClipped(overflow) {
+  return [enums_top, right, bottom, left].some(function (side) {
+    return overflow[side] >= 0;
+  });
+}
+
+function hide(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var preventedOffsets = state.modifiersData.preventOverflow;
+  var referenceOverflow = detectOverflow(state, {
+    elementContext: 'reference'
+  });
+  var popperAltOverflow = detectOverflow(state, {
+    altBoundary: true
+  });
+  var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
+  var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
+  var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
+  var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
+  state.modifiersData[name] = {
+    referenceClippingOffsets: referenceClippingOffsets,
+    popperEscapeOffsets: popperEscapeOffsets,
+    isReferenceHidden: isReferenceHidden,
+    hasPopperEscaped: hasPopperEscaped
+  };
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-reference-hidden': isReferenceHidden,
+    'data-popper-escaped': hasPopperEscaped
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+/* harmony default export */ const modifiers_hide = ({
+  name: 'hide',
+  enabled: true,
+  phase: 'main',
+  requiresIfExists: ['preventOverflow'],
+  fn: hide
+});
+;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/popper.js
+
+
+
+
+
+
+
+
+
+
+var defaultModifiers = [eventListeners, modifiers_popperOffsets, modifiers_computeStyles, modifiers_applyStyles, modifiers_offset, modifiers_flip, modifiers_preventOverflow, modifiers_arrow, modifiers_hide];
+var popper_createPopper = /*#__PURE__*/popperGenerator({
+  defaultModifiers: defaultModifiers
+}); // eslint-disable-next-line import/no-unused-modules
+
+ // eslint-disable-next-line import/no-unused-modules
+
+ // eslint-disable-next-line import/no-unused-modules
+
+
+;// CONCATENATED MODULE: ./lib/components/popover/popover.ts
+
+
+class BasePopoverController extends StacksController {
+    /**
+     * Returns true if the if the popover is currently visible.
+     */
+    get isVisible() {
+        const popoverElement = this.popoverElement;
+        return popoverElement
+            ? popoverElement.classList.contains("is-visible")
+            : false;
+    }
+    /**
+     * Gets whether the element is visible in the browser's viewport.
+     */
+    get isInViewport() {
+        const element = this.popoverElement;
+        if (!this.isVisible || !element) {
+            return false;
+        }
+        // From https://stackoverflow.com/a/5354536.  Theoretically, this could be calculated using Popper's detectOverflow function,
+        // but it's unclear how to access that with our current configuration.
+        const rect = element.getBoundingClientRect();
+        const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+        const viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth);
+        return (rect.bottom > 0 &&
+            rect.top < viewHeight &&
+            rect.right > 0 &&
+            rect.left < viewWidth);
+    }
+    get shouldHideOnOutsideClick() {
+        const hideBehavior = (this.data.get("hide-on-outside-click"));
+        switch (hideBehavior) {
+            case "after-dismissal":
+            case "never":
+                return false;
+            case "if-in-viewport":
+                return this.isInViewport;
+            default:
+                return true;
+        }
+    }
+    /**
+     * Initializes and validates controller variables
+     */
+    connect() {
+        super.connect();
+        this.validate();
+        if (this.isVisible) {
+            // just call initialize here, not show. This keeps already visible popovers from adding/firing document events
+            this.initializePopper();
+        }
+        else if (this.data.get("auto-show") === "true") {
+            this.show(null);
+        }
+        this.data.delete("auto-show");
+    }
+    /**
+     * Cleans up popper.js elements and disconnects all added event listeners
+     */
+    disconnect() {
+        this.hide();
+        if (this.popper) {
+            this.popper.destroy();
+            // eslint-disable-next-line
+            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
+            delete this.popper;
+        }
+        super.disconnect();
+    }
+    /**
+     * Toggles the visibility of the popover
+     */
+    toggle(dispatcher = null) {
+        this.isVisible ? this.hide(dispatcher) : this.show(dispatcher);
+    }
+    /**
+     * Shows the popover if not already visible
+     */
+    show(dispatcher = null) {
+        if (this.isVisible) {
+            return;
+        }
+        const dispatcherElement = this.getDispatcher(dispatcher);
+        if (this.triggerEvent("show", {
+            dispatcher: dispatcherElement,
+        }).defaultPrevented) {
+            return;
+        }
+        if (!this.popper) {
+            this.initializePopper();
+        }
+        this.popoverElement.classList.add("is-visible");
+        // ensure the popper has been positioned correctly
+        this.scheduleUpdate();
+        this.shown(dispatcherElement);
+    }
+    /**
+     * Hides the popover if not already hidden
+     */
+    hide(dispatcher = null) {
+        if (!this.isVisible) {
+            return;
+        }
+        const dispatcherElement = this.getDispatcher(dispatcher);
+        if (this.triggerEvent("hide", {
+            dispatcher: dispatcherElement,
+        }).defaultPrevented) {
+            return;
+        }
+        this.popoverElement.classList.remove("is-visible");
+        if (this.popper) {
+            // completely destroy the popper on hide; this is in line with Popper.js's performance recommendations
+            this.popper.destroy();
+            // eslint-disable-next-line
+            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
+            delete this.popper;
+        }
+        // on first interaction, hide-on-outside-click with value "after-dismissal" reverts to the default behavior
+        if (this.data.get("hide-on-outside-click") ===
+            "after-dismissal") {
+            this.data.delete("hide-on-outside-click");
+        }
+        this.hidden(dispatcherElement);
+    }
+    /**
+     * Binds document events for this popover and fires the shown event
+     */
+    shown(dispatcher = null) {
+        this.bindDocumentEvents();
+        this.triggerEvent("shown", {
+            dispatcher: dispatcher,
+        });
+    }
+    /**
+     * Unbinds document events for this popover and fires the hidden event
+     */
+    hidden(dispatcher = null) {
+        this.unbindDocumentEvents();
+        this.triggerEvent("hidden", {
+            dispatcher: dispatcher,
+        });
+    }
+    /**
+     * Generates the popover if not found during initialization
+     */
+    generatePopover() {
+        return null;
+    }
+    /**
+     * Initializes the Popper for this instance
+     */
+    initializePopper() {
+        this.popper = popper_createPopper(this.referenceElement, this.popoverElement, {
+            placement: this.data.get("placement") || "bottom",
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, 10], // The entire popover should be 10px away from the element
+                    },
+                },
+                {
+                    name: "arrow",
+                    options: {
+                        element: ".s-popover--arrow",
+                    },
+                },
+            ],
+        });
+    }
+    /**
+     * Validates the popover settings and attempts to set necessary internal variables
+     */
+    validate() {
+        const referenceSelector = this.data.get("reference-selector");
+        this.referenceElement = this.element;
+        // if there is an alternative reference selector and that element exists, use it (and throw if it isn't found)
+        if (referenceSelector) {
+            this.referenceElement = (this.element.querySelector(referenceSelector));
+            if (!this.referenceElement) {
+                throw ("Unable to find element by reference selector: " +
+                    referenceSelector);
+            }
+        }
+        const popoverId = this.referenceElement.getAttribute(this.popoverSelectorAttribute);
+        let popoverElement = null;
+        // if the popover is named, attempt to fetch it (and throw an error if it doesn't exist)
+        if (popoverId) {
+            popoverElement = document.getElementById(popoverId);
+            if (!popoverElement) {
+                throw `[${this.popoverSelectorAttribute}="{POPOVER_ID}"] required`;
+            }
+        }
+        // if the popover isn't named, attempt to generate it
+        else {
+            popoverElement = this.generatePopover();
+        }
+        if (!popoverElement) {
+            throw "unable to find or generate popover element";
+        }
+        this.popoverElement = popoverElement;
+    }
+    /**
+     * Determines the correct dispatching element from a potential input
+     * @param dispatcher The event or element to get the dispatcher from
+     */
+    getDispatcher(dispatcher = null) {
+        if (dispatcher instanceof Event) {
+            return dispatcher.target;
+        }
+        else if (dispatcher instanceof Element) {
+            return dispatcher;
+        }
+        else {
+            return this.element;
+        }
+    }
+    /**
+     * Schedules the popover to update on the next animation frame if visible
+     */
+    scheduleUpdate() {
+        if (this.popper && this.isVisible) {
+            void this.popper.update();
+        }
+    }
+}
+class PopoverController extends BasePopoverController {
+    constructor() {
+        super(...arguments);
+        this.popoverSelectorAttribute = "aria-controls";
+    }
+    /**
+     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.shown
+     */
+    shown(dispatcher = null) {
+        this.toggleOptionalClasses(true);
+        this.toggleAccessibilityAttributes(true);
+        super.shown(dispatcher);
+    }
+    /**
+     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.hidden
+     */
+    hidden(dispatcher = null) {
+        this.toggleOptionalClasses(false);
+        this.toggleAccessibilityAttributes(false);
+        super.hidden(dispatcher);
+    }
+    /**
+     * Initializes accessibility attributes in addition to BasePopoverController.connect
+     */
+    connect() {
+        super.connect();
+        this.toggleAccessibilityAttributes();
+    }
+    /**
+     * Binds global events to the document for hiding popovers on user interaction
+     */
+    bindDocumentEvents() {
+        this.boundHideOnOutsideClick =
+            this.boundHideOnOutsideClick || this.hideOnOutsideClick.bind(this);
+        this.boundHideOnEscapePress =
+            this.boundHideOnEscapePress || this.hideOnEscapePress.bind(this);
+        document.addEventListener("mousedown", this.boundHideOnOutsideClick);
+        document.addEventListener("keyup", this.boundHideOnEscapePress);
+    }
+    /**
+     * Unbinds global events to the document for hiding popovers on user interaction
+     */
+    unbindDocumentEvents() {
+        document.removeEventListener("mousedown", this.boundHideOnOutsideClick);
+        document.removeEventListener("keyup", this.boundHideOnEscapePress);
+    }
+    /**
+     * Forces the popover to hide if a user clicks outside of it or its reference element
+     * @param {Event} e - The document click event
+     */
+    hideOnOutsideClick(e) {
+        const target = e.target;
+        // check if the document was clicked inside either the reference element or the popover itself
+        // note: .contains also returns true if the node itself matches the target element
+        if (this.shouldHideOnOutsideClick &&
+            !this.referenceElement.contains(target) &&
+            !this.popoverElement.contains(target) &&
+            document.body.contains(target)) {
+            this.hide(e);
+        }
+    }
+    /**
+     * Forces the popover to hide if the user presses escape while it, one of its childen, or the reference element are focused
+     * @param {Event} e - The document keyup event
+     */
+    hideOnEscapePress(e) {
+        // if the ESC key (27) wasn't pressed or if no popovers are showing, return
+        if (e.which !== 27 || !this.isVisible) {
+            return;
+        }
+        // check if the target was inside the popover element and refocus the triggering element
+        // note: .contains also returns true if the node itself matches the target element
+        if (this.popoverElement.contains(e.target)) {
+            this.referenceElement.focus();
+        }
+        this.hide(e);
+    }
+    /**
+     * Toggles all classes on the originating element based on the `class-toggle` data
+     * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
+     */
+    toggleOptionalClasses(show) {
+        if (!this.data.has("toggle-class")) {
+            return;
+        }
+        const toggleClass = this.data.get("toggle-class") || "";
+        const cl = this.referenceElement.classList;
+        toggleClass.split(/\s+/).forEach(function (cls) {
+            cl.toggle(cls, show);
+        });
+    }
+    /**
+     * Toggles accessibility attributes based on whether the popover is shown or not
+     * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
+     */
+    toggleAccessibilityAttributes(show) {
+        const expandedValue = (show === null || show === void 0 ? void 0 : show.toString()) || this.referenceElement.ariaExpanded || "false";
+        this.referenceElement.ariaExpanded = expandedValue;
+        this.referenceElement.setAttribute("aria-expanded", expandedValue);
+    }
+}
+PopoverController.targets = [];
+
+/**
+ * Helper to manually show an s-popover element via external JS
+ * @param element the element the `data-controller="s-popover"` attribute is on
+ */
+function showPopover(element) {
+    const { isPopover, controller } = getPopover(element);
+    if (controller) {
+        controller.show();
+    }
+    else if (isPopover) {
+        element.setAttribute("data-s-popover-auto-show", "true");
+    }
+    else {
+        throw `element does not have data-controller="s-popover"`;
+    }
+}
+/**
+ * Helper to manually hide an s-popover element via external JS
+ * @param element the element the `data-controller="s-popover"` attribute is on
+ */
+function hidePopover(element) {
+    const { isPopover, controller, popover } = getPopover(element);
+    if (controller) {
+        controller.hide();
+    }
+    else if (isPopover) {
+        element.removeAttribute("data-s-popover-auto-show");
+        if (popover) {
+            popover.classList.remove("is-visible");
+        }
+    }
+    else {
+        throw `element does not have data-controller="s-popover"`;
+    }
+}
+/**
+ * Attaches a popover to an element and performs additional configuration.
+ * @param element the element that will receive the `data-controller="s-popover"` attribute.
+ * @param popover an element with the `.s-popover` class or HTML string containing a single element with the `.s-popover` class.
+ *                If the popover does not have a parent element, it will be inserted as a immediately after the reference element.
+ * @param options an optional collection of options to use when configuring the popover.
+ */
+function attachPopover(element, popover, options) {
+    const { referenceElement, popover: existingPopover } = getPopover(element);
+    if (existingPopover) {
+        throw `element already has popover with id="${existingPopover.id}"`;
+    }
+    if (!referenceElement) {
+        throw `element has invalid data-s-popover-reference-selector attribute`;
+    }
+    if (typeof popover === "string") {
+        // eslint-disable-next-line no-unsanitized/method
+        const elements = document
+            .createRange()
+            .createContextualFragment(popover).children;
+        if (elements.length !== 1) {
+            throw "popover should contain a single element";
+        }
+        popover = elements[0];
+    }
+    const existingId = referenceElement.getAttribute("aria-controls");
+    let popoverId = popover.id;
+    if (!popover.classList.contains("s-popover")) {
+        throw `popover should have the "s-popover" class but had class="${popover.className}"`;
+    }
+    if (existingId && existingId !== popoverId) {
+        throw `element has aria-controls="${existingId}" but popover has id="${popoverId}"`;
+    }
+    if (!popoverId) {
+        popoverId =
+            "--stacks-s-popover-" + Math.random().toString(36).substring(2, 10);
+        popover.id = popoverId;
+    }
+    if (!existingId) {
+        referenceElement.setAttribute("aria-controls", popoverId);
+    }
+    if (!popover.parentElement && element.parentElement) {
+        referenceElement.insertAdjacentElement("afterend", popover);
+    }
+    toggleController(element, "s-popover", true);
+    if (options) {
+        if (options.toggleOnClick) {
+            referenceElement.setAttribute("data-action", "click->s-popover#toggle");
+        }
+        if (options.placement) {
+            element.setAttribute("data-s-popover-placement", options.placement);
+        }
+        if (options.autoShow) {
+            element.setAttribute("data-s-popover-auto-show", "true");
+        }
+    }
+}
+/**
+ * Removes the popover controller from an element and removes the popover from the DOM.
+ * @param element the element that has the `data-controller="s-popover"` attribute.
+ * @returns The popover that was attached to the element.
+ */
+function detachPopover(element) {
+    const { isPopover, controller, referenceElement, popover } = getPopover(element);
+    // Hide the popover so its events fire.
+    controller === null || controller === void 0 ? void 0 : controller.hide();
+    // Remove the popover if it exists
+    popover === null || popover === void 0 ? void 0 : popover.remove();
+    // Remove the popover controller and the aria-controls attributes.
+    if (isPopover) {
+        toggleController(element, "s-popover", false);
+        if (referenceElement) {
+            referenceElement.removeAttribute("aria-controls");
+        }
+    }
+    return popover;
+}
+/**
+ * Gets the current state of an element that may be or is intended to be an s-popover controller
+ * so it can be configured either directly or via the DOM.
+ * @param element An element that may have `data-controller="s-popover"`.
+ */
+function getPopover(element) {
+    var _a;
+    const isPopover = ((_a = element.getAttribute("data-controller")) === null || _a === void 0 ? void 0 : _a.includes("s-popover")) || false;
+    const controller = application.getControllerForElementAndIdentifier(element, "s-popover");
+    const referenceSelector = element.getAttribute("data-s-popover-reference-selector");
+    const referenceElement = referenceSelector
+        ? element.querySelector(referenceSelector)
+        : element;
+    const popoverId = referenceElement
+        ? referenceElement.getAttribute("aria-controls")
+        : null;
+    const popover = popoverId ? document.getElementById(popoverId) : null;
+    return { isPopover, controller, referenceElement, popover };
+}
+/**
+ * Adds or removes the controller from an element's [data-controller] attribute without altering existing entries
+ * @param el The element to alter
+ * @param controllerName The name of the controller to add/remove
+ * @param include Whether to add the controllerName value
+ */
+function toggleController(el, controllerName, include) {
+    var _a;
+    const controllers = new Set((_a = el.getAttribute("data-controller")) === null || _a === void 0 ? void 0 : _a.split(/\s+/));
+    if (include) {
+        controllers.add(controllerName);
+    }
+    else {
+        controllers.delete(controllerName);
+    }
+    el.setAttribute("data-controller", Array.from(controllers).join(" "));
 }
 
-function hide(_ref) {
-  var state = _ref.state,
-      name = _ref.name;
-  var referenceRect = state.rects.reference;
-  var popperRect = state.rects.popper;
-  var preventedOffsets = state.modifiersData.preventOverflow;
-  var referenceOverflow = detectOverflow(state, {
-    elementContext: 'reference'
-  });
-  var popperAltOverflow = detectOverflow(state, {
-    altBoundary: true
-  });
-  var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
-  var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
-  var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
-  var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
-  state.modifiersData[name] = {
-    referenceClippingOffsets: referenceClippingOffsets,
-    popperEscapeOffsets: popperEscapeOffsets,
-    isReferenceHidden: isReferenceHidden,
-    hasPopperEscaped: hasPopperEscaped
-  };
-  state.attributes.popper = Object.assign({}, state.attributes.popper, {
-    'data-popper-reference-hidden': isReferenceHidden,
-    'data-popper-escaped': hasPopperEscaped
-  });
-} // eslint-disable-next-line import/no-unused-modules
-
-
-/* harmony default export */ const modifiers_hide = ({
-  name: 'hide',
-  enabled: true,
-  phase: 'main',
-  requiresIfExists: ['preventOverflow'],
-  fn: hide
-});
-;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/popper.js
-
-
-
-
-
-
-
-
-
-
-var defaultModifiers = [eventListeners, modifiers_popperOffsets, modifiers_computeStyles, modifiers_applyStyles, modifiers_offset, modifiers_flip, modifiers_preventOverflow, modifiers_arrow, modifiers_hide];
-var popper_createPopper = /*#__PURE__*/popperGenerator({
-  defaultModifiers: defaultModifiers
-}); // eslint-disable-next-line import/no-unused-modules
-
- // eslint-disable-next-line import/no-unused-modules
-
- // eslint-disable-next-line import/no-unused-modules
-
-
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-popover.ts
-
+;// CONCATENATED MODULE: ./lib/components/table/table.ts
 
-class BasePopoverController extends StacksController {
-    /**
-     * Returns true if the if the popover is currently visible.
-     */
-    get isVisible() {
-        const popoverElement = this.popoverElement;
-        return popoverElement
-            ? popoverElement.classList.contains("is-visible")
-            : false;
+/**
+ * The string values of these enumerations should correspond with `aria-sort` valid values.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort#values
+ */
+var SortOrder;
+(function (SortOrder) {
+    SortOrder["Ascending"] = "ascending";
+    SortOrder["Descending"] = "descending";
+    SortOrder["None"] = "none";
+})(SortOrder || (SortOrder = {}));
+class TableController extends StacksController {
+    constructor() {
+        super(...arguments);
+        this.updateSortedColumnStyles = (targetColumnHeader, direction) => {
+            // Loop through all sortable columns and remove their sorting direction
+            // (if any), and only leave/set a sorting on `targetColumnHeader`.
+            this.columnTargets.forEach((header) => {
+                const isCurrent = header === targetColumnHeader;
+                const classSuffix = isCurrent
+                    ? direction === SortOrder.Ascending
+                        ? "asc"
+                        : "desc"
+                    : SortOrder.None;
+                header.classList.toggle("is-sorted", isCurrent && direction !== SortOrder.None);
+                header.querySelectorAll(".js-sorting-indicator").forEach((icon) => {
+                    icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + classSuffix));
+                });
+                if (isCurrent) {
+                    header.setAttribute("aria-sort", direction);
+                }
+                else {
+                    header.removeAttribute("aria-sort");
+                }
+            });
+        };
     }
-    /**
-     * Gets whether the element is visible in the browser's viewport.
-     */
-    get isInViewport() {
-        const element = this.popoverElement;
-        if (!this.isVisible || !element) {
-            return false;
+    sort(evt) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const controller = this;
+        const sortTriggerEl = evt.currentTarget;
+        // TODO: support *only* button as trigger in next major release
+        const triggerIsButton = sortTriggerEl instanceof HTMLButtonElement;
+        // the below conditional is here for backward compatibility with the old API
+        // where we did not advise buttons as sortable column head triggers
+        const colHead = (triggerIsButton ? sortTriggerEl.parentElement : sortTriggerEl);
+        const table = this.element;
+        const tbody = table.tBodies[0];
+        // the column slot number of the clicked header
+        const colno = getCellSlot(colHead);
+        if (colno < 0) {
+            // this shouldn't happen if the clicked element is actually a column head
+            return;
         }
-        // From https://stackoverflow.com/a/5354536.  Theoretically, this could be calculated using Popper's detectOverflow function,
-        // but it's unclear how to access that with our current configuration.
-        const rect = element.getBoundingClientRect();
-        const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
-        const viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth);
-        return (rect.bottom > 0 &&
-            rect.top < viewHeight &&
-            rect.right > 0 &&
-            rect.left < viewWidth);
+        // an index of the <tbody>, so we can find out for each row which <td> element is
+        // in the same column slot as the header
+        const slotIndex = buildIndex(tbody);
+        // the default behavior when clicking a header is to sort by this column in ascending
+        // direction, *unless* it is already sorted that way
+        const direction = colHead.getAttribute("aria-sort") === SortOrder.Ascending ? -1 : 1;
+        const rows = Array.from(table.tBodies[0].rows);
+        // if this is still false after traversing the data, that means all values are integers (or empty)
+        // and thus we'll sort numerically.
+        let anyNonInt = false;
+        // data will be a list of tuples [value, rowNum], where value is what we're sorting by
+        const data = [];
+        let firstBottomRow;
+        rows.forEach(function (row, index) {
+            var _a, _b;
+            const force = controller.getElementData(row, "sort-to");
+            if (force === "top") {
+                return; // rows not added to the list will automatically end up at the top
+            }
+            else if (force === "bottom") {
+                if (!firstBottomRow) {
+                    firstBottomRow = row;
+                }
+                return;
+            }
+            const cell = slotIndex[index][colno];
+            if (!cell) {
+                data.push(["", index]);
+                return;
+            }
+            // unless the to-be-sorted-by value is explicitly provided on the element via this attribute,
+            // the value we're using is the cell's text, trimmed of any whitespace
+            const explicit = controller.getElementData(cell, "sort-val");
+            const d = (_b = explicit !== null && explicit !== void 0 ? explicit : (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+            if (d !== "" && `${parseInt(d, 10)}` !== d) {
+                anyNonInt = true;
+            }
+            data.push([d, index]);
+        });
+        // If all values were integers (or empty cells), sort numerically, with empty cells treated as
+        // having the lowest possible value (i.e. sorted to the top if ascending, bottom if descending)
+        if (!anyNonInt) {
+            data.forEach(function (tuple) {
+                tuple[0] =
+                    tuple[0] === ""
+                        ? Number.MIN_VALUE
+                        : parseInt(tuple[0], 10);
+            });
+        }
+        // We don't sort an array of <tr>, but instead an arrays of row *numbers*, because this way we
+        // can enforce stable sorting, i.e. rows that compare equal are guaranteed to remain in the same
+        // order (the JS standard does not gurantee this for sort()).
+        data.sort(function (a, b) {
+            // first compare the values (a[0])
+            if (a[0] > b[0]) {
+                return 1 * direction;
+            }
+            else if (a[0] < b[0]) {
+                return -1 * direction;
+            }
+            else {
+                // if the values are equal, compare the row numbers (a[1]) to guarantee stable sorting
+                // (note that this comparison is independent of the sorting direction)
+                return a[1] > b[1] ? 1 : -1;
+            }
+        });
+        // this is the actual reordering of the table rows
+        data.forEach(([_, rowIndex]) => {
+            var _a;
+            const row = rows[rowIndex];
+            (_a = row.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(row);
+            if (firstBottomRow) {
+                tbody.insertBefore(row, firstBottomRow);
+            }
+            else {
+                tbody.appendChild(row);
+            }
+        });
+        // update the UI and set the `data-sort-direction` attribute if appropriate, so that the next click
+        // will cause sorting in descending direction
+        this.updateSortedColumnStyles(colHead, direction === 1 ? SortOrder.Ascending : SortOrder.Descending);
+    }
+}
+TableController.targets = ["column"];
+
+/**
+ * @internal This function is exported for testing purposes but is not a part of our public API
+ *
+ * @param section
+ */
+function buildIndex(section) {
+    const result = buildIndexOrGetCellSlot(section);
+    if (!Array.isArray(result)) {
+        throw "shouldn't happen";
     }
-    get shouldHideOnOutsideClick() {
-        const hideBehavior = (this.data.get("hide-on-outside-click"));
-        switch (hideBehavior) {
-            case "after-dismissal":
-            case "never":
-                return false;
-            case "if-in-viewport":
-                return this.isInViewport;
-            default:
-                return true;
+    return result;
+}
+/**
+ * @internal This function is exported for testing purposes but is not a part of our public API
+ *
+ * @param cell
+ */
+function getCellSlot(cell) {
+    var _a;
+    const tableElement = (_a = cell.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!(tableElement instanceof HTMLTableSectionElement)) {
+        throw "invalid table";
+    }
+    const result = buildIndexOrGetCellSlot(tableElement, cell);
+    if (typeof result !== "number") {
+        throw "shouldn't happen";
+    }
+    return result;
+}
+/**
+ * Just because a <td> is the 4th *child* of its <tr> doesn't mean it belongs to the 4th *column*
+ * of the table. Previous cells may have a colspan; cells in previous rows may have a rowspan.
+ * Because we need to know which header cells and data cells belong together, we have to 1) find out
+ * which column number (or "slot" as we call it here) the header cell has, and 2) for each row find
+ * out which <td> cell corresponds to this slot (because those are the rows we're sorting by).
+ *
+ * That's what the following function does. If the second argument is not given, it returns an index
+ * of the table, which is an array of arrays. Each of the sub-arrays corresponds to a table row. The
+ * indices of the sub-array correspond to column slots; the values are the actual table cell elements.
+ * For example index[4][3] is the <td> or <th> in row 4, column 3 of the table section (<tbody> or <thead>).
+ * Note that this element is not necessarily even in the 4th (zero-based) <tr> -- if it has a rowSpan > 1,
+ * it may also be in a previous <tr>.
+ *
+ * If the second argument is given, it's a <td> or <th> that we're trying to find, and the algorithm
+ * stops as soon as it has found it and the function returns its slot number.
+ */
+function buildIndexOrGetCellSlot(section, findCell) {
+    const index = [];
+    let curRow = section.children[0];
+    // the elements of these two arrays are synchronized; the first array contains table cell elements,
+    // the second one contains a number that indicates for how many more rows this elements will
+    // exist (i.e. the value is initially one less than the cell's rowspan, and will be decreased for each row)
+    const growing = [];
+    const growingRowsLeft = [];
+    // continue while we have actual <tr>'s left *or* we still have rowspan'ed elements that aren't done
+    while (curRow || growingRowsLeft.some((e) => e !== 0)) {
+        const curIndexRow = [];
+        index.push(curIndexRow);
+        let curSlot = 0;
+        if (curRow) {
+            for (let curCellIdx = 0; curCellIdx < curRow.children.length; curCellIdx++) {
+                while (growingRowsLeft[curSlot]) {
+                    growingRowsLeft[curSlot]--;
+                    curIndexRow[curSlot] = growing[curSlot];
+                    curSlot++;
+                }
+                const cell = curRow.children[curCellIdx];
+                if (!(cell instanceof HTMLTableCellElement)) {
+                    throw "invalid table";
+                }
+                if (getComputedStyle(cell).display === "none") {
+                    continue;
+                }
+                if (cell === findCell) {
+                    return curSlot;
+                }
+                const nextFreeSlot = curSlot + cell.colSpan;
+                for (; curSlot < nextFreeSlot; curSlot++) {
+                    growingRowsLeft[curSlot] = cell.rowSpan - 1; // if any of these is already growing, the table is broken -- no guarantees of anything
+                    growing[curSlot] = cell;
+                    curIndexRow[curSlot] = cell;
+                }
+            }
+        }
+        while (curSlot < growing.length) {
+            if (growingRowsLeft[curSlot]) {
+                growingRowsLeft[curSlot]--;
+                curIndexRow[curSlot] = growing[curSlot];
+            }
+            curSlot++;
+        }
+        if (curRow) {
+            curRow = curRow.nextElementSibling;
         }
     }
-    /**
-     * Initializes and validates controller variables
-     */
+    // if findCell was given, but we end up here, that means it isn't in this section
+    return findCell ? -1 : index;
+}
+
+;// CONCATENATED MODULE: ./lib/components/toast/toast.ts
+
+class ToastController extends StacksController {
     connect() {
-        super.connect();
         this.validate();
-        if (this.isVisible) {
-            // just call initialize here, not show. This keeps already visible popovers from adding/firing document events
-            this.initializePopper();
-        }
-        else if (this.data.get("auto-show") === "true") {
-            this.show(null);
-        }
-        this.data.delete("auto-show");
     }
     /**
-     * Cleans up popper.js elements and disconnects all added event listeners
+     * Disconnects all added event listeners on controller disconnect
      */
     disconnect() {
-        this.hide();
-        if (this.popper) {
-            this.popper.destroy();
-            // eslint-disable-next-line
-            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
-            delete this.popper;
-        }
-        super.disconnect();
+        this.unbindDocumentEvents();
     }
     /**
-     * Toggles the visibility of the popover
+     * Toggles the visibility of the toast
      */
     toggle(dispatcher = null) {
-        this.isVisible ? this.hide(dispatcher) : this.show(dispatcher);
+        this._toggle(undefined, dispatcher);
     }
     /**
-     * Shows the popover if not already visible
+     * Shows the toast
      */
     show(dispatcher = null) {
-        if (this.isVisible) {
-            return;
-        }
-        const dispatcherElement = this.getDispatcher(dispatcher);
-        if (this.triggerEvent("show", {
-            dispatcher: dispatcherElement,
-        }).defaultPrevented) {
-            return;
-        }
-        if (!this.popper) {
-            this.initializePopper();
-        }
-        this.popoverElement.classList.add("is-visible");
-        // ensure the popper has been positioned correctly
-        this.scheduleUpdate();
-        this.shown(dispatcherElement);
+        this._toggle(true, dispatcher);
     }
     /**
-     * Hides the popover if not already hidden
+     * Hides the toast
      */
     hide(dispatcher = null) {
-        if (!this.isVisible) {
-            return;
-        }
-        const dispatcherElement = this.getDispatcher(dispatcher);
-        if (this.triggerEvent("hide", {
-            dispatcher: dispatcherElement,
-        }).defaultPrevented) {
-            return;
-        }
-        this.popoverElement.classList.remove("is-visible");
-        if (this.popper) {
-            // completely destroy the popper on hide; this is in line with Popper.js's performance recommendations
-            this.popper.destroy();
-            // eslint-disable-next-line
-            // @ts-ignore The operand of a 'delete' operator must be optional .ts(2790)
-            delete this.popper;
-        }
-        // on first interaction, hide-on-outside-click with value "after-dismissal" reverts to the default behavior
-        if (this.data.get("hide-on-outside-click") ===
-            "after-dismissal") {
-            this.data.delete("hide-on-outside-click");
-        }
-        this.hidden(dispatcherElement);
-    }
-    /**
-     * Binds document events for this popover and fires the shown event
-     */
-    shown(dispatcher = null) {
-        this.bindDocumentEvents();
-        this.triggerEvent("shown", {
-            dispatcher: dispatcher,
-        });
-    }
-    /**
-     * Unbinds document events for this popover and fires the hidden event
-     */
-    hidden(dispatcher = null) {
-        this.unbindDocumentEvents();
-        this.triggerEvent("hidden", {
-            dispatcher: dispatcher,
-        });
-    }
-    /**
-     * Generates the popover if not found during initialization
-     */
-    generatePopover() {
-        return null;
+        this._toggle(false, dispatcher);
     }
     /**
-     * Initializes the Popper for this instance
+     * Validates the toast settings and attempts to set necessary internal variables
      */
-    initializePopper() {
-        this.popper = popper_createPopper(this.referenceElement, this.popoverElement, {
-            placement: this.data.get("placement") || "bottom",
-            modifiers: [
-                {
-                    name: "offset",
-                    options: {
-                        offset: [0, 10], // The entire popover should be 10px away from the element
-                    },
-                },
-                {
-                    name: "arrow",
-                    options: {
-                        element: ".s-popover--arrow",
-                    },
-                },
-            ],
-        });
+    validate() {
+        // check for returnElement support
+        const returnElementSelector = this.data.get("return-element");
+        if (returnElementSelector) {
+            this.returnElement = (document.querySelector(returnElementSelector));
+            if (!this.returnElement) {
+                throw ("Unable to find element by return-element selector: " +
+                    returnElementSelector);
+            }
+        }
     }
     /**
-     * Validates the popover settings and attempts to set necessary internal variables
+     * Toggles the visibility of the toast element
+     * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
      */
-    validate() {
-        const referenceSelector = this.data.get("reference-selector");
-        this.referenceElement = this.element;
-        // if there is an alternative reference selector and that element exists, use it (and throw if it isn't found)
-        if (referenceSelector) {
-            this.referenceElement = (this.element.querySelector(referenceSelector));
-            if (!this.referenceElement) {
-                throw ("Unable to find element by reference selector: " +
-                    referenceSelector);
-            }
+    _toggle(show, dispatcher = null) {
+        let toShow = show;
+        const isVisible = this.toastTarget.getAttribute("aria-hidden") === "false";
+        // if we're letting the class toggle, we need to figure out if the toast is visible manually
+        if (typeof toShow === "undefined") {
+            toShow = !isVisible;
         }
-        const popoverId = this.referenceElement.getAttribute(this.popoverSelectorAttribute);
-        let popoverElement = null;
-        // if the popover is named, attempt to fetch it (and throw an error if it doesn't exist)
-        if (popoverId) {
-            popoverElement = document.getElementById(popoverId);
-            if (!popoverElement) {
-                throw `[${this.popoverSelectorAttribute}="{POPOVER_ID}"] required`;
+        // if the state matches the disired state, return without changing anything
+        if ((toShow && isVisible) || (!toShow && !isVisible)) {
+            return;
+        }
+        const dispatchingElement = this.getDispatcher(dispatcher);
+        // show/hide events trigger before toggling the class
+        const triggeredEvent = this.triggerEvent(toShow ? "show" : "hide", {
+            returnElement: this.returnElement,
+            dispatcher: this.getDispatcher(dispatchingElement),
+        }, this.toastTarget);
+        // if this pre-show/hide event was prevented, don't attempt to continue changing the toast state
+        if (triggeredEvent.defaultPrevented) {
+            return;
+        }
+        this.returnElement = triggeredEvent.detail.returnElement;
+        this.toastTarget.setAttribute("aria-hidden", toShow ? "false" : "true");
+        if (toShow) {
+            this.bindDocumentEvents();
+            this.hideAfterTimeout();
+            if (this.data.get("prevent-focus-capture") !== "true") {
+                this.focusInsideToast();
             }
         }
-        // if the popover isn't named, attempt to generate it
         else {
-            popoverElement = this.generatePopover();
-        }
-        if (!popoverElement) {
-            throw "unable to find or generate popover element";
+            this.unbindDocumentEvents();
+            this.focusReturnElement();
+            this.removeToastOnHide();
+            this.clearActiveTimeout();
+        }
+        // check for transitionend support
+        const supportsTransitionEnd = this.toastTarget.ontransitionend !== undefined;
+        // shown/hidden events trigger after toggling the class
+        if (supportsTransitionEnd) {
+            // wait until after the toast finishes transitioning to fire the event
+            this.toastTarget.addEventListener("transitionend", () => {
+                //TODO this is firing waaay to soon?
+                this.triggerEvent(toShow ? "shown" : "hidden", {
+                    dispatcher: dispatchingElement,
+                }, this.toastTarget);
+            }, { once: true });
+        }
+        else {
+            this.triggerEvent(toShow ? "shown" : "hidden", {
+                dispatcher: dispatchingElement,
+            }, this.toastTarget);
         }
-        this.popoverElement = popoverElement;
     }
     /**
-     * Determines the correct dispatching element from a potential input
-     * @param dispatcher The event or element to get the dispatcher from
+     * Listens for the s-toast:hidden event and focuses the returnElement when it is fired
      */
-    getDispatcher(dispatcher = null) {
-        if (dispatcher instanceof Event) {
-            return dispatcher.target;
-        }
-        else if (dispatcher instanceof Element) {
-            return dispatcher;
+    focusReturnElement() {
+        if (!this.returnElement) {
+            return;
         }
-        else {
-            return this.element;
+        this.toastTarget.addEventListener("s-toast:hidden", () => {
+            // double check the element still exists when the event is called
+            if (this.returnElement &&
+                document.body.contains(this.returnElement)) {
+                this.returnElement.focus();
+            }
+        }, { once: true });
+    }
+    /**
+     * Remove the element on hide if the `remove-when-hidden` flag is set
+     */
+    removeToastOnHide() {
+        if (this.data.get("remove-when-hidden") !== "true") {
+            return;
         }
+        this.toastTarget.addEventListener("s-toast:hidden", () => {
+            this.element.remove();
+        }, { once: true });
     }
     /**
-     * Schedules the popover to update on the next animation frame if visible
+     * Hide the element after a delay
      */
-    scheduleUpdate() {
-        if (this.popper && this.isVisible) {
-            void this.popper.update();
+    hideAfterTimeout() {
+        if (this.data.get("prevent-auto-hide") === "true" ||
+            this.data.get("hide-after-timeout") === "0") {
+            return;
         }
+        const timeout = parseInt(this.data.get("hide-after-timeout"), 10) || 3000;
+        this.activeTimeout = window.setTimeout(() => this.hide(), timeout);
     }
-}
-class PopoverController extends BasePopoverController {
-    constructor() {
-        super(...arguments);
-        this.popoverSelectorAttribute = "aria-controls";
+    /**
+     * Cancels the activeTimeout
+     */
+    clearActiveTimeout() {
+        clearTimeout(this.activeTimeout);
     }
     /**
-     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.shown
+     * Gets all elements within the toast that could receive keyboard focus.
      */
-    shown(dispatcher = null) {
-        this.toggleOptionalClasses(true);
-        this.toggleAccessibilityAttributes(true);
-        super.shown(dispatcher);
+    getAllTabbables() {
+        return Array.from(this.toastTarget.querySelectorAll("[href], input, select, textarea, button, [tabindex]")).filter((el) => el.matches(":not([disabled]):not([tabindex='-1'])"));
     }
     /**
-     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.hidden
+     * Returns the first visible element in an array or `undefined` if no elements are visible.
      */
-    hidden(dispatcher = null) {
-        this.toggleOptionalClasses(false);
-        this.toggleAccessibilityAttributes(false);
-        super.hidden(dispatcher);
+    firstVisible(elements) {
+        // https://stackoverflow.com/a/21696585
+        return elements === null || elements === void 0 ? void 0 : elements.find((el) => el.offsetParent !== null);
     }
     /**
-     * Initializes accessibility attributes in addition to BasePopoverController.connect
+     * Attempts to shift keyboard focus into the toast.
+     * If elements with `data-s-toast-target="initialFocus"` are present and visible, one of those will be selected.
+     * Otherwise, the first visible focusable element will receive focus.
      */
-    connect() {
-        super.connect();
-        this.toggleAccessibilityAttributes();
+    focusInsideToast() {
+        this.toastTarget.addEventListener("s-toast:shown", () => {
+            var _a;
+            const initialFocus = (_a = this.firstVisible(this.initialFocusTargets)) !== null && _a !== void 0 ? _a : this.firstVisible(this.getAllTabbables());
+            initialFocus === null || initialFocus === void 0 ? void 0 : initialFocus.focus();
+        }, { once: true });
     }
     /**
-     * Binds global events to the document for hiding popovers on user interaction
+     * Binds global events to the document for hiding toasts on user interaction
      */
     bindDocumentEvents() {
-        this.boundHideOnOutsideClick =
-            this.boundHideOnOutsideClick || this.hideOnOutsideClick.bind(this);
-        this.boundHideOnEscapePress =
-            this.boundHideOnEscapePress || this.hideOnEscapePress.bind(this);
-        document.addEventListener("mousedown", this.boundHideOnOutsideClick);
-        document.addEventListener("keyup", this.boundHideOnEscapePress);
+        // in order for removeEventListener to remove the right event, this bound function needs a constant reference
+        this._boundClickFn =
+            this._boundClickFn || this.hideOnOutsideClick.bind(this);
+        this._boundKeypressFn =
+            this._boundKeypressFn || this.hideOnEscapePress.bind(this);
+        document.addEventListener("mousedown", this._boundClickFn);
+        document.addEventListener("keyup", this._boundKeypressFn);
     }
     /**
-     * Unbinds global events to the document for hiding popovers on user interaction
+     * Unbinds global events to the document for hiding toasts on user interaction
      */
     unbindDocumentEvents() {
-        document.removeEventListener("mousedown", this.boundHideOnOutsideClick);
-        document.removeEventListener("keyup", this.boundHideOnEscapePress);
+        document.removeEventListener("mousedown", this._boundClickFn);
+        document.removeEventListener("keyup", this._boundKeypressFn);
     }
     /**
-     * Forces the popover to hide if a user clicks outside of it or its reference element
-     * @param {Event} e - The document click event
+     * Forces the toast to hide if a user clicks outside of it or its reference element
      */
     hideOnOutsideClick(e) {
+        var _a;
         const target = e.target;
-        // check if the document was clicked inside either the reference element or the popover itself
+        // check if the document was clicked inside either the toggle element or the toast itself
         // note: .contains also returns true if the node itself matches the target element
-        if (this.shouldHideOnOutsideClick &&
-            !this.referenceElement.contains(target) &&
-            !this.popoverElement.contains(target) &&
-            document.body.contains(target)) {
-            this.hide(e);
+        if (!((_a = this.toastTarget) === null || _a === void 0 ? void 0 : _a.contains(target)) &&
+            document.body.contains(target) &&
+            this.data.get("hide-on-outside-click") !== "false") {
+            this._toggle(false, e);
         }
     }
     /**
-     * Forces the popover to hide if the user presses escape while it, one of its childen, or the reference element are focused
-     * @param {Event} e - The document keyup event
+     * Forces the toast to hide if the user presses escape while it, one of its childen, or the reference element are focused
      */
     hideOnEscapePress(e) {
-        // if the ESC key (27) wasn't pressed or if no popovers are showing, return
-        if (e.which !== 27 || !this.isVisible) {
-            return;
-        }
-        // check if the target was inside the popover element and refocus the triggering element
-        // note: .contains also returns true if the node itself matches the target element
-        if (this.popoverElement.contains(e.target)) {
-            this.referenceElement.focus();
-        }
-        this.hide(e);
-    }
-    /**
-     * Toggles all classes on the originating element based on the `class-toggle` data
-     * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
-     */
-    toggleOptionalClasses(show) {
-        if (!this.data.has("toggle-class")) {
-            return;
-        }
-        const toggleClass = this.data.get("toggle-class") || "";
-        const cl = this.referenceElement.classList;
-        toggleClass.split(/\s+/).forEach(function (cls) {
-            cl.toggle(cls, show);
-        });
-    }
-    /**
-     * Toggles accessibility attributes based on whether the popover is shown or not
-     * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
-     */
-    toggleAccessibilityAttributes(show) {
-        const expandedValue = (show === null || show === void 0 ? void 0 : show.toString()) || this.referenceElement.ariaExpanded || "false";
-        this.referenceElement.ariaExpanded = expandedValue;
-        this.referenceElement.setAttribute("aria-expanded", expandedValue);
-    }
-}
-PopoverController.targets = [];
-/**
- * Helper to manually show an s-popover element via external JS
- * @param element the element the `data-controller="s-popover"` attribute is on
- */
-function showPopover(element) {
-    const { isPopover, controller } = getPopover(element);
-    if (controller) {
-        controller.show();
-    }
-    else if (isPopover) {
-        element.setAttribute("data-s-popover-auto-show", "true");
-    }
-    else {
-        throw `element does not have data-controller="s-popover"`;
-    }
-}
-/**
- * Helper to manually hide an s-popover element via external JS
- * @param element the element the `data-controller="s-popover"` attribute is on
- */
-function hidePopover(element) {
-    const { isPopover, controller, popover } = getPopover(element);
-    if (controller) {
-        controller.hide();
-    }
-    else if (isPopover) {
-        element.removeAttribute("data-s-popover-auto-show");
-        if (popover) {
-            popover.classList.remove("is-visible");
-        }
-    }
-    else {
-        throw `element does not have data-controller="s-popover"`;
-    }
-}
-/**
- * Attaches a popover to an element and performs additional configuration.
- * @param element the element that will receive the `data-controller="s-popover"` attribute.
- * @param popover an element with the `.s-popover` class or HTML string containing a single element with the `.s-popover` class.
- *                If the popover does not have a parent element, it will be inserted as a immediately after the reference element.
- * @param options an optional collection of options to use when configuring the popover.
- */
-function attachPopover(element, popover, options) {
-    const { referenceElement, popover: existingPopover } = getPopover(element);
-    if (existingPopover) {
-        throw `element already has popover with id="${existingPopover.id}"`;
-    }
-    if (!referenceElement) {
-        throw `element has invalid data-s-popover-reference-selector attribute`;
-    }
-    if (typeof popover === "string") {
-        // eslint-disable-next-line no-unsanitized/method
-        const elements = document
-            .createRange()
-            .createContextualFragment(popover).children;
-        if (elements.length !== 1) {
-            throw "popover should contain a single element";
-        }
-        popover = elements[0];
-    }
-    const existingId = referenceElement.getAttribute("aria-controls");
-    let popoverId = popover.id;
-    if (!popover.classList.contains("s-popover")) {
-        throw `popover should have the "s-popover" class but had class="${popover.className}"`;
-    }
-    if (existingId && existingId !== popoverId) {
-        throw `element has aria-controls="${existingId}" but popover has id="${popoverId}"`;
-    }
-    if (!popoverId) {
-        popoverId =
-            "--stacks-s-popover-" + Math.random().toString(36).substring(2, 10);
-        popover.id = popoverId;
-    }
-    if (!existingId) {
-        referenceElement.setAttribute("aria-controls", popoverId);
-    }
-    if (!popover.parentElement && element.parentElement) {
-        referenceElement.insertAdjacentElement("afterend", popover);
+        // if the ESC key (27) wasn't pressed or if no toasts are showing, return
+        if (e.which !== 27 ||
+            this.toastTarget.getAttribute("aria-hidden") === "true") {
+            return;
+        }
+        this._toggle(false, e);
     }
-    toggleController(element, "s-popover", true);
-    if (options) {
-        if (options.toggleOnClick) {
-            referenceElement.setAttribute("data-action", "click->s-popover#toggle");
+    /**
+     * Determines the correct dispatching element from a potential input
+     * @param dispatcher The event or element to get the dispatcher from
+     */
+    getDispatcher(dispatcher = null) {
+        if (dispatcher instanceof Event) {
+            return dispatcher.target;
         }
-        if (options.placement) {
-            element.setAttribute("data-s-popover-placement", options.placement);
+        else if (dispatcher instanceof Element) {
+            return dispatcher;
         }
-        if (options.autoShow) {
-            element.setAttribute("data-s-popover-auto-show", "true");
+        else {
+            return this.element;
         }
     }
 }
+ToastController.targets = ["toast", "initialFocus"];
+
 /**
- * Removes the popover controller from an element and removes the popover from the DOM.
- * @param element the element that has the `data-controller="s-popover"` attribute.
- * @returns The popover that was attached to the element.
+ * Helper to manually show an s-toast element via external JS
+ * @param element the element the `data-controller="s-toast"` attribute is on
  */
-function detachPopover(element) {
-    const { isPopover, controller, referenceElement, popover } = getPopover(element);
-    // Hide the popover so its events fire.
-    controller === null || controller === void 0 ? void 0 : controller.hide();
-    // Remove the popover if it exists
-    popover === null || popover === void 0 ? void 0 : popover.remove();
-    // Remove the popover controller and the aria-controls attributes.
-    if (isPopover) {
-        toggleController(element, "s-popover", false);
-        if (referenceElement) {
-            referenceElement.removeAttribute("aria-controls");
-        }
-    }
-    return popover;
+function showToast(element) {
+    toggleToast(element, true);
 }
 /**
- * Gets the current state of an element that may be or is intended to be an s-popover controller
- * so it can be configured either directly or via the DOM.
- * @param element An element that may have `data-controller="s-popover"`.
+ * Helper to manually hide an s-toast element via external JS
+ * @param element the element the `data-controller="s-toast"` attribute is on
  */
-function getPopover(element) {
-    var _a;
-    const isPopover = ((_a = element.getAttribute("data-controller")) === null || _a === void 0 ? void 0 : _a.includes("s-popover")) || false;
-    const controller = application.getControllerForElementAndIdentifier(element, "s-popover");
-    const referenceSelector = element.getAttribute("data-s-popover-reference-selector");
-    const referenceElement = referenceSelector
-        ? element.querySelector(referenceSelector)
-        : element;
-    const popoverId = referenceElement
-        ? referenceElement.getAttribute("aria-controls")
-        : null;
-    const popover = popoverId ? document.getElementById(popoverId) : null;
-    return { isPopover, controller, referenceElement, popover };
+function hideToast(element) {
+    toggleToast(element, false);
 }
 /**
- * Adds or removes the controller from an element's [data-controller] attribute without altering existing entries
- * @param el The element to alter
- * @param controllerName The name of the controller to add/remove
- * @param include Whether to add the controllerName value
+ * Helper to manually show an s-toast element via external JS
+ * @param element the element the `data-controller="s-toast"` attribute is on
+ * @param show whether to force show/hide the toast; toggles the toast if left undefined
  */
-function toggleController(el, controllerName, include) {
-    var _a;
-    const controllers = new Set((_a = el.getAttribute("data-controller")) === null || _a === void 0 ? void 0 : _a.split(/\s+/));
-    if (include) {
-        controllers.add(controllerName);
-    }
-    else {
-        controllers.delete(controllerName);
-    }
-    el.setAttribute("data-controller", Array.from(controllers).join(" "));
-}
-
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-table.ts
-
-class TableController extends StacksController {
-    setCurrentSort(headElem, direction) {
-        if (["asc", "desc", "none"].indexOf(direction) < 0) {
-            throw "direction must be one of asc, desc, or none";
-        }
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const controller = this;
-        this.columnTargets.forEach(function (target) {
-            const isCurrrent = target === headElem;
-            target.classList.toggle("is-sorted", isCurrrent && direction !== "none");
-            target
-                .querySelectorAll(".js-sorting-indicator")
-                .forEach(function (icon) {
-                const visible = isCurrrent ? direction : "none";
-                icon.classList.toggle("d-none", !icon.classList.contains("js-sorting-indicator-" + visible));
-            });
-            if (!isCurrrent || direction === "none") {
-                controller.removeElementData(target, "sort-direction");
-            }
-            else {
-                controller.setElementData(target, "sort-direction", direction);
-            }
-        });
-    }
-    sort(evt) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const controller = this;
-        const colHead = evt.currentTarget;
-        if (!(colHead instanceof HTMLTableCellElement)) {
-            throw "invalid event target";
-        }
-        const table = this.element;
-        const tbody = table.tBodies[0];
-        // the column slot number of the clicked header
-        const colno = getCellSlot(colHead);
-        if (colno < 0) {
-            // this shouldn't happen if the clicked element is actually a column head
-            return;
-        }
-        // an index of the <tbody>, so we can find out for each row which <td> element is
-        // in the same column slot as the header
-        const slotIndex = buildIndex(tbody);
-        // the default behavior when clicking a header is to sort by this column in ascending
-        // direction, *unless* it is already sorted that way
-        const direction = this.getElementData(colHead, "sort-direction") === "asc" ? -1 : 1;
-        const rows = Array.from(table.tBodies[0].rows);
-        // if this is still false after traversing the data, that means all values are integers (or empty)
-        // and thus we'll sort numerically.
-        let anyNonInt = false;
-        // data will be a list of tuples [value, rowNum], where value is what we're sorting by
-        const data = [];
-        let firstBottomRow;
-        rows.forEach(function (row, index) {
-            var _a, _b;
-            const force = controller.getElementData(row, "sort-to");
-            if (force === "top") {
-                return; // rows not added to the list will automatically end up at the top
-            }
-            else if (force === "bottom") {
-                if (!firstBottomRow) {
-                    firstBottomRow = row;
-                }
-                return;
-            }
-            const cell = slotIndex[index][colno];
-            if (!cell) {
-                data.push(["", index]);
-                return;
-            }
-            // unless the to-be-sorted-by value is explicitly provided on the element via this attribute,
-            // the value we're using is the cell's text, trimmed of any whitespace
-            const explicit = controller.getElementData(cell, "sort-val");
-            const d = typeof explicit === "string"
-                ? explicit
-                : (_b = (_a = cell.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
-            if (d !== "" && `${parseInt(d, 10)}` !== d) {
-                anyNonInt = true;
-            }
-            data.push([d, index]);
-        });
-        // If all values were integers (or empty cells), sort numerically, with empty cells treated as
-        // having the lowest possible value (i.e. sorted to the top if ascending, bottom if descending)
-        if (!anyNonInt) {
-            data.forEach(function (tuple) {
-                tuple[0] =
-                    tuple[0] === ""
-                        ? Number.MIN_VALUE
-                        : parseInt(tuple[0], 10);
-            });
-        }
-        // We don't sort an array of <tr>, but instead an arrays of row *numbers*, because this way we
-        // can enforce stable sorting, i.e. rows that compare equal are guaranteed to remain in the same
-        // order (the JS standard does not gurantee this for sort()).
-        data.sort(function (a, b) {
-            // first compare the values (a[0])
-            if (a[0] > b[0]) {
-                return 1 * direction;
-            }
-            else if (a[0] < b[0]) {
-                return -1 * direction;
-            }
-            else {
-                // if the values are equal, compare the row numbers (a[1]) to guarantee stable sorting
-                // (note that this comparison is independent of the sorting direction)
-                return a[1] > b[1] ? 1 : -1;
-            }
-        });
-        // this is the actual reordering of the table rows
-        data.forEach(function (tup) {
-            var _a;
-            const row = rows[tup[1]];
-            (_a = row.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(row);
-            if (firstBottomRow) {
-                tbody.insertBefore(row, firstBottomRow);
-            }
-            else {
-                tbody.appendChild(row);
-            }
-        });
-        // update the UI and set the `data-sort-direction` attribute if appropriate, so that the next click
-        // will cause sorting in descending direction
-        this.setCurrentSort(colHead, direction === 1 ? "asc" : "desc");
-    }
-}
-TableController.targets = ["column"];
-function buildIndex(section) {
-    const result = buildIndexOrGetCellSlot(section);
-    if (!(result instanceof Array)) {
-        throw "shouldn't happen";
-    }
-    return result;
-}
-function getCellSlot(cell) {
-    if (!(cell.parentElement &&
-        cell.parentElement.parentElement instanceof HTMLTableSectionElement)) {
-        throw "invalid table";
-    }
-    const result = buildIndexOrGetCellSlot(cell.parentElement.parentElement, cell);
-    if (typeof result !== "number") {
-        throw "shouldn't happen";
-    }
-    return result;
-}
-// Just because a <td> is the 4th *child* of its <tr> doesn't mean it belongs to the 4th *column*
-// of the table. Previous cells may have a colspan; cells in previous rows may have a rowspan.
-// Because we need to know which header cells and data cells belong together, we have to 1) find out
-// which column number (or "slot" as we call it here) the header cell has, and 2) for each row find
-// out which <td> cell corresponds to this slot (because those are the rows we're sorting by).
-//
-// That's what the following function does. If the second argument is not given, it returns an index
-// of the table, which is an array of arrays. Each of the sub-arrays corresponds to a table row. The
-// indices of the sub-array correspond to column slots; the values are the actual table cell elements.
-// For example index[4][3] is the <td> or <th> in row 4, column 3 of the table section (<tbody> or <thead>).
-// Note that this element is not necessarily even in the 4th (zero-based) <tr> -- if it has a rowSpan > 1,
-// it may also be in a previous <tr>.
-//
-// If the second argument is given, it's a <td> or <th> that we're trying to find, and the algorithm
-// stops as soon as it has found it and the function returns its slot number.
-function buildIndexOrGetCellSlot(section, findCell) {
-    const index = [];
-    let curRow = section.children[0];
-    // the elements of these two arrays are synchronized; the first array contains table cell elements,
-    // the second one contains a number that indicates for how many more rows this elements will
-    // exist (i.e. the value is initially one less than the cell's rowspan, and will be decreased for each row)
-    const growing = [];
-    const growingRowsLeft = [];
-    // continue while we have actual <tr>'s left *or* we still have rowspan'ed elements that aren't done
-    while (curRow ||
-        growingRowsLeft.some(function (e) {
-            return e !== 0;
-        })) {
-        const curIndexRow = [];
-        index.push(curIndexRow);
-        let curSlot = 0;
-        if (curRow) {
-            for (let curCellInd = 0; curCellInd < curRow.children.length; curCellInd++) {
-                while (growingRowsLeft[curSlot]) {
-                    growingRowsLeft[curSlot]--;
-                    curIndexRow[curSlot] = growing[curSlot];
-                    curSlot++;
-                }
-                const cell = curRow.children[curCellInd];
-                if (!(cell instanceof HTMLTableCellElement)) {
-                    throw "invalid table";
-                }
-                if (getComputedStyle(cell).display === "none") {
-                    continue;
-                }
-                if (cell === findCell) {
-                    return curSlot;
-                }
-                const nextFreeSlot = curSlot + cell.colSpan;
-                for (; curSlot < nextFreeSlot; curSlot++) {
-                    growingRowsLeft[curSlot] = cell.rowSpan - 1; // if any of these is already growing, the table is broken -- no guarantees of anything
-                    growing[curSlot] = cell;
-                    curIndexRow[curSlot] = cell;
-                }
-            }
-        }
-        while (curSlot < growing.length) {
-            if (growingRowsLeft[curSlot]) {
-                growingRowsLeft[curSlot]--;
-                curIndexRow[curSlot] = growing[curSlot];
-            }
-            curSlot++;
-        }
-        if (curRow) {
-            curRow = curRow.nextElementSibling;
-        }
+function toggleToast(element, show) {
+    const controller = application.getControllerForElementAndIdentifier(element, "s-toast");
+    if (!controller) {
+        throw "Unable to get s-toast controller from element";
     }
-    return findCell
-        ? -1
-        : index; /* if findCell was given but we end up here, that means it isn't in this section */
+    show ? controller.show() : controller.hide();
 }
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-tooltip.ts
+;// CONCATENATED MODULE: ./lib/components/popover/tooltip.ts
 
 
 class TooltipController extends BasePopoverController {
@@ -6426,6 +6453,7 @@ class TooltipController extends BasePopoverController {
     }
 }
 TooltipController.targets = [];
+
 /**
  * Adds or updates a Stacks tooltip on a given element, initializing the controller if necessary
  * @param element The element to add a tooltip to.
@@ -6467,7 +6495,7 @@ function applyOptionsAndTitleAttributes(element, options) {
     }
 }
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-uploader.ts
+;// CONCATENATED MODULE: ./lib/components/uploader/uploader.ts
 
 class UploaderController extends StacksController {
     connect() {
@@ -6631,7 +6659,8 @@ UploaderController.targets = ["input", "previews", "uploader"];
 UploaderController.FILE_DISPLAY_LIMIT = 10;
 UploaderController.MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/index.ts
+
+;// CONCATENATED MODULE: ./lib/controllers.ts
 // export all controllers *with helpers* so they can be bulk re-exported by the package entry point
 
 
@@ -6643,7 +6672,7 @@ UploaderController.MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
 
 
 
-;// CONCATENATED MODULE: ./lib/ts/index.ts
+;// CONCATENATED MODULE: ./lib/index.ts