@esri/solutions-components 0.6.11 → 0.6.12

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

@@ -3,330 +3,256 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, H as Host } from './index-b5d9d795.js';
-import { f as filter } from './filter-60517290.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-bd6837bc.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-47170cb6.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c7de2486.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-dff8f839.js';
+import { s as slotChangeGetAssignedElements, r as slotChangeHasAssignedElement, f as focusFirstTabbable, t as toAriaBoolean, a as getElementDir } from './dom-37f2dec9.js';
+import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-f848be11.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale-146251f7.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-5f748619.js';
-import { d as debounce } from './debounce-229b1a22.js';
-import { t as toAriaBoolean, r as slotChangeHasAssignedElement, a as getElementDir } from './dom-37f2dec9.js';
 import { c as createObserver } from './observers-95c50046.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 } from './utils-7af1efcc.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-d9c203e4.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-86761b28.js';
+import { d as debounce } from './debounce-229b1a22.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-bd6837bc.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 } from './utils-7af1efcc.js';
 import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-8a84709a.js';
-import './key-02fa06ae.js';
+import { S as SLOTS$2 } from './resources-74ea5c42.js';
 import './guid-70cda807.js';
 import './resources-1e6d76df.js';
+import './key-02fa06ae.js';
+import './resources-c676d5de.js';
+import './resources-b392187d.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.
  * v1.6.1
  */
-const CSS$3 = {
-  container: "container",
-  searchIcon: "search-icon",
+const CSS$1 = {
+  actionGroupEnd: "action-group--end",
 };
-const ICONS$1 = {
-  search: "search",
-  close: "x",
+const SLOTS$1 = {
+  actionsEnd: "actions-end",
+  bottomActions: "bottom-actions",
+  expandTooltip: "expand-tooltip",
 };
-const DEBOUNCE_TIMEOUT = 250;
 
-const filterCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-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-ui-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-ui-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-ui-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-ui-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-ui-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-ui-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const actionBarCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-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-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-ui-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 Filter = class {
+const ActionBar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.calciteFilterChange = createEvent(this, "calciteFilterChange", 6);
+    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));
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    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.keyDownHandler = (event) => {
-      if (event.key === "Escape") {
-        this.clear();
-        event.preventDefault();
+    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;
+          }
+        });
       }
-      if (event.key === "Enter") {
-        event.preventDefault();
+    };
+    this.resizeHandlerEntries = (entries) => {
+      entries.forEach(this.resizeHandler);
+    };
+    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;
       }
+      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.clear = () => {
-      this.value = "";
-      this.filterDebounced("", true);
-      this.setFocus();
+    this.setExpandToggleRef = (el) => {
+      this.expandToggleEl = el;
     };
-    this.items = [];
-    this.disabled = false;
-    this.filteredItems = [];
-    this.placeholder = undefined;
-    this.scale = "m";
-    this.value = "";
+    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.expandDisabled = false;
+    this.expanded = false;
+    this.layout = "vertical";
+    this.overflowActionsDisabled = false;
+    this.position = undefined;
+    this.scale = undefined;
     this.messages = undefined;
     this.messageOverrides = undefined;
     this.effectiveLocale = undefined;
+    this.hasActionsEnd = false;
+    this.hasBottomActions = false;
+    this.expandTooltip = undefined;
     this.defaultMessages = undefined;
   }
-  watchItemsHandler() {
-    this.filterDebounced(this.value);
+  expandHandler() {
+    this.overflowActions();
+  }
+  expandedHandler() {
+    const { el, expanded } = this;
+    toggleChildActionText({ el, expanded });
+    this.overflowActions();
+  }
+  layoutHandler() {
+    this.updateGroups();
+  }
+  overflowDisabledHandler(overflowActionsDisabled) {
+    overflowActionsDisabled
+      ? this.resizeObserver.disconnect()
+      : this.resizeObserver.observe(this.el);
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
-  valueHandler(value) {
-    this.filterDebounced(value);
-  }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
-  //--------------------------------------------------------------------------
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-    this.updateFiltered(filter(this.items, this.value));
-    await setUpMessages(this);
+  // --------------------------------------------------------------------------
+  componentDidLoad() {
+    const { el, expanded } = this;
+    setComponentLoaded(this);
+    toggleChildActionText({ el, expanded });
+    this.overflowActions();
   }
   connectedCallback() {
-    connectInteractive(this);
+    var _a, _b;
+    const { el, expanded } = 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);
   }
-  componentDidRender() {
-    updateHostInteraction(this);
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
   }
   disconnectedCallback() {
-    disconnectInteractive(this);
+    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);
     disconnectLocalized(this);
     disconnectMessages(this);
-    this.filterDebounced.cancel();
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
   }
   // --------------------------------------------------------------------------
   //
