@esri/solutions-components 0.10.4 → 0.10.5

package/dist/components/color-picker-hex-input.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as Color, s as isLonghandHex, i as isValidHex, u as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, v as hexChar, O as OPACITY_LIMITS, e as alphaToOpacity } from './utils.js';
+import { c as Color, s as isLonghandHex, u as isShorthandHex, i as isValidHex, v as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, w as hexChar, O as OPACITY_LIMITS, e as alphaToOpacity } from './utils.js';
 import { f as focusElement } from './dom.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { d as defineCustomElement$4 } from './icon.js';
@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './progress.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 = {
     container: "container",
@@ -40,8 +40,10 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
             const { allowEmpty, internalColor } = this;
             const willClearValue = allowEmpty && !inputValue;
             const isLonghand = isLonghandHex(hex);
-            // ensure modified pasted hex values are committed since we prevent default to remove the # char.
-            this.onHexInputChange();
+            if (isShorthandHex(hex, this.alphaChannel)) {
+                // ensure modified pasted hex values are committed since we prevent default to remove the # char.
+                this.onHexInputChange();
+            }
             if (willClearValue || (isValidHex(hex) && isLonghand)) {
                 return;
             }
@@ -65,6 +67,9 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
             node.value =
                 allowEmpty && !internalColor ? "" : this.formatOpacityForInternalInput(internalColor);
         };
+        this.onOpacityInputInput = () => {
+            this.onOpacityInputChange();
+        };
         this.onHexInputChange = () => {
             const nodeValue = this.hexInputNode.value;
             let value = nodeValue;
@@ -90,7 +95,12 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
             }
             this.internalSetValue(value, this.value);
         };
-        this.onHexInput = () => {
+        this.onInputFocus = (event) => {
+            event.type === "calciteInternalInputTextFocus"
+                ? this.hexInputNode.selectText()
+                : this.opacityInputNode.selectText();
+        };
+        this.onHexInputInput = () => {
             const hexInputValue = `#${this.hexInputNode.value}`;
             const oldValue = this.value;
             if (isValidHex(hexInputValue, this.alphaChannel) &&
@@ -103,7 +113,7 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
             const { alphaChannel, hexInputNode, internalColor, value } = this;
             const { key } = event;
             const composedPath = event.composedPath();
-            if (key === "Tab" || key === "Enter") {
+            if ((key === "Tab" && isShorthandHex(value, this.alphaChannel)) || key === "Enter") {
                 if (composedPath.includes(hexInputNode)) {
                     this.onHexInputChange();
                 }
@@ -197,7 +207,7 @@ const ColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(class ColorPickerHe
         const hexInputValue = this.formatHexForInternalInput(value);
         const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
         const inputScale = scale === "l" ? "m" : "s";
-        return (h("div", { key: '9939540e0bf570287d03276311c4d077e2ce1ae4', class: CSS.container }, h("calcite-input-text", { key: 'd2b6ab840fbd55bf16c6c5efe46d51e65b909cde', class: CSS.hexInput, label: messages?.hex || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (h("calcite-input-number", { class: CSS.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
+        return (h("div", { key: '7f3098ef31cae459bb4816fbea34cc74c174ec87', class: CSS.container }, h("calcite-input-text", { key: '66b3c778e3340ac4f9b91c4198b964c26c6a7347', class: CSS.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 ? (h("calcite-input-number", { class: CSS.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: 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));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/color-picker-swatch.js

@@ -10,7 +10,7 @@ import { v as getModeName } from './dom.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 = {
     swatch: "swatch",

package/dist/components/combobox-item.js

@@ -8,31 +8,38 @@ import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotCom
 import { a as getSlotted } from './dom.js';
 import { g as guid } from './guid.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
-import { e as getAncestors, i as isSingleLike, f as getDepth } from './utils2.js';
+import { f as getAncestors, i as isSingleLike, j as getDepth } from './utils2.js';
 import { g as getIconScale } from './component.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
-    icon: "icon",
-    iconActive: "icon--active",
-    iconIndent: "icon--indent",
+    active: "label--active",
+    centerContent: "center-content",
+    container: "container",
     custom: "icon--custom",
+    description: "description",
     dot: "icon--dot",
-    single: "label--single",
+    filterMatch: "filter-match",
+    icon: "icon",
+    iconActive: "icon--active",
     label: "label",
-    active: "label--active",
+    scale: (scale) => `scale--${scale}`,
     selected: "label--selected",
-    title: "title",
+    shortText: "short-text",
+    single: "label--single",
     textContainer: "text-container",
-    filterMatch: "filter-match",
+    title: "title",
+};
+const SLOTS = {
+    contentEnd: "content-end",
 };
 
-const comboboxItemCss = "@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}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.label--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          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.title{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--indent{padding-inline-start:var(--calcite-combobox-item-indent-value)}.icon--custom{margin-block-start:-1px;padding-inline-start:var(--calcite-combobox-item-spacing-unit-l);color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot::before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}.filter-match{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-current)}";
+const comboboxItemCss = "@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}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem;--calcite-combobox-item-selector-icon-size:1rem;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.375rem;--calcite-combobox-item-spacing-indent:0.75rem;--calcite-combobox-item-selector-icon-size:1rem;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.625rem;--calcite-combobox-item-spacing-indent:1rem;--calcite-combobox-item-selector-icon-size:1.5rem;--calcite-internal-combobox-item-description-font-size:var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  )}:host(:focus){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;color:var(--calcite-color-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);outline-color:transparent;word-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-combobox-item-spacing-unit-l);padding-block:var(--calcite-combobox-item-spacing-unit-s);padding-inline:var(--calcite-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value)}:host([disabled]) .label{cursor:default}.label--selected{color:var(--calcite-color-text-1)}.label--selected .title{font-weight:var(--calcite-font-weight-medium)}.label--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          )}.label:hover,.label:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1);text-decoration-line:none;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.icon{display:inline-flex;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-color-border-1)}.icon--custom{margin-block-start:-1px;color:var(--calcite-color-text-3)}.icon--active{color:var(--calcite-color-text-1)}.icon--dot{display:flex;justify-content:center;min-inline-size:var(--calcite-combobox-item-selector-icon-size)}.icon--dot::before{text-align:start;content:\"•\"}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-color-brand)}:host(:hover[disabled]) .icon{opacity:1}.filter-match{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-current)}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}:host([selected]) .description,:host(:hover) .description{color:var(--calcite-color-text-2)}.short-text{color:var(--calcite-color-text-3);white-space:nowrap}.title{color:var(--calcite-color-text-1)}.title,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}";
 const CalciteComboboxItemStyle0 = comboboxItemCss;
 
 const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends HTMLElement {
@@ -44,19 +51,22 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends
         this.itemClickHandler = () => {
             this.toggleSelected();
         };
-        this.disabled = false;
-        this.selected = false;
         this.active = false;
         this.ancestors = undefined;
+        this.description = undefined;
+        this.disabled = false;
+        this.filterDisabled = undefined;
+        this.filterTextMatchPattern = undefined;
         this.guid = guid();
         this.icon = undefined;
         this.iconFlipRtl = false;
+        this.metadata = undefined;
+        this.scale = "m";
+        this.selected = false;
+        this.selectionMode = "multiple";
+        this.shortHeading = undefined;
         this.textLabel = undefined;
-        this.filterTextMatchPattern = undefined;
         this.value = undefined;
-        this.filterDisabled = undefined;
-        this.selectionMode = "multiple";
-        this.scale = "m";
     }
     selectedWatchHandler() {
         this.calciteComboboxItemChange.emit();
@@ -99,18 +109,15 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends
         return this.icon ? (h("calcite-icon", { class: {
                 [CSS.custom]: !!this.icon,
                 [CSS.iconActive]: this.icon && this.selected,
-                [CSS.iconIndent]: true,
             }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: getIconScale(this.scale) })) : null;
     }
     renderSelectIndicator(showDot, iconPath) {
         return showDot ? (h("span", { class: {
                 [CSS.icon]: true,
                 [CSS.dot]: true,
-                [CSS.iconIndent]: true,
             } })) : (h("calcite-icon", { class: {
                 [CSS.icon]: true,
                 [CSS.iconActive]: this.selected,
-                [CSS.iconIndent]: true,
             }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: getIconScale(this.scale) }));
     }
     renderChildren() {
@@ -123,22 +130,26 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends
         const { disabled } = this;
         const isSingleSelect = isSingleLike(this.selectionMode);
         const showDot = isSingleSelect && !disabled;
-        const defaultIcon = isSingleSelect ? "dot" : "check";
-        const iconPath = disabled ? "" : defaultIcon;
+        const defaultIcon = isSingleSelect ? undefined : "check";
+        const iconPath = disabled ? undefined : defaultIcon;
         const classes = {
             [CSS.label]: true,
             [CSS.selected]: this.selected,
             [CSS.active]: this.active,
             [CSS.single]: isSingleSelect,
         };
-        const depth = getDepth(this.el);
-        return (h(Host, { key: '24539cb8c385eba17113acbc986c5313782abc6c', "aria-hidden": "true" }, h(InteractiveContainer, { key: '115e856cd8a456a8d70431f87f81cae4b5ed3197', disabled: disabled }, h("div", { key: 'c440f95366563eddee178c1d0e89bea535699dd4', class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { key: '5cce5bf58b17ff1ab86d7eb009ff3084bbf487ba', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("span", { key: '6b0055d09916fe03b37d90e2d1ac5b59a47ad3bc', class: "title" }, this.renderTextContent())), this.renderChildren()))));
+        const depth = getDepth(this.el) + 1;
+        return (h(Host, { key: '7d54536c9f70be5d8824bf53156879074c632d7d', "aria-hidden": "true" }, h(InteractiveContainer, { key: '67eeab82142a11bcd97bf9d21e768ac1309eb78c', disabled: disabled }, h("div", { key: 'c0cf97d6111ca6e09f26750060c669d091265b08', class: {
+                [CSS.container]: true,
+                [CSS.scale(this.scale)]: true,
+            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { key: '36699561d3c82ff081e5f3b281e97711b2527596', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("div", { key: 'c07e0ddb3c248c610eedd80fee70dba0116c88cf', class: CSS.centerContent }, h("div", { key: '6a7050585ca580a5f0648753ddba28e3c71a8ea7', class: CSS.title }, this.renderTextContent(this.textLabel)), this.description ? (h("div", { class: CSS.description }, this.renderTextContent(this.description))) : null), this.shortHeading ? (h("div", { class: CSS.shortText }, this.renderTextContent(this.shortHeading))) : null, h("slot", { key: '73bb84b567866bd1c6a74ba84d1459d1a8c47add', name: SLOTS.contentEnd })), this.renderChildren()))));
     }
-    renderTextContent() {
-        if (!this.filterTextMatchPattern) {
-            return this.textLabel;
+    renderTextContent(text) {
+        const pattern = this.filterTextMatchPattern;
+        if (!pattern || !text) {
+            return text;
         }
-        const parts = this.textLabel.split(this.filterTextMatchPattern);
+        const parts = text.split(pattern);
         if (parts.length > 1) {
             // we only highlight the first match
             parts[1] = h("mark", { class: CSS.filterMatch }, parts[1]);
@@ -151,19 +162,22 @@ const ComboboxItem = /*@__PURE__*/ proxyCustomElement(class ComboboxItem extends
     }; }
     static get style() { return CalciteComboboxItemStyle0; }
 }, [1, "calcite-combobox-item", {
-        "disabled": [516],
-        "selected": [1540],
         "active": [516],
         "ancestors": [1040],
+        "description": [1],
+        "disabled": [516],
+        "filterDisabled": [516, "filter-disabled"],
+        "filterTextMatchPattern": [16],
         "guid": [513],
         "icon": [513],
         "iconFlipRtl": [516, "icon-flip-rtl"],
-        "textLabel": [513, "text-label"],
-        "filterTextMatchPattern": [16],
-        "value": [8],
-        "filterDisabled": [516, "filter-disabled"],
+        "metadata": [16],
+        "scale": [1],
+        "selected": [1540],
         "selectionMode": [513, "selection-mode"],
-        "scale": [1]
+        "shortHeading": [1, "short-heading"],
+        "textLabel": [513, "text-label"],
+        "value": [8]
     }, undefined, {
         "selected": ["selectedWatchHandler"]
     }]);

package/dist/components/combobox.js

@@ -6,7 +6,7 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { d as calciteSize48 } from './core.js';
 import { f as filter, e as escapeRegExp } from './filter.js';
-import { C as getElementWidth, D as getTextWidth, t as toAriaBoolean } from './dom.js';
+import { D as getElementWidth, E as getTextWidth, t as toAriaBoolean } from './dom.js';
 import { b as defaultMenuPlacement, f as filterValidFlipPlacements, c as connectFloatingUI, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui.js';
 import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { g as guid } from './guid.js';
@@ -16,10 +16,11 @@ import { b as componentLoaded, c as componentFocusable, s as setUpLoadableCompon
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
+import { D as DEBOUNCE } from './resources.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
 import { g as getIconScale, c as componentOnReady } from './component.js';
 import { V as Validation } from './Validation.js';
-import { i as isSingleLike, h as hasActiveChildren, C as CSS$1, a as ComboboxChildSelector, g as getItemAncestors, b as getItemChildren, c as ComboboxItem, d as ComboboxItemGroup } from './utils2.js';
+import { i as isSingleLike, h as hasActiveChildren, C as CSS$1, a as ComboboxChildSelector, g as getLabel, b as getItemAncestors, c as getItemChildren, d as ComboboxItem, e as ComboboxItemGroup } from './utils2.js';
 import { d as defineCustomElement$3 } from './chip.js';
 import { d as defineCustomElement$2 } from './combobox-item.js';
 import { d as defineCustomElement$1 } from './icon.js';
@@ -28,7 +29,7 @@ import { d as debounce } from './debounce.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 = {
     button: "x-button",
@@ -360,7 +361,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                 if (emit) {
                     this.calciteComboboxFilterChange.emit();
                 }
-            }, 100);
+            }, DEBOUNCE.filter);
         })();
         this.internalComboboxChangeEvent = () => {
             this.calciteComboboxChange.emit();
@@ -412,7 +413,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             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;
@@ -744,8 +745,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         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++;
@@ -755,19 +756,14 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         }
         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(ComboboxChildSelector));
-        children
-            .map((child) => child?.offsetHeight)
-            .forEach((offsetHeight) => {
-            height -= offsetHeight;
-        });
-        return height;
+        const parentHeight = item.getBoundingClientRect().height;
+        const childrenTotalHeight = Array.from(item.querySelectorAll(ComboboxChildSelector)).reduce((total, child) => total + child.getBoundingClientRect().height, 0);
+        return parentHeight - childrenTotalHeight;
     }
     getItemsAndGroups() {
         return [...this.groupItems, ...this.items];
@@ -792,7 +788,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             this.selectedItems = this.getSelectedItems();
             this.emitComboboxChange();
             if (this.textInput) {
-                this.textInput.value = item.textLabel;
+                this.textInput.value = getLabel(item);
             }
             this.open = false;
             this.updateActiveItemIndex(-1);
@@ -825,9 +821,12 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     }
     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() {
@@ -859,7 +858,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             item.value = value;
             item.textLabel = value;
             item.selected = true;
-            this.el.appendChild(item);
+            this.el.prepend(item);
             this.resetText();
             if (focus) {
                 this.setFocus();
@@ -947,9 +946,10 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
                 "chip--active": activeChipIndex === i,
             };
             const ancestors = [...getItemAncestors(item)].reverse();
-            const pathLabel = [...ancestors, item].map((el) => el.textLabel);
-            const label = selectionMode !== "ancestors" ? item.textLabel : pathLabel.join(" / ");
-            return (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 = getLabel(item);
+            const pathLabel = [...ancestors, item].map((el) => getLabel(el));
+            const label = selectionMode !== "ancestors" ? itemLabel : pathLabel.join(" / ");
+            return (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() {
@@ -1053,7 +1053,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             } }, showLabel && (h("span", { class: {
                 label: true,
                 "label--icon": !!selectedItem?.icon,
-            }, key: "label" }, selectedItem.textLabel)), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+            }, key: "label" }, getLabel(selectedItem))), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
                 [CSS$1.input]: true,
                 "input--single": true,
                 "input--hidden": showLabel,
@@ -1092,7 +1092,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && this.value?.length > 0;
-        return (h(Host, { key: '5739c3eb227fac2bcdf172f18cfa6c30f8e45534', onClick: this.comboboxFocusHandler }, h(InteractiveContainer, { key: '44b8d3b17184826dcc4777cc1c51bb36ade6c6bd', disabled: this.disabled }, h("div", { key: 'd60f216956651cf01f03b99127a9c580458240cf', "aria-live": "polite", class: {
+        return (h(Host, { key: 'c51466b3ff7d6aaf29578ba9a017cab02b49d704', onClick: this.comboboxFocusHandler }, h(InteractiveContainer, { key: '5c1e3383be919a3348677607b46f79a8baefeee7', disabled: this.disabled }, h("div", { key: 'ffb0ee17748ed4827cfca2c8aea8f39fc82a05cc', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
@@ -1106,7 +1106,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], h("label", { key: '0a225198d2f83bbabef5933e85bf4762cdd435d7', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), 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(), h(HiddenFormInputSlot, { key: '157c1c6a024eeabea1692427da36e8c4f7fd45a9', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], h("label", { key: 'd60ddc1697b80245c56fd7b553408beb21296b3d', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), 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(), h(HiddenFormInputSlot, { key: 'eca6c0108b0fbb8e6851c6cc86d15dc70318a4a3', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/component.js

@@ -6,7 +6,7 @@
 /*!
  * 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
  */
 function getIconScale(componentScale) {
     return componentScale === "l" ? "m" : "s";

package/dist/components/conditionalSlot.js

@@ -9,7 +9,7 @@ import { c as createObserver } from './observers.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
  */
 let mutationObserver;
 const observerOptions = { childList: true };

package/dist/components/config.js

@@ -6,23 +6,27 @@
 /*!
  * 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
  */
 /**
  * This module allows custom configuration for components.
  */
-const customConfig = globalThis["calciteConfig"];
-const focusTrapStack = customConfig?.focusTrapStack || [];
-const version = "__CALCITE_VERSION__"; // version number is set by build
+const existingConfig = globalThis["calciteConfig"];
+const focusTrapStack = existingConfig?.focusTrapStack || [];
+const logLevel = existingConfig?.logLevel || "info";
+// the following placeholders are replaced by the build
+const version = "__CALCITE_VERSION__";
+const buildDate = "__CALCITE_BUILD_DATE__";
+const revision = "__CALCITE_REVISION__";
 /**
  * Stamp the version onto the global config.
  */
 function stampVersion() {
-    if (customConfig && customConfig.version) {
-        console.warn(`[calcite-components] while initializing v${version}, an existing configuration with version "${customConfig.version}" was found. This may cause unexpected behavior. The version will not be added to the existing global configuration.`);
+    if (existingConfig && existingConfig.version) {
         return;
     }
-    const target = customConfig || globalThis["calciteConfig"] || {};
+    console.info(`Using Calcite Components ${version} [Date: ${buildDate}, Revision: ${revision}]`);
+    const target = existingConfig || globalThis["calciteConfig"] || {};
     Object.defineProperty(target, "version", {
         value: version,
         writable: false,
@@ -30,4 +34,4 @@ function stampVersion() {
     globalThis["calciteConfig"] = target;
 }
 
-export { focusTrapStack as f, stampVersion as s };
+export { focusTrapStack as f, logLevel as l, stampVersion as s };

package/dist/components/crowdsource-manager.js

@@ -74,6 +74,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.__registerHost();
         this.showIntroductionWindow = createEvent(this, "showIntroductionWindow", 7);
         this.showCoverPage = createEvent(this, "showCoverPage", 7);
+        this.appLayout = undefined;
         this.appProxies = undefined;
         this.basemapConfig = undefined;
         this.coverPageEnabled = undefined;
@@ -280,7 +281,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '711376ac0d4b633b63c4c94b87f98255c3562dc1' }, h("calcite-shell", { key: 'b78e8febbbf55e0e61817c04c4838095a5de6ebe', class: "position-relative" }, h("calcite-panel", { key: '8e53369a82e75cbea09e6d4edd42f1e09954277b', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: 'f434a8e24b111a32774e9d5683c2446ba35b504b' }, h("calcite-shell", { key: '017843c77fa2c52f0d957760ac3f57808d11d59f', class: "position-relative" }, h("calcite-panel", { key: 'bd8eeec3a013583789b9e1b251fed34e5896171e', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -614,6 +615,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     }; }
     static get style() { return CrowdsourceManagerStyle0; }
 }, [0, "crowdsource-manager", {
+        "appLayout": [1025, "app-layout"],
         "appProxies": [8, "app-proxies"],
         "basemapConfig": [16],
         "coverPageEnabled": [4, "cover-page-enabled"],

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

@@ -11,7 +11,7 @@ import { i as isActivationKey } from './key.js';
 import { n as numberStringFormatter } from './locale2.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 
-const datePickerDayCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;cursor:pointer;color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.day-v-wrapper{flex:1 1 auto}.day-wrapper{position:relative;display:flex;flex-direction:column;align-items:center}:host([range]) .day-wrapper:before,:host([range]) .day-wrapper:after,:host([range-hover]) .day-wrapper:before,:host([range-hover]) .day-wrapper:after{pointer-events:none;position:absolute;inset-block:0;content:\"\";block-size:var(--calcite-internal-day-size);inline-size:var(--calcite-internal-day-size)}.day{z-index:var(--calcite-z-index);display:flex;align-items:center;justify-content:center;border-radius:9999px;font-size:var(--calcite-font-size--2);line-height:1rem;line-height:1;color:var(--calcite-color-text-3);outline-color:transparent;transition: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 = /*@__PURE__*/ proxyCustomElement(class DatePickerDay extends HTMLElement {
@@ -93,7 +93,7 @@ const DatePickerDay = /*@__PURE__*/ proxyCustomElement(class DatePickerDay exten
         }
         const formattedDay = numberStringFormatter.localize(String(this.day));
         const dayLabel = this.dateTimeFormat.format(this.value);
-        return (h(Host, { key: '8de3dbeb652bfeb5ea9e9a490c3cec6a3663aeea', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: 'edb52f389027ea4f48067e2c0a4c6a28251bc4ab', disabled: this.disabled }, h("div", { key: 'fd75d2ebcd2e6ca21afdefb3f4e6f02089b43609', "aria-hidden": "true", class: { "day-v-wrapper": true } }, h("div", { key: 'd4ac04c544b7f26c1e1992f4b8046c608c6174cd', class: "day-wrapper" }, h("span", { key: '8453fd6dd54fa642f1779b99e2f1012a2277cfda', class: "day" }, h("span", { key: 'fb704e33e0d0af0ce76988983b530e640a361299', class: "text" }, formattedDay)))))));
+        return (h(Host, { key: '21762e1ba60bf298f05cb5c0499eb57bfc5a279d', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": dayLabel, "aria-selected": toAriaBoolean(this.active), id: dayId, onClick: this.onClick, onKeyDown: this.keyDownHandler, role: "button", tabIndex: this.active && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: '449226e496db81d7a029172ae69e1bf9da229603', disabled: this.disabled }, h("div", { key: '147f12c8bc782776df768e01ab8e6de0a6a2eb9f', "aria-hidden": "true", class: { "day-v-wrapper": true } }, h("div", { key: 'e38b3d2b999df042c92a609474a35ef2937dd024', class: "day-wrapper" }, h("span", { key: 'f8e97122b32053d78ff43ef85771fbeb8ff7b180', class: "day" }, h("span", { key: 'a10f30dea71f9774bdf10b55b3564f54c62e7970', class: "text" }, formattedDay)))))));
     }
     connectedCallback() {
         connectInteractive(this);

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

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     header: "header",
@@ -120,7 +120,7 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerM
         this.setNextPrevMonthDates();
     }
     render() {
-        return h("div", { key: '9e392da76cbe365de812b6219b3ee7ada90a09e6', class: CSS.header }, this.renderContent());
+        return h("div", { key: '6e1476a12ba6ea69e21a6e2ad307ed524bdf3841', class: CSS.header }, this.renderContent());
     }
     renderContent() {
         const { messages, localeData, activeDate } = this;