@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"color-slider.element.js","sources":["../../../src/components/color-slider/color-slider.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  drag,\n  clamp,\n  reverseNumberInRange,\n  parseColor,\n  hslaToRgb,\n  hslaToHex,\n} from '../../internal/utils/index.js';\n\nimport { UUIColorSliderEvent } from './UUIColorSliderEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nexport type UUIColorSliderOrientation = 'horizontal' | 'vertical';\nexport type UUIColorSliderType = 'hue' | 'opacity' | 'saturation' | 'lightness';\n\n/**\n *  @element uui-color-slider\n *  @description A slider that is a part of uui-color-picker\n * @fires {UUIColorSliderEvent} change - Fires when the value of the slider changes.\n * @cssprop --uui-slider-height - The height of the slider.\n * @cssprop --uui-slider-handle-size - The size of the slider handle.\n * @cssprop --uui-slider-background-image - The background image of the slider.\n * @cssprop --uui-slider-background-size - The background size of the slider.\n * @cssprop --uui-slider-background-position - The background position of the slider.\n */\nexport class UUIColorSliderElement extends LabelMixin('label', LitElement) {\n  /**\n   * The type of the slider.\n   * @type {UUIColorSliderType}\n   * @attr\n   * @default 'hue'\n   */\n  @property({ reflect: true }) type: UUIColorSliderType = 'hue';\n\n  /**\n   * The color value.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property() color: string = '';\n\n  /**\n   * This is a minimum value of the slider.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * This is a maximum value of the slider.\n   * @type {number}\n   * @attr\n   * @default 100\n   */\n  @property({ type: Number }) max = 100;\n\n  /**\n   * The minimum increment value allowed by the slider.\n   * @type {number}\n   * @attr\n   **/\n  @property({ type: Number }) precision = 1;\n\n  /**\n   * Draws the slider in a vertical orientation.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * The current value of the slider.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number }) value = 0;\n\n  /**\n   * Sets the color slider to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Sets the color slider to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Hides the value label under the slider.\n   * @type {boolean}\n   * @attr 'hide-value-label'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-value-label', reflect: true })\n  hideValueLabel = false;\n\n  private container!: HTMLElement;\n  private handle!: HTMLElement;\n\n  willUpdate(changedProperties: Map<string, any>) {\n    if (changedProperties.has('type')) {\n      const typeMaxValues: Record<string, number> = {\n        hue: 360,\n        saturation: 100,\n        lightness: 100,\n        opacity: 100,\n      };\n      this.max = typeMaxValues[this.type] ?? this.max;\n    }\n\n    if (\n      (changedProperties.has('type') || changedProperties.has('color')) &&\n      this.color\n    ) {\n      this.#updateGradients();\n    }\n  }\n\n  #updateGradients() {\n    const parsed = parseColor(this.color);\n    if (!parsed) return;\n    const { h, s, l } = parsed;\n    const { r, g, b } = hslaToRgb(h, s, l);\n    const direction = this.vertical ? 'top' : 'right';\n\n    const gradients: Record<string, string | null> = {\n      saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,\n      lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`,\n    };\n\n    const hueColor =\n      this.type === 'opacity'\n        ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)`\n        : null;\n\n    this.style.setProperty(\n      '--uui-slider-background-image',\n      gradients[this.type] ?? null,\n    );\n    this.style.setProperty('--uui-slider-hue-color', hueColor);\n  }\n\n  firstUpdated() {\n    this.container =\n      this.shadowRoot!.querySelector<HTMLElement>('#color-slider')!;\n    this.handle = this.container.querySelector<HTMLElement>(\n      '#color-slider__handle',\n    )!;\n  }\n\n  handleDrag(event: PointerEvent) {\n    if (this.disabled || this.readonly || !this.container || !this.handle)\n      return;\n\n    const { width, height } = this.container.getBoundingClientRect();\n\n    this.handle.focus();\n    event.preventDefault();\n    drag(this.container, {\n      onMove: (x, y) => {\n        if (this.vertical) {\n          this.value = reverseNumberInRange(\n            clamp((y / height) * this.max, this.min, this.max),\n            this.min,\n            this.max,\n          );\n        } else {\n          this.value = clamp((x / width) * this.max, this.min, this.max);\n        }\n\n        this.syncValues();\n      },\n      initialEvent: event,\n    });\n  }\n\n  handleClick(event: MouseEvent) {\n    if (this.disabled || this.readonly) return;\n\n    this.value = this.getValueFromMousePosition(event);\n    this.syncValues();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const increment = event.shiftKey ? 10 : 1;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.value = clamp(this.value - increment, this.min, this.max);\n      this.syncValues();\n    } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.value = clamp(this.value + increment, this.min, this.max);\n      this.syncValues();\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      this.value = this.min;\n      this.syncValues();\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      this.value = this.max;\n      this.syncValues();\n    }\n  }\n\n  getValueFromMousePosition(event: MouseEvent) {\n    if (this.vertical) {\n      return this.getValueFromYCoordinate(event.clientY);\n    }\n    return this.getValueFromXCoordinate(event.clientX);\n  }\n\n  getValueFromTouchPosition(event: TouchEvent) {\n    if (this.vertical) {\n      return this.getValueFromYCoordinate(event.touches[0].clientY);\n    }\n    return this.getValueFromXCoordinate(event.touches[0].clientX);\n  }\n\n  getValueFromXCoordinate(coordinate: number) {\n    const { left, width } = this.container.getBoundingClientRect();\n    return clamp(\n      this.roundToPrecision(((coordinate - left) / width) * this.max),\n      this.min,\n      this.max,\n    );\n  }\n\n  getValueFromYCoordinate(coordinate: number) {\n    const { top, height } = this.container.getBoundingClientRect();\n    return clamp(\n      this.roundToPrecision(((coordinate - top) / height) * this.max),\n      this.min,\n      this.max,\n    );\n  }\n\n  roundToPrecision(numberToRound: number) {\n    const multiplier = 1 / this.precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  syncValues() {\n    this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));\n  }\n\n  get cssPropCurrentValue() {\n    if (this.value === 0) {\n      return this.vertical ? 100 : 0;\n    }\n    const ratio = this.vertical\n      ? this.max / reverseNumberInRange(this.value, this.min, this.max)\n      : this.max / this.value;\n    return 100 / ratio;\n  }\n\n  render() {\n    return html`<div\n        part=\"slider\"\n        id=\"color-slider\"\n        role=\"slider\"\n        aria-label=${ifDefined(\n          this.getAttribute('aria-label') || this.label || undefined,\n        )}\n        aria-labelledby=${ifDefined(\n          this.getAttribute('aria-labelledby') || undefined,\n        )}\n        aria-orientation=\"${this.vertical ? 'vertical' : 'horizontal'}\"\n        aria-valuemin=\"${Math.round(this.min)}\"\n        aria-valuemax=\"${Math.round(this.max)}\"\n        aria-valuenow=\"${Math.round(this.value)}\"\n        @click=${this.handleClick}\n        @mousedown=${this.handleDrag}\n        @touchstart=${this.handleDrag}\n        @keydown=${this.handleKeyDown}>\n        ${this.type === 'opacity'\n          ? html`<div\n              id=\"current-hue\"\n              style=${styleMap({\n                backgroundImage: `var(--uui-slider-hue-color)`,\n              })}></div>`\n          : ''}\n        <!-- <slot name=\"detail\"> </slot> -->\n        <span\n          id=\"color-slider__handle\"\n          style=${styleMap({\n            '--current-value': `${this.cssPropCurrentValue}%`,\n            backgroundColor:\n              this.type === 'hue'\n                ? hslaToHex(Math.round(this.value), 100, 50)\n                : undefined,\n          })}\n          tabindex=${ifDefined(this.disabled ? undefined : '0')}>\n        </span>\n      </div>\n      ${this.hideValueLabel ? null : Math.round(this.value)}`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        --uui-slider-height: 15px;\n        --uui-slider-handle-size: 17px;\n        --uui-slider-background-image: #fff;\n        --uui-slider-background-size: 100%;\n        --uui-slider-background-position: top left;\n        display: block;\n      }\n\n      :host([type='hue']) {\n        --uui-slider-background-image: linear-gradient(\n          to right,\n          rgb(255, 0, 0) 0%,\n          rgb(255, 255, 0) 17%,\n          rgb(0, 255, 0) 33%,\n          rgb(0, 255, 255) 50%,\n          rgb(0, 0, 255) 67%,\n          rgb(255, 0, 255) 83%,\n          rgb(255, 0, 0) 100%\n        );\n      }\n\n      :host([vertical][type='hue']) {\n        --uui-slider-background-image: linear-gradient(\n          to top,\n          rgb(255, 0, 0) 0%,\n          rgb(255, 255, 0) 17%,\n          rgb(0, 255, 0) 33%,\n          rgb(0, 255, 255) 50%,\n          rgb(0, 0, 255) 67%,\n          rgb(255, 0, 255) 83%,\n          rgb(255, 0, 0) 100%\n        );\n      }\n\n      :host([type='opacity']) {\n        --uui-slider-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\n        --uui-slider-background-size: 10px 10px;\n        --uui-slider-background-position: 0 0, 0 0, -5px -5px, 5px 5px;\n      }\n\n      #color-slider {\n        position: relative;\n        background-image: var(--uui-slider-background-image);\n        background-size: var(--uui-slider-background-size);\n        background-position: var(--uui-slider-background-position);\n        border-radius: var(--uui-border-radius);\n        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);\n        width: 100%;\n        height: var(--uui-slider-height);\n      }\n\n      :host([vertical]) #color-slider {\n        width: var(--uui-slider-height);\n        height: 300px;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n\n      :host([disabled]) #color-slider {\n        user-select: none;\n        pointer-events: none;\n        opacity: 0.55;\n      }\n\n      :host([readonly]) {\n        cursor: default;\n      }\n\n      :host([readonly]) #color-slider {\n        pointer-events: none;\n      }\n\n      #color-slider__handle {\n        position: absolute;\n        top: calc(50% - var(--uui-slider-handle-size) / 2);\n        width: var(--uui-slider-handle-size);\n        height: var(--uui-slider-handle-size);\n        background-color: white;\n        border-radius: 50%;\n        border: solid 2px white;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n        box-sizing: border-box;\n        margin-left: calc(var(--uui-slider-handle-size) / -2);\n        left: var(--current-value, 0%);\n      }\n\n      :host([vertical]) #color-slider__handle {\n        left: unset;\n        top: var(--current-value, 100%);\n        margin-left: -1px;\n        margin-top: calc(var(--uui-slider-handle-size) / -2);\n      }\n\n      ::slotted(*:first-child) {\n        border-radius: 3px;\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        width: 100%;\n        height: 100%;\n      }\n\n      #current-hue {\n        border-radius: var(--uui-border-radius);\n        position: absolute;\n        inset: 0 0 0 0;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-slider.element.js","names":["#updateGradients"],"sources":["../../../src/components/color-slider/color-slider.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {\n  drag,\n  clamp,\n  reverseNumberInRange,\n  parseColor,\n  hslaToRgb,\n  hslaToHex,\n} from '../../internal/utils/index.js';\n\nimport { UUIColorSliderEvent } from './UUIColorSliderEvent.js';\nimport { LabelMixin } from '../../internal/mixins/index.js';\n\nexport type UUIColorSliderOrientation = 'horizontal' | 'vertical';\nexport type UUIColorSliderType = 'hue' | 'opacity' | 'saturation' | 'lightness';\n\n/**\n *  @element uui-color-slider\n *  @description A slider that is a part of uui-color-picker\n * @fires {UUIColorSliderEvent} change - Fires when the value of the slider changes.\n * @cssprop --uui-slider-height - The height of the slider.\n * @cssprop --uui-slider-handle-size - The size of the slider handle.\n * @cssprop --uui-slider-background-image - The background image of the slider.\n * @cssprop --uui-slider-background-size - The background size of the slider.\n * @cssprop --uui-slider-background-position - The background position of the slider.\n */\nexport class UUIColorSliderElement extends LabelMixin('label', LitElement) {\n  /**\n   * The type of the slider.\n   * @type {UUIColorSliderType}\n   * @attr\n   * @default 'hue'\n   */\n  @property({ reflect: true }) type: UUIColorSliderType = 'hue';\n\n  /**\n   * The color value.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property() color: string = '';\n\n  /**\n   * This is a minimum value of the slider.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number }) min = 0;\n\n  /**\n   * This is a maximum value of the slider.\n   * @type {number}\n   * @attr\n   * @default 100\n   */\n  @property({ type: Number }) max = 100;\n\n  /**\n   * The minimum increment value allowed by the slider.\n   * @type {number}\n   * @attr\n   **/\n  @property({ type: Number }) precision = 1;\n\n  /**\n   * Draws the slider in a vertical orientation.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * The current value of the slider.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number }) value = 0;\n\n  /**\n   * Sets the color slider to readonly mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Sets the color slider to disabled.\n   * @type {boolean}\n   * @attr\n   * @default false\n   **/\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Hides the value label under the slider.\n   * @type {boolean}\n   * @attr 'hide-value-label'\n   * @default false\n   */\n  @property({ type: Boolean, attribute: 'hide-value-label', reflect: true })\n  hideValueLabel = false;\n\n  private container!: HTMLElement;\n  private handle!: HTMLElement;\n\n  willUpdate(changedProperties: Map<string, any>) {\n    if (changedProperties.has('type')) {\n      const typeMaxValues: Record<string, number> = {\n        hue: 360,\n        saturation: 100,\n        lightness: 100,\n        opacity: 100,\n      };\n      this.max = typeMaxValues[this.type] ?? this.max;\n    }\n\n    if (\n      (changedProperties.has('type') || changedProperties.has('color')) &&\n      this.color\n    ) {\n      this.#updateGradients();\n    }\n  }\n\n  #updateGradients() {\n    const parsed = parseColor(this.color);\n    if (!parsed) return;\n    const { h, s, l } = parsed;\n    const { r, g, b } = hslaToRgb(h, s, l);\n    const direction = this.vertical ? 'top' : 'right';\n\n    const gradients: Record<string, string | null> = {\n      saturation: `linear-gradient(to ${direction}, hsl(${h} 0% ${l}%), hsl(${h} 100% ${l}%))`,\n      lightness: `linear-gradient(to ${direction}, hsl(${h} ${s}% 0%), hsl(${h} ${s}% 100%))`,\n    };\n\n    const hueColor =\n      this.type === 'opacity'\n        ? `linear-gradient(to ${direction}, transparent 0%, rgb(${r} ${g} ${b}) 100%)`\n        : null;\n\n    this.style.setProperty(\n      '--uui-slider-background-image',\n      gradients[this.type] ?? null,\n    );\n    this.style.setProperty('--uui-slider-hue-color', hueColor);\n  }\n\n  firstUpdated() {\n    this.container =\n      this.shadowRoot!.querySelector<HTMLElement>('#color-slider')!;\n    this.handle = this.container.querySelector<HTMLElement>(\n      '#color-slider__handle',\n    )!;\n  }\n\n  handleDrag(event: PointerEvent) {\n    if (this.disabled || this.readonly || !this.container || !this.handle)\n      return;\n\n    const { width, height } = this.container.getBoundingClientRect();\n\n    this.handle.focus();\n    event.preventDefault();\n    drag(this.container, {\n      onMove: (x, y) => {\n        if (this.vertical) {\n          this.value = reverseNumberInRange(\n            clamp((y / height) * this.max, this.min, this.max),\n            this.min,\n            this.max,\n          );\n        } else {\n          this.value = clamp((x / width) * this.max, this.min, this.max);\n        }\n\n        this.syncValues();\n      },\n      initialEvent: event,\n    });\n  }\n\n  handleClick(event: MouseEvent) {\n    if (this.disabled || this.readonly) return;\n\n    this.value = this.getValueFromMousePosition(event);\n    this.syncValues();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const increment = event.shiftKey ? 10 : 1;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.value = clamp(this.value - increment, this.min, this.max);\n      this.syncValues();\n    } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.value = clamp(this.value + increment, this.min, this.max);\n      this.syncValues();\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      this.value = this.min;\n      this.syncValues();\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      this.value = this.max;\n      this.syncValues();\n    }\n  }\n\n  getValueFromMousePosition(event: MouseEvent) {\n    if (this.vertical) {\n      return this.getValueFromYCoordinate(event.clientY);\n    }\n    return this.getValueFromXCoordinate(event.clientX);\n  }\n\n  getValueFromTouchPosition(event: TouchEvent) {\n    if (this.vertical) {\n      return this.getValueFromYCoordinate(event.touches[0].clientY);\n    }\n    return this.getValueFromXCoordinate(event.touches[0].clientX);\n  }\n\n  getValueFromXCoordinate(coordinate: number) {\n    const { left, width } = this.container.getBoundingClientRect();\n    return clamp(\n      this.roundToPrecision(((coordinate - left) / width) * this.max),\n      this.min,\n      this.max,\n    );\n  }\n\n  getValueFromYCoordinate(coordinate: number) {\n    const { top, height } = this.container.getBoundingClientRect();\n    return clamp(\n      this.roundToPrecision(((coordinate - top) / height) * this.max),\n      this.min,\n      this.max,\n    );\n  }\n\n  roundToPrecision(numberToRound: number) {\n    const multiplier = 1 / this.precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  syncValues() {\n    this.dispatchEvent(new UUIColorSliderEvent(UUIColorSliderEvent.CHANGE));\n  }\n\n  get cssPropCurrentValue() {\n    if (this.value === 0) {\n      return this.vertical ? 100 : 0;\n    }\n    const ratio = this.vertical\n      ? this.max / reverseNumberInRange(this.value, this.min, this.max)\n      : this.max / this.value;\n    return 100 / ratio;\n  }\n\n  render() {\n    return html`<div\n        part=\"slider\"\n        id=\"color-slider\"\n        role=\"slider\"\n        aria-label=${ifDefined(\n          this.getAttribute('aria-label') || this.label || undefined,\n        )}\n        aria-labelledby=${ifDefined(\n          this.getAttribute('aria-labelledby') || undefined,\n        )}\n        aria-orientation=\"${this.vertical ? 'vertical' : 'horizontal'}\"\n        aria-valuemin=\"${Math.round(this.min)}\"\n        aria-valuemax=\"${Math.round(this.max)}\"\n        aria-valuenow=\"${Math.round(this.value)}\"\n        @click=${this.handleClick}\n        @mousedown=${this.handleDrag}\n        @touchstart=${this.handleDrag}\n        @keydown=${this.handleKeyDown}>\n        ${this.type === 'opacity'\n          ? html`<div\n              id=\"current-hue\"\n              style=${styleMap({\n                backgroundImage: `var(--uui-slider-hue-color)`,\n              })}></div>`\n          : ''}\n        <!-- <slot name=\"detail\"> </slot> -->\n        <span\n          id=\"color-slider__handle\"\n          style=${styleMap({\n            '--current-value': `${this.cssPropCurrentValue}%`,\n            backgroundColor:\n              this.type === 'hue'\n                ? hslaToHex(Math.round(this.value), 100, 50)\n                : undefined,\n          })}\n          tabindex=${ifDefined(this.disabled ? undefined : '0')}>\n        </span>\n      </div>\n      ${this.hideValueLabel ? null : Math.round(this.value)}`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        --uui-slider-height: 15px;\n        --uui-slider-handle-size: 17px;\n        --uui-slider-background-image: #fff;\n        --uui-slider-background-size: 100%;\n        --uui-slider-background-position: top left;\n        display: block;\n      }\n\n      :host([type='hue']) {\n        --uui-slider-background-image: linear-gradient(\n          to right,\n          rgb(255, 0, 0) 0%,\n          rgb(255, 255, 0) 17%,\n          rgb(0, 255, 0) 33%,\n          rgb(0, 255, 255) 50%,\n          rgb(0, 0, 255) 67%,\n          rgb(255, 0, 255) 83%,\n          rgb(255, 0, 0) 100%\n        );\n      }\n\n      :host([vertical][type='hue']) {\n        --uui-slider-background-image: linear-gradient(\n          to top,\n          rgb(255, 0, 0) 0%,\n          rgb(255, 255, 0) 17%,\n          rgb(0, 255, 0) 33%,\n          rgb(0, 255, 255) 50%,\n          rgb(0, 0, 255) 67%,\n          rgb(255, 0, 255) 83%,\n          rgb(255, 0, 0) 100%\n        );\n      }\n\n      :host([type='opacity']) {\n        --uui-slider-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\n        --uui-slider-background-size: 10px 10px;\n        --uui-slider-background-position: 0 0, 0 0, -5px -5px, 5px 5px;\n      }\n\n      #color-slider {\n        position: relative;\n        background-image: var(--uui-slider-background-image);\n        background-size: var(--uui-slider-background-size);\n        background-position: var(--uui-slider-background-position);\n        border-radius: var(--uui-border-radius);\n        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);\n        width: 100%;\n        height: var(--uui-slider-height);\n      }\n\n      :host([vertical]) #color-slider {\n        width: var(--uui-slider-height);\n        height: 300px;\n      }\n\n      :host([disabled]) {\n        cursor: not-allowed;\n      }\n\n      :host([disabled]) #color-slider {\n        user-select: none;\n        pointer-events: none;\n        opacity: 0.55;\n      }\n\n      :host([readonly]) {\n        cursor: default;\n      }\n\n      :host([readonly]) #color-slider {\n        pointer-events: none;\n      }\n\n      #color-slider__handle {\n        position: absolute;\n        top: calc(50% - var(--uui-slider-handle-size) / 2);\n        width: var(--uui-slider-handle-size);\n        height: var(--uui-slider-handle-size);\n        background-color: white;\n        border-radius: 50%;\n        border: solid 2px white;\n        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n        box-sizing: border-box;\n        margin-left: calc(var(--uui-slider-handle-size) / -2);\n        left: var(--current-value, 0%);\n      }\n\n      :host([vertical]) #color-slider__handle {\n        left: unset;\n        top: var(--current-value, 100%);\n        margin-left: -1px;\n        margin-top: calc(var(--uui-slider-handle-size) / -2);\n      }\n\n      ::slotted(*:first-child) {\n        border-radius: 3px;\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        width: 100%;\n        height: 100%;\n      }\n\n      #current-hue {\n        border-radius: var(--uui-border-radius);\n        position: absolute;\n        inset: 0 0 0 0;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

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

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

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

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

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

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './color-swatch.element.js';
-export { UUIColorSwatchElement as default } from './color-swatch.element.js';

package/dist/components/color-swatch/color-swatch.element.d.ts

@@ -6,7 +6,7 @@ declare const UUIColorSwatchElement_base: (new (...args: any[]) => import("../..
  * @element uui-color-swatch
  * @cssprop --uui-swatch-size - The size of the swatch.
  * @cssprop --uui-swatch-border-width - The width of the border.
- * @cssprop --uui-swatch-color - The width of the border.
+ * @cssprop --uui-swatch-color - The color of the swatch.
  * @slot label - Default slot for the label.
  */
 export declare class UUIColorSwatchElement extends UUIColorSwatchElement_base {