@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.element.js","sources":["../../../src/components/color-picker/color-picker.element.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\n\nimport {\n  parseColor,\n  hslaToRgb,\n  hslaToHsv,\n  hslaToHex,\n  type HslaColor,\n} from '../../internal/utils/index.js';\n\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport type { UUIColorAreaEvent } from '../color-area/color-area.js';\n\nimport type { UUIColorSliderEvent } from '../color-slider/color-slider.js';\n\nimport type {\n  UUIColorSwatchesElement,\n  UUIColorSwatchesEvent,\n} from '../color-swatches/color-swatches.js';\n\nimport type { UUIInputElement } from '../input/input.js';\nimport { UUIColorPickerChangeEvent } from './UUIColorPickerEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nimport '../color-area/color-area.js';\nimport '../color-slider/color-slider.js';\nimport '../input/input.js';\nimport '../button-group/button-group.js';\nimport '../button/button.js';\nimport '../icon-registry-essential/icon-registry-essential.js';\nimport '../icon/icon.js';\nimport '../color-swatches/color-swatches.js';\nimport '../color-swatch/color-swatch.js';\nimport '../popover-container/popover-container.js';\n\nconst hasEyeDropper = 'EyeDropper' in window;\n\ntype EyeDropperConstructor = new () => EyeDropperInterface;\n\ninterface EyeDropperInterface {\n  open: () => Promise<{ sRGBHex: string }>;\n}\n\nexport type UUIColorPickerFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';\nexport type UUIColorPickerFormatWithAlpha =\n  | UUIColorPickerFormat\n  | 'hexa'\n  | 'rgba'\n  | 'hsla'\n  | 'hsva';\n\ndeclare const EyeDropper: EyeDropperConstructor;\n\ntype UUIColorPickerSize = 'small' | 'medium' | 'large';\n\n/**\n * @element uui-color-picker\n * @cssprop --uui-color-picker-width - The width of the color picker\n * @description\n * @fires {UUIColorPickerChangeEvent} change - Fired when the color changes\n */\nexport class UUIColorPickerElement extends LabelMixin('label', LitElement) {\n  @query('[part=\"input\"]') private readonly _input!: UUIInputElement;\n  @query('.color-picker__preview')\n  private readonly _previewButton!: HTMLButtonElement;\n  @query('#swatches') private readonly _swatches!: UUIColorSwatchesElement;\n\n  private _value: string = '';\n\n  @state() private inputValue = '';\n  @state() private hue = 0;\n  @state() private saturation = 0;\n  @state() private lightness = 0;\n  @state() private alpha = 100;\n  @state() private _color: HslaColor = { h: 0, s: 0, l: 0, a: 1 };\n\n  /**\n   * The current color.\n   * @attr\n   * @type {string}\n   * @default ''\n   **/\n  @property()\n  set value(value: string) {\n    if (this.value !== value) {\n      if (!this.setColor(value)) return;\n    }\n    this._value = value;\n  }\n  get value(): string {\n    return this._value;\n  }\n\n  /**\n   * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA\n   * respectively. The color picker will always accept user input in any format (including CSS color names) and convert\n   * it to the desired format.\n   * @attr\n   * @type {UUIColorPickerFormat}\n   * @default 'hex'\n   */\n  @property() format: UUIColorPickerFormat = 'hex';\n\n  /**\n   * The input's name attribute.\n   * @attr\n   * @type {string}\n   * @default ''\n   **/\n  @property() name = '';\n\n  /**\n   * Determines the size of the color picker's trigger. This has no effect on inline color pickers.\n   * @attr\n   * @type {UUIColorPickerSize}\n   * @default 'medium'\n   **/\n  @property() size: UUIColorPickerSize = 'medium';\n\n  /**\n   * Removes the format toggle.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle =\n    false;\n\n  /**\n   * Renders the color picker inline rather than inside a dropdown.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  /**\n   * Sets the color picker to disabled.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether to show the opacity slider.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean }) opacity = false;\n\n  /**\n   * Sets the color picker to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean }) uppercase = false;\n\n  /**\n   * An array of predefined color swatches to display. Can include any format the color picker can parse, including\n   * HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.\n   */\n  @property({ attribute: false }) swatches: string[] = [\n    '#d0021b',\n    '#f5a623',\n    '#f8e71c',\n    '#8b572a',\n    '#7ed321',\n    '#417505',\n    '#bd10e0',\n    '#9013fe',\n    '#4a90e2',\n    '#50e3c2',\n    '#b8e986',\n    '#000',\n    '#444',\n    '#888',\n    '#ccc',\n    '#fff',\n  ];\n\n  /** Returns the current value as a string in the specified format. */\n  getFormattedValue(format: UUIColorPickerFormat) {\n    const formatToUse = this.opacity ? `${format}a` : format;\n    const { h, s, l, a } = this._color;\n    const hexa = hslaToHex(h, s, l, a * 100);\n    const hex = hexa.length > 7 ? hexa.substring(0, hexa.length - 2) : hexa;\n    const { r, g, b } = hslaToRgb(h, s, l);\n    const { s: sv, v } = hslaToHsv(h, s, l);\n\n    switch (formatToUse) {\n      case 'hex':\n        return this.setLetterCase(hex);\n      case 'hexa':\n        return this.setLetterCase(hexa);\n      case 'rgb':\n      case 'rgba':\n        return this.setLetterCase(`rgb(${r} ${g} ${b} / ${a})`);\n      case 'hsl':\n      case 'hsla':\n        return this.setLetterCase(`hsl(${h} ${s}% ${l}% / ${a})`);\n      case 'hsv':\n        return this.setLetterCase(`hsv(${h}, ${sv}%, ${v}%)`);\n      case 'hsva':\n        return this.setLetterCase(`hsva(${h}, ${sv}%, ${v}%, ${a})`);\n      default:\n        return '';\n    }\n  }\n\n  handleFormatToggle() {\n    const formats = ['hex', 'rgb', 'hsl', 'hsv'];\n    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;\n    this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv';\n    this._syncValues();\n  }\n\n  handleAlphaChange(event: UUIColorSliderEvent) {\n    event.stopPropagation();\n    this._swatches?.resetSelection();\n\n    const element = event.target;\n\n    const newColor: HslaColor = {\n      h: this.hue,\n      s: this.saturation,\n      l: this.lightness,\n      a: Math.round(element.value) / 100,\n    };\n    this.setColor(newColor);\n  }\n\n  handleHueChange(event: UUIColorSliderEvent) {\n    event.stopPropagation();\n    this._swatches?.resetSelection();\n    const element = event.target;\n\n    const newColor: HslaColor = {\n      h: element.value,\n      s: this.saturation,\n      l: this.lightness,\n      a: this.alpha / 100,\n    };\n    this.setColor(newColor);\n  }\n\n  handleGridChange(event: UUIColorAreaEvent) {\n    event.stopPropagation();\n    this._swatches?.resetSelection();\n    const element = event.target;\n\n    const newColor: HslaColor = {\n      h: this.hue,\n      s: element.saturation,\n      l: element.lightness,\n      a: this.alpha / 100,\n    };\n\n    this.setColor(newColor);\n  }\n\n  handleInputChange(event: CustomEvent) {\n    event.stopImmediatePropagation();\n    this._swatches?.resetSelection();\n\n    this.inputValue = this._input.value as string;\n    this.setColor(this.inputValue);\n  }\n\n  handleInputKeyDown(event: KeyboardEvent) {\n    event.stopImmediatePropagation();\n    if (event.key === 'Enter') {\n      this._swatches?.resetSelection();\n\n      this.inputValue = this._input.value as string;\n      this.setColor(this.inputValue);\n\n      setTimeout(() => this._input.select());\n    }\n  }\n\n  handleColorSwatchChange(event: UUIColorSwatchesEvent) {\n    event.stopImmediatePropagation();\n\n    const target = event.target;\n    this.setColor(target.value);\n  }\n\n  handleCopy() {\n    navigator.clipboard.writeText(this._input.value as string).then(() => {\n      // Show copied animation\n      this._previewButton.classList.add('color-picker__preview-color--copied');\n      this._previewButton.addEventListener(\n        'animationend',\n        () => {\n          this._previewButton.classList.remove(\n            'color-picker__preview-color--copied',\n          );\n        },\n        { once: true },\n      );\n    });\n  }\n\n  handleEyeDropper() {\n    if (!hasEyeDropper) {\n      return;\n    }\n\n    const eyeDropper = new EyeDropper();\n\n    eyeDropper\n      .open()\n      .then(result => this.setColor(result.sRGBHex))\n      .catch(() => {\n        // The user canceled, do nothing\n      });\n  }\n\n  setColor(colorString: string | HslaColor) {\n    if (colorString === this.value) return;\n\n    if (!colorString) {\n      this.alpha = 100;\n      this.inputValue = '';\n      this._value = colorString;\n      this._color = { h: 0, s: 0, l: 0, a: 1 };\n\n      this.dispatchEvent(\n        new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE),\n      );\n\n      return true;\n    }\n\n    const parsed = parseColor(colorString);\n    if (!parsed) return false;\n\n    const { h, s, l, a } = parsed;\n\n    this.hue = h;\n    this.saturation = Math.round(s);\n    this.lightness = Math.round(l);\n    this.alpha = this.opacity ? a * 100 : 100; // Convert to 0-100 range, and set alpha to 100 if opacity is disabled\n\n    // Workaround as hue isn't correct after changing hue slider, but parseColor returns hue as zero when color is black.\n    if (typeof colorString !== 'string' && colorString.h) {\n      this.hue = colorString.h;\n    }\n\n    this._color = {\n      h: this.hue,\n      s: this.saturation,\n      l: this.lightness,\n      a: this.opacity ? a : 1,\n    };\n\n    this._syncValues();\n\n    this.dispatchEvent(\n      new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE),\n    );\n    return true;\n  }\n\n  setLetterCase(string: string) {\n    if (typeof string !== 'string') {\n      return '';\n    }\n    return this.uppercase ? string.toUpperCase() : string.toLowerCase();\n  }\n\n  private _syncValues() {\n    this.inputValue = this.getFormattedValue(this.format);\n    this._value = this.inputValue;\n  }\n\n  private _renderColorPicker() {\n    const previewColor = this.value\n      ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})`\n      : 'transparent';\n    return html`\n      <div\n        class=${classMap({\n          'color-picker': true,\n          'color-picker--inline': this.inline,\n          'color-picker--disabled': this.disabled,\n        })}\n        aria-disabled=${this.disabled ? 'true' : 'false'}>\n        <uui-color-area\n          .value=\"${this.value}\"\n          .hue=\"${Math.round(this.hue)}\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          @change=${this.handleGridChange}>\n        </uui-color-area>\n        <div class=\"color-picker__controls\">\n          <div class=\"color-picker__sliders\">\n            <uui-color-slider\n              hide-value-label\n              label=\"hue\"\n              class=\"hue-slider\"\n              .value=${Math.round(this.hue)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @change=${this.handleHueChange}>\n            </uui-color-slider>\n            ${this.opacity\n              ? html`\n                  <uui-color-slider\n                    hide-value-label\n                    label=\"alpha\"\n                    class=\"opacity-slider\"\n                    .value=${Math.round(this.alpha)}\n                    type=\"opacity\"\n                    .color=${hslaToHex(\n                      this.hue,\n                      this.saturation,\n                      this.lightness,\n                    )}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @change=${this.handleAlphaChange}>\n                  </uui-color-slider>\n                `\n              : ''}\n          </div>\n          <button\n            type=\"button\"\n            part=\"preview\"\n            class=\"color-picker__preview color-picker__transparent-bg\"\n            title=\"Copy\"\n            aria-label=\"Copy\"\n            style=${styleMap({ '--preview-color': previewColor })}\n            @click=${this.handleCopy}></button>\n        </div>\n        <div class=\"color-picker__user-input\" aria-live=\"polite\">\n          <uui-input\n            label=\"label\"\n            type=\"text\"\n            part=\"input\"\n            name=${this.name}\n            autocomplete=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            .value=${live(this.inputValue)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @keydown=${this.handleInputKeyDown}\n            @change=${this.handleInputChange}>\n            <uui-button-group slot=\"append\">\n              ${this.noFormatToggle\n                ? ''\n                : html`<uui-button\n                    label=\"Toggle color format\"\n                    @click=${this.handleFormatToggle}\n                    class=\"color-picker__toggle-format\"\n                    ?disabled=${this.disabled}\n                    compact>\n                    <span>${this.format}</span>\n                  </uui-button>`}\n              ${hasEyeDropper\n                ? html`<uui-button\n                    label=\"Select a color\"\n                    ?disabled=${this.disabled || this.readonly}\n                    @click=${this.handleEyeDropper}\n                    compact>\n                    <uui-icon-registry-essential>\n                      <uui-icon name=\"colorpicker\"></uui-icon>\n                    </uui-icon-registry-essential>\n                  </uui-button>`\n                : ''}\n            </uui-button-group>\n          </uui-input>\n        </div>\n        ${this._renderSwatches()}\n      </div>\n    `;\n  }\n\n  private _renderSwatches() {\n    if (!this.swatches?.length) return nothing;\n    return html`<uui-color-swatches\n      id=\"swatches\"\n      class=\"color-picker__swatches\"\n      label=\"Swatches\"\n      ?disabled=${this.disabled}\n      ?readonly=${this.readonly}\n      @change=${this.handleColorSwatchChange}>\n      ${this.swatches.map(\n        swatch =>\n          html`<uui-color-swatch label=\"${swatch}\" .value=${swatch}>\n          </uui-color-swatch>`,\n      )}\n    </uui-color-swatches>`;\n  }\n\n  private _renderPreviewButton() {\n    const previewColor = this.value\n      ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})`\n      : 'transparent';\n    return html`<button\n        type=\"button\"\n        part=\"trigger\"\n        aria-label=\"${this.label || 'Open Color picker'}\"\n        class=${classMap({\n          'color-picker__trigger': true,\n          'color-dropdown__trigger--disabled': this.disabled,\n          'color-dropdown__trigger--small': this.size === 'small',\n          'color-dropdown__trigger--medium': this.size === 'medium',\n          'color-dropdown__trigger--large': this.size === 'large',\n          'color-picker__transparent-bg': true,\n        })}\n        style=${styleMap({ '--preview-color': previewColor })}\n        ?disabled=${this.disabled}\n        aria-haspopup=\"true\"\n        aria-expanded=\"false\"\n        popovertarget=\"color-picker-popover\"></button>\n      <uui-popover-container id=\"color-picker-popover\">\n        ${this._renderColorPicker()}\n      </uui-popover-container>`;\n  }\n\n  render() {\n    return this.inline\n      ? this._renderColorPicker()\n      : this._renderPreviewButton();\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        --uui-look-outline-border: #ddd;\n        --uui-look-outline-border-hover: #aaa;\n        --uui-color-area-border-radius: var(--uui-border-radius-2)\n          var(--uui-border-radius-2) 0 0;\n        font-size: 0.8rem;\n        color: var(--uui-color-text);\n        display: block;\n        width: var(--uui-color-picker-width, 280px);\n      }\n      :host > button {\n        cursor: pointer;\n      }\n      uui-popover-container {\n        width: inherit;\n      }\n      .color-picker {\n        width: 100%;\n        background-color: var(--uui-color-surface);\n        user-select: none;\n        border: solid 1px var(--uui-color-border);\n        border-radius: var(--uui-border-radius-2);\n      }\n      .color-picker__user-input {\n        display: flex;\n        padding: 0 0.75rem 0.75rem 0.75rem;\n      }\n      .color-picker__user-input uui-button {\n        border-left: var(--uui-input-border-width, 1px) solid\n          var(--uui-input-border-color, var(--uui-color-border));\n      }\n      .color-picker__preview,\n      .color-picker__trigger {\n        flex: 0 0 auto;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        width: 2.25rem;\n        height: 2.25rem;\n        border: none;\n        border-radius: 50%;\n        background: none;\n      }\n      .color-picker__preview {\n        cursor: copy;\n        margin-left: 0.75rem;\n        border-radius: 50%;\n      }\n      .color-picker__trigger[disabled] {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n      .color-picker__preview::before,\n      .color-picker__trigger::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */\n        background-color: var(--preview-color);\n      }\n\n      .color-dropdown__trigger--empty::before {\n        background-color: transparent;\n      }\n\n      .color-picker__transparent-bg {\n        border: 1px solid var(--uui-color-border);\n        background-image:\n          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),\n          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);\n        background-size: 10px 10px;\n        background-position:\n          0 0,\n          0 0,\n          -5px -5px,\n          5px 5px;\n      }\n\n      .color-picker__preview-color--copied {\n        animation: pulse 0.75s;\n      }\n\n      @keyframes pulse {\n        0% {\n          box-shadow: 0 0 0 0 var(--uui-palette-space-cadet-light);\n        }\n        70% {\n          box-shadow: 0 0 0 0.5rem transparent;\n        }\n        100% {\n          box-shadow: 0 0 0 0 transparent;\n        }\n      }\n\n      .color-picker__controls {\n        padding: 0.75rem;\n        display: flex;\n        align-items: center;\n      }\n      .color-picker__sliders {\n        flex: 1 1 auto;\n      }\n\n      uui-color-slider:not(:last-of-type) {\n        margin-bottom: 1rem;\n      }\n\n      .color-picker__toggle-format {\n        min-width: 45px;\n        --uui-button-font-size: 0.8rem;\n      }\n      .color-picker__toggle-format > span {\n        text-transform: uppercase;\n      }\n\n      uui-color-swatches {\n        border-top: solid 1px var(--uui-color-border);\n        padding: 0.75rem;\n      }\n\n      button[slot='trigger'] {\n        border-radius: 50%;\n        cursor: pointer;\n        width: 36px;\n        height: 36px;\n      }\n\n      uui-input {\n        /*  lower the font size to avoid overflow with hlsa format */\n        font-size: 0.85rem;\n        box-sizing: content-box;\n        flex: 1;\n      }\n\n      uui-button-group {\n        height: 100%;\n      }\n\n      button.color-picker__trigger:focus-visible {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      uui-color-area {\n        width: 100%;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-picker.element.js","names":[],"sources":["../../../src/components/color-picker/color-picker.element.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\n\nimport {\n  parseColor,\n  hslaToRgb,\n  hslaToHsv,\n  hslaToHex,\n  type HslaColor,\n} from '../../internal/utils/index.js';\n\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport type { UUIColorAreaEvent } from '../color-area/color-area.js';\n\nimport type { UUIColorSliderEvent } from '../color-slider/color-slider.js';\n\nimport type {\n  UUIColorSwatchesElement,\n  UUIColorSwatchesEvent,\n} from '../color-swatches/color-swatches.js';\n\nimport type { UUIInputElement } from '../input/input.js';\nimport { UUIColorPickerChangeEvent } from './UUIColorPickerEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nimport '../color-area/color-area.js';\nimport '../color-slider/color-slider.js';\nimport '../input/input.js';\nimport '../button-group/button-group.js';\nimport '../button/button.js';\nimport '../icon-registry-essential/icon-registry-essential.js';\nimport '../icon/icon.js';\nimport '../color-swatches/color-swatches.js';\nimport '../color-swatch/color-swatch.js';\nimport '../popover-container/popover-container.js';\n\nconst hasEyeDropper = 'EyeDropper' in window;\n\ntype EyeDropperConstructor = new () => EyeDropperInterface;\n\ninterface EyeDropperInterface {\n  open: () => Promise<{ sRGBHex: string }>;\n}\n\nexport type UUIColorPickerFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';\nexport type UUIColorPickerFormatWithAlpha =\n  | UUIColorPickerFormat\n  | 'hexa'\n  | 'rgba'\n  | 'hsla'\n  | 'hsva';\n\ndeclare const EyeDropper: EyeDropperConstructor;\n\ntype UUIColorPickerSize = 'small' | 'medium' | 'large';\n\n/**\n * @element uui-color-picker\n * @cssprop --uui-color-picker-width - The width of the color picker\n * @description\n * @fires {UUIColorPickerChangeEvent} change - Fired when the color changes\n */\nexport class UUIColorPickerElement extends LabelMixin('label', LitElement) {\n  @query('[part=\"input\"]') private readonly _input!: UUIInputElement;\n  @query('.color-picker__preview')\n  private readonly _previewButton!: HTMLButtonElement;\n  @query('#swatches') private readonly _swatches!: UUIColorSwatchesElement;\n\n  private _value: string = '';\n\n  @state() private inputValue = '';\n  @state() private hue = 0;\n  @state() private saturation = 0;\n  @state() private lightness = 0;\n  @state() private alpha = 100;\n  @state() private _color: HslaColor = { h: 0, s: 0, l: 0, a: 1 };\n\n  /**\n   * The current color.\n   * @attr\n   * @type {string}\n   * @default ''\n   **/\n  @property()\n  set value(value: string) {\n    if (this.value !== value) {\n      if (!this.setColor(value)) return;\n    }\n    this._value = value;\n  }\n  get value(): string {\n    return this._value;\n  }\n\n  /**\n   * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA\n   * respectively. The color picker will always accept user input in any format (including CSS color names) and convert\n   * it to the desired format.\n   * @attr\n   * @type {UUIColorPickerFormat}\n   * @default 'hex'\n   */\n  @property() format: UUIColorPickerFormat = 'hex';\n\n  /**\n   * The input's name attribute.\n   * @attr\n   * @type {string}\n   * @default ''\n   **/\n  @property() name = '';\n\n  /**\n   * Determines the size of the color picker's trigger. This has no effect on inline color pickers.\n   * @attr\n   * @type {UUIColorPickerSize}\n   * @default 'medium'\n   **/\n  @property() size: UUIColorPickerSize = 'medium';\n\n  /**\n   * Removes the format toggle.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle =\n    false;\n\n  /**\n   * Renders the color picker inline rather than inside a dropdown.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  /**\n   * Sets the color picker to disabled.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether to show the opacity slider.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean }) opacity = false;\n\n  /**\n   * Sets the color picker to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.\n   * @attr\n   * @type {boolean}\n   * @default false\n   **/\n  @property({ type: Boolean }) uppercase = false;\n\n  /**\n   * An array of predefined color swatches to display. Can include any format the color picker can parse, including\n   * HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.\n   */\n  @property({ attribute: false }) swatches: string[] = [\n    '#d0021b',\n    '#f5a623',\n    '#f8e71c',\n    '#8b572a',\n    '#7ed321',\n    '#417505',\n    '#bd10e0',\n    '#9013fe',\n    '#4a90e2',\n    '#50e3c2',\n    '#b8e986',\n    '#000',\n    '#444',\n    '#888',\n    '#ccc',\n    '#fff',\n  ];\n\n  /** Returns the current value as a string in the specified format. */\n  getFormattedValue(format: UUIColorPickerFormat) {\n    const formatToUse = this.opacity ? `${format}a` : format;\n    const { h, s, l, a } = this._color;\n    const hexa = hslaToHex(h, s, l, a * 100);\n    const hex = hexa.length > 7 ? hexa.substring(0, hexa.length - 2) : hexa;\n    const { r, g, b } = hslaToRgb(h, s, l);\n    const { s: sv, v } = hslaToHsv(h, s, l);\n\n    switch (formatToUse) {\n      case 'hex':\n        return this.setLetterCase(hex);\n      case 'hexa':\n        return this.setLetterCase(hexa);\n      case 'rgb':\n      case 'rgba':\n        return this.setLetterCase(`rgb(${r} ${g} ${b} / ${a})`);\n      case 'hsl':\n      case 'hsla':\n        return this.setLetterCase(`hsl(${h} ${s}% ${l}% / ${a})`);\n      case 'hsv':\n        return this.setLetterCase(`hsv(${h}, ${sv}%, ${v}%)`);\n      case 'hsva':\n        return this.setLetterCase(`hsva(${h}, ${sv}%, ${v}%, ${a})`);\n      default:\n        return '';\n    }\n  }\n\n  handleFormatToggle() {\n    const formats = ['hex', 'rgb', 'hsl', 'hsv'];\n    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;\n    this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv';\n    this._syncValues();\n  }\n\n  handleAlphaChange(event: UUIColorSliderEvent) {\n    event.stopPropagation();\n    this._swatches?.resetSelection();\n\n    const element = event.target;\n\n    const newColor: HslaColor = {\n      h: this.hue,\n      s: this.saturation,\n      l: this.lightness,\n      a: Math.round(element.value) / 100,\n    };\n    this.setColor(newColor);\n  }\n\n  handleHueChange(event: UUIColorSliderEvent) {\n    event.stopPropagation();\n    this._swatches?.resetSelection();\n    const element = event.target;\n\n    const newColor: HslaColor = {\n      h: element.value,\n      s: this.saturation,\n      l: this.lightness,\n      a: this.alpha / 100,\n    };\n    this.setColor(newColor);\n  }\n\n  handleGridChange(event: UUIColorAreaEvent) {\n    event.stopPropagation();\n    this._swatches?.resetSelection();\n    const element = event.target;\n\n    const newColor: HslaColor = {\n      h: this.hue,\n      s: element.saturation,\n      l: element.lightness,\n      a: this.alpha / 100,\n    };\n\n    this.setColor(newColor);\n  }\n\n  handleInputChange(event: CustomEvent) {\n    event.stopImmediatePropagation();\n    this._swatches?.resetSelection();\n\n    this.inputValue = this._input.value as string;\n    this.setColor(this.inputValue);\n  }\n\n  handleInputKeyDown(event: KeyboardEvent) {\n    event.stopImmediatePropagation();\n    if (event.key === 'Enter') {\n      this._swatches?.resetSelection();\n\n      this.inputValue = this._input.value as string;\n      this.setColor(this.inputValue);\n\n      setTimeout(() => this._input.select());\n    }\n  }\n\n  handleColorSwatchChange(event: UUIColorSwatchesEvent) {\n    event.stopImmediatePropagation();\n\n    const target = event.target;\n    this.setColor(target.value);\n  }\n\n  handleCopy() {\n    navigator.clipboard.writeText(this._input.value as string).then(() => {\n      // Show copied animation\n      this._previewButton.classList.add('color-picker__preview-color--copied');\n      this._previewButton.addEventListener(\n        'animationend',\n        () => {\n          this._previewButton.classList.remove(\n            'color-picker__preview-color--copied',\n          );\n        },\n        { once: true },\n      );\n    });\n  }\n\n  handleEyeDropper() {\n    if (!hasEyeDropper) {\n      return;\n    }\n\n    const eyeDropper = new EyeDropper();\n\n    eyeDropper\n      .open()\n      .then(result => this.setColor(result.sRGBHex))\n      .catch(() => {\n        // The user canceled, do nothing\n      });\n  }\n\n  setColor(colorString: string | HslaColor) {\n    if (colorString === this.value) return;\n\n    if (!colorString) {\n      this.alpha = 100;\n      this.inputValue = '';\n      this._value = colorString;\n      this._color = { h: 0, s: 0, l: 0, a: 1 };\n\n      this.dispatchEvent(\n        new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE),\n      );\n\n      return true;\n    }\n\n    const parsed = parseColor(colorString);\n    if (!parsed) return false;\n\n    const { h, s, l, a } = parsed;\n\n    this.hue = Math.round(h);\n    this.saturation = Math.round(s);\n    this.lightness = Math.round(l);\n    this.alpha = this.opacity ? a * 100 : 100; // Convert to 0-100 range, and set alpha to 100 if opacity is disabled\n\n    // Workaround as hue isn't correct after changing hue slider, but parseColor returns hue as zero when color is black.\n    if (typeof colorString !== 'string' && colorString.h) {\n      this.hue = Math.round(colorString.h);\n    }\n\n    this._color = {\n      h: this.hue,\n      s: this.saturation,\n      l: this.lightness,\n      a: this.opacity ? a : 1,\n    };\n\n    this._syncValues();\n\n    this.dispatchEvent(\n      new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE),\n    );\n    return true;\n  }\n\n  setLetterCase(string: string) {\n    if (typeof string !== 'string') {\n      return '';\n    }\n    return this.uppercase ? string.toUpperCase() : string.toLowerCase();\n  }\n\n  private _syncValues() {\n    this.inputValue = this.getFormattedValue(this.format);\n    this._value = this.inputValue;\n  }\n\n  private _renderColorPicker() {\n    const previewColor = this.value\n      ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})`\n      : 'transparent';\n    return html`\n      <div\n        class=${classMap({\n          'color-picker': true,\n          'color-picker--inline': this.inline,\n          'color-picker--disabled': this.disabled,\n        })}\n        aria-disabled=${this.disabled ? 'true' : 'false'}>\n        <uui-color-area\n          .value=\"${this.value}\"\n          .hue=\"${Math.round(this.hue)}\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          @change=${this.handleGridChange}>\n        </uui-color-area>\n        <div class=\"color-picker__controls\">\n          <div class=\"color-picker__sliders\">\n            <uui-color-slider\n              hide-value-label\n              label=\"hue\"\n              class=\"hue-slider\"\n              .value=${Math.round(this.hue)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              @change=${this.handleHueChange}>\n            </uui-color-slider>\n            ${this.opacity\n              ? html`\n                  <uui-color-slider\n                    hide-value-label\n                    label=\"alpha\"\n                    class=\"opacity-slider\"\n                    .value=${Math.round(this.alpha)}\n                    type=\"opacity\"\n                    .color=${hslaToHex(\n                      this.hue,\n                      this.saturation,\n                      this.lightness,\n                    )}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    @change=${this.handleAlphaChange}>\n                  </uui-color-slider>\n                `\n              : ''}\n          </div>\n          <button\n            type=\"button\"\n            part=\"preview\"\n            class=\"color-picker__preview color-picker__transparent-bg\"\n            title=\"Copy\"\n            aria-label=\"Copy\"\n            style=${styleMap({ '--preview-color': previewColor })}\n            @click=${this.handleCopy}></button>\n        </div>\n        <div class=\"color-picker__user-input\" aria-live=\"polite\">\n          <uui-input\n            label=\"label\"\n            type=\"text\"\n            part=\"input\"\n            name=${this.name}\n            autocomplete=\"off\"\n            autocapitalize=\"off\"\n            spellcheck=\"false\"\n            .value=${live(this.inputValue)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            @keydown=${this.handleInputKeyDown}\n            @change=${this.handleInputChange}>\n            <uui-button-group slot=\"append\">\n              ${this.noFormatToggle\n                ? ''\n                : html`<uui-button\n                    label=\"Toggle color format\"\n                    @click=${this.handleFormatToggle}\n                    class=\"color-picker__toggle-format\"\n                    ?disabled=${this.disabled}\n                    compact>\n                    <span>${this.format}</span>\n                  </uui-button>`}\n              ${hasEyeDropper\n                ? html`<uui-button\n                    label=\"Select a color\"\n                    ?disabled=${this.disabled || this.readonly}\n                    @click=${this.handleEyeDropper}\n                    compact>\n                    <uui-icon-registry-essential>\n                      <uui-icon name=\"colorpicker\"></uui-icon>\n                    </uui-icon-registry-essential>\n                  </uui-button>`\n                : ''}\n            </uui-button-group>\n          </uui-input>\n        </div>\n        ${this._renderSwatches()}\n      </div>\n    `;\n  }\n\n  private _renderSwatches() {\n    if (!this.swatches?.length) return nothing;\n    return html`<uui-color-swatches\n      id=\"swatches\"\n      class=\"color-picker__swatches\"\n      label=\"Swatches\"\n      ?disabled=${this.disabled}\n      ?readonly=${this.readonly}\n      @change=${this.handleColorSwatchChange}>\n      ${this.swatches.map(\n        swatch =>\n          html`<uui-color-swatch label=\"${swatch}\" .value=${swatch}>\n          </uui-color-swatch>`,\n      )}\n    </uui-color-swatches>`;\n  }\n\n  private _renderPreviewButton() {\n    const previewColor = this.value\n      ? `hsl(${this.hue} ${this.saturation}% ${this.lightness}% / ${this.alpha / 100})`\n      : 'transparent';\n    return html`<button\n        type=\"button\"\n        part=\"trigger\"\n        aria-label=\"${this.label || 'Open Color picker'}\"\n        class=${classMap({\n          'color-picker__trigger': true,\n          'color-dropdown__trigger--disabled': this.disabled,\n          'color-dropdown__trigger--small': this.size === 'small',\n          'color-dropdown__trigger--medium': this.size === 'medium',\n          'color-dropdown__trigger--large': this.size === 'large',\n          'color-picker__transparent-bg': true,\n        })}\n        style=${styleMap({ '--preview-color': previewColor })}\n        ?disabled=${this.disabled}\n        aria-haspopup=\"true\"\n        aria-expanded=\"false\"\n        popovertarget=\"color-picker-popover\"></button>\n      <uui-popover-container id=\"color-picker-popover\" no-scroll>\n        ${this._renderColorPicker()}\n      </uui-popover-container>`;\n  }\n\n  render() {\n    return this.inline\n      ? this._renderColorPicker()\n      : this._renderPreviewButton();\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        --uui-look-outline-border: #ddd;\n        --uui-look-outline-border-hover: #aaa;\n        --uui-color-area-border-radius: var(--uui-border-radius-2)\n          var(--uui-border-radius-2) 0 0;\n        font-size: 0.8rem;\n        color: var(--uui-color-text);\n        display: block;\n        width: var(--uui-color-picker-width, 280px);\n      }\n      :host > button {\n        cursor: pointer;\n      }\n      uui-popover-container {\n        width: inherit;\n      }\n      .color-picker {\n        width: 100%;\n        background-color: var(--uui-color-surface);\n        user-select: none;\n        border: solid 1px var(--uui-color-border);\n        border-radius: var(--uui-border-radius-2);\n      }\n      .color-picker__user-input {\n        display: flex;\n        padding: 0 0.75rem 0.75rem 0.75rem;\n      }\n      .color-picker__user-input uui-button {\n        border-left: var(--uui-input-border-width, 1px) solid\n          var(--uui-input-border-color, var(--uui-color-border));\n      }\n      .color-picker__preview,\n      .color-picker__trigger {\n        flex: 0 0 auto;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        width: 2.25rem;\n        height: 2.25rem;\n        border: none;\n        border-radius: 50%;\n        background: none;\n      }\n      .color-picker__preview {\n        cursor: copy;\n        margin-left: 0.75rem;\n        border-radius: 50%;\n      }\n      .color-picker__trigger[disabled] {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n      .color-picker__preview::before,\n      .color-picker__trigger::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n        /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */\n        background-color: var(--preview-color);\n      }\n\n      .color-dropdown__trigger--empty::before {\n        background-color: transparent;\n      }\n\n      .color-picker__transparent-bg {\n        border: 1px solid var(--uui-color-border);\n        background-image:\n          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),\n          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),\n          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);\n        background-size: 10px 10px;\n        background-position:\n          0 0,\n          0 0,\n          -5px -5px,\n          5px 5px;\n      }\n\n      .color-picker__preview-color--copied {\n        animation: pulse 0.75s;\n      }\n\n      @keyframes pulse {\n        0% {\n          box-shadow: 0 0 0 0 var(--uui-palette-space-cadet-light);\n        }\n        70% {\n          box-shadow: 0 0 0 0.5rem transparent;\n        }\n        100% {\n          box-shadow: 0 0 0 0 transparent;\n        }\n      }\n\n      .color-picker__controls {\n        padding: 0.75rem;\n        display: flex;\n        align-items: center;\n      }\n      .color-picker__sliders {\n        flex: 1 1 auto;\n      }\n\n      uui-color-slider:not(:last-of-type) {\n        margin-bottom: 1rem;\n      }\n\n      .color-picker__toggle-format {\n        min-width: 45px;\n        --uui-button-font-size: 0.8rem;\n      }\n      .color-picker__toggle-format > span {\n        text-transform: uppercase;\n      }\n\n      uui-color-swatches {\n        border-top: solid 1px var(--uui-color-border);\n        padding: 0.75rem;\n      }\n\n      button[slot='trigger'] {\n        border-radius: 50%;\n        cursor: pointer;\n        width: 36px;\n        height: 36px;\n      }\n\n      uui-input {\n        /*  lower the font size to avoid overflow with hlsa format */\n        font-size: 0.85rem;\n        box-sizing: content-box;\n        flex: 1;\n      }\n\n      uui-button-group {\n        height: 100%;\n      }\n\n      button.color-picker__trigger:focus-visible {\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      uui-color-area {\n        width: 100%;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

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

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIColorPickerElement } from "./color-picker.element.js";
 import { UUIColorPickerChangeEvent } from "./UUIColorPickerEvent.js";
