@esri/solutions-components 0.7.34 → 0.7.35

package/dist/esm/calcite-action-menu_2.entry.js

@@ -3,23 +3,23 @@
  * 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, f as forceUpdate, H as Host } from './index-7183ce4a.js';
-import { g as getRoundRobinIndex } from './array-51c31356.js';
-import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement, f as focusFirstTabbable, q as queryElementRoots } from './dom-8f926f33.js';
-import { g as guid } from './guid-36c6c6a5.js';
-import { i as isActivationKey } from './key-af303047.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { a as activeAttr, C as CSS$1, I as ICONS, S as SLOTS } from './resources-1a8d4d77.js';
-import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-c397f653.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-14368766.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-982c6b9e.js';
-import { H as Heading } from './Heading-c45d3f45.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-f16911e7.js';
-import { c as createObserver } from './observers-8ce200f2.js';
-import { F as FloatingArrow } from './FloatingArrow-245804f3.js';
-import { g as getIconScale } from './component-98bae46b.js';
-import './resources-cdc36705.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, f as forceUpdate, H as Host } from './index-164d485a.js';
+import { g as getRoundRobinIndex } from './array-396bdf3c.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement, f as focusFirstTabbable, q as queryElementRoots } from './dom-38c6f027.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { i as isActivationKey } from './key-c83d835f.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
+import { a as activeAttr, C as CSS$1, I as ICONS, S as SLOTS } from './resources-20074cb1.js';
+import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-41dfe3f1.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-47ddce58.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-9f90f493.js';
+import { H as Heading } from './Heading-94780f62.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-436fb2b1.js';
+import { c as createObserver } from './observers-d04d1da9.js';
+import { F as FloatingArrow } from './FloatingArrow-93d6d18b.js';
+import { g as getIconScale } from './component-edd2c3cd.js';
+import './resources-8834f920.js';
 import './debounce-229b1a22.js';
 
 const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-color-text-2)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-color-border-3)}::slotted(calcite-action-group:last-child){border-block-end:0}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
@@ -146,7 +146,7 @@ const ActionMenu = class {
                 }
                 return previousValue;
             }, []);
