@esri/calcite-components 5.0.0-next.72 → 5.0.0-next.74

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

@@ -1,11 +1,11 @@
 /*! 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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { b as focusElement, a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { j as focusElement, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";

package/dist/components/calcite-chip/index.d.ts

@@ -1,3 +1 @@
-import "../calcite-icon/index.js";
-import "../calcite-action/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-chip-group/customElement.d.ts

@@ -1,53 +1,54 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale, SelectionMode } from '../interfaces';
-import { Chip } from '../calcite-chip/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Scale, SelectionMode } from "../interfaces.js";
+import type { Chip } from "../calcite-chip/customElement.js";
 
 /** @slot  - A slot for adding one or more `calcite-chip`s. */
-export declare class ChipGroup extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Specifies the size of the component. Child `calcite-chip`s inherit the component's value.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies the component's selected items. */
-    readonly selectedItems: HTMLCalciteChipElement[];
-    /**
-     * 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
-     *
-     * `"none"` does not allow any selections.
-     *
-     * @default "none"
-     */
-    selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options
-     * @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>;
-    /** Fires when the component's selection changes. */
-    readonly calciteChipGroupSelect: TargetedEvent<this, void>;
-}
+export abstract class ChipGroup extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /**
+   * Specifies the size of the component. Child `calcite-chip`s inherit the component's value.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies the component's selected items. */
+  get selectedItems(): Chip[];
+  /**
+   * 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
+   *
+   * `"none"` does not allow any selections.
+   *
+   * @default "none"
+   */
+  accessor selectionMode: Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @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>;
+  /** Fires when the component's selection changes. */
+  readonly calciteChipGroupSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteChipGroupSelect: ChipGroup["calciteChipGroupSelect"]["detail"];
+  };
+}

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

@@ -1,11 +1,11 @@
 /*! 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.72 */
+v5.0.0-next.74 */
 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 { d as focusElementInGroup, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { f as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.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}`;

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

@@ -1,143 +1,141 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
-import { NumberingSystem } from '../../utils/locale';
-import { Format } from './utils';
-import { Channels, ColorMode, ColorValue, InternalColor } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Scale } from "../interfaces.js";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { Format } from "./utils.js";
+import type { ColorValue } from "./interfaces.js";
 
-export declare class ColorPicker extends LitElement {
-    /**
-     * When `true`, the component will allow updates to the color's alpha value.
-     *
-     * @default false
-     */
-    alphaChannel: boolean;
-    /**
-     * When `true`, hides the RGB/HSV channel inputs.
-     *
-     * @default false
-     */
-    channelsDisabled: boolean;
-    /**
-     * When `true`, an empty color (`null`) 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
-     */
-    clearable: boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, hides the color field.
-     *
-     * @default false
-     */
-    fieldDisabled: boolean;
-    /**
-     * The format of `value`.
-     *
-     * When `"auto"`, the format will be inferred from `value` when set.
-     *
-     * @default "auto"
-     */
-    format: Format;
-    /**
-     * When `true`, hides the hex input.
-     *
-     * @default false
-     */
-    hexDisabled: boolean;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem: NumberingSystem;
-    /**
-     * When `true`, hides the saved colors section.
-     *
-     * @default false
-     */
-    savedDisabled: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies the storage ID for colors. */
-    storageId: string;
-    /**
-     * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
-     *
-     * The type will be preserved as the color is updated.
-     *
-     * @see [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).
-     */
-    get value(): ColorValue | null;
-    set value(value: ColorValue | null);
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options
-     * @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>;
-    /** Fires when the color value has changed. */
-    readonly calciteColorPickerChange: TargetedEvent<this, void>;
-    /**
-     * Fires as the color value changes.
-     *
-     * Similar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.
-     */
-    readonly calciteColorPickerInput: TargetedEvent<this, void>;
-    private messages: {
-        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;
-    } & import('@arcgis/lumina/controllers').T9nMeta<{
-        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;
-    }>;
-}
+/**
+ * @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.
+   *
+   * @default false
+   */
+  accessor alphaChannel: boolean;
+  /**
+   * When `true`, hides the RGB/HSV channel inputs.
+   *
+   * @default false
+   */
+  accessor channelsDisabled: boolean;
+  /**
+   * When `true`, an empty color (`null`) 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 clearable: boolean;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, hides the color field.
+   *
+   * @default false
+   */
+  accessor fieldDisabled: boolean;
+  /**
+   * The format of `value`.
+   *
+   * When `"auto"`, the format will be inferred from `value` when set.
+   *
+   * @default "auto"
+   */
+  accessor format: Format;
+  /**
+   * When `true`, hides the hex input.
+   *
+   * @default false
+   */
+  accessor hexDisabled: boolean;
+  /** Overrides individual strings used by the component. */
+  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;
+  };
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * When `true`, hides the saved colors section.
+   *
+   * @default false
+   */
+  accessor savedDisabled: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies the storage ID for colors. */
+  accessor storageId: string;
+  /**
+   * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
+   *
+   * The type will be preserved as the color is updated.
+   *
+   * @see [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).
+   */
+  accessor value: ColorValue | null;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @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>;
+  /** Fires when the color value has changed. */
+  readonly calciteColorPickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires as the color value changes.
+   *
+   * Similar to the `calciteColorPickerChange` event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.
+   */
+  readonly calciteColorPickerInput: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteColorPickerChange: ColorPicker["calciteColorPickerChange"]["detail"];
+    calciteColorPickerInput: ColorPicker["calciteColorPickerInput"]["detail"];
+  };
+}

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

@@ -1,6 +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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { keyed } from "lit/directives/keyed.js";
@@ -9,7 +9,7 @@ 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 { 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";
@@ -17,7 +17,7 @@ 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, 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";
+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 {

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,24 +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];
-/** @public */
-export declare const CSSColorMode: {
+export const CSSColorMode: {
     HEX: "hex";
     HEXA: "hexa";
     RGB_CSS: "rgb-css";
@@ -26,10 +6,10 @@ export declare const CSSColorMode: {
     HSL_CSS: "hsl-css";
     HSLA_CSS: "hsla-css";
 };
-/** @public */
-type CSSColorMode = Enumify<typeof CSSColorMode>;
-/** @public */
-export declare const ObjectColorMode: {
+
+export type CSSColorMode = Enumify<typeof CSSColorMode>;
+
+export const ObjectColorMode: {
     RGB: "rgb";
     RGBA: "rgba";
     HSL: "hsl";
@@ -37,15 +17,11 @@ export declare const ObjectColorMode: {
     HSV: "hsv";
     HSVA: "hsva";
 };
-/** @public */
-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;