@esri/solutions-components 0.8.5 → 0.8.6-6.2

package/dist/components/calcite-chip-group.js

@@ -4,12 +4,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { w as focusElementInGroup, t as toAriaBoolean } from './dom.js';
+import { h as slotChangeGetAssignedElements, x as focusElementInGroup, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
-import { c as createObserver } from './observers.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
 
 const chipGroupCss = ":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}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:0.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:0.25rem}:host([scale=l]) .container{gap:0.75rem}: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 CalciteChipGroupStyle0 = chipGroupCss;
 
 const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLElement {
     constructor() {
@@ -17,7 +17,6 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.calciteChipGroupSelect = createEvent(this, "calciteChipGroupSelect", 6);
-        this.mutationObserver = createObserver("mutation", () => this.updateItems());
         this.items = [];
         //--------------------------------------------------------------------------
         //
@@ -25,18 +24,28 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
         //
         //--------------------------------------------------------------------------
         this.updateItems = (event) => {
-            var _a;
-            const target = event ? event.target : this.slotRefEl;
-            this.items = target === null || target === void 0 ? void 0 : target.assignedElements({ flatten: true }).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-chip"));
-            (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
+            var _a, _b, _c;
+            const itemsFromSlot = (_a = this.slotRefEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-chip"));
+            this.items = !event
+                ? itemsFromSlot
+                : slotChangeGetAssignedElements(event);
+            if (((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) < 1) {
+                return;
+            }
+            (_c = this.items) === null || _c === void 0 ? void 0 : _c.forEach((el) => {
                 el.interactive = true;
                 el.scale = this.scale;
                 el.selectionMode = this.selectionMode;
+                el.parentChipGroup = this.el;
             });
             this.setSelectedItems(false);
         };
+        this.updateSelectedItems = () => {
+            var _a;
+            this.selectedItems = (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter((el) => el.selected);
+        };
         this.setSelectedItems = (emit, elToMatch) => {
-            var _a, _b;
+            var _a;
             if (elToMatch) {
                 (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
                     const matchingEl = elToMatch === el;
@@ -55,7 +64,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
                     }
                 });
             }
-            this.selectedItems = (_b = this.items) === null || _b === void 0 ? void 0 : _b.filter((el) => el.selected);
+            this.updateSelectedItems();
             if (emit) {
                 this.calciteChipGroupSelect.emit();
             }
@@ -75,9 +84,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        var _a;
         connectInteractive(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     }
     componentDidRender() {
         disconnectInteractive(this);
@@ -86,10 +93,6 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     componentDidLoad() {
         setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
     async componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -117,6 +120,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
                     break;
             }
         }
+        event.stopPropagation();
     }
     calciteChipCloseListener(event) {
         var _a, _b, _c, _d;
@@ -133,11 +137,28 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
             }
         }
         this.items = (_d = this.items) === null || _d === void 0 ? void 0 : _d.filter((el) => el !== item);
+        event.stopPropagation();
     }
     calciteChipSelectListener(event) {
         if (event.composedPath().includes(this.el)) {
             this.setSelectedItems(true, event.target);
         }
+        event.stopPropagation();
+    }
+    calciteInternalChipSelectListener(event) {
+        if (event.composedPath().includes(this.el)) {
+            this.setSelectedItems(false, event.target);
+        }
+        event.stopPropagation();
+    }
+    calciteInternalSyncSelectedChips(event) {
+        if (event.composedPath().includes(this.el)) {
+            this.updateSelectedItems();
+            if (this.selectionMode === "single" && this.selectedItems.length > 1) {
+                this.setSelectedItems(false, event.target);
+            }
+        }
+        event.stopPropagation();
     }
     // --------------------------------------------------------------------------
     //
@@ -162,13 +183,15 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
         const { disabled } = this;
-        return (h(InteractiveContainer, { disabled: disabled }, h("div", { "aria-disabled": toAriaBoolean(disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
+        return (h(InteractiveContainer, { key: '341dd9e8f25d4d358ea6e33740d8b851a5fa0e9d', disabled: disabled }, h("div", { key: '66c9eaa00b7ca0c602f94a017f5b6ef6afc3bd93', "aria-disabled": toAriaBoolean(disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { key: '9611ab9bbadf169969834f1e39a29b79ad7ca68b', onSlotchange: this.updateItems,
+            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
+            ref: (el) => (this.slotRefEl = el) }))));
     }
     get el() { return this; }
     static get watchers() { return {
         "selectionMode": ["onSelectionModeChange"]
     }; }
-    static get style() { return chipGroupCss; }
+    static get style() { return CalciteChipGroupStyle0; }
 }, [1, "calcite-chip-group", {
         "disabled": [516],
         "label": [1],
@@ -176,7 +199,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
         "selectionMode": [513, "selection-mode"],
         "selectedItems": [1040],
         "setFocus": [64]
-    }, [[0, "calciteInternalChipKeyEvent", "calciteInternalChipKeyEventListener"], [0, "calciteChipClose", "calciteChipCloseListener"], [0, "calciteChipSelect", "calciteChipSelectListener"]], {
+    }, [[0, "calciteInternalChipKeyEvent", "calciteInternalChipKeyEventListener"], [0, "calciteChipClose", "calciteChipCloseListener"], [0, "calciteChipSelect", "calciteChipSelectListener"], [0, "calciteInternalChipSelect", "calciteInternalChipSelectListener"], [0, "calciteInternalSyncSelectedChips", "calciteInternalSyncSelectedChips"]], {
         "selectionMode": ["onSelectionModeChange"]
     }]);
 function defineCustomElement$1() {

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,7 +27,8 @@ 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-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 = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends HTMLElement {
@@ -77,21 +78,21 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         };
         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;
@@ -103,7 +104,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.allowEmpty && !input.value) {
+            if (this.isClearable && !input.value) {
                 inputValue = "";
             }
             else {
@@ -122,7 +123,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.allowEmpty && !input.value;
+            const shouldClearChannels = this.isClearable && !input.value;
             if (shouldClearChannels) {
                 this.channels = [null, null, null, null];
                 this.internalColorSet(null);
@@ -249,7 +250,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 { 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
@@ -261,7 +262,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
                 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 ? "%" : "");
@@ -362,6 +363,7 @@ 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";
@@ -388,6 +390,9 @@ 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)) {
@@ -413,8 +418,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         /* 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);
@@ -437,14 +442,14 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             }
             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() {
@@ -494,11 +499,12 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     //--------------------------------------------------------------------------
     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);
         }
@@ -535,7 +541,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     //
     //--------------------------------------------------------------------------
     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;
@@ -549,16 +555,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, { 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",
@@ -573,7 +579,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: 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 }, [
@@ -734,9 +740,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
             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;
@@ -747,10 +753,20 @@ 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);
-        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;
@@ -765,7 +781,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         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;
@@ -785,7 +801,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);
@@ -864,7 +880,7 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         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);
@@ -875,7 +891,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];
@@ -900,6 +916,8 @@ 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"],
@@ -908,11 +926,12 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         "value": ["handleValueChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return colorPickerCss; }
+    static get style() { return CalciteColorPickerStyle0; }
 }, [17, "calcite-color-picker", {
         "allowEmpty": [516, "allow-empty"],
         "alphaChannel": [4, "alpha-channel"],
         "channelsDisabled": [4, "channels-disabled"],
+        "clearable": [516],
         "color": [1040],
         "disabled": [516],
         "format": [513],
@@ -940,6 +959,8 @@ 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.4.0
+ * v2.8.2
  */
 const CSS = {
     list: "list",
@@ -19,6 +19,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 = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGroup extends HTMLElement {
     constructor() {
@@ -47,10 +48,10 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGro
     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 this; }
-    static get style() { return comboboxItemGroupCss; }
+    static get style() { return CalciteComboboxItemGroupStyle0; }
 }, [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.4.0
+ * v2.8.2
  */
 const CSS = {
     button: "button",
@@ -24,6 +24,7 @@ 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() {
@@ -79,14 +80,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, { 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",
+        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",
             // 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 fabCss; }
+    static get style() { return CalciteFabStyle0; }
 }, [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.4.0
+ * v2.8.2
  */
 const CSS = {
     wrapper: "wrapper",
@@ -30,7 +30,8 @@ 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: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 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 InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable extends HTMLElement {
     constructor() {
@@ -173,16 +174,16 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         updateHostInteraction(this);
     }
     render() {
-        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: {
+        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: {
                 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", { 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",
+            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",
                 // 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", { 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", { 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",
                 // 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) }),
         ]))));
@@ -247,7 +248,7 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return inlineEditableCss; }
+    static get style() { return CalciteInlineEditableStyle0; }
 }, [17, "calcite-inline-editable", {
         "disabled": [516],
         "editingEnabled": [1540, "editing-enabled"],