@esri/solutions-components 0.7.22 → 0.7.24

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

@@ -3,262 +3,343 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
-import { s as slotChangeGetAssignedElements, u as slotChangeHasAssignedElement, f as focusFirstTabbable, t as toAriaBoolean, z as getFirstTabbable, a as getElementDir } from './dom-492b1b24.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-8cfa3086.js';
-import { c as createObserver } from './observers-8ce200f2.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3c5e55ab.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle-540998b5.js';
-import { d as debounce } from './debounce-229b1a22.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, H as Host } from './index-7183ce4a.js';
+import { f as filter } from './filter-8b806ae6.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-20bb1dc4.js';
-import { u as updateListItemChildren, a as getListItemChildren, M as MAX_COLUMNS, g as getDepth, I as ICONS, C as CSS$2, S as SLOTS$3, b as getListItemChildLists } from './utils-86d242a6.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
+import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-6107ef11.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-f16911e7.js';
+import { d as debounce } from './debounce-229b1a22.js';
+import { t as toAriaBoolean, u as slotChangeHasAssignedElement, B as getFirstTabbable, a as getElementDir } from './dom-8f926f33.js';
+import { c as createObserver } from './observers-8ce200f2.js';
+import { u as updateListItemChildren, a as getListItemChildren, M as MAX_COLUMNS, g as getDepth, I as ICONS$2, C as CSS$4, S as SLOTS$2, b as getListItemChildLists } from './utils-86d242a6.js';
 import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-65956286.js';
-import { S as SLOTS$2 } from './resources-221791b0.js';
+import './browser-b4c16201.js';
+import './key-af303047.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';
-import './key-af303047.js';
-import './resources-4bcfc016.js';
-import './resources-1a8d4d77.js';
-import './browser-b4c16201.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) {
         registerInstance(this, hostRef);
