@esri/solutions-components 0.6.11 → 0.6.12

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

@@ -7,330 +7,256 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0e50040c.js');
-const filter = require('./filter-8d8c453e.js');
-const interactive = require('./interactive-48299817.js');
-const loadable = require('./loadable-6925d840.js');
-const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-62d807df.js');
-const debounce = require('./debounce-30afab47.js');
+const index = require('./index-ee37804b.js');
+const conditionalSlot = require('./conditionalSlot-f10611d3.js');
 const dom = require('./dom-456f9f13.js');
+const loadable = require('./loadable-13605f73.js');
+const locale = require('./locale-79c3d30e.js');
 const observers = require('./observers-9912f013.js');
+const t9n = require('./t9n-58d20225.js');
+const ExpandToggle = require('./ExpandToggle-511435d5.js');
+const debounce = require('./debounce-30afab47.js');
+const interactive = require('./interactive-48299817.js');
 const utils = require('./utils-09191c93.js');
 const sortableComponent = require('./sortableComponent-70bf79de.js');
-require('./key-8de93212.js');
+const resources = require('./resources-f15abc99.js');
 require('./guid-d1123d5e.js');
 require('./resources-993f6faf.js');
+require('./key-8de93212.js');
+require('./resources-a2e2a544.js');
+require('./resources-10d29626.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) {
     index.registerInstance(this, hostRef);
-    this.calciteFilterChange = index.createEvent(this, "calciteFilterChange", 6);
+    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));
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    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.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.debounce(({ width, height }) => {
+      const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
+      if (overflowActionsDisabled ||
+        (layout === "vertical" && !height) ||
+        (layout === "horizontal" && !width)) {
+        return;
       }
+      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.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 = 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.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;
+    ExpandToggle.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() {
     t9n.updateMessages(this, this.effectiveLocale);
   }
-  //--------------------------------------------------------------------------
+  // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
-  //--------------------------------------------------------------------------
-  async componentWillLoad() {
-    loadable.setUpLoadableComponent(this);
-    this.updateFiltered(filter.filter(this.items, this.value));
-    await t9n.setUpMessages(this);
+  // --------------------------------------------------------------------------
+  componentDidLoad() {
+    const { el, expanded } = this;
+    loadable.setComponentLoaded(this);
+    ExpandToggle.toggleChildActionText({ el, expanded });
+    this.overflowActions();
   }
   connectedCallback() {
-    interactive.connectInteractive(this);
+    var _a, _b;
+    const { el, expanded } = 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);
   }
-  componentDidRender() {
-    interactive.updateHostInteraction(this);
+  async componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+    await t9n.setUpMessages(this);
   }
   disconnectedCallback() {
-    interactive.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();
+    conditionalSlot.disconnectConditionalSlotComponent(this);
     locale.disconnectLocalized(this);
     t9n.disconnectMessages(this);
-    this.filterDebounced.cancel();
-  }
-  componentDidLoad() {
-    loadable.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 loadable.componentFocusable(this);
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    dom.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 (index.h(index.Fragment, null, index.h("div", { class: CSS$3.container }, index.h("label", null, index.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 ? (index.h(ExpandToggle.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;
-      } })))));
+      ref: this.setExpandToggleRef })) : null;
+    return (index.h("calcite-action-group", { class: CSS$1.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), 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));
   }
-  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.
- * 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) {
-    index.registerInstance(this, hostRef);
-    this.calciteHandleNudge = index.createEvent(this, "calciteHandleNudge", 6);
-    this.calciteInternalHandleChange = index.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;
-  }
-  handleAriaTextChange() {
-    const message = this.getAriaText("live");
-    if (message) {
-      this.calciteInternalHandleChange.emit({
-        message,
-      });
-    }
-  }
-  onMessagesChange() {
-    /* wired up by t9n util */
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    t9n.connectMessages(this);
-    locale.connectLocalized(this);
-  }
-  async componentWillLoad() {
-    loadable.setUpLoadableComponent(this);
-    await t9n.setUpMessages(this);
-  }
-  componentDidLoad() {
-    loadable.setComponentLoaded(this);
-  }
-  disconnectedCallback() {
-    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() {
-    var _a;
-    return (
-    // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-    index.h("span", { "aria-label": this.getAriaText("label"), "aria-pressed": dom.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;
-      } }, index.h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+    return (index.h(index.Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return index.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",
@@ -340,31 +266,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";
@@ -664,9 +570,9 @@ const List = class {
   // --------------------------------------------------------------------------
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-    return (index.h("div", { class: CSS$1.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, 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: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+    return (index.h("div", { class: CSS.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, 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: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
       // eslint-disable-next-line react/jsx-sort-props
-      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 })))));
+      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 })))));
   }
   // --------------------------------------------------------------------------
   //
@@ -1169,66 +1075,6 @@ 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) {
-    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_action_bar = ActionBar;
 exports.calcite_list = List;
 exports.calcite_list_item = ListItem;
-exports.calcite_stack = Stack;

package/dist/cjs/calcite-action-group_2.cjs.entry.js

@@ -7,11 +7,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0e50040c.js');
-const conditionalSlot = require('./conditionalSlot-126d557f.js');
-const loadable = require('./loadable-6925d840.js');
+const index = require('./index-ee37804b.js');
+const conditionalSlot = require('./conditionalSlot-f10611d3.js');
+const loadable = require('./loadable-13605f73.js');
 const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-62d807df.js');
+const t9n = require('./t9n-58d20225.js');
 const resources$1 = require('./resources-10d29626.js');
 const resources = require('./resources-a2e2a544.js');
 const dom = require('./dom-456f9f13.js');

package/dist/cjs/calcite-action-pad.cjs.entry.js

@@ -7,13 +7,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0e50040c.js');
-const conditionalSlot = require('./conditionalSlot-126d557f.js');
+const index = require('./index-ee37804b.js');
+const conditionalSlot = require('./conditionalSlot-f10611d3.js');
 const dom = require('./dom-456f9f13.js');
-const loadable = require('./loadable-6925d840.js');
+const loadable = require('./loadable-13605f73.js');
 const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-62d807df.js');
-const ExpandToggle = require('./ExpandToggle-c5690e14.js');
+const t9n = require('./t9n-58d20225.js');
+const ExpandToggle = require('./ExpandToggle-511435d5.js');
 const observers = require('./observers-9912f013.js');
 require('./guid-d1123d5e.js');
 require('./resources-993f6faf.js');