@esri/solutions-components 0.8.12 → 0.8.13

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

@@ -3,25 +3,25 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-164d485a.js';
-import { c as color, C as CSS, D as DEFAULT_COLOR, a as DIMENSIONS, H as HSV_LIMITS, O as OPACITY_LIMITS, b as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, d as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './resources-61b0cdad.js';
-import { i as isPrimaryPointerButton, a as getElementDir } from './dom-38c6f027.js';
-import { C as CSSColorMode, n as normalizeHex, h as hexify, o as opacityToAlpha, a as alphaToOpacity, b as alphaCompatible, p as parseMode, c as colorEqual, t as toNonAlphaMode, d as normalizeAlpha, e as toAlphaMode, f as normalizeColor } from './utils-a15078af.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-39bf5602.js';
-import { i as isActivationKey } from './key-c83d835f.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
-import { r as remap, c as clamp, a as closeToRangeEdge } from './math-efada7a9.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-436fb2b1.js';
-import { t as throttle } from './throttle-9ab70933.js';
-import './_commonjsHelpers-0f74c230.js';
-import './guid-b75a5f7b.js';
-import './resources-8834f920.js';
-import './browser-d60104bd.js';
-import './observers-d04d1da9.js';
-import './debounce-229b1a22.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ba5da2b0.js';
+import { C as Color, a as CSS, D as DEFAULT_COLOR, b as DIMENSIONS, H as HSV_LIMITS, O as OPACITY_LIMITS, c as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, d as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './resources-da3b53f5.js';
+import { i as isPrimaryPointerButton, a as getElementDir } from './dom-d675fe65.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-52276a00.js';
+import { i as isActivationKey } from './key-092b6260.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-cca582a3.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-353c1c36.js';
+import { r as remap, c as clamp, a as closeToRangeEdge } from './math-81650811.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-165900a5.js';
+import { C as CSSColorMode, n as normalizeHex, h as hexify, o as opacityToAlpha, a as alphaToOpacity, b as alphaCompatible, p as parseMode, c as normalizeColor, d as colorEqual, t as toNonAlphaMode, e as normalizeAlpha, f as toAlphaMode } from './utils-6419e941.js';
+import { t as throttle } from './throttle-aed86bf3.js';
+import './guid-f05d01d5.js';
+import './resources-1febf4c6.js';
+import './browser-9897260d.js';
+import './observers-19e5cb73.js';
+import './debounce-6e9ade8c.js';
 
-const colorPickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, 32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-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:11px}.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)}.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}";
+const colorPickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, 32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:11px}.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)}.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}";
+const CalciteColorPickerStyle0 = colorPickerCss;
 
 const throttleFor60FpsInMs = 16;
 const ColorPicker = class {
@@ -69,21 +69,21 @@ const ColorPicker = class {
         };
         this.handleHexInputChange = (event) => {
             event.stopPropagation();
-            const { allowEmpty, color: color$1 } = this;
+            const { isClearable, color } = this;
             const input = event.target;
             const hex = input.value;
-            if (allowEmpty && !hex) {
+            if (isClearable && !hex) {
                 this.internalColorSet(null);
                 return;
             }
-            const normalizedHex = color$1 && normalizeHex(hexify(color$1, alphaCompatible(this.mode)));
+            const normalizedHex = color && normalizeHex(hexify(color, alphaCompatible(this.mode)));
             if (hex !== normalizedHex) {
-                this.internalColorSet(color(hex));
+                this.internalColorSet(Color(hex));
             }
         };
         this.handleSavedColorSelect = (event) => {
             const swatch = event.currentTarget;
-            this.internalColorSet(color(swatch.color));
+            this.internalColorSet(Color(swatch.color));
         };
         this.handleChannelInput = (event) => {
             const input = event.currentTarget;
@@ -95,7 +95,7 @@ const ColorPicker = class {
                     ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
                     : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
             let inputValue;
-            if (this.allowEmpty && !input.value) {
+            if (this.isClearable && !input.value) {
                 inputValue = "";
             }
             else {
@@ -114,7 +114,7 @@ const ColorPicker = class {
             const input = event.currentTarget;
             const channelIndex = Number(input.getAttribute("data-channel-index"));
             const channels = [...this.channels];
-            const shouldClearChannels = this.allowEmpty && !input.value;
+            const shouldClearChannels = this.isClearable && !input.value;
             if (shouldClearChannels) {
                 this.channels = [null, null, null, null];
                 this.internalColorSet(null);
@@ -241,7 +241,7 @@ const ColorPicker = class {
             return (h("calcite-tab-title", { class: CSS.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate, selected: selected }, label));
         };
         this.renderChannelsTab = (channelMode) => {
-            const { allowEmpty, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;
+            const { isClearable, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;
             const selected = channelMode === activeChannelMode;
             const isRgb = channelMode === "rgb";
             const channelAriaLabels = isRgb
@@ -253,7 +253,7 @@ const ColorPicker = class {
                 const isAlphaChannel = index === 3;
                 if (isAlphaChannel) {
                     channelValue =
-                        allowEmpty && !channelValue ? channelValue : alphaToOpacity(channelValue);
+                        isClearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
                 }
                 /* the channel container is ltr, so we apply the host's direction */
                 return this.renderChannel(channelValue, index, channelAriaLabels[index], direction, isAlphaChannel ? "%" : "");
@@ -354,6 +354,7 @@ const ColorPicker = class {
         this.allowEmpty = false;
         this.alphaChannel = false;
         this.channelsDisabled = false;
+        this.clearable = false;
         this.color = DEFAULT_COLOR;
         this.disabled = false;
         this.format = "auto";
@@ -380,6 +381,9 @@ const ColorPicker = class {
         this.opacityScopeLeft = undefined;
         this.scopeOrientation = undefined;
     }
+    handleAllowEmptyOrClearableChange() {
+        this.isClearable = this.clearable || this.allowEmpty;
+    }
     handleAlphaChannelChange(alphaChannel) {
         const { format } = this;
         if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
@@ -405,8 +409,8 @@ const ColorPicker = class {
         /* wired up by t9n util */
     }
     handleValueChange(value, oldValue) {
-        const { allowEmpty, format } = this;
-        const checkMode = !allowEmpty || value;
+        const { isClearable, format } = this;
+        const checkMode = !isClearable || value;
         let modeChanged = false;
         if (checkMode) {
             const nextMode = parseMode(value);
@@ -429,14 +433,14 @@ const ColorPicker = class {
             }
             return;
         }
-        const color$1 = allowEmpty && !value
+        const color = isClearable && !value
             ? null
-            : color(value != null && typeof value === "object" && alphaCompatible(this.mode)
+            : Color(value != null && typeof value === "object" && alphaCompatible(this.mode)
                 ? normalizeColor(value)
                 : value);
-        const colorChanged = !colorEqual(color$1, this.color);
+        const colorChanged = !colorEqual(color, this.color);
         if (modeChanged || colorChanged) {
-            this.internalColorSet(color$1, this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")), "internal");
+            this.internalColorSet(color, this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")), "internal");
         }
     }
     get baseColorFieldColor() {
@@ -486,11 +490,12 @@ const ColorPicker = class {
     //--------------------------------------------------------------------------
     async componentWillLoad() {
         setUpLoadableComponent(this);
-        const { allowEmpty, color: color$1, format, value } = this;
-        const willSetNoColor = allowEmpty && !value;
+        this.handleAllowEmptyOrClearableChange();
+        const { isClearable, color, format, value } = this;
+        const willSetNoColor = isClearable && !value;
         const parsedMode = parseMode(value);
         const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
-        const initialColor = willSetNoColor ? null : valueIsCompatible ? color(value) : color$1;
+        const initialColor = willSetNoColor ? null : valueIsCompatible ? Color(value) : color;
         if (!valueIsCompatible) {
             this.showIncompatibleColorWarning(value, format);
         }
@@ -527,7 +532,7 @@ const ColorPicker = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        const { allowEmpty, channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, dimensions: { slider: { width: sliderWidth }, thumb: { radius: thumbRadius }, }, hexDisabled, hideChannels, hideHex, hideSaved, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation, } = this;
+        const { channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, dimensions: { slider: { width: sliderWidth }, thumb: { radius: thumbRadius }, }, hexDisabled, hideChannels, hideHex, hideSaved, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation, } = this;
         const selectedColorInHex = color ? hexify(color, alphaChannel) : null;
         const hueTop = thumbRadius;
         const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (sliderWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
@@ -541,16 +546,16 @@ 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 (h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.container }, h("div", { class: CSS.controlAndScope }, h("canvas", { class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown,
+        return (h(InteractiveContainer, { key: '5f347cb136350e7661b7b479ee86a16bb85414c3', disabled: this.disabled }, h("div", { key: '0294cbc1d16db228c22a2ae1bd061d9a683c1378', class: CSS.container }, h("div", { key: 'f7531da7e77293d52f5f8220443258e40f07f2d3', class: CSS.controlAndScope }, h("canvas", { key: '6738d5bc8ec0f77c01eaac72b6b89edeea39abd3', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.initColorField }), h("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: {
+            ref: this.initColorField }), h("div", { key: '932e10e761c6e8732e3412b049c895df18c4358f', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
             }, tabindex: "0",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeColorFieldScope })), h("div", { class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { class: CSS.preview, color: selectedColorInHex, scale: "l" }), h("div", { class: CSS.sliders }, h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown,
+            ref: this.storeColorFieldScope })), h("div", { key: '1d1e670478df18f1a8ad35d9ca217b378e103468', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: 'e65dd58f2aebb184db914c3a2c4e9782eb4b1e7c', class: CSS.preview, color: selectedColorInHex, scale: "l" }), h("div", { key: '98fb46881b6c40899b8fdfa4afeb521356d1e250', class: CSS.sliders }, h("div", { key: '7367b44dcc87a8cfbd5cd913ebee690eeabfcb92', class: CSS.controlAndScope }, h("canvas", { key: '4fe31f39350ac02fe527452da248b07b573dadac', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.initHueSlider }), h("div", { "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: {
+            ref: this.initHueSlider }), h("div", { key: '47048d9a779471169b1c4ec14d70a1a258914b1a', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0",
@@ -565,7 +570,7 @@ const ColorPicker = class {
             ref: this.storeOpacityScope }))) : null)), noHex && noChannels ? null : (h("div", { class: {
                 [CSS.controlSection]: true,
                 [CSS.section]: true,
-            } }, h("div", { class: CSS.hexAndChannelsGroup }, noHex ? null : (h("div", { class: CSS.hexOptions }, h("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, alphaChannel: alphaChannel, class: CSS.control, messages: messages, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: scale, value: selectedColorInHex }))), noChannels ? null : (h("calcite-tabs", { class: {
+            } }, h("div", { class: CSS.hexAndChannelsGroup }, noHex ? null : (h("div", { class: CSS.hexOptions }, h("calcite-color-picker-hex-input", { allowEmpty: this.isClearable, alphaChannel: alphaChannel, class: CSS.control, messages: messages, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: scale, value: selectedColorInHex }))), noChannels ? null : (h("calcite-tabs", { class: {
                 [CSS.colorModeContainer]: true,
                 [CSS.splitSection]: true,
             }, scale: scale === "l" ? "m" : "s" }, h("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv")))))), noSaved ? null : (h("div", { class: { [CSS.savedColorsSection]: true, [CSS.section]: true } }, h("div", { class: CSS.header }, h("label", null, messages.saved), h("div", { class: CSS.savedColorsButtons }, h("calcite-button", { appearance: "transparent", class: CSS.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: scale, type: "button" }), h("calcite-button", { appearance: "transparent", class: CSS.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, onClick: this.saveColor, scale: scale, type: "button" }))), savedColors.length > 0 ? (h("div", { class: CSS.savedColors }, [
@@ -726,9 +731,9 @@ const ColorPicker = class {
             this.colorFieldScopeLeft = x;
             this.colorFieldScopeTop = y;
         });
-        this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor);
+        this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor, false);
     }
-    drawThumb(context, radius, x, y, color) {
+    drawThumb(context, radius, x, y, color, applyAlpha) {
         const startAngle = 0;
         const endAngle = 2 * Math.PI;
         const outlineWidth = 1;
@@ -739,10 +744,20 @@ const ColorPicker = class {
         context.strokeStyle = "rgba(0,0,0,0.3)";
         context.lineWidth = outlineWidth;
         context.stroke();
+        if (applyAlpha && color.alpha() < 1) {
+            const pattern = context.createPattern(this.getCheckeredBackgroundPattern(), "repeat");
+            context.beginPath();
+            context.arc(x, y, radius - 3, startAngle, endAngle);
+            context.fillStyle = pattern;
+            context.fill();
+        }
+        context.globalCompositeOperation = "source-atop";
         context.beginPath();
         context.arc(x, y, radius - 3, startAngle, endAngle);
-        context.fillStyle = color.rgb().alpha(1).string();
+        const alpha = applyAlpha ? color.alpha() : 1;
+        context.fillStyle = color.rgb().alpha(alpha).string();
         context.fill();
+        context.globalCompositeOperation = "source-over";
     }
     drawActiveHueSliderColor() {
         const { color } = this;
@@ -757,7 +772,7 @@ const ColorPicker = class {
         requestAnimationFrame(() => {
             this.hueScopeLeft = sliderBoundX;
         });
-        this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor);
+        this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor, false);
     }
     drawHueSlider() {
         const context = this.hueSliderRenderingContext;
@@ -777,7 +792,7 @@ const ColorPicker = class {
         const offset = 1 / (hueSliderColorStopKeywords.length - 1);
         let currentOffset = 0;
         hueSliderColorStopKeywords.forEach((keyword) => {
-            gradient.addColorStop(currentOffset, color(keyword).string());
+            gradient.addColorStop(currentOffset, Color(keyword).string());
             currentOffset += offset;
         });
         context.clearRect(0, 0, width, height + this.getSliderCapSpacing() * 2);
@@ -856,7 +871,7 @@ const ColorPicker = class {
         requestAnimationFrame(() => {
             this.opacityScopeLeft = sliderBoundX;
         });
-        this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor);
+        this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor, true);
     }
     getSliderBoundX(x, width, radius) {
         const closeToEdge = closeToRangeEdge(x, width, radius);
@@ -867,7 +882,7 @@ const ColorPicker = class {
                 : remap(x, 0, width, width - radius * 2, width - radius);
     }
     updateColorFromChannels(channels) {
-        this.internalColorSet(color(channels, this.channelMode));
+        this.internalColorSet(Color(channels, this.channelMode));
     }
     updateChannelsFromColor(color) {
         this.channels = color ? this.toChannels(color) : [null, null, null, null];
@@ -892,6 +907,8 @@ const ColorPicker = class {
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "allowEmpty": ["handleAllowEmptyOrClearableChange"],
+        "clearable": ["handleAllowEmptyOrClearableChange"],
         "alphaChannel": ["handleAlphaChannelChange", "handleFormatOrAlphaChannelChange"],
         "color": ["handleColorChange"],
         "format": ["handleFormatOrAlphaChannelChange"],
@@ -901,6 +918,6 @@ const ColorPicker = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-ColorPicker.style = colorPickerCss;
+ColorPicker.style = CalciteColorPickerStyle0;
 
 export { ColorPicker as calcite_color_picker };

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

@@ -3,16 +3,16 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, g as getElement } from './index-164d485a.js';
-import { g as guid } from './guid-b75a5f7b.js';
-import { g as getAncestors, a as getDepth } from './utils-ef0ff036.js';
-import './dom-38c6f027.js';
-import './resources-8834f920.js';
+import { r as registerInstance, h, g as getElement } from './index-ba5da2b0.js';
+import { g as guid } from './guid-f05d01d5.js';
+import { g as getAncestors, a as getDepth } from './utils-26baa5d3.js';
+import './dom-d675fe65.js';
+import './resources-1febf4c6.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.4.0
+ * v2.8.2
  */
 const CSS = {
     list: "list",
@@ -21,6 +21,7 @@ const CSS = {
 };
 
 const comboboxItemGroupCss = ".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}.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}.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.75rem;--calcite-combobox-item-spacing-indent:1rem}:host,.list{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%;color:var(--calcite-color-text-3)}.title{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );border:0 solid;display:block;flex:1 1 0%;border-block-end-width:1px;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2);word-wrap:break-word;word-break:break-word;border-block-end-color:var(--calcite-color-border-3);padding-block:var(--calcite-combobox-item-spacing-unit-l);padding-inline:var(--calcite-combobox-item-spacing-unit-s);margin-inline-start:var(--calcite-combobox-item-indent-value)}::slotted(calcite-combobox-item-group:not([after-empty-group])){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteComboboxItemGroupStyle0 = comboboxItemGroupCss;
 
 const ComboboxItemGroup = class {
     constructor(hostRef) {
@@ -47,10 +48,10 @@ const ComboboxItemGroup = class {
     render() {
         const { el, scale } = this;
         const depth = getDepth(el);
-        return (h("ul", { "aria-labelledby": this.guid, class: { [CSS.list]: true, [`scale--${scale}`]: true }, role: "group" }, h("li", { class: { [CSS.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("span", { class: CSS.title }, this.label)), h("slot", null)));
+        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' })));
     }
     get el() { return getElement(this); }
 };
-ComboboxItemGroup.style = comboboxItemGroupCss;
+ComboboxItemGroup.style = CalciteComboboxItemGroupStyle0;
 
 export { ComboboxItemGroup as calcite_combobox_item_group };