@esri/solutions-components 0.7.23 → 0.7.24

package/dist/cjs/{calcite-action-bar_3.cjs.entry.js → calcite-filter_5.cjs.entry.js}

@@ -8,261 +8,342 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b8a649fc.js');
-const conditionalSlot = require('./conditionalSlot-63e11cba.js');
-const dom = require('./dom-e111eaa6.js');
+const filter = require('./filter-8f1bbfe6.js');
+const interactive = require('./interactive-8aff886e.js');
 const loadable = require('./loadable-07a214c7.js');
 const locale = require('./locale-6a627639.js');
-const observers = require('./observers-281a8c99.js');
 const t9n = require('./t9n-0556abcb.js');
-const ExpandToggle = require('./ExpandToggle-f83d93f8.js');
 const debounce = require('./debounce-30afab47.js');
-const interactive = require('./interactive-8aff886e.js');
+const dom = require('./dom-e111eaa6.js');
+const observers = require('./observers-281a8c99.js');
 const utils = require('./utils-234879c7.js');
 const sortableComponent = require('./sortableComponent-188f3290.js');
-const resources = require('./resources-55ba2752.js');
+require('./browser-9a43b900.js');
+require('./key-b8c05387.js');
 require('./guid-1a466ca6.js');
 require('./resources-6c60363a.js');
