igniteui-webcomponents 7.3.0-beta.0 → 7.3.0

package/components/color-picker/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { addAriaProjector } from '#internals/controllers/aria-projection.js';\nimport {\n  addKeybindings,\n  altKey,\n  arrowDown,\n  arrowRight,\n  arrowUp,\n  endKey,\n  escapeKey,\n} from '#internals/controllers/key-bindings.js';\nimport { addRootClickController } from '#internals/controllers/root-click.js';\nimport { addSlotController, setSlots } from '#internals/controllers/slot.js';\nimport { shadowOptions } from '#internals/decorators/shadow-options.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { IgcBaseComboBoxComponent } from '#internals/mixins/combo-box.js';\nimport type { AbstractConstructor } from '#internals/mixins/constructor.js';\nimport { EventEmitterMixin } from '#internals/mixins/event-emitter.js';\nimport { FormAssociatedRequiredMixin } from '#internals/mixins/forms/associated-required.js';\nimport { createFormValueState } from '#internals/mixins/forms/form-value.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isEmpty } from '#internals/utils/arrays.js';\nimport {\n  addSafeEventListener,\n  focusLeftHost,\n  getElementFromPath,\n  stopPropagation,\n} from '#internals/utils/events.js';\nimport { bindIf } from '#internals/utils/lit.js';\nimport { asNumber, clamp } from '#internals/utils/math.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport IgcIconButtonComponent from '../button/icon-button.js';\nimport IgcDividerComponent from '../divider/divider.js';\nimport IgcFocusTrapComponent from '../focus-trap/focus-trap.js';\nimport IgcInputComponent from '../input/input.js';\nimport IgcPopoverComponent from '../popover/popover.js';\nimport type IgcSelectItemComponent from '../select/select-item.js';\nimport IgcSelectComponent from '../select/select.js';\nimport type { ColorFormat, ColorPickerMode } from '../types.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport IgcVisuallyHiddenComponent from '../visually-hidden/visually-hidden.js';\nimport { isValidColor, normalizeColor } from './common.js';\nimport { ColorModel, getContext } from './model.js';\nimport IgcPickerCanvasComponent, {\n  type PickerCanvasEventDetail,\n} from './picker-canvas.js';\nimport { styles } from './themes/color-picker.base.css.js';\nimport { styles as shared } from './themes/shared/color-picker.common.css.js';\nimport { all } from './themes/themes.js';\nimport { colorPickerValidators } from './validators.js';\n\nexport interface IgcColorPickerEventMap {\n  igcOpening: CustomEvent<void>;\n  igcOpened: CustomEvent<void>;\n  igcClosing: CustomEvent<void>;\n  igcClosed: CustomEvent<void>;\n  igcInput: CustomEvent<string>;\n  igcChange: CustomEvent<string>;\n}\n\nconst Slots = setSlots(\n  'value-missing',\n  'custom-error',\n  'invalid',\n  'helper-text'\n);\n\n/** The color string shape of each format. Shown while the input is empty. */\nconst formatPlaceholders: Record<ColorFormat, string> = {\n  hex: '#rrggbb',\n  rgb: 'rgb(r g b)',\n  hsl: 'hsl(h s% l%)',\n};\n\n/** The alpha text is `<digits>%`. An edit removes every other character. */\nconst nonDigits = /\\D/g;\n\n/** The last caret offset in `<digits>%`, the position in front of the `%`. */\nfunction caretLimit(text: string): number {\n  return Math.max(text.length - 1, 0);\n}\n\n/**\n * The part of the EyeDropper API that this component uses.\n *\n * The type is declared locally, because the API is not in the baseline DOM\n * typings. Firefox and Safari do not implement it.\n */\ninterface EyeDropperLike {\n  open(): Promise<{ sRGBHex: string }>;\n}\n\ntype EyeDropperConstructor = new () => EyeDropperLike;\n\n/** Returns the EyeDropper constructor, if the browser provides one. */\nfunction getEyeDropper(): EyeDropperConstructor | undefined {\n  return (globalThis as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n}\n\n/**\n * Color input component.\n *\n * The user picks a color with the HSV saturation/value canvas, the hue slider\n * and the optional alpha slider. The user can also type a color string: hex,\n * rgb(a), hsl(a) or a named CSS color.\n *\n * The component supports pre-defined swatches and the native EyeDropper API,\n * where the browser provides one. The anchor is a trigger button\n * (`mode=\"default\"`) or an editable text field (`mode=\"input\"`).\n *\n * @element igc-color-picker\n *\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n * @slot helper-text - Renders content below the picker.\n *\n * @fires igcOpening - Emitted just before the picker dropdown is open.\n * @fires igcOpened - Emitted after the picker dropdown is open.\n * @fires igcClosing - Emitted just before the picker dropdown is closed.\n * @fires igcClosed - Emitted after closing the picker dropdown.\n * @fires igcInput - Emitted when the value of the component is changed.\n * @fires igcChange - Emitted when the value of the component is committed.\n *\n * @csspart anchor - The trigger element that opens the picker (the button in default mode, or the swatch prefix in input mode).\n * @csspart empty - Applied alongside `anchor` when no color value is set, rendering a checkered background.\n * @csspart label - The label rendered above the anchor in default mode.\n * @csspart picker - The popover container holding the canvas, sliders, inputs and swatches.\n * @csspart main-row - The row containing the hue slider and the copy/eyedropper buttons.\n * @csspart alpha-row - The row containing the alpha slider and input, rendered when `show-alpha` is set.\n * @csspart inputs-row - The row containing the format select and the color value input.\n * @csspart buttons - The wrapper around the copy and eyedropper buttons.\n * @csspart hue - The hue slider.\n * @csspart alpha - The alpha slider.\n * @csspart copy - The button that copies the current color value to the clipboard.\n * @csspart eye-dropper - The button that activates the EyeDropper API.\n * @csspart format-select - The select control used to switch the color string format.\n * @csspart swatches - The container of the pre-defined color swatches.\n * @csspart swatch - An individual color swatch button.\n */\n@shadowOptions({ delegatesFocus: true })\nexport default class IgcColorPickerComponent extends FormAssociatedRequiredMixin(\n  EventEmitterMixin<\n    IgcColorPickerEventMap,\n    AbstractConstructor<IgcBaseComboBoxComponent>\n  >(IgcBaseComboBoxComponent)\n) {\n  public static readonly tagName = 'igc-color-picker';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcColorPickerComponent,\n      IgcInputComponent,\n      IgcPopoverComponent,\n      IgcFocusTrapComponent,\n      IgcSelectComponent,\n      IgcPickerCanvasComponent,\n      IgcDividerComponent,\n      IgcButtonComponent,\n      IgcIconButtonComponent,\n      IgcValidationContainerComponent,\n      IgcVisuallyHiddenComponent\n    );\n  }\n\n  //#region Internal state and properties\n\n  protected override get __validators() {\n    return colorPickerValidators;\n  }\n\n  protected readonly _slots = addSlotController(this, { slots: Slots });\n\n  protected override readonly _rootClickController = addRootClickController(\n    this,\n    {\n      onHide: this._handleClosing,\n    }\n  );\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: '',\n  });\n\n  private readonly _alphaRef = createRef<HTMLInputElement>();\n  private readonly _alphaInputRef = createRef<IgcInputComponent>();\n  private readonly _canvasRef = createRef<IgcPickerCanvasComponent>();\n  private readonly _hueRef = createRef<HTMLInputElement>();\n  private readonly _anchorRef = createRef<\n    HTMLButtonElement | IgcInputComponent\n  >();\n\n  private readonly _supportsEyeDropper = Boolean(getEyeDropper());\n  private _color = ColorModel.empty();\n  private _oldValue = '';\n\n  /** The last value written for each host custom property. */\n  private readonly _appliedProperties = new Map<string, string>();\n\n  @query('#helper-text')\n  private readonly _helperText!: IgcValidationContainerComponent | null;\n\n  private get _isInputMode(): boolean {\n    return this.mode === 'input';\n  }\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /**\n   * The label of the component.\n   *\n   * In `mode=\"input\"` the component forwards the label to the anchor input.\n   * In `mode=\"default\"` it renders the label as a separate element.\n   * @attr label\n   */\n  @property()\n  public label?: string;\n\n  /**\n   * The value of the component as a CSS color string. Accepts hex, rgb(a),\n   * hsl(a) and named colors.\n   *\n   * An empty, whitespace-only or invalid string clears the value.\n   *\n   * @attr value\n   */\n  @property()\n  public set value(value: string) {\n    this._color = ColorModel.parse(value);\n    this._updateColor();\n  }\n\n  public get value(): string {\n    return this._formValue.value;\n  }\n\n  /**\n   * Sets the color format of the string value.\n   *\n   * A format change renders `value` in the new notation. The color does not\n   * change, so the component emits no `igcInput` or `igcChange`.\n   *\n   * @attr format\n   * @default 'hex'\n   */\n  @property()\n  public format: ColorFormat = 'hex';\n\n  /**\n   * Whether to hide the format picker buttons.\n   *\n   * @attr hide-formats\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-formats' })\n  public hideFormats = false;\n\n  /**\n   * Whether to show the alpha slider and input.\n   *\n   * @attr show-alpha\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-alpha' })\n  public showAlpha = false;\n\n  /**\n   * The mode of the color picker.\n   *\n   * In `\"default\"` mode the anchor is a trigger button. In `\"input\"` mode the\n   * anchor is an editable text field with a color swatch prefix. The prefix\n   * also opens the picker.\n   *\n   * @attr mode\n   * @default 'default'\n   */\n  @property({ reflect: true })\n  public mode: ColorPickerMode = 'default';\n\n  /**\n   * Pre-defined color strings. The component renders them as clickable\n   * swatches below the picker controls. A click on a swatch commits its color\n   * as the value.\n   */\n  @property({ attribute: false })\n  public swatches: string[] = [];\n\n  //#endregion\n\n  //#region Lifecycle\n\n  constructor() {\n    super();\n\n    addThemingController(this, all);\n    addSafeEventListener(this, 'focusin', this._handleFocusIn);\n    addSafeEventListener(this, 'focusout', this._handleFocusOut);\n\n    addKeybindings(this, { skip: () => this.disabled })\n      .set(escapeKey, this._handleKeyboardClosing)\n      .set([altKey, arrowDown], this._handleAnchorClick)\n      .set([altKey, arrowUp], this._handleKeyboardClosing);\n\n    addKeybindings(this, {\n      skip: () => this.disabled || !this._alphaInputRef.value,\n      ref: this._alphaInputRef,\n      bindingDefaults: { repeat: true },\n    })\n      .set(arrowUp, () => this._handleAlphaInputSpin(1))\n      .set(arrowDown, () => this._handleAlphaInputSpin(-1))\n      .set(arrowRight, this._handleAlphaInputCaretForward, {\n        preventDefault: false,\n      })\n      .set(endKey, this._handleAlphaInputCaretForward, {\n        preventDefault: false,\n      });\n\n    addAriaProjector(this, {\n      target: () => (this._isInputMode ? this._anchorRef.value : null),\n      state: () => ({\n        hasPopup: 'dialog',\n        expanded: `${this.open}`,\n        labelledBy: this._internals.labels,\n        describedBy: this._helperText ? [this._helperText] : null,\n      }),\n    });\n  }\n\n  protected override update(props: PropertyValues<this>): void {\n    if (props.has('open')) {\n      this._rootClickController.update();\n    }\n\n    if (this.hasUpdated && props.has('format')) {\n      this._formValue.setValueAndFormState(this._color.asString(this.format));\n    }\n\n    this._applyColorProperties();\n\n    super.update(props);\n  }\n\n  protected override updated(props: PropertyValues<this>): void {\n    super.updated(props);\n\n    if (props.has('open') || props.has('value')) {\n      // Wait for the paint, then sync the marker position with the color.\n      requestAnimationFrame(() => this._syncCanvasPosition());\n    }\n  }\n\n  //#endregion\n\n  //#region Form associated overrides\n\n  protected override formResetCallback(): void {\n    super.formResetCallback();\n\n    if (this._isInputMode) {\n      const input = this._anchorRef.value as IgcInputComponent;\n      input?.['formResetCallback']();\n    }\n  }\n\n  //#endregion\n\n  //#region Event handlers\n\n  private _handleClosing(): void {\n    this._hide(true);\n  }\n\n  private async _handleKeyboardClosing(): Promise<void> {\n    if (await this._hide(true)) {\n      this._anchorRef.value?.focus();\n    }\n  }\n\n  private _handleFocusIn(event: FocusEvent): void {\n    if (focusLeftHost(this, event)) {\n      this._oldValue = this._alphaColor;\n    }\n  }\n\n  private _handleFocusOut(event: FocusEvent): void {\n    if (!focusLeftHost(this, event)) {\n      return;\n    }\n\n    this._handleBlur();\n\n    if (this._alphaColor !== this._oldValue) {\n      this._oldValue = this._alphaColor;\n      this.emitEvent('igcChange', { detail: this.value });\n    }\n  }\n\n  private _handleCanvasColorPicked(\n    event: CustomEvent<PickerCanvasEventDetail>\n  ): void {\n    this._color.setSaturationAndValue(event.detail.x, 100 - event.detail.y);\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _handleHueValueChange(event: Event): void {\n    stopPropagation(event);\n\n    this._color.h = asNumber(this._hueRef.value?.value);\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _handleAlphaSliderValueChange(event: Event): void {\n    stopPropagation(event);\n\n    this._setAlpha(asNumber(this._alphaRef.value?.value));\n  }\n\n  /**\n   * Rewrites the alpha field as `<digits>%` after each edit.\n   *\n   * The `%` is part of the value and not a suffix element, so the browser\n   * treats it as editable text. This handler normalizes the result of an edit\n   * instead of a filter on the keystrokes in `beforeinput`. The `%` then\n   * behaves as a literal for each way that text reaches the field: typing,\n   * paste, drop, composition, undo and autofill. Of these, `beforeinput`\n   * carries `data` only for typing.\n   */\n  private _handleAlphaInputEdit(event: Event): void {\n    const input = this._alphaInputRef.value;\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n\n    if (!input || !native) return;\n\n    const caret = native.selectionStart ?? native.value.length;\n    const typed = native.value.slice(0, caret).replace(nonDigits, '').length;\n    const digits = native.value.replace(nonDigits, '');\n    const percent = clamp(asNumber(digits), 0, 100);\n\n    const text = digits ? `${percent}%` : '';\n\n    this._writeAlphaText(input, text, Math.min(typed, caretLimit(text)));\n\n    if (digits) {\n      this._setAlpha(percent);\n    }\n  }\n\n  /**\n   * Keeps the caret and the selection inside the digits.\n   *\n   * The trailing `%` is a literal. Without this handler the caret goes after\n   * the `%` on focus, on a click past the text, and after a shifted selection\n   * extends over it. The handler therefore runs on `keyup` as well as on\n   * `focusin` and `click`. Text after the `%` falls outside the number, and the\n   * parse discards it.\n   */\n  private _handleAlphaInputCaret(event: Event): void {\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n    if (!native) return;\n\n    const limit = caretLimit(native.value);\n\n    native.setSelectionRange(\n      Math.min(native.selectionStart ?? 0, limit),\n      Math.min(native.selectionEnd ?? 0, limit)\n    );\n  }\n\n  /**\n   * Steps the alpha by one percent.\n   *\n   * The step applies to the color and not to the text of the field. This keeps\n   * a held arrow key correct. The key downs repeat faster than a render, so the\n   * text of the field can be stale.\n   *\n   * The handler writes the new text and does not leave it to the render, so\n   * that the caret does not move. A value assignment puts the caret behind the\n   * `%`. A write from the render applies one frame after the keypress, which\n   * the user sees as a jump forward and back.\n   */\n  private _handleAlphaInputSpin(increment: -1 | 1): void {\n    const input = this._alphaInputRef.value;\n    const percent = clamp(this._alphaPercent + increment, 0, 100);\n\n    if (!input || percent === this._alphaPercent) return;\n\n    this._writeAlphaText(input, `${percent}%`);\n    this._setAlpha(percent);\n  }\n\n  /**\n   * Holds the caret at the `%`. Without this handler the caret steps past the\n   * `%`, and `keyup` pulls it back. This is the frame-late jump that\n   * {@link _handleAlphaInputSpin} describes.\n   */\n  private _handleAlphaInputCaretForward(event: KeyboardEvent): void {\n    const native = getElementFromPath<HTMLInputElement>('input', event);\n    if (!native) return;\n\n    const limit = caretLimit(native.value);\n\n    if (event.key === endKey || (native.selectionEnd ?? 0) >= limit) {\n      event.preventDefault();\n      native.setSelectionRange(limit, limit);\n    }\n  }\n\n  private _handleAlphaInputChange(event: CustomEvent<string>): void {\n    stopPropagation(event);\n\n    const input = event.target as IgcInputComponent;\n\n    if (!input.value) {\n      input.value = `${this._alphaPercent}%`;\n    }\n  }\n\n  private _handleFormatChange(\n    event: CustomEvent<IgcSelectItemComponent>\n  ): void {\n    stopPropagation(event);\n    this.format = event.detail.value as ColorFormat;\n  }\n\n  private _handleColorInputChange(event: CustomEvent<string>): void {\n    stopPropagation(event);\n\n    const input = event.target as IgcInputComponent;\n    const value = normalizeColor(event.detail);\n    const cleared = !value;\n\n    // An invalid and non-empty value reverts the input to the current color.\n    // An empty value clears the color.\n    if (!cleared && !isValidColor(value, getContext())) {\n      input.value = this._color.asString(this.format);\n      return;\n    }\n\n    this._color = cleared ? ColorModel.empty() : ColorModel.parse(value);\n    this._updateColor();\n    this._syncCanvasPosition();\n  }\n\n  private _handleEyeDropperClick(): void {\n    const EyeDropper = getEyeDropper();\n\n    if (!EyeDropper) return;\n\n    new EyeDropper()\n      .open()\n      .then((result) => {\n        this.value = result.sRGBHex;\n        this._emitInputEvent();\n      })\n      .catch(() => {});\n  }\n\n  private _handleCopy(): void {\n    navigator.clipboard?.writeText(this.value).catch(() => {});\n  }\n\n  private _handleSwatchClick(event: Event): void {\n    const swatch = getElementFromPath<HTMLButtonElement>(\n      'button[part=\"swatch\"]',\n      event\n    );\n    const color = swatch?.dataset.color;\n\n    if (color) {\n      this.value = color;\n      this._emitInputEvent();\n    }\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  /**\n   * The current color with its alpha, in a notation that is independent of\n   * `format`.\n   */\n  private get _alphaColor(): string {\n    return this._color.asString('rgb', true);\n  }\n\n  /**\n   * The current color with an opaque alpha channel.\n   *\n   * The swatch preview paints this color over one half of its surface, and\n   * {@link _alphaColor} over the other half. A translucent color is then shown\n   * next to its opaque form. At full alpha the two halves are identical and the\n   * split is invisible, so opaque colors need no separate branch.\n   *\n   * This value is defined also with no color value. An empty color is white,\n   * which is where the alpha ramp and the canvas marker belong before the first\n   * pick. The anchor keeps its \"no color\" mark, because {@link _previewStyle}\n   * uses {@link _alphaColor}, which stays empty.\n   */\n  private get _opaqueColor(): string {\n    return new ColorModel(this._color.toRGB()).asString('rgb');\n  }\n\n  /** The alpha channel as the whole percentage that both alpha controls use. */\n  private get _alphaPercent(): number {\n    return Math.round(this._color.alpha * 100);\n  }\n\n  /** The pure hue that the saturation/value plane and the hue thumb use. */\n  private get _currentColor(): string {\n    return `hsl(${this._color.h} 100% 50%)`;\n  }\n\n  /**\n   * Mirrors the colors that the stylesheet needs onto the host.\n   *\n   * `update()` drives this, and not the handlers that change the color. It\n   * therefore also runs for the first render. A picker with no value calls none\n   * of those handlers, and the plane would keep the stylesheet fallback instead\n   * of its actual hue.\n   */\n  private _applyColorProperties(): void {\n    const properties = {\n      '--_current-color': this._currentColor,\n      '--_selected-color': this._opaqueColor,\n    };\n\n    for (const [name, value] of Object.entries(properties)) {\n      if (this._appliedProperties.get(name) !== value) {\n        this._appliedProperties.set(name, value);\n        this.style.setProperty(name, value);\n      }\n    }\n  }\n\n  /**\n   * Replaces the whole text of the alpha field and puts the caret in front of\n   * the `%` by default.\n   */\n  private _writeAlphaText(\n    input: IgcInputComponent,\n    text: string,\n    caret = caretLimit(text)\n  ): void {\n    input.setRangeText(text, 0, input.value.length);\n    input.setSelectionRange(caret, caret);\n  }\n\n  private _setAlpha(percent: number): void {\n    const alpha = clamp(percent, 0, 100) / 100;\n\n    if (this._color.alpha === alpha) {\n      return;\n    }\n\n    this._color.alpha = alpha;\n    this._updateColor();\n    this._emitInputEvent();\n  }\n\n  private _updateColor(): void {\n    this._formValue.setValueAndFormState(this._color.asString(this.format));\n    this.requestUpdate();\n  }\n\n  private _syncCanvasPosition(): void {\n    if (!this._canvasRef.value || !this.open) return;\n\n    const rect = this._canvasRef.value.getBoundingClientRect();\n    const { width: markerWidth, height: markerHeight } =\n      this._canvasRef.value.getMarkerDimensions();\n\n    const [, s, v] = this._color.toHSV();\n    const x = (s / 100) * rect.width - markerWidth;\n    const y = ((100 - v) / 100) * rect.height - markerHeight;\n\n    this._canvasRef.value.x = x;\n    this._canvasRef.value.y = y;\n  }\n\n  private _emitInputEvent(): void {\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  //#endregion\n\n  //#region Canvas area rendering\n\n  private _renderCanvasGradient(): TemplateResult {\n    const [, saturation, brightness] = this._color.toHSV();\n\n    return html`\n      <igc-picker-canvas\n        exportparts=\"marker, dragging\"\n        part=\"picker-canvas\"\n        ${ref(this._canvasRef)}\n        @igcColorPicked=${this._handleCanvasColorPicked}\n        currentColor=${this._currentColor}\n        markerColor=${this._opaqueColor}\n        .saturation=${saturation}\n        .brightness=${brightness}\n      >\n      </igc-picker-canvas>\n    `;\n  }\n\n  //#endregion\n\n  //#region Hue row and buttons rendering\n\n  private _renderHueSlider(): TemplateResult {\n    return html`\n      <input\n        ${ref(this._hueRef)}\n        aria-label=\"Hue\"\n        type=\"range\"\n        part=\"hue\"\n        min=\"0\"\n        max=\"360\"\n        .value=${String(Math.round(this._color.h))}\n        @input=${this._handleHueValueChange}\n        @change=${stopPropagation}\n      />\n    `;\n  }\n\n  private _renderIconButton(\n    part: string,\n    icon: string,\n    label: string,\n    handler: () => void,\n    disabled = false\n  ): TemplateResult {\n    return html`\n      <igc-icon-button\n        part=${part}\n        variant=\"flat\"\n        name=${icon}\n        ?disabled=${disabled}\n        @click=${handler}\n      >\n        <igc-visually-hidden>${label}</igc-visually-hidden>\n      </igc-icon-button>\n    `;\n  }\n\n  private _renderPickerButtons(): TemplateResult {\n    return html`\n      <div part=\"buttons\">\n        ${this._renderIconButton(\n          'copy',\n          'copy_content',\n          'Copy color value to clipboard',\n          this._handleCopy\n        )}\n        ${this._renderIconButton(\n          'eye-dropper',\n          'eye_dropper',\n          'Pick a color from the screen',\n          this._handleEyeDropperClick,\n          !this._supportsEyeDropper\n        )}\n      </div>\n    `;\n  }\n\n  //#endregion\n\n  //#region Alpha row rendering\n\n  private _renderAlphaRow(): TemplateResult {\n    return html`\n      <input\n        ${ref(this._alphaRef)}\n        aria-label=\"Alpha slider\"\n        type=\"range\"\n        part=\"alpha\"\n        min=\"0\"\n        max=\"100\"\n        .value=${String(this._alphaPercent)}\n        @input=${this._handleAlphaSliderValueChange}\n        @change=${stopPropagation}\n      />\n\n      <igc-visually-hidden>\n        <label for=\"alpha\">Alpha value</label>\n      </igc-visually-hidden>\n\n      <igc-input\n        ${ref(this._alphaInputRef)}\n        id=\"alpha\"\n        name=\"alpha\"\n        placeholder=\"Alpha value\"\n        inputmode=\"numeric\"\n        part=\"alpha-input\"\n        outlined\n        type=\"text\"\n        .value=${live(`${this._alphaPercent}%`)}\n        @input=${this._handleAlphaInputEdit}\n        @focusin=${this._handleAlphaInputCaret}\n        @click=${this._handleAlphaInputCaret}\n        @keyup=${this._handleAlphaInputCaret}\n        @igcChange=${this._handleAlphaInputChange}\n      ></igc-input>\n    `;\n  }\n\n  //#endregion\n\n  //#region Color formats and input row rendering\n\n  private _renderSelect(): TemplateResult {\n    return html`\n      <igc-visually-hidden>\n        <label for=\"format-select\">Color format</label>\n      </igc-visually-hidden>\n\n      <igc-select\n        id=\"format-select\"\n        part=\"format-select\"\n        placeholder=\"Color format\"\n        name=\"format\"\n        outlined\n        .value=${this.format}\n        @igcChange=${this._handleFormatChange}\n      >\n        <igc-select-item value=\"hex\">Hex</igc-select-item>\n        <igc-select-item value=\"rgb\">RGB</igc-select-item>\n        <igc-select-item value=\"hsl\">HSL</igc-select-item>\n      </igc-select>\n    `;\n  }\n\n  private _renderInputsRow(): TemplateResult {\n    return html`\n      ${cache(this.hideFormats ? nothing : this._renderSelect())}\n      <igc-visually-hidden>\n        <label for=\"color-input\"> Color value input </label>\n      </igc-visually-hidden>\n\n      <igc-input\n        id=\"color-input\"\n        name=\"color-input\"\n        placeholder=${formatPlaceholders[this.format]}\n        outlined\n        .value=${live(this._color.asString(this.format))}\n        @igcChange=${this._handleColorInputChange}\n      ></igc-input>\n    `;\n  }\n\n  //#endregion\n\n  //#region Swatches rendering\n\n  private _renderSwatches(): TemplateResult | typeof nothing {\n    return !isEmpty(this.swatches)\n      ? html`\n          <igc-divider></igc-divider>\n          <div part=\"swatches\" @click=${this._handleSwatchClick}>\n            ${this.swatches.map(\n              (color) => html`\n                <button\n                  type=\"button\"\n                  part=\"swatch\"\n                  data-color=${color}\n                  aria-label=${color}\n                  style=\"background-color: ${color}\"\n                ></button>\n              `\n            )}\n          </div>\n        `\n      : nothing;\n  }\n\n  //#endregion\n\n  //#region Anchor rendering\n\n  private get _anchorParts(): ReturnType<typeof partMap> {\n    return partMap({\n      anchor: true,\n      empty: this._color.isEmpty,\n      'input-mode': this._isInputMode,\n    });\n  }\n\n  /**\n   * The swatch preview style that both anchors use.\n   *\n   * `--_color-preview` paints the opaque color over the left half.\n   * `--_alpha-preview` paints the color with its real alpha over the whole\n   * surface. Do not transpose the two. See the `swatch-preview` mixin.\n   */\n  private _previewStyle(): ReturnType<typeof styleMap> {\n    const color = this._alphaColor;\n\n    return bindIf(\n      color,\n      styleMap({\n        '--_alpha-preview': color,\n        '--_color-preview': this._opaqueColor,\n      })\n    );\n  }\n\n  private _renderButtonAnchor(): TemplateResult {\n    return html`\n      <button\n        ${ref(this._anchorRef)}\n        id=\"trigger\"\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-controls=\"picker\"\n        aria-expanded=${this.open}\n        aria-describedby=\"helper-text\"\n        part=${this._anchorParts}\n        slot=\"anchor\"\n        style=${this._previewStyle()}\n        ?disabled=${this.disabled}\n        @click=${this._handleAnchorClick}\n      >\n        <igc-visually-hidden>Open color picker</igc-visually-hidden>\n      </button>\n    `;\n  }\n\n  private _renderInputAnchor(): TemplateResult {\n    return html`\n      <igc-input\n        ${ref(this._anchorRef)}\n        slot=\"anchor\"\n        outlined\n        placeholder=${formatPlaceholders[this.format]}\n        label=${ifDefined(this.label)}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        .value=${live(this.value)}\n        .invalid=${this.invalid}\n        @igcChange=${this._handleColorInputChange}\n      >\n        <div slot=\"prefix\">\n          <button\n            type=\"button\"\n            part=${this._anchorParts}\n            aria-label=\"Open color picker\"\n            aria-haspopup=\"dialog\"\n            aria-controls=\"picker\"\n            aria-expanded=${this.open}\n            style=${this._previewStyle()}\n            ?disabled=${this.disabled}\n            @click=${this._handleAnchorClick}\n          ></button>\n        </div>\n      </igc-input>\n    `;\n  }\n\n  private _renderAnchor(): TemplateResult {\n    return this._isInputMode\n      ? this._renderInputAnchor()\n      : this._renderButtonAnchor();\n  }\n\n  private _renderHelperText(): TemplateResult {\n    return this._renderValidationContainer({\n      id: 'helper-text',\n      hasHelperText: true,\n    });\n  }\n\n  //#endregion\n\n  private _renderPicker(): TemplateResult {\n    return html`\n      <igc-focus-trap ?disabled=${!this.open} .inert=${!this.open}>\n        <div\n          id=\"picker\"\n          part=\"picker\"\n          role=\"dialog\"\n          aria-label=\"Color picker\"\n          aria-modal=\"false\"\n        >\n          ${this._renderCanvasGradient()}\n          <div part=\"main-row\">\n            ${this._renderHueSlider()}${this._renderPickerButtons()}\n          </div>\n          ${\n            this.showAlpha\n              ? html`<div part=\"alpha-row\">${this._renderAlphaRow()}</div>`\n              : nothing\n          }\n          <div part=\"inputs-row\">${this._renderInputsRow()}</div>\n          ${this._renderSwatches()}\n        </div>\n      </igc-focus-trap>\n    `;\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      <div part=\"color-picker\">\n        <igc-popover ?open=${this.open} shift flip>\n          ${this._renderAnchor()}${this._renderPicker()}\n        </igc-popover>\n        ${\n          !this._isInputMode && this.label\n            ? html`<label part=\"label\" for=\"trigger\">${this.label}</label>`\n            : nothing\n        }\n        ${this._renderHelperText()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-color-picker': IgcColorPickerComponent;\n  }\n}\n"]}

