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

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

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { keyed } from "lit/directives/keyed.js";
@@ -6,16 +9,16 @@ import { throttle } from "es-toolkit";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { i as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
+import { k as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as clamp, r as remap, 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 { D as DEFAULT_COLOR, C as CSSColorMode, g as getSliderWidth, e as getColorFieldDimensions, S as STATIC_DIMENSIONS, n as normalizeHex, h as hexify, p as parseMode, f as colorFromValue, j as DEFAULT_STORAGE_KEY_PREFIX, k as alphaCompatible, l as colorEqual, O as OPACITY_LIMITS, R as RGB_LIMITS, H as HSV_LIMITS, m as CSS, o as opacityToAlpha, t as toAlphaMode, q as toNonAlphaMode, s as HUE_LIMIT_CONSTRAINED, u as normalizeAlpha, c as alphaToOpacity, v as SCOPE_SIZE, I as ICONS } from "../../chunks/utils.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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--2);line-height:1rem;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--1);line-height:1rem}: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--1);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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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 { 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 toAlphaMode, k as toNonAlphaMode, l as HUE_LIMIT_CONSTRAINED, m as normalizeAlpha, q as alphaToOpacity, r as SCOPE_SIZE, I as ICONS } 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}`;
 const throttleFor60FpsInMs = 16;
 class ColorPicker extends LitElement {
   constructor() {
@@ -121,6 +124,7 @@ class ColorPicker extends LitElement {
       };
     };
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.channelMode = "rgb";
     this.channels = this.toChannels(DEFAULT_COLOR);
     this.staticDimensions = STATIC_DIMENSIONS.m;
@@ -145,6 +149,12 @@ class ColorPicker extends LitElement {
   static {
     this.styles = styles;
   }
+  get baseColorFieldColor() {
+    return this.color || this.previousColor || DEFAULT_COLOR;
+  }
+  get effectiveSliderWidth() {
+    return this.dynamicDimensions.slider.width;
+  }
   get color() {
     return this._color;
   }
@@ -205,9 +215,6 @@ class ColorPicker extends LitElement {
       this.handleScaleChange(this.scale);
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     this.handleAlphaChannelDimensionsChange();
   }
@@ -217,12 +224,6 @@ class ColorPicker extends LitElement {
     window.removeEventListener("pointerup", this.globalPointerUpHandler);
     this.resizeObserver?.disconnect();
   }
-  get baseColorFieldColor() {
-    return this.color || this.previousColor || DEFAULT_COLOR;
-  }
-  get effectiveSliderWidth() {
-    return this.dynamicDimensions.slider.width;
-  }
   observeResize() {
     this.resizeObserver?.observe(this.el);
   }
@@ -839,7 +840,7 @@ class ColorPicker extends LitElement {
     const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
     const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
     const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${fieldDisabled ? null : html`<div class=${safeClassMap(CSS.controlAndScope)}><canvas class=${safeClassMap(CSS.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${ref(this.initColorField)}></canvas><div .ariaLabel=${vertical ? messages.value : messages.saturation} .ariaValueMax=${vertical ? HSV_LIMITS.v : HSV_LIMITS.s} aria-valuemin=0 .ariaValueNow=${(vertical ? color?.saturationv() : color?.value()) || "0"} class=${safeClassMap({ [CSS.scope]: true, [CSS.colorFieldScope]: true })} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${safeStyleMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${fieldDisabled ? null : html`<div class=${safeClassMap(CSS.controlAndScope)}><canvas class=${safeClassMap(CSS.colorField)} @pointerdown=${this.handleColorFieldPointerDown} ${ref(this.initColorField)}></canvas><div .ariaLabel=${vertical ? messages.value : messages.saturation} .ariaValueMax=${vertical ? HSV_LIMITS.v : HSV_LIMITS.s} aria-valuemin=0 .ariaValueNow=${(vertical ? color?.saturationv() : color?.value()) || "0"} class=${safeClassMap({ [CSS.scope]: true, [CSS.colorFieldScope]: true })} @keydown=${this.handleColorFieldScopeKeyDown} role=slider style=${safeStyleMap({
       top: `${adjustedColorFieldScopeTop || 0}px`,
       left: `${adjustedColorFieldScopeLeft || 0}px`
     })} tabindex=0 ${ref(this.colorFieldScopeRef)}></div></div>`}<div class=${safeClassMap(CSS.previewAndSliders)}><calcite-swatch class=${safeClassMap(CSS.preview)} .color=${selectedColorInHex} .label=${selectedColorInHex} .scale=${this.alphaChannel ? "l" : this.scale}></calcite-swatch><div class=${safeClassMap(CSS.sliders)}><div class=${safeClassMap(CSS.controlAndScope)}><canvas class=${safeClassMap({ [CSS.slider]: true, [CSS.hueSlider]: true })} @pointerdown=${this.handleHueSliderPointerDown} ${ref(this.initHueSlider)}></canvas><div .ariaLabel=${messages.hue} .ariaValueMax=${HSV_LIMITS.h} aria-valuemin=0 .ariaValueNow=${color?.round().hue() || DEFAULT_COLOR.round().hue()} class=${safeClassMap({ [CSS.scope]: true, [CSS.hueScope]: true })} @keydown=${this.handleHueScopeKeyDown} role=slider style=${safeStyleMap({

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

@@ -1,10 +1 @@
-import "../calcite-swatch/index.js";
-import "../calcite-color-picker-hex-input/index.js";
-import "../calcite-tabs/index.js";
-import "../calcite-tab-nav/index.js";
-import "../calcite-button/index.js";
-import "../calcite-swatch-group/index.js";
-import "../calcite-tab-title/index.js";
-import "../calcite-tab/index.js";
-import "../calcite-input-number/index.js";
 export * from "./customElement.js";

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

@@ -1,27 +1,32 @@
-import { ColorInstance } from 'color';
-export type ColorMode = "rgb" | "hsv";
-export type Channels = [number, number, number, number];
-export type InternalColor = ColorInstance;
 export type ColorValue = string | RGB | RGBA | HSV | HSVA | HSL | HSLA;
+
 export interface RGB {
-    r: number;
-    g: number;
-    b: number;
+  r: number;
+  g: number;
+  b: number;
 }
-export type RGBA = RGB & ObjectWithAlpha;
-interface ObjectWithAlpha {
-    a: number;
+
+export type RGBA = RGB
+  & ObjectWithAlpha;
+
+export interface ObjectWithAlpha {
+  a: number;
 }
+
 export interface HSV {
-    h: number;
-    s: number;
-    v: number;
+  h: number;
+  s: number;
+  v: number;
 }
-export type HSVA = HSV & ObjectWithAlpha;
+
+export type HSVA = HSV
+  & ObjectWithAlpha;
+
 export interface HSL {
-    h: number;
-    s: number;
-    l: number;
+  h: number;
+  s: number;
+  l: number;
 }
-export type HSLA = HSL & ObjectWithAlpha;
-export {};
+
+export type HSLA = HSL
+  & ObjectWithAlpha;

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

@@ -1,23 +1,4 @@
-import { ColorInstance } from 'color';
-import { Dimensions, Scale } from '../interfaces';
-import { ColorValue, HSLA, HSVA, RGB, RGBA } from './interfaces';
-import { STATIC_DIMENSIONS } from './resources';
-export declare const hexChar: RegExp;
-export declare function colorFromValue(value: ColorValue | null, clearable: boolean, mode: SupportedMode): ColorInstance | null;
-export declare const alphaToOpacity: (alpha: number) => number;
-export declare const opacityToAlpha: (opacity: number) => number;
-export declare function isValidHex(hex: string, hasAlpha?: boolean): boolean;
-export declare function canConvertToHexa(hex: string): boolean;
-export declare function isShorthandHex(hex: string, hasAlpha?: boolean): boolean;
-export declare function isLonghandHex(hex: string, hasAlpha?: boolean): boolean;
-export declare function normalizeHex(hex: string, hasAlpha?: boolean, convertFromHexToHexa?: boolean): string;
-export declare function hexify(color: ColorInstance, hasAlpha?: boolean): string;
-export declare function rgbToHex(color: RGB | RGBA): string;
-export declare function normalizeAlpha<T extends RGBA | HSVA | HSLA>(colorObject: ReturnType<ColorInstance["object"]>): T;
-export declare function normalizeColor(alphaColorObject: RGBA | HSVA | HSLA): ReturnType<ColorInstance["object"]>;
-export declare function hexToRGB(hex: string, hasAlpha?: boolean): RGB | RGBA;
-type Enumify<T> = T[keyof T];
-export declare const CSSColorMode: {
+export const CSSColorMode: {
     HEX: "hex";
     HEXA: "hexa";
     RGB_CSS: "rgb-css";
@@ -25,8 +6,10 @@ export declare const CSSColorMode: {
     HSL_CSS: "hsl-css";
     HSLA_CSS: "hsla-css";
 };
-type CSSColorMode = Enumify<typeof CSSColorMode>;
-export declare const ObjectColorMode: {
+
+export type CSSColorMode = Enumify<typeof CSSColorMode>;
+
+export const ObjectColorMode: {
     RGB: "rgb";
     RGBA: "rgba";
     HSL: "hsl";
@@ -34,14 +17,11 @@ export declare const ObjectColorMode: {
     HSV: "hsv";
     HSVA: "hsva";
 };
-type ObjectColorMode = Enumify<typeof ObjectColorMode>;
-export type SupportedMode = CSSColorMode | ObjectColorMode;
+
+export type ObjectColorMode = Enumify<typeof ObjectColorMode>;
+
 export type Format = "auto" | SupportedMode;
-export declare function parseMode(colorValue: ColorValue): SupportedMode | null;
-export declare function colorEqual(value1: ColorInstance | null, value2: ColorInstance | null): boolean;
-export declare function alphaCompatible(mode: SupportedMode): boolean;
-export declare function toAlphaMode(mode: SupportedMode): SupportedMode;
-export declare function toNonAlphaMode(mode: SupportedMode): SupportedMode;
-export declare function getSliderWidth(availableWidth: number, activeStaticDimensions: (typeof STATIC_DIMENSIONS)[Scale], hasAlpha: boolean): number;
-export declare function getColorFieldDimensions(availableWidth: number): Dimensions;
-export {};
+
+export type Enumify<T> = T[keyof T];
+
+export type SupportedMode = CSSColorMode | ObjectColorMode;

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

@@ -1,50 +1,50 @@
 /// <reference path="../../index.d.ts" />
-import { ColorInstance } from 'color';
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
-import { NumberingSystem } from '../../utils/locale';
-import { ColorPicker } from '../calcite-color-picker/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
+import type { NumberingSystem } from "../../utils/locale.js";
 
-export declare class ColorPickerHexInput extends LitElement {
-    /**
-     * When `true`, the component will allow updates to the color's alpha value.
-     *
-     * @default false
-     */
-    alphaChannel: boolean;
-    /**
-     * When `true`, an empty color (`undefined`) will be allowed as a `value`.
-     *
-     * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
-     *
-     * @default false
-     */
-    allowEmpty: boolean;
-    /**
-     * Specifies accessible label for the input field.
-     *
-     * @deprecated use `messages` instead
-     * @default "Hex"
-     */
-    hexLabel: string;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem?: NumberingSystem;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** The hex value. */
-    value: string;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Emitted when the hex value changes. */
-    readonly calciteColorPickerHexInputChange: TargetedEvent<this, void>;
-}
+export abstract class ColorPickerHexInput extends LitElement {
+  /**
+   * When `true`, an empty color (`undefined`) will be allowed as a `value`.
+   *
+   * When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
+   *
+   * @default false
+   */
+  accessor allowEmpty: boolean;
+  /**
+   * When `true`, the component will allow updates to the color's alpha value.
+   *
+   * @default false
+   */
+  accessor alphaChannel: boolean;
+  /**
+   * Specifies accessible label for the input field.
+   *
+   * @deprecated use `messages` instead
+   * @default "Hex"
+   */
+  accessor hexLabel: string;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  accessor numberingSystem: NumberingSystem | undefined;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** The hex value. */
+  accessor value: string;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Emitted when the hex value changes. */
+  readonly calciteColorPickerHexInputChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteColorPickerHexInputChange: ColorPickerHexInput["calciteColorPickerHexInputChange"]["detail"];
+  };
+}

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

@@ -1,17 +1,20 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 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, h as hexify, i as isValidHex, a as isLonghandHex, b as isShorthandHex, r as rgbToHex, o as opacityToAlpha, c as alphaToOpacity, O as OPACITY_LIMITS, d as hexChar } from "../../chunks/utils.js";
+import { n as normalizeHex, b as hexify, i as isValidHex, s as isLonghandHex, u as isShorthandHex, v as rgbToHex, o as opacityToAlpha, q as alphaToOpacity, O as OPACITY_LIMITS, w as hexChar } from "../../chunks/utils.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
   container: "container",
   hexInput: "hex-input",
   opacityInput: "opacity-input"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{--calcite-input-text-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-text-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-text-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color)}.opacity-input{--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-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:100px;margin-inline-start:-1px}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{--calcite-input-text-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-text-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-text-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color)}.opacity-input{--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-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:100px;margin-inline-start:-1px}:host([hidden]){display:none}[hidden]{display:none}`;
 const DEFAULT_COLOR = Color();
 class ColorPickerHexInput extends LitElement {
   constructor() {

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

@@ -1,3 +1 @@
-import "../calcite-input-text/index.js";
-import "../calcite-input-number/index.js";
 export * from "./customElement.js";

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

@@ -1,26 +1,25 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
 
 /** @deprecated Use the `calcite-swatch-group` and `calcite-swatch` components instead. */
-export declare class ColorPickerSwatch extends LitElement {
-    /**
-     * When `true`, the component is active.
-     *
-     * @default false
-     */
-    active: boolean;
-    /**
-     * The color value.
-     *
-     * @see [Color CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
-     */
-    color: string | null;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-}
+export abstract class ColorPickerSwatch extends LitElement {
+  /**
+   * When `true`, the component is active.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /**
+   * The color value.
+   *
+   * @see [Color CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
+   */
+  accessor color: string | null;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+}

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

@@ -1,10 +1,13 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 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 { C as getModeName } from "../../chunks/dom.js";
-import { h as hexify } from "../../chunks/utils.js";
+import { e as getModeName } from "../../chunks/dom.js";
+import { b as hexify } from "../../chunks/utils.js";
 const CSS = {
   swatch: "swatch",
   noColorSwatch: "swatch--no-color",
@@ -23,7 +26,7 @@ const IDS = {
   checker: "checker",
   shape: "shape"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{position:relative;display:inline-flex}:host([scale=s]){block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch rect{transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1)}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}.swatch--no-color line{stroke:var(--calcite-color-status-danger)}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{position:relative;display:inline-flex}:host([scale=s]){block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch rect{transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1)}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}.swatch--no-color line{stroke:var(--calcite-color-status-danger)}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}`;
 class ColorPickerSwatch extends LitElement {
   constructor() {
     super(...arguments);