@esri/solutions-components 0.8.12 → 0.8.13

package/dist/components/date-picker-day.js

@@ -9,8 +9,10 @@ import { c as closestElementCrossShadowBoundary, t as toAriaBoolean } from './do
 import { I as InteractiveContainer, c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { n as numberStringFormatter } from './locale2.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 
-const datePickerDayCss = ":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{position:relative;display:flex;cursor:pointer;color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-v-wrapper{flex:1 1 auto}.day-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}:host([range]) .day-wrapper:before,:host([range]) .day-wrapper:after,:host([range-hover]) .day-wrapper:before,:host([range-hover]) .day-wrapper:after{pointer-events:none;position:absolute;inset-block:0;content:\"\";block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.day{z-index:var(--calcite-z-index);display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:var(--calcite-font-size--2);line-height:1rem;line-height:1;color:var(--calcite-color-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background:none;box-shadow:0 0 0 2px transparent;block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size:27px}:host([scale=s]) .day-v-wrapper{padding-block:0.125rem}:host([scale=s]) .day-wrapper{padding:0px}:host([scale=s]) .day{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-day-size:33px}:host([scale=m]) .day-v-wrapper{padding-block:0.25rem}:host([scale=m]) .day-wrapper{padding:0px}:host([scale=m]) .day{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-day-size:43px}:host([scale=l]) .day-v-wrapper{padding-block:0.25rem}:host([scale=l]) .day-wrapper{padding-inline:0.25rem}:host([scale=l]) .day{font-size:var(--calcite-font-size-0)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-disabled)}:host(:hover:not([disabled]):not([selected])) .day,:host([active]:not([range]):not([selected])) .day{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:focus),:host([active]){outline:2px solid transparent;outline-offset:2px}:host(:focus:not([disabled])) .day{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}:host(:focus:not([disabled])) .day,:host([start-of-range]:not(:focus)) .day,:host([end-of-range]:not(:focus)) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}:host([range-hover]:not([selected])) .day-wrapper:before,:host([highlighted]:not([selected])) .day-wrapper:before{inset-inline-end:50%;border-radius:0}:host([range-hover]:not([selected])) .day-wrapper:after,:host([highlighted]:not([selected])) .day-wrapper:after{inset-inline-start:50%;border-radius:0}:host([range-hover]:not([selected])) .day,:host([highlighted]:not([selected])) .day{color:var(--calcite-color-text-1)}:host([highlighted]) .day-wrapper:before,:host([highlighted]) .day-wrapper:after,:host([selected]:not(.hover--outside-range)) .day-wrapper:before,:host([selected]:not(.hover--outside-range)) .day-wrapper:after{background-color:var(--calcite-color-foreground-current)}:host([range-hover]:not([selected])) .day-wrapper:before,:host([range-hover]:not([selected])) .day-wrapper:after{background-color:var(--calcite-color-foreground-2)}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper:before,:host([highlighted][end-of-range]) .day-wrapper:before,:host([highlighted][range-edge=end]) .day-wrapper:before,:host([range-hover][range-edge=end]) .day-wrapper:before,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper:before{inset-inline-end:50%}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper:after,:host([highlighted][end-of-range]) .day-wrapper:after,:host([highlighted][range-edge=end]) .day-wrapper:after,:host([range-hover][range-edge=end]) .day-wrapper:after,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper:after{inset-inline-start:50%;border-start-end-radius:var(--calcite-internal-day-size);border-end-end-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper:before,:host([highlighted][range-edge=start]) .day-wrapper:before,:host([range-hover][range-edge=start]) .day-wrapper:before,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper:before,:host([start-of-range].hover--inside-range) .day-wrapper:before,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper:before{inset-inline-end:50%;border-start-start-radius:var(--calcite-internal-day-size);border-end-start-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper:after,:host([highlighted][range-edge=start]) .day-wrapper:after,:host([range-hover][range-edge=start]) .day-wrapper:after,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper:after,:host([start-of-range].hover--inside-range) .day-wrapper:after,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper:after{inset-inline-start:50%}:host([range-hover][start-of-range][range-edge=end]) .day-wrapper:after,:host([range-hover][start-of-range][range-edge=end]) .day-wrapper:before,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper:after,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper:before,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper:after,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper:before,:host([end-of-range]) .day-wrapper:after,:host([end-of-range]) .day-wrapper:before{content:unset}:host(:hover[range-hover]:not([selected]).focused--start) .day,:host(:hover[range-hover]:not([selected]).focused--end) .day,:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .day,:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){.day{border-radius:0px}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day-wrapper:before,:host([range][selected]) .day-wrapper:after,:host([highlighted]) .day-wrapper:before,:host([highlighted]) .day-wrapper:after,:host([range-hover]:not([selected])) .day-wrapper:before,:host([range-hover]:not([selected])) .day-wrapper:after{background-color:highlight}:host([range-hover]) .day-wrapper:before,:host([range-hover]) .day-wrapper:after,:host([range][selected][start-of-range]) .day-wrapper:before,:host([range][selected][start-of-range]) .day-wrapper:after,:host([range][selected][end-of-range]) .day-wrapper:before,:host([range][selected][end-of-range]) .day-wrapper:after{background-color:canvas}}:host([hidden]){display:none}[hidden]{display:none}";
+const datePickerDayCss = ":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{position:relative;display:flex;cursor:pointer;color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-v-wrapper{flex:1 1 auto}.day-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}:host([range]) .day-wrapper:before,:host([range]) .day-wrapper:after,:host([range-hover]) .day-wrapper:before,:host([range-hover]) .day-wrapper:after{pointer-events:none;position:absolute;inset-block:0;content:\"\";block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.day{z-index:var(--calcite-z-index);display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:var(--calcite-font-size--2);line-height:1rem;line-height:1;color:var(--calcite-color-text-3);outline-color:transparent;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;background:none;box-shadow:0 0 0 2px transparent;block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size:27px}:host([scale=s]) .day-v-wrapper{padding-block:0.125rem}:host([scale=s]) .day-wrapper{padding:0px}:host([scale=s]) .day{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-day-size:33px}:host([scale=m]) .day-v-wrapper{padding-block:0.25rem}:host([scale=m]) .day-wrapper{padding:0px}:host([scale=m]) .day{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-day-size:43px}:host([scale=l]) .day-v-wrapper{padding-block:0.25rem}:host([scale=l]) .day-wrapper{padding-inline:0.25rem}:host([scale=l]) .day{font-size:var(--calcite-font-size-0)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-disabled)}:host(:hover:not([disabled]):not([selected])) .day,:host([active]:not([range]):not([selected])) .day{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:focus),:host([active]){outline:2px solid transparent;outline-offset:2px}:host(:focus:not([disabled])) .day{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          )}:host([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}:host(:focus:not([disabled])) .day,:host([start-of-range]:not(:focus)) .day,:host([end-of-range]:not(:focus)) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}:host([range-hover]:not([selected])) .day-wrapper:before,:host([highlighted]:not([selected])) .day-wrapper:before{inset-inline-end:50%;border-radius:0}:host([range-hover]:not([selected])) .day-wrapper:after,:host([highlighted]:not([selected])) .day-wrapper:after{inset-inline-start:50%;border-radius:0}:host([range-hover]:not([selected])) .day,:host([highlighted]:not([selected])) .day{color:var(--calcite-color-text-1)}:host([highlighted]) .day-wrapper:before,:host([highlighted]) .day-wrapper:after,:host([selected]:not(.hover--outside-range)) .day-wrapper:before,:host([selected]:not(.hover--outside-range)) .day-wrapper:after{background-color:var(--calcite-color-foreground-current)}:host([range-hover]:not([selected])) .day-wrapper:before,:host([range-hover]:not([selected])) .day-wrapper:after{background-color:var(--calcite-color-foreground-2)}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper:before,:host([highlighted][end-of-range]) .day-wrapper:before,:host([highlighted][range-edge=end]) .day-wrapper:before,:host([range-hover][range-edge=end]) .day-wrapper:before,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper:before{inset-inline-end:50%}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper:after,:host([highlighted][end-of-range]) .day-wrapper:after,:host([highlighted][range-edge=end]) .day-wrapper:after,:host([range-hover][range-edge=end]) .day-wrapper:after,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper:after{inset-inline-start:50%;border-start-end-radius:var(--calcite-internal-day-size);border-end-end-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper:before,:host([highlighted][range-edge=start]) .day-wrapper:before,:host([range-hover][range-edge=start]) .day-wrapper:before,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper:before,:host([start-of-range].hover--inside-range) .day-wrapper:before,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper:before{inset-inline-end:50%;border-start-start-radius:var(--calcite-internal-day-size);border-end-start-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper:after,:host([highlighted][range-edge=start]) .day-wrapper:after,:host([range-hover][range-edge=start]) .day-wrapper:after,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper:after,:host([start-of-range].hover--inside-range) .day-wrapper:after,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper:after{inset-inline-start:50%}:host([range-hover][start-of-range][range-edge=end]) .day-wrapper:after,:host([range-hover][start-of-range][range-edge=end]) .day-wrapper:before,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper:after,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper:before,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper:after,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper:before,:host([end-of-range]) .day-wrapper:after,:host([end-of-range]) .day-wrapper:before{content:unset}:host(:hover[range-hover]:not([selected]).focused--start) .day,:host(:hover[range-hover]:not([selected]).focused--end) .day,:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .day,:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){.day{border-radius:0px}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day-wrapper:before,:host([range][selected]) .day-wrapper:after,:host([highlighted]) .day-wrapper:before,:host([highlighted]) .day-wrapper:after,:host([range-hover]:not([selected])) .day-wrapper:before,:host([range-hover]:not([selected])) .day-wrapper:after{background-color:highlight}:host([range-hover]) .day-wrapper:before,:host([range-hover]) .day-wrapper:after,:host([range][selected][start-of-range]) .day-wrapper:before,:host([range][selected][start-of-range]) .day-wrapper:after,:host([range][selected][end-of-range]) .day-wrapper:before,:host([range][selected][end-of-range]) .day-wrapper:after{background-color:canvas}}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteDatePickerDayStyle0 = datePickerDayCss;
 
 const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay extends HTMLElement {
     constructor() {
@@ -62,9 +64,23 @@ const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay exten
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    componentWillLoad() {
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
         this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
     }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        this.el.focus();
+    }
     render() {
         const dayId = dateToISO(this.value).replaceAll("-", "");
         if (this.parentDatePickerEl) {
@@ -73,7 +89,7 @@ const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay exten
         }
         const formattedDay = numberStringFormatter.localize(String(this.day));
         const dayLabel = this.dateTimeFormat.format(this.value);
-        return (h(Host, { "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-hidden": "true", class: { "day-v-wrapper": true } }, h("div", { class: "day-wrapper" }, h("span", { class: "day" }, h("span", { class: "text" }, formattedDay)))))));
+        return (h(Host, { key: '8de3dbeb652bfeb5ea9e9a490c3cec6a3663aeea', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: 'edb52f389027ea4f48067e2c0a4c6a28251bc4ab', disabled: this.disabled }, h("div", { key: 'fd75d2ebcd2e6ca21afdefb3f4e6f02089b43609', "aria-hidden": "true", class: { "day-v-wrapper": true } }, h("div", { key: 'd4ac04c544b7f26c1e1992f4b8046c608c6174cd', class: "day-wrapper" }, h("span", { key: '8453fd6dd54fa642f1779b99e2f1012a2277cfda', class: "day" }, h("span", { key: 'fb704e33e0d0af0ce76988983b530e640a361299', class: "text" }, formattedDay)))))));
     }
     connectedCallback() {
         connectInteractive(this);
@@ -85,7 +101,7 @@ const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay exten
         disconnectInteractive(this);
     }
     get el() { return this; }
