@esri/solutions-components 0.8.6-6.3 → 0.8.6

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

@@ -4,16 +4,16 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as Color } from './index2.js';
+import { c as color } from './index2.js';
 import { i as isPrimaryPointerButton, g as getElementDir } from './dom.js';
+import { 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 defineCustomElement$c, c as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './color-picker-hex-input.js';
+import { C as CSSColorMode, n as normalizeHex, a as hexify, b as alphaCompatible, o as opacityToAlpha, c as alphaToOpacity, p as parseMode, d as colorEqual, t as toNonAlphaMode, e as normalizeAlpha, f as normalizeColor, g as toAlphaMode } from './utils.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';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { r as remap, c as clamp, a as closeToRangeEdge } from './math.js';
 import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n.js';
-import { C as CSSColorMode, n as normalizeHex, a as hexify, b as alphaCompatible, o as opacityToAlpha, c as alphaToOpacity, p as parseMode, d as normalizeColor, e as colorEqual, t as toNonAlphaMode, f as normalizeAlpha, g as toAlphaMode } from './utils.js';
-import { d as defineCustomElement$c, 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, c as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './color-picker-hex-input.js';
 import { d as defineCustomElement$d } from './button.js';
 import { d as defineCustomElement$b } from './color-picker-swatch.js';
 import { d as defineCustomElement$a } from './icon.js';
@@ -27,8 +27,7 @@ import { d as defineCustomElement$3 } from './tab-title.js';
 import { d as defineCustomElement$2 } from './tabs.js';
 import { t as throttle } from './throttle.js';
 
-const colorPickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-color-picker-spacing:8px}:host([scale=s]) .container{inline-size:160px}:host([scale=s]) .saved-colors{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}:host([scale=m]){--calcite-color-picker-spacing:12px}:host([scale=m]) .container{inline-size:272px}:host([scale=l]){--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]) .container{inline-size:464px}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .saved-colors{grid-template-columns:repeat(auto-fill, 32px)}:host([scale=l]) .control-section{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}:host([scale=l]) .color-hex-options{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}.container{background-color:var(--calcite-color-foreground-1);display:inline-block;border:1px solid var(--calcite-color-border-1)}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}.scope:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset: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 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 throttleFor60FpsInMs = 16;
 const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends HTMLElement {
@@ -78,21 +77,21 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         };
         this.handleHexInputChange = (event) => {
             event.stopPropagation();
-            const { isClearable, color } = this;
+            const { allowEmpty, color: color$1 } = this;
             const input = event.target;
             const hex = input.value;
-            if (isClearable && !hex) {
+            if (allowEmpty && !hex) {
                 this.internalColorSet(null);
                 return;
             }
-            const normalizedHex = color && normalizeHex(hexify(color, alphaCompatible(this.mode)));
+            const normalizedHex = color$1 && normalizeHex(hexify(color$1, 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;
@@ -104,7 +103,7 @@ 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 (this.allowEmpty && !input.value) {
                 inputValue = "";
             }
             else {
@@ -123,7 +122,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             const input = event.currentTarget;
             const channelIndex = Number(input.getAttribute("data-channel-index"));
             const channels = [...this.channels];
-            const shouldClearChannels = this.isClearable && !input.value;
+            const shouldClearChannels = this.allowEmpty && !input.value;
             if (shouldClearChannels) {
                 this.channels = [null, null, null, null];
                 this.internalColorSet(null);
@@ -250,7 +249,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             return (h("calcite-tab-title", { class: CSS.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate, selected: selected }, label));
         };
         this.renderChannelsTab = (channelMode) => {
-            const { isClearable, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;
+            const { allowEmpty, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;
             const selected = channelMode === activeChannelMode;
             const isRgb = channelMode === "rgb";
             const channelAriaLabels = isRgb
@@ -262,7 +261,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 const isAlphaChannel = index === 3;
                 if (isAlphaChannel) {
                     channelValue =
-                        isClearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
+                        allowEmpty && !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 ? "%" : "");
@@ -363,7 +362,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         this.allowEmpty = false;
         this.alphaChannel = false;
         this.channelsDisabled = false;
-        this.clearable = false;
         this.color = DEFAULT_COLOR;
         this.disabled = false;
         this.format = "auto";
@@ -390,9 +388,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         this.opacityScopeLeft = undefined;
         this.scopeOrientation = undefined;
     }
-    handleAllowEmptyOrClearableChange() {
-        this.isClearable = this.clearable || this.allowEmpty;
-    }
     handleAlphaChannelChange(alphaChannel) {
         const { format } = this;
         if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
@@ -418,8 +413,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         /* wired up by t9n util */
     }
     handleValueChange(value, oldValue) {
-        const { isClearable, format } = this;
-        const checkMode = !isClearable || value;
+        const { allowEmpty, format } = this;
+        const checkMode = !allowEmpty || value;
         let modeChanged = false;
         if (checkMode) {
             const nextMode = parseMode(value);
@@ -442,14 +437,14 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             }
             return;
         }
-        const color = isClearable && !value
+        const color$1 = allowEmpty && !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, this.color);
+        const colorChanged = !colorEqual(color$1, this.color);
         if (modeChanged || colorChanged) {
-            this.internalColorSet(color, this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")), "internal");
+            this.internalColorSet(color$1, this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")), "internal");
         }
     }
     get baseColorFieldColor() {
@@ -499,12 +494,11 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     //--------------------------------------------------------------------------
     async componentWillLoad() {
         setUpLoadableComponent(this);
-        this.handleAllowEmptyOrClearableChange();
-        const { isClearable, color, format, value } = this;
-        const willSetNoColor = isClearable && !value;
+        const { allowEmpty, color: color$1, format, value } = this;
+        const willSetNoColor = allowEmpty && !value;
         const parsedMode = parseMode(value);
         const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
-        const initialColor = willSetNoColor ? null : valueIsCompatible ? Color(value) : color;
+        const initialColor = willSetNoColor ? null : valueIsCompatible ? color(value) : color$1;
         if (!valueIsCompatible) {
             this.showIncompatibleColorWarning(value, format);
         }
@@ -541,7 +535,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     //
     //--------------------------------------------------------------------------
     render() {
-        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 { 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 selectedColorInHex = color ? hexify(color, alphaChannel) : null;
         const hueTop = thumbRadius;
         const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (sliderWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
@@ -555,16 +549,16 @@ 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: '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,
+        return (h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.container }, h("div", { class: CSS.controlAndScope }, h("canvas", { 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", { 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: {
+            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: {
                 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", { 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,
+            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,
             // 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", { 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: {
+            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: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0",
@@ -579,7 +573,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             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: 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: {
+            } }, 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: {
                 [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 }, [
@@ -740,9 +734,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             this.colorFieldScopeLeft = x;
             this.colorFieldScopeTop = y;
         });
-        this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor, false);
+        this.drawThumb(this.colorFieldRenderingContext, radius, x, y, hsvColor);
     }
-    drawThumb(context, radius, x, y, color, applyAlpha) {
+    drawThumb(context, radius, x, y, color) {
         const startAngle = 0;
         const endAngle = 2 * Math.PI;
         const outlineWidth = 1;
@@ -753,20 +747,10 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         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);
-        const alpha = applyAlpha ? color.alpha() : 1;
-        context.fillStyle = color.rgb().alpha(alpha).string();
+        context.fillStyle = color.rgb().alpha(1).string();
         context.fill();
-        context.globalCompositeOperation = "source-over";
     }
     drawActiveHueSliderColor() {
         const { color } = this;
@@ -781,7 +765,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         requestAnimationFrame(() => {
             this.hueScopeLeft = sliderBoundX;
         });
-        this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor, false);
+        this.drawThumb(this.hueSliderRenderingContext, radius, sliderBoundX, y, hsvColor);
     }
     drawHueSlider() {
         const context = this.hueSliderRenderingContext;
@@ -801,7 +785,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         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);
@@ -880,7 +864,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         requestAnimationFrame(() => {
             this.opacityScopeLeft = sliderBoundX;
         });
-        this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor, true);
+        this.drawThumb(this.opacitySliderRenderingContext, radius, sliderBoundX, y, hsvColor);
     }
     getSliderBoundX(x, width, radius) {
         const closeToEdge = closeToRangeEdge(x, width, radius);
@@ -891,7 +875,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 : 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];
@@ -916,8 +900,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
-        "allowEmpty": ["handleAllowEmptyOrClearableChange"],
-        "clearable": ["handleAllowEmptyOrClearableChange"],
         "alphaChannel": ["handleAlphaChannelChange", "handleFormatOrAlphaChannelChange"],
         "color": ["handleColorChange"],
         "format": ["handleFormatOrAlphaChannelChange"],
@@ -926,12 +908,11 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         "value": ["handleValueChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return CalciteColorPickerStyle0; }
+    static get style() { return colorPickerCss; }
 }, [17, "calcite-color-picker", {
         "allowEmpty": [516, "allow-empty"],
         "alphaChannel": [4, "alpha-channel"],
         "channelsDisabled": [4, "channels-disabled"],
-        "clearable": [516],
         "color": [1040],
         "disabled": [516],
         "format": [513],
@@ -959,8 +940,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         "scopeOrientation": [32],
         "setFocus": [64]
     }, [[2, "keydown", "handleChannelKeyUpOrDown"], [2, "keyup", "handleChannelKeyUpOrDown"]], {
-        "allowEmpty": ["handleAllowEmptyOrClearableChange"],
-        "clearable": ["handleAllowEmptyOrClearableChange"],
         "alphaChannel": ["handleAlphaChannelChange", "handleFormatOrAlphaChannelChange"],
         "color": ["handleColorChange"],
         "format": ["handleFormatOrAlphaChannelChange"],

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

@@ -10,7 +10,7 @@ import { e as getAncestors, f as getDepth } from './utils2.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.8.2
+ * v2.4.0
  */
 const CSS = {
     list: "list",
@@ -19,7 +19,6 @@ 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 = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGroup extends HTMLElement {
     constructor() {
@@ -48,10 +47,10 @@ 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", { "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)));
     }
     get el() { return this; }
-    static get style() { return CalciteComboboxItemGroupStyle0; }
+    static get style() { return comboboxItemGroupCss; }
 }, [1, "calcite-combobox-item-group", {
         "afterEmptyGroup": [516, "after-empty-group"],
         "ancestors": [1040],

package/dist/components/calcite-fab.js

@@ -14,7 +14,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/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     button: "button",
@@ -24,7 +24,6 @@ const ICONS = {
 };
 
 const fabCss = ":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:flex;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}calcite-button:hover{--tw-shadow:var(--calcite-shadow-md);--tw-shadow-colored:var(--calcite-shadow-md);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}calcite-button:active{--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteFabStyle0 = fabCss;
 
 const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     constructor() {
@@ -80,14 +79,14 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     render() {
         const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
         const title = !textEnabled ? label || text || null : null;
-        return (h(InteractiveContainer, { key: '4203fb6efbcb95a451ff7853fdb8e60f992f96ee', disabled: disabled }, h("calcite-button", { key: 'c54c4bf5ce9cdb1e443a576051be4bafd284536a', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
+        return (h(InteractiveContainer, { disabled: disabled }, h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
             // 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: (buttonEl) => {
                 this.buttonEl = buttonEl;
             } }, this.textEnabled ? this.text : null)));
     }
     get el() { return this; }
-    static get style() { return CalciteFabStyle0; }
+    static get style() { return fabCss; }
 }, [1, "calcite-fab", {
         "appearance": [513],
         "kind": [513],

package/dist/components/calcite-inline-editable.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/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     wrapper: "wrapper",
@@ -30,8 +30,7 @@ const CSS = {
     controlsWrapper: "controls-wrapper",
 };
 
-const inlineEditableCss = ":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:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-color-foreground-2)}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;background-color:var(--calcite-color-foreground-1);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}.wrapper .input-wrapper{flex:1 1 0%}.controls-wrapper{display:flex}:host([disabled]) .cancel-editing-button-wrapper{border-color:var(--calcite-color-border-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteInlineEditableStyle0 = inlineEditableCss;
+const inlineEditableCss = ":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:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-color-foreground-2)}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;background-color:var(--calcite-color-foreground-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.wrapper .input-wrapper{flex:1 1 0%}.controls-wrapper{display:flex}:host([disabled]) .cancel-editing-button-wrapper{border-color:var(--calcite-color-border-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable extends HTMLElement {
     constructor() {
@@ -174,16 +173,16 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         updateHostInteraction(this);
     }
     render() {
-        return (h(InteractiveContainer, { key: '13a425b04bd57b14d4d1a7705f79f3e1f86c2e5a', disabled: this.disabled }, h("div", { key: '29b3c35c384d6044bcfc4f94d9a153dde2842656', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { key: '1cf670abd3361519ee80465efd198d2217b4a1e2', class: CSS.inputWrapper }, h("slot", { key: '86d343f2dbd9bdd4803b8552696530751945da69' })), h("div", { key: '87e0fe412f9a4e39f2d427601ae84f29f33249cc', class: CSS.controlsWrapper }, h("calcite-button", { key: '34badede2abdc00c0df6dee0fc9e618ac8876199', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, scale: this.scale, style: {
+        return (h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { class: CSS.inputWrapper }, h("slot", null)), h("div", { class: CSS.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, scale: this.scale, style: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button",
             // 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: (el) => (this.enableEditingButton = el) }), this.shouldShowControls && [
-            h("div", { key: 'a4f0cf191697a1aacd5cfd3719a8b4988dc8d8ff', class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { key: 'faaf29c7289c3d9846a4714fd60392552ec29a4e', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, type: "button",
+            h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, type: "button",
                 // 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: (el) => (this.cancelEditingButton = el) })),
-            h("calcite-button", { key: '0ba95994502e4e9e409a25d60512fc28f04e2c18', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, type: "button",
+            h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, type: "button",
                 // 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: (el) => (this.confirmEditingButton = el) }),
         ]))));
@@ -248,7 +247,7 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return CalciteInlineEditableStyle0; }
+    static get style() { return inlineEditableCss; }
 }, [17, "calcite-inline-editable", {
         "disabled": [516],
         "editingEnabled": [1540, "editing-enabled"],

package/dist/components/calcite-input-time-picker.js

@@ -12,7 +12,7 @@ import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './la
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { n as numberStringFormatter, g as getSupportedLocale, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap } from './focusTrapComponent.js';
-import { d as defineCustomElement$2, l as localizeTimeString, t as toISOTimeString, i as isValidTime, f as formatTimeString, a as formatTimePart } from './time-picker.js';
+import { l as localizeTimeString, t as toISOTimeString, i as isValidTime, f as formatTimeString, a as formatTimePart, d as defineCustomElement$2 } from './time-picker.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { d as decimalPlaces } from './math.js';
@@ -25,6 +25,15 @@ import { d as defineCustomElement$5 } from './loader.js';
 import { d as defineCustomElement$4 } from './popover.js';
 import { d as defineCustomElement$3 } from './progress.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
+ */
+const CSS = {
+    toggleIcon: "toggle-icon",
+};
+
 var SECONDS_A_MINUTE = 60;
 var SECONDS_A_HOUR = SECONDS_A_MINUTE * 60;
 var SECONDS_A_DAY = SECONDS_A_HOUR * 24;
@@ -65,8 +74,8 @@ const en = {
 };
 
 const en$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': en
+    __proto__: null,
+    'default': en
 });
 
 var padStart = function padStart(string, length, pad) {
@@ -1188,17 +1197,7 @@ const updateLocale = (function (option, Dayjs, dayjs) {
   };
 });
 
-/*!
- * 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.8.2
- */
-const CSS = {
-    toggleIcon: "toggle-icon",
-};
-
-const inputTimePickerCss = ":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;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing);--calcite-ui-icon-color:var(--calcite-color-text-3)}.input-wrapper:hover .toggle-icon,calcite-input-text:focus+.toggle-icon{--calcite-ui-icon-color:var(--calcite-color-text-1)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteInputTimePickerStyle0 = inputTimePickerCss;
+const inputTimePickerCss = ":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;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayjsLocaleToLocaleConfigImport = new Map([
@@ -1481,19 +1480,6 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         this.messages = undefined;
         this.validationMessage = undefined;
         this.validationIcon = undefined;
-        this.validity = {
-            valid: false,
-            badInput: false,
-            customError: false,
-            patternMismatch: false,
-            rangeOverflow: false,
-            rangeUnderflow: false,
-            stepMismatch: false,
-            tooLong: false,
-            tooShort: false,
-            typeMismatch: false,
-            valueMissing: false,
-        };
         this.name = undefined;
         this.numberingSystem = undefined;
         this.required = false;
@@ -1838,13 +1824,13 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
     // --------------------------------------------------------------------------
     render() {
         const { disabled, messages, readOnly, dialogId } = this;
-        return (h(Host, { key: '561e33708dcc90afdba91d4072b7979ff11f79c7', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '19c3360f4640bce039a46d8cb06a8927855bf13c', disabled: this.disabled }, h("div", { key: 'e48f09d0b5179e75e55cc9664f880bd350543d6a', class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { key: '717afb03fbcf590ebf927fe4bd0005a00e5fe2ec', "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
+        return (h(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input-text", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
             // 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.setInputAndTransitionEl }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { key: 'd62bfe8b3ddc24e012d84b61a05061a09e6322dd', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
+            ref: this.setInputAndTransitionEl }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
             // 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.setCalcitePopoverEl }, h("calcite-time-picker", { key: '6bfcee7272942b5476486a86933376b81aff7b23', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
+            ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
             // 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.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { key: '0ca8c8c04ef40e120530a4666761473b8d1b987f', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
@@ -1863,7 +1849,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         "value": ["valueWatcher"],
         "effectiveLocale": ["effectiveLocaleWatcher"]
     }; }
-    static get style() { return CalciteInputTimePickerStyle0; }
+    static get style() { return inputTimePickerCss; }
 }, [17, "calcite-input-time-picker", {
         "open": [1540],
         "disabled": [516],
@@ -1874,7 +1860,6 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         "messages": [1040],
         "validationMessage": [1, "validation-message"],
         "validationIcon": [520, "validation-icon"],
-        "validity": [1040],
         "name": [1],
         "numberingSystem": [1, "numbering-system"],
         "required": [516],