@esri/calcite-components 5.2.0-next.8 → 5.2.0-next.80

package/dist/components/calcite-color-picker/customElement.d.ts

@@ -1,29 +1,10 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { Format } from "./utils.js";
-import type { ColorValue } from "./interfaces.js";
+import type { ColorValue } from "./types.js";
 
-/**
- * @cssproperty [--calcite-color-picker-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-color-picker-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-color-picker-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-color-picker-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-color-picker-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-color-picker-input-background-color] - Specifies the component's input background color.
- * @cssproperty [--calcite-color-picker-input-border-color] - Specifies the component's input border color.
- * @cssproperty [--calcite-color-picker-input-text-color] - Specifies the component's input text color.
- * @cssproperty [--calcite-color-picker-input-prefix-text-color] - When `hexDisabled` is not `true`, specifies the component's input prefix text color.
- * @cssproperty [--calcite-color-picker-input-suffix-text-color] - When `alphaChannel` is `true`, specifies the component's input suffix text color.
- * @cssproperty [--calcite-color-picker-tab-border-color] - Specifies the component's tab border color.
- * @cssproperty [--calcite-color-picker-tab-text-color] - Specifies the component's tab text color.
- * @cssproperty [--calcite-color-picker-tab-accent-color-press] - Specifies the component's tab accent color when selected or active.
- * @cssproperty [--calcite-color-picker-swatch-corner-radius] - Specifies the component's swatch corner radius.
- * @cssproperty [--calcite-color-picker-action-text-color-press] - Specifies the component's `savedColors` action text color when pressed.
- * @cssproperty [--calcite-color-picker-action-text-color-hover] - Specifies the component's `savedColors` action text color when hovered.
- * @cssproperty [--calcite-color-picker-action-text-color] - Specifies the component's `savedColors` action text color.
- */
 export abstract class ColorPicker extends LitElement {
   /**
    * When `true`, the component will allow updates to the color's alpha value.
@@ -71,28 +52,32 @@ export abstract class ColorPicker extends LitElement {
    * @default false
    */
   accessor hexDisabled: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      b?: string;
-      blue?: string;
-      deleteColor?: string;
-      g?: string;
-      green?: string;
-      h?: string;
-      hsv?: string;
-      hex?: string;
-      hue?: string;
-      noColor?: string;
-      opacity?: string;
-      r?: string;
-      red?: string;
-      rgb?: string;
-      s?: string;
-      saturation?: string;
-      saveColor?: string;
-      saved?: string;
-      v?: string;
-      value?: string;
+      b?: string | undefined;
+      blue?: string | undefined;
+      deleteColor?: string | undefined;
+      g?: string | undefined;
+      green?: string | undefined;
+      h?: string | undefined;
+      hsv?: string | undefined;
+      hex?: string | undefined;
+      hue?: string | undefined;
+      noColor?: string | undefined;
+      opacity?: string | undefined;
+      r?: string | undefined;
+      red?: string | undefined;
+      rgb?: string | undefined;
+      s?: string | undefined;
+      saturation?: string | undefined;
+      saveColor?: string | undefined;
+      saved?: string | undefined;
+      v?: string | undefined;
+      value?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;
@@ -116,7 +101,7 @@ export abstract class ColorPicker extends LitElement {
    * The type will be preserved as the color is updated.
    *
    * @see [MDN - CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color),
-   * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/color-picker/interfaces.ts#L10).
+   * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/color-picker/types.ts#L10).
    */
   accessor value: ColorValue | null | undefined;
   /**

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

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { keyed } from "lit/directives/keyed.js";
 import Color from "color";
@@ -8,7 +8,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { j as isPrimaryPointerButton } from "../../chunks/dom.js";
+import { h as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { r as remap, c as clamp, a as closeToRangeEdge } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -16,8 +16,8 @@ import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { D as DEFAULT_COLOR, C as CSSColorMode, g as getSliderWidth, a as getColorFieldDimensions, S as STATIC_DIMENSIONS, n as normalizeHex, b as hexify, p as parseMode, c as colorFromValue, d as DEFAULT_STORAGE_KEY_PREFIX, e as alphaCompatible, f as colorEqual, O as OPACITY_LIMITS, R as RGB_LIMITS, H as HSV_LIMITS, j as CSS, o as opacityToAlpha, t as toNonAlphaMode, k as HUE_LIMIT_CONSTRAINED, l as normalizeAlpha, m as alphaToOpacity, q as SCOPE_SIZE, I as ICONS, r as toAlphaMode } from "../../chunks/utils.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-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-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: var(--calcite-spacing-lg);font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}calcite-input-number{--calcite-input-number-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-number-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-number-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}calcite-button{--calcite-button-text-color: var(--calcite-color-picker-action-text-color);--calcite-button-text-color-press: var(--calcite-color-picker-action-text-color-press)}calcite-button:hover,calcite-button:focus{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-hover)}calcite-button:active{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-press)}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-picker-tab-border-color);--calcite-tab-text-color: var(--calcite-color-picker-tab-text-color);--calcite-tab-accent-color-press: var(--calcite-color-picker-tab-accent-color);--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}calcite-tab-title:hover{--calcite-color-text-1: var(--calcite-color-picker-tab-text-color-hover)}calcite-swatch{--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}.container{display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-picker-border-color, var(--calcite-color-border-3));background-color:var(--calcite-color-picker-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-color-picker-shadow, var(--calcite-shadow-none))}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none;border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-corner-radius-none) var(--calcite-corner-radius-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-relative-base);outline-color:transparent}.scope:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;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);gap:var(--calcite-spacing-xxs)}.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-picker-text-color, var(--calcite-color-text-1))}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors-buttons{display:flex}.swatch-group{margin-block-start:var(--calcite-color-picker-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { D as DEFAULT_COLOR, C as CSSColorMode, g as getSliderWidth, a as getColorFieldDimensions, S as STATIC_DIMENSIONS, n as normalizeHex, h as hexify, p as parseMode, c as colorFromValue, b as DEFAULT_STORAGE_KEY_PREFIX, d as alphaCompatible, e as colorEqual, O as OPACITY_LIMITS, R as RGB_LIMITS, H as HSV_LIMITS, f as CSS, o as opacityToAlpha, t as toNonAlphaMode, i as HUE_LIMIT_CONSTRAINED, j as normalizeAlpha, k as alphaToOpacity, l as SCOPE_SIZE, I as ICONS, m as toAlphaMode } from "../../chunks/utils3.js";
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);display:inline-block;font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: var(--calcite-spacing-lg);font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}calcite-input-number{--calcite-input-number-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-number-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-number-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}calcite-button{--calcite-button-text-color: var(--calcite-color-picker-action-text-color);--calcite-button-text-color-press: var(--calcite-color-picker-action-text-color-press)}calcite-button:hover,calcite-button:focus{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-hover)}calcite-button:active{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-press)}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-picker-tab-border-color);--calcite-tab-text-color: var(--calcite-color-picker-tab-text-color);--calcite-tab-accent-color-press: var(--calcite-color-picker-tab-accent-color);--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}calcite-tab-title:hover{--calcite-color-text-1: var(--calcite-color-picker-tab-text-color-hover)}calcite-swatch{--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}.container{display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-picker-border-color, var(--calcite-color-border-3));background-color:var(--calcite-color-picker-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius));box-shadow:var(--calcite-color-picker-shadow, var(--calcite-shadow-none))}.control-and-scope{display:flex;position:relative;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none;border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius)) var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius)) var(--calcite-corner-radius-none) var(--calcite-corner-radius-none)}.scope{font-size:var(--calcite-font-size-relative-base);outline-color:transparent;position:absolute;z-index:var(--calcite-z-index);border-radius:var(--calcite-corner-radius-pill);background-color:transparent;inline-size:var(--calcite-size-px);block-size:var(--calcite-size-px);pointer-events:none}.scope:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)));outline-offset:6px}.hex-and-channels-group{display:flex;flex-direction:column;flex-wrap:wrap;inline-size:100%}.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);gap:var(--calcite-spacing-xxs)}.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-picker-text-color, var(--calcite-color-text-1))}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors-buttons{display:flex}.swatch-group{margin-block-start:var(--calcite-color-picker-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
 const throttleFor60FpsInMs = 16;
 class ColorPicker extends LitElement {
   constructor() {
@@ -233,7 +233,7 @@ class ColorPicker extends LitElement {
   handleAlphaChannelChange(alphaChannel) {
     const { format } = this;
     if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
-      console.warn(`ignoring alphaChannel as the current format (${format}) does not support alpha`);
+      logger.warn(`ignoring alphaChannel as the current format (${format}) does not support alpha`);
       this.alphaChannel = false;
     }
   }
@@ -297,10 +297,11 @@ class ColorPicker extends LitElement {
       ArrowDown: { x: 0, y: 10 },
       ArrowLeft: { x: -10, y: 0 }
     };
-    if (arrowKeyToXYOffset[key]) {
+    const offset = arrowKeyToXYOffset[key];
+    if (offset) {
       event.preventDefault();
       this.scopeOrientation = key === "ArrowDown" || key === "ArrowUp" ? "vertical" : "horizontal";
-      this.captureColorFieldColor(this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0, this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0, false);
+      this.captureColorFieldColor(this.colorFieldScopeLeft === void 0 ? 0 : this.colorFieldScopeLeft + offset.x, this.colorFieldScopeTop === void 0 ? 0 : this.colorFieldScopeTop + offset.y, false);
     }
   }
   handleHueScopeKeyDown(event) {
@@ -312,9 +313,10 @@ class ColorPicker extends LitElement {
       ArrowDown: -1,
       ArrowLeft: -1
     };
-    if (arrowKeyToXOffset[key]) {
+    const offset = arrowKeyToXOffset[key];
+    if (offset) {
       event.preventDefault();
-      const delta = arrowKeyToXOffset[key] * modifier;
+      const delta = offset * modifier;
       const hue = this.baseColorFieldColor.hue();
       const color = this.baseColorFieldColor.hue(hue + delta);
       this.internalColorSet(color, false);
@@ -342,7 +344,7 @@ class ColorPicker extends LitElement {
     const input = event.currentTarget;
     const channelIndex = Number(input.getAttribute("data-channel-index"));
     const isAlphaChannel = channelIndex === 3;
-    const limit = isAlphaChannel ? OPACITY_LIMITS.max : this.channelMode === "rgb" ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]] : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    const limit = isAlphaChannel ? OPACITY_LIMITS.max : this.channelMode === "rgb" ? Object.values(RGB_LIMITS)[channelIndex] : Object.values(HSV_LIMITS)[channelIndex];
     let inputValue;
     if (!input.value) {
       inputValue = "";
@@ -397,7 +399,7 @@ class ColorPicker extends LitElement {
     }
   }
   getChannelInputLimit(channelIndex) {
-    return this.channelMode === "rgb" ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]] : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    return this.channelMode === "rgb" ? Object.values(RGB_LIMITS)[channelIndex] : Object.values(HSV_LIMITS)[channelIndex];
   }
   handleChannelChange(event) {
     const input = event.currentTarget;
@@ -460,7 +462,7 @@ class ColorPicker extends LitElement {
     }
   }
   showIncompatibleColorWarning(value, format) {
-    console.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
+    logger.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
   }
   setMode(format, warn = true) {
     const mode = format === "auto" ? this.mode : format;
@@ -472,14 +474,14 @@ class ColorPicker extends LitElement {
     if (alphaChannel && !isAlphaCompatible) {
       const alphaMode = toAlphaMode(mode);
       if (warn) {
-        console.warn(`setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`);
+        logger.warn(`setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`);
       }
       return alphaMode;
     }
     if (!alphaChannel && isAlphaCompatible) {
       const nonAlphaMode = toNonAlphaMode(mode);
       if (warn) {
-        console.warn(`setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`);
+        logger.warn(`setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`);
       }
       return nonAlphaMode;
     }
@@ -512,7 +514,7 @@ class ColorPicker extends LitElement {
       return normalizeHex(hexify(color.round(), hasAlpha), hasAlpha);
     }
     if (format.includes("-css")) {
-      const value = color[format.replace("-css", "").replace("a", "")]().round().string();
+      const value = (format.startsWith("rgb") ? color.rgb() : color.hsl()).round().string();
       const needToInjectAlpha = (format.endsWith("a") || format.endsWith("a-css")) && color.alpha() === 1;
       if (needToInjectAlpha) {
         const model = value.slice(0, 3);
@@ -521,14 +523,36 @@ class ColorPicker extends LitElement {
       }
       return value;
     }
-    const colorObject = (
+    const nonAlphaMode = toNonAlphaMode(format);
+    const roundedColor = (
       /* Color() does not support hsva, hsla nor rgba, so we use the non-alpha mode */
-      color[toNonAlphaMode(format)]().round().object()
+      (nonAlphaMode === "rgb" ? color.rgb() : nonAlphaMode === "hsl" ? color.hsl() : color.hsv()).round()
     );
+    const colorObject = roundedColor.object();
     if (format.endsWith("a")) {
       return normalizeAlpha(colorObject);
     }
-    return colorObject;
+    if (nonAlphaMode === "rgb") {
+      const { r, g, b } = colorObject;
+      return {
+        r,
+        g,
+        b
+      };
+    }
+    const { h, s } = colorObject;
+    if (nonAlphaMode === "hsl") {
+      return {
+        h,
+        s,
+        l: colorObject.l
+      };
+    }
+    return {
+      h,
+      s,
+      v: colorObject.v
+    };
   }
   getSliderCapSpacing() {
     const { staticDimensions: { slider: { height }, thumb: { radius } } } = this;
@@ -805,9 +829,10 @@ class ColorPicker extends LitElement {
       ArrowDown: -0.01,
       ArrowLeft: -0.01
     };
-    if (arrowKeyToXOffset[key]) {
+    const offset = arrowKeyToXOffset[key];
+    if (offset) {
       event.preventDefault();
-      const delta = arrowKeyToXOffset[key] * modifier;
+      const delta = offset * modifier;
       const alpha = this.baseColorFieldColor.alpha();
       const color = this.baseColorFieldColor.alpha(alpha + delta);
       this.internalColorSet(color, false);
@@ -821,14 +846,17 @@ class ColorPicker extends LitElement {
   }
   toChannels(color) {
     const { channelMode } = this;
-    const channels = color[channelMode]().round().array();
+    const channels = (channelMode === "rgb" ? color.rgb() : color.hsv()).round().array();
     if (channels.length === 3) {
       channels.push(1);
     }
     return channels;
   }
   getAdjustedScopePosition(left, top) {
-    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
+    return [
+      left === void 0 ? NaN : left - SCOPE_SIZE / 2,
+      top === void 0 ? NaN : top - SCOPE_SIZE / 2
+    ];
   }
   render() {
     const { channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, staticDimensions: { thumb: { radius: thumbRadius } }, fieldDisabled, hexDisabled, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation } = this;
@@ -876,7 +904,8 @@ class ColorPicker extends LitElement {
     return keyed(channelMode, html`<calcite-tab class=${safeClassMap(CSS.control)} .selected=${selected}><div class=${safeClassMap(CSS.channels)} dir=ltr>${channelsToRender.map((channelValue, index) => {
       const isAlphaChannel = index === 3;
       if (isAlphaChannel) {
-        channelValue = clearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
+        channelValue = // channels can only be undefined when clearable
+        clearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
       }
       return this.renderChannel(channelValue, index, channelAriaLabels[index], direction, isAlphaChannel ? "%" : "");
     })}</div></calcite-tab>`);

package/dist/components/calcite-color-picker-hex-input/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 
 export abstract class ColorPickerHexInput extends LitElement {

package/dist/components/calcite-color-picker-hex-input/customElement.js

@@ -5,7 +5,7 @@ import Color from "color";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { n as normalizeHex, b as hexify, i as isValidHex, s as isLonghandHex, u as isShorthandHex, v as rgbToHex, o as opacityToAlpha, m as alphaToOpacity, O as OPACITY_LIMITS, w as hexChar } from "../../chunks/utils.js";
+import { n as normalizeHex, h as hexify, q as isValidHex, r as isLonghandHex, s as isShorthandHex, u as rgbToHex, o as opacityToAlpha, k as alphaToOpacity, O as OPACITY_LIMITS, v as hexChar } from "../../chunks/utils3.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
   container: "container",

package/dist/components/calcite-color-picker-swatch/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 /** @deprecated Use the `calcite-swatch-group` and `calcite-swatch` components instead. */
 export abstract class ColorPickerSwatch extends LitElement {

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

@@ -4,8 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import Color from "color";
 import { css, html, nothing, svg } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { d as getModeName } from "../../chunks/dom.js";
-import { b as hexify } from "../../chunks/utils.js";
+import { y as getModeName } from "../../chunks/dom.js";
+import { h as hexify } from "../../chunks/utils3.js";
 const CSS = {
   swatch: "swatch",
   noColorSwatch: "swatch--no-color",

package/dist/components/calcite-combobox/customElement.d.ts

@@ -1,20 +1,12 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { Scale, SelectionAppearance, SelectionMode, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, SelectionAppearance, SelectionMode, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { ComboboxItem as HTMLCalciteComboboxItemElement } from "../calcite-combobox-item/customElement.js";
-import type { SelectionDisplay } from "./interfaces.js";
+import type { SelectionDisplay } from "./types.js";
 
 /**
- * @cssproperty [--calcite-combobox-divider-color] - Specifies the component's divider color.
- * @cssproperty [--calcite-combobox-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-combobox-icon-color-hover] - Specifies the component's icon color when hovered.
- * @cssproperty [--calcite-combobox-background-color] - Specifies the background color of the component's listbox.
- * @cssproperty [--calcite-combobox-input-border-color] - Specifies the border color of the component's input.
- * @cssproperty [--calcite-combobox-input-background-color] - Specifies the background color of the component's input.
- * @cssproperty [--calcite-combobox-input-height] - Specifies the height of the component's input.
- * @cssproperty [--calcite-combobox-input-text-color] - When `selectionDisplay` is `"single"`, specifies the text color of the component's input.
  * @slot  - A slot for adding `calcite-combobox-item`s.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -61,21 +53,29 @@ export abstract class Combobox extends LitElement {
    * @default 0
    */
   accessor maxItems: number;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      add?: string;
-      all?: string;
-      allSelected?: string;
-      clear?: string;
-      noMatches?: string;
-      removeTag?: string;
-      required?: string;
-      selectAll?: string;
-      selected?: string;
-      nonEditable?: string;
-      disabledSelectedCount?: string;
+      add?: string | undefined;
+      all?: string | undefined;
+      allSelected?: string | undefined;
+      clear?: string | undefined;
+      noMatches?: string | undefined;
+      removeTag?: string | undefined;
+      required?: string | undefined;
+      selectAll?: string | undefined;
+      selected?: string | undefined;
+      nonEditable?: string | undefined;
+      disabledSelectedCount?: string | undefined;
   };
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   accessor name: string | undefined;
   /**
    * When `true`, displays and positions the component.
@@ -84,11 +84,11 @@ export abstract class Combobox extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -137,37 +137,31 @@ export abstract class Combobox extends LitElement {
   /** The component's selected items. */
   get selectedItems(): HTMLCalciteComboboxItemElement[];
   /**
-   * Specifies the selection appearance, where
+   * Specifies the selection appearance.
    *
-   * `"icon"` displays a checkmark or dot, and
-   *
-   * `"highlight"` displays a background highlight.
+   * - `"icon"` displays a checkmark or dot.
+   * - `"highlight"` displays a background highlight.
    *
    * @default "icon"
    */
   accessor selectionAppearance: Extract<"icon" | "highlight", SelectionAppearance>;
   /**
-   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where:
-   *
-   * `"all"` displays all selections with individual `calcite-chip`s,
-   *
-   * `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and
+   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections.
    *
-   * `"single"` displays one `calcite-chip` with the total number of selections.
+   * - `"all"` displays all selections with individual `calcite-chip`s.
+   * - `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed.
+   * - `"single"` displays one `calcite-chip` with the total number of selections.
    *
    * @default "all"
    */
   accessor selectionDisplay: SelectionDisplay;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    *
    * @default "multiple"
    */