@esri/calcite-components 2.8.2 → 2.8.4

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * 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.8.2
+ * v2.8.4
  */
 'use strict';
 
@@ -24561,7 +24561,7 @@ class ColorPickerSwatch {
 
 /**
  * Do not edit directly
- * Generated on Wed, 15 May 2024 07:04:59 GMT
+ * Generated on Wed, 29 May 2024 01:56:19 GMT
  */
 const calciteSize24 = "24px";
 const calciteSize32 = "32px";
@@ -24719,12 +24719,21 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
   };
 }
 
@@ -24913,9 +24922,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -25324,6 +25334,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -25522,9 +25534,8 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -26281,11 +26292,15 @@ function getEffectivePlacement(floatingEl, placement) {
  * @returns {Promise<void>}
  */
 async function reposition(component, options, delayed = false) {
-    if (!component.open) {
+    if (!component.open || !options.floatingEl || !options.referenceEl) {
         return;
     }
+    const trackedState = autoUpdatingComponentMap.get(component);
+    if (!trackedState) {
+        return runAutoUpdate(component, options.referenceEl, options.floatingEl);
+    }
     const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
-    return positionFunction(component, options);
+    await positionFunction(component, options);
 }
 function getDebouncedReposition(component) {
     let debounced = componentToDebouncedRepositionMap.get(component);
@@ -26310,8 +26325,32 @@ const ARROW_CSS_TRANSFORM = {
  *
  * @internal
  */
-const cleanupMap = new WeakMap();
+const autoUpdatingComponentMap = new WeakMap();
 const componentToDebouncedRepositionMap = new WeakMap();
+async function runAutoUpdate(component, referenceEl, floatingEl) {
+    if (!floatingEl.isConnected) {
+        return;
+    }
+    const effectiveAutoUpdate = (_refEl, _floatingEl, updateCallback) => {
+            updateCallback();
+            return () => {
+                /* noop */
+            };
+        };
+    // we set initial state here to make it available for `reposition` calls
+    autoUpdatingComponentMap.set(component, { state: "pending" });
+    let repositionPromise;
+    const cleanUp = effectiveAutoUpdate(referenceEl, floatingEl, 
+    // callback is invoked immediately
+    () => {
+        const promise = component.reposition();
+        if (!repositionPromise) {
+            repositionPromise = promise;
+        }
+    });
+    autoUpdatingComponentMap.set(component, { state: "active", cleanUp });
+    return repositionPromise;
+}
 /**
  * Helper to set up floating element interactions on connectedCallback.
  *
@@ -26319,7 +26358,7 @@ const componentToDebouncedRepositionMap = new WeakMap();
  * @param referenceEl - The `referenceElement` used to position the component according to its `placement` value.
  * @param floatingEl - The `floatingElement` containing the floating ui.
  */
-function connectFloatingUI(component, referenceEl, floatingEl) {
+async function connectFloatingUI(component, referenceEl, floatingEl) {
     if (!floatingEl || !referenceEl) {
         return;
     }
@@ -26330,13 +26369,10 @@ function connectFloatingUI(component, referenceEl, floatingEl) {
         // initial positioning based on https://floating-ui.com/docs/computePosition#initial-layout
         position: component.overlayPositioning,
     });
-    const runAutoUpdate = (_refEl, _floatingEl, updateCallback) => {
-            updateCallback();
-            return () => {
-                /* noop */
-            };
-        };
-    cleanupMap.set(component, runAutoUpdate(referenceEl, floatingEl, () => component.reposition()));
+    if (!component.open) {
+        return;
+    }
+    return runAutoUpdate(component, referenceEl, floatingEl);
 }
 /**
  * Helper to tear down floating element interactions on disconnectedCallback.
@@ -26349,8 +26385,11 @@ function disconnectFloatingUI(component, referenceEl, floatingEl) {
     if (!floatingEl || !referenceEl) {
         return;
     }
-    cleanupMap.get(component)?.();
-    cleanupMap.delete(component);
+    const trackedState = autoUpdatingComponentMap.get(component);
+    if (trackedState?.state === "active") {
+        trackedState.cleanUp();
+    }
+    autoUpdatingComponentMap.delete(component);
     componentToDebouncedRepositionMap.get(component)?.cancel();
     componentToDebouncedRepositionMap.delete(component);
 }
@@ -26888,15 +26927,12 @@ class Combobox {
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    documentClickHandler(event) {
-        if (this.disabled) {
-            return;
-        }
-        const composedPath = event.composedPath();
-        if (composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+    async documentClickHandler(event) {
+        if (this.disabled || event.composedPath().includes(this.el)) {
             return;
         }
-        if (!this.allowCustomValues && this.textInput.value) {
+        await componentOnReady(this.el);
+        if (!this.allowCustomValues && this.text) {
             this.clearInputValue();
             this.filterItems("");
             this.updateActiveItemIndex(-1);
@@ -26949,7 +26985,7 @@ class Combobox {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
+    async connectedCallback() {
         connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
@@ -26965,7 +27001,9 @@ class Combobox {
             this.openHandler();
             onToggleOpenCloseComponent(this);
         }
+        await componentOnReady(this.el);
         connectFloatingUI(this, this.referenceEl, this.floatingEl);
+        afterConnectDefaultValueSet(this, this.getValue());
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -26973,8 +27011,6 @@ class Combobox {
         await setUpMessages(this);
     }
     componentDidLoad() {
-        afterConnectDefaultValueSet(this, this.getValue());
-        connectFloatingUI(this, this.referenceEl, this.floatingEl);
         setComponentLoaded(this);
     }
     componentDidRender() {
@@ -27465,7 +27501,7 @@ class Combobox {
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && this.value?.length > 0;
-        return (hAsync(Host, { key: 'd7bb6fbd99d46d6baacd027bf67d440156aa8235', onClick: this.comboboxFocusHandler }, hAsync(InteractiveContainer, { key: 'f0e960f155ffed736782818874432e49aec7da43', disabled: this.disabled }, hAsync("div", { key: '5b69d59411f589c99d1087ffc9d2f34a02ce4abf', "aria-live": "polite", class: {
+        return (hAsync(Host, { key: 'fdc6873848a0303d62a2f8d4964e5f6418c00507', onClick: this.comboboxFocusHandler }, hAsync(InteractiveContainer, { key: '3d044335fc5b8702a7ef07538d63eebfa0d86d61', disabled: this.disabled }, hAsync("div", { key: 'eba9a13d36f316529b09ffad584873971d8f9c38', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
@@ -27483,7 +27519,7 @@ class Combobox {
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], hAsync("label", { key: '9b9988f68638cbf4b5379e815dd9ed88b5b83430', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (hAsync(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), hAsync("ul", { key: 'e52aae918a2ad75c1f84e6761d4651a59397e5f7', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), hAsync(HiddenFormInputSlot, { key: 'feb9c678d698e149bc58b0aed458dee9d6fb8115', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], hAsync("label", { key: '524e28022a1207f80a10e7af0d3b0f1934d971f5', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (hAsync(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), hAsync("ul", { key: '9d80d567e35091cfcbc50081f8b85a22233730f8', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), hAsync(HiddenFormInputSlot, { key: '671003f9c0026f249a8a4ce485510f0a1df051c5', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -29341,7 +29377,7 @@ class Dropdown {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
+    async connectedCallback() {
         this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
         this.setFilteredPlacements();
         if (this.open) {
@@ -29350,6 +29386,7 @@ class Dropdown {
         }
         connectInteractive(this);
         this.updateItems();
+        await componentOnReady(this.el);
         connectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
     componentWillLoad() {
@@ -29357,7 +29394,6 @@ class Dropdown {
     }
     componentDidLoad() {
         setComponentLoaded(this);
-        connectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
     componentDidRender() {
         updateHostInteraction(this);
@@ -29370,17 +29406,17 @@ class Dropdown {
     }
     render() {
         const { open, guid } = this;
-        return (hAsync(Host, { key: 'aad82a6a5bce5a29f6c309bb9ff20911b3ec9482' }, hAsync(InteractiveContainer, { key: 'b559473528a0142c058c6e6de499e981748e369c', disabled: this.disabled }, hAsync("div", { key: '089a4a3e39800339c21e50f167c1154dd90f0194', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
+        return (hAsync(Host, { key: 'b92164487ced086ae197b99635d276f0265d7e0e' }, hAsync(InteractiveContainer, { key: '6f8591cca464bbdacaa78f03be89cb06da1b3257', disabled: this.disabled }, hAsync("div", { key: 'a823c2f378419fc38b09d80074ce9e15d2cffec0', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
             // 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.setReferenceEl }, hAsync("slot", { key: '1a6ded94e643359a5d9a6168d3abe0db4d96d57e', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS$o.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { key: '3c8a8fcda5b885baadd1aaaf2b8181b9dfd24ddf', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
+            ref: this.setReferenceEl }, hAsync("slot", { key: 'e00c9c8d2b0c4603ef15bc3d196d7eb3bc4c0d28', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS$o.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { key: '2e78664a83eea4e1a09b3b55953ad8a8a956ba67', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
             // 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.setFloatingEl }, hAsync("div", { key: '8c04cadcb38268f20386f9e80f519b99f702054e', "aria-labelledby": `${guid}-menubutton`, class: {
+            ref: this.setFloatingEl }, hAsync("div", { key: '1dc684f36eadea95d3fe3ff053e3897ea47ff7bb', "aria-labelledby": `${guid}-menubutton`, class: {
                 ["calcite-dropdown-content"]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
             }, id: `${guid}-menu`, role: "menu",
             // 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.setScrollerAndTransitionEl }, hAsync("slot", { key: '92b1d20e253dc2253aa2f998076bf640e696ff91', onSlotchange: this.updateGroups }))))));
+            ref: this.setScrollerAndTransitionEl }, hAsync("slot", { key: '0ce26bf35bb532c0e3e922b53b30e07e8e7d6a41', onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -33489,7 +33525,7 @@ class InputDatePicker {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
+    async connectedCallback() {
         connectInteractive(this);
         connectLocalized(this);
         const { open } = this;
@@ -33532,7 +33568,9 @@ class InputDatePicker {
         if (this.open) {
             onToggleOpenCloseComponent(this);
         }
+        await componentOnReady(this.el);
         connectFloatingUI(this, this.referenceEl, this.floatingEl);
+        this.localizeInputValues();
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -33542,8 +33580,6 @@ class InputDatePicker {
     }
     componentDidLoad() {
         setComponentLoaded(this);
-        this.localizeInputValues();
-        connectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
     disconnectedCallback() {
         deactivateFocusTrap(this);
@@ -33564,37 +33600,37 @@ class InputDatePicker {
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (hAsync(Host, { key: 'fd558a11028d7d967811f2a1236d46e82d45161b', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'ebf90902c5f3056147f91ee4690e6e69ab452042', disabled: this.disabled }, this.localeData && (hAsync("div", { key: '5e5cfbb9688e08aaf1e12b3527882ee3911d8e84', class: CSS$Q.inputContainer }, hAsync("div", { key: '63014b5695465c3a1b4fe54be6f036a1aa8393e8', class: CSS$Q.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
+        return (hAsync(Host, { key: '6d8d290fd8fe3ec232765b6ab57ba2a99ed6fae6', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'e7070f5b8c3fc329bb5b2bdcf2437748f8d55dae', disabled: this.disabled }, this.localeData && (hAsync("div", { key: '8be9700384a0b2aa6e93ca4f4f0eee407af4b6c4', class: CSS$Q.inputContainer }, hAsync("div", { key: '46c8505d8312f50d43ed849f817a4cf797c45f83', class: CSS$Q.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
             // 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.setStartWrapper }, hAsync("calcite-input-text", { key: '5cfeff37fb1998954f4e17296f15fcf6b9ea10cd', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+            ref: this.setStartWrapper }, hAsync("calcite-input-text", { key: 'cb1923cd55e93953a3580a3b2b4024c5d79f7344', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
                 [CSS$Q.input]: true,
                 [CSS$Q.inputNoBottomBorder]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
             // 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.setStartInput }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { key: 'f3a99326b0ee83dded0efcce2bacc2acca82741a', "aria-hidden": "true", class: CSS$Q.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { key: '87d96dd359485c1c192f63f694365f6767346207', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { key: '4605e1cda9d021957e9469a36b634f408dcd3c99', "aria-hidden": "true", class: CSS$Q.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { key: 'ff11fd326d57d744e45376e325f072036b957994', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
                 [CSS$Q.menu]: true,
                 [CSS$Q.menuActive]: this.open,
             }, id: this.dialogId, role: "dialog",
             // 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.setFloatingEl }, hAsync("div", { key: '7bb0daff0e3017152b69a7bec09de23d96539749', class: {
+            ref: this.setFloatingEl }, hAsync("div", { key: 'b8b50032020070ca0c5466a2281f095d3fef49cd', class: {
                 [CSS$Q.calendarWrapper]: true,
                 [CSS$Q.calendarWrapperEnd]: this.focusedInput === "end",
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: this.open,
             },
             // 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.setTransitionEl }, hAsync("calcite-date-picker", { key: 'e9a771765f104b79391396ead9d7e359aa0325cb', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
+            ref: this.setTransitionEl }, hAsync("calcite-date-picker", { key: '5621f6441a9235c9ef4da749b23563243bef632b', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
             // 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.setDatePickerRef }))), this.range && this.layout === "horizontal" && (hAsync("div", { key: '61b5787f2990d8143bf62da9e33e1253ab196a47', class: CSS$Q.horizontalArrowContainer }, hAsync("calcite-icon", { key: 'c665d2196d7cc71535ae1e352729ad7c3eb606e6', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { key: '3b5b05e60ad4dc6e866f2a2e3b8da8427e0d8769', class: CSS$Q.verticalArrowContainer }, hAsync("calcite-icon", { key: '395db3f34af565b7403ce50a1455833a43a86463', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (hAsync("div", { key: '596548166a4798cbd04ee76938a5a5e8ae2a9081', class: CSS$Q.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
+            ref: this.setDatePickerRef }))), this.range && this.layout === "horizontal" && (hAsync("div", { key: '6d24b5616279637cd7925ce378f642c97f699625', class: CSS$Q.horizontalArrowContainer }, hAsync("calcite-icon", { key: 'c311416667e2fb4d95cf97ef0c7c01b8a87784cf', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { key: '3baa2766e7ee36dd20720b421676ee00a00e8159', class: CSS$Q.verticalArrowContainer }, hAsync("calcite-icon", { key: '9fde0fb40fa8b4d2556aecf2bc3214bf6490d285', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (hAsync("div", { key: '6973313a8d378890f4b8ebfa5b37cdab3576bb50', class: CSS$Q.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
             // 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.setEndWrapper }, hAsync("calcite-input-text", { key: '1d56b70f902730c20cd0d501d5ece75635bd503b', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+            ref: this.setEndWrapper }, hAsync("calcite-input-text", { key: '44205f16da21c9bc7f218e133ef7e84d0446467c', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
                 [CSS$Q.input]: true,
                 [CSS$Q.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
             // 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.setEndInput }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { key: '7f09766af52aaa2db452431301dfa55cd8af3a2e', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { key: '664903f17e619a4d08af960a9c121878fcf36f1c', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (
@@ -42659,7 +42695,7 @@ class OptionGroup {
 
 /**
  * Do not edit directly
- * Generated on Wed, 15 May 2024 07:05:00 GMT
+ * Generated on Wed, 29 May 2024 01:56:21 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -44265,7 +44301,6 @@ class Popover {
         this.mutationObserver = createObserver();
         this.guid = `calcite-popover-${guid()}`;
         this.openTransitionProp = "opacity";
-        this.hasLoaded = false;
         // --------------------------------------------------------------------------
         //
         //  Private Methods
@@ -44400,16 +44435,16 @@ class Popover {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
+    async connectedCallback() {
         this.setFilteredPlacements();
         connectLocalized(this);
         connectMessages(this);
-        this.setUpReferenceElement(this.hasLoaded);
+        await componentOnReady(this.el);
+        this.setUpReferenceElement();
         connectFocusTrap(this);
         if (this.open) {
             onToggleOpenCloseComponent(this);
         }
-        connectFloatingUI(this, this.effectiveReferenceElement, this.el);
     }
     async componentWillLoad() {
         await setUpMessages(this);
@@ -44417,11 +44452,6 @@ class Popover {
     }
     componentDidLoad() {
         setComponentLoaded(this);
-        if (this.referenceElement && !this.effectiveReferenceElement) {
-            this.setUpReferenceElement();
-        }
-        connectFloatingUI(this, this.effectiveReferenceElement, this.el);
-        this.hasLoaded = true;
     }
     disconnectedCallback() {
         this.removeReferences();
@@ -44511,15 +44541,15 @@ class Popover {
         const arrowNode = !pointerDisabled ? (hAsync(FloatingArrow, { floatingLayout: floatingLayout, key: "floating-arrow",
             // 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.storeArrowEl })) : null;
-        return (hAsync(Host, { key: 'c6ca86d9bde93db52f3abc95344e8bff9e245517', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, hAsync("div", { key: '1e1054bfa6ac2e762b8ba49b0148330c6e3e4bd8', class: {
+        return (hAsync(Host, { key: '28d8cf0eff362e7f787a33db9bee0cbf9c110a6b', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, hAsync("div", { key: '673470f8cb626d87cdfd49caaeef64a621cc47a7', class: {
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: displayed,
             },
             // 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.setTransitionEl }, arrowNode, hAsync("div", { key: 'e9d6f6a86b2f433625df8436bc7bbea1dcdd5c60', class: {
+            ref: this.setTransitionEl }, arrowNode, hAsync("div", { key: '2f63d0b51c7ee3aef33b691166d44d906b525fd7', class: {
                 [CSS$y.hasHeader]: !!heading,
                 [CSS$y.container]: true,
-            } }, this.renderHeader(), hAsync("div", { key: '64845f98d4666edc418aa119c3fd7c592d41ee48', class: CSS$y.content }, hAsync("slot", { key: '24a55594fb96fb227012406096f74b7646b58b9e' })), !heading ? this.renderCloseButton() : null))));
+            } }, this.renderHeader(), hAsync("div", { key: 'e46fdad51d039b02d1d7f4a9fb686a4f3cc49bd0', class: CSS$y.content }, hAsync("slot", { key: 'cc6157750d47d1458bda5531e626191aeff71df5' })), !heading ? this.renderCloseButton() : null))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -53262,7 +53292,6 @@ class Tooltip {
         this.calciteTooltipBeforeOpen = createEvent(this, "calciteTooltipBeforeOpen", 6);
         this.calciteTooltipOpen = createEvent(this, "calciteTooltipOpen", 6);
         this.guid = `calcite-tooltip-${guid()}`;
-        this.hasLoaded = false;
         this.openTransitionProp = "opacity";
         this.setTransitionEl = (el) => {
             this.transitionEl = el;
@@ -53338,25 +53367,18 @@ class Tooltip {
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
-    connectedCallback() {
-        this.setUpReferenceElement(this.hasLoaded);
+    async connectedCallback() {
+        await componentOnReady(this.el);
+        this.setUpReferenceElement(true);
         if (this.open) {
             onToggleOpenCloseComponent(this);
         }
-        connectFloatingUI(this, this.effectiveReferenceElement, this.el);
     }
     async componentWillLoad() {
         if (this.open) {
             onToggleOpenCloseComponent(this);
         }
     }
-    componentDidLoad() {
-        if (this.referenceElement && !this.effectiveReferenceElement) {
-            this.setUpReferenceElement();
-        }
-        connectFloatingUI(this, this.effectiveReferenceElement, this.el);
-        this.hasLoaded = true;
-    }
     disconnectedCallback() {
         this.removeReferences();
         disconnectFloatingUI(this, this.effectiveReferenceElement, this.el);
@@ -53410,14 +53432,14 @@ class Tooltip {
         const { effectiveReferenceElement, label, open, floatingLayout } = this;
         const displayed = effectiveReferenceElement && open;
         const hidden = !displayed;
-        return (hAsync(Host, { key: 'e34d0071ff64ee773ee5bbe5a677c739b8326818', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, hAsync("div", { key: '7da5007a141c44aab0b84228d284fd7f61802ec3', class: {
+        return (hAsync(Host, { key: 'ae49e09ed0bff6db00b92e8bb34d518fdc1a3823', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, hAsync("div", { key: 'e3b6c87be8f605bc57517f36eb7602151f37a5bf', class: {
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: displayed,
             },
             // 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.setTransitionEl }, hAsync(FloatingArrow, { key: '0d8fae7c85b885579b2783ca9abd653c90261d93', floatingLayout: floatingLayout,
+            ref: this.setTransitionEl }, hAsync(FloatingArrow, { key: 'e82c0f508a212de1c0b62a4dcb4179ecf1e3557a', floatingLayout: floatingLayout,
             // 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: (arrowEl) => (this.arrowEl = arrowEl) }), hAsync("div", { key: '6f521a876289e6601d1984bb6d1d980fe56b5e2f', class: CSS$3.container }, hAsync("slot", { key: '3d87fbde922e9b5ef763e53584073a552094adc2' })))));
+            ref: (arrowEl) => (this.arrowEl = arrowEl) }), hAsync("div", { key: 'd350edf45e4141aa73df3ae0e9c8e3a64e5ff268', class: CSS$3.container }, hAsync("slot", { key: '07dd1bd7bd128b793f1ca79e2d510345ed81ec7f' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
@@ -76,7 +76,7 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "^2.2.1-hotfix.0",
-    "@esri/calcite-ui-icons": "3.28.1",
+    "@esri/calcite-ui-icons": "3.28.2",
     "@esri/eslint-plugin-calcite-components": "^1.2.1-hotfix.0",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil-community/postcss": "2.2.0",
@@ -89,5 +89,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "149982a673eaaacddb5bbeba67fadd834c689b1d"
+  "gitHead": "a7781689c4c793bad6a2a2f60b1b81e901882515"
 }

package/readme.md

@@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.8.2/dist/calcite/calcite.esm.js"
+  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.8.4/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.8.2/dist/calcite/calcite.css"
+  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@2.8.4/dist/calcite/calcite.css"
 />
 ```
 

package/dist/calcite/p-02305f36.js

@@ -1,7 +0,0 @@
-/*!
- * 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.8.2
- */
-import{d as r}from"./p-d5fc2354.js";import"./p-c5b35348.js";import"./p-6011cbd3.js";import"./p-616d6ff5.js";import"./p-32a6e756.js";import"./p-2cb39843.js";import"./p-6ea3ac52.js";import"./p-4d009089.js";import"./p-a1178c3e.js";import"./p-04e67155.js";import"./p-9604d280.js";import"./p-65d66925.js";import"./p-33fa3a3b.js";import"./p-6e5f26cf.js";import"./p-a2ead21e.js";import"./p-04bcb25d.js";import"./p-31f01517.js";import"./p-7d1ab21b.js";import"./p-fb9993c7.js";var e={name:"da",weekdays:"søndag_mandag_tirsdag_onsdag_torsdag_fredag_lørdag".split("_"),weekdaysShort:"søn._man._tirs._ons._tors._fre._lør.".split("_"),weekdaysMin:"sø._ma._ti._on._to._fr._lø.".split("_"),months:"januar_februar_marts_april_maj_juni_juli_august_september_oktober_november_december".split("_"),monthsShort:"jan._feb._mar._apr._maj_juni_juli_aug._sept._okt._nov._dec.".split("_"),weekStart:1,ordinal:function r(e){return e+"."},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD.MM.YYYY",LL:"D. MMMM YYYY",LLL:"D. MMMM YYYY HH:mm",LLLL:"dddd [d.] D. MMMM YYYY [kl.] HH:mm"},relativeTime:{future:"om %s",past:"%s siden",s:"få sekunder",m:"et minut",mm:"%d minutter",h:"en time",hh:"%d timer",d:"en dag",dd:"%d dage",M:"en måned",MM:"%d måneder",y:"et år",yy:"%d år"}};r.locale(e,null,true);export{e as default};
-//# sourceMappingURL=p-02305f36.js.map

package/dist/calcite/p-038bee09.entry.js

@@ -1,7 +0,0 @@
-/*!
- * 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.8.2
- */
-import{r as e,f as t,h as i,H as n,g as o,c as s,F as r}from"./p-c5b35348.js";import{s as a,k as c,d as l,g as d}from"./p-616d6ff5.js";import{s as h,a as u,c as f}from"./p-65d66925.js";import{c as m,d as p}from"./p-33fa3a3b.js";import{u as b,c as v,s as g,d as y}from"./p-31f01517.js";import{C as x}from"./p-2cb39843.js";import"./p-32a6e756.js";import"./p-a1178c3e.js";import"./p-6e5f26cf.js";const w=":host{display:flex}ul{margin:0px;display:inline-flex;block-size:100%;align-items:center;padding:0px}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}";const k=w;const z=class{constructor(t){e(this,t);this.menuItems=[];this.handleMenuSlotChange=e=>{this.menuItems=a(e);this.setMenuItemLayout(this.menuItems,this.layout)};this.label=undefined;this.layout="horizontal";this.messageOverrides=undefined;this.messages=undefined;this.defaultMessages=undefined;this.effectiveLocale=""}handleGlobalAttributesChanged(){t(this);this.setMenuItemLayout(this.menuItems,this.layout)}handleLayoutChange(e){this.setMenuItemLayout(this.menuItems,e)}onMessagesChange(){}effectiveLocaleChange(){b(this,this.effectiveLocale)}connectedCallback(){m(this);v(this)}async componentWillLoad(){h(this);await g(this)}componentDidLoad(){u(this)}disconnectedCallback(){p(this);y(this)}async setFocus(){await f(this);this.el.focus()}calciteInternalNavMenuItemKeyEvent(e){const t=e.target;const i=e.detail.children;const n=e.detail.event.key;e.stopPropagation();if(n==="ArrowDown"){if(t.layout==="vertical"){c(this.menuItems,t,"next",false)}else{if(e.detail.isSubmenuOpen){i[0].setFocus()}}}else if(n==="ArrowUp"){if(this.layout==="vertical"){c(this.menuItems,t,"previous",false)}else{if(e.detail.isSubmenuOpen){i[i.length-1].setFocus()}}}else if(n==="ArrowRight"){if(this.layout==="horizontal"){c(this.menuItems,t,"next",false)}else{if(e.detail.isSubmenuOpen){i[0].setFocus()}}}else if(n==="ArrowLeft"){if(this.layout==="horizontal"){c(this.menuItems,t,"previous",false)}else{if(e.detail.isSubmenuOpen){this.focusParentElement(e.target)}}}else if(n==="Escape"){this.focusParentElement(e.target)}e.preventDefault()}focusParentElement(e){const t=e.parentElement;if(t){l(t);t.open=false}}setMenuItemLayout(e,t){e.forEach((e=>{e.layout=t;if(this.getEffectiveRole()==="menubar"){e.isTopLevelItem=true;e.topLevelMenuLayout=this.layout}}))}getEffectiveRole(){return this.el.getAttribute("role")||"menubar"}render(){return i(n,{key:"669e13e4abc6cbb425226bd6e7d25f83f0283eab"},i("ul",{key:"d6b5858ea4e4935a7f789c2ed9b40432baa28e7e","aria-label":this.label,role:this.getEffectiveRole()},i("slot",{key:"5e72015f3b6c1f81dabe0ada164d105d1bda82e4",onSlotchange:this.handleMenuSlotChange})))}static get delegatesFocus(){return true}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{role:["handleGlobalAttributesChanged"],layout:["handleLayoutChange"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};z.style=k;const C={container:"container",content:"content",dropdownVertical:"dropdown--vertical",dropdownMenuItems:"dropdown-menu-items",dropdownAction:"dropdown-action",layoutVertical:"layout--vertical",hoverHrefIcon:"hover-href-icon",icon:"icon",iconBreadcrumb:"icon--breadcrumb",iconDropdown:"icon--dropdown",iconEnd:"icon--end",iconStart:"icon--start",isParentVertical:"parent--vertical",itemContent:"item-content",open:"open",nested:"nested",textContainer:"text-container"};const I=':host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-color-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2)}.content:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-2);outline:2px solid var(--calcite-ui-focus-color, 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          )}.content:active{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-color-text-1);border-color:var(--calcite-color-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host([layout=vertical]) .content{padding-inline:0.75rem}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:0.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:0.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-color-text-3)}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:0.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:0.5rem}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:"";inset-block:0.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-color-text-1);border-inline-start:1px solid var(--calcite-color-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-color-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-color-border-3);background:var(--calcite-color-foreground-1);inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}';const L=I;const A=class{constructor(t){e(this,t);this.calciteInternalMenuItemKeyEvent=s(this,"calciteInternalMenuItemKeyEvent",7);this.calciteMenuItemSelect=s(this,"calciteMenuItemSelect",7);this.clickHandler=e=>{if(this.href&&e.target===this.dropdownActionEl||!this.href&&this.hasSubmenu){this.open=!this.open}this.selectMenuItem(e)};this.handleMenuItemSlotChange=e=>{this.submenuItems=a(e);this.submenuItems.forEach((e=>{if(!e.topLevelMenuLayout){e.topLevelMenuLayout=this.topLevelMenuLayout}}));this.hasSubmenu=this.submenuItems.length>0};this.keyDownHandler=async e=>{const{hasSubmenu:t,href:i,layout:n,open:o,submenuItems:s}=this;const r=e.key;const a=e.target===this.dropdownActionEl;if(e.defaultPrevented){return}if(r===" "||r==="Enter"){if(t&&(!i||i&&a)){this.open=!o}if(!(i&&a)&&r!=="Enter"){this.selectMenuItem(e)}if(r===" "||i&&a){e.preventDefault()}}else if(r==="Escape"){if(o){this.open=false;return}this.calciteInternalMenuItemKeyEvent.emit({event:e});e.preventDefault()}else if(r==="ArrowDown"||r==="ArrowUp"){e.preventDefault();if((a||!i)&&t&&!o&&n==="horizontal"){this.open=true;return}this.calciteInternalMenuItemKeyEvent.emit({event:e,children:s,isSubmenuOpen:o&&t})}else if(r==="ArrowLeft"){e.preventDefault();this.calciteInternalMenuItemKeyEvent.emit({event:e,children:s,isSubmenuOpen:true})}else if(r==="ArrowRight"){e.preventDefault();if((a||!i)&&t&&!o&&n==="vertical"){this.open=true;return}this.calciteInternalMenuItemKeyEvent.emit({event:e,children:s,isSubmenuOpen:o&&t})}};this.active=undefined;this.breadcrumb=undefined;this.href=undefined;this.iconEnd=undefined;this.iconFlipRtl=undefined;this.iconStart=undefined;this.isTopLevelItem=false;this.label=undefined;this.layout=undefined;this.messageOverrides=undefined;this.messages=undefined;this.open=false;this.rel=undefined;this.target=undefined;this.text=undefined;this.topLevelMenuLayout=undefined;this.defaultMessages=undefined;this.effectiveLocale="";this.hasSubmenu=false;this.submenuItems=undefined}onMessagesChange(){}effectiveLocaleChange(){b(this,this.effectiveLocale)}async setFocus(){await f(this);this.anchorEl.focus()}handleClickOut(e){if(this.topLevelMenuLayout!=="vertical"&&this.hasSubmenu&&this.open&&!e.composedPath().includes(this.el)){this.open=false}}handleFocusOut(e){if(this.topLevelMenuLayout!=="vertical"&&!this.el.contains(e.relatedTarget)){this.open=false}}connectedCallback(){m(this);v(this)}async componentWillLoad(){h(this);await g(this)}componentDidLoad(){u(this)}disconnectedCallback(){p(this);y(this)}blurHandler(){this.isFocused=false}focusHandler(e){const t=e.target;this.isFocused=true;if(t.open&&!this.open){t.open=false}}selectMenuItem(e){if(e.target!==this.dropdownActionEl){this.calciteMenuItemSelect.emit()}}renderIconStart(){return i("calcite-icon",{class:`${C.icon} ${C.iconStart}`,flipRtl:this.iconFlipRtl==="start"||this.iconFlipRtl==="both",icon:this.iconStart,key:C.iconStart,scale:"s"})}renderIconEnd(){return i("calcite-icon",{class:`${C.icon} ${C.iconEnd}`,flipRtl:this.iconFlipRtl==="end"||this.iconFlipRtl==="both",icon:this.iconEnd,key:C.iconEnd,scale:"s"})}renderBreadcrumbIcon(e){return i("calcite-icon",{class:`${C.icon} ${C.iconBreadcrumb}`,icon:e==="rtl"?"chevron-left":"chevron-right",key:C.iconBreadcrumb,scale:"s"})}renderDropdownIcon(e){const t=e==="rtl"?"chevron-left":"chevron-right";return i("calcite-icon",{class:`${C.icon} ${C.iconDropdown}`,icon:this.topLevelMenuLayout==="vertical"||this.isTopLevelItem?this.open?"chevron-up":"chevron-down":t,key:C.iconDropdown,scale:"s"})}renderDropdownAction(e){const t=e==="rtl"?"chevron-left":"chevron-right";return i("calcite-action",{class:C.dropdownAction,icon:this.topLevelMenuLayout==="vertical"||this.isTopLevelItem?this.open?"chevron-up":"chevron-down":t,key:C.dropdownAction,onClick:this.clickHandler,onKeyDown:this.keyDownHandler,text:this.messages.open,ref:e=>this.dropdownActionEl=e})}renderSubmenuItems(e){return i("calcite-menu",{class:{[C.dropdownMenuItems]:true,[C.open]:this.open,[C.nested]:!this.isTopLevelItem,[x.rtl]:e==="rtl",[C.dropdownVertical]:this.topLevelMenuLayout==="vertical"},label:this.messages.submenu,layout:"vertical",role:"menu"},i("slot",{name:"submenu-item",onSlotchange:this.handleMenuItemSlotChange}))}renderHrefIcon(e){return i("calcite-icon",{class:C.hoverHrefIcon,icon:e==="rtl"?"arrow-left":"arrow-right",key:C.hoverHrefIcon,scale:"s"})}renderItemContent(e){const t=this.href&&(this.topLevelMenuLayout==="vertical"||!this.isTopLevelItem);return i(r,null,this.iconStart&&this.renderIconStart(),i("div",{class:C.textContainer},i("span",null,this.text)),t&&this.renderHrefIcon(e),this.iconEnd&&this.renderIconEnd(),this.breadcrumb?this.renderBreadcrumbIcon(e):null,!this.href&&this.hasSubmenu?this.renderDropdownIcon(e):null)}render(){const e=d(this.el);return i(n,{key:"a84ca1769bc08137a7defbea5e10ee12a78fbd58",onBlur:this.blurHandler,onFocus:this.focusHandler},i("li",{key:"88d13dda176ed2821b59505a6866b98b88f47f9b",class:{[C.container]:true,[C.isParentVertical]:this.topLevelMenuLayout==="vertical"},role:"none"},i("div",{key:"185265194184e457cfc1d578bee3b8c5e02d45b3",class:C.itemContent},i("a",{key:"456bbee5f9af53b51951c57b355b0696fa76fff7","aria-current":this.isFocused?"page":false,"aria-expanded":this.open,"aria-haspopup":this.hasSubmenu,"aria-label":this.label,class:{[C.layoutVertical]:this.layout==="vertical",[C.content]:true},href:this.href,onClick:this.clickHandler,onKeyDown:this.keyDownHandler,rel:this.rel,role:"menuitem",tabIndex:this.isTopLevelItem?0:-1,target:this.target,ref:e=>this.anchorEl=e},this.renderItemContent(e)),this.href&&this.hasSubmenu?this.renderDropdownAction(e):null),this.renderSubmenuItems(e)))}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};A.style=L;export{z as calcite_menu,A as calcite_menu_item};
-//# sourceMappingURL=p-038bee09.entry.js.map

package/dist/calcite/p-04bcb25d.js

@@ -1,7 +0,0 @@
-/*!
- * 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.8.2
- */
-const t=(t,n,r)=>Math.max(n,Math.min(t,r));const n=new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);const r=t=>{const r=(""+t).match(n);if(!r||parseInt(r[1])===0){return 0}return Math.max(0,(r[1]?r[1].length:0)-(r[2]?+r[2]:0))};function a(t){if(r(t)>0&&t>0){return parseFloat(`0.${t.toString().split(".")[1]}`)}return t}function e(t,n,r,a,e){return(t-n)*(e-a)/(r-n)+a}function s(t,n,r){return t<r?-1:t>n-r?1:0}export{s as a,t as c,r as d,a as g,e as r};
-//# sourceMappingURL=p-04bcb25d.js.map

package/dist/calcite/p-04e67155.js

@@ -1,7 +0,0 @@
-/*!
- * 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.8.2
- */
-import{j as n,q as t,a as e}from"./p-616d6ff5.js";import{c}from"./p-9604d280.js";const o="calciteInternalLabelClick";const s="calciteInternalLabelConnected";const r="calciteInternalLabelDisconnected";const i="calcite-label";const a=new WeakMap;const u=new WeakMap;const f=new WeakMap;const l=new WeakMap;const m=new Set;const d=n=>{const{id:c}=n;const o=c&&t(n,{selector:`${i}[for="${c}"]`});if(o){return o}const s=e(n,i);if(!s||p(s,n)){return null}return s};function p(n,t){let e;const c="custom-element-ancestor-check";const o=c=>{c.stopImmediatePropagation();const o=c.composedPath();e=o.slice(o.indexOf(t),o.indexOf(n))};n.addEventListener(c,o,{once:true});t.dispatchEvent(new CustomEvent(c,{composed:true,bubbles:true}));n.removeEventListener(c,o);const s=e.filter((e=>e!==t&&e!==n)).filter((n=>n.tagName?.includes("-")));return s.length>0}function b(n){if(!n){return}const t=d(n.el);if(u.has(t)&&t===n.labelEl||!t&&m.has(n)){return}const e=j.bind(n);if(t){n.labelEl=t;const c=a.get(t)||[];c.push(n);a.set(t,c.sort(k));if(!u.has(n.labelEl)){u.set(n.labelEl,M);n.labelEl.addEventListener(o,M)}m.delete(n);document.removeEventListener(s,f.get(n));l.set(n,e);document.addEventListener(r,e)}else if(!m.has(n)){e();document.removeEventListener(r,l.get(n))}}function h(n){if(!n){return}m.delete(n);document.removeEventListener(s,f.get(n));document.removeEventListener(r,l.get(n));f.delete(n);l.delete(n);if(!n.labelEl){return}const t=a.get(n.labelEl);if(t.length===1){n.labelEl.removeEventListener(o,u.get(n.labelEl));u.delete(n.labelEl)}a.set(n.labelEl,t.filter((t=>t!==n)).sort(k));n.labelEl=null}function k(t,e){return n(t.el,e.el)?-1:1}function w(n){return n.label||n.labelEl?.textContent?.trim()||""}function M(n){const t=n.detail.sourceEvent.target;const e=a.get(this);const c=e.find((n=>n.el===t));const o=e.includes(c);if(o){return}const s=e[0];if(s.disabled){return}s.onLabelClick(n)}function W(){if(m.has(this)){b(this)}}function j(){m.add(this);const n=f.get(this)||W.bind(this);f.set(this,n);document.addEventListener(s,n)}async function C(n){await c(n);const t=a.has(n);if(t){return}const e=n.ownerDocument?.getElementById(n.for);if(!e){return}requestAnimationFrame((()=>{for(const n of m){if(n.el===e){b(n);break}}}))}export{C as a,r as b,b as c,h as d,w as g,s as l};
-//# sourceMappingURL=p-04e67155.js.map