+import { UUIColorPickerElement } from "./color-picker.element.js";
+//#region src/components/color-picker/color-picker.ts
 defineElement("uui-color-picker", UUIColorPickerElement);
-export {
-  UUIColorPickerChangeEvent,
-  UUIColorPickerElement,
-  UUIColorPickerElement as default
-};
-//# sourceMappingURL=color-picker.js.map
+//#endregion
+export { UUIColorPickerChangeEvent, UUIColorPickerElement };
+
+//# sourceMappingURL=color-picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIColorPickerElement } from './color-picker.element.js';\n\ndefineElement('uui-color-picker', UUIColorPickerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-color-picker': UUIColorPickerElement;\n  }\n}\n\nexport * from './color-picker.element.js';\nexport * from './UUIColorPickerEvent.js';\nexport { UUIColorPickerElement as default } from './color-picker.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,oBAAoB,qBAAqB;"}
+{"version":3,"file":"color-picker.js","names":[],"sources":["../../../src/components/color-picker/color-picker.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIColorPickerElement } from './color-picker.element.js';\n\ndefineElement('uui-color-picker', UUIColorPickerElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-color-picker': UUIColorPickerElement;\n  }\n}\n\nexport * from './color-picker.element.js';\nexport * from './UUIColorPickerEvent.js';\n"],"mappings":";;;;AAGA,cAAc,oBAAoB,qBAAqB"}

