@esri/calcite-components 1.5.0-next.21 → 1.5.0-next.23

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

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import Color from "color";
 import { throttle } from "lodash-es";
 import { getElementDir, isPrimaryPointerButton } from "../../utils/dom";
-import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, OPACITY_LIMITS, RGB_LIMITS } from "./resources";
-import { alphaCompatible, alphaToOpacity, colorEqual, CSSColorMode, hexify, normalizeAlpha, normalizeColor, normalizeHex, opacityToAlpha, parseMode, toAlphaMode, toNonAlphaMode } from "./utils";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, HSV_LIMITS, OPACITY_LIMITS, RGB_LIMITS, } from "./resources";
+import { alphaCompatible, alphaToOpacity, colorEqual, CSSColorMode, hexify, normalizeAlpha, normalizeColor, normalizeHex, opacityToAlpha, parseMode, toAlphaMode, toNonAlphaMode, } from "./utils";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
-import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
-import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, } from "../../utils/locale";
 import { clamp } from "../../utils/math";
-import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 const throttleFor60FpsInMs = 16;
 export class ColorPicker {
   constructor() {
@@ -31,7 +31,7 @@ export class ColorPicker {
         ArrowUp: { x: 0, y: -10 },
         ArrowRight: { x: 10, y: 0 },
         ArrowDown: { x: 0, y: 10 },
-        ArrowLeft: { x: -10, y: 0 }
+        ArrowLeft: { x: -10, y: 0 },
       };
       if (arrowKeyToXYOffset[key]) {
         event.preventDefault();
@@ -46,7 +46,7 @@ export class ColorPicker {
         ArrowUp: 1,
         ArrowRight: 1,
         ArrowDown: -1,
-        ArrowLeft: -1
+        ArrowLeft: -1,
       };
       if (arrowKeyToXOffset[key]) {
         event.preventDefault();
@@ -94,9 +94,6 @@ export class ColorPicker {
         inputValue = clamped.toString();
       }
       input.value = inputValue;
-      // TODO: refactor calcite-input so we don't need to sync the internals
-      // https://github.com/Esri/calcite-design-system/issues/6100
-      input.internalSyncChildElValue();
     };
     this.handleChannelChange = (event) => {
       const input = event.currentTarget;
@@ -128,7 +125,7 @@ export class ColorPicker {
       document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
       this.activeCanvasInfo = {
         context: this.colorFieldRenderingContext,
-        bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect()
+        bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect(),
       };
       this.captureColorFieldColor(offsetX, offsetY);
       this.colorFieldScopeNode.focus();
@@ -142,7 +139,7 @@ export class ColorPicker {
       document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
       this.activeCanvasInfo = {
         context: this.hueSliderRenderingContext,
-        bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect()
+        bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect(),
       };
       this.captureHueSliderColor(offsetX);
       this.hueScopeNode.focus();
@@ -156,7 +153,7 @@ export class ColorPicker {
       document.addEventListener("pointerup", this.globalPointerUpHandler, { once: true });
       this.activeCanvasInfo = {
         context: this.opacitySliderRenderingContext,
-        bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect()
+        bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect(),
       };
       this.captureOpacitySliderValue(offsetX);
       this.opacityScopeNode.focus();
@@ -248,13 +245,13 @@ export class ColorPicker {
       }))));
     };
     this.renderChannel = (value, index, ariaLabel, direction, suffix) => {
-      return (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
+      return (h("calcite-input-number", { class: CSS.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
         // workaround to ensure input borders overlap as desired
         // this is because the build transforms margin-left to its
         // logical-prop, which is undesired as channels are always ltr
         style: {
-          marginLeft: index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : ""
-        }, suffixText: suffix, type: "number", value: value?.toString() }));
+          marginLeft: index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : "",
+        }, suffixText: suffix, value: value?.toString() }));
     };
     this.deleteColor = () => {
       const colorToDelete = hexify(this.color, this.alphaChannel);
@@ -296,7 +293,7 @@ export class ColorPicker {
       }
     }, throttleFor60FpsInMs);
     this.captureColorFieldColor = (x, y, skipEqual = true) => {
-      const { dimensions: { colorField: { height, width } } } = this;
+      const { dimensions: { colorField: { height, width }, }, } = this;
       const saturation = Math.round((HSV_LIMITS.s / width) * x);
       const value = Math.round((HSV_LIMITS.v / height) * (height - y));
       this.internalColorSet(this.baseColorFieldColor.hsv().saturationv(saturation).value(value), skipEqual);
@@ -326,7 +323,7 @@ export class ColorPicker {
         ArrowUp: 1,
         ArrowRight: 1,
         ArrowDown: -1,
-        ArrowLeft: -1
+        ArrowLeft: -1,
       };
       if (arrowKeyToXOffset[key]) {
         event.preventDefault();
@@ -510,7 +507,7 @@ export class ColorPicker {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { allowEmpty, channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, dimensions: { colorField: { width: colorFieldWidth }, 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: { colorField: { width: colorFieldWidth }, 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 ?? (sliderWidth * DEFAULT_COLOR.hue()) / HSV_LIMITS.h;
@@ -536,12 +533,12 @@ export class ColorPicker {
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.storeOpacityScope }))) : null)), noHex && noChannels ? null : (h("div", { class: {
         [CSS.controlSection]: true,
-        [CSS.section]: 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: {
         [CSS.colorModeContainer]: true,
-        [CSS.splitSection]: 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 }, [
-      ...savedColors.map((color) => (h("calcite-color-picker-swatch", { class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
+      ...savedColors.map((color) => (h("calcite-color-picker-swatch", { class: CSS.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 }))),
     ])) : null))));
   }
   // --------------------------------------------------------------------------
@@ -581,12 +578,12 @@ export class ColorPicker {
     return mode;
   }
   captureHueSliderColor(x) {
-    const { dimensions: { slider: { width } } } = this;
+    const { dimensions: { slider: { width }, }, } = this;
     const hue = (360 / width) * x;
     this.internalColorSet(this.baseColorFieldColor.hue(hue), false);
   }
   captureOpacitySliderValue(x) {
-    const { dimensions: { slider: { width } } } = this;
+    const { dimensions: { slider: { width }, }, } = this;
     const alpha = opacityToAlpha((OPACITY_LIMITS.max / width) * x);
     this.internalColorSet(this.baseColorFieldColor.alpha(alpha), false);
   }
@@ -628,7 +625,7 @@ export class ColorPicker {
     return colorObject;
   }
   getSliderCapSpacing() {
-    const { dimensions: { slider: { height }, thumb: { radius } } } = this;
+    const { dimensions: { slider: { height }, thumb: { radius }, }, } = this;
     return radius * 2 - height;
   }
   updateDimensions(scale = "m") {
@@ -636,7 +633,7 @@ export class ColorPicker {
   }
   drawColorField() {
     const context = this.colorFieldRenderingContext;
-    const { dimensions: { colorField: { height, width } } } = this;
+    const { dimensions: { colorField: { height, width }, }, } = this;
     context.fillStyle = this.baseColorFieldColor
       .hsv()
       .saturationv(100)
@@ -675,7 +672,7 @@ export class ColorPicker {
     }
     const adjustedSliderDimensions = {
       width: dimensions.slider.width,
-      height: dimensions.slider.height + (dimensions.thumb.radius - dimensions.slider.height / 2) * 2
+      height: dimensions.slider.height + (dimensions.thumb.radius - dimensions.slider.height / 2) * 2,
     };
     if (context === "all" || context === "hue-slider") {
       this.setCanvasContextSize(this.hueSliderRenderingContext?.canvas, adjustedSliderDimensions);
@@ -690,7 +687,7 @@ export class ColorPicker {
       return;
     }
     const hsvColor = color.hsv();
-    const { dimensions: { colorField: { height, width }, thumb: { radius } } } = this;
+    const { dimensions: { colorField: { height, width }, thumb: { radius }, }, } = this;
     const x = hsvColor.saturationv() / (HSV_LIMITS.s / width);
     const y = height - hsvColor.value() / (HSV_LIMITS.v / height);
     requestAnimationFrame(() => {
@@ -722,7 +719,7 @@ export class ColorPicker {
       return;
     }
     const hsvColor = color.hsv().saturationv(100).value(100);
-    const { dimensions: { slider: { height, width }, thumb: { radius } } } = this;
+    const { dimensions: { slider: { height, width }, thumb: { radius }, }, } = this;
     const x = hsvColor.hue() / (360 / width);
     const y = radius - height / 2 + height / 2;
     requestAnimationFrame(() => {
@@ -732,7 +729,7 @@ export class ColorPicker {
   }
   drawHueSlider() {
     const context = this.hueSliderRenderingContext;
-    const { dimensions: { slider: { height, width }, thumb: { radius: thumbRadius } } } = this;
+    const { dimensions: { slider: { height, width }, thumb: { radius: thumbRadius }, }, } = this;
     const x = 0;
     const y = thumbRadius - height / 2;
     const gradient = context.createLinearGradient(0, 0, width, 0);
@@ -754,7 +751,7 @@ export class ColorPicker {
   }
   drawOpacitySlider() {
     const context = this.opacitySliderRenderingContext;
-    const { baseColorFieldColor: previousColor, dimensions: { slider: { height, width }, thumb: { radius: thumbRadius } } } = this;
+    const { baseColorFieldColor: previousColor, dimensions: { slider: { height, width }, thumb: { radius: thumbRadius }, }, } = this;
     const x = 0;
     const y = thumbRadius - height / 2;
     context.clearRect(0, 0, width, height + this.getSliderCapSpacing() * 2);
@@ -812,7 +809,7 @@ export class ColorPicker {
       return;
     }
     const hsvColor = color;
-    const { dimensions: { slider: { width }, thumb: { radius } } } = this;
+    const { dimensions: { slider: { width }, thumb: { radius }, }, } = this;
     const x = alphaToOpacity(hsvColor.alpha()) / (OPACITY_LIMITS.max / width);
     const y = radius;
     requestAnimationFrame(() => {

package/dist/collection/components/color-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
 import Color from "color";
 export const CSS = {
@@ -34,62 +34,62 @@ export const CSS = {
   section: "section",
   slider: "slider",
   sliders: "sliders",
-  splitSection: "section--split"
+  splitSection: "section--split",
 };
 export const DEFAULT_COLOR = Color("#007AC2");
 export const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
 export const RGB_LIMITS = {
   r: 255,
   g: 255,
-  b: 255
+  b: 255,
 };
 export const HSV_LIMITS = {
   h: 360,
   s: 100,
-  v: 100
+  v: 100,
 };
 export const OPACITY_LIMITS = {
   min: 0,
-  max: 100
+  max: 100,
 };
 export const DIMENSIONS = {
   s: {
     slider: {
       height: 12,
-      width: 104
+      width: 104,
     },
     colorField: {
       height: 80,
-      width: 160
+      width: 160,
     },
     thumb: {
-      radius: 10
-    }
+      radius: 10,
+    },
   },
   m: {
     slider: {
       height: 12,
-      width: 204
+      width: 204,
     },
     colorField: {
       height: 150,
-      width: 272
+      width: 272,
     },
     thumb: {
-      radius: 10
-    }
+      radius: 10,
+    },
   },
   l: {
     slider: {
       height: 12,
-      width: 384
+      width: 384,
     },
     colorField: {
       height: 200,
-      width: 464
+      width: 464,
     },
     thumb: {
-      radius: 10
-    }
-  }
+      radius: 10,
+    },
+  },
 };

package/dist/collection/components/color-picker/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
 export const hexChar = /^[0-9A-F]$/i;
 const shorthandHex = /^#[0-9A-F]{3}$/i;
@@ -103,7 +103,7 @@ export const CSSColorMode = enumify({
   RGB_CSS: "rgb-css",
   RGBA_CSS: "rgba-css",
   HSL_CSS: "hsl-css",
-  HSLA_CSS: "hsla-css"
+  HSLA_CSS: "hsla-css",
 });
 export const ObjectColorMode = enumify({
   RGB: "rgb",
@@ -111,7 +111,7 @@ export const ObjectColorMode = enumify({
   HSL: "hsl",
   HSLA: "hsla",
   HSV: "hsv",
-  HSVA: "hsva"
+  HSVA: "hsva",
 });
 export function parseMode(colorValue) {
   if (typeof colorValue === "string") {

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

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
-import { h } from "@stencil/core";
-import { alphaToOpacity, hexChar, hexify, isLonghandHex, isValidHex, normalizeHex, opacityToAlpha, rgbToHex } from "../color-picker/utils";
+import { h, } from "@stencil/core";
+import { alphaToOpacity, hexChar, hexify, isLonghandHex, isValidHex, normalizeHex, opacityToAlpha, rgbToHex, } from "../color-picker/utils";
 import { CSS } from "./resources";
 import Color from "color";
 import { focusElement } from "../../utils/dom";
-import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 import { OPACITY_LIMITS } from "../color-picker/resources";
 const DEFAULT_COLOR = Color();
 export class ColorPickerHexInput {
@@ -113,7 +113,6 @@ export class ColorPickerHexInput {
       if (isValidHex(hex)) {
         event.preventDefault();
         this.hexInputNode.value = hex.slice(1);
-        this.hexInputNode.internalSyncChildElValue();
       }
     };
     this.previousNonNullValue = this.value;
@@ -169,7 +168,7 @@ export class ColorPickerHexInput {
     const hexInputValue = this.formatHexForInternalInput(value);
     const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
     const inputScale = scale === "l" ? "m" : "s";
-    return (h("div", { class: CSS.container }, h("calcite-input", { class: CSS.hexInput, label: messages?.hex || hexLabel, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onHexInputChange, onCalciteInternalInputBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
+    return (h("div", { class: CSS.container }, h("calcite-input-text", { class: CSS.hexInput, label: messages?.hex || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.storeHexInputRef }), alphaChannel ? (h("calcite-input-number", { class: CSS.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, scale: inputScale, suffixText: "%", value: opacityInputValue,
       // eslint-disable-next-line react/jsx-sort-props
@@ -233,7 +232,7 @@ export class ColorPickerHexInput {
       const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount);
       nudgedChannels = [
         ...nudgedRGBChannels,
-        this.alphaChannel ? channels[3] : undefined
+        this.alphaChannel ? channels[3] : undefined,
       ];
     }
     else {

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

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
 export const CSS = {
   container: "container",
   hexInput: "hex-input",
-  opacityInput: "opacity-input"
+  opacityInput: "opacity-input",
 };

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
 import { Fragment, h } from "@stencil/core";
 import Color from "color";
@@ -29,7 +29,7 @@ export class ColorPickerSwatch {
     const isEmpty = !this.internalColor;
     const classes = {
       [CSS.swatch]: true,
-      [CSS.noColorSwatch]: isEmpty
+      [CSS.noColorSwatch]: isEmpty,
     };
     return (h("svg", { class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
   }
@@ -46,7 +46,7 @@ export class ColorPickerSwatch {
       // see https://stackoverflow.com/a/7273346/194216
       // using attribute to work around Stencil using the prop name vs the attribute when rendering
       ["stroke-width"]: "2",
-      width: "100%"
+      width: "100%",
     };
     const isEmpty = !internalColor;
     if (isEmpty) {
@@ -56,7 +56,7 @@ export class ColorPickerSwatch {
     const hex = hexify(internalColor);
     const hexa = hexify(internalColor, alpha < 1);
     return (h(Fragment, null, h("title", null, hexa), h("defs", null, h("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), h("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), h("rect", { fill: hex, style: {
-        "clip-path": alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`
+        "clip-path": alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`,
       }, ...commonSwatchProps }), alpha < 1 ? (h("rect", { fill: hexa, key: "opacity-fill", style: { "clip-path": "polygon(100% 0, 100% 100%, 0 100%)" }, ...commonSwatchProps })) : null));
   }
   static get is() { return "calcite-color-picker-swatch"; }

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

@@ -1,19 +1,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
 export const CSS = {
   swatch: "swatch",
   noColorSwatch: "swatch--no-color",
-  checker: "checker"
+  checker: "checker",
 };
 export const COLORS = {
   borderLight: "rgba(0, 0, 0, 0.3)",
-  borderDark: "rgba(255, 255, 255, 0.15)"
+  borderDark: "rgba(255, 255, 255, 0.15)",
 };
 const checkerSquareSize = 4;
 export const CHECKER_DIMENSIONS = {
   squareSize: checkerSquareSize,
-  size: checkerSquareSize * 2
+  size: checkerSquareSize * 2,
 };

package/dist/collection/components/combobox/combobox.js

@@ -1,22 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { debounce } from "lodash-es";
 import { filter } from "../../utils/filter";
 import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
-import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition } from "../../utils/floating-ui";
-import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
+import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition, } from "../../utils/floating-ui";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot, submitForm, } from "../../utils/form";
 import { guid } from "../../utils/guid";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
-import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
-import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { connectOpenCloseComponent, disconnectOpenCloseComponent, } from "../../utils/openCloseComponent";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { XButton, CSS as XButtonCSS } from "../functional/XButton";
@@ -434,7 +434,7 @@ export class Combobox {
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
-      type: "menu"
+      type: "menu",
     }, delayed);
   }
   /** Sets focus on the component. */
@@ -649,7 +649,7 @@ export class Combobox {
     return this.items.map((item) => ({
       filterDisabled: item.filterDisabled,
       value: item.value,
-      label: item.textLabel
+      label: item.textLabel,
     }));
   }
   getNeedsIcon() {
@@ -768,7 +768,7 @@ export class Combobox {
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
-        "chip--active": activeChipIndex === i
+        "chip--active": activeChipIndex === i,
       };
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
@@ -783,16 +783,16 @@ export class Combobox {
     const showLabel = !open && single && !!selectedItem;
     return (h("span", { class: {
         "input-wrap": true,
-        "input-wrap--single": single
+        "input-wrap--single": single,
       } }, showLabel && (h("span", { class: {
         label: true,
-        "label--icon": !!selectedItem?.icon
+        "label--icon": !!selectedItem?.icon,
       }, key: "label" }, selectedItem.textLabel)), h("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
         input: true,
         "input--single": true,
         "input--transparent": this.activeChipIndex > -1,
         "input--hidden": showLabel,
-        "input--icon": !!this.placeholderIcon
+        "input--icon": !!this.placeholderIcon,
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.textInput = el) })));
@@ -805,11 +805,11 @@ export class Combobox {
     const classes = {
       [CSS.listContainer]: true,
       [FloatingCSS.animation]: true,
-      [FloatingCSS.animationActive]: open
+      [FloatingCSS.animationActive]: open,
     };
     return (h("div", { "aria-hidden": "true", class: {
         "floating-ui-container": true,
-        "floating-ui-container--active": open
+        "floating-ui-container--active": open,
       },
       // eslint-disable-next-line react/jsx-sort-props
       ref: setFloatingEl }, h("div", { class: classes,
@@ -837,7 +837,7 @@ export class Combobox {
     return (h(Host, { onClick: this.comboboxFocusHandler }, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
-        "wrapper--active": open
+        "wrapper--active": open,
       }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setReferenceEl }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));

package/dist/collection/components/combobox/resources.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 export const CSS = {
-  listContainer: "list-container"
+  listContainer: "list-container",
 };

package/dist/collection/components/combobox/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-item.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.21
+ * v1.5.0-next.23
  */
-import { h, Host } from "@stencil/core";
-import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { h, Host, } from "@stencil/core";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";
 import { getElementProp, getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { getAncestors, getDepth } from "../combobox/utils";
 import { CSS } from "./resources";
 /**
@@ -73,18 +73,18 @@ export class ComboboxItem {
     return this.icon ? (h("calcite-icon", { class: {
         [CSS.custom]: !!this.icon,
         [CSS.iconActive]: this.icon && this.selected,
-        [CSS.iconIndent]: true
+        [CSS.iconIndent]: true,
       }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: this.scale === "l" ? "m" : "s" })) : null;
   }
   renderSelectIndicator(showDot, iconPath) {
     return showDot ? (h("span", { class: {
         [CSS.icon]: true,
         [CSS.dot]: true,
-        [CSS.iconIndent]: true
+        [CSS.iconIndent]: true,
       } })) : (h("calcite-icon", { class: {
         [CSS.icon]: true,
         [CSS.iconActive]: this.selected,
-        [CSS.iconIndent]: true
+        [CSS.iconIndent]: true,
       }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: this.scale === "l" ? "m" : "s" }));
   }
   renderChildren() {
@@ -102,7 +102,7 @@ export class ComboboxItem {
       [CSS.label]: true,
       [CSS.selected]: this.selected,
       [CSS.active]: this.active,
-      [CSS.single]: isSingleSelect
+      [CSS.single]: isSingleSelect,
     };
     const depth = getDepth(this.el);
     return (h(Host, { "aria-hidden": "true" }, h("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, h("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), h("span", { class: "title" }, this.textLabel)), this.renderChildren())));