-        this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
-        this.mutationObserver = createObserver("mutation", () => {
-            const { el, expanded } = this;
-            toggleChildActionText({ el, expanded });
-            this.overflowActions();
-        });
-        this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
+        this.calciteFilterChange = 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((value, emit = false, onFilter) => this.updateFiltered(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(({ 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 = 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 } = geActionDimensions(actions);
-            const overflowCount = getOverflowCount({
-                layout,
-                actionCount,
-                actionHeight,
-                actionWidth,
-                height,
-                width,
-                groupCount,
-            });
-            overflowActions({
-                actionGroups,
-                expanded,
-                overflowCount,
-            });
-        }, overflowActionsDebounceInMs);
-        this.toggleExpand = () => {
-            this.expanded = !this.expanded;
-            this.calciteActionBarToggle.emit();
-        };
-        this.setExpandToggleRef = (el) => {
-            this.expandToggleEl = el;
-        };
-        this.handleDefaultSlotChange = (event) => {
-            const groups = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-action-group"));
-            this.setGroupLayout(groups);
-        };
-        this.handleActionsEndSlotChange = (event) => {
-            this.hasActionsEnd = slotChangeHasAssignedElement(event);
-        };
-        this.handleBottomActionsSlotChange = (event) => {
-            this.hasBottomActions = slotChangeHasAssignedElement(event);
         };
-        this.handleTooltipSlotChange = (event) => {
-            const tooltips = 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;
-        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() {
         updateMessages(this, this.effectiveLocale);
     }
-    // --------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
     //
     //  Lifecycle
     //
-    // --------------------------------------------------------------------------
-    componentDidLoad() {
-        const { el, expanded } = this;
-        setComponentLoaded(this);
-        toggleChildActionText({ el, expanded });
-        this.overflowActions();
+    //--------------------------------------------------------------------------
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        this.updateFiltered(filter(this.items, this.value));
+        await setUpMessages(this);
     }
     connectedCallback() {
-        var _a, _b;
-        const { el, expanded } = this;
+        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
-        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();
-        connectConditionalSlotComponent(this);
     }
-    async componentWillLoad() {
-        setUpLoadableComponent(this);
-        await setUpMessages(this);
+    componentDidRender() {
+        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();
-        disconnectConditionalSlotComponent(this);
+        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
+        this.filterDebounced.cancel();
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
     }
     // --------------------------------------------------------------------------
     //
-    //  Methods
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
     /**
-     * Overflows actions that won't fit into menus.
+     * Performs a filter on the component.
+     *
+     * This method can be useful because filtering is delayed and asynchronous.
      *
-     * @internal
+     * @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 componentFocusable(this);
-        focusFirstTabbable(this.el);
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    updateGroups() {
-        this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
-    }
-    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 ? (h(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 (h(Fragment, null, h("div", { class: CSS$3.container }, h("label", null, 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 (h("calcite-action-group", { class: CSS$1.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, scale: scale }, h("slot", { name: SLOTS$1.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), h("slot", { name: SLOTS$1.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), 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 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) {
+        registerInstance(this, hostRef);
+        this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 6);
+        this.calciteInternalHandleChange = 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() {
+        connectInteractive(this);
+        connectMessages(this);
+        connectLocalized(this);
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        disconnectMessages(this);
+        disconnectLocalized(this);
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
     }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        var _a;
+        await 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 (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
+        var _a;
+        return (
+        // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
+        h("span", { "aria-disabled": this.disabled ? toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), "aria-pressed": this.disabled ? null : 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;
+            } }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return 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",
@@ -268,11 +349,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";
@@ -644,9 +745,9 @@ const List = class {
     // --------------------------------------------------------------------------
     render() {
         const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-        return (h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$2.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+        return (h("div", { class: CSS$1.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS$1.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS$1.stack }, h("slot", { name: SLOTS$1.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS.actionsStart }), 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 }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$2.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+            ref: this.setFilterEl }), h("slot", { name: SLOTS$1.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS.actionsEnd })))))) : null, h("tbody", { class: CSS$1.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //
@@ -659,7 +760,7 @@ const List = class {
             locale: effectiveLocale,
             numberingSystem,
         };
-        return !parentListEl ? (h("div", { "aria-live": "polite", class: CSS.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, h("div", { key: "aria-item-count" }, messages.total.replace("{count}", numberStringFormatter.localize(enabledListItems.length.toString()))), enabledListItems.length ? (h("ol", { key: "aria-item-list" }, enabledListItems.map((item) => (h("li", null, item.label))))) : null)) : null;
+        return !parentListEl ? (h("div", { "aria-live": "polite", class: CSS$1.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, h("div", { key: "aria-item-count" }, messages.total.replace("{count}", numberStringFormatter.localize(enabledListItems.length.toString()))), enabledListItems.length ? (h("ol", { key: "aria-item-list" }, enabledListItems.map((item) => (h("li", null, item.label))))) : null)) : null;
     }
     connectObserver() {
         var _a;
@@ -1054,65 +1155,65 @@ const ListItem = class {
         if (selectionMode === "none" || selectionAppearance === "border") {
             return null;
         }
-        return (h("td", { class: CSS$2.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
+        return (h("td", { class: CSS$4.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
                 ? selectionMode === "multiple"
-                    ? ICONS.selectedMultiple
-                    : ICONS.selectedSingle
-                : ICONS.unselected, scale: "s" })));
+                    ? ICONS$2.selectedMultiple
+                    : ICONS$2.selectedSingle
+                : ICONS$2.unselected, scale: "s" })));
     }
     renderDragHandle() {
-        return this.dragHandle ? (h("td", { class: CSS$2.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { disabled: this.dragDisabled, label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+        return this.dragHandle ? (h("td", { class: CSS$4.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { disabled: this.dragDisabled, label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
     }
     renderOpen() {
         const { el, open, openable, parentListEl } = this;
         const dir = getElementDir(el);
         const icon = openable
             ? open
-                ? ICONS.open
+                ? ICONS$2.open
                 : dir === "rtl"
-                    ? ICONS.closedRTL
-                    : ICONS.closedLTR
-            : ICONS.blank;
+                    ? ICONS$2.closedRTL
+                    : ICONS$2.closedLTR
+            : ICONS$2.blank;
         const clickHandler = openable ? this.toggleOpen : this.itemClicked;
-        return openable || (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS$2.openContainer, key: "open-container", onClick: clickHandler }, h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
+        return openable || (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS$4.openContainer, key: "open-container", onClick: clickHandler }, h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
     }
     renderActionsStart() {
         const { label, hasActionsStart } = this;
-        return (h("td", { "aria-label": label, class: CSS$2.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
+        return (h("td", { "aria-label": label, class: CSS$4.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
             // 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.actionsStartEl = el) }, h("slot", { name: SLOTS$3.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+            ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS$2.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
     }
     renderActionsEnd() {
         const { label, hasActionsEnd, closable, messages } = this;
-        return (h("td", { "aria-label": label, class: CSS$2.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
+        return (h("td", { "aria-label": label, class: CSS$4.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
             // 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.actionsEndEl = el) }, h("slot", { name: SLOTS$3.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
+            ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS$2.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS$2.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
     }
     renderContentStart() {
         const { hasContentStart } = this;
-        return (h("div", { class: CSS$2.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS$3.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+        return (h("div", { class: CSS$4.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS$2.contentStart, onSlotchange: this.handleContentStartSlotChange })));
     }
     renderCustomContent() {
         const { hasCustomContent } = this;
-        return (h("div", { class: CSS$2.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS$3.content, onSlotchange: this.handleContentSlotChange })));
+        return (h("div", { class: CSS$4.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS$2.content, onSlotchange: this.handleContentSlotChange })));
     }
     renderContentEnd() {
         const { hasContentEnd } = this;
-        return (h("div", { class: CSS$2.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS$3.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+        return (h("div", { class: CSS$4.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS$2.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
     }
     renderContentBottom() {
         const { hasContentBottom, visualLevel } = this;
-        return (h("div", { class: CSS$2.contentBottom, hidden: !hasContentBottom, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("slot", { name: SLOTS$3.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
+        return (h("div", { class: CSS$4.contentBottom, hidden: !hasContentBottom, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("slot", { name: SLOTS$2.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
     }
     renderDefaultContainer() {
         return (h("div", { class: {
-                [CSS$2.nestedContainer]: true,
-                [CSS$2.nestedContainerHidden]: this.openable && !this.open,
+                [CSS$4.nestedContainer]: true,
+                [CSS$4.nestedContainerHidden]: this.openable && !this.open,
             } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) })));
     }
     renderContentProperties() {
         const { label, description, hasCustomContent } = this;
-        return !hasCustomContent && (!!label || !!description) ? (h("div", { class: CSS$2.content, key: "content" }, label ? (h("div", { class: CSS$2.label, key: "label" }, label)) : null, description ? (h("div", { class: CSS$2.description, key: "description" }, description)) : null)) : null;
+        return !hasCustomContent && (!!label || !!description) ? (h("div", { class: CSS$4.content, key: "content" }, label ? (h("div", { class: CSS$4.label, key: "label" }, label)) : null, description ? (h("div", { class: CSS$4.description, key: "description" }, description)) : null)) : null;
     }
     renderContentContainer() {
         const { description, label, selectionMode, hasCustomContent } = this;
@@ -1124,9 +1225,9 @@ const ListItem = class {
             this.renderContentEnd(),
         ];
         return (h("td", { "aria-label": label, class: {
-                [CSS$2.contentContainer]: true,
-                [CSS$2.contentContainerSelectable]: selectionMode !== "none",
-                [CSS$2.contentContainerHasCenterContent]: hasCenterContent,
+                [CSS$4.contentContainer]: true,
+                [CSS$4.contentContainerSelectable]: selectionMode !== "none",
+                [CSS$4.contentContainerHasCenterContent]: hasCenterContent,
             }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
             // 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.contentEl = el) }, content));
@@ -1137,9 +1238,9 @@ const ListItem = class {
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
         return (h(Host, null, h("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
-                [CSS$2.container]: true,
-                [CSS$2.containerBorderSelected]: borderSelected,
-                [CSS$2.containerBorderUnselected]: borderUnselected,
+                [CSS$4.container]: true,
+                [CSS$4.containerBorderSelected]: borderSelected,
+                [CSS$4.containerBorderUnselected]: borderUnselected,
             }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }, tabIndex: active ? 0 : -1,
             // 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.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer()));
@@ -1194,4 +1295,62 @@ const ListItem = class {
 };
 ListItem.style = listItemCss;
 
-export { ActionBar as calcite_action_bar, List as calcite_list, ListItem as calcite_list_item };
+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) {
+        registerInstance(this, hostRef);
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleActionsStartSlotChange = (event) => {
+            this.hasActionsStart = slotChangeHasAssignedElement(event);
+        };
+        this.handleActionsEndSlotChange = (event) => {
+            this.hasActionsEnd = slotChangeHasAssignedElement(event);
+        };
+        this.handleContentStartSlotChange = (event) => {
+            this.hasContentStart = slotChangeHasAssignedElement(event);
+        };
+        this.handleContentEndSlotChange = (event) => {
+            this.hasContentEnd = slotChangeHasAssignedElement(event);
+        };
+        this.disabled = false;
+        this.hasActionsStart = false;
+        this.hasActionsEnd = false;
+        this.hasContentStart = false;
+        this.hasContentEnd = false;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderActionsStart() {
+        const { hasActionsStart } = this;
+        return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+    }
+    renderActionsEnd() {
+        const { hasActionsEnd } = this;
+        return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+    }
+    renderContentStart() {
+        const { hasContentStart } = this;
+        return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+    }
+    renderDefaultContent() {
+        return (h("div", { class: CSS.content }, h("slot", null)));
+    }
+    renderContentEnd() {
+        const { hasContentEnd } = this;
+        return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+    }
+    render() {
+        return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+    }
+};
+Stack.style = stackCss;
+
+export { Filter as calcite_filter, Handle as calcite_handle, List as calcite_list, ListItem as calcite_list_item, Stack as calcite_stack };