-    static get style() { return datePickerDayCss; }
+    static get style() { return CalciteDatePickerDayStyle0; }
 }, [1, "calcite-date-picker-day", {
         "day": [2],
         "dateTimeFormat": [16],
@@ -100,7 +116,8 @@ const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay exten
         "rangeHover": [516, "range-hover"],
         "active": [516],
         "scale": [513],
-        "value": [16]
+        "value": [16],
+        "setFocus": [64]
     }, [[1, "pointerover", "pointerOverHandler"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/date-picker-month-header.js

@@ -15,7 +15,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/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     header: "header",
@@ -31,7 +31,8 @@ const ICON = {
     chevronRight: "chevron-right",
 };
 
-const datePickerMonthHeaderCss = ":host{display:block}.header{display:flex;justify-content:space-between;padding-block:0px;padding-inline:0.25rem}:host([scale=s]) .text{margin-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=s]) .chevron{block-size:2.25rem}:host([scale=m]) .text{margin-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=m]) .chevron{block-size:3rem}:host([scale=l]) .text{margin-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.5rem}:host([scale=l]) .chevron{block-size:3.5rem}.chevron{margin-inline:-0.25rem;box-sizing:content-box;display:flex;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;background-color:var(--calcite-color-foreground-1);padding-inline:0.25rem;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inline-size:14.2857142857%}.chevron:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.chevron:hover,.chevron:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.chevron:active{background-color:var(--calcite-color-foreground-3)}.chevron[aria-disabled=true]{pointer-events:none;opacity:0}.text{margin-block:auto;display:flex;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:center;text-align:center;line-height:1}.text--reverse{flex-direction:row-reverse}.month,.year,.suffix{margin-inline:0.25rem;margin-block:auto;display:inline-block;background-color:var(--calcite-color-foreground-1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-1);font-size:inherit}.year{position:relative;inline-size:2.5rem;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent}.year:hover{transition-duration:100ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}.year:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.year--suffix{text-align:start}.year-wrap{position:relative}.suffix{inset-block-start:0px;white-space:nowrap;text-align:start;inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}";
+const datePickerMonthHeaderCss = ":host{display:block}.header{display:flex;justify-content:space-between;padding-block:0px;padding-inline:0.25rem}:host([scale=s]) .text{margin-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=s]) .chevron{block-size:2.25rem}:host([scale=m]) .text{margin-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=m]) .chevron{block-size:3rem}:host([scale=l]) .text{margin-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.5rem}:host([scale=l]) .chevron{block-size:3.5rem}.chevron{margin-inline:-0.25rem;box-sizing:content-box;display:flex;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;background-color:var(--calcite-color-foreground-1);padding-inline:0.25rem;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;outline-color:transparent;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;inline-size:14.2857142857%}.chevron: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          )}.chevron:hover,.chevron:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}.chevron:active{background-color:var(--calcite-color-foreground-3)}.chevron[aria-disabled=true]{pointer-events:none;opacity:0}.text{margin-block:auto;display:flex;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:center;text-align:center;line-height:1}.text--reverse{flex-direction:row-reverse}.month,.year,.suffix{margin-inline:0.25rem;margin-block:auto;display:inline-block;background-color:var(--calcite-color-foreground-1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-1);font-size:inherit}.year{position:relative;inline-size:2.5rem;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent}.year:hover{transition-duration:100ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}.year: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          )}.year--suffix{text-align:start}.year-wrap{position:relative}.suffix{inset-block-start:0px;white-space:nowrap;text-align:start;inset-inline-start:0}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteDatePickerMonthHeaderStyle0 = datePickerMonthHeaderCss;
 
 const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerMonthHeader extends HTMLElement {
     constructor() {
@@ -119,7 +120,7 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerM
         this.setNextPrevMonthDates();
     }
     render() {
-        return h("div", { class: CSS.header }, this.renderContent());
+        return h("div", { key: '9e392da76cbe365de812b6219b3ee7ada90a09e6', class: CSS.header }, this.renderContent());
     }
     renderContent() {
         var _a;
@@ -197,7 +198,7 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerM
         "max": ["setNextPrevMonthDates"],
         "activeDate": ["setNextPrevMonthDates"]
     }; }
-    static get style() { return datePickerMonthHeaderCss; }
+    static get style() { return CalciteDatePickerMonthHeaderStyle0; }
 }, [1, "calcite-date-picker-month-header", {
         "selectedDate": [16],
         "activeDate": [16],

package/dist/components/date-picker-month.js

@@ -7,7 +7,8 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as sameDate, b as dateFromRange, i as inRange } from './date.js';
 import { d as defineCustomElement$1 } from './date-picker-day.js';
 
-const datePickerMonthCss = ":host([hidden]){display:none}[hidden]{display:none}.calendar{margin-block-end:0.25rem}.week-headers{display:flex;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;padding-inline:0.25rem}.week-header{text-align:center;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-3);inline-size:14.2857142857%}.day{display:flex;min-inline-size:0px;justify-content:center;inline-size:14.2857142857%}.day calcite-date-picker-day{inline-size:100%}:host([scale=s]) .week-header{padding-inline:0px;padding-block:0.5rem 0.75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .week-header{padding-inline:0px;padding-block:0.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]) .week-header{padding-inline:0px;padding-block:1rem 1.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}.week-days{display:flex;flex-direction:row;padding-block:0px;padding-inline:6px}.week-days:focus{outline:2px solid transparent;outline-offset:2px}";
+const datePickerMonthCss = ":host([hidden]){display:none}[hidden]{display:none}.calendar{margin-block-end:0.25rem}.week-headers{display:flex;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px;padding-inline:0.25rem}.week-header{text-align:center;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-3);inline-size:14.2857142857%}.day{display:flex;min-inline-size:0px;justify-content:center;inline-size:100%}.day calcite-date-picker-day{inline-size:100%}:host([scale=s]) .week-header{padding-inline:0px;padding-block:0.5rem 0.75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .week-header{padding-inline:0px;padding-block:0.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]) .week-header{padding-inline:0px;padding-block:1rem 1.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}.week-days{display:grid;grid-template-columns:repeat(7, 1fr);grid-auto-rows:1fr;padding-block:0;padding-inline:6px}.week-days:focus{outline:2px solid transparent;outline-offset:2px}";
+const CalciteDatePickerMonthStyle0 = datePickerMonthCss;
 
 const DAYS_PER_WEEK = 7;
 const DAYS_MAXIMUM_INDEX = 6;
@@ -155,11 +156,7 @@ const DatePickerMonth = /*@__PURE__*/ proxyCustomElement(class DatePickerMonth e
                 };
             }),
         ];
