@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/map-layer-picker2.js

@@ -177,7 +177,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
      * @returns Array of Dropdown items with layer names
      */
     _getDropdown(id) {
-        return (h("calcite-dropdown", { calciteDropdownOpen: () => alert("open"), class: "layer-picker-dropdown", onCalciteDropdownBeforeClose: () => this._isDropdownOpen = false, onCalciteDropdownBeforeOpen: () => this._isDropdownOpen = true }, this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(id), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
+        return (h("calcite-dropdown", { class: "layer-picker-dropdown", onCalciteDropdownBeforeClose: () => this._isDropdownOpen = false, onCalciteDropdownBeforeOpen: () => this._isDropdownOpen = true }, this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(id), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
     }
     /**
      * Get the button that will open the dropdown list wrapped in an action

package/dist/components/math.js

@@ -6,7 +6,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.0.0
+ * v2.4.0
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
@@ -20,24 +20,24 @@ const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
  * @returns {number} the amount of decimal places in a number
  */
 const decimalPlaces = (value) => {
-  const match = ("" + value).match(decimalNumberRegex);
-  if (!match || parseInt(match[1]) === 0) {
-    return 0;
-  }
-  return Math.max(0, 
-  // Number of digits right of decimal point.
-  (match[1] ? match[1].length : 0) -
-    // Adjust for scientific notation.
-    (match[2] ? +match[2] : 0));
+    const match = ("" + value).match(decimalNumberRegex);
+    if (!match || parseInt(match[1]) === 0) {
+        return 0;
+    }
+    return Math.max(0, 
+    // Number of digits right of decimal point.
+    (match[1] ? match[1].length : 0) -
+        // Adjust for scientific notation.
+        (match[2] ? +match[2] : 0));
 };
 function getDecimals(value) {
-  if (decimalPlaces(value) > 0 && value > 0) {
-    return parseFloat(`0.${value.toString().split(".")[1]}`);
-  }
-  return value;
+    if (decimalPlaces(value) > 0 && value > 0) {
+        return parseFloat(`0.${value.toString().split(".")[1]}`);
+    }
+    return value;
 }
 function remap(value, fromMin, fromMax, toMin, toMax) {
-  return ((value - fromMin) * (toMax - toMin)) / (fromMax - fromMin) + toMin;
+    return ((value - fromMin) * (toMax - toMin)) / (fromMax - fromMin) + toMin;
 }
 /**
  * Helper to determine if a value is close to the edge of a range within a threshold.
@@ -48,7 +48,7 @@ function remap(value, fromMin, fromMax, toMin, toMax) {
  * @returns -1 if close to lower edge, 1 if close to upper edge, 0 otherwise.
  */
 function closeToRangeEdge(value, range, threshold) {
-  return value < threshold ? -1 : value > range - threshold ? 1 : 0;
+    return value < threshold ? -1 : value > range - threshold ? 1 : 0;
 }
 
 export { closeToRangeEdge as a, clamp as c, decimalPlaces as d, getDecimals as g, remap as r };

package/dist/components/menu.js

@@ -3,12 +3,11 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { h as slotChangeGetAssignedElements, w as focusElementInGroup, f as focusElement } from './dom.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
-import { w as watchGlobalAttributes, u as unwatchGlobalAttributes } from './globalAttributes.js';
 
 const menuCss = ":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}";
 
@@ -33,9 +32,15 @@ const CalciteMenu = /*@__PURE__*/ proxyCustomElement(class CalciteMenu extends H
         this.messages = undefined;
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
-        this.globalAttributes = {
-            role: "menubar",
-        };
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Global attributes
+    //
+    //--------------------------------------------------------------------------
+    handleGlobalAttributesChanged() {
+        forceUpdate(this);
+        this.setMenuItemLayout(this.menuItems, this.layout);
     }
     handleLayoutChange(value) {
         this.setMenuItemLayout(this.menuItems, value);
@@ -54,7 +59,6 @@ const CalciteMenu = /*@__PURE__*/ proxyCustomElement(class CalciteMenu extends H
     connectedCallback() {
         connectLocalized(this);
         connectMessages(this);
-        watchGlobalAttributes(this, ["role"]);
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -66,7 +70,6 @@ const CalciteMenu = /*@__PURE__*/ proxyCustomElement(class CalciteMenu extends H
     disconnectedCallback() {
         disconnectLocalized(this);
         disconnectMessages(this);
-        unwatchGlobalAttributes(this);
     }
     //--------------------------------------------------------------------------
     //
@@ -143,24 +146,28 @@ const CalciteMenu = /*@__PURE__*/ proxyCustomElement(class CalciteMenu extends H
     setMenuItemLayout(items, layout) {
         items.forEach((item) => {
             item.layout = layout;
-            if (this.globalAttributes.role === "menubar") {
+            if (this.getEffectiveRole() === "menubar") {
                 item.isTopLevelItem = true;
                 item.topLevelMenuLayout = this.layout;
             }
         });
     }
+    getEffectiveRole() {
+        return this.el.getAttribute("role") || "menubar";
+    }
     // --------------------------------------------------------------------------
     //
     //  Render Methods
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("ul", Object.assign({ "aria-label": this.label }, this.globalAttributes), h("slot", { onSlotchange: this.handleMenuSlotChange }))));
+        return (h(Host, null, h("ul", { "aria-label": this.label, role: this.getEffectiveRole() }, h("slot", { onSlotchange: this.handleMenuSlotChange }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
+        "role": ["handleGlobalAttributesChanged"],
         "layout": ["handleLayoutChange"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
@@ -173,9 +180,9 @@ const CalciteMenu = /*@__PURE__*/ proxyCustomElement(class CalciteMenu extends H
         "messages": [1040],
         "defaultMessages": [32],
         "effectiveLocale": [32],
-        "globalAttributes": [32],
         "setFocus": [64]
     }, [[0, "calciteInternalMenuItemKeyEvent", "calciteInternalNavMenuItemKeyEvent"]], {
+        "role": ["handleGlobalAttributesChanged"],
         "layout": ["handleLayoutChange"],
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]

package/dist/components/modal.js

@@ -12,7 +12,7 @@ import { c as createObserver } from './observers.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
-import { g as getIconScale } from './component.js';
+import { g as getIconScale, c as componentOnReady } from './component.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
 import { d as defineCustomElement$1 } from './scrim.js';
@@ -20,47 +20,49 @@ import { d as defineCustomElement$1 } from './scrim.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  modal: "modal",
-  title: "title",
-  header: "header",
-  footer: "footer",
-  scrim: "scrim",
-  back: "back",
-  close: "close",
-  secondary: "secondary",
-  primary: "primary",
-  container: "container",
-  containerOpen: "container--open",
-  content: "content",
-  contentNoFooter: "content--no-footer",
-  contentBottom: "content-bottom",
-  contentTop: "content-top",
-  slottedInShell: "slotted-in-shell",
-  // these classes help apply the animation in phases to only set transform on open/close
-  // this helps avoid a positioning issue for any floating-ui-owning children
-  openingIdle: "modal--opening-idle",
-  openingActive: "modal--opening-active",
-  closingIdle: "modal--closing-idle",
-  closingActive: "modal--closing-active",
+    modal: "modal",
+    title: "title",
+    header: "header",
+    footer: "footer",
+    scrim: "scrim",
+    back: "back",
+    close: "close",
+    secondary: "secondary",
+    primary: "primary",
+    container: "container",
+    containerOpen: "container--open",
+    content: "content",
+    contentNoFooter: "content--no-footer",
+    contentBottom: "content-bottom",
+    contentTop: "content-top",
+    slottedInShell: "slotted-in-shell",
+    // these classes help apply the animation in phases to only set transform on open/close
+    // this helps avoid a positioning issue for any floating-ui-owning children
+    openingIdle: "modal--opening-idle",
+    openingActive: "modal--opening-active",
+    closingIdle: "modal--closing-idle",
+    closingActive: "modal--closing-active",
 };
 const ICONS = {
-  close: "x",
+    close: "x",
 };
 const SLOTS = {
-  content: "content",
-  contentBottom: "content-bottom",
-  contentTop: "content-top",
-  header: "header",
-  back: "back",
-  secondary: "secondary",
-  primary: "primary",
+    content: "content",
+    contentBottom: "content-bottom",
+    contentTop: "content-top",
+    header: "header",
+    back: "back",
+    secondary: "secondary",
+    primary: "primary",
 };
 
 const modalCss = ":host{--calcite-modal-scrim-background:rgba(0, 0, 0, 0.85);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-scrim-background-internal:rgba(0, 0, 0, 0.85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([scale=s]){--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));position:fixed;inset:0px;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:var(--calcite-z-index-modal);float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -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);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active{transform:var(--calcite-modal-shown-position)}.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([opened]){opacity:1;visibility:visible !important;transition-delay:0ms}.container--open{opacity:1;visibility:visible !important;transition-delay:0ms}.container--open .modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}.header{z-index:var(--calcite-z-index-header);display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto}.close{order:2;margin:0px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus,.close:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1);font-size:var(--calcite-modal-title-text-internal)}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0px;background-color:var(--calcite-modal-content-background, var(--calcite-color-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}.content-top,.content-bottom{z-index:var(--calcite-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}.content-top{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}.content-bottom{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}.content-top:not(.header~.content-top){border-start-start-radius:0.25rem;border-start-end-radius:0.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-context-text-internal)}.footer{z-index:var(--calcite-z-index-header);margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width-scale=s]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=s][docked]) .container{align-items:flex-end}}:host([width-scale=m]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=m][docked]) .container{align-items:flex-end}}:host([width-scale=l]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=l][docked]) .container{align-items:flex-end}}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([opened][fullscreen]) .header,:host([opened][fullscreen]) .footer,:host([opened][fullscreen]) .content-top,:host([opened][fullscreen]) .content-bottom{border-radius:0}:host([docked]) .modal{block-size:var(--calcite-modal-height, auto)}:host([docked]) .content{block-size:auto;flex:1 1 auto}:host([kind=brand]) .modal{border-color:var(--calcite-color-brand)}:host([kind=danger]) .modal{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .modal{border-color:var(--calcite-color-status-info)}:host([kind=success]) .modal{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .modal{border-color:var(--calcite-color-status-warning)}:host([kind=brand]) .modal,:host([kind=danger]) .modal,:host([kind=info]) .modal,:host([kind=success]) .modal,:host([kind=warning]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([kind=brand]) .header,:host([kind=brand]) .content-top,:host([kind=danger]) .header,:host([kind=danger]) .content-top,:host([kind=info]) .header,:host([kind=info]) .content-top,:host([kind=success]) .header,:host([kind=success]) .content-top,:host([kind=warning]) .header,:host([kind=warning]) .content-top{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){* slot[name=header]::slotted(content-top),* content-top::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer,.content-bottom{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer,.content-bottom{flex-direction:column}.back,.secondary{margin:0px;margin-block-end:0.25rem}}.container.slotted-in-shell{position:absolute;pointer-events:auto}.container.slotted-in-shell calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";
 
+let totalOpenModals = 0;
+let initialDocumentOverflowStyle = "";
 const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
     constructor() {
         super();
@@ -117,6 +119,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
                     return;
                 }
             }
+            totalOpenModals--;
             this.opened = false;
             this.removeOverflowHiddenClass();
         };
@@ -179,7 +182,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         setUpLoadableComponent(this);
         // when modal initially renders, if active was set we need to open as watcher doesn't fire
         if (this.open) {
-            requestAnimationFrame(() => this.openModal());
+            this.openModal();
         }
     }
     componentDidLoad() {
@@ -348,16 +351,12 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         }
     }
     handleOpenedChange(value) {
-        var _a, _b;
+        const idleClass = value ? CSS.openingIdle : CSS.closingIdle;
+        this.transitionEl.classList.add(idleClass);
         onToggleOpenCloseComponent(this);
-        if (value) {
-            (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS.openingIdle);
-        }
-        else {
-            (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS.closingIdle);
-        }
     }
-    openModal() {
+    async openModal() {
+        await componentOnReady(this.el);
         this.el.addEventListener("calciteModalOpen", this.openEnd);
         this.opened = true;
         const titleEl = getSlotted(this.el, SLOTS.header);
@@ -365,13 +364,16 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.titleId = ensureId(titleEl);
         this.contentId = ensureId(contentEl);
         if (!this.slottedInShell) {
-            this.initialOverflowCSS = document.documentElement.style.overflow;
+            if (totalOpenModals === 0) {
+                initialDocumentOverflowStyle = document.documentElement.style.overflow;
+            }
+            totalOpenModals++;
             // use an inline style instead of a utility class to avoid global class declarations.
             document.documentElement.style.setProperty("overflow", "hidden");
         }
     }
     removeOverflowHiddenClass() {
-        document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
+        document.documentElement.style.setProperty("overflow", initialDocumentOverflowStyle);
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/notice.js

@@ -17,20 +17,20 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const SLOTS = {
-  title: "title",
-  message: "message",
-  link: "link",
-  actionsEnd: "actions-end",
+    title: "title",
+    message: "message",
+    link: "link",
+    actionsEnd: "actions-end",
 };
 const CSS = {
-  actionsEnd: "actions-end",
-  close: "notice-close",
-  container: "container",
-  content: "notice-content",
-  icon: "notice-icon",
+    actionsEnd: "actions-end",
+    close: "notice-close",
+    container: "container",
+    content: "notice-content",
+    icon: "notice-icon",
 };
 
 const noticeCss = ":host([scale=s]){--calcite-notice-spacing-token-small:0.5rem;--calcite-notice-spacing-token-large:0.75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .notice-close{padding:0.5rem}:host([scale=m]){--calcite-notice-spacing-token-small:0.75rem;--calcite-notice-spacing-token-large:1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small:1rem;--calcite-notice-spacing-token-large:1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){margin-block:0.125rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){margin-block:0.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([width=auto]){--calcite-notice-width:auto}:host([width=half]){--calcite-notice-width:50%}:host([width=full]){--calcite-notice-width:100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:none;inline-size:100%;background-color:var(--calcite-color-foreground-1);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;max-block-size:0;text-align:start;border-inline-start:0px solid;box-shadow:0 0 0 0 transparent}.notice-close{outline-color:transparent}.notice-close:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host{display:flex}:host([open]) .container{pointer-events:auto;display:flex;max-block-size:100%;align-items:center;border-width:2px;opacity:1;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0px;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:var(--calcite-notice-spacing-token-small)}.notice-content{box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-small)}.notice-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto}.notice-close{display:flex;cursor:pointer;align-items:center;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;box-sizing:border-box;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;-webkit-appearance:none}.notice-close:hover,.notice-close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.notice-close:active{background-color:var(--calcite-color-foreground-3)}.actions-end{display:flex;align-self:stretch}:host([kind=brand]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand]) .container .notice-icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-color:var(--calcite-color-status-info)}:host([kind=info]) .container .notice-icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .notice-icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-color:var(--calcite-color-status-success)}:host([kind=success]) .container .notice-icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .notice-icon{color:var(--calcite-color-status-warning)}:host([hidden]){display:none}[hidden]{display:none}";

package/dist/components/observers.js

@@ -8,7 +8,7 @@ import { Build } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 /**
  * This utility ensures observers are created only for browser contexts.
@@ -18,39 +18,39 @@ import { Build } from '@stencil/core/internal/client';
  * @param options - the observer options
  */
 function createObserver(type, callback, options) {
-  if (!Build.isBrowser) {
-    return undefined;
-  }
-  const Observer = getObserver(type);
-  return new Observer(callback, options);
+    if (!Build.isBrowser) {
+        return undefined;
+    }
+    const Observer = getObserver(type);
+    return new Observer(callback, options);
 }
 function getObserver(type) {
-  // based on https://github.com/whatwg/dom/issues/126#issuecomment-1049814948
-  class ExtendedMutationObserver extends window.MutationObserver {
-    constructor(callback) {
-      super(callback);
-      this.observedEntry = [];
-      this.callback = callback;
-    }
-    observe(target, options) {
-      this.observedEntry.push({ target, options });
-      return super.observe(target, options);
-    }
-    unobserve(target) {
-      const newObservedEntries = this.observedEntry.filter((observed) => observed.target !== target);
-      this.observedEntry = [];
-      this.callback(super.takeRecords(), this);
-      this.disconnect();
-      newObservedEntries.forEach((observed) => this.observe(observed.target, observed.options));
+    // based on https://github.com/whatwg/dom/issues/126#issuecomment-1049814948
+    class ExtendedMutationObserver extends window.MutationObserver {
+        constructor(callback) {
+            super(callback);
+            this.observedEntry = [];
+            this.callback = callback;
+        }
+        observe(target, options) {
+            this.observedEntry.push({ target, options });
+            return super.observe(target, options);
+        }
+        unobserve(target) {
+            const newObservedEntries = this.observedEntry.filter((observed) => observed.target !== target);
+            this.observedEntry = [];
+            this.callback(super.takeRecords(), this);
+            this.disconnect();
+            newObservedEntries.forEach((observed) => this.observe(observed.target, observed.options));
+        }
     }
-  }
-  return (function () {
-    return (type === "intersection"
-      ? window.IntersectionObserver
-      : type === "mutation"
-        ? ExtendedMutationObserver
-        : window.ResizeObserver);
-  })();
+    return (function () {
+        return (type === "intersection"
+            ? window.IntersectionObserver
+            : type === "mutation"
+                ? ExtendedMutationObserver
+                : window.ResizeObserver);
+    })();
 }
 
 export { createObserver as c };

package/dist/components/openCloseComponent.js

@@ -8,18 +8,18 @@ import { readTask } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 function isOpen(component) {
-  return "opened" in component ? component.opened : component.open;
+    return "opened" in component ? component.opened : component.open;
 }
 function emitImmediately(component, nonOpenCloseComponent = false) {
-  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-    ? component.onBeforeOpen()
-    : component.onBeforeClose();
-  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-    ? component.onOpen()
-    : component.onClose();
+    (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
+        ? component.onBeforeOpen()
+        : component.onBeforeClose();
+    (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
+        ? component.onOpen()
+        : component.onClose();
 }
 /**
  * Helper to determine globally set transition duration on the given openTransitionProp, which is imported and set in the @Watch("open").
@@ -42,49 +42,49 @@ function emitImmediately(component, nonOpenCloseComponent = false) {
  * @param nonOpenCloseComponent - OpenCloseComponent uses `expanded` prop to emit (before)open/close.
  */
 function onToggleOpenCloseComponent(component, nonOpenCloseComponent = false) {
-  readTask(() => {
-    if (component.transitionEl) {
-      const { transitionDuration: allDurations, transitionProperty: allProps } = getComputedStyle(component.transitionEl);
-      const allTransitionDurationsArray = allDurations.split(",");
-      const allTransitionPropsArray = allProps.split(",");
-      const openTransitionPropIndex = allTransitionPropsArray.indexOf(component.openTransitionProp);
-      const transitionDuration = allTransitionDurationsArray[openTransitionPropIndex] ??
-        /* Safari will have a single transition value if multiple props share it,
-        so we fall back to it if there's no matching prop duration */
-        allTransitionDurationsArray[0];
-      if (transitionDuration === "0s") {
-        emitImmediately(component, nonOpenCloseComponent);
-        return;
-      }
-      const fallbackTimeoutId = setTimeout(() => {
-        component.transitionEl.removeEventListener("transitionstart", onStart);
-        component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
-        component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
-        emitImmediately(component, nonOpenCloseComponent);
-      }, parseFloat(transitionDuration) * 1000);
-      component.transitionEl.addEventListener("transitionstart", onStart);
-      component.transitionEl.addEventListener("transitionend", onEndOrCancel);
-      component.transitionEl.addEventListener("transitioncancel", onEndOrCancel);
-      function onStart(event) {
-        if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
-          clearTimeout(fallbackTimeoutId);
-          component.transitionEl.removeEventListener("transitionstart", onStart);
-          (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-            ? component.onBeforeOpen()
-            : component.onBeforeClose();
+    readTask(() => {
+        if (component.transitionEl) {
+            const { transitionDuration: allDurations, transitionProperty: allProps } = getComputedStyle(component.transitionEl);
+            const allTransitionDurationsArray = allDurations.split(",");
+            const allTransitionPropsArray = allProps.split(",");
+            const openTransitionPropIndex = allTransitionPropsArray.indexOf(component.openTransitionProp);
+            const transitionDuration = allTransitionDurationsArray[openTransitionPropIndex] ??
+                /* Safari will have a single transition value if multiple props share it,
+                so we fall back to it if there's no matching prop duration */
+                allTransitionDurationsArray[0];
+            if (transitionDuration === "0s") {
+                emitImmediately(component, nonOpenCloseComponent);
+                return;
+            }
+            const fallbackTimeoutId = setTimeout(() => {
+                component.transitionEl.removeEventListener("transitionstart", onStart);
+                component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
+                component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
+                emitImmediately(component, nonOpenCloseComponent);
+            }, parseFloat(transitionDuration) * 1000);
+            component.transitionEl.addEventListener("transitionstart", onStart);
+            component.transitionEl.addEventListener("transitionend", onEndOrCancel);
+            component.transitionEl.addEventListener("transitioncancel", onEndOrCancel);
+            function onStart(event) {
+                if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
+                    clearTimeout(fallbackTimeoutId);
+                    component.transitionEl.removeEventListener("transitionstart", onStart);
+                    (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
+                        ? component.onBeforeOpen()
+                        : component.onBeforeClose();
+                }
+            }
+            function onEndOrCancel(event) {
+                if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
+                    (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
+                        ? component.onOpen()
+                        : component.onClose();
+                    component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
+                    component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
+                }
+            }
         }
-      }
-      function onEndOrCancel(event) {
-        if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
-          (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-            ? component.onOpen()
-            : component.onClose();
-          component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
-          component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
-        }
-      }
-    }
-  });
+    });
 }
 
 export { onToggleOpenCloseComponent as o };

package/dist/components/pagination.js

@@ -14,25 +14,25 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 const CSS = {
-  page: "page",
-  selected: "selected",
-  chevron: "chevron",
-  disabled: "disabled",
-  ellipsis: "ellipsis",
+    page: "page",
+    selected: "selected",
+    chevron: "chevron",
+    disabled: "disabled",
+    ellipsis: "ellipsis",
 };
 const ICONS = {
-  next: "chevron-right",
-  previous: "chevron-left",
-  first: "chevron-start",
-  last: "chevron-end",
+    next: "chevron-right",
+    previous: "chevron-left",
+    first: "chevron-start",
+    last: "chevron-end",
 };
 
 /**
  * Do not edit directly
- * Generated on Sat, 02 Dec 2023 04:05:27 GMT
+ * Generated on Wed, 17 Jan 2024 17:52:10 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -43,22 +43,22 @@ const calciteContainerSizeWidthLg = {"min":"1153px","max":"1440px"}; // Large la
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.0.0
+ * v2.4.0
  */
 /**
  * A breakpoints lookup object.
  */
 const breakpoints = {
-  width: {
-    large: cssLengthToNumber(calciteContainerSizeWidthLg.max),
-    medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),
-    small: cssLengthToNumber(calciteContainerSizeWidthSm.max),
-    xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),
-    xxsmall: cssLengthToNumber(calciteContainerSizeWidthXxs.max),
-  },
+    width: {
+        large: cssLengthToNumber(calciteContainerSizeWidthLg.max),
+        medium: cssLengthToNumber(calciteContainerSizeWidthMd.max),
+        small: cssLengthToNumber(calciteContainerSizeWidthSm.max),
+        xsmall: cssLengthToNumber(calciteContainerSizeWidthXs.max),
+        xxsmall: cssLengthToNumber(calciteContainerSizeWidthXxs.max),
+    },
 };
 function cssLengthToNumber(length) {
-  return parseInt(length);
+    return parseInt(length);
 }
 
 const paginationCss = ":host{display:flex;writing-mode:horizontal-tb}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:0.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:0.75rem}:host button{outline-color:transparent}:host button:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.chevron,.page,.ellipsis{margin:0px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity:0;background-color:transparent;padding:0px;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-color-text-3)}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{color:var(--calcite-color-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.page:hover{border-block-end-color:var(--calcite-color-border-2)}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);border-block-end-color:var(--calcite-color-brand)}.chevron:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-brand)}.chevron:active{background-color:var(--calcite-color-foreground-3)}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}";