@esri/solutions-components 0.6.5 → 0.6.6

package/dist/cjs/calcite-accordion.cjs.entry.js

@@ -8,8 +8,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e50040c.js');
+const observers = require('./observers-f5fa975b.js');
 
-const accordionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
+const accordionCss = ":host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Accordion = class {
   constructor(hostRef) {
@@ -20,38 +21,35 @@ const Accordion = class {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list of Accordion items */
-    this.items = [];
-    /** keep track of whether the items have been sorted so we don't re-sort */
-    this.sorted = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
+    this.mutationObserver = observers.createObserver("mutation", () => this.updateAccordionItems());
     this.appearance = "solid";
     this.iconPosition = "end";
     this.iconType = "chevron";
     this.scale = "m";
     this.selectionMode = "multiple";
   }
+  handlePropsChange() {
+    this.updateAccordionItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentDidLoad() {
-    if (!this.sorted) {
-      this.items = this.sortItems(this.items);
-      this.sorted = true;
-    }
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.updateAccordionItems();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     const transparent = this.appearance === "transparent";
     return (index.h("div", { class: {
         "accordion--transparent": transparent,
-        accordion: !transparent
+        accordion: !transparent,
       } }, index.h("slot", null)));
   }
   //--------------------------------------------------------------------------
@@ -59,25 +57,33 @@ const Accordion = class {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  registerCalciteAccordionItem(event) {
-    const item = {
-      item: event.target,
-      parent: event.detail.parent,
-      position: event.detail.position
-    };
-    if (this.el === item.parent) {
-      this.items.push(item);
-    }
-    event.stopPropagation();
-  }
   updateActiveItemOnChange(event) {
-    this.requestedAccordionItem = event.detail.requestedAccordionItem;
     this.calciteInternalAccordionChange.emit({
-      requestedAccordionItem: this.requestedAccordionItem
+      requestedAccordionItem: event.detail.requestedAccordionItem,
     });
     event.stopPropagation();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  updateAccordionItems() {
+    this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
+      item.iconPosition = this.iconPosition;
+      item.iconType = this.iconType;
+      item.scale = this.scale;
+    });
+    // sync props on items across shadow DOM
+    document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
+  }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "iconPosition": ["handlePropsChange"],
+    "iconType": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
+    "selectionMode": ["handlePropsChange"]
+  }; }
 };
 Accordion.style = accordionCss;
 

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

@@ -8,39 +8,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e50040c.js');
-const conditionalSlot = require('./conditionalSlot-832899ba.js');
-const dom = require('./dom-1eb1ded2.js');
-const loadable = require('./loadable-da060faa.js');
-const locale = require('./locale-37b9924d.js');
-const observers = require('./observers-62c5955c.js');
-const t9n = require('./t9n-a85989ef.js');
-const ExpandToggle = require('./ExpandToggle-a7173c38.js');
+const conditionalSlot = require('./conditionalSlot-85b3a6b3.js');
+const dom = require('./dom-c1807fc1.js');
+const loadable = require('./loadable-bac9cdd6.js');
+const locale = require('./locale-c63a1b57.js');
+const observers = require('./observers-f5fa975b.js');
+const t9n = require('./t9n-1d032c30.js');
+const ExpandToggle = require('./ExpandToggle-e6a0d66e.js');
 const debounce = require('./debounce-30afab47.js');
-require('./guid-1b1fbdbc.js');
-require('./resources-f60f44b0.js');
-require('./key-7fbdf405.js');
-require('./resources-e4f7e0c9.js');
-require('./resources-8c48b06e.js');
+require('./guid-3abe3cc6.js');
+require('./resources-77713c2e.js');
+require('./key-b8b55ea3.js');
+require('./resources-2901b608.js');
+require('./resources-91409a5d.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
-  actionGroupBottom: "action-group--bottom"
+  actionGroupEnd: "action-group--end",
 };
 const SLOTS = {
-  bottomActions: "bottom-actions",
-  expandTooltip: "expand-tooltip"
+  actionsEnd: "actions-end",
+  bottomActions: "actions-end",
+  expandTooltip: "expand-tooltip",
 };
 