package/components/color-picker/common.d.ts

@@ -0,0 +1,37 @@
+import type { RGB } from './converters.js';
+export declare const RGBA_RE: RegExp;
+export declare const HEX_RE: RegExp;
+export interface ParsedColor {
+    value: RGB;
+    alpha: number;
+}
+/**
+ * Trims a color string and restores the `#` of a hash-less hex, which the
+ * canvas would otherwise reject.
+ *
+ * Anything that has to both validate and parse a color must normalize first -
+ * validating the raw string rejects `ff0000` before parsing ever sees it.
+ */
+export declare function normalizeColor(colorString: string): string;
+/**
+ * Parses a color string into RGB values and alpha channel.
+ * Supports hex, rgb, rgba, hsl, hsla, and named color formats.
+ *
+ * @param colorString - The color string to parse
+ * @param ctx - Optional canvas context for color parsing. If not provided, returns default black color.
+ * @returns Object containing RGB values and alpha channel
+ */
+export declare function parseColor(colorString: string, ctx: OffscreenCanvasRenderingContext2D | null): ParsedColor;
+/**
+ * Determines whether a given string is a valid CSS color.
+ *
+ * Uses the canvas 2D context to attempt parsing the string against two
+ * different baseline colors. A valid color resolves to the same computed value
+ * regardless of the baseline, while an invalid color leaves each baseline
+ * untouched and therefore produces two different results.
+ *
+ * @param colorString - The color string to validate
+ * @param ctx - Canvas context used for parsing
+ * @returns `true` if the string is a valid, non-empty CSS color
+ */
+export declare function isValidColor(colorString: string, ctx: OffscreenCanvasRenderingContext2D | null): boolean;

