@esri/solutions-components 0.8.12 → 0.8.13

package/dist/esm/calcite-date-picker-day_3.entry.js

@@ -3,20 +3,22 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-164d485a.js';
-import { a as dateToISO, h as sameDate, b as dateFromRange, i as inRange, j as getOrder, n as nextMonth, p as prevMonth, k as formatCalendarYear, l as parseCalendarYear } from './date-0c026a8b.js';
-import { c as closestElementCrossShadowBoundary, t as toAriaBoolean } from './dom-38c6f027.js';
-import { I as InteractiveContainer, c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-39bf5602.js';
-import { i as isActivationKey } from './key-c83d835f.js';
-import { n as numberStringFormatter } from './locale-904407bf.js';
-import { H as Heading } from './Heading-94780f62.js';
-import { g as getIconScale } from './component-edd2c3cd.js';
-import './guid-b75a5f7b.js';
-import './resources-8834f920.js';
-import './browser-d60104bd.js';
-import './observers-d04d1da9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-ba5da2b0.js';
+import { a as dateToISO, h as sameDate, b as dateFromRange, i as inRange, j as getOrder, n as nextMonth, p as prevMonth, k as formatCalendarYear, l as parseCalendarYear } from './date-562b6fba.js';
+import { c as closestElementCrossShadowBoundary, t as toAriaBoolean } from './dom-d675fe65.js';
+import { I as InteractiveContainer, c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-52276a00.js';
+import { i as isActivationKey } from './key-092b6260.js';
+import { n as numberStringFormatter } from './locale-353c1c36.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-cca582a3.js';
+import { H as Heading } from './Heading-03b41bf8.js';
+import { g as getIconScale } from './component-960ddabf.js';
+import './guid-f05d01d5.js';
+import './resources-1febf4c6.js';
+import './browser-9897260d.js';
+import './observers-19e5cb73.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 = class {
     constructor(hostRef) {
@@ -66,9 +68,23 @@ const DatePickerDay = class {
     //  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) {
@@ -77,7 +93,7 @@ const DatePickerDay = class {
         }
         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);
@@ -90,9 +106,10 @@ const DatePickerDay = class {
     }
     get el() { return getElement(this); }
 };
-DatePickerDay.style = datePickerDayCss;
+DatePickerDay.style = CalciteDatePickerDayStyle0;
 
-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;
@@ -238,11 +255,7 @@ const DatePickerMonth = class {
                 };
             }),
         ];
-        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))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -381,13 +394,14 @@ const DatePickerMonth = class {
      * @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,
@@ -397,7 +411,7 @@ const DatePickerMonth = class {
             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();
                 }
             } })));
     }
@@ -433,12 +447,12 @@ const DatePickerMonth = class {
     }
     get el() { return getElement(this); }
 };
