@esri/calcite-components 2.2.0-next.0 → 2.2.0-next.1

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

@@ -1,16 +1,16 @@
 /*!
  * 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.2.0-next.0
+ * v2.2.0-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { a as dateToISO } from './date.js';
 import { c as closestElementCrossShadowBoundary, t as toAriaBoolean } from './dom.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+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 './locale.js';
 
-const datePickerDayCss = ":host([disabled]){cursor:default;-webkit-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}.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;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 DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay extends HTMLElement {
     constructor() {
@@ -77,20 +77,17 @@ 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" }, 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, { "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)))))));
     }
     connectedCallback() {
         connectInteractive(this);
     }
     componentDidRender() {
-        updateHostInteraction(this, this.isTabbable);
+        updateHostInteraction(this);
     }
     disconnectedCallback() {
         disconnectInteractive(this);
     }
-    isTabbable() {
-        return this.active;
-    }
     get el() { return this; }
     static get style() { return datePickerDayCss; }
 }, [1, "calcite-date-picker-day", {

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

@@ -1 +1 @@
-{"file":"date-picker-day.js","mappings":";;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,kvOAAkvO;;MC6B9vO,aAAa;;;;;;;;;;;;QA+DxB,YAAO,GAAG;YACR,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;SAC9B,CAAC;QAEF,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAC9B,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;;;wBA1DkC,KAAK;4BAGD,KAAK;wBAGT,KAAK;2BAGF,KAAK;qBAGX,KAAK;;4BAUE,KAAK;0BAGP,KAAK;0BAGL,KAAK;sBAGT,KAAK;;;;IA8BvC,kBAAkB;QAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;KACrC;;;;;;IA0BD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,GAAG,iCAAiC,CACzD,IAAI,CAAC,EAAE,EACP,qBAAqB,CACU,CAAC;KACnC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACxD,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;YAElE,qBAAqB,CAAC,mBAAmB,GAAG;gBAC1C,WAAW,EAAE,KAAK;gBAClB,IAAI,eAAe,IAAI,EAAE,eAAe,EAAE,CAAC;gBAC3C,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;aAC1B,CAAC;SACH;QACD,MAAM,YAAY,GAAG,qBAAqB,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACtE,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAExD,QACE,EAAC,IAAI,qBACY,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAC/B,QAAQ,mBACL,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EACzC,EAAE,EAAE,KAAK,EACT,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,IAAI,EAAC,QAAQ,IAEb,0BAAiB,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IACtD,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,KAAK,EAAC,KAAK,IACf,YAAM,KAAK,EAAC,MAAM,IAAE,YAAY,CAAQ,CACnC,CACH,CACF,CACD,EACP;KACH;IAED,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC9C;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,UAAU;QACR,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/date-picker-day/date-picker-day.scss?tag=calcite-date-picker-day&encapsulation=shadow","src/components/date-picker-day/date-picker-day.tsx"],"sourcesContent":[":host {\n  @apply cursor-pointer flex relative text-color-3;\n}\n\n@include disabled();\n\n@mixin range-part-base() {\n  &:before,\n  &:after {\n    @apply absolute pointer-events-none;\n    inset-block: 0;\n    content: \"\";\n    block-size: var(--calcite-internal-day-size);\n    inline-size: var(--calcite-internal-day-size);\n  }\n}\n\n@mixin range-part-edge-end() {\n  &:before {\n    inset-inline-end: 50%;\n  }\n  &:after {\n    inset-inline-start: 50%;\n    border-start-end-radius: var(--calcite-internal-day-size);\n    border-end-end-radius: var(--calcite-internal-day-size);\n    inline-size: calc(var(--calcite-internal-day-size) / 2);\n  }\n}\n\n@mixin range-part-edge-start() {\n  &:before {\n    inset-inline-end: 50%;\n    border-start-start-radius: var(--calcite-internal-day-size);\n    border-end-start-radius: var(--calcite-internal-day-size);\n    inline-size: calc(var(--calcite-internal-day-size) / 2);\n  }\n  &:after {\n    inset-inline-start: 50%;\n  }\n}\n\n@mixin range-part-middle() {\n  &:before {\n    inset-inline-end: 50%;\n    border-radius: 0;\n  }\n  &:after {\n    inset-inline-start: 50%;\n    border-radius: 0;\n  }\n}\n\n.day-v-wrapper {\n  @apply flex-auto;\n}\n\n.day-wrapper {\n  @apply flex\n    flex-col\n    items-center\n    relative;\n}\n\n:host([range]),\n:host([range-hover]) {\n  .day-wrapper {\n    @include range-part-base();\n  }\n}\n\n.day {\n  @apply text-n2h\n    text-color-3\n    flex\n    focus-base\n    items-center\n    justify-center\n    rounded-full\n    leading-none\n    transition-default\n    z-default;\n  background: none;\n  box-shadow: 0 0 0 2px transparent;\n  block-size: var(--calcite-internal-day-size);\n  inline-size: var(--calcite-internal-day-size);\n}\n\n.text {\n  @apply mt-px mb-0;\n  margin-inline-start: theme(\"spacing.0\");\n}\n\n:host([scale=\"s\"]) {\n  --calcite-internal-day-size: 27px;\n\n  .day-v-wrapper {\n    @apply py-0.5;\n  }\n  .day-wrapper {\n    @apply p-0;\n  }\n  .day {\n    @apply text-n2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-day-size: 33px;\n\n  .day-v-wrapper {\n    @apply py-1;\n  }\n  .day-wrapper {\n    @apply p-0;\n  }\n  .day {\n    @apply text-n1;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-day-size: 43px;\n\n  .day-v-wrapper {\n    @apply py-1;\n  }\n  .day-wrapper {\n    @apply px-1;\n  }\n  .day {\n    @apply text-0;\n  }\n}\n\n:host(:not([current-month])) .day {\n  @apply opacity-disabled;\n}\n\n:host(:hover:not([disabled]):not([selected])),\n:host([active]:not([range]):not([selected])) {\n  & .day {\n    @apply bg-foreground-2 text-color-1;\n  }\n}\n\n:host(:focus),\n:host([active]) {\n  @apply outline-none;\n}\n\n:host(:focus:not([disabled])) .day {\n  @apply focus-outset;\n}\n\n:host([selected]) .day {\n  @apply font-medium;\n  background-color: var(--calcite-color-brand);\n  color: var(--calcite-color-foreground-1);\n}\n\n:host(:focus:not([disabled])),\n:host([start-of-range]:not(:focus)),\n:host([end-of-range]:not(:focus)) {\n  .day {\n    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1);\n  }\n}\n\n:host([range-hover]:not([selected])),\n:host([highlighted]:not([selected])) {\n  .day-wrapper {\n    @include range-part-middle();\n  }\n\n  .day {\n    @apply text-color-1;\n  }\n}\n\n:host([highlighted]),\n:host([selected]:not(.hover--outside-range)) {\n  .day-wrapper {\n    &:before,\n    &:after {\n      background-color: var(--calcite-color-foreground-current);\n    }\n  }\n}\n\n:host([range-hover]:not([selected])) {\n  .day-wrapper {\n    &:before,\n    &:after {\n      @apply bg-foreground-2;\n    }\n  }\n}\n\n:host(:hover[range-hover]:not([selected]).focused--end),\n:host([highlighted][end-of-range]),\n:host([highlighted][range-edge=\"end\"]),\n:host([range-hover][range-edge=\"end\"]),\n:host(:hover[range-hover].focused--end.hover--outside-range) {\n  .day-wrapper {\n    @include range-part-edge-end();\n  }\n}\n\n:host([highlighted][start-of-range]),\n:host([highlighted][range-edge=\"start\"]),\n:host([range-hover][range-edge=\"start\"]),\n:host(:hover[range-hover]:not([selected]).focused--start),\n:host([start-of-range].hover--inside-range),\n:host(:hover[range-hover].focused--start.hover--outside-range) {\n  .day-wrapper {\n    @include range-part-edge-start();\n  }\n}\n\n:host([range-hover][start-of-range][range-edge=\"end\"]),\n:host([range-hover][end-of-range][range-edge=\"start\"]),\n:host([start-of-range][range-edge=\"end\"].hover--inside-range),\n:host([end-of-range]) {\n  .day-wrapper {\n    &:after,\n    &:before {\n      content: unset;\n    }\n  }\n}\n\n:host(:hover[range-hover]:not([selected]).focused--start),\n:host(:hover[range-hover]:not([selected]).focused--end),\n:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range),\n:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) {\n  .day {\n    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1);\n  }\n}\n\n@media (forced-colors: active) {\n  .day {\n    @apply rounded-none;\n  }\n\n  :host([selected]) {\n    outline: 2px solid canvasText;\n  }\n\n  :host(:hover:not([selected])) {\n    .day {\n      border-radius: 50%;\n    }\n  }\n\n  :host([range][selected]),\n  :host([highlighted]),\n  :host([range-hover]:not([selected])) {\n    .day-wrapper {\n      &:before,\n      &:after {\n        background-color: highlight;\n      }\n    }\n  }\n\n  :host([range-hover]),\n  :host([range][selected][start-of-range]),\n  :host([range][selected][end-of-range]) {\n    .day-wrapper {\n      &:before,\n      &:after {\n        background-color: canvas;\n      }\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { dateToISO } from \"../../utils/date\";\n\nimport { closestElementCrossShadowBoundary, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { numberStringFormatter } from \"../../utils/locale\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-date-picker-day\",\n  styleUrl: \"date-picker-day.scss\",\n  shadow: true,\n})\nexport class DatePickerDay implements InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Day of the month to be shown. */\n  @Prop() day!: number;\n\n  /**\n   * The DateTimeFormat used to provide screen reader labels.\n   *\n   * @internal\n   */\n  @Prop() dateTimeFormat: Intl.DateTimeFormat;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Date is in the current month. */\n  @Prop({ reflect: true }) currentMonth = false;\n\n  /**  When `true`, the component is selected. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Date is currently highlighted as part of the range */\n  @Prop({ reflect: true }) highlighted = false;\n\n  /** When `true`, activates the component's range mode to allow a start and end date. */\n  @Prop({ reflect: true }) range = false;\n\n  /**\n   * When `true`, highlight styling for edge dates is applied.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) rangeEdge: \"start\" | \"end\" | undefined;\n\n  /** Date is the start of date range */\n  @Prop({ reflect: true }) startOfRange = false;\n\n  /** Date is the end of date range */\n  @Prop({ reflect: true }) endOfRange = false;\n\n  /** Date is being hovered and within the set range */\n  @Prop({ reflect: true }) rangeHover = false;\n\n  /** When `true`, the component is active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale;\n\n  /** The component's value. */\n  @Prop() value: Date;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onClick = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.calciteDaySelect.emit();\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      !this.disabled && this.calciteDaySelect.emit();\n      event.preventDefault();\n    }\n  };\n\n  @Listen(\"pointerover\")\n  pointerOverHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.calciteInternalDayHover.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emitted when user selects day\n   */\n  @Event({ cancelable: false }) calciteDaySelect: EventEmitter<void>;\n\n  /**\n   * Emitted when user hovers over a day\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalDayHover: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    this.parentDatePickerEl = closestElementCrossShadowBoundary(\n      this.el,\n      \"calcite-date-picker\"\n    ) as HTMLCalciteDatePickerElement;\n  }\n\n  render(): VNode {\n    const dayId = dateToISO(this.value).replaceAll(\"-\", \"\");\n    if (this.parentDatePickerEl) {\n      const { numberingSystem, lang: locale } = this.parentDatePickerEl;\n\n      numberStringFormatter.numberFormatOptions = {\n        useGrouping: false,\n        ...(numberingSystem && { numberingSystem }),\n        ...(locale && { locale }),\n      };\n    }\n    const formattedDay = numberStringFormatter.localize(String(this.day));\n    const dayLabel = this.dateTimeFormat.format(this.value);\n\n    return (\n      <Host\n        aria-disabled={toAriaBoolean(this.disabled)}\n        aria-label={dayLabel}\n        aria-selected={toAriaBoolean(this.active)}\n        id={dayId}\n        onClick={this.onClick}\n        onKeyDown={this.keyDownHandler}\n        role=\"button\"\n      >\n        <div aria-hidden=\"true\" class={{ \"day-v-wrapper\": true }}>\n          <div class=\"day-wrapper\">\n            <span class=\"day\">\n              <span class=\"text\">{formattedDay}</span>\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this, this.isTabbable);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  isTabbable(): boolean {\n    return this.active;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteDatePickerDayElement;\n\n  private parentDatePickerEl: HTMLCalciteDatePickerElement;\n}\n"],"version":3}
+{"file":"date-picker-day.js","mappings":";;;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,0xOAA0xO;;MC8BtyO,aAAa;;;;;;;;;;;;QA+DxB,YAAO,GAAG;YACR,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;SAC9B,CAAC;QAEF,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAC9B,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;gBAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;;;wBA1DkC,KAAK;4BAGD,KAAK;wBAGT,KAAK;2BAGF,KAAK;qBAGX,KAAK;;4BAUE,KAAK;0BAGP,KAAK;0BAGL,KAAK;sBAGT,KAAK;;;;IA8BvC,kBAAkB;QAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAC;KACrC;;;;;;IA0BD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,GAAG,iCAAiC,CACzD,IAAI,CAAC,EAAE,EACP,qBAAqB,CACU,CAAC;KACnC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACxD,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;YAElE,qBAAqB,CAAC,mBAAmB,GAAG;gBAC1C,WAAW,EAAE,KAAK;gBAClB,IAAI,eAAe,IAAI,EAAE,eAAe,EAAE,CAAC;gBAC3C,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;aAC1B,CAAC;SACH;QACD,MAAM,YAAY,GAAG,qBAAqB,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACtE,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAExD,QACE,EAAC,IAAI,qBACY,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAC/B,QAAQ,mBACL,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EACzC,EAAE,EAAE,KAAK,EACT,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,IAEhD,EAAC,oBAAoB,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3C,0BAAiB,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IACtD,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,KAAK,EAAC,KAAK,IACf,YAAM,KAAK,EAAC,MAAM,IAAE,YAAY,CAAQ,CACnC,CACH,CACF,CACe,CAClB,EACP;KACH;IAED,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/date-picker-day/date-picker-day.scss?tag=calcite-date-picker-day&encapsulation=shadow","src/components/date-picker-day/date-picker-day.tsx"],"sourcesContent":[":host {\n  @apply cursor-pointer flex relative text-color-3;\n}\n\n@include disabled();\n\n@mixin range-part-base() {\n  &:before,\n  &:after {\n    @apply absolute pointer-events-none;\n    inset-block: 0;\n    content: \"\";\n    block-size: var(--calcite-internal-day-size);\n    inline-size: var(--calcite-internal-day-size);\n  }\n}\n\n@mixin range-part-edge-end() {\n  &:before {\n    inset-inline-end: 50%;\n  }\n  &:after {\n    inset-inline-start: 50%;\n    border-start-end-radius: var(--calcite-internal-day-size);\n    border-end-end-radius: var(--calcite-internal-day-size);\n    inline-size: calc(var(--calcite-internal-day-size) / 2);\n  }\n}\n\n@mixin range-part-edge-start() {\n  &:before {\n    inset-inline-end: 50%;\n    border-start-start-radius: var(--calcite-internal-day-size);\n    border-end-start-radius: var(--calcite-internal-day-size);\n    inline-size: calc(var(--calcite-internal-day-size) / 2);\n  }\n  &:after {\n    inset-inline-start: 50%;\n  }\n}\n\n@mixin range-part-middle() {\n  &:before {\n    inset-inline-end: 50%;\n    border-radius: 0;\n  }\n  &:after {\n    inset-inline-start: 50%;\n    border-radius: 0;\n  }\n}\n\n.day-v-wrapper {\n  @apply flex-auto;\n}\n\n.day-wrapper {\n  @apply flex\n    flex-col\n    items-center\n    relative;\n}\n\n:host([range]),\n:host([range-hover]) {\n  .day-wrapper {\n    @include range-part-base();\n  }\n}\n\n.day {\n  @apply text-n2h\n    text-color-3\n    flex\n    focus-base\n    items-center\n    justify-center\n    rounded-full\n    leading-none\n    transition-default\n    z-default;\n  background: none;\n  box-shadow: 0 0 0 2px transparent;\n  block-size: var(--calcite-internal-day-size);\n  inline-size: var(--calcite-internal-day-size);\n}\n\n.text {\n  @apply mt-px mb-0;\n  margin-inline-start: theme(\"spacing.0\");\n}\n\n:host([scale=\"s\"]) {\n  --calcite-internal-day-size: 27px;\n\n  .day-v-wrapper {\n    @apply py-0.5;\n  }\n  .day-wrapper {\n    @apply p-0;\n  }\n  .day {\n    @apply text-n2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-internal-day-size: 33px;\n\n  .day-v-wrapper {\n    @apply py-1;\n  }\n  .day-wrapper {\n    @apply p-0;\n  }\n  .day {\n    @apply text-n1;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-internal-day-size: 43px;\n\n  .day-v-wrapper {\n    @apply py-1;\n  }\n  .day-wrapper {\n    @apply px-1;\n  }\n  .day {\n    @apply text-0;\n  }\n}\n\n:host(:not([current-month])) .day {\n  @apply opacity-disabled;\n}\n\n:host(:hover:not([disabled]):not([selected])),\n:host([active]:not([range]):not([selected])) {\n  & .day {\n    @apply bg-foreground-2 text-color-1;\n  }\n}\n\n:host(:focus),\n:host([active]) {\n  @apply outline-none;\n}\n\n:host(:focus:not([disabled])) .day {\n  @apply focus-outset;\n}\n\n:host([selected]) .day {\n  @apply font-medium;\n  background-color: var(--calcite-color-brand);\n  color: var(--calcite-color-foreground-1);\n}\n\n:host(:focus:not([disabled])),\n:host([start-of-range]:not(:focus)),\n:host([end-of-range]:not(:focus)) {\n  .day {\n    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1);\n  }\n}\n\n:host([range-hover]:not([selected])),\n:host([highlighted]:not([selected])) {\n  .day-wrapper {\n    @include range-part-middle();\n  }\n\n  .day {\n    @apply text-color-1;\n  }\n}\n\n:host([highlighted]),\n:host([selected]:not(.hover--outside-range)) {\n  .day-wrapper {\n    &:before,\n    &:after {\n      background-color: var(--calcite-color-foreground-current);\n    }\n  }\n}\n\n:host([range-hover]:not([selected])) {\n  .day-wrapper {\n    &:before,\n    &:after {\n      @apply bg-foreground-2;\n    }\n  }\n}\n\n:host(:hover[range-hover]:not([selected]).focused--end),\n:host([highlighted][end-of-range]),\n:host([highlighted][range-edge=\"end\"]),\n:host([range-hover][range-edge=\"end\"]),\n:host(:hover[range-hover].focused--end.hover--outside-range) {\n  .day-wrapper {\n    @include range-part-edge-end();\n  }\n}\n\n:host([highlighted][start-of-range]),\n:host([highlighted][range-edge=\"start\"]),\n:host([range-hover][range-edge=\"start\"]),\n:host(:hover[range-hover]:not([selected]).focused--start),\n:host([start-of-range].hover--inside-range),\n:host(:hover[range-hover].focused--start.hover--outside-range) {\n  .day-wrapper {\n    @include range-part-edge-start();\n  }\n}\n\n:host([range-hover][start-of-range][range-edge=\"end\"]),\n:host([range-hover][end-of-range][range-edge=\"start\"]),\n:host([start-of-range][range-edge=\"end\"].hover--inside-range),\n:host([end-of-range]) {\n  .day-wrapper {\n    &:after,\n    &:before {\n      content: unset;\n    }\n  }\n}\n\n:host(:hover[range-hover]:not([selected]).focused--start),\n:host(:hover[range-hover]:not([selected]).focused--end),\n:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range),\n:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) {\n  .day {\n    box-shadow: 0 0 0 2px var(--calcite-color-foreground-1);\n  }\n}\n\n@media (forced-colors: active) {\n  .day {\n    @apply rounded-none;\n  }\n\n  :host([selected]) {\n    outline: 2px solid canvasText;\n  }\n\n  :host(:hover:not([selected])) {\n    .day {\n      border-radius: 50%;\n    }\n  }\n\n  :host([range][selected]),\n  :host([highlighted]),\n  :host([range-hover]:not([selected])) {\n    .day-wrapper {\n      &:before,\n      &:after {\n        background-color: highlight;\n      }\n    }\n  }\n\n  :host([range-hover]),\n  :host([range][selected][start-of-range]),\n  :host([range][selected][end-of-range]) {\n    .day-wrapper {\n      &:before,\n      &:after {\n        background-color: canvas;\n      }\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { dateToISO } from \"../../utils/date\";\n\nimport { closestElementCrossShadowBoundary, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { numberStringFormatter } from \"../../utils/locale\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-date-picker-day\",\n  styleUrl: \"date-picker-day.scss\",\n  shadow: true,\n})\nexport class DatePickerDay implements InteractiveComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Day of the month to be shown. */\n  @Prop() day!: number;\n\n  /**\n   * The DateTimeFormat used to provide screen reader labels.\n   *\n   * @internal\n   */\n  @Prop() dateTimeFormat: Intl.DateTimeFormat;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Date is in the current month. */\n  @Prop({ reflect: true }) currentMonth = false;\n\n  /**  When `true`, the component is selected. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Date is currently highlighted as part of the range */\n  @Prop({ reflect: true }) highlighted = false;\n\n  /** When `true`, activates the component's range mode to allow a start and end date. */\n  @Prop({ reflect: true }) range = false;\n\n  /**\n   * When `true`, highlight styling for edge dates is applied.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) rangeEdge: \"start\" | \"end\" | undefined;\n\n  /** Date is the start of date range */\n  @Prop({ reflect: true }) startOfRange = false;\n\n  /** Date is the end of date range */\n  @Prop({ reflect: true }) endOfRange = false;\n\n  /** Date is being hovered and within the set range */\n  @Prop({ reflect: true }) rangeHover = false;\n\n  /** When `true`, the component is active. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale;\n\n  /** The component's value. */\n  @Prop() value: Date;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onClick = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.calciteDaySelect.emit();\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      !this.disabled && this.calciteDaySelect.emit();\n      event.preventDefault();\n    }\n  };\n\n  @Listen(\"pointerover\")\n  pointerOverHandler(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.calciteInternalDayHover.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emitted when user selects day\n   */\n  @Event({ cancelable: false }) calciteDaySelect: EventEmitter<void>;\n\n  /**\n   * Emitted when user hovers over a day\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalDayHover: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentWillLoad(): void {\n    this.parentDatePickerEl = closestElementCrossShadowBoundary(\n      this.el,\n      \"calcite-date-picker\"\n    ) as HTMLCalciteDatePickerElement;\n  }\n\n  render(): VNode {\n    const dayId = dateToISO(this.value).replaceAll(\"-\", \"\");\n    if (this.parentDatePickerEl) {\n      const { numberingSystem, lang: locale } = this.parentDatePickerEl;\n\n      numberStringFormatter.numberFormatOptions = {\n        useGrouping: false,\n        ...(numberingSystem && { numberingSystem }),\n        ...(locale && { locale }),\n      };\n    }\n    const formattedDay = numberStringFormatter.localize(String(this.day));\n    const dayLabel = this.dateTimeFormat.format(this.value);\n\n    return (\n      <Host\n        aria-disabled={toAriaBoolean(this.disabled)}\n        aria-label={dayLabel}\n        aria-selected={toAriaBoolean(this.active)}\n        id={dayId}\n        onClick={this.onClick}\n        onKeyDown={this.keyDownHandler}\n        role=\"button\"\n        tabIndex={this.active && !this.disabled ? 0 : -1}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div aria-hidden=\"true\" class={{ \"day-v-wrapper\": true }}>\n            <div class=\"day-wrapper\">\n              <span class=\"day\">\n                <span class=\"text\">{formattedDay}</span>\n              </span>\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteDatePickerDayElement;\n\n  private parentDatePickerEl: HTMLCalciteDatePickerElement;\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { e as getOrder, b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, h as parseCalendarYear } from './date.js';

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as sameDate, b as dateFromRange, i as inRange } from './date.js';

