@esri/calcite-components 1.0.0-next.313 → 1.0.0-next.314

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, getElementStyleDir } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 /**
  * @slot - A slot for adding content to the shell panel.
@@ -54,7 +54,7 @@ export class CalciteShellPanel {
     };
     this.getKeyAdjustedWidth = (event) => {
       const { key } = event;
-      const { step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
+      const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
       const multipliedStep = step * stepMultiplier;
       const MOVEMENT_KEYS = [
         "ArrowUp",
@@ -69,15 +69,20 @@ export class CalciteShellPanel {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const increaseKeys = key === "ArrowUp" || (position === "end" ? key === "ArrowLeft" : key === "ArrowRight");
+      const dir = getElementStyleDir(el);
+      const directionKeys = ["ArrowLeft", "ArrowRight"];
+      const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
+      const increaseKeys = key === "ArrowUp" ||
+        (position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
       if (increaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth + stepValue;
+        return initialContentWidth + directionFactor * stepValue;
       }
-      const decreaseKeys = key === "ArrowDown" || (position === "end" ? key === "ArrowRight" : key === "ArrowLeft");
+      const decreaseKeys = key === "ArrowDown" ||
+        (position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
       if (decreaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth - stepValue;
+        return initialContentWidth - directionFactor * stepValue;
       }
       if (typeof contentWidthMin === "number" && key === "Home") {
         return contentWidthMin;
@@ -102,9 +107,13 @@ export class CalciteShellPanel {
     };
     this.separatorPointerMove = (event) => {
       event.preventDefault();
-      const { initialContentWidth, position, initialClientX } = this;
+      const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      this.setContentWidth(position === "end" ? initialContentWidth - offset : initialContentWidth + offset);
+      const dir = getElementStyleDir(el);
+      const adjustmentDirection = dir === "rtl" ? -1 : 1;
+      const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
+      const width = initialContentWidth + adjustedOffset;
+      this.setContentWidth(width);
     };
     this.separatorPointerUp = (event) => {
       event.preventDefault();

package/dist/collection/utils/dom.js

@@ -23,6 +23,12 @@ export function nodeListToArray(nodeList) {
 export function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+export function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 export function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;

package/dist/components/calcite-alert.js

@@ -63,13 +63,11 @@ let CalciteAlert$1 = class extends HTMLElement {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.autoDismissTimeout = null;
-    this.trackTimer = new Date();
+    this.autoDismissTimeoutId = null;
+    this.trackTimer = Date.now();
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
-      if (this.autoDismissTimeout) {
-        this.autoDismissTimeout = null;
-      }
+      this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
@@ -93,10 +91,10 @@ let CalciteAlert$1 = class extends HTMLElement {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  updateDuration(newDuration, prevDuration) {
-    if (this.autoDismiss && prevDuration !== newDuration && this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-      this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (new Date().valueOf() - this.trackTimer.valueOf()));
+  updateDuration() {
+    if (this.autoDismiss && this.autoDismissTimeoutId) {
+      window.clearTimeout(this.autoDismissTimeoutId);
+      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
     }
   }
   //--------------------------------------------------------------------------
@@ -116,9 +114,7 @@ let CalciteAlert$1 = class extends HTMLElement {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
   disconnectedCallback() {
-    if (this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-    }
+    window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
     const dir = getElementDir(this.el);
@@ -126,14 +122,13 @@ let CalciteAlert$1 = class extends HTMLElement {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progressBar = h("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
         container: true,
         queued,
         [CSS_UTILITY.rtl]: dir === "rtl"
-      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? progressBar : null)));
+      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -179,9 +174,9 @@ let CalciteAlert$1 = class extends HTMLElement {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      if (this.autoDismiss && !this.autoDismissTimeout) {
-        this.trackTimer = new Date();
-        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+        this.trackTimer = Date.now();
+        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
     else {

package/dist/components/calcite-shell-panel.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { HTMLElement, createEvent, h, forceUpdate, proxyCustomElement } from '@stencil/core/internal/client';
-import { b as getSlotted } from './dom.js';
+import { k as getElementStyleDir, b as getSlotted } from './dom.js';
 import { c as clamp } from './math.js';
 
 const CSS = {
@@ -72,7 +72,7 @@ let CalciteShellPanel$1 = class extends HTMLElement {
     };
     this.getKeyAdjustedWidth = (event) => {
       const { key } = event;
-      const { step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
+      const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
       const multipliedStep = step * stepMultiplier;
       const MOVEMENT_KEYS = [
         "ArrowUp",
@@ -87,15 +87,20 @@ let CalciteShellPanel$1 = class extends HTMLElement {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const increaseKeys = key === "ArrowUp" || (position === "end" ? key === "ArrowLeft" : key === "ArrowRight");
+      const dir = getElementStyleDir(el);
+      const directionKeys = ["ArrowLeft", "ArrowRight"];
+      const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
+      const increaseKeys = key === "ArrowUp" ||
+        (position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
       if (increaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth + stepValue;
+        return initialContentWidth + directionFactor * stepValue;
       }
-      const decreaseKeys = key === "ArrowDown" || (position === "end" ? key === "ArrowRight" : key === "ArrowLeft");
+      const decreaseKeys = key === "ArrowDown" ||
+        (position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
       if (decreaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth - stepValue;
+        return initialContentWidth - directionFactor * stepValue;
       }
       if (typeof contentWidthMin === "number" && key === "Home") {
         return contentWidthMin;
@@ -120,9 +125,13 @@ let CalciteShellPanel$1 = class extends HTMLElement {
     };
     this.separatorPointerMove = (event) => {
       event.preventDefault();
-      const { initialContentWidth, position, initialClientX } = this;
+      const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      this.setContentWidth(position === "end" ? initialContentWidth - offset : initialContentWidth + offset);
+      const dir = getElementStyleDir(el);
+      const adjustmentDirection = dir === "rtl" ? -1 : 1;
+      const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
+      const width = initialContentWidth + adjustedOffset;
+      this.setContentWidth(width);
     };
     this.separatorPointerUp = (event) => {
       event.preventDefault();

package/dist/components/calcite-slider.js

@@ -5,7 +5,7 @@
 import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';
 import { g as getKey } from './key.js';
-import { k as intersects } from './dom.js';
+import { l as intersects } from './dom.js';
 import { c as clamp } from './math.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';

package/dist/components/dom.js

@@ -36,6 +36,12 @@ function nodeListToArray(nodeList) {
 function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;
@@ -150,4 +156,4 @@ function intersects(rect1, rect2) {
     rect2.bottom < rect1.top);
 }
 
-export { CSS_UTILITY as C, TEXT as T, getElementDir as a, getSlotted as b, getThemeName as c, closestElementCrossShadowBoundary as d, filterDirectChildren as e, focusElement as f, getElementProp as g, ensureId as h, isCalciteFocusable as i, queryElementsRoots as j, intersects as k, nodeListToArray as n, queryElementRoots as q, setRequestedIcon as s };
+export { CSS_UTILITY as C, TEXT as T, getElementDir as a, getSlotted as b, getThemeName as c, closestElementCrossShadowBoundary as d, filterDirectChildren as e, focusElement as f, getElementProp as g, ensureId as h, isCalciteFocusable as i, queryElementsRoots as j, getElementStyleDir as k, intersects as l, nodeListToArray as n, queryElementRoots as q, setRequestedIcon as s };

package/dist/custom-elements/index.js

@@ -216,6 +216,12 @@ function nodeListToArray(nodeList) {
 function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;
@@ -2683,13 +2689,11 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.autoDismissTimeout = null;
-    this.trackTimer = new Date();
+    this.autoDismissTimeoutId = null;
+    this.trackTimer = Date.now();
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
-      if (this.autoDismissTimeout) {
-        this.autoDismissTimeout = null;
-      }
+      this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
@@ -2713,10 +2717,10 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  updateDuration(newDuration, prevDuration) {
-    if (this.autoDismiss && prevDuration !== newDuration && this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-      this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (new Date().valueOf() - this.trackTimer.valueOf()));
+  updateDuration() {
+    if (this.autoDismiss && this.autoDismissTimeoutId) {
+      window.clearTimeout(this.autoDismissTimeoutId);
+      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
     }
   }
   //--------------------------------------------------------------------------
@@ -2736,9 +2740,7 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
   disconnectedCallback() {
-    if (this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-    }
+    window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
     const dir = getElementDir(this.el);
@@ -2746,14 +2748,13 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progressBar = h("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
         container: true,
         queued,
         [CSS_UTILITY.rtl]: dir === "rtl"
-      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS$l.title }), h("slot", { name: SLOTS$l.message }), h("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? progressBar : null)));
+      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS$l.title }), h("slot", { name: SLOTS$l.message }), h("slot", { name: SLOTS$l.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -2799,9 +2800,9 @@ let CalciteAlert$1 = class extends HTMLElement$1 {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      if (this.autoDismiss && !this.autoDismissTimeout) {
-        this.trackTimer = new Date();
-        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+        this.trackTimer = Date.now();
+        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
     else {
@@ -17527,7 +17528,7 @@ let CalciteShellPanel$1 = class extends HTMLElement$1 {
     };
     this.getKeyAdjustedWidth = (event) => {
       const { key } = event;
-      const { step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
+      const { el, step, stepMultiplier, contentWidthMin, contentWidthMax, initialContentWidth, position } = this;
       const multipliedStep = step * stepMultiplier;
       const MOVEMENT_KEYS = [
         "ArrowUp",
@@ -17542,15 +17543,20 @@ let CalciteShellPanel$1 = class extends HTMLElement$1 {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const increaseKeys = key === "ArrowUp" || (position === "end" ? key === "ArrowLeft" : key === "ArrowRight");
+      const dir = getElementStyleDir(el);
+      const directionKeys = ["ArrowLeft", "ArrowRight"];
+      const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
+      const increaseKeys = key === "ArrowUp" ||
+        (position === "end" ? key === directionKeys[0] : key === directionKeys[1]);
       if (increaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth + stepValue;
+        return initialContentWidth + directionFactor * stepValue;
       }
-      const decreaseKeys = key === "ArrowDown" || (position === "end" ? key === "ArrowRight" : key === "ArrowLeft");
+      const decreaseKeys = key === "ArrowDown" ||
+        (position === "end" ? key === directionKeys[1] : key === directionKeys[0]);
       if (decreaseKeys) {
         const stepValue = event.shiftKey ? multipliedStep : step;
-        return initialContentWidth - stepValue;
+        return initialContentWidth - directionFactor * stepValue;
       }
       if (typeof contentWidthMin === "number" && key === "Home") {
         return contentWidthMin;
@@ -17575,9 +17581,13 @@ let CalciteShellPanel$1 = class extends HTMLElement$1 {
     };
     this.separatorPointerMove = (event) => {
       event.preventDefault();
-      const { initialContentWidth, position, initialClientX } = this;
+      const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      this.setContentWidth(position === "end" ? initialContentWidth - offset : initialContentWidth + offset);
+      const dir = getElementStyleDir(el);
+      const adjustmentDirection = dir === "rtl" ? -1 : 1;
+      const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
+      const width = initialContentWidth + adjustedOffset;
+      this.setContentWidth(width);
     };
     this.separatorPointerUp = (event) => {
       event.preventDefault();

package/dist/esm/{CalciteExpandToggle-677f2f8b.js → CalciteExpandToggle-a08896cc.js}

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { f as forceUpdate, h } from './index-9de00868.js';
-import { a as getElementDir } from './dom-f24e866c.js';
+import { a as getElementDir } from './dom-fce0996b.js';
 import { S as SLOTS } from './resources-584acd9b.js';
 import { S as SLOTS$1 } from './resources-7c6029b6.js';
 

package/dist/esm/calcite-accordion_2.entry.js

@@ -4,7 +4,7 @@
  */
 import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-9de00868.js';
 import { g as getKey } from './key-69001a68.js';
