@esri/solutions-components 0.10.10 → 0.10.11

package/dist/components/alert.js

@@ -17,7 +17,7 @@ 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/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const DURATIONS = {
     slow: 14000,
@@ -37,7 +37,7 @@ const CSS = {
     containerBottom: "container--bottom",
     containerBottomEnd: "container--bottom-end",
     containerBottomStart: "container--bottom-start",
-    containerQueued: "container--queued",
+    containerActive: "container--active",
     containerTop: "container--top",
     containerTopEnd: "container--top-end",
     containerTopStart: "container--top-start",
@@ -53,9 +53,77 @@ const CSS = {
     focused: "focused",
 };
 
-const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:-moz-min-content;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close:focus{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          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:-moz-min-content;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress::after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container:not(.container--queued){border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.container--queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.container--queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress::after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+ * v2.12.0
+ */
+const alertQueueTimeoutMs = 300;
+class AlertManager {
+    constructor() {
+        // --------------------------------------------------------------------------
+        //
+        //  Private Properties
+        //
+        // --------------------------------------------------------------------------
+        this.registeredElements = [];
+        this.queueTimeoutId = null;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    registerElement(alert) {
+        const { registeredElements } = this;
+        if (!registeredElements.includes(alert)) {
+            switch (alert.queue) {
+                case "immediate":
+                    registeredElements.unshift(alert);
+                    break;
+                case "next":
+                    registeredElements.splice(1, 0, alert);
+                    break;
+                case "last":
+                    registeredElements.push(alert);
+                    break;
+            }
+            this.updateAlerts();
+        }
+    }
+    unregisterElement(alert) {
+        const { registeredElements } = this;
+        const index = registeredElements.indexOf(alert);
+        if (index !== -1) {
+            registeredElements.splice(index, 1);
+        }
+        alert.active = false;
+        this.updateAlerts();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    updateAlerts() {
+        window.clearTimeout(this.queueTimeoutId);
+        this.queueTimeoutId = null;
+        this.registeredElements.forEach((alert, index) => {
+            alert.openAlertCount = this.registeredElements.length;
+            if (index === 0) {
+                this.queueTimeoutId = window.setTimeout(() => (alert.active = true), alertQueueTimeoutMs);
+            }
+            else {
+                alert.active = false;
+            }
+        });
+    }
+}
+
+const alertCss = ":host{--calcite-alert-edge-distance:2rem;--calcite-alert-dismiss-progress-background:var(--calcite-color-transparent-tint);display:block}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:-moz-min-content;min-inline-size:min-content;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);text-align:start;opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - var(--calcite-alert-edge-distance) * 2);transition:opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}.container[class*=top]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}.container[class*=start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0px;margin-block:auto;margin-inline-end:auto;padding-inline-start:var(--calcite-alert-spacing-token-large)}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;padding:var(--calcite-alert-spacing-token-large);outline-color:transparent}.close:focus{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          )}.close:hover,.close:focus{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:-moz-min-content;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-color-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress::after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem;--calcite-alert-footer-height:2rem;--calcite-alert-footer-divider-gap:0.125rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem;--calcite-alert-footer-height:3rem;--calcite-alert-footer-divider-gap:0.25rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem;--calcite-alert-footer-height:4rem;--calcite-alert-footer-divider-gap:0.5rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host([open]) .container--active{border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container--active[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container--active[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress::after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}";
 const CalciteAlertStyle0 = alertCss;
 
+const manager = new AlertManager();
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     constructor() {
         super();
@@ -65,15 +133,13 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.calciteAlertClose = createEvent(this, "calciteAlertClose", 6);
         this.calciteAlertBeforeOpen = createEvent(this, "calciteAlertBeforeOpen", 6);
         this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 6);
-        this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
-        this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
         this.handleKeyBoardFocus = () => {
-            this.keyBoardFocus = true;
+            this.isFocused = true;
             this.handleFocus();
         };
         this.handleKeyBoardBlur = () => {
-            this.keyBoardFocus = false;
-            if (!this.mouseFocus) {
+            this.isFocused = false;
+            if (!this.isHovered) {
                 this.handleBlur();
             }
         };
@@ -81,39 +147,29 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.totalOpenTime = 0;
         this.totalHoverTime = 0;
         this.openTransitionProp = "opacity";
-        //--------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        //--------------------------------------------------------------------------
         this.setTransitionEl = (el) => {
             this.transitionEl = el;
         };
         /** close and emit calciteInternalAlertSync event with the updated queue payload */
         this.closeAlert = () => {
-            this.autoCloseTimeoutId = null;
-            this.queued = false;
             this.open = false;
-            this.queue = this.queue.filter((el) => el !== this.el);
-            this.determineActiveAlert();
-            this.calciteInternalAlertSync.emit({ queue: this.queue });
+            this.clearAutoCloseTimeout();
         };
         this.actionsEndSlotChangeHandler = (event) => {
             this.hasEndActions = slotChangeHasAssignedElement(event);
         };
         this.handleMouseOver = () => {
-            this.mouseFocus = true;
+            this.isHovered = true;
             this.handleFocus();
         };
         this.handleMouseLeave = () => {
-            this.mouseFocus = false;
-            if (!this.keyBoardFocus) {
+            this.isHovered = false;
+            if (!this.isFocused) {
                 this.handleBlur();
             }
         };
         this.handleFocus = () => {
-            window.clearTimeout(this.autoCloseTimeoutId);
-            this.autoCloseTimeoutId = null;
+            this.clearAutoCloseTimeout();
             this.totalOpenTime = Date.now() - this.initialOpenTime;
             this.lastMouseOverBegin = Date.now();
         };
@@ -123,6 +179,8 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             this.totalHoverTime = this.totalHoverTime ? hoverDuration + this.totalHoverTime : hoverDuration;
             this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), timeRemaining);
         };
+        this.active = false;
+        this.openAlertCount = 0;
         this.open = false;
         this.autoClose = false;
         this.autoCloseDuration = "medium";
@@ -136,34 +194,44 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.scale = "m";
         this.messages = undefined;
         this.messageOverrides = undefined;
+        this.queue = "last";
         this.defaultMessages = undefined;
         this.effectiveLocale = "";
         this.numberStringFormatter = new NumberStringFormat();
         this.hasEndActions = false;
-        this.queue = [];
-        this.queueLength = 0;
-        this.queued = false;
-        this.keyBoardFocus = false;
+        this.isFocused = false;
+    }
+    handleActiveChange() {
+        this.clearAutoCloseTimeout();
+        if (this.active && this.autoClose && !this.autoCloseTimeoutId) {
+            this.initialOpenTime = Date.now();
+            this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
+        }
     }
     openHandler() {
         onToggleOpenCloseComponent(this);
-        if (this.open && !this.queued) {
-            this.calciteInternalAlertRegister.emit();
+        if (this.open) {
+            manager.registerElement(this.el);
         }
-        if (!this.open) {
-            this.queue = this.queue.filter((el) => el !== this.el);
-            this.calciteInternalAlertSync.emit({ queue: this.queue });
+        else {
+            manager.unregisterElement(this.el);
         }
     }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
     updateDuration() {
         if (this.autoClose && this.autoCloseTimeoutId) {
-            window.clearTimeout(this.autoCloseTimeoutId);
+            this.clearAutoCloseTimeout();
             this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
         }
     }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    handleQueueChange() {
+        if (this.open) {
+            manager.unregisterElement(this.el);
+            manager.registerElement(this.el);
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Lifecycle
@@ -173,8 +241,8 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         connectLocalized(this);
         connectMessages(this);
         const open = this.open;
-        if (open && !this.queued) {
-            this.calciteInternalAlertRegister.emit();
+        if (open) {
+            manager.registerElement(this.el);
         }
         this.numberStringFormatter.numberFormatOptions = {
             locale: this.effectiveLocale,
@@ -193,39 +261,36 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         setComponentLoaded(this);
     }
     disconnectedCallback() {
-        window.dispatchEvent(new CustomEvent("calciteInternalAlertUnregister", {
-            detail: { alert: this.el },
-        }));
-        window.clearTimeout(this.autoCloseTimeoutId);
-        this.autoCloseTimeoutId = null;
-        window.clearTimeout(this.queueTimeout);
+        manager.unregisterElement(this.el);
+        this.clearAutoCloseTimeout();
         disconnectLocalized(this);
         disconnectMessages(this);
         this.embedded = false;
     }
     render() {
-        const { open, autoClose, label, placement, queued } = this;
+        const { open, autoClose, label, placement, active, openAlertCount } = this;
         const role = autoClose ? "alert" : "alertdialog";
         const hidden = !open;
         const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
-        const hasQueuedAlerts = this.queueLength > 1;
-        return (h(Host, { key: '169116d24d8bc100282c6338c2ed72168cba745e', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { key: 'b2d44e2f889e37a0481c860c98c4f5067eb48c33', class: {
+        const hasQueuedAlerts = openAlertCount > 1;
+        return (h(Host, { key: '925efaa1db32fd70f778106456e1dbb11d5a33b1', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { key: 'fc92bdb0f32f2e5461144fcc95d4cf77f1f1c916', class: {
                 [CSS.container]: true,
-                [CSS.containerQueued]: queued,
+                [CSS.containerActive]: active,
                 [`${CSS.container}--${placement}`]: true,
                 [CSS.containerEmbedded]: this.embedded,
-                [CSS.focused]: this.keyBoardFocus,
-            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose ? this.handleMouseLeave : null, ref: this.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), h("div", { key: 'add55405eff3b705b676338de5aa57b1606ccdab', class: CSS.textContainer, onFocusin: this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null }, h("slot", { key: '6dde08e89c9455c9f10f109d2a2c56a8c181a0ce', name: SLOTS.title }), h("slot", { key: 'a5f7cdfa56988f5330c7d252c578863077cdffa8', name: SLOTS.message }), h("slot", { key: 'e9efbead90aafecd3c955b353bdd7bf9c15a8240', name: SLOTS.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && !queued && autoClose ? h("div", { class: CSS.dismissProgress }) : null)));
+                [CSS.focused]: this.isFocused,
+            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose ? this.handleMouseLeave : null, ref: this.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), h("div", { key: '52fe536e5f4feb0714431c5a46e0a0a2dbf27110', class: CSS.textContainer, onFocusin: this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null }, h("slot", { key: '6037f775c962ba14084e8ec8b86c7a177fef037f', name: SLOTS.title }), h("slot", { key: '736344f5602889a2a4a8fc0d22963b827a41519a', name: SLOTS.message }), h("slot", { key: '8eea607803b78c9ff554682bb36fbea3e1693d6e', name: SLOTS.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && active && autoClose ? h("div", { class: CSS.dismissProgress }) : null)));
     }
     renderCloseButton() {
         return (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "close", onClick: this.closeAlert, onFocusin: this.autoClose ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
     }
     renderQueueCount() {
-        const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
+        const { openAlertCount } = this;
+        const queueNumber = openAlertCount > 2 ? openAlertCount - 1 : 1;
         const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);
         return (h("div", { class: {
                 [CSS.queueCount]: true,
-                [CSS.queueCountActive]: this.queueLength > 1,
+                [CSS.queueCountActive]: openAlertCount > 1,
             }, key: "queue-count" }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     }
     renderActionsEnd() {
@@ -234,38 +299,16 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     renderIcon(icon) {
         return (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })));
     }
-    // when an alert is opened or closed, update queue and determine active alert
-    alertSync(event) {
-        if (this.queue !== event.detail.queue) {
-            this.queue = event.detail.queue;
-        }
-        this.queueLength = this.queue.length;
-        this.determineActiveAlert();
-        event.stopPropagation();
-    }
-    // when an alert is first registered, trigger a queue sync
-    alertRegister() {
-        if (this.open && !this.queue.includes(this.el)) {
-            this.queued = true;
-            this.queue.push(this.el);
-        }
-        this.calciteInternalAlertSync.emit({ queue: this.queue });
-        this.determineActiveAlert();
-    }
-    // Event is dispatched on the window because the element is not in the DOM so bubbling won't occur.
-    alertUnregister(event) {
-        const queue = this.queue.filter((el) => el !== event.detail.alert);
-        this.queue = queue;
-        window.dispatchEvent(new CustomEvent("calciteInternalAlertSync", {
-            detail: { queue },
-        }));
-    }
     //--------------------------------------------------------------------------
     //
     //  Public Methods
     //
     //--------------------------------------------------------------------------
-    /** Sets focus on the component's "close" button, the first focusable item. */
+    /**
+     * Sets focus on the component's "close" button, the first focusable item.
+     *
+      @returns {Promise<void>}
+     */
     async setFocus() {
         await componentFocusable(this);
         const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
@@ -294,18 +337,14 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
             signDisplay: "always",
         };
     }
-    /** determine which alert is active */
-    determineActiveAlert() {
-        if (this.queue?.[0] === this.el) {
-            this.openAlert();
-            if (this.autoClose && !this.autoCloseTimeoutId) {
-                this.initialOpenTime = Date.now();
-                this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
-            }
-        }
-        else {
-            return;
-        }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    clearAutoCloseTimeout() {
+        window.clearTimeout(this.autoCloseTimeoutId);
+        this.autoCloseTimeoutId = null;
     }
     onBeforeOpen() {
         this.calciteAlertBeforeOpen.emit();
@@ -319,22 +358,21 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     onClose() {
         this.calciteAlertClose.emit();
     }
-    /** remove queued class after animation completes */
-    openAlert() {
-        window.clearTimeout(this.queueTimeout);
-        this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
-    }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
+        "active": ["handleActiveChange"],
         "open": ["openHandler"],
-        "messageOverrides": ["onMessagesChange"],
         "autoCloseDuration": ["updateDuration"],
+        "messageOverrides": ["onMessagesChange"],
+        "queue": ["handleQueueChange"],
         "effectiveLocale": ["effectiveLocaleChange"],
         "numberingSystem": ["numberingSystemChange"]
     }; }
     static get style() { return CalciteAlertStyle0; }
 }, [1, "calcite-alert", {
+        "active": [4],
+        "openAlertCount": [2, "open-alert-count"],
         "open": [1540],
         "autoClose": [516, "auto-close"],
         "autoCloseDuration": [513, "auto-close-duration"],
@@ -348,19 +386,19 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         "scale": [513],
         "messages": [1040],
         "messageOverrides": [1040],
+        "queue": [513],
         "defaultMessages": [32],
         "effectiveLocale": [32],
         "numberStringFormatter": [32],
         "hasEndActions": [32],
-        "queue": [32],
-        "queueLength": [32],
-        "queued": [32],
-        "keyBoardFocus": [32],
+        "isFocused": [32],
         "setFocus": [64]
-    }, [[8, "calciteInternalAlertSync", "alertSync"], [8, "calciteInternalAlertRegister", "alertRegister"], [8, "calciteInternalAlertUnregister", "alertUnregister"]], {
+    }, undefined, {
+        "active": ["handleActiveChange"],
         "open": ["openHandler"],
-        "messageOverrides": ["onMessagesChange"],
         "autoCloseDuration": ["updateDuration"],
+        "messageOverrides": ["onMessagesChange"],
+        "queue": ["handleQueueChange"],
         "effectiveLocale": ["effectiveLocaleChange"],
         "numberingSystem": ["numberingSystemChange"]
     }]);

package/dist/components/array.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 function getRoundRobinIndex(index, total) {
     return (index + total) % total;

package/dist/components/avatar.js

@@ -11,7 +11,7 @@ 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/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     thumbnail: "thumbnail",
@@ -23,7 +23,7 @@ const CSS = {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 /**
  * Convert a string to a valid hex by hashing its contents

package/dist/components/block.js

@@ -23,7 +23,7 @@ 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/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const IDS = {
     content: "content",
@@ -68,7 +68,7 @@ const ICONS = {
     invalid: "exclamation-mark-triangle",
 };
 
-const blockCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu actions-end\";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-color-text-3)}.actions-end{grid-area:actions-end}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{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          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}.toggle:hover .toggle-icon{color:var(--calcite-color-text-1)}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-color-text-3)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const blockCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto;transition-duration:var(--calcite-animation-timing)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu actions-end\";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-color-text-3)}.actions-end{grid-area:actions-end}.toggle{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}.toggle:hover{background-color:var(--calcite-color-foreground-2)}.toggle:focus{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          )}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0px}.header .title .heading{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}.description{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}.toggle:hover .toggle-icon{color:var(--calcite-color-text-1)}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-color-text-3)}.control-container{margin:0px;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([open]){margin-block:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteBlockStyle0 = blockCss;
 
 const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
@@ -81,7 +81,7 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
         this.calciteBlockClose = createEvent(this, "calciteBlockClose", 6);
         this.calciteBlockOpen = createEvent(this, "calciteBlockOpen", 6);
         this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 6);
-        this.openTransitionProp = "opacity";
+        this.openTransitionProp = "margin-top";
         // --------------------------------------------------------------------------
         //
         //  Private Methods
@@ -91,9 +91,6 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
             this.open = !this.open;
             this.calciteBlockToggle.emit();
         };
-        this.setTransitionEl = (el) => {
-            this.transitionEl = el;
-        };
         this.actionsEndSlotChangeHandler = (event) => {
             this.hasEndActions = slotChangeHasAssignedElement(event);
         };
@@ -164,6 +161,7 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
         connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
+        this.transitionEl = this.el;
     }
     disconnectedCallback() {
         disconnectInteractive(this);
@@ -230,14 +228,14 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     render() {
         const { collapsible, el, loading, open, heading, messages, description } = this;
         const toggleLabel = open ? messages.collapse : messages.expand;
-        const headerContent = (h("header", { key: 'f4585d3c5e71d91a3de8b60a8085e79ad0f649c2', class: { [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }, id: IDS.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
+        const headerContent = (h("header", { key: '91deb640f5a591cd70dbb6328cdc588a40b600d5', class: { [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }, id: IDS.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
         const hasControl = !!getSlotted(el, SLOTS.control);
         const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
         const collapseIcon = open ? ICONS.opened : ICONS.closed;
-        const headerNode = (h("div", { key: '6ca859e09a3b11219a3b412998c83e91c845753f', class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", { label: heading }) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end"), h("calcite-icon", { class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (h("div", null, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (h("div", { "aria-labelledby": IDS.header, class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
-        return (h(Host, { key: 'b42f72a17e0896ae7406d4f09f346cfb75e4c9ef' }, h(InteractiveContainer, { key: '181fef154faaa7f8d1dca2e08745c76141678053', disabled: this.disabled }, h("article", { key: 'd93e5b8f13529441ba99bcfcc51d5b31eab981ab', "aria-busy": toAriaBoolean(loading), class: {
+        const headerNode = (h("div", { key: 'ebba82b4e065978eaa9ed1e59f05ad80843cc9ab', class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", { label: heading }) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end"), h("calcite-icon", { class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (h("div", null, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (h("div", { "aria-labelledby": IDS.header, class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
+        return (h(Host, { key: 'b5c12059b36785bf45ce61e7309a35278b928088' }, h(InteractiveContainer, { key: '90a5013ca2e30dadbd76c146700a53391f3aea62', disabled: this.disabled }, h("article", { key: '825f15336afb992c7ea8c718b5ffad7c4bf2507e', "aria-busy": toAriaBoolean(loading), class: {
                 [CSS.container]: true,
-            } }, headerNode, h("section", { key: 'cd7759e5b8f695cd238b523075984b82de562005', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content, ref: this.setTransitionEl }, this.renderScrim())))));
+            } }, headerNode, h("section", { key: '4f690563d78615b68a225456aaae593af6adb826', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, this.renderScrim())))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/browser.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/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const isBrowser = () => Build.isBrowser &&
     typeof navigator !== "undefined" &&