-DatePickerMonth.style = datePickerMonthCss;
+DatePickerMonth.style = CalciteDatePickerMonthStyle0;
 
 /*!
  * 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",
@@ -454,7 +468,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 = class {
     constructor(hostRef) {
@@ -540,7 +555,7 @@ const DatePickerMonthHeader = class {
         this.setNextPrevMonthDates();
     }
     render() {
-        return h("div", { class: CSS.header }, this.renderContent());
+        return h("div", { key: '9e392da76cbe365de812b6219b3ee7ada90a09e6', class: CSS.header }, this.renderContent());
     }
     renderContent() {
         var _a;
@@ -619,6 +634,6 @@ const DatePickerMonthHeader = class {
         "activeDate": ["setNextPrevMonthDates"]
     }; }
 };
-DatePickerMonthHeader.style = datePickerMonthHeaderCss;
+DatePickerMonthHeader.style = CalciteDatePickerMonthHeaderStyle0;
 
 export { DatePickerDay as calcite_date_picker_day, DatePickerMonth as calcite_date_picker_month, DatePickerMonthHeader as calcite_date_picker_month_header };

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

@@ -3,37 +3,37 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
-import { t as toAriaBoolean, i as isPrimaryPointerButton, d as focusElementInGroup, e as focusElement } from './dom-38c6f027.js';
-import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-41dfe3f1.js';
-import { g as guid } from './guid-b75a5f7b.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-39bf5602.js';
-import { i as isActivationKey } from './key-c83d835f.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
-import { c as createObserver } from './observers-d04d1da9.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-9f90f493.js';
-import { g as getIconScale } from './component-edd2c3cd.js';
-import { g as getLocaleComponentStrings } from './locale-bcbea4ef.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ba5da2b0.js';
+import { t as toAriaBoolean, d as focusElementInGroup, e as focusElement } from './dom-d675fe65.js';
+import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-9ee6fe17.js';
+import { g as guid } from './guid-f05d01d5.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-52276a00.js';
+import { i as isActivationKey } from './key-092b6260.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-cca582a3.js';
+import { c as createObserver } from './observers-19e5cb73.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-04234cea.js';
+import { g as getIconScale } from './component-960ddabf.js';
+import { g as getLocaleComponentStrings } from './locale-a490c4f6.js';
 import { c as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-c83c03a4.js';
-import { s as state } from './publicNotificationStore-223faed2.js';
-import './resources-8834f920.js';
-import './debounce-229b1a22.js';
-import './browser-d60104bd.js';
-import './esri-loader-1b324844.js';
-import './_commonjsHelpers-0f74c230.js';
+import { s as state } from './publicNotificationStore-74c7e9f4.js';
+import './resources-1febf4c6.js';
+import './debounce-6e9ade8c.js';
+import './browser-9897260d.js';
+import './esri-loader-2bf735ed.js';
 import './interfaces-586e863c.js';
-import './index-477ea182.js';
+import './index-c06194fa.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 SLOTS = {
     dropdownTrigger: "trigger",
 };
 
 const dropdownCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host .calcite-dropdown-wrapper{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .calcite-dropdown-wrapper{visibility:visible}:host .calcite-dropdown-content{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}.calcite-trigger-container{position:relative;display:flex;block-size:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:1px solid canvasText}}:host([width-scale=s]){--calcite-dropdown-width:12rem}:host([width-scale=m]){--calcite-dropdown-width:14rem}:host([width-scale=l]){--calcite-dropdown-width:16rem}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteDropdownStyle0 = dropdownCss;
 
 const Dropdown = class {
     constructor(hostRef) {
@@ -233,7 +233,6 @@ const Dropdown = class {
         var _a;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
         this.setFilteredPlacements();
-        this.reposition(true);
         if (this.open) {
             this.openHandler();
             onToggleOpenCloseComponent(this);
@@ -247,7 +246,7 @@ const Dropdown = class {
     }
     componentDidLoad() {
         setComponentLoaded(this);
-        this.reposition(true);
+        connectFloatingUI(this, this.referenceEl, this.floatingEl);
     }
     componentDidRender() {
         updateHostInteraction(this);
@@ -261,17 +260,17 @@ const Dropdown = class {
     }
     render() {
         const { open, guid } = this;
-        return (h(Host, null, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
+        return (h(Host, { key: 'aad82a6a5bce5a29f6c309bb9ff20911b3ec9482' }, h(InteractiveContainer, { key: 'b559473528a0142c058c6e6de499e981748e369c', disabled: this.disabled }, h("div", { key: '089a4a3e39800339c21e50f167c1154dd90f0194', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
+            ref: this.setReferenceEl }, h("slot", { key: '1a6ded94e643359a5d9a6168d3abe0db4d96d57e', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { key: '3c8a8fcda5b885baadd1aaaf2b8181b9dfd24ddf', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setFloatingEl }, h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
+            ref: this.setFloatingEl }, h("div", { key: '8c04cadcb38268f20386f9e80f519b99f702054e', "aria-labelledby": `${guid}-menubutton`, class: {
                 ["calcite-dropdown-content"]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
             }, id: `${guid}-menu`, role: "menu",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setScrollerAndTransitionEl }, h("slot", { onSlotchange: this.updateGroups }))))));
+            ref: this.setScrollerAndTransitionEl }, h("slot", { key: '92b1d20e253dc2253aa2f998076bf640e696ff91', onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -295,10 +294,7 @@ const Dropdown = class {
         }, delayed);
     }
     closeCalciteDropdownOnClick(event) {
-        if (this.disabled ||
-            !isPrimaryPointerButton(event) ||
-            !this.open ||
-            event.composedPath().includes(this.el)) {
+        if (this.disabled || !this.open || event.composedPath().includes(this.el)) {
             return;
         }
         this.closeCalciteDropdown(false);
@@ -429,12 +425,12 @@ const Dropdown = class {
         "scale": ["handlePropsChange"]
     }; }
 };
-Dropdown.style = dropdownCss;
+Dropdown.style = CalciteDropdownStyle0;
 
 /*!
  * 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 = {
     container: "container",
@@ -450,6 +446,7 @@ const CSS = {
 };
 
 const dropdownGroupCss = ":host{position:relative;display:block}.container{text-align:start}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem}.container--s .dropdown-title{padding:0.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem}.container--m .dropdown-title{padding:0.75rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem}.container--l .dropdown-title{padding:1rem}.dropdown-title{margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.dropdown-separator{display:block;block-size:1px;background-color:var(--calcite-color-border-3)}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteDropdownGroupStyle0 = dropdownGroupCss;
 
 const DropdownGroup = class {
     constructor(hostRef) {
@@ -486,10 +483,10 @@ const DropdownGroup = class {
     render() {
         const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
         const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
-        return (h(Host, { "aria-label": this.groupTitle, role: "group" }, h("div", { class: {
+        return (h(Host, { key: 'c1b662afcbb612d775cea66edb949d71f5f63167', "aria-label": this.groupTitle, role: "group" }, h("div", { key: 'cdfdb0919b1b6006f69f7fbcda0c16c2beefec5e', class: {
                 [CSS.container]: true,
                 [`${CSS.container}--${this.scale}`]: true,
-            } }, dropdownSeparator, groupTitle, h("slot", null))));
+            } }, dropdownSeparator, groupTitle, h("slot", { key: '166c8236f3315d2f038f61b0619270d2bd9b344a' }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -518,9 +515,10 @@ const DropdownGroup = class {
         "selectionMode": ["handlePropsChange"]
     }; }
 };
-DropdownGroup.style = dropdownGroupCss;
+DropdownGroup.style = CalciteDropdownGroupStyle0;
 
-const dropdownItemCss = ":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}.container--s{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}.container--s.container--none-selection{padding-inline-start:0.25rem}.container--s.container--none-selection .dropdown-link{padding-inline-start:0px}.container--m.container--none-selection{padding-inline-start:0.5rem}.container--m.container--none-selection .dropdown-link{padding-inline-start:0px}.container--l.container--none-selection{padding-inline-start:0.75rem}.container--l.container--none-selection .dropdown-link{padding-inline-start:0px}:host{position:relative;display:flex;flex-grow:1;align-items:center}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);text-align:start}.dropdown-item-content{flex:1 1 auto;padding-block:0.125rem;padding-inline-end:auto;padding-inline-start:0.25rem}:host,.container--link a{outline-color:transparent}:host(:focus){outline:2px solid transparent;outline-offset:2px;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          )}.container--link{padding:0px}.container--link a{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.container--s .dropdown-link{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l .dropdown-link{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:hover:not([disabled])) .container--link .dropdown-link,:host(:active:not([disabled])) .container--link .dropdown-link{color:var(--calcite-color-text-1)}:host(:active:not([disabled])) .container{background-color:var(--calcite-color-foreground-3)}:host(:focus) .container{color:var(--calcite-color-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([selected]) .container:not(.container--none-selection),:host([selected]) .container--link .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .container--link .dropdown-link calcite-icon{color:var(--calcite-color-brand)}.dropdown-item-icon{position:absolute;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover:not([disabled])) .dropdown-item-icon{color:var(--calcite-color-border-1);opacity:1}:host([selected]) .dropdown-item-icon{color:var(--calcite-color-brand);opacity:1}.container--s .dropdown-item-icon-start{margin-inline-end:0.5rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{margin-inline-end:0.75rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{margin-inline-end:1rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{margin-inline-start:1rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+const dropdownItemCss = ":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}.container--s{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}.container--s.container--none-selection{padding-inline-start:0.25rem}.container--s.container--none-selection .dropdown-link{padding-inline-start:0px}.container--m.container--none-selection{padding-inline-start:0.5rem}.container--m.container--none-selection .dropdown-link{padding-inline-start:0px}.container--l.container--none-selection{padding-inline-start:0.75rem}.container--l.container--none-selection .dropdown-link{padding-inline-start:0px}:host{position:relative;display:flex;flex-grow:1;align-items:center}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);text-align:start}.dropdown-item-content{flex:1 1 auto;padding-block:0.125rem;padding-inline-end:auto;padding-inline-start:0.25rem}:host,.container--link a{outline-color:transparent}:host(:focus){outline:2px solid transparent;outline-offset:2px;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          )}.container--link{padding:0px}.container--link a{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.container--s .dropdown-link{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l .dropdown-link{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:hover:not([disabled])) .container--link .dropdown-link,:host(:active:not([disabled])) .container--link .dropdown-link{color:var(--calcite-color-text-1)}:host(:active:not([disabled])) .container{background-color:var(--calcite-color-foreground-3)}:host(:focus) .container{color:var(--calcite-color-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([selected]) .container:not(.container--none-selection),:host([selected]) .container--link .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .container--link .dropdown-link calcite-icon{color:var(--calcite-color-brand)}.dropdown-item-icon{position:absolute;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover:not([disabled])) .dropdown-item-icon{color:var(--calcite-color-border-1);opacity:1}:host([selected]) .dropdown-item-icon{color:var(--calcite-color-brand);opacity:1}.container--s .dropdown-item-icon-start{margin-inline-end:0.5rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{margin-inline-end:0.75rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{margin-inline-end:1rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{margin-inline-start:1rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+const CalciteDropdownItemStyle0 = dropdownItemCss;
 
 const DropdownItem = class {
     constructor(hostRef) {
@@ -572,9 +570,9 @@ const DropdownItem = class {
     }
     render() {
         const { href, selectionMode, label, iconFlipRtl, scale } = this;
-        const iconStartEl = (h("calcite-icon", { class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const contentNode = (h("span", { class: CSS.itemContent }, h("slot", null)));
-        const iconEndEl = (h("calcite-icon", { class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const iconStartEl = (h("calcite-icon", { key: '10985dba962cc1582cc6b2896e1c274b21e1dc20', class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const contentNode = (h("span", { key: 'e72a06cc3d3f325ec8e0e8eff407dc9149b29b14', class: CSS.itemContent }, h("slot", { key: 'e8d4e201f5903a2811c642d441d4b33d20abd7b2' })));
+        const iconEndEl = (h("calcite-icon", { key: 'fd15f4aea96916ffa674591adc6887dafccc8218', class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
         const slottedContent = this.iconStart && this.iconEnd
             ? [iconStartEl, contentNode, iconEndEl]
             : this.iconStart
@@ -594,7 +592,7 @@ const DropdownItem = class {
                     : "menuitem";
         const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
         const { disabled } = this;
-        return (h(Host, { "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { disabled: disabled }, h("div", { class: {
+        return (h(Host, { key: '6cdbba40456cde099120c69e8b743db43a044279', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, h(InteractiveContainer, { key: 'ad9f797dba175a65095cb209f0230043ca19247c', disabled: disabled }, h("div", { key: '6380f6b0db4dfada44886e8e003d6d973598b252', class: {
                 [CSS.container]: true,
                 [CSS.containerLink]: !!href,
                 [`${CSS.container}--${scale}`]: true,
@@ -686,9 +684,10 @@ const DropdownItem = class {
     }
     get el() { return getElement(this); }
 };
-DropdownItem.style = dropdownItemCss;
+DropdownItem.style = CalciteDropdownItemStyle0;
 
 const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
+const MapLayerPickerStyle0 = mapLayerPickerCss;
 
 const MapLayerPicker = class {
     constructor(hostRef) {
@@ -769,7 +768,7 @@ const MapLayerPicker = class {
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
         style = Object.assign(Object.assign({}, style), { "display": this.display });
-        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        return (h(Host, { key: '6e3213373ee2ca31f3ee0996f51cb59c0948df5e' }, h("div", { key: '641de287f126b4e7b6d38df8c6d3b5fe882fef2f', class: "map-layer-picker-container", style: style }, h("div", { key: '7bbb3b9e7684a5d62ae6762bb46ec5fe97147b54', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id)))));
@@ -1011,6 +1010,6 @@ const MapLayerPicker = class {
         "mapView": ["mapViewWatchHandler"]
     }; }
 };
-MapLayerPicker.style = mapLayerPickerCss;
+MapLayerPicker.style = MapLayerPickerStyle0;
 
 export { Dropdown as calcite_dropdown, DropdownGroup as calcite_dropdown_group, DropdownItem as calcite_dropdown_item, MapLayerPicker as map_layer_picker };

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

@@ -3,18 +3,18 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, g as getElement } from './index-164d485a.js';
-import { e as focusElement } from './dom-38c6f027.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-39bf5602.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
-import './guid-b75a5f7b.js';
-import './resources-8834f920.js';
-import './browser-d60104bd.js';
+import { r as registerInstance, h, g as getElement } from './index-ba5da2b0.js';
+import { e as focusElement } from './dom-d675fe65.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-52276a00.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-cca582a3.js';
+import './guid-f05d01d5.js';
+import './resources-1febf4c6.js';
+import './browser-9897260d.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 = {
     button: "button",
@@ -24,6 +24,7 @@ const ICONS = {
 };
 
 const fabCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}calcite-button:hover{--tw-shadow:var(--calcite-shadow-md);--tw-shadow-colored:var(--calcite-shadow-md);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}calcite-button:active{--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteFabStyle0 = fabCss;
 
 const Fab = class {
     constructor(hostRef) {
@@ -77,7 +78,7 @@ const Fab = class {
     render() {
         const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
         const title = !textEnabled ? label || text || null : null;
-        return (h(InteractiveContainer, { disabled: disabled }, h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
+        return (h(InteractiveContainer, { key: '4203fb6efbcb95a451ff7853fdb8e60f992f96ee', disabled: disabled }, h("calcite-button", { key: 'c54c4bf5ce9cdb1e443a576051be4bafd284536a', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (buttonEl) => {
                 this.buttonEl = buttonEl;
@@ -85,6 +86,6 @@ const Fab = class {
     }
     get el() { return getElement(this); }
 };
-Fab.style = fabCss;
+Fab.style = CalciteFabStyle0;
 
 export { Fab as calcite_fab };