package/dist/components/color-slider/UUIColorSliderEvent.js

@@ -1,15 +1,17 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIColorSliderEvent = class _UUIColorSliderEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      ...eventInit
-    });
-  }
+//#region src/components/color-slider/UUIColorSliderEvent.ts
+var UUIColorSliderEvent = class extends UUIEvent {
+	static {
+		this.CHANGE = "change";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			...eventInit
+		});
+	}
 };
-_UUIColorSliderEvent.CHANGE = "change";
-let UUIColorSliderEvent = _UUIColorSliderEvent;
-export {
-  UUIColorSliderEvent
-};
-//# sourceMappingURL=UUIColorSliderEvent.js.map
+//#endregion
+export { UUIColorSliderEvent };
+
+//# sourceMappingURL=UUIColorSliderEvent.js.map

package/dist/components/color-slider/UUIColorSliderEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIColorSliderEvent.js","sources":["../../../src/components/color-slider/UUIColorSliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIColorSliderElement } from './color-slider.element.js';\n\nexport class UUIColorSliderEvent extends UUIEvent<{}, UUIColorSliderElement> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,uBAAN,MAAM,6BAA4B,SAAoC;AAAA,EAG3E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,qBAAuB,SAAS;AAD3B,IAAM,sBAAN;"}
+{"version":3,"file":"UUIColorSliderEvent.js","names":[],"sources":["../../../src/components/color-slider/UUIColorSliderEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIColorSliderElement } from './color-slider.element.js';\n\nexport class UUIColorSliderEvent extends UUIEvent<{}, UUIColorSliderElement> {\n  public static readonly CHANGE = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"mappings":";;AAGA,IAAa,sBAAb,cAAyC,SAAoC;;gBAC3C;;CAEhC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/color-slider/color-slider.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './color-slider.element.js';
 export * from './UUIColorSliderEvent.js';
-export { UUIColorSliderElement as default } from './color-slider.element.js';

package/dist/components/color-slider/color-slider.element.js

@@ -1,163 +1,141 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIColorSliderElement_instances, updateGradients_fn;
-import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { UUIColorSliderEvent } from "./UUIColorSliderEvent.js";
-import { parseColor, hslaToRgb, hslaToHex } from "../../internal/utils/color.js";
-import { reverseNumberInRange, clamp } from "../../internal/utils/math.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { clamp, reverseNumberInRange } from "../../internal/utils/math.js";
+import { hslaToHex, hslaToRgb, parseColor } from "../../internal/utils/color.js";
 import { drag } from "../../internal/utils/drag.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUIColorSliderElement = class _UUIColorSliderElement extends LabelMixin("label", LitElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUIColorSliderElement_instances);
-    this.type = "hue";
-    this.color = "";
-    this.min = 0;
-    this.max = 100;
-    this.precision = 1;
-    this.vertical = false;
-    this.value = 0;
-    this.readonly = false;
-    this.disabled = false;
-    this.hideValueLabel = false;
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("type")) {
-      const typeMaxValues = {
-        hue: 360,
-        saturation: 100,
-        lightness: 100,
-        opacity: 100
-      };
-      this.max = typeMaxValues[this.type] ?? this.max;
-    }
-    if ((changedProperties.has("type") || changedProperties.has("color")) && this.color) {
-      __privateMethod(this, _UUIColorSliderElement_instances, updateGradients_fn).call(this);
-    }
-  }
-  firstUpdated() {
-    this.container = this.shadowRoot.querySelector("#color-slider");
-    this.handle = this.container.querySelector(
-      "#color-slider__handle"
-    );
-  }
-  handleDrag(event) {
-    if (this.disabled || this.readonly || !this.container || !this.handle)
-      return;
-    const { width, height } = this.container.getBoundingClientRect();
-    this.handle.focus();
-    event.preventDefault();
-    drag(this.container, {
-      onMove: (x, y) => {
-        if (this.vertical) {
-          this.value = reverseNumberInRange(
-            clamp(y / height * this.max, this.min, this.max),
-            this.min,
-            this.max
-          );
-        } else {
-          this.value = clamp(x / width * this.max, this.min, this.max);
-        }
-        this.syncValues();
-      },
-      initialEvent: event
-    });
-  }
-  handleClick(event) {
-    if (this.disabled || this.readonly) return;
-    this.value = this.getValueFromMousePosition(event);
-    this.syncValues();
-  }
-  handleKeyDown(event) {
-    const increment = event.shiftKey ? 10 : 1;
-    if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
-      event.preventDefault();
-      this.value = clamp(this.value - increment, this.min, this.max);
-      this.syncValues();
-    } else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
-      event.preventDefault();
-      this.value = clamp(this.value + increment, this.min, this.max);
-      this.syncValues();
-    } else if (event.key === "Home") {
-      event.preventDefault();
-      this.value = this.min;
-      this.syncValues();
-    } else if (event.key === "End") {
-      event.preventDefault();
-      this.value = this.max;
-      this.syncValues();
-    }
-  }
-  getValueFromMousePosition(event) {
-    if (this.vertical) {
-      return this.getValueFromYCoordinate(event.clientY);
-    }
-    return this.getValueFromXCoordinate(event.clientX);
-  }
-  getValueFromTouchPosition(event) {
-    if (this.vertical) {
-      return this.getValueFromYCoordinate(event.touches[0].clientY);
-    }
-    return this.getValueFromXCoordinate(event.touches[0].clientX);
-  }
-  getValueFromXCoordinate(coordinate) {
-    const { left, width } = this.container.getBoundingClientRect();
-    return clamp(
-      this.roundToPrecision((coordinate - left) / width * this.max),
-      this.min,
-      this.max
-    );
-  }
-  getValueFromYCoordinate(coordinate) {
-    const { top, height } = this.container.getBoundingClientRect();
-    return clamp(
-      this.roundToPrecision((coordinate - top) / height * this.max),
-      this.min,
-      this.max
-    );
-  }
-  roundToPrecision(numberToRound) {
-    const multiplier = 1 / this.precision;
-    return Math.ceil(numberToRound * multiplier) / multiplier;
-  }
-  syncValues() {
-    this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));
-  }
-  get cssPropCurrentValue() {
-    if (this.value === 0) {
-      return this.vertical ? 100 : 0;
-    }
-    const ratio = this.vertical ? this.max / reverseNumberInRange(this.value, this.min, this.max) : this.max / this.value;
-    return 100 / ratio;
-  }
-  render() {
-    return html`<div
+import { UUIColorSliderEvent } from "./UUIColorSliderEvent.js";
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/color-slider/color-slider.element.ts
+/**
+*  @element uui-color-slider
+*  @description A slider that is a part of uui-color-picker
+* @fires {UUIColorSliderEvent} change - Fires when the value of the slider changes.
+* @cssprop --uui-slider-height - The height of the slider.
+* @cssprop --uui-slider-handle-size - The size of the slider handle.
+* @cssprop --uui-slider-background-image - The background image of the slider.
+* @cssprop --uui-slider-background-size - The background size of the slider.
+* @cssprop --uui-slider-background-position - The background position of the slider.
+*/
+var UUIColorSliderElement = class extends LabelMixin("label", LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "hue";
+		this.color = "";
+		this.min = 0;
+		this.max = 100;
+		this.precision = 1;
+		this.vertical = false;
+		this.value = 0;
+		this.readonly = false;
+		this.disabled = false;
+		this.hideValueLabel = false;
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("type")) {
+			const typeMaxValues = {
+				hue: 360,
+				saturation: 100,
+				lightness: 100,
+				opacity: 100
+			};
+			this.max = typeMaxValues[this.type] ?? this.max;
+		}
+		if ((changedProperties.has("type") || changedProperties.has("color")) && this.color) this.#updateGradients();
+	}
+	#updateGradients() {
+		const parsed = parseColor(this.color);
+		if (!parsed) return;
+		const { h, s, l } = parsed;
+		const { r, g, b } = hslaToRgb(h, s, l);
+		const direction = this.vertical ? "top" : "right";
+		const gradients = {
+			saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,
+			lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`
+		};
+		const hueColor = this.type === "opacity" ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)` : null;
+		this.style.setProperty("--uui-slider-background-image", gradients[this.type] ?? null);
+		this.style.setProperty("--uui-slider-hue-color", hueColor);
+	}
+	firstUpdated() {
+		this.container = this.shadowRoot.querySelector("#color-slider");
+		this.handle = this.container.querySelector("#color-slider__handle");
+	}
+	handleDrag(event) {
+		if (this.disabled || this.readonly || !this.container || !this.handle) return;
+		const { width, height } = this.container.getBoundingClientRect();
+		this.handle.focus();
+		event.preventDefault();
+		drag(this.container, {
+			onMove: (x, y) => {
+				if (this.vertical) this.value = reverseNumberInRange(clamp(y / height * this.max, this.min, this.max), this.min, this.max);
+				else this.value = clamp(x / width * this.max, this.min, this.max);
+				this.syncValues();
+			},
+			initialEvent: event
+		});
+	}
+	handleClick(event) {
+		if (this.disabled || this.readonly) return;
+		this.value = this.getValueFromMousePosition(event);
+		this.syncValues();
+	}
+	handleKeyDown(event) {
+		const increment = event.shiftKey ? 10 : 1;
+		if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+			event.preventDefault();
+			this.value = clamp(this.value - increment, this.min, this.max);
+			this.syncValues();
+		} else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+			event.preventDefault();
+			this.value = clamp(this.value + increment, this.min, this.max);
+			this.syncValues();
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			this.value = this.min;
+			this.syncValues();
+		} else if (event.key === "End") {
+			event.preventDefault();
+			this.value = this.max;
+			this.syncValues();
+		}
+	}
+	getValueFromMousePosition(event) {
+		if (this.vertical) return this.getValueFromYCoordinate(event.clientY);
+		return this.getValueFromXCoordinate(event.clientX);
+	}
+	getValueFromTouchPosition(event) {
+		if (this.vertical) return this.getValueFromYCoordinate(event.touches[0].clientY);
+		return this.getValueFromXCoordinate(event.touches[0].clientX);
+	}
+	getValueFromXCoordinate(coordinate) {
+		const { left, width } = this.container.getBoundingClientRect();
+		return clamp(this.roundToPrecision((coordinate - left) / width * this.max), this.min, this.max);
+	}
+	getValueFromYCoordinate(coordinate) {
+		const { top, height } = this.container.getBoundingClientRect();
+		return clamp(this.roundToPrecision((coordinate - top) / height * this.max), this.min, this.max);
+	}
+	roundToPrecision(numberToRound) {
+		const multiplier = 1 / this.precision;
+		return Math.ceil(numberToRound * multiplier) / multiplier;
+	}
+	syncValues() {
+		this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));
+	}
+	get cssPropCurrentValue() {
+		if (this.value === 0) return this.vertical ? 100 : 0;
+		return 100 / (this.vertical ? this.max / reverseNumberInRange(this.value, this.min, this.max) : this.max / this.value);
+	}
+	render() {
+		return html`<div
         part="slider"
         id="color-slider"
         role="slider"