-  //  Public Methods
+  //  Methods
   //
   // --------------------------------------------------------------------------
   /**
-   * Performs a filter on the component.
-   *
-   * This method can be useful because filtering is delayed and asynchronous.
+   * Overflows actions that won't fit into menus.
    *
-   * @param {string} value - The filter text value.
-   * @returns {Promise<void>}
+   * @internal
    */
-  async filter(value = this.value) {
-    return new Promise((resolve) => {
-      this.value = value;
-      this.filterDebounced(value, false, resolve);
-    });
+  async overflowActions() {
+    this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component's first focusable element.
+   */
   async setFocus() {
-    var _a;
     await componentFocusable(this);
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    focusFirstTabbable(this.el);
   }
-  updateFiltered(filtered, emit = false, callback) {
-    this.filteredItems = filtered;
-    if (emit) {
-      this.calciteFilterChange.emit();
-    }
-    callback === null || callback === void 0 ? void 0 : callback();
+  updateGroups() {
+    this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+  }
+  setGroupLayout(groups) {
+    groups.forEach((group) => (group.layout = this.layout));
   }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
-  render() {
-    const { disabled, scale } = this;
-    return (h(Fragment, null, h("div", { class: CSS$3.container }, h("label", null, h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS$1.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+  renderBottomActionGroup() {
+    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = 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,
       // eslint-disable-next-line react/jsx-sort-props
-      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.
- * v1.6.1
- */
-const CSS$2 = {
-  handle: "handle",
-  handleActivated: "handle--activated",
-};
-const ICONS = {
-  drag: "drag",
-};
-
-const handleCss = ":host{display:flex}.handle{display:flex;cursor:move;align-items:center;justify-content:center;align-self:stretch;border-style:none;background-color:transparent;outline-color:transparent;color:var(--calcite-ui-border-input);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.handle:focus{color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.handle--activated{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.handle calcite-icon{color:inherit}: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) => {
-      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 = () => {
-      this.activated = false;
-    };
-    this.activated = 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;
+      ref: this.setExpandToggleRef })) : null;
+    return (h("calcite-action-group", { class: CSS$1.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), 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));
   }
-  handleAriaTextChange() {
-    const message = this.getAriaText("live");
-    if (message) {
-      this.calciteInternalHandleChange.emit({
-        message,
-      });
-    }
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    connectMessages(this);
-    connectLocalized(this);
-  }
-  async componentWillLoad() {
-    setUpLoadableComponent(this);
-    await setUpMessages(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  disconnectedCallback() {
-    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() {
-    var _a;
-    return (
-    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-    h("span", { "aria-label": this.getAriaText("label"), "aria-pressed": toAriaBoolean(this.activated), class: { [CSS$2.handle]: true, [CSS$2.handleActivated]: this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0", title: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.dragHandle,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => {
-        this.handleButton = el;
-      } }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+    return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "messages": ["handleAriaTextChange"],
-    "label": ["handleAriaTextChange"],
-    "activated": ["handleAriaTextChange"],
-    "setPosition": ["handleAriaTextChange"],
-    "setSize": ["handleAriaTextChange"],
+    "expandDisabled": ["expandHandler"],
+    "expanded": ["expandedHandler"],
+    "layout": ["layoutHandler"],
+    "overflowActionsDisabled": ["overflowDisabledHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
 };
-Handle.style = handleCss;
+ActionBar.style = actionBarCss;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
  * v1.6.1
  */
-const CSS$1 = {
+const CSS = {
   container: "container",
   table: "table",
   scrim: "scrim",
@@ -336,31 +262,11 @@ const CSS$1 = {
   assistiveText: "assistive-text",
 };
 const debounceTimeout = 0;
-const SLOTS$1 = {
+const SLOTS = {
   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.
- * v1.6.1
- */
-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-ui-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{position:relative;z-index:var(--calcite-app-z-index);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){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-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)}::slotted(calcite-list-item:last-child){--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)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-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";
@@ -660,9 +566,9 @@ const List = class {
   // --------------------------------------------------------------------------
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-    return (h("div", { class: CSS$1.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, 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: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+    return (h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, 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: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
       // eslint-disable-next-line react/jsx-sort-props
-      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 })))));
+      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 })))));
   }
   // --------------------------------------------------------------------------
   //
@@ -1041,47 +947,47 @@ const ListItem = class {
     if (selectionMode === "none" || selectionAppearance === "border") {
       return null;
     }
-    return (h("td", { class: CSS$4.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
+    return (h("td", { class: CSS$2.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
         ? selectionMode === "multiple"
-          ? ICONS$2.selectedMultiple
-          : ICONS$2.selectedSingle
-        : ICONS$2.unselected, scale: "s" })));
+          ? ICONS.selectedMultiple
+          : ICONS.selectedSingle
+        : ICONS.unselected, scale: "s" })));
   }
   renderDragHandle() {
-    return this.dragHandle ? (h("td", { class: CSS$4.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+    return this.dragHandle ? (h("td", { class: CSS$2.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
   }
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
-    return openable ? (h("td", { class: CSS$4.openContainer, key: "open-container", onClick: this.toggleOpen }, h("calcite-icon", { icon: open ? ICONS$2.open : dir === "rtl" ? ICONS$2.closedRTL : ICONS$2.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS$4.openContainer, key: "open-container", onClick: this.itemClicked }, h("calcite-icon", { icon: ICONS$2.blank, scale: "s" }))) : null;
+    return openable ? (h("td", { class: CSS$2.openContainer, key: "open-container", onClick: this.toggleOpen }, h("calcite-icon", { icon: open ? ICONS.open : dir === "rtl" ? ICONS.closedRTL : ICONS.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS$2.openContainer, key: "open-container", onClick: this.itemClicked }, h("calcite-icon", { icon: ICONS.blank, scale: "s" }))) : null;
   }
   renderActionsStart() {
     const { label, hasActionsStart } = this;
-    return (h("td", { "aria-label": label, class: CSS$4.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
+    return (h("td", { "aria-label": label, class: CSS$2.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS$2.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+      ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS$3.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
   }
   renderActionsEnd() {
     const { label, hasActionsEnd, closable, messages } = this;
-    return (h("td", { "aria-label": label, class: CSS$4.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
+    return (h("td", { "aria-label": label, class: CSS$2.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
       // eslint-disable-next-line react/jsx-sort-props
-      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));
+      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));
   }
   renderContentStart() {
     const { hasContentStart } = this;
-    return (h("div", { class: CSS$4.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS$2.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+    return (h("div", { class: CSS$2.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS$3.contentStart, onSlotchange: this.handleContentStartSlotChange })));
   }
   renderCustomContent() {
     const { hasCustomContent } = this;
-    return (h("div", { class: CSS$4.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS$2.content, onSlotchange: this.handleContentSlotChange })));
+    return (h("div", { class: CSS$2.customContent, hidden: !hasCustomContent }, h("slot", { name: SLOTS$3.content, onSlotchange: this.handleContentSlotChange })));
   }
   renderContentEnd() {
     const { hasContentEnd } = this;
-    return (h("div", { class: CSS$4.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS$2.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+    return (h("div", { class: CSS$2.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS$3.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
   }
   renderContentProperties() {
     const { label, description, hasCustomContent } = this;
-    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;
+    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;
   }
   renderContentContainer() {
     const { description, label, selectionMode, hasCustomContent } = this;
@@ -1093,9 +999,9 @@ const ListItem = class {
       this.renderContentEnd(),
     ];
     return (h("td", { "aria-label": label, class: {
-        [CSS$4.contentContainer]: true,
-        [CSS$4.contentContainerSelectable]: selectionMode !== "none",
-        [CSS$4.contentContainerHasCenterContent]: hasCenterContent,
+        [CSS$2.contentContainer]: true,
+        [CSS$2.contentContainerSelectable]: selectionMode !== "none",
+        [CSS$2.contentContainerHasCenterContent]: hasCenterContent,
       }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.contentEl = el) }, content));
@@ -1106,14 +1012,14 @@ 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$4.container]: true,
-        [CSS$4.containerBorderSelected]: borderSelected,
-        [CSS$4.containerBorderUnselected]: borderUnselected,
+        [CSS$2.container]: true,
+        [CSS$2.containerBorderSelected]: borderSelected,
+        [CSS$2.containerBorderUnselected]: borderUnselected,
       }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
-        [CSS$4.nestedContainer]: true,
-        [CSS$4.nestedContainerHidden]: openable && !open,
+        [CSS$2.nestedContainer]: true,
+        [CSS$2.nestedContainerHidden]: openable && !open,
       } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
   }
   // --------------------------------------------------------------------------
@@ -1165,62 +1071,4 @@ const ListItem = class {
 };
 ListItem.style = listItemCss;
 
-const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-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-ui-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-end ::slotted(calcite-action){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 };
+export { ActionBar as calcite_action_bar, List as calcite_list, ListItem as calcite_list_item };