-require('./key-b8c05387.js');
-require('./resources-f3e0e822.js');
-require('./resources-a825d7ae.js');
-require('./browser-9a43b900.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
  * v2.0.0
  */
-const CSS$1 = {
-  actionGroupEnd: "action-group--end",
+const CSS$3 = {
+  container: "container",
+  searchIcon: "search-icon",
 };
-const SLOTS$1 = {
-  actionsEnd: "actions-end",
-  bottomActions: "bottom-actions",
-  expandTooltip: "expand-tooltip",
+const ICONS$1 = {
+  search: "search",
+  close: "x",
 };
+const DEBOUNCE_TIMEOUT = 250;
 
-const actionBarCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-color-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-color-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}";
+const filterCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-color-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-color-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-color-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 
-const ActionBar = class {
+const Filter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.calciteActionBarToggle = index.createEvent(this, "calciteActionBarToggle", 6);
-        this.mutationObserver = observers.createObserver("mutation", () => {
-            const { el, expanded } = this;
-            ExpandToggle.toggleChildActionText({ el, expanded });
-            this.overflowActions();
-        });
-        this.resizeObserver = observers.createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
+        this.calciteFilterChange = index.createEvent(this, "calciteFilterChange", 6);
         // --------------------------------------------------------------------------
         //
         //  Private Methods
         //
         // --------------------------------------------------------------------------
-        this.actionMenuOpenHandler = (event) => {
-            if (event.target.menuOpen) {
-                const composedPath = event.composedPath();
-                Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
-                    if (!composedPath.includes(group)) {
-                        group.menuOpen = false;
-                    }
-                });
-            }
-        };
-        this.resizeHandlerEntries = (entries) => {
-            entries.forEach(this.resizeHandler);
+        this.filterDebounced = debounce.debounce((value, emit = false, onFilter) => this.updateFiltered(filter.filter(this.items, value), emit, onFilter), DEBOUNCE_TIMEOUT);
+        this.inputHandler = (event) => {
+            const target = event.target;
+            this.value = target.value;
+            this.filterDebounced(target.value, true);
         };
-        this.resizeHandler = (entry) => {
-            const { width, height } = entry.contentRect;
-            this.resize({ width, height });
-        };
-        this.resize = debounce.debounce(({ width, height }) => {
-            const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
-            if (overflowActionsDisabled ||
-                (layout === "vertical" && !height) ||
-                (layout === "horizontal" && !width)) {
-                return;
+        this.keyDownHandler = (event) => {
+            if (event.key === "Escape") {
+                this.clear();
+                event.preventDefault();
+            }
+            if (event.key === "Enter") {
+                event.preventDefault();
             }
-            const actions = ExpandToggle.queryActions(el);
-            const actionCount = expandDisabled ? actions.length : actions.length + 1;
-            const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
-            this.setGroupLayout(actionGroups);
-            const groupCount = this.hasActionsEnd || this.hasBottomActions || !expandDisabled
-                ? actionGroups.length + 1
-                : actionGroups.length;
-            const { actionHeight, actionWidth } = ExpandToggle.geActionDimensions(actions);
-            const overflowCount = ExpandToggle.getOverflowCount({
-                layout,
-                actionCount,
-                actionHeight,
-                actionWidth,
-                height,
-                width,
-                groupCount,
-            });
-            ExpandToggle.overflowActions({
-                actionGroups,
-                expanded,
-                overflowCount,
-            });
-        }, ExpandToggle.overflowActionsDebounceInMs);
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-            this.calciteActionBarToggle.emit();
-        };
-        this.setExpandToggleRef = (el) => {
-            this.expandToggleEl = el;
-        };
-        this.handleDefaultSlotChange = (event) => {
-            const groups = dom.slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-action-group"));
-            this.setGroupLayout(groups);
-        };
-        this.handleActionsEndSlotChange = (event) => {
-            this.hasActionsEnd = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleBottomActionsSlotChange = (event) => {
-            this.hasBottomActions = dom.slotChangeHasAssignedElement(event);
         };
-        this.handleTooltipSlotChange = (event) => {
-            const tooltips = dom.slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
-            this.expandTooltip = tooltips[0];
+        this.clear = () => {
+            this.value = "";
+            this.filterDebounced("", true);
+            this.setFocus();
         };
-        this.actionsEndGroupLabel = undefined;
-        this.expandDisabled = false;
-        this.expanded = false;
-        this.layout = "vertical";
-        this.overflowActionsDisabled = false;
-        this.position = undefined;
-        this.scale = undefined;
+        this.items = [];
+        this.disabled = false;
+        this.filteredItems = [];
+        this.placeholder = undefined;
+        this.scale = "m";
+        this.value = "";
         this.messages = undefined;
         this.messageOverrides = undefined;
         this.effectiveLocale = undefined;
-        this.hasActionsEnd = false;
-        this.hasBottomActions = false;
-        this.expandTooltip = undefined;
         this.defaultMessages = undefined;
     }
-    expandHandler() {
-        this.overflowActions();
-    }
-    expandedHandler() {
-        const { el, expanded } = this;
-        ExpandToggle.toggleChildActionText({ el, expanded });
-        this.overflowActions();
-    }
-    layoutHandler() {
-        this.updateGroups();
-    }
-    overflowDisabledHandler(overflowActionsDisabled) {
-        var _a, _b;
-        if (overflowActionsDisabled) {
-            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-            return;
-        }
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.el);
-        this.overflowActions();
+    watchItemsHandler() {
+        this.filterDebounced(this.value);
     }
     onMessagesChange() {
         /* wired up by t9n util */
     }
+    valueHandler(value) {
+        this.filterDebounced(value);
+    }
     effectiveLocaleChange() {
         t9n.updateMessages(this, this.effectiveLocale);
     }
-    // --------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
     //
     //  Lifecycle
     //
-    // --------------------------------------------------------------------------
-    componentDidLoad() {
-        const { el, expanded } = this;
-        loadable.setComponentLoaded(this);
-        ExpandToggle.toggleChildActionText({ el, expanded });
-        this.overflowActions();
+    //--------------------------------------------------------------------------
+    async componentWillLoad() {
+        loadable.setUpLoadableComponent(this);
+        this.updateFiltered(filter.filter(this.items, this.value));
+        await t9n.setUpMessages(this);
     }
     connectedCallback() {
-        var _a, _b;
-        const { el, expanded } = this;
+        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
-        ExpandToggle.toggleChildActionText({ el, expanded });
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
-        if (!this.overflowActionsDisabled) {
-            (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
-        }
-        this.overflowActions();
-        conditionalSlot.connectConditionalSlotComponent(this);
     }
-    async componentWillLoad() {
-        loadable.setUpLoadableComponent(this);
-        await t9n.setUpMessages(this);
+    componentDidRender() {
+        interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        conditionalSlot.disconnectConditionalSlotComponent(this);
+        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
+        this.filterDebounced.cancel();
+    }
+    componentDidLoad() {
+        loadable.setComponentLoaded(this);
     }
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
     /**
-     * Overflows actions that won't fit into menus.
+     * Performs a filter on the component.
      *
-     * @internal
+     * This method can be useful because filtering is delayed and asynchronous.
+     *
+     * @param {string} value - The filter text value.
+     * @returns {Promise<void>}
      */
-    async overflowActions() {
-        this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
+    async filter(value = this.value) {
+        return new Promise((resolve) => {
+            this.value = value;
+            this.filterDebounced(value, false, resolve);
+        });
     }
-    /**
-     * Sets focus on the component's first focusable element.
-     */
+    /** Sets focus on the component. */
     async setFocus() {
+        var _a;
         await loadable.componentFocusable(this);
-        dom.focusFirstTabbable(this.el);
-    }
-    updateGroups() {
-        this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    setGroupLayout(groups) {
-        groups.forEach((group) => (group.layout = this.layout));
+    updateFiltered(filtered, emit = false, callback) {
+        this.filteredItems = filtered;
+        if (emit) {
+            this.calciteFilterChange.emit();
+        }
+        callback === null || callback === void 0 ? void 0 : callback();
     }
     // --------------------------------------------------------------------------
     //
     //  Render Methods
     //
     // --------------------------------------------------------------------------
-    renderBottomActionGroup() {
-        const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages, actionsEndGroupLabel, } = this;
-        const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
+    render() {
+        const { disabled, scale } = this;
+        return (index.h(index.Fragment, null, index.h("div", { class: CSS$3.container }, index.h("label", null, index.h("calcite-input", { clearable: true, disabled: disabled, icon: ICONS$1.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setExpandToggleRef })) : null;
-        return (index.h("calcite-action-group", { class: CSS$1.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, scale: scale }, index.h("slot", { name: SLOTS$1.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), index.h("slot", { name: SLOTS$1.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), index.h("slot", { name: SLOTS$1.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
+            ref: (el) => {
+                this.textInput = el;
+            } })))));
+    }
+    static get delegatesFocus() { return true; }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["watchItemsHandler"],
+        "messageOverrides": ["onMessagesChange"],
+        "value": ["valueHandler"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+Filter.style = filterCss;
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.0.0
+ */
+const CSS$2 = {
+  handle: "handle",
+  handleActivated: "handle--activated",
+};
+const ICONS = {
+  drag: "drag",
+};
+
+const handleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;background-color:transparent;outline-color:transparent;color:var(--calcite-color-border-input);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:not([disabled])) .handle:focus{color:var(--calcite-color-text-1);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:not([disabled])) .handle--activated{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Handle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.calciteHandleNudge = index.createEvent(this, "calciteHandleNudge", 6);
+        this.calciteInternalHandleChange = index.createEvent(this, "calciteInternalHandleChange", 6);
+        this.handleKeyDown = (event) => {
+            if (this.disabled) {
+                return;
+            }
+            switch (event.key) {
+                case " ":
+                    this.activated = !this.activated;
+                    event.preventDefault();
+                    break;
+                case "ArrowUp":
+                    if (!this.activated) {
+                        return;
+                    }
+                    event.preventDefault();
+                    this.calciteHandleNudge.emit({ direction: "up" });
+                    break;
+                case "ArrowDown":
+                    if (!this.activated) {
+                        return;
+                    }
+                    event.preventDefault();
+                    this.calciteHandleNudge.emit({ direction: "down" });
+                    break;
+            }
+        };
+        this.handleBlur = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.activated = false;
+        };
+        this.activated = false;
+        this.disabled = false;
+        this.dragHandle = undefined;
+        this.messages = undefined;
+        this.setPosition = undefined;
+        this.setSize = undefined;
+        this.label = undefined;
+        this.messageOverrides = undefined;
+        this.effectiveLocale = undefined;
+        this.defaultMessages = undefined;
+    }
+    handleAriaTextChange() {
+        const message = this.getAriaText("live");
+        if (message) {
+            this.calciteInternalHandleChange.emit({
+                message,
+            });
+        }
     }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        interactive.connectInteractive(this);
+        t9n.connectMessages(this);
+        locale.connectLocalized(this);
+    }
+    async componentWillLoad() {
+        loadable.setUpLoadableComponent(this);
+        await t9n.setUpMessages(this);
+    }
+    componentDidLoad() {
+        loadable.setComponentLoaded(this);
+    }
+    componentDidRender() {
+        interactive.updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        interactive.disconnectInteractive(this);
+        t9n.disconnectMessages(this);
+        locale.disconnectLocalized(this);
+    }
+    effectiveLocaleChange() {
+        t9n.updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        var _a;
+        await loadable.componentFocusable(this);
+        (_a = this.handleButton) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    getAriaText(type) {
+        const { setPosition, setSize, label, messages, activated } = this;
+        if (!messages || !label || typeof setSize !== "number" || typeof setPosition !== "number") {
+            return null;
+        }
+        const text = type === "label"
+            ? activated
+                ? messages.dragHandleChange
+                : messages.dragHandleIdle
+            : activated
+                ? messages.dragHandleActive
+                : messages.dragHandleCommit;
+        const replacePosition = text.replace("{position}", setPosition.toString());
+        const replaceLabel = replacePosition.replace("{itemLabel}", label);
+        return replaceLabel.replace("{total}", setSize.toString());
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
     render() {
-        return (index.h(index.Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
+        var _a;
+        return (
+        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+        index.h("span", { "aria-disabled": this.disabled ? dom.toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), "aria-pressed": this.disabled ? null : dom.toAriaBoolean(this.activated), class: { [CSS$2.handle]: true, [CSS$2.handleActivated]: !this.disabled && this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabIndex: this.disabled ? null : 0, title: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.dragHandle,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: (el) => {
+                this.handleButton = el;
+            } }, index.h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "expandDisabled": ["expandHandler"],
-        "expanded": ["expandedHandler"],
-        "layout": ["layoutHandler"],
-        "overflowActionsDisabled": ["overflowDisabledHandler"],
+        "messages": ["handleAriaTextChange"],
+        "label": ["handleAriaTextChange"],
+        "activated": ["handleAriaTextChange"],
+        "setPosition": ["handleAriaTextChange"],
+        "setSize": ["handleAriaTextChange"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-ActionBar.style = actionBarCss;
+Handle.style = handleCss;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
  * v2.0.0
  */
-const CSS = {
+const CSS$1 = {
   container: "container",
   table: "table",
   scrim: "scrim",
@@ -272,11 +353,31 @@ const CSS = {
   assistiveText: "assistive-text",
 };
 const debounceTimeout = 0;
-const SLOTS = {
+const SLOTS$1 = {
   filterActionsStart: "filter-actions-start",
   filterActionsEnd: "filter-actions-end",
 };
 
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.0.0
+ */
+const CSS = {
+  container: "container",
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  content: "content",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end",
+};
+const SLOTS = {
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end",
+};
+
 const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:first-of-type){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item[data-filter]){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-color-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const listItemSelector = "calcite-list-item";
@@ -648,9 +749,9 @@ const List = class {
     // --------------------------------------------------------------------------
     render() {
         const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-        return (index.h("div", { class: CSS.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? index.h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, index.h("table", { "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (index.h("thead", null, index.h("tr", { class: { [CSS.sticky]: true } }, index.h("th", { colSpan: utils.MAX_COLUMNS }, index.h("calcite-stack", { class: CSS.stack }, index.h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: resources.SLOTS.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+        return (index.h("div", { class: CSS$1.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? index.h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, index.h("table", { "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (index.h("thead", null, index.h("tr", { class: { [CSS$1.sticky]: true } }, index.h("th", { colSpan: utils.MAX_COLUMNS }, index.h("calcite-stack", { class: CSS$1.stack }, index.h("slot", { name: SLOTS$1.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setFilterEl }), index.h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: resources.SLOTS.actionsEnd })))))) : null, index.h("tbody", { class: CSS.tableContainer }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+            ref: this.setFilterEl }), index.h("slot", { name: SLOTS$1.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS.actionsEnd })))))) : null, index.h("tbody", { class: CSS$1.tableContainer }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //
@@ -663,7 +764,7 @@ const List = class {
             locale: effectiveLocale,
             numberingSystem,
         };
-        return !parentListEl ? (index.h("div", { "aria-live": "polite", class: CSS.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (index.h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, index.h("div", { key: "aria-item-count" }, messages.total.replace("{count}", locale.numberStringFormatter.localize(enabledListItems.length.toString()))), enabledListItems.length ? (index.h("ol", { key: "aria-item-list" }, enabledListItems.map((item) => (index.h("li", null, item.label))))) : null)) : null;
+        return !parentListEl ? (index.h("div", { "aria-live": "polite", class: CSS$1.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (index.h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, index.h("div", { key: "aria-item-count" }, messages.total.replace("{count}", locale.numberStringFormatter.localize(enabledListItems.length.toString()))), enabledListItems.length ? (index.h("ol", { key: "aria-item-list" }, enabledListItems.map((item) => (index.h("li", null, item.label))))) : null)) : null;
     }
     connectObserver() {
         var _a;
@@ -1198,6 +1299,66 @@ const ListItem = class {
 };
 ListItem.style = listItemCss;
 
-exports.calcite_action_bar = ActionBar;
+const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Stack = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleActionsStartSlotChange = (event) => {
+            this.hasActionsStart = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleActionsEndSlotChange = (event) => {
+            this.hasActionsEnd = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleContentStartSlotChange = (event) => {
+            this.hasContentStart = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleContentEndSlotChange = (event) => {
+            this.hasContentEnd = dom.slotChangeHasAssignedElement(event);
+        };
+        this.disabled = false;
+        this.hasActionsStart = false;
+        this.hasActionsEnd = false;
+        this.hasContentStart = false;
+        this.hasContentEnd = false;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderActionsStart() {
+        const { hasActionsStart } = this;
+        return (index.h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, index.h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+    }
+    renderActionsEnd() {
+        const { hasActionsEnd } = this;
+        return (index.h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, index.h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+    }
+    renderContentStart() {
+        const { hasContentStart } = this;
+        return (index.h("div", { class: CSS.contentStart, hidden: !hasContentStart }, index.h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+    }
+    renderDefaultContent() {
+        return (index.h("div", { class: CSS.content }, index.h("slot", null)));
+    }
+    renderContentEnd() {
+        const { hasContentEnd } = this;
+        return (index.h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+    }
+};
+Stack.style = stackCss;
+
+exports.calcite_filter = Filter;
+exports.calcite_handle = Handle;
 exports.calcite_list = List;
 exports.calcite_list_item = ListItem;
+exports.calcite_stack = Stack;