-            this.actionElements = actions;
+            this.actionElements = actions.filter((action) => !action.disabled && !action.hidden);
         };
         this.menuButtonKeyDown = (event) => {
             const { key } = event;
@@ -211,6 +211,12 @@ const ActionMenu = class {
             this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
             this.open = value;
         };
+        this.handlePopoverOpen = () => {
+            this.open = true;
+        };
+        this.handlePopoverClose = () => {
+            this.open = false;
+        };
         this.appearance = "solid";
         this.expanded = false;
         this.flipPlacements = undefined;
@@ -227,6 +233,9 @@ const ActionMenu = class {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
+    connectedCallback() {
+        this.connectMenuButtonEl();
+    }
     componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -248,16 +257,6 @@ const ActionMenu = class {
         this.calciteActionMenuOpen.emit();
         this.setTooltipReferenceElement();
     }
-    closeCalciteActionMenuOnClick(event) {
-        if (!isPrimaryPointerButton(event)) {
-            return;
-        }
-        const composedPath = event.composedPath();
-        if (composedPath.includes(this.el)) {
-            return;
-        }
-        this.open = false;
-    }
     activeMenuItemIndexHandler() {
         this.updateActions(this.actionElements);
     }
@@ -282,7 +281,7 @@ const ActionMenu = class {
         const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements, } = this;
         const activeAction = actionElements[activeMenuItemIndex];
         const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-        return (h("calcite-popover", { flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$1.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+        return (h("calcite-popover", { autoClose: true, flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, onCalcitePopoverClose: this.handlePopoverClose, onCalcitePopoverOpen: this.handlePopoverOpen, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$1.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
     }
     render() {
         return (h(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), h("slot", { name: SLOTS.tooltip, onSlotchange: this.updateTooltip })));
@@ -302,18 +301,18 @@ ActionMenu.style = actionMenuCss;
 /*!
  * 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
+ * v2.4.0
  */
 const CSS = {
-  container: "container",
-  imageContainer: "image-container",
-  closeButtonContainer: "close-button-container",
-  closeButton: "close-button",
-  content: "content",
-  hasHeader: "has-header",
-  header: "header",
-  headerContent: "header-content",
-  heading: "heading",
+    container: "container",
+    imageContainer: "image-container",
+    closeButtonContainer: "close-button-container",
+    closeButton: "close-button",
+    content: "content",
+    hasHeader: "has-header",
+    header: "header",
+    headerContent: "header-content",
+    heading: "heading",
 };
 const defaultPopoverPlacement = "auto";
 const ARIA_CONTROLS = "aria-controls";
@@ -322,85 +321,85 @@ const ARIA_EXPANDED = "aria-expanded";
 /*!
  * 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
+ * v2.4.0
  */
 class PopoverManager {
-  constructor() {
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
-    this.registeredElements = new Map();
-    this.registeredElementCount = 0;
+    constructor() {
+        // --------------------------------------------------------------------------
+        //
+        //  Private Properties
+        //
+        // --------------------------------------------------------------------------
+        this.registeredElements = new Map();
+        this.registeredElementCount = 0;
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.queryPopover = (composedPath) => {
+            const { registeredElements } = this;
+            const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+            return registeredElements.get(registeredElement);
+        };
+        this.togglePopovers = (event) => {
+            const composedPath = event.composedPath();
+            const togglePopover = this.queryPopover(composedPath);
+            if (togglePopover && !togglePopover.triggerDisabled) {
+                togglePopover.open = !togglePopover.open;
+            }
+            Array.from(this.registeredElements.values())
+                .filter((popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover))
+                .forEach((popover) => (popover.open = false));
+        };
+        this.keyHandler = (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            if (event.key === "Escape") {
+                this.closeAllPopovers();
+            }
+            else if (isActivationKey(event.key)) {
+                this.togglePopovers(event);
+            }
+        };
+        this.clickHandler = (event) => {
+            if (isPrimaryPointerButton(event)) {
+                this.togglePopovers(event);
+            }
+        };
+    }
     // --------------------------------------------------------------------------
     //
-    //  Private Methods
+    //  Public Methods
     //
     // --------------------------------------------------------------------------
-    this.queryPopover = (composedPath) => {
-      const { registeredElements } = this;
-      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
-      return registeredElements.get(registeredElement);
-    };
-    this.togglePopovers = (event) => {
-      const composedPath = event.composedPath();
-      const togglePopover = this.queryPopover(composedPath);
-      if (togglePopover && !togglePopover.triggerDisabled) {
-        togglePopover.open = !togglePopover.open;
-      }
-      Array.from(this.registeredElements.values())
-        .filter((popover) => popover !== togglePopover && popover.autoClose && popover.open && !composedPath.includes(popover))
-        .forEach((popover) => (popover.open = false));
-    };
-    this.keyHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (event.key === "Escape") {
-        this.closeAllPopovers();
-      }
-      else if (isActivationKey(event.key)) {
-        this.togglePopovers(event);
-      }
-    };
-    this.clickHandler = (event) => {
-      if (isPrimaryPointerButton(event)) {
-        this.togglePopovers(event);
-      }
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  registerElement(referenceEl, popover) {
-    this.registeredElementCount++;
-    this.registeredElements.set(referenceEl, popover);
-    if (this.registeredElementCount === 1) {
-      this.addListeners();
-    }
-  }
-  unregisterElement(referenceEl) {
-    if (this.registeredElements.delete(referenceEl)) {
-      this.registeredElementCount--;
-    }
-    if (this.registeredElementCount === 0) {
-      this.removeListeners();
-    }
-  }
-  closeAllPopovers() {
-    Array.from(this.registeredElements.values()).forEach((popover) => (popover.open = false));
-  }
-  addListeners() {
-    window.addEventListener("pointerdown", this.clickHandler, { capture: true });
-    window.addEventListener("keydown", this.keyHandler, { capture: true });
-  }
-  removeListeners() {
-    window.removeEventListener("pointerdown", this.clickHandler, { capture: true });
-    window.removeEventListener("keydown", this.keyHandler, { capture: true });
-  }
+    registerElement(referenceEl, popover) {
+        this.registeredElementCount++;
+        this.registeredElements.set(referenceEl, popover);
+        if (this.registeredElementCount === 1) {
+            this.addListeners();
+        }
+    }
+    unregisterElement(referenceEl) {
+        if (this.registeredElements.delete(referenceEl)) {
+            this.registeredElementCount--;
+        }
+        if (this.registeredElementCount === 0) {
+            this.removeListeners();
+        }
+    }
+    closeAllPopovers() {
+        Array.from(this.registeredElements.values()).forEach((popover) => (popover.open = false));
+    }
+    addListeners() {
+        window.addEventListener("pointerdown", this.clickHandler, { capture: true });
+        window.addEventListener("keydown", this.keyHandler, { capture: true });
+    }
+    removeListeners() {
+        window.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+        window.removeEventListener("keydown", this.keyHandler, { capture: true });
+    }
 }
 
 const popoverCss = ":host{--calcite-floating-ui-z-index:var(--calcite-popover-z-index, var(--calcite-z-index-popup));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}.calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}:host([scale=s]) .heading{padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .heading{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .heading{padding-inline:1.25rem;padding-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}.arrow::before{outline:1px solid var(--calcite-color-border-3)}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-color-border-3)}.heading{margin:0px;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);word-wrap:break-word;word-break:break-word}.container{position:relative;display:flex;block-size:100%;flex-direction:row;flex-wrap:nowrap;border-radius:0.25rem;color:var(--calcite-color-text-1)}.container.has-header{flex-direction:column}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:flex;overflow:hidden;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
@@ -530,6 +529,7 @@ const Popover = class {
     }
     openHandler() {
         onToggleOpenCloseComponent(this);
+        this.reposition(true);
         this.setExpandedAttr();
     }
     overlayPositioningHandler() {
@@ -626,7 +626,6 @@ const Popover = class {
             : referenceElement) || null);
     }
     onBeforeOpen() {
-        this.reposition(true);
         this.calcitePopoverBeforeOpen.emit();
     }
     onOpen() {
@@ -639,7 +638,6 @@ const Popover = class {
     onClose() {
         this.calcitePopoverClose.emit();
         deactivateFocusTrap(this);
-        this.reposition(true);
     }
     // --------------------------------------------------------------------------
     //

package/dist/esm/calcite-action-pad_2.entry.js

@@ -3,34 +3,34 @@
  * 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 } from './dom-8f926f33.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-f16911e7.js';
-import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-96688cda.js';
-import { c as createObserver } from './observers-8ce200f2.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-12c4fcfb.js';
+import { s as slotChangeGetAssignedElements } from './dom-38c6f027.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-436fb2b1.js';
+import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-b6eb575e.js';
+import { c as createObserver } from './observers-d04d1da9.js';
 import { l as loadModules } from './loadModules-b677d6d7.js';
-import './guid-36c6c6a5.js';
-import './resources-cdc36705.js';
-import './key-af303047.js';
-import './resources-4bcfc016.js';
-import './resources-1a8d4d77.js';
+import './guid-b75a5f7b.js';
+import './resources-8834f920.js';
+import './key-c83d835f.js';
+import './resources-b0e2b809.js';
+import './resources-20074cb1.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.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
+ * v2.4.0
  */
 const CSS$1 = {
-  actionGroupEnd: "action-group--end",
-  container: "container",
+    actionGroupEnd: "action-group--end",
+    container: "container",
 };
 const SLOTS = {
-  expandTooltip: "expand-tooltip",
+    expandTooltip: "expand-tooltip",
 };
 
 const actionPadCss = ":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{display:block}@keyframes in{0%{opacity:0}100%{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.125rem;--calcite-action-pad-expanded-max-width:auto;background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px}.container{display:inline-flex;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-color-background);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0px}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-width:0px;padding:0px;border-inline-end-width:1px}::slotted(calcite-action-group:last-child){border-block-end-width:0px}:host([hidden]){display:none}[hidden]{display:none}";
@@ -78,6 +78,7 @@ const ActionPad = class {
         this.scale = undefined;
         this.messages = undefined;
         this.messageOverrides = undefined;
+        this.overlayPositioning = "absolute";
         this.expandTooltip = undefined;
         this.effectiveLocale = "";
         this.defaultMessages = undefined;
@@ -143,11 +144,11 @@ const ActionPad = class {
     //
     // --------------------------------------------------------------------------
     renderBottomActionGroup() {
-        const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, } = this;
+        const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning, } = 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 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 expandToggleNode ? (h("calcite-action-group", { class: CSS$1.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, scale: scale }, h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
+        return expandToggleNode ? (h("calcite-action-group", { class: CSS$1.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
     }
     render() {
         return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("div", { class: CSS$1.container }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));

package/dist/esm/calcite-action_2.entry.js

@@ -3,42 +3,42 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement, f as forceUpdate } from './index-7183ce4a.js';
-import { t as toAriaBoolean } from './dom-8f926f33.js';
-import { g as guid } from './guid-36c6c6a5.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-20bb1dc4.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
-import { c as createObserver } from './observers-8ce200f2.js';
-import { g as getIconScale } from './component-98bae46b.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-f16911e7.js';
-import './resources-cdc36705.js';
-import './browser-b4c16201.js';
-import './key-af303047.js';
+import { r as registerInstance, h, H as Host, g as getElement, f as forceUpdate } from './index-164d485a.js';
+import { t as toAriaBoolean } from './dom-38c6f027.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-39bf5602.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
+import { c as createObserver } from './observers-d04d1da9.js';
+import { g as getIconScale } from './component-edd2c3cd.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-436fb2b1.js';
+import './resources-8834f920.js';
+import './browser-d60104bd.js';
+import './key-c83d835f.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
+ * v2.4.0
  */
 const CSS = {
-  button: "button",
-  buttonTextVisible: "button--text-visible",
-  buttonCompact: "button--compact",
-  indicatorText: "indicator-text",
-  iconContainer: "icon-container",
-  slotContainer: "slot-container",
-  slotContainerHidden: "slot-container--hidden",
-  textContainer: "text-container",
-  textContainerVisible: "text-container--visible",
-  indicatorWithIcon: "indicator-with-icon",
-  indicatorWithoutIcon: "indicator-without-icon",
+    button: "button",
+    buttonTextVisible: "button--text-visible",
+    buttonCompact: "button--compact",
+    indicatorText: "indicator-text",
+    iconContainer: "icon-container",
+    slotContainer: "slot-container",
+    slotContainerHidden: "slot-container--hidden",
+    textContainer: "text-container",
+    textContainerVisible: "text-container--visible",
+    indicatorWithIcon: "indicator-with-icon",
+    indicatorWithoutIcon: "indicator-without-icon",
 };
 const SLOTS = {
-  tooltip: "tooltip",
+    tooltip: "tooltip",
 };
 
-const actionCss = ":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;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.button:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);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          )}.button:active{background-color:var(--calcite-color-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([data-active]) .button{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([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}:host([active]) .button:active{background-color:var(--calcite-color-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent}:host([appearance=transparent][active]) .button,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading][appearance=solid]) .button,:host([loading][appearance=solid]) .button:hover,:host([loading][appearance=solid]) .button:focus{background-color:var(--calcite-color-foreground-1)}:host([loading][appearance=solid]) .button .text-container,:host([loading][appearance=solid]) .button:hover .text-container,:host([loading][appearance=solid]) .button:focus .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-color-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.indicator-with-icon{position:relative}.indicator-with-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-without-icon{margin-inline:0.25rem;inline-size:1rem;position:relative}.indicator-without-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-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 actionCss = ":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;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand);--calcite-action-color-transparent-hover:var(--calcite-color-transparent-hover);--calcite-action-color-transparent-press:var(--calcite-color-transparent-press)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.button:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);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          )}.button:active{background-color:var(--calcite-color-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([data-active]) .button{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([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}:host([active]) .button:active{background-color:var(--calcite-color-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent}:host([appearance=transparent][active]) .button,:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:var(--calcite-action-color-transparent-hover)}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-color-transparent-press)}:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading][appearance=solid]) .button,:host([loading][appearance=solid]) .button:hover,:host([loading][appearance=solid]) .button:focus{background-color:var(--calcite-color-foreground-1)}:host([loading][appearance=solid]) .button .text-container,:host([loading][appearance=solid]) .button:hover .text-container,:host([loading][appearance=solid]) .button:focus .text-container{opacity:var(--calcite-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-color-text-3);margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.indicator-with-icon{position:relative}.indicator-with-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-without-icon{margin-inline:0.25rem;inline-size:1rem;position:relative}.indicator-without-icon::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}.indicator-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 Action = class {
     constructor(hostRef) {
@@ -168,9 +168,9 @@ const Action = class {
             [CSS.buttonTextVisible]: textEnabled,
             [CSS.buttonCompact]: compact,
         };
-        return (h(Host, null, h("button", { "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId,
+        return (h(Host, null, h(InteractiveContainer, { disabled: disabled }, h("button", { "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId,
             // 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: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer(), !icon && indicator && h("div", { class: CSS.indicatorWithoutIcon, key: "indicator-no-icon" })), h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText()));
+            ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer(), !icon && indicator && h("div", { class: CSS.indicatorWithoutIcon, key: "indicator-no-icon" })), h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText())));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }