@esri/solutions-components 0.10.4 → 0.10.6

package/dist/components/calcite-block-section.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$2 } from './switch.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 IDS = {
     content: "content",
@@ -145,7 +145,7 @@ const BlockSection = /*@__PURE__*/ proxyCustomElement(class BlockSection extends
         const flipRtlEnd = iconFlipRtl === "both" || iconFlipRtl === "end";
         const isIconStart = icon === this.iconStart;
         /** Icon scale is not variable as the component does not have a scale property */
-        return (h("calcite-icon", { class: isIconStart ? this.iconStart : this.iconEnd, flipRtl: isIconStart ? flipRtlStart : flipRtlEnd, icon: isIconStart ? this.iconStart : this.iconEnd, key: isIconStart ? CSS.iconStart : CSS.iconEnd, scale: "s" }));
+        return (h("calcite-icon", { class: isIconStart ? CSS.iconStart : CSS.iconEnd, flipRtl: isIconStart ? flipRtlStart : flipRtlEnd, icon: isIconStart ? this.iconStart : this.iconEnd, key: isIconStart ? this.iconStart : this.iconEnd, scale: "s" }));
     }
     render() {
         const { messages, open, text, toggleDisplay } = this;
@@ -162,7 +162,7 @@ const BlockSection = /*@__PURE__*/ proxyCustomElement(class BlockSection extends
                 [CSS.sectionHeader]: true,
                 [CSS.toggle]: true,
             }, id: IDS.toggle, onClick: this.toggleSection }, this.renderIcon(this.iconStart), h("span", { class: CSS.sectionHeaderText }, text), this.renderIcon(this.iconEnd), this.renderStatusIcon(), h("calcite-icon", { class: CSS.chevronIcon, icon: arrowIcon, scale: "s" }))));
-        return (h(Host, { key: 'cb073bc654bdb57aa9f315017c1fd34f010aeb3c' }, headerNode, h("section", { key: 'c03ccc99f8a6c1bf19ba9b1d38e0fce5a62dd0f5', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, h("slot", { key: 'c7704b42a05a4f673c9008a71504bdf2a8b6b4da' }))));
+        return (h(Host, { key: '224c2187de037da1611a3228195e95ba43bde093' }, headerNode, h("section", { key: '8b8849645851e21e26c63cef44428f30d2429a0b', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, h("slot", { key: '3f6d783aaa6d886bb4533a4dec96aafc8ba058ef' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/calcite-card.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$2 } from './loader.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",
@@ -210,10 +210,10 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (h(Host, { key: '4946d48f9a3a277437fd9b99346a3a3ef7f9dd9e' }, h(InteractiveContainer, { key: '3e6ca0e58bc05f655f2385e104bf34153e837a3b', disabled: this.disabled }, h("div", { key: '935420887e88fc36d7700fe9564f80d01b95fa6e', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { key: '42fc876326e43a398b7811d5c8a9d07b9e136d90', "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), h("div", { key: '39c6dd91b34734469bbb91d9fe0f700a6b439dd3', class: {
+        return (h(Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, h(InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, h("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), h("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
                 [CSS.cardContent]: true,
                 [CSS.hasSlottedContent]: this.hasContent,
-            } }, h("slot", { key: '8ee81529539d734e381c5359c675bd7cad60a553', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+            } }, h("slot", { key: '17fb9b0a9919f09a474d3c54818e770be9a85b77', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/calcite-carousel-item.js

@@ -9,7 +9,7 @@ import { g as guid } from './guid.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",

package/dist/components/calcite-carousel.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$2 } 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 DURATION = 6000;
 const CSS = {
@@ -185,6 +185,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
             if (event.target !== this.container) {
                 return;
             }
+            const lastItem = this.items.length - 1;
             switch (event.key) {
                 case " ":
                 case "Enter":
@@ -203,13 +204,19 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
                     break;
                 case "Home":
                     event.preventDefault();
+                    if (this.selectedIndex === 0) {
+                        return;
+                    }
                     this.direction = "backward";
                     this.setSelectedItem(0, true);
                     break;
                 case "End":
                     event.preventDefault();
+                    if (this.selectedIndex === lastItem) {
+                        return;
+                    }
                     this.direction = "forward";
-                    this.setSelectedItem(this.items.length - 1, true);
+                    this.setSelectedItem(lastItem, true);
                     break;
             }
         };
@@ -431,17 +438,17 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
     }
     render() {
         const { direction } = this;
-        return (h(Host, { key: '7e95eee5f92be62d2817353deceb8ebceb330fb3' }, h(InteractiveContainer, { key: '01e449b425f695a3e1317190a7cb448ea4896e92', disabled: this.disabled }, h("div", { key: '1d59b22e5625facd195a57b8c9d8e64d855753a9', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
+        return (h(Host, { key: 'bff4155cb4358665eb6530b6637322598604d873' }, h(InteractiveContainer, { key: '7a388be689aca07856f350963c33bce1d4e5e278', disabled: this.disabled }, h("div", { key: 'c53c92b22ace937c0d2a6568ddd729ccb1b91108', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
                 [CSS.container]: true,
                 [CSS.containerOverlaid]: this.controlOverlay,
                 [CSS.containerEdged]: this.arrowType === "edge",
-            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, h("section", { key: '43ebcd93a10f25ca3a8c4cc9b2ff7f956293d35c', class: {
+            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, h("section", { key: 'cae379b167a37ef82417ab308c7d623300790122', class: {
                 [CSS.itemContainer]: true,
                 [CSS.itemContainerForward]: direction === "forward",
                 [CSS.itemContainerBackward]: direction === "backward",
             }, id: this.containerId,
             // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.storeItemContainerRef }, h("slot", { key: '11c3d92e21496781f2bec4d5b45072c39cbc1280', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
+            ref: this.storeItemContainerRef }, h("slot", { key: 'bf14a67b46e8946e9cafc57a8d0625b65513f702', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

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

@@ -4,8 +4,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as CSSColorMode, n as normalizeHex, a as hexify, b as alphaCompatible, c as Color, o as opacityToAlpha, d as CSS, e as alphaToOpacity, D as DEFAULT_COLOR, f as DIMENSIONS, g as getSliderWidth, p as parseMode, j as normalizeColor, k as colorEqual, H as HSV_LIMITS, O as OPACITY_LIMITS, t as toNonAlphaMode, l as normalizeAlpha, m as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, q as DEFAULT_STORAGE_KEY_PREFIX, r as toAlphaMode, R as RGB_LIMITS } from './utils.js';
-import { i as isPrimaryPointerButton, g as getElementDir } from './dom.js';
+import { C as CSSColorMode, n as normalizeHex, a as hexify, b as alphaCompatible, c as Color, o as opacityToAlpha, d as CSS, e as alphaToOpacity, D as DEFAULT_COLOR, f as DIMENSIONS, g as getSliderWidth, p as parseMode, j as normalizeColor, k as colorEqual, R as RGB_LIMITS, H as HSV_LIMITS, O as OPACITY_LIMITS, t as toNonAlphaMode, l as normalizeAlpha, m as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, q as DEFAULT_STORAGE_KEY_PREFIX, r as toAlphaMode } from './utils.js';
+import { i as isPrimaryPointerButton, g as getElementDir, k as focusFirstTabbable } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
@@ -38,8 +38,10 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 6);
         this.calciteColorPickerInput = createEvent(this, "calciteColorPickerInput", 6);
         this.internalColorUpdateContext = null;
+        this.isActiveChannelInputEmpty = false;
         this.mode = CSSColorMode.HEX;
         this.shiftKeyChannelAdjustment = 0;
+        this.upOrDownArrowKeyTracker = null;
         this.handleTabActivate = (event) => {
             this.channelMode = event.currentTarget.getAttribute("data-color-mode");
             this.updateChannelsFromColor(this.color);
@@ -103,8 +105,11 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                     ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
                     : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
             let inputValue;
-            if (this.isClearable && !input.value) {
+            if (!input.value) {
                 inputValue = "";
+                this.isActiveChannelInputEmpty = true;
+                // reset this to allow typing in new value, when channel input is cleared after ArrowUp or ArrowDown have been pressed
+                this.upOrDownArrowKeyTracker = null;
             }
             else {
                 const value = Number(input.value);
@@ -117,6 +122,22 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 // we treat nudging as a change event since the input won't emit when modifying the value directly
                 this.handleChannelChange(event);
             }
+            else if (inputValue !== "") {
+                this.handleChannelChange(event);
+            }
+        };
+        this.handleChannelBlur = (event) => {
+            const input = event.currentTarget;
+            const channelIndex = Number(input.getAttribute("data-channel-index"));
+            const channels = [...this.channels];
+            const restoreValueDueToEmptyInput = !input.value && !this.isClearable;
+            if (restoreValueDueToEmptyInput) {
+                input.value = channels[channelIndex]?.toString();
+            }
+        };
+        this.handleChannelFocus = (event) => {
+            const input = event.currentTarget;
+            input.selectText();
         };
         this.handleChannelChange = (event) => {
             const input = event.currentTarget;
@@ -129,7 +150,17 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 return;
             }
             const isAlphaChannel = channelIndex === 3;
-            const value = Number(input.value);
+            if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {
+                input.value =
+                    this.upOrDownArrowKeyTracker === "up"
+                        ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex)
+                            ? channels[channelIndex] + 1
+                            : this.getChannelInputLimit(channelIndex)).toString()
+                        : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();
+                this.isActiveChannelInputEmpty = false;
+                this.upOrDownArrowKeyTracker = null;
+            }
+            const value = input.value ? Number(input.value) : channels[channelIndex];
             channels[channelIndex] = isAlphaChannel ? opacityToAlpha(value) : value;
             this.updateColorFromChannels(channels);
         };
@@ -151,7 +182,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureColorFieldColor(offsetX, offsetY);
-            this.colorFieldScopeNode.focus();
+            this.focusScope(this.colorFieldScopeNode);
         };
         this.handleHueSliderPointerDown = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -165,7 +196,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureHueSliderColor(offsetX);
-            this.hueScopeNode.focus();
+            this.focusScope(this.hueScopeNode);
         };
         this.handleOpacitySliderPointerDown = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -179,7 +210,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect(),
             };
             this.captureOpacitySliderValue(offsetX);
-            this.opacityScopeNode.focus();
+            this.focusScope(this.opacityScopeNode);
         };
         this.globalPointerUpHandler = (event) => {
             if (!isPrimaryPointerButton(event)) {
@@ -268,7 +299,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             }))));
         };
         this.renderChannel = (value, index, ariaLabel, direction, suffix) => {
-            return (h("calcite-input-number", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
+            return (h("calcite-input-number", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onCalciteInternalInputNumberBlur: this.handleChannelBlur, onCalciteInternalInputNumberFocus: this.handleChannelFocus, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
                 // workaround to ensure input borders overlap as desired
                 // this is because the build transforms margin-left to its
                 // logical-prop, which is undesired as channels are always ltr
@@ -484,6 +515,22 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 : key === "ArrowDown" && shiftKey
                     ? -complementaryBump
                     : 0;
+        if (key === "ArrowUp") {
+            this.upOrDownArrowKeyTracker = "up";
+        }
+        if (key === "ArrowDown") {
+            this.upOrDownArrowKeyTracker = "down";
+        }
+    }
+    getChannelInputLimit(channelIndex) {
+        return this.channelMode === "rgb"
+            ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
+            : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    }
+    focusScope(focusEl) {
+        requestAnimationFrame(() => {
+            focusEl.focus();
+        });
     }
     //--------------------------------------------------------------------------
     //
@@ -493,7 +540,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     /** Sets focus on the component's first focusable element. */
     async setFocus() {
         await componentFocusable(this);
-        this.el.focus();
+        focusFirstTabbable(this.el);
     }
     //--------------------------------------------------------------------------
     //
@@ -561,10 +608,10 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (h(InteractiveContainer, { key: 'ed8d6d887db9dc3d3e345b52b290094bde5541a8', disabled: this.disabled }, h("div", { key: '06f7fc8c31b3165de13f20219d7c138f162e059d', class: CSS.container }, h("div", { key: '79d751d245545fe729cb62660436ac67589a4be8', class: CSS.controlAndScope }, h("canvas", { key: '6fa2716d392b2f41f7c96e21d6e30c7738df4191', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: 'c51f4c15946f87bb71674c3aadd024cbd7514d55', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (h(InteractiveContainer, { key: '3fdda1fd2366d3ffb3405dfa28a8424d78586a61', disabled: this.disabled }, h("div", { key: 'b3e95f63a7b4a9f49587fa458bf663cf82ff6961', class: CSS.container }, h("div", { key: '5770ab5094e87956f0f8a49e16f1a9418cc6e7ff', class: CSS.controlAndScope }, h("canvas", { key: '3773e30ddb17777a93b6091e4accc71e890f8cbb', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: '66dfba03f7a7e35f50c1fc0f23ccb0c0cf91c247', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), h("div", { key: '6f93b38c9b16234cd5bd68edbc6c44ed4351fab4', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: 'dd12a18e453040e5af19c1e37ccbec3573cfd06b', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: 'cf3b9c928b0d43f912726d13b584afd90f028aa5', class: CSS.sliders }, h("div", { key: '77906dfdb66f64405ae2a62c942064d66eccf22d', class: CSS.controlAndScope }, h("canvas", { key: '1b8ed2fd600e16ddd34c3e3d97ee7c3c3fc21125', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '73cb98a5adfd188433c434c0f832ac660f00966f', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), h("div", { key: '61100b2e5e07a647b75641afe11e7dcfb6df3dd1', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: '3fd47b8fb737f322646f136a22ec5281c12dcdcb', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: 'df7ed65ad05057a4a8c81239f1dc2f3341ea18fb', class: CSS.sliders }, h("div", { key: '5bc288a2e4da751f6e4a1b3a1b0b1294c6421306', class: CSS.controlAndScope }, h("canvas", { key: 'b350822aefb25ca6521d21a376c59885666798c5', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '5ba9570cb05da8620030918757acd21b57c844eb', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR).round().alpha(), class: { [CSS.scope]: true, [CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
@@ -907,7 +954,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     getAdjustedScopePosition(left, top) {
         return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
     }
-    static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
@@ -923,7 +969,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
     static get style() { return CalciteColorPickerStyle0; }
-}, [17, "calcite-color-picker", {
+}, [1, "calcite-color-picker", {
         "allowEmpty": [516, "allow-empty"],
         "alphaChannel": [4, "alpha-channel"],
         "channelsDisabled": [4, "channels-disabled"],

package/dist/components/calcite-combobox-item-group.js

@@ -5,12 +5,12 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';
-import { e as getAncestors, f as getDepth } from './utils2.js';
+import { f as getAncestors, j as getDepth } from './utils2.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.10.1
+ * v2.11.1
  */
 const CSS = {
     list: "list",
@@ -48,7 +48,7 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGro
     render() {
         const { el, scale } = this;
         const depth = getDepth(el);
-        return (h("ul", { key: 'f97f7287323229be32779d451a7e816b016c02b4', "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { key: 'e7aa9b0a2955562d9687c294b3b39eafbd04c5a2', class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { key: '5b02b92d24c05a93a5aeeda140f7422c50fb52b0', class: CSS.title }, this.label)), h("slot", { key: '1a2e106d97304df29b2cbf5841e65726e55960ae' })));
+        return (h("ul", { key: 'e57f7805f680b7d8b89f1f72c98197d81ad743dd', "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { key: '45ab46a79eb035a0785ea9d2665a3fce8cf7c183', class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { key: '380bfd8d85a132df1252e88971adca1b50104801', class: CSS.title }, this.label)), h("slot", { key: 'e0fd9bec45fc259ee2b439a0b80665c742fb5632' })));
     }
     get el() { return this; }
     static get style() { return CalciteComboboxItemGroupStyle0; }