@stackoverflow/stacks 1.7.1 → 1.9.0

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) {
@@ -2571,7 +2571,115 @@ 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 +2873,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() {
@@ -3046,453 +3154,87 @@ 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);
-    }
-    /**
-     * Remove the element on hide if the `remove-when-hidden` flag is set
-     */
-    removeBannerOnHide() {
-        if (this.data.get("remove-when-hidden") !== "true") {
-            return;
+        if (tabIndex >= tabs.length) {
+            tabIndex = 0;
         }
-        this.bannerTarget.addEventListener("s-banner:hidden", () => {
-            this.element.remove();
-        }, { once: true });
+        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();
     }
     /**
-     * Determines the correct dispatching element from a potential input
-     * @param dispatcher The event or element to get the dispatcher from
+     * Attempts to switch to a new tab, doing nothing if the tab is already selected or
+     * the s-navigation-tablist:select event is prevented.
      */
-    getDispatcher(dispatcher = null) {
-        if (dispatcher instanceof Event) {
-            return dispatcher.target;
-        }
-        else if (dispatcher instanceof Element) {
-            return dispatcher;
+    switchToTab(newTab) {
+        const oldTab = this.selectedTab;
+        if (oldTab === newTab) {
+            return;
         }
-        else {
-            return this.element;
+        if (this.triggerEvent("select", { oldTab, newTab }).defaultPrevented) {
+            return;
         }
-    }
-}
-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/ts/controllers/s-toast.ts
-
-class ToastController extends StacksController {
-    connect() {
-        this.validate();
+        this.selectedTab = newTab;
+        this.triggerEvent("selected", { oldTab, newTab });
     }
     /**
-     * Disconnects all added event listeners on controller disconnect
+     * Returns the currently selected tab or null if no tabs are selected.
      */
-    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);
-    }
-    /**
-     * Hides the toast
-     */
-    hide(dispatcher = null) {
-        this._toggle(false, dispatcher);
-    }
-    /**
-     * 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);
-}
-/**
- * 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: ./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);
+    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
@@ -5519,7 +5261,7 @@ var popper_createPopper = /*#__PURE__*/popperGenerator({
  // eslint-disable-next-line import/no-unused-modules
 
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-popover.ts
+;// CONCATENATED MODULE: ./lib/components/popover/popover.ts
 
 
 class BasePopoverController extends StacksController {
@@ -5998,7 +5740,7 @@ function toggleController(el, controllerName, include) {
     el.setAttribute("data-controller", Array.from(controllers).join(" "));
 }
 
-;// CONCATENATED MODULE: ./lib/ts/controllers/s-table.ts
+;// CONCATENATED MODULE: ./lib/components/table/table.ts
 
 class TableController extends StacksController {
     setCurrentSort(headElem, direction) {
@@ -6090,132 +5832,390 @@ class TableController extends StacksController {
                         : 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;
+        // 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;
+        }
+    }
+    return findCell
+        ? -1
+        : index; /* if findCell was given but we end up here, that means it isn't in this section */
+}
+
+;// CONCATENATED MODULE: ./lib/components/toast/toast.ts
+
+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);
+    }
+    /**
+     * Hides the toast
+     */
+    hide(dispatcher = null) {
+        this._toggle(false, dispatcher);
+    }
+    /**
+     * 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();
             }
-        });
-        // this is the actual reordering of the table rows
-        data.forEach(function (tup) {
+        }, { 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 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");
+            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 });
     }
-}
-TableController.targets = ["column"];
-function buildIndex(section) {
-    const result = buildIndexOrGetCellSlot(section);
-    if (!(result instanceof Array)) {
-        throw "shouldn't happen";
+    /**
+     * 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);
     }
-    return result;
-}
-function getCellSlot(cell) {
-    if (!(cell.parentElement &&
-        cell.parentElement.parentElement instanceof HTMLTableSectionElement)) {
-        throw "invalid table";
+    /**
+     * Unbinds global events to the document for hiding toasts on user interaction
+     */
+    unbindDocumentEvents() {
+        document.removeEventListener("mousedown", this._boundClickFn);
+        document.removeEventListener("keyup", this._boundKeypressFn);
     }
-    const result = buildIndexOrGetCellSlot(cell.parentElement.parentElement, cell);
-    if (typeof result !== "number") {
-        throw "shouldn't happen";
+    /**
+     * 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);
+        }
     }
-    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;
-                }
-            }
+    /**
+     * 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;
         }
-        while (curSlot < growing.length) {
-            if (growingRowsLeft[curSlot]) {
-                growingRowsLeft[curSlot]--;
-                curIndexRow[curSlot] = growing[curSlot];
-            }
-            curSlot++;
+        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;
         }
-        if (curRow) {
-            curRow = curRow.nextElementSibling;
+        else if (dispatcher instanceof Element) {
+            return dispatcher;
+        }
+        else {
+            return this.element;
         }
     }
-    return findCell
-        ? -1
-        : index; /* if findCell was given but we end up here, that means it isn't in this section */
+}
+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);
+}
+/**
+ * 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: ./lib/ts/controllers/s-tooltip.ts
+;// CONCATENATED MODULE: ./lib/components/popover/tooltip.ts
 
 
 class TooltipController extends BasePopoverController {
@@ -6467,7 +6467,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 +6631,7 @@ 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 +6643,7 @@ UploaderController.MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
 
 
 
-;// CONCATENATED MODULE: ./lib/ts/index.ts
+;// CONCATENATED MODULE: ./lib/index.ts