package/components/color-picker/common.js

@@ -0,0 +1,55 @@
+import { asNumber } from '#internals/utils/math.js';
+export const RGBA_RE = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+export const HEX_RE = /.{2}/g;
+const HEX_WITHOUT_HASH_RE = /^[0-9a-f]{3,4}$|^[0-9a-f]{6}$|^[0-9a-f]{8}$/i;
+export function normalizeColor(colorString) {
+    const trimmed = colorString?.trim() ?? '';
+    return HEX_WITHOUT_HASH_RE.test(trimmed) ? `#${trimmed}` : trimmed;
+}
+export function parseColor(colorString, ctx) {
+    const result = {
+        value: [0, 0, 0],
+        alpha: 1,
+    };
+    if (!colorString || !ctx) {
+        return result;
+    }
+    const normalized = normalizeColor(colorString);
+    if (!isValidColor(normalized, ctx)) {
+        return result;
+    }
+    ctx.fillStyle = normalized;
+    const color = ctx.fillStyle;
+    const rgbaMatch = RGBA_RE.exec(color);
+    if (rgbaMatch) {
+        const [r, g, b, a] = rgbaMatch.slice(3).map((part) => asNumber(part));
+        result.value = [r, g, b];
+        result.alpha = a ?? 1;
+    }
+    else {
+        const hexValue = color.replace('#', '');
+        const matches = hexValue.match(HEX_RE);
+        if (!matches) {
+            return result;
+        }
+        const [r, g, b, a] = matches.map((part) => Number.parseInt(part, 16));
+        result.value = [r, g, b];
+        if (matches.length === 4 && a !== undefined) {
+            result.alpha = a / 255;
+        }
+    }
+    return result;
+}
+export function isValidColor(colorString, ctx) {
+    if (!colorString?.trim() || !ctx) {
+        return false;
+    }
+    ctx.fillStyle = '#000';
+    ctx.fillStyle = colorString;
+    const onBlack = ctx.fillStyle;
+    ctx.fillStyle = '#fff';
+    ctx.fillStyle = colorString;
+    const onWhite = ctx.fillStyle;
+    return onBlack === onWhite;
+}
+//# sourceMappingURL=common.js.map