-const actionBarCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}: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=horizontal]){flex-direction:row}: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--bottom{flex-grow:1;justify-content:flex-end}";
+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 ActionBar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteActionBarToggle = index.createEvent(this, "calciteActionBarToggle", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
     this.mutationObserver = observers.createObserver("mutation", () => {
       const { el, expanded } = this;
       ExpandToggle.toggleChildActionText({ el, expanded });
@@ -80,7 +86,7 @@ const ActionBar = class {
       const actionCount = expandDisabled ? actions.length : actions.length + 1;
       const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
       this.setGroupLayout(actionGroups);
-      const groupCount = dom.getSlotted(el, SLOTS.bottomActions) || !expandDisabled
+      const groupCount = dom.getSlotted(el, SLOTS.actionsEnd) || dom.getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
       const { actionHeight, actionWidth } = ExpandToggle.geActionDimensions(actions);
@@ -91,12 +97,12 @@ const ActionBar = class {
         actionWidth,
         height,
         width,
-        groupCount
+        groupCount,
       });
       ExpandToggle.overflowActions({
         actionGroups,
         expanded,
-        overflowCount
+        overflowCount,
       });
     }, ExpandToggle.overflowActionsDebounceInMs);
     this.toggleExpand = () => {
@@ -196,9 +202,8 @@ const ActionBar = class {
    * Sets focus on the component's first focusable element.
    */
   async setFocus() {
-    var _a;
-    await loadable.componentLoaded(this);
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    await loadable.componentFocusable(this);
+    dom.focusFirstTabbable(this.el);
   }
   updateGroups() {
     this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
@@ -214,15 +219,16 @@ const ActionBar = class {
   renderBottomActionGroup() {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
     const tooltip = dom.getSlotted(el, SLOTS.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { el: el, expanded: expanded, intlCollapse: messages.collapse, intlExpand: messages.expand, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
+    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setExpandToggleRef })) : null;
-    return dom.getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.bottomActions }), index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
+    return dom.getSlotted(el, SLOTS.actionsEnd) ||
+      dom.getSlotted(el, SLOTS.bottomActions) ||
+      expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupEnd, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.actionsEnd }), index.h("slot", { name: SLOTS.bottomActions }), index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (index.h(index.Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
   }
-  static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -8,20 +8,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e50040c.js');
-const conditionalSlot = require('./conditionalSlot-832899ba.js');
-const dom = require('./dom-1eb1ded2.js');
-const loadable = require('./loadable-da060faa.js');
-const locale = require('./locale-37b9924d.js');
-const t9n = require('./t9n-a85989ef.js');
-const resources$1 = require('./resources-8c48b06e.js');
-const resources = require('./resources-e4f7e0c9.js');
-const array = require('./array-b772c7c9.js');
-const guid = require('./guid-1b1fbdbc.js');
-const key = require('./key-7fbdf405.js');
-require('./observers-62c5955c.js');
-require('./resources-f60f44b0.js');
+const conditionalSlot = require('./conditionalSlot-85b3a6b3.js');
+const dom = require('./dom-c1807fc1.js');
+const loadable = require('./loadable-bac9cdd6.js');
+const locale = require('./locale-c63a1b57.js');
+const t9n = require('./t9n-1d032c30.js');
+const resources$1 = require('./resources-91409a5d.js');
+const resources = require('./resources-2901b608.js');
+const array = require('./array-46bb7df1.js');
+const guid = require('./guid-3abe3cc6.js');
+const key = require('./key-b8b55ea3.js');
+require('./observers-f5fa975b.js');
+require('./resources-77713c2e.js');
 
-const actionGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]){flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}";
+const actionGroupCss = ":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{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]){flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ActionGroup = class {
   constructor(hostRef) {
@@ -38,6 +38,7 @@ const ActionGroup = class {
     this.layout = "vertical";
     this.columns = undefined;
     this.menuOpen = false;
+    this.overlayPositioning = "absolute";
     this.scale = undefined;
     this.messages = undefined;
     this.messageOverrides = undefined;
@@ -60,7 +61,7 @@ const ActionGroup = class {
   //--------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await loadable.componentLoaded(this);
+    await loadable.componentFocusable(this);
     this.el.focus();
   }
   // --------------------------------------------------------------------------
@@ -96,9 +97,9 @@ const ActionGroup = class {
     return hasTooltip ? index.h("slot", { name: resources.SLOTS.menuTooltip, slot: resources$1.SLOTS.tooltip }) : null;
   }
   renderMenu() {
-    const { el, expanded, menuOpen, scale, layout, messages } = this;
+    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
     const hasMenuItems = dom.getSlotted(el, resources.SLOTS.menuActions);
-    return hasMenuItems ? (index.h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, index.h("calcite-action", { icon: resources.ICONS.menu, scale: scale, slot: resources$1.SLOTS.trigger, text: messages.more, textEnabled: expanded }), index.h("slot", { name: resources.SLOTS.menuActions }), this.renderTooltip())) : null;
+    return hasMenuItems ? (index.h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, index.h("calcite-action", { icon: resources.ICONS.menu, scale: scale, slot: resources$1.SLOTS.trigger, text: messages.more, textEnabled: expanded }), index.h("slot", { name: resources.SLOTS.menuActions }), this.renderTooltip())) : null;
   }
   render() {
     return (index.h(index.Fragment, null, index.h("slot", null), this.renderMenu()));
@@ -114,7 +115,7 @@ const ActionGroup = class {
 };
 ActionGroup.style = actionGroupCss;
 
-const actionMenuCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:flex;outline-color:transparent}.menu ::slotted(calcite-action[active]){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          );outline-offset:0px}.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{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}";
+const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:flex;outline-color:transparent}.menu ::slotted(calcite-action[active]){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          );outline-offset:0px}.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{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 const ActionMenu = class {
@@ -169,7 +170,7 @@ const ActionMenu = class {
     this.setMenuButtonEl = (event) => {
       const actions = event.target
         .assignedElements({
-        flatten: true
+        flatten: true,
       })
         .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
       this.slottedMenuButtonEl = actions[0];
@@ -197,7 +198,7 @@ const ActionMenu = class {
     this.updateTooltip = (event) => {
       const tooltips = event.target
         .assignedElements({
-        flatten: true
+        flatten: true,
       })
         .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
       this.tooltipEl = tooltips[0];
@@ -225,7 +226,7 @@ const ActionMenu = class {
     this.handleDefaultSlotChange = (event) => {
       const actions = event.target
         .assignedElements({
-        flatten: true
+        flatten: true,
       })
         .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
       this.actionElements = actions;
@@ -349,8 +350,8 @@ const ActionMenu = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await loadable.componentLoaded(this);
-    dom.focusElement(this.menuButtonEl);
+    await loadable.componentFocusable(this);
+    return dom.focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
@@ -360,7 +361,7 @@ const ActionMenu = class {
     return menuButtonSlot;
   }
   renderMenuItems() {
-    const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
+    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 (index.h("calcite-popover", { flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, index.h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: resources$1.CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }))));

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

@@ -8,33 +8,33 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0e50040c.js');
-const conditionalSlot = require('./conditionalSlot-832899ba.js');
-const dom = require('./dom-1eb1ded2.js');
-const loadable = require('./loadable-da060faa.js');
-const locale = require('./locale-37b9924d.js');
-const t9n = require('./t9n-a85989ef.js');
-const ExpandToggle = require('./ExpandToggle-a7173c38.js');
-const observers = require('./observers-62c5955c.js');
-require('./guid-1b1fbdbc.js');
-require('./resources-f60f44b0.js');
-require('./key-7fbdf405.js');
-require('./resources-e4f7e0c9.js');
-require('./resources-8c48b06e.js');
+const conditionalSlot = require('./conditionalSlot-85b3a6b3.js');
+const dom = require('./dom-c1807fc1.js');
+const loadable = require('./loadable-bac9cdd6.js');
+const locale = require('./locale-c63a1b57.js');
+const t9n = require('./t9n-1d032c30.js');
+const ExpandToggle = require('./ExpandToggle-e6a0d66e.js');
+const observers = require('./observers-f5fa975b.js');
+require('./guid-3abe3cc6.js');
+require('./resources-77713c2e.js');
+require('./key-b8b55ea3.js');
+require('./resources-2901b608.js');
+require('./resources-91409a5d.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
-  actionGroupBottom: "action-group--bottom",
-  container: "container"
+  actionGroupEnd: "action-group--end",
+  container: "container",
 };
 const SLOTS = {
-  expandTooltip: "expand-tooltip"
+  expandTooltip: "expand-tooltip",
 };
 
-const actionPadCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}: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-ui-border-3);padding-block:0px}.container{display:inline-flex;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-ui-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}";
+const actionPadCss = ":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{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-ui-border-3);padding-block:0px}.container{display:inline-flex;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-ui-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}";
 
 const ActionPad = class {
   constructor(hostRef) {
@@ -123,7 +123,7 @@ const ActionPad = class {
    */
   async setFocus() {
     var _a;
-    await loadable.componentLoaded(this);
+    await loadable.componentFocusable(this);
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   updateGroups() {
@@ -140,10 +140,10 @@ const ActionPad = class {
   renderBottomActionGroup() {
     const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this;
     const tooltip = dom.getSlotted(el, SLOTS.expandTooltip);
-    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { el: el, expanded: expanded, intlCollapse: messages.collapse, intlExpand: messages.expand, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
+    const expandToggleNode = !expandDisabled ? (index.h(ExpandToggle.ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: tooltip,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setExpandToggleRef })) : null;
-    return expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
+    return expandToggleNode ? (index.h("calcite-action-group", { class: CSS.actionGroupEnd, layout: layout, scale: scale }, index.h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (index.h(index.Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, index.h("div", { class: CSS.container }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));