-        const weeks = [];
-        for (let i = 0; i < days.length; i += 7) {
-            weeks.push(days.slice(i, i + 7));
-        }
-        return (h(Host, { onFocusOut: this.disableActiveFocus, onKeyDown: this.keyDownHandler }, h("div", { class: "calendar", role: "grid" }, h("div", { class: "week-headers", role: "row" }, adjustedWeekDays.map((weekday) => (h("span", { class: "week-header", role: "columnheader" }, weekday)))), weeks.map((days) => (h("div", { class: "week-days", role: "row" }, days.map((day) => this.renderDateDay(day))))))));
+        return (h(Host, { onFocusout: this.disableActiveFocus, onKeyDown: this.keyDownHandler }, h("div", { class: "calendar", role: "grid" }, h("div", { class: "week-headers", role: "row" }, adjustedWeekDays.map((weekday) => (h("span", { class: "week-header", role: "columnheader" }, weekday)))), h("div", { class: "week-days", role: "row" }, days.map((day, index) => this.renderDateDay(day, index))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -298,13 +295,14 @@ const DatePickerMonth = /*@__PURE__*/ proxyCustomElement(class DatePickerMonth e
      * @param active.day
      * @param active.dayInWeek
      * @param active.ref
+     * @param key
      */
-    renderDateDay({ active, currentMonth, date, day, dayInWeek, ref }) {
+    renderDateDay({ active, currentMonth, date, day, dayInWeek, ref }, key) {
         var _a;
         const isFocusedOnStart = this.isFocusedOnStart();
         const isHoverInRange = this.isHoverInRange() ||
             (!this.endDate && this.hoverRange && sameDate((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.end, this.startDate));
-        return (h("div", { class: "day", key: date.toDateString(), role: "gridcell" }, h("calcite-date-picker-day", { active: active, class: {
+        return (h("div", { class: "day", key: key, role: "gridcell" }, h("calcite-date-picker-day", { active: active, class: {
                 "hover--inside-range": this.startDate && isHoverInRange,
                 "hover--outside-range": this.startDate && !isHoverInRange,
                 "focused--start": isFocusedOnStart,
@@ -314,7 +312,7 @@ const DatePickerMonth = /*@__PURE__*/ proxyCustomElement(class DatePickerMonth e
             ref: (el) => {
                 // when moving via keyboard, focus must be updated on active date
                 if (ref && active && this.activeFocus) {
-                    el === null || el === void 0 ? void 0 : el.focus();
+                    el === null || el === void 0 ? void 0 : el.setFocus();
                 }
             } })));
     }
@@ -349,7 +347,7 @@ const DatePickerMonth = /*@__PURE__*/ proxyCustomElement(class DatePickerMonth e
         return cond1 || cond2;
     }
     get el() { return this; }
-    static get style() { return datePickerMonthCss; }
+    static get style() { return CalciteDatePickerMonthStyle0; }
 }, [1, "calcite-date-picker-month", {
         "dateTimeFormat": [16],
         "selectedDate": [16],

package/dist/components/date-picker.js

@@ -16,7 +16,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/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -24,7 +24,7 @@ const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 /**
  * CLDR cache.
@@ -73,6 +73,7 @@ function getValueAsDateRange(value) {
 }
 
 const datePickerCss = ":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{display:inline-block;inline-size:auto;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-1);vertical-align:top}:host([scale=s]){inline-size:234px;min-inline-size:216px;max-inline-size:380px}:host([scale=m]){inline-size:304px;min-inline-size:272px;max-inline-size:480px}:host([scale=l]){inline-size:370px;min-inline-size:320px;max-inline-size:600px}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteDatePickerStyle0 = datePickerCss;
 
 const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTMLElement {
     constructor() {
@@ -135,7 +136,23 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 start,
                 end,
             };
-            if (!this.proximitySelectionDisabled) {
+            if (this.proximitySelectionDisabled) {
+                if ((end && start) || (!end && date >= start)) {
+                    this.hoverRange.focused = "end";
+                    this.hoverRange.end = date;
+                }
+                else if (!end && date < start) {
+                    this.hoverRange = {
+                        focused: "start",
+                        start: date,
+                        end: start,
+                    };
+                }
+                else {
+                    this.hoverRange = undefined;
+                }
+            }
+            else {
                 if (start && end) {
                     const startDiff = getDaysDiff(date, start);
                     const endDiff = getDaysDiff(date, end);
@@ -172,24 +189,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                     }
                 }
             }
-            else {
-                if (!end) {
-                    if (date < start) {
-                        this.hoverRange = {
-                            focused: "start",
-                            start: date,
-                            end: start,
-                        };
-                    }
-                    else {
-                        this.hoverRange.end = date;
-                        this.hoverRange.focused = "end";
-                    }
-                }
-                else {
-                    this.hoverRange = undefined;
-                }
-            }
             event.stopPropagation();
         };
         this.monthMouseOutChange = () => {
@@ -246,7 +245,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 this.setEndDate(date);
             }
             else {
-                if (!this.proximitySelectionDisabled) {
+                if (this.proximitySelectionDisabled) {
+                    this.setStartDate(date);
+                    this.setEndDate(null);
+                }
+                else {
                     if (this.activeRange) {
                         if (this.activeRange == "end") {
                             this.setEndDate(date);
@@ -272,9 +275,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                         }
                     }
                 }
-                else {
-                    this.setStartDate(date);
-                }
             }
             this.calciteDatePickerChange.emit();
         };
@@ -413,7 +413,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 ? endDate || this.maxAsDate
                 : this.maxAsDate
             : this.maxAsDate;
-        return (h(Host, { onBlur: this.resetActiveDates, onKeyDown: this.keyDownHandler }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
+        return (h(Host, { key: 'af94b669a3045e53c100cb5850381e9f77423133', onBlur: this.resetActiveDates, onKeyDown: this.keyDownHandler }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
     }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);
@@ -501,7 +501,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "effectiveLocale": ["effectiveLocaleChange", "loadLocaleData"],
         "value": ["valueHandler"]
     }; }
-    static get style() { return datePickerCss; }
+    static get style() { return CalciteDatePickerStyle0; }
 }, [17, "calcite-date-picker", {
         "activeDate": [1040],
         "activeRange": [513, "active-range"],

package/dist/components/date.js

@@ -8,7 +8,7 @@ import { n as numberStringFormatter } from './locale2.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 /**
  * Check if date is within a min and max
@@ -206,7 +206,7 @@ function parseDateString(string, localeData) {
     const { day, month, year } = datePartsFromLocalizedString(string, localeData);
     return {
         day: parseInt(day),
-        month: parseInt(month) - 1,
+        month: parseInt(month) - 1, // this subtracts by 1 because the month in the Date constructor is zero-based https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth
         year: parseInt(year),
     };
 }

package/dist/components/de-at.js

@@ -67,4 +67,4 @@ var locale = {
 };
 dayjs.locale(locale, null, true);
 
-export default locale;
+export { locale as default };

package/dist/components/de-ch.js

@@ -67,4 +67,4 @@ var locale = {
 };
 dayjs.locale(locale, null, true);
 
-export default locale;
+export { locale as default };

package/dist/components/de.js

@@ -68,4 +68,4 @@ var locale = {
 };
 dayjs.locale(locale, null, true);
 
-export default locale;
+export { locale as default };

package/dist/components/debounce.js

@@ -6,14 +6,20 @@
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
 
+const freeGlobal$1 = freeGlobal;
+
 /** Detect free variable `self`. */
 var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
 /** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
+var root = freeGlobal$1 || freeSelf || Function('return this')();
+
+const root$1 = root;
 
 /** Built-in value references. */
-var Symbol = root.Symbol;
+var Symbol = root$1.Symbol;
+
+const Symbol$1 = Symbol;
 
 /** Used for built-in method references. */
 var objectProto$1 = Object.prototype;
@@ -29,7 +35,7 @@ var hasOwnProperty = objectProto$1.hasOwnProperty;
 var nativeObjectToString$1 = objectProto$1.toString;
 
 /** Built-in value references. */
-var symToStringTag$1 = Symbol ? Symbol.toStringTag : undefined;
+var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
 /**
  * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
@@ -84,7 +90,7 @@ var nullTag = '[object Null]',
     undefinedTag = '[object Undefined]';
 
 /** Built-in value references. */
-var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
 /**
  * The base implementation of `getTag` without fallbacks for buggy environments.
@@ -295,9 +301,11 @@ function toNumber(value) {
  * // => Logs the number of milliseconds it took for the deferred invocation.
  */
 var now = function() {
-  return root.Date.now();
+  return root$1.Date.now();
 };
 
+const now$1 = now;
+
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
 
@@ -423,7 +431,7 @@ function debounce(func, wait, options) {
   }
 
   function timerExpired() {
-    var time = now();
+    var time = now$1();
     if (shouldInvoke(time)) {
       return trailingEdge(time);
     }
@@ -452,11 +460,11 @@ function debounce(func, wait, options) {
   }
 
   function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
+    return timerId === undefined ? result : trailingEdge(now$1());
   }
 
   function debounced() {
-    var time = now(),
+    var time = now$1(),
         isInvoking = shouldInvoke(time);
 
     lastArgs = arguments;
@@ -484,4 +492,4 @@ function debounce(func, wait, options) {
   return debounced;
 }
 
-export { Symbol as S, isSymbol as a, baseGetTag as b, isObjectLike as c, debounce as d, freeGlobal as f, isObject as i, root as r };
+export { Symbol$1 as S, isSymbol as a, baseGetTag as b, isObjectLike as c, debounce as d, freeGlobal$1 as f, isObject as i, root$1 as r };

package/dist/components/deduct-calculator2.js

@@ -852,6 +852,7 @@ function _calcCDV(total, q, showDebugging) {
 }
 
 const deductCalculatorCss = ":host{display:block;--calcite-label-margin-bottom:0}.label-display{display:block;padding-bottom:1rem}";
+const DeductCalculatorStyle0 = deductCalculatorCss;
 
 const DeductCalculator = /*@__PURE__*/ proxyCustomElement(class DeductCalculator extends HTMLElement {
     constructor() {
@@ -873,7 +874,7 @@ const DeductCalculator = /*@__PURE__*/ proxyCustomElement(class DeductCalculator
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "label-display" }, h("calcite-label", { class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { class: "label-display" }, "Severity", this._getSeverityInput())), h("div", null, this._getCalculateInput())));
+        return (h(Host, { key: '4fde9075cfece4eb107c303c5425501663902e66' }, h("div", { key: '5c2d7e3116f87eb19d55cb4c207bfb658bcc9376', class: "label-display" }, h("calcite-label", { key: '924692372a5294dc8ab4cd8f5d83e879b48d33e7', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '6afaa68fef4a16718159a297ca421a11b0bd5f6b', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'e147fa289c58bad96e7affde75a5cc6a62739d70', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'd3562ae77e679866031fd1fb0f13c954591d5081' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //
@@ -942,7 +943,7 @@ const DeductCalculator = /*@__PURE__*/ proxyCustomElement(class DeductCalculator
         }
     }
     get el() { return this; }
-    static get style() { return deductCalculatorCss; }
+    static get style() { return DeductCalculatorStyle0; }
 }, [1, "deduct-calculator"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/delete-button2.js

@@ -13,6 +13,7 @@ import { d as defineCustomElement$2 } from './modal.js';
 import { d as defineCustomElement$1 } from './scrim.js';
 
 const deleteButtonCss = ":host{display:block}";
+const DeleteButtonStyle0 = deleteButtonCss;
 
 const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends HTMLElement {
     constructor() {
@@ -70,7 +71,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
      * Renders the component.
      */
     render() {
-        return (h(Host, null, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '885179064344fde1e5387efcf7fe2807bd2786c9' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -145,7 +146,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
         "ids": ["idsWatchHandler"],
         "layer": ["layerWatchHandler"]
     }; }
-    static get style() { return deleteButtonCss; }
+    static get style() { return DeleteButtonStyle0; }
 }, [1, "delete-button", {
         "buttonType": [1, "button-type"],
         "disabled": [4],

package/dist/components/dom.js

@@ -578,7 +578,7 @@ var isFocusable = function isFocusable(node, options) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 /**
  * The default `focus-trap/tabbable` options.
@@ -1004,6 +1004,18 @@ function slotChangeGetAssignedElements(event) {
 function isPrimaryPointerButton(event) {
     return !!(event.isPrimary && event.button === 0);
 }
+/**
+ * This helper returns true if the mouse event was triggered by a keyboard click.
+ *
+ * @param {MouseEvent} event The mouse event.
+ * @returns {boolean} The value.
+ */
+function isKeyboardTriggeredClick(event) {
+    // we assume event.detail = 0 is a keyboard click
+    // see https://www.w3.org/TR/uievents/#event-type-click
+    // see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#usage_notes
+    return event.detail === 0;
+}
 /**
  * This helper sets focus on and returns a destination element from within a group of provided elements.
  *
@@ -1052,5 +1064,51 @@ function isBefore(a, b) {
     const children = Array.from(a.parentNode.children);
     return children.indexOf(a) < children.indexOf(b);
 }
+/**
+ * This util helps determine when an animation has completed.
+ *
+ * @param targetEl The element to watch for the animation to complete.
+ * @param animationName The name of the animation to watch for completion.
+ */
+async function whenAnimationDone(targetEl, animationName) {
+    const { animationDuration: allDurations, animationName: allNames } = getComputedStyle(targetEl);
+    const allDurationsArray = allDurations.split(",");
+    const allPropsArray = allNames.split(",");
+    const propIndex = allPropsArray.indexOf(animationName);
+    const duration = allDurationsArray[propIndex] ??
+        /* Safari will have a single duration value for the shorthand prop when multiple, separate names/props are defined,
+                so we fall back to it if there's no matching prop duration */
+        allDurationsArray[0];
+    if (duration === "0s") {
+        return Promise.resolve();
+    }
+    const startEvent = "animationstart";
+    const endEvent = "animationend";
+    const cancelEvent = "animationcancel";
+    return new Promise((resolve) => {
+        const fallbackTimeoutId = setTimeout(() => {
+            targetEl.removeEventListener(startEvent, onStart);
+            targetEl.removeEventListener(endEvent, onEndOrCancel);
+            targetEl.removeEventListener(cancelEvent, onEndOrCancel);
+            resolve();
+        }, parseFloat(duration) * 1000);
+        targetEl.addEventListener(startEvent, onStart);
+        targetEl.addEventListener(endEvent, onEndOrCancel);
+        targetEl.addEventListener(cancelEvent, onEndOrCancel);
+        function onStart(event) {
+            if (event.animationName === animationName && event.target === targetEl) {
+                clearTimeout(fallbackTimeoutId);
+                targetEl.removeEventListener(startEvent, onStart);
+            }
+        }
+        function onEndOrCancel(event) {
+            if (event.animationName === animationName && event.target === targetEl) {
+                targetEl.removeEventListener(endEvent, onEndOrCancel);
+                targetEl.removeEventListener(cancelEvent, onEndOrCancel);
+                resolve();
+            }
+        }
+    });
+}
 
-export { getTextWidth as A, getFirstTabbable as B, ensureId as C, getShadowRootNode as D, getSlotted as a, intersects as b, closestElementCrossShadowBoundary as c, isBefore as d, containsCrossShadowBoundary as e, focusElement as f, getElementDir as g, slotChangeGetAssignedElements as h, isPrimaryPointerButton as i, slotChangeHasAssignedElement as j, focusFirstTabbable as k, tabbable as l, focusable as m, isTabbable as n, getTabIndex as o, isFocusable as p, queryElementRoots as q, tabbableOptions as r, setRequestedIcon as s, toAriaBoolean as t, getModeName as u, slotChangeHasContent as v, focusElementInGroup as w, nodeListToArray as x, filterDirectChildren as y, getElementWidth as z };
+export { filterDirectChildren as A, getElementWidth as B, getTextWidth as C, getFirstTabbable as D, ensureId as E, getShadowRootNode as F, getSlotted as a, intersects as b, closestElementCrossShadowBoundary as c, isBefore as d, containsCrossShadowBoundary as e, focusElement as f, getElementDir as g, slotChangeGetAssignedElements as h, isPrimaryPointerButton as i, slotChangeHasAssignedElement as j, focusFirstTabbable as k, isKeyboardTriggeredClick as l, isFocusable as m, tabbable as n, focusable as o, isTabbable as p, queryElementRoots as q, getTabIndex as r, setRequestedIcon as s, toAriaBoolean as t, tabbableOptions as u, getModeName as v, slotChangeHasContent as w, focusElementInGroup as x, whenAnimationDone as y, nodeListToArray as z };