package/components/color-picker/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../src/components/color-picker/common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAGpD,MAAM,CAAC,MAAM,OAAO,GAClB,uEAAuE,CAAC;AAC1E,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC;AAC9B,MAAM,mBAAmB,GAAG,8CAA8C,CAAC;AAc3E,MAAM,UAAU,cAAc,CAAC,WAAmB;IAChD,MAAM,OAAO,GAAG,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC1C,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;AACrE,CAAC;AAUD,MAAM,UAAU,UAAU,CACxB,WAAmB,EACnB,GAA6C;IAE7C,MAAM,MAAM,GAAgB;QAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAChB,KAAK,EAAE,CAAC;KACT,CAAC;IAEF,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE,CAAC;QACzB,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAE/C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC;QACnC,OAAO,MAAM,CAAC;IAChB,CAAC;IAGD,GAAG,CAAC,SAAS,GAAG,UAAU,CAAC;IAC3B,MAAM,KAAK,GAAG,GAAG,CAAC,SAAS,CAAC;IAE5B,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEtC,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QACtE,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACzB,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;SAAM,CAAC;QAEN,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACxC,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;QACtE,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAGzB,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,KAAK,SAAS,EAAE,CAAC;YAC5C,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC;QACzB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAcD,MAAM,UAAU,YAAY,CAC1B,WAAmB,EACnB,GAA6C;IAE7C,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;QACjC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;IAC5B,MAAM,OAAO,GAAG,GAAG,CAAC,SAAS,CAAC;IAE9B,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;IAC5B,MAAM,OAAO,GAAG,GAAG,CAAC,SAAS,CAAC;IAE9B,OAAO,OAAO,KAAK,OAAO,CAAC;AAC7B,CAAC","sourcesContent":["import { asNumber } from '#internals/utils/math.js';\nimport type { RGB } from './converters.js';\n\nexport const RGBA_RE =\n  /^((rgba)|rgb)[\\D]+([\\d.]+)[\\D]+([\\d.]+)[\\D]+([\\d.]+)[\\D]*?([\\d.]+|$)/i;\nexport const HEX_RE = /.{2}/g;\nconst HEX_WITHOUT_HASH_RE = /^[0-9a-f]{3,4}$|^[0-9a-f]{6}$|^[0-9a-f]{8}$/i;\n\nexport interface ParsedColor {\n  value: RGB;\n  alpha: number;\n}\n\n/**\n * Trims a color string and restores the `#` of a hash-less hex, which the\n * canvas would otherwise reject.\n *\n * Anything that has to both validate and parse a color must normalize first -\n * validating the raw string rejects `ff0000` before parsing ever sees it.\n */\nexport function normalizeColor(colorString: string): string {\n  const trimmed = colorString?.trim() ?? '';\n  return HEX_WITHOUT_HASH_RE.test(trimmed) ? `#${trimmed}` : trimmed;\n}\n\n/**\n * Parses a color string into RGB values and alpha channel.\n * Supports hex, rgb, rgba, hsl, hsla, and named color formats.\n *\n * @param colorString - The color string to parse\n * @param ctx - Optional canvas context for color parsing. If not provided, returns default black color.\n * @returns Object containing RGB values and alpha channel\n */\nexport function parseColor(\n  colorString: string,\n  ctx: OffscreenCanvasRenderingContext2D | null\n): ParsedColor {\n  const result: ParsedColor = {\n    value: [0, 0, 0],\n    alpha: 1,\n  };\n\n  if (!colorString || !ctx) {\n    return result;\n  }\n\n  const normalized = normalizeColor(colorString);\n\n  if (!isValidColor(normalized, ctx)) {\n    return result;\n  }\n\n  // Trigger parsing through canvas context\n  ctx.fillStyle = normalized;\n  const color = ctx.fillStyle;\n\n  const rgbaMatch = RGBA_RE.exec(color);\n\n  if (rgbaMatch) {\n    const [r, g, b, a] = rgbaMatch.slice(3).map((part) => asNumber(part));\n    result.value = [r, g, b];\n    result.alpha = a ?? 1;\n  } else {\n    // Parse hex color\n    const hexValue = color.replace('#', '');\n    const matches = hexValue.match(HEX_RE);\n\n    if (!matches) {\n      return result;\n    }\n\n    const [r, g, b, a] = matches.map((part) => Number.parseInt(part, 16));\n    result.value = [r, g, b];\n\n    // Handle 8-digit hex with alpha channel\n    if (matches.length === 4 && a !== undefined) {\n      result.alpha = a / 255;\n    }\n  }\n\n  return result;\n}\n\n/**\n * Determines whether a given string is a valid CSS color.\n *\n * Uses the canvas 2D context to attempt parsing the string against two\n * different baseline colors. A valid color resolves to the same computed value\n * regardless of the baseline, while an invalid color leaves each baseline\n * untouched and therefore produces two different results.\n *\n * @param colorString - The color string to validate\n * @param ctx - Canvas context used for parsing\n * @returns `true` if the string is a valid, non-empty CSS color\n */\nexport function isValidColor(\n  colorString: string,\n  ctx: OffscreenCanvasRenderingContext2D | null\n): boolean {\n  if (!colorString?.trim() || !ctx) {\n    return false;\n  }\n\n  ctx.fillStyle = '#000';\n  ctx.fillStyle = colorString;\n  const onBlack = ctx.fillStyle;\n\n  ctx.fillStyle = '#fff';\n  ctx.fillStyle = colorString;\n  const onWhite = ctx.fillStyle;\n\n  return onBlack === onWhite;\n}\n"]}

package/components/color-picker/converters.d.ts

@@ -0,0 +1,18 @@
+export type RGB = [number, number, number];
+export type HSL = [number, number, number];
+export type HSV = [number, number, number];
+export declare const converter: Readonly<{
+    rgb: {
+        hex: (rgb: RGB) => string;
+        hsl: (rgb: RGB) => HSL;
+        hsv: (rgb: RGB) => HSV;
+    };
+    hsl: {
+        rgb: (hsl: HSL) => RGB;
+        hsv: (hsl: HSL) => HSV;
+    };
+    hsv: {
+        rgb: (hsv: HSV) => RGB;
+        hsl: (hsv: HSV) => HSL;
+    };
+}>;

package/components/color-picker/converters.js

@@ -0,0 +1,173 @@
+const ONE_THIRD = 1 / 3;
+const TWO_THIRDS = 2 / 3;
+export const converter = Object.freeze({
+    rgb: {
+        hex: (rgb) => {
+            const [r, g, b] = rgb.map((v) => Math.min(255, Math.max(0, Math.round(v))));
+            const value = (r << 16) + (g << 8) + b;
+            return value.toString(16).padStart(6, '0');
+        },
+        hsl: (rgb) => {
+            const [r, g, b] = rgb.map((v) => v / 255);
+            const min = Math.min(r, g, b);
+            const max = Math.max(r, g, b);
+            const delta = max - min;
+            let h = 0;
+            let s;
+            if (max === min) {
+                h = 0;
+            }
+            else if (r === max) {
+                h = (g - b) / delta;
+            }
+            else if (g === max) {
+                h = 2 + (b - r) / delta;
+            }
+            else if (b === max) {
+                h = 4 + (r - g) / delta;
+            }
+            h = Math.min(h * 60, 360);
+            if (h < 0) {
+                h += 360;
+            }
+            const l = (min + max) / 2;
+            if (max === min) {
+                s = 0;
+            }
+            else if (l <= 0.5) {
+                s = delta / (max + min);
+            }
+            else {
+                s = delta / (2 - max - min);
+            }
+            return [h, s * 100, l * 100];
+        },
+        hsv: (rgb) => {
+            const [r, g, b] = rgb.map((v) => v / 255);
+            const v = Math.max(r, g, b);
+            const diff = v - Math.min(r, g, b);
+            const calc = (c) => (v - c) / 6 / diff + 1 / 2;
+            let h = 0;
+            let s = 0;
+            if (diff > 0) {
+                s = diff / v;
+                const rDiff = calc(r);
+                const gDiff = calc(g);
+                const bDiff = calc(b);
+                if (r === v) {
+                    h = bDiff - gDiff;
+                }
+                else if (g === v) {
+                    h = ONE_THIRD + rDiff - bDiff;
+                }
+                else if (b === v) {
+                    h = TWO_THIRDS + gDiff - rDiff;
+                }
+                if (h < 0) {
+                    h += 1;
+                }
+                else if (h > 1) {
+                    h -= 1;
+                }
+            }
+            return [h * 360, s * 100, v * 100];
+        },
+    },
+    hsl: {
+        rgb: (hsl) => {
+            const h = hsl[0] / 360;
+            const s = hsl[1] / 100;
+            const l = hsl[2] / 100;
+            if (s === 0) {
+                const val = l * 255;
+                return [val, val, val];
+            }
+            let t3;
+            let val;
+            const t2 = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const t1 = 2 * l - t2;
+            const rgb = [0, 0, 0];
+            for (let i = 0; i < 3; i++) {
+                t3 = h + ONE_THIRD * -(i - 1);
+                if (t3 < 0) {
+                    t3++;
+                }
+                if (t3 > 1) {
+                    t3--;
+                }
+                if (6 * t3 < 1) {
+                    val = t1 + (t2 - t1) * 6 * t3;
+                }
+                else if (2 * t3 < 1) {
+                    val = t2;
+                }
+                else if (3 * t3 < 2) {
+                    val = t1 + (t2 - t1) * (TWO_THIRDS - t3) * 6;
+                }
+                else {
+                    val = t1;
+                }
+                rgb[i] = val * 255;
+            }
+            return rgb;
+        },
+        hsv: (hsl) => {
+            const h = hsl[0];
+            let s = hsl[1] / 100;
+            let l = hsl[2] / 100;
+            let sMin = s;
+            const lMin = Math.max(l, 0.01);
+            l *= 2;
+            s *= l <= 1 ? l : 2 - l;
+            sMin *= lMin <= 1 ? lMin : 2 - lMin;
+            const v = (l + s) / 2;
+            const sv = l === 0 ? (2 * sMin) / (lMin + sMin) : (2 * s) / (l + s);
+            return [h, sv * 100, v * 100];
+        },
+    },
+    hsv: {
+        rgb: (hsv) => {
+            const h = hsv[0] / 60;
+            const s = hsv[1] / 100;
+            let v = hsv[2] / 100;
+            const hi = Math.floor(h) % 6;
+            const f = h - Math.floor(h);
+            const p = 255 * v * (1 - s);
+            const q = 255 * v * (1 - s * f);
+            const t = 255 * v * (1 - s * (1 - f));
+            v *= 255;
+            switch (hi) {
+                case 0:
+                    return [v, t, p];
+                case 1:
+                    return [q, v, p];
+                case 2:
+                    return [p, v, t];
+                case 3:
+                    return [p, q, v];
+                case 4:
+                    return [t, p, v];
+                case 5:
+                    return [v, p, q];
+                default:
+                    return [v, t, p];
+            }
+        },
+        hsl: (hsv) => {
+            const h = hsv[0];
+            const s = hsv[1] / 100;
+            const v = hsv[2] / 100;
+            const vMin = Math.max(v, 0.01);
+            let sl;
+            let l;
+            l = (2 - s) * v;
+            const lMin = (2 - s) * vMin;
+            sl = s * vMin;
+            sl /= lMin <= 1 ? lMin : 2 - lMin;
+            sl = sl || 0;
+            l /= 2;
+            return [h, sl * 100, l * 100];
+        },
+    },
+});
+//# sourceMappingURL=converters.js.map

package/components/color-picker/converters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"converters.js","sourceRoot":"","sources":["../../../src/components/color-picker/converters.ts"],"names":[],"mappings":"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","sourcesContent":["const ONE_THIRD = 1 / 3;\nconst TWO_THIRDS = 2 / 3;\n\nexport type RGB = [number, number, number];\nexport type HSL = [number, number, number];\nexport type HSV = [number, number, number];\n\nexport const converter = Object.freeze({\n  rgb: {\n    hex: (rgb: RGB): string => {\n      const [r, g, b] = rgb.map((v) =>\n        Math.min(255, Math.max(0, Math.round(v)))\n      );\n      const value = (r << 16) + (g << 8) + b;\n      return value.toString(16).padStart(6, '0');\n    },\n    hsl: (rgb: RGB): HSL => {\n      const [r, g, b] = rgb.map((v) => v / 255);\n      const min = Math.min(r, g, b);\n      const max = Math.max(r, g, b);\n      const delta = max - min;\n      let h = 0;\n      let s: number;\n\n      if (max === min) {\n        h = 0;\n      } else if (r === max) {\n        h = (g - b) / delta;\n      } else if (g === max) {\n        h = 2 + (b - r) / delta;\n      } else if (b === max) {\n        h = 4 + (r - g) / delta;\n      }\n\n      h = Math.min(h * 60, 360);\n\n      if (h < 0) {\n        h += 360;\n      }\n\n      const l = (min + max) / 2;\n\n      if (max === min) {\n        s = 0;\n      } else if (l <= 0.5) {\n        s = delta / (max + min);\n      } else {\n        s = delta / (2 - max - min);\n      }\n\n      return [h, s * 100, l * 100];\n    },\n    hsv: (rgb: RGB): HSV => {\n      const [r, g, b] = rgb.map((v) => v / 255);\n      const v = Math.max(r, g, b);\n      const diff = v - Math.min(r, g, b);\n      const calc = (c: number) => (v - c) / 6 / diff + 1 / 2;\n\n      let h = 0;\n      let s = 0;\n\n      if (diff > 0) {\n        s = diff / v;\n        const rDiff = calc(r);\n        const gDiff = calc(g);\n        const bDiff = calc(b);\n\n        if (r === v) {\n          h = bDiff - gDiff;\n        } else if (g === v) {\n          h = ONE_THIRD + rDiff - bDiff;\n        } else if (b === v) {\n          h = TWO_THIRDS + gDiff - rDiff;\n        }\n\n        if (h < 0) {\n          h += 1;\n        } else if (h > 1) {\n          h -= 1;\n        }\n      }\n\n      return [h * 360, s * 100, v * 100];\n    },\n  },\n  hsl: {\n    rgb: (hsl: HSL): RGB => {\n      const h = hsl[0] / 360;\n      const s = hsl[1] / 100;\n      const l = hsl[2] / 100;\n\n      if (s === 0) {\n        const val = l * 255;\n        return [val, val, val];\n      }\n\n      let t3: number;\n      let val: number;\n      const t2 = l < 0.5 ? l * (1 + s) : l + s - l * s;\n      const t1 = 2 * l - t2;\n      const rgb: RGB = [0, 0, 0];\n\n      for (let i = 0; i < 3; i++) {\n        t3 = h + ONE_THIRD * -(i - 1);\n        if (t3 < 0) {\n          t3++;\n        }\n\n        if (t3 > 1) {\n          t3--;\n        }\n\n        if (6 * t3 < 1) {\n          val = t1 + (t2 - t1) * 6 * t3;\n        } else if (2 * t3 < 1) {\n          val = t2;\n        } else if (3 * t3 < 2) {\n          val = t1 + (t2 - t1) * (TWO_THIRDS - t3) * 6;\n        } else {\n          val = t1;\n        }\n\n        rgb[i] = val * 255;\n      }\n\n      return rgb;\n    },\n    hsv: (hsl: HSL): HSV => {\n      const h = hsl[0];\n      let s = hsl[1] / 100;\n      let l = hsl[2] / 100;\n      let sMin = s;\n      const lMin = Math.max(l, 0.01);\n\n      l *= 2;\n      // Tests the doubled `l`, not `lMin` - the latter is captured before the\n      // doubling and never exceeds 1, which would leave the `2 - l` branch dead\n      // and push `v` past 100 for any lightness above 50%.\n      s *= l <= 1 ? l : 2 - l;\n      sMin *= lMin <= 1 ? lMin : 2 - lMin;\n      const v = (l + s) / 2;\n      const sv = l === 0 ? (2 * sMin) / (lMin + sMin) : (2 * s) / (l + s);\n\n      return [h, sv * 100, v * 100];\n    },\n  },\n  hsv: {\n    rgb: (hsv: HSV): RGB => {\n      const h = hsv[0] / 60;\n      const s = hsv[1] / 100;\n      let v = hsv[2] / 100;\n      const hi = Math.floor(h) % 6;\n\n      const f = h - Math.floor(h);\n      const p = 255 * v * (1 - s);\n      const q = 255 * v * (1 - s * f);\n      const t = 255 * v * (1 - s * (1 - f));\n      v *= 255;\n\n      switch (hi) {\n        case 0:\n          return [v, t, p];\n        case 1:\n          return [q, v, p];\n        case 2:\n          return [p, v, t];\n        case 3:\n          return [p, q, v];\n        case 4:\n          return [t, p, v];\n        case 5:\n          return [v, p, q];\n        default:\n          return [v, t, p];\n      }\n    },\n    hsl: (hsv: HSV): HSL => {\n      const h = hsv[0];\n      const s = hsv[1] / 100;\n      const v = hsv[2] / 100;\n      const vMin = Math.max(v, 0.01);\n      let sl: number;\n      let l: number;\n\n      l = (2 - s) * v;\n      const lMin = (2 - s) * vMin;\n      sl = s * vMin;\n      sl /= lMin <= 1 ? lMin : 2 - lMin;\n      sl = sl || 0;\n      l /= 2;\n\n      return [h, sl * 100, l * 100];\n    },\n  },\n});\n"]}