-        aria-label=${ifDefined(
-      this.getAttribute("aria-label") || this.label || void 0
-    )}
-        aria-labelledby=${ifDefined(
-      this.getAttribute("aria-labelledby") || void 0
-    )}
+        aria-label=${ifDefined(this.getAttribute("aria-label") || this.label || void 0)}
+        aria-labelledby=${ifDefined(this.getAttribute("aria-labelledby") || void 0)}
         aria-orientation="${this.vertical ? "vertical" : "horizontal"}"
         aria-valuemin="${Math.round(this.min)}"
         aria-valuemax="${Math.round(this.max)}"
@@ -168,42 +146,21 @@ const _UUIColorSliderElement = class _UUIColorSliderElement extends LabelMixin("
         @keydown=${this.handleKeyDown}>
         ${this.type === "opacity" ? html`<div
               id="current-hue"
-              style=${styleMap({
-      backgroundImage: `var(--uui-slider-hue-color)`
-    })}></div>` : ""}
+              style=${styleMap({ backgroundImage: `var(--uui-slider-hue-color)` })}></div>` : ""}
         <!-- <slot name="detail"> </slot> -->
         <span
           id="color-slider__handle"
           style=${styleMap({
-      "--current-value": `${this.cssPropCurrentValue}%`,
-      backgroundColor: this.type === "hue" ? hslaToHex(Math.round(this.value), 100, 50) : void 0
-    })}
+			"--current-value": `${this.cssPropCurrentValue}%`,
+			backgroundColor: this.type === "hue" ? hslaToHex(Math.round(this.value), 100, 50) : void 0
+		})}
           tabindex=${ifDefined(this.disabled ? void 0 : "0")}>
         </span>
       </div>
       ${this.hideValueLabel ? null : Math.round(this.value)}`;
-  }
-};
-_UUIColorSliderElement_instances = new WeakSet();
-updateGradients_fn = function() {
-  const parsed = parseColor(this.color);
-  if (!parsed) return;
-  const { h, s, l } = parsed;
-  const { r, g, b } = hslaToRgb(h, s, l);
-  const direction = this.vertical ? "top" : "right";
-  const gradients = {
-    saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,
-    lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`
-  };
-  const hueColor = this.type === "opacity" ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)` : null;
-  this.style.setProperty(
-    "--uui-slider-background-image",
-    gradients[this.type] ?? null
-  );
-  this.style.setProperty("--uui-slider-hue-color", hueColor);
-};
-_UUIColorSliderElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         --uui-slider-height: 15px;
         --uui-slider-handle-size: 17px;
@@ -319,40 +276,33 @@ _UUIColorSliderElement.styles = [
         position: absolute;
         inset: 0 0 0 0;
       }
-    `
-];
-let UUIColorSliderElement = _UUIColorSliderElement;
-__decorateClass([
-  property({ reflect: true })
-], UUIColorSliderElement.prototype, "type");
-__decorateClass([
-  property()
-], UUIColorSliderElement.prototype, "color");
-__decorateClass([
-  property({ type: Number })
-], UUIColorSliderElement.prototype, "min");
-__decorateClass([
-  property({ type: Number })
-], UUIColorSliderElement.prototype, "max");
-__decorateClass([
-  property({ type: Number })
-], UUIColorSliderElement.prototype, "precision");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorSliderElement.prototype, "vertical");
-__decorateClass([
-  property({ type: Number })
-], UUIColorSliderElement.prototype, "value");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorSliderElement.prototype, "readonly");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIColorSliderElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, attribute: "hide-value-label", reflect: true })
-], UUIColorSliderElement.prototype, "hideValueLabel");
-export {
-  UUIColorSliderElement
+    `];
+	}
 };
-//# sourceMappingURL=color-slider.element.js.map
+__decorate([property({ reflect: true })], UUIColorSliderElement.prototype, "type", void 0);
+__decorate([property()], UUIColorSliderElement.prototype, "color", void 0);
+__decorate([property({ type: Number })], UUIColorSliderElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], UUIColorSliderElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], UUIColorSliderElement.prototype, "precision", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorSliderElement.prototype, "vertical", void 0);
+__decorate([property({ type: Number })], UUIColorSliderElement.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorSliderElement.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIColorSliderElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-value-label",
+	reflect: true
+})], UUIColorSliderElement.prototype, "hideValueLabel", void 0);
+//#endregion
+export { UUIColorSliderElement };
+
+//# sourceMappingURL=color-slider.element.js.map