@esri/calcite-components 5.2.0-next.9 → 5.2.0-next.91

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

@@ -3,23 +3,24 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent } from "@arcgis/lumina";
-import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { e as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { i as isChip } from "../../chunks/resources9.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:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.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}`;
 class ChipGroup extends LitElement {
   constructor() {
     super();
     this.items = [];
     this.slotRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.scale = "m";
     this.selectedItems = [];
     this.selectionMode = "none";
     this.calciteChipGroupSelect = createEvent({ cancelable: false });
-    this.listen("calciteInternalChipKeyEvent", this.calciteInternalChipKeyEventListener);
+    this.listen("keydown", this.keyDownHandler);
     this.listen("calciteChipClose", this.calciteChipCloseListener);
     this.listen("calciteChipSelect", this.calciteChipSelectListener);
     this.listen("calciteInternalChipSelect", this.calciteInternalChipSelectListener);
@@ -35,25 +36,27 @@ class ChipGroup extends LitElement {
     return this.focusSetter(() => this.selectedItems[0] || this.items[0], options);
   }
   willUpdate(changes) {
-    if (changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none")) {
+    if ((changes.has("scale") || changes.has("selectionMode")) && (this.hasUpdated || this.selectionMode !== "none")) {
       this.updateItems();
     }
   }
-  calciteInternalChipKeyEventListener(event) {
-    if (event.composedPath().includes(this.el)) {
-      const destinationFromKey = {
-        ArrowRight: "next",
-        ArrowLeft: "previous",
-        Home: "first",
-        End: "last"
-      };
-      const destination = destinationFromKey[event.detail.key];
-      if (destination) {
-        const interactiveItems = this.items?.filter((el) => !el.disabled);
-        focusElementInGroup(interactiveItems, event.detail.target, destination, true, true, true);
-      }
+  keyDownHandler(event) {
+    const destinationFromKey = {
+      ArrowRight: "next",
+      ArrowLeft: "previous",
+      Home: "first",
+      End: "last"
+    };
+    const destination = destinationFromKey[event.key];
+    if (event.defaultPrevented || !destination) {
+      return;
     }
-    event.stopPropagation();
+    const chip = event.composedPath().find(isChip);
+    if (!chip || !this.items.includes(chip)) {
+      return;
+    }
+    const interactiveItems = this.items.filter((el) => !el.disabled);
+    focusElementInGroup(interactiveItems, chip, destination, true, true, true);
   }
   calciteChipCloseListener(event) {
     const item = event.target;
@@ -66,7 +69,7 @@ class ChipGroup extends LitElement {
         focusElementInGroup(this.items, item, "first", false, false);
       }
     }
-    this.items = this.items?.filter((el) => el !== item);
+    this.items = this.items.filter((el) => el !== item);
     event.stopPropagation();
   }
   calciteChipSelectListener(event) {
@@ -91,7 +94,7 @@ class ChipGroup extends LitElement {
     event.stopPropagation();
   }
   updateItems(event) {
-    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip")) || [];
+    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter(isChip) || [];
     this.items = !event ? itemsFromSlot : slotChangeGetAssignedElements(event);
     if (this.items?.length < 1) {
       return;
@@ -105,7 +108,7 @@ class ChipGroup extends LitElement {
     this.setSelectedItems(false);
   }
   updateSelectedItems() {
-    this.selectedItems = this.items?.filter((el) => el.selected);
+    this.selectedItems = this.items.filter((el) => el.selected);
   }
   setSelectedItems(emit, elToMatch) {
     if (elToMatch) {

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

@@ -1,29 +1,49 @@
 /// <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";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-color-picker-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-color-picker-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-color-picker-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-color-picker-shadow": "*";
+  /** Specifies the component's text color. */
+  "--calcite-color-picker-text-color": "*";
+  /** Specifies the component's input background color. */
+  "--calcite-color-picker-input-background-color": "*";
+  /** Specifies the component's input border color. */
+  "--calcite-color-picker-input-border-color": "*";
+  /** Specifies the component's input text color. */
+  "--calcite-color-picker-input-text-color": "*";
+  /** When `hexDisabled` is not `true`, specifies the component's input prefix text color. */
+  "--calcite-color-picker-input-prefix-text-color": "*";
+  /** When `alphaChannel` is `true`, specifies the component's input suffix text color. */
+  "--calcite-color-picker-input-suffix-text-color": "*";
+  /** Specifies the component's tab border color. */
+  "--calcite-color-picker-tab-border-color": "*";
+  /** Specifies the component's tab text color. */
+  "--calcite-color-picker-tab-text-color": "*";
+  /** Specifies the component's tab accent color when selected or active. */
+  "--calcite-color-picker-tab-accent-color-press": "*";
+  /** Specifies the component's swatch corner radius. */
+  "--calcite-color-picker-swatch-corner-radius": "*";
+  /** Specifies the component's `savedColors` action text color when pressed. */
+  "--calcite-color-picker-action-text-color-press": "*";
+  /** Specifies the component's `savedColors` action text color when hovered. */
+  "--calcite-color-picker-action-text-color-hover": "*";
+  /** Specifies the component's `savedColors` action text color. */
+  "--calcite-color-picker-action-text-color": "*";
+}
+}
 
-/**
- * @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 +91,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 +140,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,16 +8,16 @@ 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";
 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 useFocusable } from "../../chunks/useFocusable.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 toAlphaMode, i as toNonAlphaMode, j as HUE_LIMIT_CONSTRAINED, k as normalizeAlpha, l as alphaToOpacity, m as SCOPE_SIZE, I as ICONS } 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() {
@@ -121,7 +121,7 @@ class ColorPicker extends LitElement {
         slider: sliderDims
       };
     };
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.channelMode = "rgb";
     this.channels = this.toChannels(DEFAULT_COLOR);
@@ -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 {
@@ -21,7 +21,7 @@ export abstract class ColorPickerHexInput extends LitElement {
   /**
    * Specifies accessible label for the input field.
    *
-   * @deprecated use `messages` instead
+   * @deprecated in v1.4.0, removal target v6.0.0. Use the `messages` property instead.
    * @default "Hex"
    */
   accessor hexLabel: string;

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

@@ -5,8 +5,8 @@ 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 { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { n as normalizeHex, h as hexify, q as isValidHex, r as isLonghandHex, s as isShorthandHex, u as rgbToHex, o as opacityToAlpha, l as alphaToOpacity, O as OPACITY_LIMITS, v as hexChar } from "../../chunks/utils3.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 const CSS = {
   container: "container",
   hexInput: "hex-input",
@@ -19,7 +19,7 @@ class ColorPickerHexInput extends LitElement {
     super(...arguments);
     this.hexInputRef = createRef();
     this.opacityInputRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.internalColor = DEFAULT_COLOR;
     this.alphaChannel = false;
     this.allowEmpty = false;

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

@@ -1,8 +1,8 @@
 /// <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. */
+/** @deprecated in v3.3.0, removal target v6.0.0. Use the `calcite-swatch-group` and `calcite-swatch` components instead. */
 export abstract class ColorPickerSwatch extends LitElement {
   /**
    * When `true`, the component is active.

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",