@esri/calcite-components 1.5.0-next.3 → 1.5.0-next.30

package/dist/collection/utils/number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { numberKeys } from "./key";
 const unnecessaryDecimal = new RegExp(`\\${"."}(0+)?$`);
@@ -101,6 +101,7 @@ const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
 const decimalOnlyAtEndOfString = /(?!^\.)\.$/;
 const allHyphensExceptTheStart = /(?!^-)-/g;
 const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/;
+const hasTrailingDecimalZeros = /0*$/;
 export const sanitizeNumberString = (numberString) => sanitizeExponentialNumberString(numberString, (nonExpoNumString) => {
   const sanitizedValue = nonExpoNumString
     .replace(allHyphensExceptTheStart, "")
@@ -109,9 +110,17 @@ export const sanitizeNumberString = (numberString) => sanitizeExponentialNumberS
   return isValidNumber(sanitizedValue)
     ? isNegativeDecimalOnlyZeros.test(sanitizedValue)
       ? sanitizedValue
-      : new BigDecimal(sanitizedValue).toString()
+      : getBigDecimalAsString(sanitizedValue)
     : nonExpoNumString;
 });
+export function getBigDecimalAsString(sanitizedValue) {
+  const sanitizedValueDecimals = sanitizedValue.split(".")[1];
+  const value = new BigDecimal(sanitizedValue).toString();
+  const [bigDecimalValueInteger, bigDecimalValueDecimals] = value.split(".");
+  return sanitizedValueDecimals && bigDecimalValueDecimals !== sanitizedValueDecimals
+    ? `${bigDecimalValueInteger}.${sanitizedValueDecimals}`
+    : value;
+}
 export function sanitizeExponentialNumberString(numberString, func) {
   if (!numberString) {
     return numberString;
@@ -171,3 +180,28 @@ export function expandExponentialNumberString(numberString) {
 function stringContainsNumbers(string) {
   return numberKeys.some((number) => string.includes(number));
 }
+/**
+ * Adds localized trailing decimals zero values to the number string.
+ * BigInt conversion to string removes the trailing decimal zero values (Ex: 1.000 is returned as 1). This method helps adding them back.
+ *
+ * @param {string} localizedValue - localized number string value
+ * @param {string} value - current value in the input field
+ * @param {NumberStringFormat} formatter - numberStringFormatter instance to localize the number value
+ * @returns {string} localized number string value
+ */
+export function addLocalizedTrailingDecimalZeros(localizedValue, value, formatter) {
+  const decimals = value.split(".")[1];
+  if (decimals) {
+    const trailingDecimalZeros = decimals.match(hasTrailingDecimalZeros)[0];
+    if (trailingDecimalZeros &&
+      formatter.delocalize(localizedValue).length !== value.length &&
+      decimals.indexOf("e") === -1) {
+      const decimalSeparator = formatter.decimal;
+      localizedValue = !localizedValue.includes(decimalSeparator)
+        ? `${localizedValue}${decimalSeparator}`
+        : localizedValue;
+      return localizedValue.padEnd(localizedValue.length + trailingDecimalZeros.length, formatter.localize("0"));
+    }
+  }
+  return localizedValue;
+}

package/dist/collection/utils/observers.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { Build } from "@stencil/core";
 /**

package/dist/collection/utils/openCloseComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { readTask } from "@stencil/core";
 const componentToTransitionListeners = new WeakMap();
@@ -66,7 +66,7 @@ export function connectOpenCloseComponent(component) {
     componentToTransitionListeners.set(component, [
       component.transitionEl,
       boundOnTransitionStart,
-      boundOnTransitionEnd
+      boundOnTransitionEnd,
     ]);
     component.transitionEl.addEventListener("transitionstart", boundOnTransitionStart);
     component.transitionEl.addEventListener("transitionend", boundOnTransitionEnd);

package/dist/collection/utils/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 export const autoMode = "calcite-mode-auto";
 export const darkMode = "calcite-mode-dark";
@@ -9,16 +9,16 @@ const lightMode = "calcite-mode-light";
 export const MODES = [
   {
     name: "light",
-    className: lightMode
+    className: lightMode,
   },
   {
     name: "dark",
-    className: darkMode
+    className: darkMode,
   },
   {
     name: "auto",
-    className: autoMode
-  }
+    className: autoMode,
+  },
 ];
 export const CSS_UTILITY = {
   autoMode,
@@ -31,8 +31,8 @@ export const CSS_UTILITY = {
   calciteAnimateInDown: "calcite-animate__in-down",
   calciteAnimateInRight: "calcite-animate__in-right",
   calciteAnimateInLeft: "calcite-animate__in-left",
-  calciteAnimateInScale: "calcite-animate__in-scale"
+  calciteAnimateInScale: "calcite-animate__in-scale",
 };
 export const TEXT = {
-  loading: "Loading"
+  loading: "Loading",
 };

package/dist/collection/utils/sortableComponent.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import Sortable from "sortablejs";
 import { containsCrossShadowBoundary } from "./dom";

package/dist/collection/utils/t9n.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { Build, getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "./locale";
@@ -27,7 +27,7 @@ function throwMessageFetchError() {
 function mergeMessages(component) {
   component.messages = {
     ...component.defaultMessages,
-    ...component.messageOverrides
+    ...component.messageOverrides,
   };
 }
 /**

package/dist/collection/utils/time.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 import { getDateTimeFormat, getSupportedNumberingSystem } from "./locale";
 import { isValidNumber } from "./number";
@@ -11,7 +11,7 @@ function createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds =
     hour: "2-digit",
     minute: "2-digit",
     timeZone: "UTC",
-    numberingSystem: getSupportedNumberingSystem(numberingSystem)
+    numberingSystem: getSupportedNumberingSystem(numberingSystem),
   };
   if (includeSeconds) {
     options.second = "2-digit";
@@ -117,7 +117,7 @@ export function localizeTimePart({ value, part, locale, numberingSystem }) {
   const parts = formatter.formatToParts(date);
   return getLocalizedTimePart(part, parts);
 }
-export function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true }) {
+export function localizeTimeString({ value, locale, numberingSystem, includeSeconds = true, }) {
   if (!isValidTime(value)) {
     return null;
   }
@@ -126,7 +126,7 @@ export function localizeTimeString({ value, locale, numberingSystem, includeSeco
   const formatter = createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds);
   return formatter?.format(dateFromTimeString) || null;
 }
-export function localizeTimeStringToParts({ value, locale, numberingSystem }) {
+export function localizeTimeStringToParts({ value, locale, numberingSystem, }) {
   if (!isValidTime(value)) {
     return null;
   }
@@ -142,7 +142,7 @@ export function localizeTimeStringToParts({ value, locale, numberingSystem }) {
       localizedMinuteSuffix: getLocalizedTimePart("minuteSuffix", parts),
       localizedSecond: getLocalizedTimePart("second", parts),
       localizedSecondSuffix: getLocalizedTimePart("secondSuffix", parts),
-      localizedMeridiem: getLocalizedTimePart("meridiem", parts)
+      localizedMeridiem: getLocalizedTimePart("meridiem", parts),
     };
   }
   return null;
@@ -166,13 +166,13 @@ export function parseTimeString(value) {
     return {
       hour,
       minute,
-      second
+      second,
     };
   }
   return {
     hour: null,
     minute: null,
-    second: null
+    second: null,
   };
 }
 export function toISOTimeString(value, includeSeconds = true) {

package/dist/components/ExpandToggle.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { forceUpdate, h } from '@stencil/core/internal/client';
-import { c as getElementDir } from './dom.js';
+import { forceUpdate, h } from '@stencil/core/internal/client/index.js';
+import { b as getElementDir } from './dom.js';
 import { S as SLOTS$1 } from './action-group.js';
 import { S as SLOTS } from './action-menu.js';
 
@@ -15,21 +15,21 @@ const geActionDimensions = (actions) => {
   const actionLen = actions?.length;
   return {
     actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
-    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0
+    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0,
   };
 };
-const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount }) => {
+const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
   const maxContainerPx = layout === "horizontal" ? width : height;
   const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
   return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
 };
-const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount }) => {
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount, }) => {
   return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
 };
 const queryActions = (el) => {
   return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
 };
-const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
+const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
   let needToSlotCount = overflowCount;
   actionGroups.reverse().forEach((group) => {
     let slottedWithinGroupCount = 0;
@@ -60,18 +60,18 @@ const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
 
 const ICONS = {
   chevronsLeft: "chevrons-left",
-  chevronsRight: "chevrons-right"
+  chevronsRight: "chevrons-right",
 };
 function getCalcitePosition(position, el) {
   return position || el.closest("calcite-shell-panel")?.position || "start";
 }
-function toggleChildActionText({ el, expanded }) {
+function toggleChildActionText({ el, expanded, }) {
   queryActions(el)
     .filter((el) => el.slot !== SLOTS$1.menuActions)
     .forEach((action) => (action.textEnabled = expanded));
   el.querySelectorAll("calcite-action-group, calcite-action-menu").forEach((el) => (el.expanded = expanded));
 }
-const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
+const setTooltipReference = ({ tooltip, referenceElement, expanded, ref, }) => {
   if (tooltip) {
     tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
   }
@@ -80,9 +80,9 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   }
   return referenceElement;
 };
-const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
+const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position, tooltip, ref, scale, }) => {
   const rtl = getElementDir(el) === "rtl";
-  const expandText = expanded ? intlCollapse : intlExpand;
+  const text = expanded ? collapseText : expandText;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
   if (rtl) {
     icons.reverse();
@@ -90,7 +90,7 @@ const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, scale: scale, text: expandText, textEnabled: expanded, 
+  const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, scale: scale, text: text, textEnabled: expanded, 
     // eslint-disable-next-line react/jsx-sort-props
     ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }) }));
   return actionNode;

package/dist/components/FloatingArrow.js

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { h } from '@stencil/core/internal/client';
+import { h } from '@stencil/core/internal/client/index.js';
 
 const CSS = {
   arrow: "calcite-floating-ui-arrow",
-  arrowStroke: "calcite-floating-ui-arrow__stroke"
+  arrowStroke: "calcite-floating-ui-arrow__stroke",
 };
 const DEFAULTS = {
   width: 12,
   height: 6,
-  strokeWidth: 1
+  strokeWidth: 1,
 };
 /**
  * Renders a SVG element to be used as a floating-ui arrow.
@@ -22,11 +22,11 @@ const DEFAULTS = {
  * @param floatingLayout.floatingLayout
  * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.
  *
- * See [floating-ui](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts)
+ * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/main/src/utils/floating-ui.ts)
  * @param floatingLayout.key
  * @param floatingLayout.ref
  */
-const FloatingArrow = ({ floatingLayout, key, ref }) => {
+const FloatingArrow = ({ floatingLayout, key, ref, }) => {
   const { width, height, strokeWidth } = DEFAULTS;
   const svgX = width / 2;
   const isVertical = floatingLayout === "vertical";

package/dist/components/Heading.js

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { h } from '@stencil/core/internal/client';
+import { h } from '@stencil/core/internal/client/index.js';
 
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/components/action-group.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { b as getSlotted } from './dom.js';
-import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
+import { g as getSlotted } from './dom.js';
+import { c as componentFocusable, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { S as SLOTS$1, d as defineCustomElement$4 } from './action-menu.js';
@@ -17,13 +17,13 @@ import { d as defineCustomElement$1 } from './popover.js';
 
 const SLOTS = {
   menuActions: "menu-actions",
-  menuTooltip: "menu-tooltip"
+  menuTooltip: "menu-tooltip",
 };
 const ICONS = {
-  menu: "ellipsis"
+  menu: "ellipsis",
 };
 
-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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -42,6 +42,7 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.layout = "vertical";
     this.columns = undefined;
     this.menuOpen = false;
+    this.overlayPositioning = "absolute";
     this.scale = undefined;
     this.messages = undefined;
     this.messageOverrides = undefined;
@@ -64,7 +65,7 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   // --------------------------------------------------------------------------
@@ -100,9 +101,9 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return hasTooltip ? h("slot", { name: SLOTS.menuTooltip, slot: SLOTS$1.tooltip }) : null;
   }
   renderMenu() {
-    const { el, expanded, menuOpen, scale, layout, messages } = this;
+    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
     const hasMenuItems = getSlotted(el, SLOTS.menuActions);
-    return hasMenuItems ? (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 }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
+    return hasMenuItems ? (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 }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions }), this.renderTooltip())) : null;
   }
   render() {
     return (h(Fragment, null, h("slot", null), this.renderMenu()));
@@ -121,6 +122,7 @@ const ActionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "layout": [513],
     "columns": [514],
     "menuOpen": [1540, "menu-open"],
+    "overlayPositioning": [513, "overlay-positioning"],
     "scale": [513],
     "messages": [1040],
     "messageOverrides": [1040],

package/dist/components/action-menu.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { g as getRoundRobinIndex } from './array.js';
-import { t as toAriaBoolean, j as isPrimaryPointerButton, k as focusElement } from './dom.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, k as focusElement } from './dom.js';
 import { g as guid } from './guid.js';
 import { i as isActivationKey } from './key.js';
-import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { d as defineCustomElement$4 } from './action.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
@@ -16,17 +16,17 @@ import { d as defineCustomElement$1 } from './popover.js';
 
 const CSS = {
   menu: "menu",
-  defaultTrigger: "default-trigger"
+  defaultTrigger: "default-trigger",
 };
 const SLOTS = {
   tooltip: "tooltip",
-  trigger: "trigger"
+  trigger: "trigger",
 };
 const ICONS = {
-  menu: "ellipsis"
+  menu: "ellipsis",
 };
 
-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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -83,7 +83,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setMenuButtonEl = (event) => {
       const actions = event.target
         .assignedElements({
-        flatten: true
+        flatten: true,
       })
         .filter((el) => el?.matches("calcite-action"));
       this.slottedMenuButtonEl = actions[0];
@@ -111,7 +111,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.updateTooltip = (event) => {
       const tooltips = event.target
         .assignedElements({
-        flatten: true
+        flatten: true,
       })
         .filter((el) => el?.matches("calcite-tooltip"));
       this.tooltipEl = tooltips[0];
@@ -139,7 +139,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.handleDefaultSlotChange = (event) => {
       const actions = event.target
         .assignedElements({
-        flatten: true
+        flatten: true,
       })
         .filter((el) => el?.matches("calcite-action"));
       this.actionElements = actions;
@@ -263,8 +263,8 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
-    focusElement(this.menuButtonEl);
+    await componentFocusable(this);
+    return focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
@@ -274,7 +274,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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?.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?.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));