package/dist/components/date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { getAssetPath, proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { d as dateFromISO, g as getDaysDiff, a as dateToISO, b as dateFromRange, s as setEndOfDay } from './date.js';

package/dist/components/date.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { n as numberStringFormatter } from './locale.js';
 

package/dist/components/de-at.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/de-ch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/de.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/debounce.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;

package/dist/components/dom.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { g as guid } from './guid.js';
 import { C as CSS_UTILITY } from './resources.js';

package/dist/components/dropdown.js

@@ -1,13 +1,13 @@
 /*!
  * 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.2.0-next.0
+ * v2.2.0-next.1
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean, i as isPrimaryPointerButton, v as focusElementInGroup, e as focusElement } from './dom.js';
 import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui.js';
 import { g as guid } from './guid.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { c as createObserver } from './observers.js';
@@ -17,7 +17,7 @@ const SLOTS = {
     dropdownTrigger: "trigger",
 };
 
-const dropdownCss = ":host([disabled]){cursor:default;-webkit-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}: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 dropdownCss = ":host([disabled]){cursor:default;-webkit-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 Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
     constructor() {
@@ -245,7 +245,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     }
     render() {
         const { open, guid } = this;
-        return (h(Host, null, h("div", { class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
+        return (h(Host, null, h(InteractiveContainer, { disabled: this.disabled }, h("div", { 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",
             // 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)
@@ -255,7 +255,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
                 [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", { onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"file":"dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/resources.ts","src/components/dropdown/dropdown.scss?tag=calcite-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["export const SLOTS = {\n  dropdownTrigger: \"trigger\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.\n */\n\n:host {\n  @apply inline-block;\n}\n\n@include disabled();\n\n:host .calcite-dropdown-wrapper {\n  --calcite-floating-ui-z-index: theme(\"zIndex.dropdown\");\n  @include floatingUIContainer();\n  @include floatingUIWrapper();\n}\n\n@include floatingUIElemAnim(\".calcite-dropdown-wrapper\");\n:host([open]) .calcite-dropdown-wrapper {\n  @include floatingUIWrapperActive();\n}\n\n:host .calcite-dropdown-content {\n  @apply bg-foreground-1\n    w-auto\n    overflow-y-auto\n    overflow-x-hidden\n    max-h-menu;\n  inline-size: var(--calcite-dropdown-width);\n}\n.calcite-trigger-container {\n  @apply relative flex flex-auto h-full;\n  @include word-break;\n}\n\n@media (forced-colors: active) {\n  /* use real border since box-shadow is removed in high contrast mode */\n  :host([open]) .calcite-dropdown-wrapper {\n    border: 1px solid canvasText;\n  }\n}\n\n// width\n:host([width-scale=\"s\"]) {\n  --calcite-dropdown-width: theme(\"spacing.48\");\n}\n:host([width-scale=\"m\"]) {\n  --calcite-dropdown-width: theme(\"spacing.56\");\n}\n:host([width-scale=\"l\"]) {\n  --calcite-dropdown-width: theme(\"spacing.64\");\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { ItemKeyboardEvent } from \"./interfaces\";\n\nimport {\n  focusElement,\n  focusElementInGroup,\n  isPrimaryPointerButton,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport {\n  connectFloatingUI,\n  defaultMenuPlacement,\n  disconnectFloatingUI,\n  EffectivePlacement,\n  filterComputedPlacements,\n  FloatingCSS,\n  FloatingUIComponent,\n  MenuPlacement,\n  OverlayPositioning,\n  reposition,\n} from \"../../utils/floating-ui\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { createObserver } from \"../../utils/observers\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { RequestedItem } from \"../dropdown-group/interfaces\";\nimport { Scale } from \"../interfaces\";\nimport { SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.\n * @slot trigger - A slot for the element that triggers the `calcite-dropdown`.\n */\n@Component({\n  tag: \"calcite-dropdown\",\n  styleUrl: \"dropdown.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Dropdown\n  implements InteractiveComponent, LoadableComponent, OpenCloseComponent, FloatingUIComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, displays and positions the component.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.reposition(true);\n  }\n\n  /**\n   * When `true`, the component will remain open after a selection is made.\n   *\n   * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `\"none\"`, the component will always close.\n   *\n   */\n  @Prop({ reflect: true }) closeOnSelectDisabled = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  @Watch(\"disabled\")\n  handleDisabledChange(value: boolean): void {\n    if (!value) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Defines the available placements that can be used when a flip occurs.\n   */\n  @Prop() flipPlacements: EffectivePlacement[];\n\n  @Watch(\"flipPlacements\")\n  flipPlacementsHandler(): void {\n    this.setFilteredPlacements();\n    this.reposition(true);\n  }\n\n  /**\n   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.\n   * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.\n   */\n  @Prop({ reflect: true }) maxItems = 0;\n\n  @Watch(\"maxItems\")\n  maxItemsHandler(): void {\n    this.setMaxScrollerHeight();\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  @Watch(\"overlayPositioning\")\n  overlayPositioningHandler(): void {\n    this.reposition(true);\n  }\n\n  /**\n   * Determines where the component will be positioned relative to the container element.\n   *\n   * @default \"bottom-start\"\n   */\n  @Prop({ reflect: true }) placement: MenuPlacement = defaultMenuPlacement;\n\n  @Watch(\"placement\")\n  placementHandler(): void {\n    this.reposition(true);\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteDropdownItemElement[] = [];\n\n  /**\n   * Specifies the action to open the component from the container element.\n   */\n  @Prop({ reflect: true }) type: \"hover\" | \"click\" = \"click\";\n\n  /**\n   * Specifies the width of the component.\n   */\n  @Prop({ reflect: true }) widthScale: Scale;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"scale\")\n  handlePropsChange(): void {\n    this.updateItems();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.setFilteredPlacements();\n    this.reposition(true);\n    if (this.open) {\n      this.openHandler();\n      onToggleOpenCloseComponent(this);\n    }\n    connectInteractive(this);\n    this.updateItems();\n    connectFloatingUI(this, this.referenceEl, this.floatingEl);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.reposition(true);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);\n  }\n\n  render(): VNode {\n    const { open, guid } = this;\n    return (\n      <Host>\n        <div\n          class=\"calcite-trigger-container\"\n          id={`${guid}-menubutton`}\n          onClick={this.openCalciteDropdown}\n          onKeyDown={this.keyDownHandler}\n          // 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)\n          ref={this.setReferenceEl}\n        >\n          <slot\n            aria-controls={`${guid}-menu`}\n            aria-expanded={toAriaBoolean(open)}\n            aria-haspopup=\"menu\"\n            name={SLOTS.dropdownTrigger}\n            onSlotchange={this.updateTriggers}\n          />\n        </div>\n        <div\n          aria-hidden={toAriaBoolean(!open)}\n          class=\"calcite-dropdown-wrapper\"\n          // 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)\n          ref={this.setFloatingEl}\n        >\n          <div\n            aria-labelledby={`${guid}-menubutton`}\n            class={{\n              [\"calcite-dropdown-content\"]: true,\n              [FloatingCSS.animation]: true,\n              [FloatingCSS.animationActive]: open,\n            }}\n            id={`${guid}-menu`}\n            role=\"menu\"\n            // 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)\n            ref={this.setScrollerAndTransitionEl}\n          >\n            <slot onSlotchange={this.updateGroups} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Updates the position of the component.\n   *\n   * @param delayed\n   */\n  @Method()\n  async reposition(delayed = false): Promise<void> {\n    const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;\n\n    return reposition(\n      this,\n      {\n        floatingEl,\n        referenceEl,\n        overlayPositioning,\n        placement,\n        flipPlacements: filteredFlipPlacements,\n        type: \"menu\",\n      },\n      delayed\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when a `calcite-dropdown-item`'s selection changes. */\n  @Event({ cancelable: false }) calciteDropdownSelect: EventEmitter<void>;\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteDropdownBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteDropdownClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteDropdownBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteDropdownOpen: EventEmitter<void>;\n\n  @Listen(\"pointerdown\", { target: \"window\" })\n  closeCalciteDropdownOnClick(event: PointerEvent): void {\n    if (\n      this.disabled ||\n      !isPrimaryPointerButton(event) ||\n      !this.open ||\n      event.composedPath().includes(this.el)\n    ) {\n      return;\n    }\n\n    this.closeCalciteDropdown(false);\n  }\n\n  @Listen(\"calciteInternalDropdownCloseRequest\")\n  closeCalciteDropdownOnEvent(event: Event): void {\n    this.closeCalciteDropdown();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteDropdownOpen\", { target: \"window\" })\n  closeCalciteDropdownOnOpenEvent(event: Event): void {\n    if (event.composedPath().includes(this.el)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled || this.type !== \"hover\") {\n      return;\n    }\n\n    this.openCalciteDropdown();\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled || this.type !== \"hover\") {\n      return;\n    }\n\n    this.closeCalciteDropdown();\n  }\n\n  private getTraversableItems(): HTMLCalciteDropdownItemElement[] {\n    return this.items.filter((item) => !item.disabled && !item.hidden);\n  }\n\n  @Listen(\"calciteInternalDropdownItemKeyEvent\")\n  calciteInternalDropdownItemKeyEvent(event: CustomEvent<ItemKeyboardEvent>): void {\n    const { keyboardEvent } = event.detail;\n    const target = keyboardEvent.target as HTMLCalciteDropdownItemElement;\n    const traversableItems = this.getTraversableItems();\n\n    switch (keyboardEvent.key) {\n      case \"Tab\":\n        this.open = false;\n        this.updateTabIndexOfItems(target);\n        break;\n      case \"ArrowDown\":\n        focusElementInGroup(traversableItems, target, \"next\");\n        break;\n      case \"ArrowUp\":\n        focusElementInGroup(traversableItems, target, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(traversableItems, target, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(traversableItems, target, \"last\");\n        break;\n    }\n\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalDropdownItemSelect\")\n  handleItemSelect(event: CustomEvent<RequestedItem>): void {\n    this.updateSelectedItems();\n    event.stopPropagation();\n    this.calciteDropdownSelect.emit();\n    if (\n      !this.closeOnSelectDisabled ||\n      event.detail.requestedDropdownGroup.selectionMode === \"none\"\n    ) {\n      this.closeCalciteDropdown();\n    }\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteDropdownElement;\n\n  filteredFlipPlacements: EffectivePlacement[];\n\n  private items: HTMLCalciteDropdownItemElement[] = [];\n\n  private groups: HTMLCalciteDropdownGroupElement[] = [];\n\n  /** trigger elements */\n  private triggers: HTMLElement[];\n\n  floatingEl: HTMLDivElement;\n\n  referenceEl: HTMLDivElement;\n\n  private scrollerEl: HTMLDivElement;\n\n  mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  resizeObserver = createObserver(\"resize\", (entries) => this.resizeObserverCallback(entries));\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  guid = `calcite-dropdown-${guid()}`;\n\n  defaultAssignedElements: Element[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  slotChangeHandler = (event: Event): void => {\n    this.defaultAssignedElements = (event.target as HTMLSlotElement).assignedElements({\n      flatten: true,\n    });\n\n    this.updateItems();\n  };\n\n  setFilteredPlacements = (): void => {\n    const { el, flipPlacements } = this;\n\n    this.filteredFlipPlacements = flipPlacements\n      ? filterComputedPlacements(flipPlacements, el)\n      : null;\n  };\n\n  updateTriggers = (event: Event): void => {\n    this.triggers = (event.target as HTMLSlotElement).assignedElements({\n      flatten: true,\n    }) as HTMLElement[];\n\n    this.reposition(true);\n  };\n\n  updateItems = (): void => {\n    this.items = this.groups\n      .map((group) => Array.from(group?.querySelectorAll(\"calcite-dropdown-item\")))\n      .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);\n\n    this.updateSelectedItems();\n\n    this.reposition(true);\n\n    this.items.forEach((item) => (item.scale = this.scale));\n  };\n\n  updateGroups = (event: Event): void => {\n    const groups = (event.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-dropdown-group\")) as HTMLCalciteDropdownGroupElement[];\n\n    this.groups = groups;\n\n    this.updateItems();\n  };\n\n  resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {\n    entries.forEach((entry) => {\n      const { target } = entry;\n      if (target === this.referenceEl) {\n        this.setDropdownWidth();\n      } else if (target === this.scrollerEl) {\n        this.setMaxScrollerHeight();\n      }\n    });\n  };\n\n  setDropdownWidth = (): void => {\n    const { referenceEl, scrollerEl } = this;\n    const referenceElWidth = referenceEl?.clientWidth;\n\n    if (!referenceElWidth || !scrollerEl) {\n      return;\n    }\n\n    scrollerEl.style.minWidth = `${referenceElWidth}px`;\n  };\n\n  setMaxScrollerHeight = (): void => {\n    const { scrollerEl } = this;\n    if (!scrollerEl) {\n      return;\n    }\n\n    this.reposition(true);\n    const maxScrollerHeight = this.getMaxScrollerHeight();\n    scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : \"\";\n    this.reposition(true);\n  };\n\n  setScrollerAndTransitionEl = (el: HTMLDivElement): void => {\n    this.resizeObserver.observe(el);\n    this.scrollerEl = el;\n\n    this.transitionEl = el;\n  };\n\n  onBeforeOpen(): void {\n    this.calciteDropdownBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteDropdownOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteDropdownBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteDropdownClose.emit();\n  }\n\n  setReferenceEl = (el: HTMLDivElement): void => {\n    this.referenceEl = el;\n    connectFloatingUI(this, this.referenceEl, this.floatingEl);\n    this.resizeObserver.observe(el);\n  };\n\n  setFloatingEl = (el: HTMLDivElement): void => {\n    this.floatingEl = el;\n    connectFloatingUI(this, this.referenceEl, this.floatingEl);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!event.composedPath().includes(this.referenceEl)) {\n      return;\n    }\n\n    const { defaultPrevented, key } = event;\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    if (this.open) {\n      if (key === \"Escape\") {\n        this.closeCalciteDropdown();\n        event.preventDefault();\n        return;\n      } else if (event.shiftKey && key === \"Tab\") {\n        this.closeCalciteDropdown();\n        event.preventDefault();\n        return;\n      }\n    }\n\n    if (isActivationKey(key)) {\n      this.openCalciteDropdown();\n      event.preventDefault();\n    } else if (key === \"Escape\") {\n      this.closeCalciteDropdown();\n      event.preventDefault();\n    }\n  };\n\n  private updateSelectedItems(): void {\n    this.selectedItems = this.items.filter((item) => item.selected);\n  }\n\n  private getMaxScrollerHeight(): number {\n    const { maxItems, items } = this;\n    let itemsToProcess = 0;\n    let maxScrollerHeight = 0;\n    let groupHeaderHeight: number;\n\n    this.groups.forEach((group) => {\n      if (maxItems > 0 && itemsToProcess < maxItems) {\n        Array.from(group.children).forEach((item: HTMLCalciteDropdownItemElement, index) => {\n          if (index === 0) {\n            if (isNaN(groupHeaderHeight)) {\n              groupHeaderHeight = item.offsetTop;\n            }\n\n            maxScrollerHeight += groupHeaderHeight;\n          }\n\n          if (itemsToProcess < maxItems) {\n            maxScrollerHeight += item.offsetHeight;\n            itemsToProcess += 1;\n          }\n        });\n      }\n    });\n\n    return items.length > maxItems ? maxScrollerHeight : 0;\n  }\n\n  private closeCalciteDropdown(focusTrigger = true) {\n    this.open = false;\n\n    if (focusTrigger) {\n      focusElement(this.triggers[0]);\n    }\n  }\n\n  private focusOnFirstActiveOrFirstItem = (): void => {\n    this.getFocusableElement(\n      this.getTraversableItems().find((item) => item.selected) || this.items[0]\n    );\n  };\n\n  private getFocusableElement(item: HTMLCalciteDropdownItemElement): void {\n    if (!item) {\n      return;\n    }\n\n    focusElement(item);\n  }\n\n  private toggleOpenEnd = (): void => {\n    this.focusOnFirstActiveOrFirstItem();\n    this.el.removeEventListener(\"calciteDropdownOpen\", this.toggleOpenEnd);\n  };\n\n  private openCalciteDropdown = () => {\n    this.open = !this.open;\n    if (this.open) {\n      this.el.addEventListener(\"calciteDropdownOpen\", this.toggleOpenEnd);\n    }\n  };\n\n  private updateTabIndexOfItems(target: HTMLCalciteDropdownItemElement): void {\n    this.items.forEach((item: HTMLCalciteDropdownItemElement) => {\n      item.tabIndex = target !== item ? -1 : 0;\n    });\n  }\n}\n"],"version":3}
+{"file":"dropdown.js","mappings":"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","names":[],"sources":["src/components/dropdown/resources.ts","src/components/dropdown/dropdown.scss?tag=calcite-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["export const SLOTS = {\n  dropdownTrigger: \"trigger\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.\n */\n\n:host {\n  @apply inline-block;\n}\n\n@include disabled();\n\n:host .calcite-dropdown-wrapper {\n  --calcite-floating-ui-z-index: theme(\"zIndex.dropdown\");\n  @include floatingUIContainer();\n  @include floatingUIWrapper();\n}\n\n@include floatingUIElemAnim(\".calcite-dropdown-wrapper\");\n:host([open]) .calcite-dropdown-wrapper {\n  @include floatingUIWrapperActive();\n}\n\n:host .calcite-dropdown-content {\n  @apply bg-foreground-1\n    w-auto\n    overflow-y-auto\n    overflow-x-hidden\n    max-h-menu;\n  inline-size: var(--calcite-dropdown-width);\n}\n.calcite-trigger-container {\n  @apply relative flex flex-auto h-full;\n  @include word-break;\n}\n\n@media (forced-colors: active) {\n  /* use real border since box-shadow is removed in high contrast mode */\n  :host([open]) .calcite-dropdown-wrapper {\n    border: 1px solid canvasText;\n  }\n}\n\n// width\n:host([width-scale=\"s\"]) {\n  --calcite-dropdown-width: theme(\"spacing.48\");\n}\n:host([width-scale=\"m\"]) {\n  --calcite-dropdown-width: theme(\"spacing.56\");\n}\n:host([width-scale=\"l\"]) {\n  --calcite-dropdown-width: theme(\"spacing.64\");\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { ItemKeyboardEvent } from \"./interfaces\";\n\nimport {\n  focusElement,\n  focusElementInGroup,\n  isPrimaryPointerButton,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport {\n  connectFloatingUI,\n  defaultMenuPlacement,\n  disconnectFloatingUI,\n  EffectivePlacement,\n  filterComputedPlacements,\n  FloatingCSS,\n  FloatingUIComponent,\n  MenuPlacement,\n  OverlayPositioning,\n  reposition,\n} from \"../../utils/floating-ui\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { createObserver } from \"../../utils/observers\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { RequestedItem } from \"../dropdown-group/interfaces\";\nimport { Scale } from \"../interfaces\";\nimport { SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.\n * @slot trigger - A slot for the element that triggers the `calcite-dropdown`.\n */\n@Component({\n  tag: \"calcite-dropdown\",\n  styleUrl: \"dropdown.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Dropdown\n  implements InteractiveComponent, LoadableComponent, OpenCloseComponent, FloatingUIComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, displays and positions the component.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n\n    if (this.disabled) {\n      this.open = false;\n      return;\n    }\n\n    this.reposition(true);\n  }\n\n  /**\n   * When `true`, the component will remain open after a selection is made.\n   *\n   * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `\"none\"`, the component will always close.\n   *\n   */\n  @Prop({ reflect: true }) closeOnSelectDisabled = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  @Watch(\"disabled\")\n  handleDisabledChange(value: boolean): void {\n    if (!value) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Defines the available placements that can be used when a flip occurs.\n   */\n  @Prop() flipPlacements: EffectivePlacement[];\n\n  @Watch(\"flipPlacements\")\n  flipPlacementsHandler(): void {\n    this.setFilteredPlacements();\n    this.reposition(true);\n  }\n\n  /**\n   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.\n   * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.\n   */\n  @Prop({ reflect: true }) maxItems = 0;\n\n  @Watch(\"maxItems\")\n  maxItemsHandler(): void {\n    this.setMaxScrollerHeight();\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  @Watch(\"overlayPositioning\")\n  overlayPositioningHandler(): void {\n    this.reposition(true);\n  }\n\n  /**\n   * Determines where the component will be positioned relative to the container element.\n   *\n   * @default \"bottom-start\"\n   */\n  @Prop({ reflect: true }) placement: MenuPlacement = defaultMenuPlacement;\n\n  @Watch(\"placement\")\n  placementHandler(): void {\n    this.reposition(true);\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteDropdownItemElement[] = [];\n\n  /**\n   * Specifies the action to open the component from the container element.\n   */\n  @Prop({ reflect: true }) type: \"hover\" | \"click\" = \"click\";\n\n  /**\n   * Specifies the width of the component.\n   */\n  @Prop({ reflect: true }) widthScale: Scale;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  @Watch(\"scale\")\n  handlePropsChange(): void {\n    this.updateItems();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n    this.setFilteredPlacements();\n    this.reposition(true);\n    if (this.open) {\n      this.openHandler();\n      onToggleOpenCloseComponent(this);\n    }\n    connectInteractive(this);\n    this.updateItems();\n    connectFloatingUI(this, this.referenceEl, this.floatingEl);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.reposition(true);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    this.resizeObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);\n  }\n\n  render(): VNode {\n    const { open, guid } = this;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            class=\"calcite-trigger-container\"\n            id={`${guid}-menubutton`}\n            onClick={this.openCalciteDropdown}\n            onKeyDown={this.keyDownHandler}\n            // 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)\n            ref={this.setReferenceEl}\n          >\n            <slot\n              aria-controls={`${guid}-menu`}\n              aria-expanded={toAriaBoolean(open)}\n              aria-haspopup=\"menu\"\n              name={SLOTS.dropdownTrigger}\n              onSlotchange={this.updateTriggers}\n            />\n          </div>\n          <div\n            aria-hidden={toAriaBoolean(!open)}\n            class=\"calcite-dropdown-wrapper\"\n            // 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)\n            ref={this.setFloatingEl}\n          >\n            <div\n              aria-labelledby={`${guid}-menubutton`}\n              class={{\n                [\"calcite-dropdown-content\"]: true,\n                [FloatingCSS.animation]: true,\n                [FloatingCSS.animationActive]: open,\n              }}\n              id={`${guid}-menu`}\n              role=\"menu\"\n              // 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)\n              ref={this.setScrollerAndTransitionEl}\n            >\n              <slot onSlotchange={this.updateGroups} />\n            </div>\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Updates the position of the component.\n   *\n   * @param delayed\n   */\n  @Method()\n  async reposition(delayed = false): Promise<void> {\n    const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;\n\n    return reposition(\n      this,\n      {\n        floatingEl,\n        referenceEl,\n        overlayPositioning,\n        placement,\n        flipPlacements: filteredFlipPlacements,\n        type: \"menu\",\n      },\n      delayed\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when a `calcite-dropdown-item`'s selection changes. */\n  @Event({ cancelable: false }) calciteDropdownSelect: EventEmitter<void>;\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteDropdownBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteDropdownClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteDropdownBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteDropdownOpen: EventEmitter<void>;\n\n  @Listen(\"pointerdown\", { target: \"window\" })\n  closeCalciteDropdownOnClick(event: PointerEvent): void {\n    if (\n      this.disabled ||\n      !isPrimaryPointerButton(event) ||\n      !this.open ||\n      event.composedPath().includes(this.el)\n    ) {\n      return;\n    }\n\n    this.closeCalciteDropdown(false);\n  }\n\n  @Listen(\"calciteInternalDropdownCloseRequest\")\n  closeCalciteDropdownOnEvent(event: Event): void {\n    this.closeCalciteDropdown();\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteDropdownOpen\", { target: \"window\" })\n  closeCalciteDropdownOnOpenEvent(event: Event): void {\n    if (event.composedPath().includes(this.el)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  @Listen(\"pointerenter\")\n  pointerEnterHandler(): void {\n    if (this.disabled || this.type !== \"hover\") {\n      return;\n    }\n\n    this.openCalciteDropdown();\n  }\n\n  @Listen(\"pointerleave\")\n  pointerLeaveHandler(): void {\n    if (this.disabled || this.type !== \"hover\") {\n      return;\n    }\n\n    this.closeCalciteDropdown();\n  }\n\n  private getTraversableItems(): HTMLCalciteDropdownItemElement[] {\n    return this.items.filter((item) => !item.disabled && !item.hidden);\n  }\n\n  @Listen(\"calciteInternalDropdownItemKeyEvent\")\n  calciteInternalDropdownItemKeyEvent(event: CustomEvent<ItemKeyboardEvent>): void {\n    const { keyboardEvent } = event.detail;\n    const target = keyboardEvent.target as HTMLCalciteDropdownItemElement;\n    const traversableItems = this.getTraversableItems();\n\n    switch (keyboardEvent.key) {\n      case \"Tab\":\n        this.open = false;\n        this.updateTabIndexOfItems(target);\n        break;\n      case \"ArrowDown\":\n        focusElementInGroup(traversableItems, target, \"next\");\n        break;\n      case \"ArrowUp\":\n        focusElementInGroup(traversableItems, target, \"previous\");\n        break;\n      case \"Home\":\n        focusElementInGroup(traversableItems, target, \"first\");\n        break;\n      case \"End\":\n        focusElementInGroup(traversableItems, target, \"last\");\n        break;\n    }\n\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalDropdownItemSelect\")\n  handleItemSelect(event: CustomEvent<RequestedItem>): void {\n    this.updateSelectedItems();\n    event.stopPropagation();\n    this.calciteDropdownSelect.emit();\n    if (\n      !this.closeOnSelectDisabled ||\n      event.detail.requestedDropdownGroup.selectionMode === \"none\"\n    ) {\n      this.closeCalciteDropdown();\n    }\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteDropdownElement;\n\n  filteredFlipPlacements: EffectivePlacement[];\n\n  private items: HTMLCalciteDropdownItemElement[] = [];\n\n  private groups: HTMLCalciteDropdownGroupElement[] = [];\n\n  /** trigger elements */\n  private triggers: HTMLElement[];\n\n  floatingEl: HTMLDivElement;\n\n  referenceEl: HTMLDivElement;\n\n  private scrollerEl: HTMLDivElement;\n\n  mutationObserver = createObserver(\"mutation\", () => this.updateItems());\n\n  resizeObserver = createObserver(\"resize\", (entries) => this.resizeObserverCallback(entries));\n\n  openTransitionProp = \"opacity\";\n\n  transitionEl: HTMLDivElement;\n\n  guid = `calcite-dropdown-${guid()}`;\n\n  defaultAssignedElements: Element[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  slotChangeHandler = (event: Event): void => {\n    this.defaultAssignedElements = (event.target as HTMLSlotElement).assignedElements({\n      flatten: true,\n    });\n\n    this.updateItems();\n  };\n\n  setFilteredPlacements = (): void => {\n    const { el, flipPlacements } = this;\n\n    this.filteredFlipPlacements = flipPlacements\n      ? filterComputedPlacements(flipPlacements, el)\n      : null;\n  };\n\n  updateTriggers = (event: Event): void => {\n    this.triggers = (event.target as HTMLSlotElement).assignedElements({\n      flatten: true,\n    }) as HTMLElement[];\n\n    this.reposition(true);\n  };\n\n  updateItems = (): void => {\n    this.items = this.groups\n      .map((group) => Array.from(group?.querySelectorAll(\"calcite-dropdown-item\")))\n      .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);\n\n    this.updateSelectedItems();\n\n    this.reposition(true);\n\n    this.items.forEach((item) => (item.scale = this.scale));\n  };\n\n  updateGroups = (event: Event): void => {\n    const groups = (event.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-dropdown-group\")) as HTMLCalciteDropdownGroupElement[];\n\n    this.groups = groups;\n\n    this.updateItems();\n  };\n\n  resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {\n    entries.forEach((entry) => {\n      const { target } = entry;\n      if (target === this.referenceEl) {\n        this.setDropdownWidth();\n      } else if (target === this.scrollerEl) {\n        this.setMaxScrollerHeight();\n      }\n    });\n  };\n\n  setDropdownWidth = (): void => {\n    const { referenceEl, scrollerEl } = this;\n    const referenceElWidth = referenceEl?.clientWidth;\n\n    if (!referenceElWidth || !scrollerEl) {\n      return;\n    }\n\n    scrollerEl.style.minWidth = `${referenceElWidth}px`;\n  };\n\n  setMaxScrollerHeight = (): void => {\n    const { scrollerEl } = this;\n    if (!scrollerEl) {\n      return;\n    }\n\n    this.reposition(true);\n    const maxScrollerHeight = this.getMaxScrollerHeight();\n    scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : \"\";\n    this.reposition(true);\n  };\n\n  setScrollerAndTransitionEl = (el: HTMLDivElement): void => {\n    this.resizeObserver.observe(el);\n    this.scrollerEl = el;\n\n    this.transitionEl = el;\n  };\n\n  onBeforeOpen(): void {\n    this.calciteDropdownBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteDropdownOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteDropdownBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteDropdownClose.emit();\n  }\n\n  setReferenceEl = (el: HTMLDivElement): void => {\n    this.referenceEl = el;\n    connectFloatingUI(this, this.referenceEl, this.floatingEl);\n    this.resizeObserver.observe(el);\n  };\n\n  setFloatingEl = (el: HTMLDivElement): void => {\n    this.floatingEl = el;\n    connectFloatingUI(this, this.referenceEl, this.floatingEl);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (!event.composedPath().includes(this.referenceEl)) {\n      return;\n    }\n\n    const { defaultPrevented, key } = event;\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    if (this.open) {\n      if (key === \"Escape\") {\n        this.closeCalciteDropdown();\n        event.preventDefault();\n        return;\n      } else if (event.shiftKey && key === \"Tab\") {\n        this.closeCalciteDropdown();\n        event.preventDefault();\n        return;\n      }\n    }\n\n    if (isActivationKey(key)) {\n      this.openCalciteDropdown();\n      event.preventDefault();\n    } else if (key === \"Escape\") {\n      this.closeCalciteDropdown();\n      event.preventDefault();\n    }\n  };\n\n  private updateSelectedItems(): void {\n    this.selectedItems = this.items.filter((item) => item.selected);\n  }\n\n  private getMaxScrollerHeight(): number {\n    const { maxItems, items } = this;\n    let itemsToProcess = 0;\n    let maxScrollerHeight = 0;\n    let groupHeaderHeight: number;\n\n    this.groups.forEach((group) => {\n      if (maxItems > 0 && itemsToProcess < maxItems) {\n        Array.from(group.children).forEach((item: HTMLCalciteDropdownItemElement, index) => {\n          if (index === 0) {\n            if (isNaN(groupHeaderHeight)) {\n              groupHeaderHeight = item.offsetTop;\n            }\n\n            maxScrollerHeight += groupHeaderHeight;\n          }\n\n          if (itemsToProcess < maxItems) {\n            maxScrollerHeight += item.offsetHeight;\n            itemsToProcess += 1;\n          }\n        });\n      }\n    });\n\n    return items.length > maxItems ? maxScrollerHeight : 0;\n  }\n\n  private closeCalciteDropdown(focusTrigger = true) {\n    this.open = false;\n\n    if (focusTrigger) {\n      focusElement(this.triggers[0]);\n    }\n  }\n\n  private focusOnFirstActiveOrFirstItem = (): void => {\n    this.getFocusableElement(\n      this.getTraversableItems().find((item) => item.selected) || this.items[0]\n    );\n  };\n\n  private getFocusableElement(item: HTMLCalciteDropdownItemElement): void {\n    if (!item) {\n      return;\n    }\n\n    focusElement(item);\n  }\n\n  private toggleOpenEnd = (): void => {\n    this.focusOnFirstActiveOrFirstItem();\n    this.el.removeEventListener(\"calciteDropdownOpen\", this.toggleOpenEnd);\n  };\n\n  private openCalciteDropdown = () => {\n    this.open = !this.open;\n    if (this.open) {\n      this.el.addEventListener(\"calciteDropdownOpen\", this.toggleOpenEnd);\n    }\n  };\n\n  private updateTabIndexOfItems(target: HTMLCalciteDropdownItemElement): void {\n    this.items.forEach((item: HTMLCalciteDropdownItemElement) => {\n      item.tabIndex = target !== item ? -1 : 0;\n    });\n  }\n}\n"],"version":3}

package/dist/components/el.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-au.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-ca.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/en-gb.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/es-mx.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/es.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/et.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/fi.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/filter.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.1
  */
 import { a as isSymbol, S as Symbol, i as isObject, b as baseGetTag, c as isObjectLike, r as root, f as freeGlobal } from './debounce.js';
 

package/dist/components/filter2.js

@@ -1,11 +1,11 @@
 /*!
  * 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.2.0-next.0
+ * v2.2.0-next.1
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { f as filter } from './filter.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n.js';
@@ -25,7 +25,7 @@ const ICONS = {
 };
 const DEBOUNCE_TIMEOUT = 250;
 
-const filterCss = ":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([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-color-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-color-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-color-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
+const filterCss = ":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([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-color-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-color-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-color-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement {
     constructor() {
@@ -146,7 +146,7 @@ const Filter = /*@__PURE__*/ proxyCustomElement(class Filter extends HTMLElement
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (h(Fragment, null, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+        return (h(InteractiveContainer, { disabled: disabled }, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { clearable: true, disabled: disabled, icon: ICONS.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
             // 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: (el) => {
                 this.textInput = el;