@esri/solutions-components 0.10.4 → 0.10.6

package/dist/cjs/calcite-color-picker.cjs.entry.js

@@ -8,19 +8,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const utils = require('./utils-fc413133.js');
-const dom = require('./dom-93443cc1.js');
-const interactive = require('./interactive-c120e7de.js');
-const key = require('./key-f95b815e.js');
-const loadable = require('./loadable-52223908.js');
-const locale = require('./locale-4d226d16.js');
-const math = require('./math-fb91def5.js');
-const t9n = require('./t9n-d102c87b.js');
+const utils = require('./utils-42df996f.js');
+const dom = require('./dom-63b93b3b.js');
+const interactive = require('./interactive-272b8484.js');
+const key = require('./key-e4dd32ff.js');
+const loadable = require('./loadable-ef8f0acf.js');
+const locale = require('./locale-428354f0.js');
+const math = require('./math-8677dfd7.js');
+const t9n = require('./t9n-e5fb720b.js');
 const throttle = require('./throttle-fe6b54a3.js');
-require('./guid-9a92730c.js');
-require('./resources-543ff11e.js');
-require('./browser-9f13ebb0.js');
-require('./observers-304eec4e.js');
+require('./guid-4bc1bc0f.js');
+require('./resources-8556a9ce.js');
+require('./browser-02cbd1d9.js');
+require('./observers-3440c668.js');
 require('./debounce-7f1e04d6.js');
 
 const colorPickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, 32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:6px}.hex-and-channels-group{inline-size:100%}.hex-and-channels-group,.control-section{display:flex;flex-direction:row;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-text-1)}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex;row-gap:0.125rem}.channel[data-channel-index=\"3\"]{inline-size:159px}:host([scale=s]) .channels{flex-wrap:wrap}:host([scale=s]) .channel{flex-basis:30%;flex-grow:1}:host([scale=s]) .channel[data-channel-index=\"3\"]{inline-size:unset;margin-inline-start:unset}:host([scale=l]) .channel[data-channel-index=\"3\"]{inline-size:131px}.saved-colors{display:grid;gap:0.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill, 24px)}.saved-colors-buttons{display:flex}.saved-color{outline-offset:0;outline-color:transparent;cursor:pointer}.saved-color:focus{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.saved-color:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-color-border-2);outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
@@ -33,8 +33,10 @@ const ColorPicker = class {
         this.calciteColorPickerChange = index.createEvent(this, "calciteColorPickerChange", 6);
         this.calciteColorPickerInput = index.createEvent(this, "calciteColorPickerInput", 6);
         this.internalColorUpdateContext = null;
+        this.isActiveChannelInputEmpty = false;
         this.mode = utils.CSSColorMode.HEX;
         this.shiftKeyChannelAdjustment = 0;
+        this.upOrDownArrowKeyTracker = null;
         this.handleTabActivate = (event) => {
             this.channelMode = event.currentTarget.getAttribute("data-color-mode");
             this.updateChannelsFromColor(this.color);
@@ -98,8 +100,11 @@ const ColorPicker = class {
                     ? utils.RGB_LIMITS[Object.keys(utils.RGB_LIMITS)[channelIndex]]
                     : utils.HSV_LIMITS[Object.keys(utils.HSV_LIMITS)[channelIndex]];
             let inputValue;
-            if (this.isClearable && !input.value) {
+            if (!input.value) {
                 inputValue = "";
+                this.isActiveChannelInputEmpty = true;
+                // reset this to allow typing in new value, when channel input is cleared after ArrowUp or ArrowDown have been pressed
+                this.upOrDownArrowKeyTracker = null;
             }
             else {
                 const value = Number(input.value);
@@ -112,6 +117,22 @@ const ColorPicker = class {
                 // we treat nudging as a change event since the input won't emit when modifying the value directly
                 this.handleChannelChange(event);
             }
+            else if (inputValue !== "") {
+                this.handleChannelChange(event);
+            }
+        };
+        this.handleChannelBlur = (event) => {
+            const input = event.currentTarget;
+            const channelIndex = Number(input.getAttribute("data-channel-index"));
+            const channels = [...this.channels];
+            const restoreValueDueToEmptyInput = !input.value && !this.isClearable;
+            if (restoreValueDueToEmptyInput) {
+                input.value = channels[channelIndex]?.toString();
+            }
+        };
+        this.handleChannelFocus = (event) => {
+            const input = event.currentTarget;
+            input.selectText();
         };
         this.handleChannelChange = (event) => {
             const input = event.currentTarget;
@@ -124,7 +145,17 @@ const ColorPicker = class {
                 return;
             }
             const isAlphaChannel = channelIndex === 3;
-            const value = Number(input.value);
+            if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {
+                input.value =
+                    this.upOrDownArrowKeyTracker === "up"
+                        ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex)
+                            ? channels[channelIndex] + 1
+                            : this.getChannelInputLimit(channelIndex)).toString()
+                        : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();
+                this.isActiveChannelInputEmpty = false;
+                this.upOrDownArrowKeyTracker = null;
+            }
+            const value = input.value ? Number(input.value) : channels[channelIndex];
             channels[channelIndex] = isAlphaChannel ? utils.opacityToAlpha(value) : value;
             this.updateColorFromChannels(channels);
         };
@@ -146,7 +177,7 @@ const ColorPicker = class {
                 bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureColorFieldColor(offsetX, offsetY);
-            this.colorFieldScopeNode.focus();
+            this.focusScope(this.colorFieldScopeNode);
         };
         this.handleHueSliderPointerDown = (event) => {
             if (!dom.isPrimaryPointerButton(event)) {
@@ -160,7 +191,7 @@ const ColorPicker = class {
                 bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureHueSliderColor(offsetX);
-            this.hueScopeNode.focus();
+            this.focusScope(this.hueScopeNode);
         };
         this.handleOpacitySliderPointerDown = (event) => {
             if (!dom.isPrimaryPointerButton(event)) {
@@ -174,7 +205,7 @@ const ColorPicker = class {
                 bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureOpacitySliderValue(offsetX);
-            this.opacityScopeNode.focus();
+            this.focusScope(this.opacityScopeNode);
         };
         this.globalPointerUpHandler = (event) => {
             if (!dom.isPrimaryPointerButton(event)) {
@@ -263,7 +294,7 @@ const ColorPicker = class {
             }))));
         };
         this.renderChannel = (value, index$1, ariaLabel, direction, suffix) => {
-            return (index.h("calcite-input-number", { class: utils.CSS.channel, "data-channel-index": index$1, dir: direction, key: index$1, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
+            return (index.h("calcite-input-number", { class: utils.CSS.channel, "data-channel-index": index$1, dir: direction, key: index$1, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onCalciteInternalInputNumberBlur: this.handleChannelBlur, onCalciteInternalInputNumberFocus: this.handleChannelFocus, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
                 // workaround to ensure input borders overlap as desired
                 // this is because the build transforms margin-left to its
                 // logical-prop, which is undesired as channels are always ltr
@@ -479,6 +510,22 @@ const ColorPicker = class {
                 : key === "ArrowDown" && shiftKey
                     ? -complementaryBump
                     : 0;
+        if (key === "ArrowUp") {
+            this.upOrDownArrowKeyTracker = "up";
+        }
+        if (key === "ArrowDown") {
+            this.upOrDownArrowKeyTracker = "down";
+        }
+    }
+    getChannelInputLimit(channelIndex) {
+        return this.channelMode === "rgb"
+            ? utils.RGB_LIMITS[Object.keys(utils.RGB_LIMITS)[channelIndex]]
+            : utils.HSV_LIMITS[Object.keys(utils.HSV_LIMITS)[channelIndex]];
+    }
+    focusScope(focusEl) {
+        requestAnimationFrame(() => {
+            focusEl.focus();
+        });
     }
     //--------------------------------------------------------------------------
     //
@@ -488,7 +535,7 @@ const ColorPicker = class {
     /** Sets focus on the component's first focusable element. */
     async setFocus() {
         await loadable.componentFocusable(this);
-        this.el.focus();
+        dom.focusFirstTabbable(this.el);
     }
     //--------------------------------------------------------------------------
     //
@@ -556,10 +603,10 @@ const ColorPicker = class {
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (index.h(interactive.InteractiveContainer, { key: 'ed8d6d887db9dc3d3e345b52b290094bde5541a8', disabled: this.disabled }, index.h("div", { key: '06f7fc8c31b3165de13f20219d7c138f162e059d', class: utils.CSS.container }, index.h("div", { key: '79d751d245545fe729cb62660436ac67589a4be8', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '6fa2716d392b2f41f7c96e21d6e30c7738df4191', class: utils.CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), index.h("div", { key: 'c51f4c15946f87bb71674c3aadd024cbd7514d55', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? utils.HSV_LIMITS.v : utils.HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [utils.CSS.scope]: true, [utils.CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (index.h(interactive.InteractiveContainer, { key: '3fdda1fd2366d3ffb3405dfa28a8424d78586a61', disabled: this.disabled }, index.h("div", { key: 'b3e95f63a7b4a9f49587fa458bf663cf82ff6961', class: utils.CSS.container }, index.h("div", { key: '5770ab5094e87956f0f8a49e16f1a9418cc6e7ff', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '3773e30ddb17777a93b6091e4accc71e890f8cbb', class: utils.CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), index.h("div", { key: '66dfba03f7a7e35f50c1fc0f23ccb0c0cf91c247', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? utils.HSV_LIMITS.v : utils.HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [utils.CSS.scope]: true, [utils.CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), index.h("div", { key: '6f93b38c9b16234cd5bd68edbc6c44ed4351fab4', class: utils.CSS.previewAndSliders }, index.h("calcite-color-picker-swatch", { key: 'dd12a18e453040e5af19c1e37ccbec3573cfd06b', class: utils.CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), index.h("div", { key: 'cf3b9c928b0d43f912726d13b584afd90f028aa5', class: utils.CSS.sliders }, index.h("div", { key: '77906dfdb66f64405ae2a62c942064d66eccf22d', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '1b8ed2fd600e16ddd34c3e3d97ee7c3c3fc21125', class: { [utils.CSS.slider]: true, [utils.CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), index.h("div", { key: '73cb98a5adfd188433c434c0f832ac660f00966f', "aria-label": messages.hue, "aria-valuemax": utils.HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || utils.DEFAULT_COLOR.round().hue(), class: { [utils.CSS.scope]: true, [utils.CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), index.h("div", { key: '61100b2e5e07a647b75641afe11e7dcfb6df3dd1', class: utils.CSS.previewAndSliders }, index.h("calcite-color-picker-swatch", { key: '3fd47b8fb737f322646f136a22ec5281c12dcdcb', class: utils.CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), index.h("div", { key: 'df7ed65ad05057a4a8c81239f1dc2f3341ea18fb', class: utils.CSS.sliders }, index.h("div", { key: '5bc288a2e4da751f6e4a1b3a1b0b1294c6421306', class: utils.CSS.controlAndScope }, index.h("canvas", { key: 'b350822aefb25ca6521d21a376c59885666798c5', class: { [utils.CSS.slider]: true, [utils.CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), index.h("div", { key: '5ba9570cb05da8620030918757acd21b57c844eb', "aria-label": messages.hue, "aria-valuemax": utils.HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || utils.DEFAULT_COLOR.round().hue(), class: { [utils.CSS.scope]: true, [utils.CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (index.h("div", { class: utils.CSS.controlAndScope }, index.h("canvas", { class: { [utils.CSS.slider]: true, [utils.CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), index.h("div", { "aria-label": messages.opacity, "aria-valuemax": utils.OPACITY_LIMITS.max, "aria-valuemin": utils.OPACITY_LIMITS.min, "aria-valuenow": (color || utils.DEFAULT_COLOR).round().alpha(), class: { [utils.CSS.scope]: true, [utils.CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
@@ -902,7 +949,6 @@ const ColorPicker = class {
     getAdjustedScopePosition(left, top) {
         return [left - utils.SCOPE_SIZE / 2, top - utils.SCOPE_SIZE / 2];
     }
-    static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/calcite-combobox-item-group.cjs.entry.js

@@ -8,15 +8,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const guid = require('./guid-9a92730c.js');
-const utils = require('./utils-292c3e9a.js');
-require('./dom-93443cc1.js');
-require('./resources-543ff11e.js');
+const guid = require('./guid-4bc1bc0f.js');
+const utils = require('./utils-3f254442.js');
+require('./dom-63b93b3b.js');
+require('./resources-8556a9ce.js');
+require('./browser-02cbd1d9.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     list: "list",
@@ -52,7 +53,7 @@ const ComboboxItemGroup = class {
     render() {
         const { el, scale } = this;
         const depth = utils.getDepth(el);
-        return (index.h("ul", { key: 'f97f7287323229be32779d451a7e816b016c02b4', "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, index.h("li", { key: 'e7aa9b0a2955562d9687c294b3b39eafbd04c5a2', class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("span", { key: '5b02b92d24c05a93a5aeeda140f7422c50fb52b0', class: CSS.title }, this.label)), index.h("slot", { key: '1a2e106d97304df29b2cbf5841e65726e55960ae' })));
+        return (index.h("ul", { key: 'e57f7805f680b7d8b89f1f72c98197d81ad743dd', "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, index.h("li", { key: '45ab46a79eb035a0785ea9d2665a3fce8cf7c183', class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("span", { key: '380bfd8d85a132df1252e88971adca1b50104801', class: CSS.title }, this.label)), index.h("slot", { key: 'e0fd9bec45fc259ee2b439a0b80665c742fb5632' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -9,31 +9,31 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
 const core = require('./core-7f0bcc12.js');
-const filter = require('./filter-10b497bc.js');
-const dom = require('./dom-93443cc1.js');
-const floatingUi = require('./floating-ui-c597830e.js');
-const form = require('./form-e3e6f1e0.js');
-const guid = require('./guid-9a92730c.js');
-const interactive = require('./interactive-c120e7de.js');
-const label = require('./label-c4d636db.js');
-const loadable = require('./loadable-52223908.js');
-const locale = require('./locale-4d226d16.js');
-const observers = require('./observers-304eec4e.js');
-const openCloseComponent = require('./openCloseComponent-7cf2d6c4.js');
-const t9n = require('./t9n-d102c87b.js');
-const component = require('./component-8ff3f229.js');
-const Validation = require('./Validation-29123fe7.js');
-const utils = require('./utils-292c3e9a.js');
+const filter = require('./filter-adc5c5aa.js');
+const dom = require('./dom-63b93b3b.js');
+const floatingUi = require('./floating-ui-1ef64f13.js');
+const form = require('./form-4c0bbbe5.js');
+const guid = require('./guid-4bc1bc0f.js');
+const interactive = require('./interactive-272b8484.js');
+const label = require('./label-afda7da7.js');
+const loadable = require('./loadable-ef8f0acf.js');
+const locale = require('./locale-428354f0.js');
+const observers = require('./observers-3440c668.js');
+const openCloseComponent = require('./openCloseComponent-f9bf524b.js');
+const resources = require('./resources-8556a9ce.js');
+const t9n = require('./t9n-e5fb720b.js');
+const component = require('./component-9d0efa36.js');
+const Validation = require('./Validation-a9d22fb7.js');
+const utils = require('./utils-3f254442.js');
 const debounce = require('./debounce-7f1e04d6.js');
-const key = require('./key-f95b815e.js');
-const math = require('./math-fb91def5.js');
-require('./resources-543ff11e.js');
-require('./browser-9f13ebb0.js');
+const key = require('./key-e4dd32ff.js');
+const math = require('./math-8677dfd7.js');
+require('./browser-02cbd1d9.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS$1 = {
     button: "x-button",
@@ -363,7 +363,7 @@ const Combobox = class {
                 if (emit) {
                     this.calciteComboboxFilterChange.emit();
                 }
-            }, 100);
+            }, resources.DEBOUNCE.filter);
         })();
         this.internalComboboxChangeEvent = () => {
             this.calciteComboboxChange.emit();
@@ -415,7 +415,7 @@ const Combobox = class {
             if (!activeItem) {
                 return;
             }
-            const height = this.calculateSingleItemHeight(activeItem);
+            const height = this.calculateScrollerHeight(activeItem);
             const { offsetHeight, scrollTop } = this.listContainerEl;
             if (offsetHeight + scrollTop < activeItem.offsetTop + height) {
                 this.listContainerEl.scrollTop = activeItem.offsetTop - offsetHeight + height;
@@ -747,8 +747,8 @@ const Combobox = class {
         let maxScrollerHeight = 0;
         if (items.length > maxItems) {
             items.forEach((item) => {
-                if (itemsToProcess < maxItems && maxItems > 0) {
-                    const height = this.calculateSingleItemHeight(item);
+                if (itemsToProcess < maxItems) {
+                    const height = this.calculateScrollerHeight(item);
                     if (height > 0) {
                         maxScrollerHeight += height;
                         itemsToProcess++;
@@ -758,19 +758,14 @@ const Combobox = class {
         }
         return maxScrollerHeight;
     }
-    calculateSingleItemHeight(item) {
+    calculateScrollerHeight(item) {
         if (!item) {
             return;
         }
-        let height = item.offsetHeight;
         // if item has children items, don't count their height twice
-        const children = Array.from(item.querySelectorAll(utils.ComboboxChildSelector));
-        children
-            .map((child) => child?.offsetHeight)
-            .forEach((offsetHeight) => {
-            height -= offsetHeight;
-        });
-        return height;
+        const parentHeight = item.getBoundingClientRect().height;
+        const childrenTotalHeight = Array.from(item.querySelectorAll(utils.ComboboxChildSelector)).reduce((total, child) => total + child.getBoundingClientRect().height, 0);
+        return parentHeight - childrenTotalHeight;
     }
     getItemsAndGroups() {
         return [...this.groupItems, ...this.items];
@@ -795,7 +790,7 @@ const Combobox = class {
             this.selectedItems = this.getSelectedItems();
             this.emitComboboxChange();
             if (this.textInput) {
-                this.textInput.value = item.textLabel;
+                this.textInput.value = utils.getLabel(item);
             }
             this.open = false;
             this.updateActiveItemIndex(-1);
@@ -828,9 +823,12 @@ const Combobox = class {
     }
     getData() {
         return this.items.map((item) => ({
+            description: item.description,
             filterDisabled: item.filterDisabled,
-            value: item.value,
             label: item.textLabel,
+            metadata: item.metadata,
+            shortHeading: item.shortHeading,
+            value: item.value,
         }));
     }
     getNeedsIcon() {
@@ -862,7 +860,7 @@ const Combobox = class {
             item.value = value;
             item.textLabel = value;
             item.selected = true;
-            this.el.appendChild(item);
+            this.el.prepend(item);
             this.resetText();
             if (focus) {
                 this.setFocus();
@@ -950,9 +948,10 @@ const Combobox = class {
                 "chip--active": activeChipIndex === i,
             };
             const ancestors = [...utils.getItemAncestors(item)].reverse();
-            const pathLabel = [...ancestors, item].map((el) => el.textLabel);
-            const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-            return (index.h("calcite-chip", { appearance: readOnly ? "outline" : "solid", class: chipClasses, closable: !readOnly, "data-test-id": `chip-${i}`, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: item.textLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), onFocusin: () => (this.activeChipIndex = i), scale: scale, selected: item.selected, tabindex: activeChipIndex === i ? 0 : -1, title: label, value: item.value }, label));
+            const itemLabel = utils.getLabel(item);
+            const pathLabel = [...ancestors, item].map((el) => utils.getLabel(el));
+            const label = selectionMode !== "ancestors" ? itemLabel : pathLabel.join(" / ");
+            return (index.h("calcite-chip", { appearance: readOnly ? "outline" : "solid", class: chipClasses, closable: !readOnly, "data-test-id": `chip-${i}`, icon: item.icon, iconFlipRtl: item.iconFlipRtl, id: item.guid ? `${chipUidPrefix}${item.guid}` : null, key: itemLabel, messageOverrides: { dismissLabel: messages.removeTag }, onCalciteChipClose: () => this.calciteChipCloseHandler(item), onFocusin: () => (this.activeChipIndex = i), scale: scale, selected: item.selected, tabindex: activeChipIndex === i ? 0 : -1, title: label, value: item.value }, label));
         });
     }
     renderAllSelectedIndicatorChip() {
@@ -1056,7 +1055,7 @@ const Combobox = class {
             } }, showLabel && (index.h("span", { class: {
                 label: true,
                 "label--icon": !!selectedItem?.icon,
-            }, key: "label" }, selectedItem.textLabel)), index.h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": label.getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+            }, key: "label" }, utils.getLabel(selectedItem))), index.h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": label.getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
                 [utils.CSS.input]: true,
                 "input--single": true,
                 "input--hidden": showLabel,
@@ -1095,7 +1094,7 @@ const Combobox = class {
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && this.value?.length > 0;
-        return (index.h(index.Host, { key: '5739c3eb227fac2bcdf172f18cfa6c30f8e45534', onClick: this.comboboxFocusHandler }, index.h(interactive.InteractiveContainer, { key: '44b8d3b17184826dcc4777cc1c51bb36ade6c6bd', disabled: this.disabled }, index.h("div", { key: 'd60f216956651cf01f03b99127a9c580458240cf', "aria-live": "polite", class: {
+        return (index.h(index.Host, { key: 'c51466b3ff7d6aaf29578ba9a017cab02b49d704', onClick: this.comboboxFocusHandler }, index.h(interactive.InteractiveContainer, { key: '5c1e3383be919a3348677607b46f79a8baefeee7', disabled: this.disabled }, index.h("div", { key: 'ffb0ee17748ed4827cfca2c8aea8f39fc82a05cc', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
@@ -1109,7 +1108,7 @@ const Combobox = class {
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], index.h("label", { key: '0a225198d2f83bbabef5933e85bf4762cdd435d7', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (index.h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), index.h("ul", { key: '09bd11c770c043dab5028a004fc8c457e1452dc8', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), index.h(form.HiddenFormInputSlot, { key: '157c1c6a024eeabea1692427da36e8c4f7fd45a9', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], index.h("label", { key: 'd60ddc1697b80245c56fd7b553408beb21296b3d', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (index.h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), index.h("ul", { key: '856e6f4bd4fcf6db32fb6e8d984fcdb7c4776448', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), index.h(form.HiddenFormInputSlot, { key: 'eca6c0108b0fbb8e6851c6cc86d15dc70318a4a3', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -1133,7 +1132,7 @@ Combobox.style = CalciteComboboxStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 /**
  * Calculate slope of the tangents
@@ -1344,7 +1343,7 @@ Graph.style = CalciteGraphStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     container: "container",
@@ -1376,7 +1375,7 @@ const CSS = {
 };
 const maxTickElementThreshold = 250;
 
-const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise::after,.thumb:focus.thumb--precise::after,.thumb--active.thumb--precise::after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range::after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteSliderStyle0 = sliderCss;
 
 function isRange(value) {
@@ -1660,11 +1659,11 @@ const Slider = class {
                         left: `${mirror ? 100 - maxInterval : minInterval}%`,
                         right: `${mirror ? minInterval : 100 - maxInterval}%`,
                     };
-        return (index.h(index.Host, { key: '1e191b2451f079a5db30b7cc042943453c44f56a', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { key: '140dd6f95d439e9bf8fd13d6c797fbbba8ae4d24', disabled: this.disabled }, index.h("div", { key: '2f6d8f2f6d32618db387dd01b1b3c21e93e619b2', "aria-label": label.getLabelText(this), class: {
+        return (index.h(index.Host, { key: '345553b84f2336fe5a98bb2b3050d137130c41ef', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { key: '0d9db31db94152095071d9ff40dbf3cf8ba685d6', disabled: this.disabled }, index.h("div", { key: '767ab1401000b02717013231c935fe1747def1b3', "aria-label": label.getLabelText(this), class: {
                 [CSS.container]: true,
                 [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), index.h("div", { key: 'd7bff8e4d6104f4db91a7f28f5945740216c27e9', class: CSS.track, ref: this.storeTrackRef }, index.h("div", { key: 'bc6095af9daf55093dc10afda224182d6170ee14', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), index.h("div", { key: 'e814211cf1dba7b462d6c91e2fa2f62d48615599', class: CSS.ticks }, this.tickValues.map((tick) => {
+            } }, this.renderGraph(), index.h("div", { key: '1a104ad97079f71d37efea9d933f364520d49397', class: CSS.track, ref: this.storeTrackRef }, index.h("div", { key: '84f8033505dc0f373a0d19a641886e49ca4fe732', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), index.h("div", { key: '79f89b93a6acbb05ffce09bd2aa34ef134b3e219', class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = false;
             if (fillPlacement === "start" || fillPlacement === "end") {
@@ -1684,7 +1683,7 @@ const Slider = class {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), index.h("div", { key: 'e4c936b67116dd415a9c6c950afba446fb025128', class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { key: 'fa431ec11ffab1b639e1f4aeef31937661b27089', component: this }))))));
+        }))), index.h("div", { key: '9bc6ea406e2036adb87da4a6053533283434864d', class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { key: 'c13236898b527a1ffc058914fe87e6004b93aaf5', component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");

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

@@ -8,20 +8,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-696e53e6.js');
-const date = require('./date-7163204c.js');
-const dom = require('./dom-93443cc1.js');
-const interactive = require('./interactive-c120e7de.js');
-const key = require('./key-f95b815e.js');
-const locale = require('./locale-4d226d16.js');
-const loadable = require('./loadable-52223908.js');
-const Heading = require('./Heading-97656cb9.js');
-const component = require('./component-8ff3f229.js');
-require('./guid-9a92730c.js');
-require('./resources-543ff11e.js');
-require('./browser-9f13ebb0.js');
-require('./observers-304eec4e.js');
+const date = require('./date-163d7302.js');
+const dom = require('./dom-63b93b3b.js');
+const interactive = require('./interactive-272b8484.js');
+const key = require('./key-e4dd32ff.js');
+const locale = require('./locale-428354f0.js');
+const loadable = require('./loadable-ef8f0acf.js');
+const Heading = require('./Heading-5b274572.js');
+const component = require('./component-9d0efa36.js');
+require('./guid-4bc1bc0f.js');
+require('./resources-8556a9ce.js');
+require('./browser-02cbd1d9.js');
+require('./observers-3440c668.js');
 
-const datePickerDayCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;cursor:pointer;color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-v-wrapper{flex:1 1 auto}.day-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}:host([range]) .day-wrapper:before,:host([range]) .day-wrapper:after,:host([range-hover]) .day-wrapper:before,:host([range-hover]) .day-wrapper:after{pointer-events:none;position:absolute;inset-block:0;content:\"\";block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.day{z-index:var(--calcite-z-index);display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:var(--calcite-font-size--2);line-height:1rem;line-height:1;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background:none;box-shadow:0 0 0 2px transparent;block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size:27px}:host([scale=s]) .day-v-wrapper{padding-block:0.125rem}:host([scale=s]) .day-wrapper{padding:0px}:host([scale=s]) .day{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-day-size:33px}:host([scale=m]) .day-v-wrapper{padding-block:0.25rem}:host([scale=m]) .day-wrapper{padding:0px}:host([scale=m]) .day{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-day-size:43px}:host([scale=l]) .day-v-wrapper{padding-block:0.25rem}:host([scale=l]) .day-wrapper{padding-inline:0.25rem}:host([scale=l]) .day{font-size:var(--calcite-font-size-0)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-disabled)}:host(:hover:not([disabled]):not([selected])) .day,:host([active]:not([range]):not([selected])) .day{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:focus),:host([active]){outline:2px solid transparent;outline-offset:2px}:host(:focus:not([disabled])) .day{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}:host(:focus:not([disabled])) .day,:host([start-of-range]:not(:focus)) .day,:host([end-of-range]:not(:focus)) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}:host([range-hover]:not([selected])) .day-wrapper:before,:host([highlighted]:not([selected])) .day-wrapper:before{inset-inline-end:50%;border-radius:0}:host([range-hover]:not([selected])) .day-wrapper:after,:host([highlighted]:not([selected])) .day-wrapper:after{inset-inline-start:50%;border-radius:0}:host([range-hover]:not([selected])) .day,:host([highlighted]:not([selected])) .day{color:var(--calcite-color-text-1)}:host([highlighted]) .day-wrapper:before,:host([highlighted]) .day-wrapper:after,:host([selected]:not(.hover--outside-range)) .day-wrapper:before,:host([selected]:not(.hover--outside-range)) .day-wrapper:after{background-color:var(--calcite-color-foreground-current)}:host([range-hover]:not([selected])) .day-wrapper:before,:host([range-hover]:not([selected])) .day-wrapper:after{background-color:var(--calcite-color-foreground-2)}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper:before,:host([highlighted][end-of-range]) .day-wrapper:before,:host([highlighted][range-edge=end]) .day-wrapper:before,:host([range-hover][range-edge=end]) .day-wrapper:before,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper:before{inset-inline-end:50%}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper:after,:host([highlighted][end-of-range]) .day-wrapper:after,:host([highlighted][range-edge=end]) .day-wrapper:after,:host([range-hover][range-edge=end]) .day-wrapper:after,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper:after{inset-inline-start:50%;border-start-end-radius:var(--calcite-internal-day-size);border-end-end-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper:before,:host([highlighted][range-edge=start]) .day-wrapper:before,:host([range-hover][range-edge=start]) .day-wrapper:before,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper:before,:host([start-of-range].hover--inside-range) .day-wrapper:before,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper:before{inset-inline-end:50%;border-start-start-radius:var(--calcite-internal-day-size);border-end-start-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper:after,:host([highlighted][range-edge=start]) .day-wrapper:after,:host([range-hover][range-edge=start]) .day-wrapper:after,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper:after,:host([start-of-range].hover--inside-range) .day-wrapper:after,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper:after{inset-inline-start:50%}:host([range-hover][start-of-range][range-edge=end]) .day-wrapper:after,:host([range-hover][start-of-range][range-edge=end]) .day-wrapper:before,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper:after,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper:before,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper:after,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper:before,:host([end-of-range]) .day-wrapper:after,:host([end-of-range]) .day-wrapper:before{content:unset}:host(:hover[range-hover]:not([selected]).focused--start) .day,:host(:hover[range-hover]:not([selected]).focused--end) .day,:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .day,:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){.day{border-radius:0px}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day-wrapper:before,:host([range][selected]) .day-wrapper:after,:host([highlighted]) .day-wrapper:before,:host([highlighted]) .day-wrapper:after,:host([range-hover]:not([selected])) .day-wrapper:before,:host([range-hover]:not([selected])) .day-wrapper:after{background-color:highlight}:host([range-hover]) .day-wrapper:before,:host([range-hover]) .day-wrapper:after,:host([range][selected][start-of-range]) .day-wrapper:before,:host([range][selected][start-of-range]) .day-wrapper:after,:host([range][selected][end-of-range]) .day-wrapper:before,:host([range][selected][end-of-range]) .day-wrapper:after{background-color:canvas}}:host([hidden]){display:none}[hidden]{display:none}";
+const datePickerDayCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;cursor:pointer;color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-v-wrapper{flex:1 1 auto}.day-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}:host([range]) .day-wrapper::before,:host([range]) .day-wrapper::after,:host([range-hover]) .day-wrapper::before,:host([range-hover]) .day-wrapper::after{pointer-events:none;position:absolute;inset-block:0;content:\"\";block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.day{z-index:var(--calcite-z-index);display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:var(--calcite-font-size--2);line-height:1rem;line-height:1;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background:none;box-shadow:0 0 0 2px transparent;block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.text{margin-block:1px 0px;margin-inline-start:0px}:host([scale=s]){--calcite-internal-day-size:27px}:host([scale=s]) .day-v-wrapper{padding-block:0.125rem}:host([scale=s]) .day-wrapper{padding:0px}:host([scale=s]) .day{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-day-size:33px}:host([scale=m]) .day-v-wrapper{padding-block:0.25rem}:host([scale=m]) .day-wrapper{padding:0px}:host([scale=m]) .day{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-day-size:43px}:host([scale=l]) .day-v-wrapper{padding-block:0.25rem}:host([scale=l]) .day-wrapper{padding-inline:0.25rem}:host([scale=l]) .day{font-size:var(--calcite-font-size-0)}:host(:not([current-month])) .day{opacity:var(--calcite-opacity-disabled)}:host(:hover:not([disabled]):not([selected])) .day,:host([active]:not([range]):not([selected])) .day{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:focus),:host([active]){outline:2px solid transparent;outline-offset:2px}:host(:focus:not([disabled])) .day{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([selected]) .day{font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-color-brand);color:var(--calcite-color-foreground-1)}:host(:focus:not([disabled])) .day,:host([start-of-range]:not(:focus)) .day,:host([end-of-range]:not(:focus)) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}:host([range-hover]:not([selected])) .day-wrapper::before,:host([highlighted]:not([selected])) .day-wrapper::before{inset-inline-end:50%;border-radius:0}:host([range-hover]:not([selected])) .day-wrapper::after,:host([highlighted]:not([selected])) .day-wrapper::after{inset-inline-start:50%;border-radius:0}:host([range-hover]:not([selected])) .day,:host([highlighted]:not([selected])) .day{color:var(--calcite-color-text-1)}:host([highlighted]) .day-wrapper::before,:host([highlighted]) .day-wrapper::after,:host([selected]:not(.hover--outside-range)) .day-wrapper::before,:host([selected]:not(.hover--outside-range)) .day-wrapper::after{background-color:var(--calcite-color-foreground-current)}:host([range-hover]:not([selected])) .day-wrapper::before,:host([range-hover]:not([selected])) .day-wrapper::after{background-color:var(--calcite-color-foreground-2)}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper::before,:host([highlighted][end-of-range]) .day-wrapper::before,:host([highlighted][range-edge=end]) .day-wrapper::before,:host([range-hover][range-edge=end]) .day-wrapper::before,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper::before{inset-inline-end:50%}:host(:hover[range-hover]:not([selected]).focused--end) .day-wrapper::after,:host([highlighted][end-of-range]) .day-wrapper::after,:host([highlighted][range-edge=end]) .day-wrapper::after,:host([range-hover][range-edge=end]) .day-wrapper::after,:host(:hover[range-hover].focused--end.hover--outside-range) .day-wrapper::after{inset-inline-start:50%;border-start-end-radius:var(--calcite-internal-day-size);border-end-end-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper::before,:host([highlighted][range-edge=start]) .day-wrapper::before,:host([range-hover][range-edge=start]) .day-wrapper::before,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper::before,:host([start-of-range].hover--inside-range) .day-wrapper::before,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper::before{inset-inline-end:50%;border-start-start-radius:var(--calcite-internal-day-size);border-end-start-radius:var(--calcite-internal-day-size);inline-size:calc(var(--calcite-internal-day-size) / 2)}:host([highlighted][start-of-range]) .day-wrapper::after,:host([highlighted][range-edge=start]) .day-wrapper::after,:host([range-hover][range-edge=start]) .day-wrapper::after,:host(:hover[range-hover]:not([selected]).focused--start) .day-wrapper::after,:host([start-of-range].hover--inside-range) .day-wrapper::after,:host(:hover[range-hover].focused--start.hover--outside-range) .day-wrapper::after{inset-inline-start:50%}:host([range-hover][start-of-range][range-edge=end]) .day-wrapper::after,:host([range-hover][start-of-range][range-edge=end]) .day-wrapper::before,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper::after,:host([range-hover][end-of-range][range-edge=start]) .day-wrapper::before,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper::after,:host([start-of-range][range-edge=end].hover--inside-range) .day-wrapper::before,:host([end-of-range]) .day-wrapper::after,:host([end-of-range]) .day-wrapper::before{content:unset}:host(:hover[range-hover]:not([selected]).focused--start) .day,:host(:hover[range-hover]:not([selected]).focused--end) .day,:host(:hover[range-hover]:not([selected]).focused--start.hover--outside-range) .day,:host(:hover[range-hover]:not([selected]).focused--end.hover--outside-range) .day{box-shadow:0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){.day{border-radius:0px}:host([selected]){outline:2px solid canvasText}:host(:hover:not([selected])) .day{border-radius:50%}:host([range][selected]) .day-wrapper::before,:host([range][selected]) .day-wrapper::after,:host([highlighted]) .day-wrapper::before,:host([highlighted]) .day-wrapper::after,:host([range-hover]:not([selected])) .day-wrapper::before,:host([range-hover]:not([selected])) .day-wrapper::after{background-color:highlight}:host([range-hover]) .day-wrapper::before,:host([range-hover]) .day-wrapper::after,:host([range][selected][start-of-range]) .day-wrapper::before,:host([range][selected][start-of-range]) .day-wrapper::after,:host([range][selected][end-of-range]) .day-wrapper::before,:host([range][selected][end-of-range]) .day-wrapper::after{background-color:canvas}}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteDatePickerDayStyle0 = datePickerDayCss;
 
 const DatePickerDay = class {
@@ -101,7 +101,7 @@ const DatePickerDay = class {
         }
         const formattedDay = locale.numberStringFormatter.localize(String(this.day));
         const dayLabel = this.dateTimeFormat.format(this.value);
-        return (index.h(index.Host, { key: '8de3dbeb652bfeb5ea9e9a490c3cec6a3663aeea', "aria-disabled": dom.toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": dom.toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, index.h(interactive.InteractiveContainer, { key: 'edb52f389027ea4f48067e2c0a4c6a28251bc4ab', disabled: this.disabled }, index.h("div", { key: 'fd75d2ebcd2e6ca21afdefb3f4e6f02089b43609', "aria-hidden": "true", class: { "day-v-wrapper": true } }, index.h("div", { key: 'd4ac04c544b7f26c1e1992f4b8046c608c6174cd', class: "day-wrapper" }, index.h("span", { key: '8453fd6dd54fa642f1779b99e2f1012a2277cfda', class: "day" }, index.h("span", { key: 'fb704e33e0d0af0ce76988983b530e640a361299', class: "text" }, formattedDay)))))));
+        return (index.h(index.Host, { key: '21762e1ba60bf298f05cb5c0499eb57bfc5a279d', "aria-disabled": dom.toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": dom.toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, index.h(interactive.InteractiveContainer, { key: '449226e496db81d7a029172ae69e1bf9da229603', disabled: this.disabled }, index.h("div", { key: '147f12c8bc782776df768e01ab8e6de0a6a2eb9f', "aria-hidden": "true", class: { "day-v-wrapper": true } }, index.h("div", { key: 'e38b3d2b999df042c92a609474a35ef2937dd024', class: "day-wrapper" }, index.h("span", { key: 'f8e97122b32053d78ff43ef85771fbeb8ff7b180', class: "day" }, index.h("span", { key: 'a10f30dea71f9774bdf10b55b3564f54c62e7970', class: "text" }, formattedDay)))))));
     }
     connectedCallback() {
         interactive.connectInteractive(this);
@@ -456,7 +456,7 @@ DatePickerMonth.style = CalciteDatePickerMonthStyle0;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     header: "header",
@@ -559,7 +559,7 @@ const DatePickerMonthHeader = class {
         this.setNextPrevMonthDates();
     }
     render() {
-        return index.h("div", { key: '9e392da76cbe365de812b6219b3ee7ada90a09e6', class: CSS.header }, this.renderContent());
+        return index.h("div", { key: '6e1476a12ba6ea69e21a6e2ad307ed524bdf3841', class: CSS.header }, this.renderContent());
     }
     renderContent() {
         const { messages, localeData, activeDate } = this;