package/components/color-picker/model.d.ts

@@ -0,0 +1,120 @@
+import type { ColorFormat } from '../types.js';
+import { type HSL, type HSV, type RGB } from './converters.js';
+export type { ColorFormat };
+export declare const getContext: () => OffscreenCanvasRenderingContext2D | null;
+/**
+ * Represents a color with support for RGB, HSL, and HSV color spaces.
+ * Automatically syncs between color spaces when properties are modified.
+ *
+ * @example
+ * ```ts
+ * // Create from RGB
+ * const color = new ColorModel([255, 0, 0], 0.5);
+ *
+ * // Parse from string
+ * const parsed = ColorModel.parse('#ff0000');
+ *
+ * // Modify and convert
+ * color.h = 120;
+ * console.log(color.asString('hsl')); // 'hsla(120, 100%, 50%, 0.5)'
+ * ```
+ */
+export declare class ColorModel {
+    private _rgb;
+    private _hsl;
+    private _hsv;
+    private _alpha;
+    private _empty;
+    /** Creates a black color with full opacity. */
+    static default(): ColorModel;
+    /**
+     * Creates an empty color, representing a missing/undefined color value.
+     * An empty color serializes to an empty string and is considered "empty"
+     * until any of its channels are modified.
+     *
+     * Backed by white rather than black: an empty color still has to be drawn,
+     * and white is HSV `[0, 0, 100]` - the origin of the saturation/value plane,
+     * where a picker with nothing selected should start. Black would put the
+     * marker in the opposite corner, on a color the user never chose.
+     */
+    static empty(): ColorModel;
+    /**
+     * Parses a color string and creates a ColorModel instance.
+     * Supports hex, rgb, rgba, hsl, hsla, and named color formats.
+     *
+     * Empty, whitespace-only, or otherwise invalid strings produce an empty
+     * ColorModel instead of a stale/incorrect color.
+     */
+    static parse(color: string): ColorModel;
+    /** Creates a ColorModel from hue (0-360), saturation and lightness (0-100). */
+    static fromHSL(h: number, s: number, l: number, alpha?: number): ColorModel;
+    /** Creates a ColorModel from hue (0-360), saturation and value (0-100). */
+    static fromHSV(h: number, s: number, v: number, alpha?: number): ColorModel;
+    /**
+     * @param value - RGB values as [r, g, b] tuple (0-255 each)
+     * @param alpha - Alpha channel value (0-1)
+     */
+    constructor(value: RGB, alpha?: number);
+    /** Whether the color represents a missing/undefined value. */
+    get isEmpty(): boolean;
+    /** Rebuilds the two color spaces that were not the one just written to. */
+    private _syncFrom;
+    /**
+     * Writes a single channel and brings the rest of the model back in sync.
+     * Every channel setter goes through here, so no space is ever left stale.
+     */
+    private _setChannel;
+    /** Red component (0-255) */
+    get r(): number;
+    set r(value: number);
+    /** Green component (0-255) */
+    get g(): number;
+    set g(value: number);
+    /** Blue component (0-255) */
+    get b(): number;
+    set b(value: number);
+    /** Hue component (0-360) */
+    get h(): number;
+    set h(value: number);
+    /** Saturation component from HSL (0-100) */
+    get s(): number;
+    set s(value: number);
+    /** Lightness component (0-100) */
+    get l(): number;
+    set l(value: number);
+    /** Value component from HSV (0-100) */
+    get v(): number;
+    set v(value: number);
+    /** Alpha/opacity channel (0-1) */
+    get alpha(): number;
+    set alpha(value: number);
+    /**
+     * Sets the HSV saturation and value in a single atomic update, preserving
+     * the current hue and alpha. Intended for the 2D saturation/value picker
+     * area, where both components change together and setting them through the
+     * individual `s` (HSL) and `v` (HSV) setters would be both incorrect
+     * (mixing color spaces) and order-dependent.
+     *
+     * @param saturation - HSV saturation (0-100)
+     * @param value - HSV value (0-100)
+     */
+    setSaturationAndValue(saturation: number, value: number): void;
+    /**
+     * Converts the color to a CSS color string. An empty color renders as an
+     * empty string.
+     *
+     * @param format - The output format ('hex', 'rgb', or 'hsl')
+     * @param forceAlpha - Whether to always include the alpha channel
+     */
+    asString(format: ColorFormat, forceAlpha?: boolean): string;
+    /** Creates a copy of this color model. */
+    clone(): ColorModel;
+    /** Whether this color has the same channels and emptiness as `other`. */
+    equals(other: ColorModel): boolean;
+    /** Returns the RGB values as a tuple. */
+    toRGB(): RGB;
+    /** Returns the HSL values as a tuple. */
+    toHSL(): HSL;
+    /** Returns the HSV values as a tuple. */
+    toHSV(): HSV;
+}