-import { d as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom-f24e866c.js';
+import { d as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom-fce0996b.js';
 import './guid-196bd5ea.js';
 
 const calciteAccordionCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;position:relative;max-width:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);border-bottom-width:0;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}:host([appearance=transparent]){border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";

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

@@ -3,8 +3,8 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9de00868.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, C as CalciteExpandToggle, g as getOverflowCount } from './CalciteExpandToggle-677f2f8b.js';
-import { f as focusElement, g as getSlotted } from './dom-f24e866c.js';
+import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, C as CalciteExpandToggle, g as getOverflowCount } from './CalciteExpandToggle-a08896cc.js';
+import { f as focusElement, g as getSlotted } from './dom-fce0996b.js';
 import { c as createObserver } from './observers-8f0bc419.js';
 import { d as debounce } from './debounce-79648d42.js';
 import './resources-584acd9b.js';

package/dist/esm/calcite-action-group.entry.js

@@ -4,7 +4,7 @@
  */
 import { r as registerInstance, h, F as Fragment, g as getElement } from './index-9de00868.js';
 import { S as SLOTS, I as ICONS, T as TEXT } from './resources-7c6029b6.js';
-import { g as getSlotted } from './dom-f24e866c.js';
+import { g as getSlotted } from './dom-fce0996b.js';
 import { S as SLOTS$1 } from './resources-584acd9b.js';
 import './guid-196bd5ea.js';
 

