@esri/solutions-components 0.10.27 → 0.10.29

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

@@ -7,18 +7,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const utils = require('./utils-29c97686.js');
-const dom = require('./dom-3d3a8f25.js');
-const loadable = require('./loadable-0e357195.js');
-require('./guid-42cda8c9.js');
-require('./resources-f11e9bd6.js');
-require('./browser-2893460e.js');
+const index = require('./index-4b68e4b4.js');
+const utils = require('./utils-51a793a5.js');
+const dom = require('./dom-795d4a33.js');
+const loadable = require('./loadable-1c888c87.js');
+require('./guid-e84a8375.js');
+require('./resources-18f799c7.js');
+require('./browser-333a21c5.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.12.2
+ * v2.13.0
  */
 const CSS$1 = {
     container: "container",
@@ -208,7 +208,7 @@ const ColorPickerHexInput = class {
         const hexInputValue = this.formatHexForInternalInput(value);
         const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
         const inputScale = scale === "l" ? "m" : "s";
-        return (index.h("div", { key: '7f3098ef31cae459bb4816fbea34cc74c174ec87', class: CSS$1.container }, index.h("calcite-input-text", { key: '66b3c778e3340ac4f9b91c4198b964c26c6a7347', class: CSS$1.hexInput, label: messages?.hex || hexLabel, maxLength: this.alphaChannel ? 8 : 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInputInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onCalciteInternalInputTextFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (index.h("calcite-input-number", { class: CSS$1.opacityInput, key: "opacity-input", label: messages?.opacity, max: utils.OPACITY_LIMITS.max, maxLength: 3, min: utils.OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberInput: this.onOpacityInputInput, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onCalciteInternalInputNumberFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
+        return (index.h("div", { key: '70f804fdbc3c29fdf49616f56c39593fdc3717da', class: CSS$1.container }, index.h("calcite-input-text", { key: '777d1f8ffa673a0d74f049d4a6bdacbf3510006a', class: CSS$1.hexInput, label: messages?.hex || hexLabel, maxLength: this.alphaChannel ? 8 : 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInputInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onCalciteInternalInputTextFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (index.h("calcite-input-number", { class: CSS$1.opacityInput, key: "opacity-input", label: messages?.opacity, max: utils.OPACITY_LIMITS.max, maxLength: 3, min: utils.OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberInput: this.onOpacityInputInput, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onCalciteInternalInputNumberFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
     }
     //--------------------------------------------------------------------------
     //
@@ -287,7 +287,7 @@ ColorPickerHexInput.style = CalciteColorPickerHexInputStyle0;
 /*!
  * 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.12.2
+ * v2.13.0
  */
 const CSS = {
     swatch: "swatch",
@@ -331,33 +331,50 @@ const ColorPickerSwatch = class {
             [CSS.swatch]: true,
             [CSS.noColorSwatch]: isEmpty,
         };
-        return (index.h("svg", { key: 'b29377be8ce0518f7b0f3691dcb1dda08890dd94', class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
+        return (index.h("svg", { key: 'd808ca40b9f81aad24291cabcfaf95d74d89f7cd', class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
     }
     renderSwatch() {
         const { active, el, internalColor } = this;
         const borderRadius = active ? "100%" : "0";
         const theme = dom.getModeName(el);
         const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
+        const isEmpty = !internalColor;
         const commonSwatchProps = {
             height: "100%",
             rx: borderRadius,
             stroke: borderColor,
-            // stroke-width and clip-path are needed to hide overflowing portion of stroke
-            // see https://stackoverflow.com/a/7273346/194216
-            // using attribute to work around Stencil using the prop name vs the attribute when rendering
-            ["stroke-width"]: "2",
+            strokeWidth: "2",
             width: "100%",
         };
-        const isEmpty = !internalColor;
         if (isEmpty) {
-            return (index.h(index.Fragment, null, index.h("clipPath", { id: "shape" }, index.h("rect", { height: "100%", rx: borderRadius, width: "100%" })), index.h("rect", { "clip-path": `inset(0 round ${borderRadius})`, rx: borderRadius, ...commonSwatchProps }), index.h("line", { "clip-path": "url(#shape)", "stroke-width": "3", x1: "100%", x2: "0", y1: "0", y2: "100%" })));
+            return (index.h(index.Fragment, null, index.h("clipPath", { id: "shape" }, index.h("rect", { height: "100%", rx: borderRadius, width: "100%" })), this.renderSwatchRect({
+                clipPath: `inset(0 round ${borderRadius})`,
+                ...commonSwatchProps,
+            }), index.h("line", { "clip-path": "url(#shape)", "stroke-width": "3", x1: "100%", x2: "0", y1: "0", y2: "100%" })));
         }
         const alpha = internalColor.alpha();
         const hex = utils.hexify(internalColor);
         const hexa = utils.hexify(internalColor, alpha < 1);
-        return (index.h(index.Fragment, null, index.h("title", null, hexa), index.h("defs", null, index.h("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, index.h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), index.h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), index.h("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), index.h("rect", { fill: hex, style: {
-                "clip-path": alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`,
-            }, ...commonSwatchProps }), alpha < 1 ? (index.h("rect", { fill: hexa, key: "opacity-fill", style: { "clip-path": "polygon(100% 0, 100% 100%, 0 100%)" }, ...commonSwatchProps })) : null));
+        return (index.h(index.Fragment, null, index.h("title", null, hexa), index.h("defs", null, index.h("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, index.h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), index.h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), this.renderSwatchRect({
+            fill: "url(#checker)",
+            rx: commonSwatchProps.rx,
+            height: commonSwatchProps.height,
+            width: commonSwatchProps.width,
+        }), this.renderSwatchRect({
+            clipPath: alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`,
+            fill: hex,
+            ...commonSwatchProps,
+        }), alpha < 1
+            ? this.renderSwatchRect({
+                clipPath: "polygon(100% 0, 100% 100%, 0 100%)",
+                fill: hexa,
+                key: "opacity-fill",
+                ...commonSwatchProps,
+            })
+            : null));
+    }
+    renderSwatchRect({ clipPath, fill, height, key, rx, stroke, strokeWidth, width, }) {
+        return (index.h("rect", { "clip-path": clipPath, fill: fill, height: height, key: key, rx: rx, stroke: stroke, "stroke-width": strokeWidth, width: width }));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -7,20 +7,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const utils = require('./utils-29c97686.js');
-const dom = require('./dom-3d3a8f25.js');
-const interactive = require('./interactive-3b85d8df.js');
-const key = require('./key-82084ef6.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-351282c5.js');
-const math = require('./math-14740338.js');
-const t9n = require('./t9n-e41672d2.js');
+const index = require('./index-4b68e4b4.js');
+const utils = require('./utils-51a793a5.js');
+const dom = require('./dom-795d4a33.js');
+const interactive = require('./interactive-a128ac30.js');
+const key = require('./key-47c9469a.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-da840314.js');
+const math = require('./math-089392ef.js');
+const t9n = require('./t9n-ed5c03a7.js');
 const throttle = require('./throttle-fe6b54a3.js');
-require('./guid-42cda8c9.js');
-require('./resources-f11e9bd6.js');
-require('./browser-2893460e.js');
-require('./observers-5f9f67ee.js');
+require('./guid-e84a8375.js');
+require('./resources-18f799c7.js');
+require('./browser-333a21c5.js');
+require('./observers-18d87cb5.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}.color-field,.control-and-scope{-webkit-user-select:none;-moz-user-select:none;user-select: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}";
@@ -544,7 +544,6 @@ const ColorPicker = class {
         await t9n.setUpMessages(this);
     }
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
     }
@@ -554,7 +553,6 @@ const ColorPicker = class {
     disconnectedCallback() {
         window.removeEventListener("pointermove", this.globalPointerMoveHandler);
         window.removeEventListener("pointerup", this.globalPointerUpHandler);
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -583,10 +581,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: 'cd7c2469429382b1adee89c87c4774160795203c', disabled: this.disabled }, index.h("div", { key: 'dd6809c82d3ffe64b8eaebd0669e7f61c0ea87d1', class: utils.CSS.container }, index.h("div", { key: '888c08c46fec112861b076c3cf24b9be7b4a66cd', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '23631c824c61abb2a3ca74e35bffc8be0364a052', class: utils.CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), index.h("div", { key: 'a5271bbe3c4f45e3cf7736dd8f4201f54420bfb7', "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: 'c4837ef7cbe25b5fc3f0c72fe82d0090c6e0cdb5', disabled: this.disabled }, index.h("div", { key: '28230570482ee9d33df9518e3cca534e3fac44ac', class: utils.CSS.container }, index.h("div", { key: '83172bc55f13955f5b69b59300e68642d59999af', class: utils.CSS.controlAndScope }, index.h("canvas", { key: 'c20db7054ab5ebdb1e13ba295ac463609c44de47', class: utils.CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), index.h("div", { key: '1e44beb121ed5a2247a6d69bf42c49a7f1ce5829', "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: 'eee6c10107513fd46316d2ba7510977b72771cd2', class: utils.CSS.previewAndSliders }, index.h("calcite-color-picker-swatch", { key: '964481e1c6c6c050df076e8cdc9d7e5b2cbeec79', class: utils.CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), index.h("div", { key: 'f915032fe532e140005b0ff1253b0a971a17b079', class: utils.CSS.sliders }, index.h("div", { key: '2bcb609ce36df2d0f75abb767ee6dc88c0c9ea3b', class: utils.CSS.controlAndScope }, index.h("canvas", { key: '99e268a194b785a8ec97fed67a523c602def2a94', class: { [utils.CSS.slider]: true, [utils.CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), index.h("div", { key: '4cdc0f98048a48e070430bf4f1f817571534f31b', "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: '5b873f4e7266cc654086f59c8483d3b4a65c8e8f', class: utils.CSS.previewAndSliders }, index.h("calcite-color-picker-swatch", { key: 'db7c903a933ed061cc2edcd766fde70a8b670f00', class: utils.CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), index.h("div", { key: '33ea2354cbcfaa6677e82713bd8f02d1b83a9c26', class: utils.CSS.sliders }, index.h("div", { key: '28493b4bd177b8c97583cabeb5716a7cb7202e76', class: utils.CSS.controlAndScope }, index.h("canvas", { key: 'd0a9ce7fb098b7434cd62f68b6b6092efcef3dc4', class: { [utils.CSS.slider]: true, [utils.CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), index.h("div", { key: '2356120385aabf09384f0077dffb7881c55c5ea9', "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: {

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

@@ -7,17 +7,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const guid = require('./guid-42cda8c9.js');
-const utils = require('./utils-edb4e372.js');
-require('./dom-3d3a8f25.js');
-require('./resources-f11e9bd6.js');
-require('./browser-2893460e.js');
+const index = require('./index-4b68e4b4.js');
+const guid = require('./guid-e84a8375.js');
+const utils = require('./utils-7e5609ab.js');
+require('./dom-795d4a33.js');
+require('./resources-18f799c7.js');
+require('./browser-333a21c5.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.12.2
+ * v2.13.0
  */
 const CSS = {
     list: "list",
@@ -53,7 +53,7 @@ const ComboboxItemGroup = class {
     render() {
         const { el, scale } = this;
         const depth = utils.getDepth(el);
-        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' })));
+        return (index.h("ul", { key: '32cc4bb7e8e551213c7b3aea1ee6c9907a93dc8b', "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, index.h("li", { key: '7bad1e784bd918befdeccba34625d9404f610a91', class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, index.h("span", { key: '9cfc56d414a465bb5d5e5beec561f5149779b31c', class: CSS.title }, this.label)), index.h("slot", { key: 'ec83330096f7031828f4b58cf2ee94611a9fddfe' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -7,45 +7,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
+const index = require('./index-4b68e4b4.js');
 const core = require('./core-7f0bcc12.js');
-const filter = require('./filter-a9429bde.js');
-const dom = require('./dom-3d3a8f25.js');
-const floatingUi = require('./floating-ui-9ff03df8.js');
-const form = require('./form-8132060d.js');
-const guid = require('./guid-42cda8c9.js');
-const interactive = require('./interactive-3b85d8df.js');
-const label = require('./label-e7d3c371.js');
-const loadable = require('./loadable-0e357195.js');
-const locale = require('./locale-351282c5.js');
-const observers = require('./observers-5f9f67ee.js');
-const openCloseComponent = require('./openCloseComponent-b66f10f5.js');
-const resources = require('./resources-f11e9bd6.js');
-const t9n = require('./t9n-e41672d2.js');
-const component = require('./component-7f2bd646.js');
-const Validation = require('./Validation-9bab9a69.js');
-const utils = require('./utils-edb4e372.js');
+const filter = require('./filter-e600c2fe.js');
+const dom = require('./dom-795d4a33.js');
+const floatingUi = require('./floating-ui-0f85d59c.js');
+const form = require('./form-6dd8050a.js');
+const guid = require('./guid-e84a8375.js');
+const interactive = require('./interactive-a128ac30.js');
+const label = require('./label-726fc287.js');
+const loadable = require('./loadable-1c888c87.js');
+const locale = require('./locale-da840314.js');
+const observers = require('./observers-18d87cb5.js');
+const openCloseComponent = require('./openCloseComponent-3c540d25.js');
+const resources = require('./resources-18f799c7.js');
+const t9n = require('./t9n-ed5c03a7.js');
+const component = require('./component-5d190962.js');
+const Validation = require('./Validation-55fc2417.js');
+const utils = require('./utils-7e5609ab.js');
 const debounce = require('./debounce-7f1e04d6.js');
-const resources$1 = require('./resources-9b04cd8c.js');
-const locale$1 = require('./locale-a09603ee.js');
+const resources$1 = require('./resources-eeda5acf.js');
+const locale$1 = require('./locale-339b55f0.js');
 const mapViewUtils = require('./mapViewUtils-18c46b84.js');
-const publicNotificationStore = require('./publicNotificationStore-f229e839.js');
-require('./browser-2893460e.js');
-require('./key-82084ef6.js');
+const publicNotificationStore = require('./publicNotificationStore-570204c1.js');
+require('./browser-333a21c5.js');
+require('./key-47c9469a.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./interfaces-09c4c40e.js');
-require('./index-da709a10.js');
+require('./index-2b13a4d5.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.12.2
+ * v2.13.0
  */
 const CSS = {
     button: "x-button",
 };
-const XButton = ({ disabled, key, label, onClick, ref, scale, }) => (index.h("button", { "aria-label": label, class: CSS.button, disabled: disabled, key: key, onClick: onClick, ref: ref, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "x", scale: component.getIconScale(scale) })));
+const XButton = ({ disabled, key, label, scale, }) => (index.h("button", { "aria-label": label, class: CSS.button, disabled: disabled, key: key, tabIndex: -1, type: "button" }, index.h("calcite-icon", { icon: "x", scale: component.getIconScale(scale) })));
 
 const comboboxCss = ":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:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;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;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.wrapper:hover .icon{color:var(--calcite-color-text-1)}:host(:focus-within) .wrapper,.wrapper--active{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([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);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          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:-moz-placeholder-shown{text-overflow:ellipsis}.input:placeholder-shown{text-overflow:ellipsis}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.placeholder-icon{color:var(--calcite-color-text-3)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-color-text-3)}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, 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}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block:0;left:0}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width, 100%)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing:0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
 const CalciteComboboxStyle0 = comboboxCss;
@@ -192,7 +192,8 @@ const Combobox = class {
                     break;
                 case "Enter":
                     if (this.open && this.activeItemIndex > -1) {
-                        this.toggleSelection(this.filteredItems[this.activeItemIndex]);
+                        const item = this.filteredItems[this.activeItemIndex];
+                        this.toggleSelection(item, !item.selected);
                         event.preventDefault();
                     }
                     else if (this.activeChipIndex > -1) {
@@ -228,14 +229,6 @@ const Combobox = class {
                 }
             }
         };
-        this.toggleCloseEnd = () => {
-            this.open = false;
-            this.el.removeEventListener("calciteComboboxClose", this.toggleCloseEnd);
-        };
-        this.toggleOpenEnd = () => {
-            this.open = false;
-            this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
-        };
         this.setMaxScrollerHeight = async () => {
             const { listContainerEl, open, referenceEl } = this;
             if (!listContainerEl || !open) {
@@ -608,7 +601,6 @@ const Combobox = class {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         label.connectLabel(this);
@@ -649,7 +641,6 @@ const Combobox = class {
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         form.disconnectForm(this);
         floatingUi.disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -779,9 +770,12 @@ const Combobox = class {
     getItemsAndGroups() {
         return [...this.groupItems, ...this.items];
     }
-    toggleSelection(item, value = !item.selected) {
+    toggleSelection(item, value) {
         if (!item ||
-            (this.selectionMode === "single-persist" && item.selected && item.value === this.value)) {
+            (this.selectionMode === "single-persist" &&
+                item.selected &&
+                item.value === this.value &&
+                !value)) {
             return;
         }
         if (this.isMulti()) {
@@ -1107,7 +1101,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: '24749edfdb12a51e6e34c78d3428f83de7ac0457', onClick: this.comboboxFocusHandler }, index.h(interactive.InteractiveContainer, { key: '7300de366d86bcad91501f1124aed5f311820c37', disabled: this.disabled }, index.h("div", { key: 'fc8981935ffdd46fc5386517fce51170d41179a5', "aria-live": "polite", class: {
+        return (index.h(index.Host, { key: '7ff11391145f9d35bb29b79668ba4c71383399cb', onClick: this.comboboxFocusHandler }, index.h(interactive.InteractiveContainer, { key: '0f933e31620dcb729c99290edfa9c0d48ed8f3d0', disabled: this.disabled }, index.h("div", { key: '8b50c921f9f45393064744fa38874de7de82a228', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
@@ -1121,7 +1115,7 @@ const Combobox = class {
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], index.h("label", { key: '60ca38b6b84d8ccd3e11419ca494c8a3b310e631', 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: 'bb750b55b33af3a317ac7883d4f8ef88a23bf1c6', "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: 'bf9a9f0dc62822568377ee1e602e24ca14b9c895', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: utils.IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], index.h("label", { key: '07bc9e86da71217b892740f0748117f5bf1eacb3', 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: '5f367649d90d63c5cf88d097786c849430dc1e49', "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: '97f799527df82ab6def23e012663050e0156626a', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: utils.IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -1178,9 +1172,9 @@ const DropdownGroup = class {
     render() {
         const groupTitle = this.groupTitle ? (index.h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
         const dropdownSeparator = this.groupPosition > 0 ? index.h("div", { class: "dropdown-separator", role: "separator" }) : null;
-        return (index.h(index.Host, { key: '5e46ca1eb8f37e5af6f9ff4f417a9290c84f2f69', "aria-label": this.groupTitle, role: "group" }, index.h("div", { key: 'af52f0ab422c21b0c10620b61fc7b6445d277878', class: {
+        return (index.h(index.Host, { key: 'f41943751aefdb17d4f5d5bd8778c219cfd01a00', "aria-label": this.groupTitle, role: "group" }, index.h("div", { key: '87b78040b93c06081ca8282a785d466ed8fcf334', class: {
                 [resources$1.CSS.container]: true,
-            } }, dropdownSeparator, groupTitle, index.h("slot", { key: 'e320a38a327d6ca9802c9664c93907df2705fbf3' }))));
+            } }, dropdownSeparator, groupTitle, index.h("slot", { key: 'f635a5bdbe439315eba6292a4858cbd8519d23d1' }))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -7,19 +7,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5a0af791.js');
-const date = require('./date-e01a99aa.js');
-const dom = require('./dom-3d3a8f25.js');
-const interactive = require('./interactive-3b85d8df.js');
-const key = require('./key-82084ef6.js');
-const locale = require('./locale-351282c5.js');
-const loadable = require('./loadable-0e357195.js');
-const Heading = require('./Heading-63b5c82c.js');
-const component = require('./component-7f2bd646.js');
-require('./guid-42cda8c9.js');
-require('./resources-f11e9bd6.js');
-require('./browser-2893460e.js');
-require('./observers-5f9f67ee.js');
+const index = require('./index-4b68e4b4.js');
+const date = require('./date-bb8f971c.js');
+const dom = require('./dom-795d4a33.js');
+const interactive = require('./interactive-a128ac30.js');
+const key = require('./key-47c9469a.js');
+const locale = require('./locale-da840314.js');
+const loadable = require('./loadable-1c888c87.js');
+const Heading = require('./Heading-a3e36113.js');
+const component = require('./component-5d190962.js');
+require('./guid-e84a8375.js');
+require('./resources-18f799c7.js');
+require('./observers-18d87cb5.js');
+require('./browser-333a21c5.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 CalciteDatePickerDayStyle0 = datePickerDayCss;
@@ -101,17 +101,11 @@ const DatePickerDay = class {
         }
         const formattedDay = locale.numberStringFormatter.localize(String(this.day));
         const dayLabel = this.dateTimeFormat.format(this.value);
-        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);
+        return (index.h(index.Host, { key: '99367dbc5f33128ec7e60922a7ccb68f54362f78', "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: '50e5172f11d617e5e52aade2bb9fbdd7c46ccc60', disabled: this.disabled }, index.h("div", { key: 'cfb5af0dcdb9283e00d3220e3658c253fc8fdc05', "aria-hidden": "true", class: { "day-v-wrapper": true } }, index.h("div", { key: 'f1a85d642b0abdf35676fea5873c2ac4c92d451c', class: "day-wrapper" }, index.h("span", { key: '79daaedf22745c9d633b4461c5a28b828b6803ae', class: "day" }, index.h("span", { key: '14152896fce841cbe975eeabd5171024ae5133d3', class: "text" }, formattedDay)))))));
     }
     componentDidRender() {
         interactive.updateHostInteraction(this);
     }
-    disconnectedCallback() {
-        interactive.disconnectInteractive(this);
-    }
     get el() { return index.getElement(this); }
 };
 DatePickerDay.style = CalciteDatePickerDayStyle0;
@@ -456,7 +450,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.12.2
+ * v2.13.0
  */
 const CSS = {
     header: "header",
@@ -559,7 +553,7 @@ const DatePickerMonthHeader = class {
         this.setNextPrevMonthDates();
     }
     render() {
-        return index.h("div", { key: '6e1476a12ba6ea69e21a6e2ad307ed524bdf3841', class: CSS.header }, this.renderContent());
+        return index.h("div", { key: '4943ff396e6db2ee2ba30f4994a75fb2d5afeda1', class: CSS.header }, this.renderContent());
     }
     renderContent() {
         const { messages, localeData, activeDate } = this;