package/dist/esm/calcite-action-menu.entry.js

@@ -4,7 +4,7 @@
  */
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-9de00868.js';
 import { C as CSS, I as ICONS, S as SLOTS } from './resources-584acd9b.js';
-import { g as getSlotted, f as focusElement } from './dom-f24e866c.js';
+import { g as getSlotted, f as focusElement } from './dom-fce0996b.js';
 import { g as getRoundRobinIndex } from './array-91a648e2.js';
 import { g as guid } from './guid-196bd5ea.js';
 import { c as createObserver } from './observers-8f0bc419.js';

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

@@ -3,8 +3,8 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9de00868.js';
-import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-677f2f8b.js';
-import { f as focusElement, g as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom-f24e866c.js';
+import { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle-a08896cc.js';
+import { f as focusElement, g as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom-fce0996b.js';
 import './resources-584acd9b.js';
 import './resources-7c6029b6.js';
 import './guid-196bd5ea.js';

package/dist/esm/calcite-alert.entry.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9de00868.js';
-import { s as setRequestedIcon, a as getElementDir, C as CSS_UTILITY } from './dom-f24e866c.js';
+import { s as setRequestedIcon, a as getElementDir, C as CSS_UTILITY } from './dom-fce0996b.js';
 import { S as StatusIcons } from './interfaces-51dc4e1b.js';
 import './guid-196bd5ea.js';
 
@@ -60,13 +60,11 @@ let CalciteAlert = class {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.autoDismissTimeout = null;
-    this.trackTimer = new Date();
+    this.autoDismissTimeoutId = null;
+    this.trackTimer = Date.now();
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
-      if (this.autoDismissTimeout) {
-        this.autoDismissTimeout = null;
-      }
+      this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
@@ -90,10 +88,10 @@ let CalciteAlert = class {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  updateDuration(newDuration, prevDuration) {
-    if (this.autoDismiss && prevDuration !== newDuration && this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-      this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (new Date().valueOf() - this.trackTimer.valueOf()));
+  updateDuration() {
+    if (this.autoDismiss && this.autoDismissTimeoutId) {
+      window.clearTimeout(this.autoDismissTimeoutId);
+      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
     }
   }
   //--------------------------------------------------------------------------
@@ -113,9 +111,7 @@ let CalciteAlert = class {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
   disconnectedCallback() {
-    if (this.autoDismissTimeout) {
-      window.clearTimeout(this.autoDismissTimeout);
-    }
+    window.clearTimeout(this.autoDismissTimeoutId);
   }
   render() {
     const dir = getElementDir(this.el);
@@ -123,14 +119,13 @@ let CalciteAlert = class {
     const queueText = `+${this.queueLength > 2 ? this.queueLength - 1 : 1}`;
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progressBar = h("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
         container: true,
         queued,
         [CSS_UTILITY.rtl]: dir === "rtl"
-      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? progressBar : null)));
+      } }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -176,9 +171,9 @@ let CalciteAlert = class {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      if (this.autoDismiss && !this.autoDismissTimeout) {
-        this.trackTimer = new Date();
-        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+        this.trackTimer = Date.now();
+        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
     else {

package/dist/esm/calcite-avatar.entry.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, h, g as getElement } from './index-9de00868.js';
-import { a as getElementDir, b as getThemeName } from './dom-f24e866c.js';
+import { a as getElementDir, b as getThemeName } from './dom-fce0996b.js';
 import { h as hexToRGB, i as isValidHex } from './utils-6beb0662.js';
 import './guid-196bd5ea.js';
 

package/dist/esm/calcite-block_2.entry.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9de00868.js';
-import { g as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom-f24e866c.js';
+import { g as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom-fce0996b.js';
 import { C as CalciteHeading } from './CalciteHeading-1d6cd311.js';
 import './guid-196bd5ea.js';
 

package/dist/esm/calcite-button.entry.js

@@ -3,8 +3,8 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, h, g as getElement } from './index-9de00868.js';
-import { c as closestElementCrossShadowBoundary, a as getElementDir, C as CSS_UTILITY } from './dom-f24e866c.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-5559055d.js';
+import { c as closestElementCrossShadowBoundary, a as getElementDir, C as CSS_UTILITY } from './dom-fce0996b.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-326df1c3.js';
 import { c as createObserver } from './observers-8f0bc419.js';
 import './guid-196bd5ea.js';
 

package/dist/esm/calcite-card.entry.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-9de00868.js';
-import { a as getElementDir, C as CSS_UTILITY } from './dom-f24e866c.js';
+import { a as getElementDir, C as CSS_UTILITY } from './dom-fce0996b.js';
 import { g as getKey } from './key-69001a68.js';
 import './guid-196bd5ea.js';
 

package/dist/esm/calcite-checkbox.entry.js

@@ -4,9 +4,9 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9de00868.js';
 import { g as guid } from './guid-196bd5ea.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-160b0fb5.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-5559055d.js';
-import './dom-f24e866c.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-aed20747.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-326df1c3.js';
+import './dom-fce0996b.js';
 
 const calciteCheckboxCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{overflow:hidden;display:block;background-color:var(--calcite-ui-foreground-1);pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);stroke:currentColor;stroke-width:1;fill:currentColor;width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host .toggle:focus .check-svg,:host .toggle:active .check-svg{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([disabled]){cursor:default;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 

package/dist/esm/calcite-chip.entry.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-9de00868.js';
-import { g as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom-f24e866c.js';
+import { g as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom-fce0996b.js';
 import { g as guid } from './guid-196bd5ea.js';
 
 const CSS = {

package/dist/esm/calcite-color-picker_3.entry.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-9de00868.js';
-import { f as focusElement, a as getElementDir, C as CSS_UTILITY, b as getThemeName } from './dom-f24e866c.js';
+import { f as focusElement, a as getElementDir, C as CSS_UTILITY, b as getThemeName } from './dom-fce0996b.js';
 import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, h as hexToRGB, b as hexChar } from './utils-6beb0662.js';
 import { g as getKey } from './key-69001a68.js';
 import { c as clamp } from './math-456207f5.js';

package/dist/esm/calcite-combobox_3.entry.js

@@ -5,12 +5,12 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-9de00868.js';
 import { a as isSymbol, S as Symbol, d as debounce } from './debounce-79648d42.js';
 import { i as isArray, f as forIn } from './forIn-48d8fb84.js';
-import { n as nodeListToArray, a as getElementDir, d as getElementProp, C as CSS_UTILITY } from './dom-f24e866c.js';
+import { n as nodeListToArray, a as getElementDir, d as getElementProp, C as CSS_UTILITY } from './dom-fce0996b.js';
 import { g as getKey } from './key-69001a68.js';
-import { u as updatePopper, c as createPopper, C as CSS$2 } from './popper-f5caedc4.js';
+import { u as updatePopper, c as createPopper, C as CSS$2 } from './popper-d8ea1200.js';
 import { g as guid } from './guid-196bd5ea.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-5559055d.js';
-import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-160b0fb5.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-326df1c3.js';
+import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-aed20747.js';
 import { c as createObserver } from './observers-8f0bc419.js';
 
 /**