@mcp-b/web-components 0.2.0

package/dist/color-picker-adwOmtRl.js

@@ -0,0 +1,1240 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./button-5k_aL_gD.js";
+import "./components/copy/copy.js";
+import "./slider-B90Il7x3.js";
+import "./text-field-inpJfp0A.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+import { TinyColor } from "@ctrl/tinycolor";
+import { DraggableElement } from "@mcp-b/wc-support/utilities/drag";
+import { clamp } from "@mcp-b/wc-support/utilities/math";
+//#region src/components/color-picker/color-picker.styles.ts
+var color_picker_styles_default = css`
+  :host {
+    display: flex;
+    max-width: 100%;
+  }
+
+  :host([size="xs"]) {
+    width: 10rem;
+  }
+
+  :host([size="sm"]) {
+    width: 14rem;
+  }
+
+  :host([size="md"]) {
+    width: 18rem;
+  }
+
+  :host([size="lg"]) {
+    width: 22rem;
+  }
+
+  :host([size="xl"]) {
+    width: 26rem;
+  }
+
+  #picker {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 1em;
+    gap: 1em;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-hairline);
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  /* Color slider */
+  #color-slider {
+    position: relative;
+    aspect-ratio: 1.4;
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--color-slider-background);
+    box-shadow: inset 0 0 0 0.0625rem color-mix(in oklab, black, transparent 90%);
+    cursor: crosshair;
+    touch-action: none;
+
+    &:dir(ltr) {
+      background-image:
+        linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%),
+        linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+    }
+
+    &:dir(rtl) {
+      background-image:
+        linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%),
+        linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
+    }
+
+    &:active {
+      cursor: none;
+    }
+  }
+
+  :host(:state(disabled)) #color-slider {
+    cursor: not-allowed;
+  }
+
+  #color-slider-thumb {
+    position: absolute;
+    width: 1.25em;
+    height: 1.25em;
+    translate: calc(1.25em / -2) calc(1.25em / -2);
+    border: solid 0.0625rem rgb(0 0 0 / 33%);
+    border-radius: var(--sigvelo-radius-circle);
+    transition: var(--sigvelo-motion-duration-interaction) scale ease;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: solid max(0.125em, 1px) white;
+      border-radius: inherit;
+      box-shadow: inset 0 0 0 0.0625rem rgb(0 0 0 / 33%);
+      content: "";
+      transition: var(--sigvelo-motion-duration-interaction) scale ease;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: calc(var(--sigvelo-focus-offset) * 2);
+    }
+  }
+
+  :host(:not(:state(disabled))) #color-slider:active #color-slider-thumb {
+    scale: 1.4;
+
+    &::after {
+      border-width: 0.09375em;
+    }
+  }
+
+  #controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  #sliders {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    margin-inline-start: 0.5em;
+    gap: 1em;
+
+    &::part(slider) {
+      border-radius: 0;
+    }
+  }
+
+  #hue,
+  #alpha {
+    --track-size: 1em;
+    --thumb-width: 1.25em;
+    --thumb-height: 1.25em;
+    font-size: inherit;
+
+    /* Visually hidden */
+    &::part(label),
+    &::part(description) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      white-space: nowrap;
+      clip-path: inset(50%);
+    }
+
+    &::part(slider) {
+      margin-block: 0;
+    }
+
+    &::part(track) {
+      border-radius: var(--sigvelo-radius-sm);
+      box-shadow: inset 0 0 0 1px color-mix(in oklab, light-dark(black, white), transparent 90%);
+      font-size: inherit;
+    }
+
+    &::part(thumb) {
+      border: solid 0.0625rem rgb(0 0 0 / 33%);
+      border-radius: var(--sigvelo-radius-full);
+    }
+
+    &::part(thumb)::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: solid max(0.125em, 1px) white;
+      border-radius: var(--sigvelo-radius-full);
+      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 33%);
+      content: "";
+    }
+  }
+
+  #hue {
+    &:dir(ltr)::part(track) {
+      background-image: linear-gradient(
+        to right,
+        rgb(255, 0, 0) 0%,
+        rgb(255, 255, 0) 17%,
+        rgb(0, 255, 0) 33%,
+        rgb(0, 255, 255) 50%,
+        rgb(0, 0, 255) 67%,
+        rgb(255, 0, 255) 83%,
+        rgb(255, 0, 0) 100%
+      );
+    }
+
+    &:dir(rtl)::part(track) {
+      background-image: linear-gradient(
+        to left,
+        rgb(255, 0, 0) 0%,
+        rgb(255, 255, 0) 17%,
+        rgb(0, 255, 0) 33%,
+        rgb(0, 255, 255) 50%,
+        rgb(0, 0, 255) 67%,
+        rgb(255, 0, 255) 83%,
+        rgb(255, 0, 0) 100%
+      );
+    }
+
+    &::part(indicator) {
+      display: none;
+    }
+
+    &::part(thumb) {
+      background-color: var(--hue-thumb-color);
+    }
+  }
+
+  #alpha {
+    &::part(track) {
+      background-image:
+        linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+        linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+        linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%);
+      background-position:
+        0 0,
+        0 0,
+        -0.25em -0.25em,
+        0.25em 0.25em;
+      background-size: 0.5em 0.5em;
+      background-color: transparent;
+    }
+
+    &::part(indicator) {
+      width: 100% !important;
+      background-color: transparent;
+    }
+
+    &:dir(ltr)::part(indicator) {
+      background-image: linear-gradient(
+        to right,
+        transparent 0%,
+        var(--current-color-without-alpha) 100%
+      );
+    }
+
+    &:dir(rtl)::part(indicator) {
+      background-image: linear-gradient(
+        to left,
+        transparent 0%,
+        var(--current-color-without-alpha) 100%
+      );
+    }
+
+    &::part(thumb) {
+      background-color: var(--alpha-thumb-color);
+    }
+  }
+
+  /* Eye dropper button */
+  #eye-dropper::part(button) {
+    min-height: 2.75em;
+    border-radius: var(--sigvelo-radius-circle);
+    font-size: inherit;
+  }
+
+  /* Preview/copy button */
+  #copy-button {
+    display: flex;
+  }
+
+  #preview-button {
+    &::part(button) {
+      position: relative;
+      width: 2.75em;
+      height: 2.75em;
+      min-height: 0;
+      border: none;
+      border-radius: var(--sigvelo-radius-circle);
+      background-image:
+        linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+        linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+        linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%);
+      background-position:
+        0 0,
+        0 0,
+        -0.25em -0.25em,
+        0.25em 0.25em;
+      background-size: 0.5em 0.5em;
+      background-color: transparent;
+      font-size: inherit;
+    }
+
+    &::part(button)::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: inherit;
+      background-color: var(--current-color);
+      box-shadow: inset 0 0 0 1px color-mix(in oklab, light-dark(black, white), transparent 90%);
+      content: "";
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+  }
+
+  /* Color input */
+  #color-input::part(label) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  /* Swatches */
+  #swatches {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 0.25em;
+
+    button {
+      display: inline-block;
+      position: relative;
+      aspect-ratio: 1;
+      margin: 0;
+      padding: 0;
+      border: none;
+      border-radius: var(--sigvelo-radius-sm);
+      background: none;
+      background-image:
+        linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+        linear-gradient(45deg, transparent 75%, var(--sigvelo-color-neutral-bg-muted) 75%),
+        linear-gradient(45deg, var(--sigvelo-color-neutral-bg-muted) 25%, transparent 25%);
+      background-position:
+        0 0,
+        0 0,
+        -0.25em -0.25em,
+        0.25em 0.25em;
+      background-size: 0.5em 0.5em;
+      background-color: transparent;
+      cursor: pointer;
+      transition: var(--sigvelo-motion-duration-interaction) translate ease;
+
+      &:active:not(.disabled) {
+        translate: 0 var(--sigvelo-motion-distance-xs);
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: var(--sigvelo-focus-ring);
+        outline-offset: var(--sigvelo-focus-offset);
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        background-color: var(--swatch-color);
+        box-shadow: inset 0 0 0 1px color-mix(in oklab, light-dark(black, white), transparent 90%);
+        content: "";
+      }
+    }
+  }
+
+  :host(:state(disabled)) #swatches button {
+    cursor: not-allowed;
+  }
+`;
+//#endregion
+//#region src/components/color-picker/color-picker.ts
+const hasEyeDropper = "EyeDropper" in window;
+/**
+* <sigvelo-color-picker>
+*
+* @summary Provides a customizable interface for selecting a color.
+* @tag sigvelo-color-picker
+* @documentation https://design-system.sigvelo.com/docs/components/color-picker
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-button
+* @dependency sigvelo-copy
+* @dependency sigvelo-slider
+* @dependency sigvelo-text-field
+*
+* @event sigvelo-change - Emitted when the user commits changes to the color picker's value.
+* @event sigvelo-input - Emitted when the color picker receives input. This can fire very frequently during dragging, so
+*  avoid doing expensive operations in the handler. If you don't live feedback, use the `sigvelo-change` event instead.
+*
+* @csspart picker - The element the wraps the color picker.
+* @csspart color-slider - The 2d color slider.
+* @csspart color-slider-thumb - The color slider's thumb.
+* @csspart controls - The container that wraps the sliders and preview.
+* @csspart sliders - The container that wraps the hue and alpha slider.
+* @csspart hue-slider - The slider that controls the color's hue.
+* @csspart hue-slider__label - The hue slider's `label` part.
+* @csspart hue-slider__description - The hue slider's `description` part.
+* @csspart hue-slider__slider - The hue slider's `slider` part.
+* @csspart hue-slider__track - The hue slider's `track` part.
+* @csspart hue-slider__indicator - The hue slider's `indicator` part.
+* @csspart hue-slider__thumb - The hue slider's `thumb` part.
+* @csspart alpha-slider - The slider that controls the color's opacity.
+* @csspart alpha-slider__label - The alpha slider's `label` part.
+* @csspart alpha-slider__description - The alpha slider's `description` part.
+* @csspart alpha-slider__slider - The alpha slider's `slider` part.
+* @csspart alpha-slider__track - The alpha slider's `track` part.
+* @csspart alpha-slider__indicator - The alpha slider's `indicator` part.
+* @csspart alpha-slider__thumb - The alpha slider's `thumb` part.
+* @csspart eye-dropper-button - The eye dropper button, a `<sigvelo-button>` element.
+* @csspart preview-button - The button that shows a preview of the current color, a `<sigvelo-button>` element.
+* @csspart color-input - The color input text field, a `<sigvelo-text-field>` element.
+* @csspart color-input__visual-box - The element that wraps the internal text box.
+* @csspart color-input__text-box - The internal text box, an `<input>` element.
+* @csspart swatches - The element that contains swatches.
+* @csspart swatch - Each individual swatch.
+*
+* @cssstate disabled - Applied when the color picker is disabled.
+* @cssstate focused - Applied when the color picker has focus.
+*
+* @example Default
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   value="#7578c5"
+*   with-input
+*   with-alpha
+*   with-eye-dropper
+*   swatches="
+*     #09090b; #71717a; #ef4444; #f97316;
+*     #f59e0b; #eab308; #84cc16; #22c55e;
+*     #10b981; #14b8a6; #06b6d4; #3b82f6;
+*     #6366f1; #a855f7; #d946ef; #ec4899
+*   "
+* ></sigvelo-color-picker>
+* ```
+*
+* **Note:** This component is a primitive for enabling color selection. It is not a form control, so it will not submit a value to a form. See [color input](/docs/components/color-input) for a color picker suitable for using with forms.
+*
+* @example Labels
+* Use the `label` attribute to provide an accessible label for the color picker. This won't be visible, but it will be read to assistive devices.
+*
+* ```html
+* <sigvelo-color-picker label="Select a color"></sigvelo-color-picker>
+* ```
+*
+* @example Setting an initial value
+* Use the `value` attribute to provide an initial value for the color picker. You can specify values in a variety of formats as well as CSS colors names. Parsing of color values is very permissive. See the TinyColor docs for more details on acceptable color formats.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   value="#71e0f3"
+* >
+* </sigvelo-color-picker>
+* ```
+*
+* @example Enabling alpha
+* Add the `with-alpha` attribute to allow the user to adjust opacity.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   value="#ce238088"
+*   with-alpha
+* ></sigvelo-color-picker>
+* ```
+*
+* @example Enabling the eye dropper
+* Add the `with-eye-dropper` attribute to show the eye dropper button, which allows the user to select a color from anywhere on the screen.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   with-eye-dropper
+* ></sigvelo-color-picker>
+* ```
+*
+* **Warning:** The [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) is only available in [supportive browsers](https://caniuse.com/?search=eyedropper%20API).
+*
+* @example Enabling the color input
+* Add the `with-input` attribute to show the color input, a text field the user can type into.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   value="#4716ce"
+*   with-input
+* ></sigvelo-color-picker>
+* ```
+*
+* @example Showing swatches
+* Set the `swatches` attribute to one or more semicolon-delimited colors to show as preset swatches below the color picker. You can use any valid CSS color format including hex colors, RGB, HSL, named colors, and more. This is useful for providing users with access to recent colors or a predefined color palette.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   swatches="
+*     #09090b; #71717a; #ef4444; #f97316;
+*     #f59e0b; #eab308; #84cc16; #22c55e;
+*     #10b981; #14b8a6; #06b6d4; #3b82f6;
+*     #6366f1; #a855f7; #d946ef; #ec4899
+*   "
+* ></sigvelo-color-picker>
+* ```
+*
+* You can also use any CSS color format in the swatches:
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   swatches="
+*     rgb(255 0 0);
+*     hsl(120, 100%, 50%);
+*     rgb(0 0 255 / 0.5);
+*     lightblue;
+*     #ff00ff
+*   "
+* ></sigvelo-color-picker>
+* ```
+*
+* @example Setting the format
+* Use the `format` attribute to set the format of the value. Valid options include `hex` (default), `rgb,` and `hsl`.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   value="#ffcc00"
+*   format="rgb"
+*   with-input
+*   id="color-picker__format"
+* ></sigvelo-color-picker>
+*
+* <script>
+*   const colorPicker = document.getElementById('color-picker__format');
+*
+*   // This will output an RGB string when the color changes
+*   colorPicker.addEventListener('sigvelo-change', () => {
+*     console.log(colorPicker.value);
+*   });
+* <\/script>
+* ```
+*
+* **Note:** You can set the color picker's value using any format and it will automatically be converted to the format specified by the `format` attribute.
+*
+* @example Getting the value programmatically
+* If you need to access the value in a specific format, use the `getValueAs()` method. You can pass `rgb` (default), `hsl`, `hex`, or `hex8` to get a corresponding value.
+*
+* For `rgb`, an object with `{ r, g, b, a }` properties will be returned where `r`, `g`, and `b` range from 0-255 and `a` (alpha) ranges from 0–1. For `hsl`, an object with `{ h, s, l, a }` properties will be returned where `h` ranges from 0–360 and `s`, `l`, and `a` range from 0–1. For `hex` and `hex8`, a string in the format of `#RRGGBB` and `#RRGGBBAA` will be returned, respectively.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   value="tomato"
+*   format="rgb"
+*   id="color-picker__object"
+* ></sigvelo-color-picker>
+*
+* <script>
+*   const colorPicker = document.getElementById('color-picker__object');
+*
+*   // Outputs two objects when the color changes
+*   colorPicker.addEventListener('sigvelo-change', () => {
+*     console.log(
+*       colorPicker.getValueAs('rgb'),
+*       colorPicker.getValueAs('hex'),
+*       colorPicker.getValueAs('hex8'),
+*       colorPicker.getValueAs('hsl')
+*     );
+*   });
+* <\/script>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change the color pickers's size.
+*
+* ```html
+* <sigvelo-select label="Select a size" style="max-width: 18rem; margin-block-end: 2rem;">
+*   <option value="xs">Extra small</option>
+*   <option value="sm">Small</option>
+*   <option value="md">Medium</option>
+*   <option value="lg">Large</option>
+*   <option value="xl">Extra large</option>
+* </sigvelo-select>
+*
+* <sigvelo-color-picker
+*   size="xs"
+*   label="Color picker sizes"
+*   swatches="
+*     #09090b; #71717a; #ef4444; #f97316;
+*     #f59e0b; #eab308; #84cc16; #22c55e;
+*     #10b981; #14b8a6; #06b6d4; #3b82f6;
+*     #6366f1; #a855f7; #d946ef; #ec4899
+*   "
+*   with-input
+*   with-alpha
+*   with-eye-dropper
+*   id="color-picker__size"
+* ></sigvelo-color-picker>
+*
+* <script>
+*   const colorPicker = document.getElementById('color-picker__size');
+*   const select = colorPicker.previousElementSibling;
+*
+*   select.addEventListener('sigvelo-change', () => {
+*     colorPicker.size = select.value;
+*   });
+* <\/script>
+* ```
+*
+* @example Disabling
+* To disable a color picker, add the `disabled` attribute.
+*
+* ```html
+* <sigvelo-color-picker
+*   label="Select a color"
+*   disabled
+*   value="#6366f1"
+*   with-alpha
+*   with-input
+*   with-eye-dropper
+*   swatches="
+*     #09090b; #71717a; #ef4444; #f97316;
+*     #f59e0b; #eab308; #84cc16; #22c55e;
+*     #10b981; #14b8a6; #06b6d4; #3b82f6;
+*     #6366f1; #a855f7; #d946ef; #ec4899
+*   "
+* ></sigvelo-color-picker>
+* ```
+*/
+var SigveloColorPicker = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isDragging = false;
+		this.localize = new Localize(this);
+		this.wasValueSetInternally = false;
+		this.h = 0;
+		this.s = 0;
+		this.v = 1;
+		this.a = 1;
+		this.colorSliderThumbX = 0;
+		this.colorSliderThumbY = 0;
+		this.hasFocus = false;
+		this.isChangingV = false;
+		this.isChangingS = false;
+		this.inputIsFocused = false;
+		this.displayValue = "";
+		this.hadUserInteraction = false;
+		this.value = "";
+		this.format = "hex";
+		this.disabled = false;
+		this.size = "md";
+		this.swatches = "";
+		this.withAlpha = false;
+		this.withEyeDropper = false;
+		this.withInput = false;
+		this.handleFocusIn = (event) => {
+			if (!this.hasFocus && event.target === event.currentTarget) {
+				this.hasFocus = true;
+				this.dispatchEvent(new SigveloFocusEvent());
+			}
+		};
+		this.handleFocusOut = (event) => {
+			if (this.matches(":focus-visible") || event.target !== event.currentTarget) return;
+			this.hasFocus = false;
+			this.dispatchEvent(new SigveloBlurEvent());
+		};
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			color_picker_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.colorSliderThumb;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("focusin", this.handleFocusIn);
+		this.addEventListener("focusout", this.handleFocusOut);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("focusin", this.handleFocusIn);
+		this.removeEventListener("focusout", this.handleFocusOut);
+	}
+	firstUpdated() {
+		this.setColorFromString(this.value);
+		this.draggableThumb = new DraggableElement(this.colorSlider, {
+			start: (x, y) => {
+				this.colorSliderBoundingClientRect = this.colorSlider.getBoundingClientRect();
+				this.isDragging = true;
+				this.valueWhenDraggingStarted = this.value;
+				this.setColorFromCoordinates(x, y);
+			},
+			move: (x, y) => {
+				this.setColorFromCoordinates(x, y);
+			},
+			stop: () => {
+				if (this.value !== this.valueWhenDraggingStarted) {
+					this.hadUserInteraction = true;
+					this.dispatchEvent(new SigveloChangeEvent());
+					this.dispatchEvent(new Event("change", {
+						bubbles: true,
+						composed: true
+					}));
+				}
+				this.isDragging = false;
+				this.valueWhenDraggingStarted = void 0;
+			}
+		});
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("value")) {
+			if (!this.isDragging && !this.wasValueSetInternally) this.setColorFromString(this.value);
+			if (!this.inputIsFocused) this.displayValue = this.value;
+		}
+		if (changedProperties.has("dir")) this.updateColorSliderThumbPosition();
+		if (changedProperties.has("disabled")) {
+			this.customStates.set("disabled", this.disabled);
+			this.draggableThumb.toggle(!this.disabled);
+		}
+		if (changedProperties.has("hasFocus")) this.customStates.set("focused", this.hasFocus);
+		if (changedProperties.has("withAlpha") && !this.withAlpha) this.a = 1;
+		if (changedProperties.has("h") || changedProperties.has("s") || changedProperties.has("v") || changedProperties.has("a") || changedProperties.has("format") || changedProperties.has("value")) {
+			const color = new TinyColor({
+				h: this.h,
+				s: this.s,
+				v: this.v,
+				a: this.a
+			});
+			this.updateColorSliderThumbPosition();
+			this.wasValueSetInternally = true;
+			switch (this.format) {
+				case "rgb":
+					this.value = color.toRgbString();
+					break;
+				case "hsl":
+					this.value = color.toHslString();
+					break;
+				default:
+					this.value = this.withAlpha ? color.toHex8String() : color.toHexString();
+					break;
+			}
+			this.updateComplete.then(() => this.wasValueSetInternally = false);
+		}
+	}
+	formatHue(value) {
+		return this.localize.number(value.toFixed(0), {
+			style: "unit",
+			unit: "degree",
+			unitDisplay: "narrow"
+		});
+	}
+	formatAlpha(value) {
+		return this.localize.number(value, { style: "percent" });
+	}
+	async handleColorInputBlur(event) {
+		const input = event.target;
+		this.inputIsFocused = false;
+		if (new TinyColor(input.value).isValid) {
+			this.setColorFromString(input.value);
+			await this.updateComplete;
+			this.displayValue = this.value;
+		} else this.displayValue = this.value;
+	}
+	async handleColorInputFocus(event) {
+		if (event.type === "sigvelo-focus") {
+			this.inputIsFocused = true;
+			return;
+		}
+	}
+	async handleColorInputInput(event) {
+		event.stopImmediatePropagation();
+		const oldValue = this.value;
+		const input = event.target;
+		this.displayValue = input.value;
+		if (new TinyColor(input.value).isValid) this.setColorFromString(input.value);
+		await this.updateComplete;
+		if (this.value !== oldValue) {
+			this.hadUserInteraction = true;
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	handleColorSliderBlur() {
+		this.isChangingS = false;
+		this.isChangingV = false;
+	}
+	async handleColorSliderThumbKeyDown(event) {
+		const isRtl = this.localize.dir() === "rtl";
+		const oldValue = this.value;
+		if ([
+			"ArrowUp",
+			"ArrowDown",
+			"PageUp",
+			"PageDown"
+		].includes(event.key)) {
+			let increment = 0;
+			if (event.key === "ArrowUp") increment = .01;
+			if (event.key === "ArrowDown") increment = -.01;
+			if (event.key === "PageUp") increment = .1;
+			if (event.key === "PageDown") increment = -.1;
+			event.preventDefault();
+			this.v = clamp(this.v + increment, 0, 1);
+			this.isChangingV = true;
+			this.isChangingS = false;
+		}
+		if ([
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			let increment = 0;
+			if (event.key === "ArrowLeft") increment = -.01;
+			if (event.key === "ArrowRight") increment = .01;
+			if (event.key === "Home") increment = -.1;
+			if (event.key === "End") increment = .1;
+			if (isRtl) increment *= -1;
+			event.preventDefault();
+			this.s = clamp(this.s + increment, 0, 1);
+			this.isChangingS = true;
+			this.isChangingV = false;
+		}
+		await this.updateComplete;
+		if (this.value !== oldValue) {
+			this.hadUserInteraction = true;
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	handleEyeDropperClick() {
+		new EyeDropper().open().then(async (result) => {
+			const oldValue = this.value;
+			this.setColorFromString(result.sRGBHex);
+			await this.updateComplete;
+			if (this.value !== oldValue) {
+				this.dispatchEvent(new SigveloInputEvent());
+				this.dispatchEvent(new InputEvent("input"));
+				this.dispatchEvent(new SigveloChangeEvent());
+				this.dispatchEvent(new Event("change", {
+					bubbles: true,
+					composed: true
+				}));
+			}
+		}).catch(() => {});
+	}
+	async handleHueSliderInput(event) {
+		event.stopImmediatePropagation();
+		const value = event.target.value;
+		if (typeof value !== "number") return;
+		this.h = value;
+		await this.updateComplete;
+		if (event.type === "sigvelo-input") {
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+		} else if (event.type === "sigvelo-change") {
+			this.hadUserInteraction = true;
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	async handleAlphaSliderInput(event) {
+		event.stopImmediatePropagation();
+		const value = event.target.value;
+		if (typeof value !== "number") return;
+		this.a = value;
+		await this.updateComplete;
+		if (event.type === "sigvelo-input") {
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+		} else if (event.type === "sigvelo-change") {
+			this.hadUserInteraction = true;
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	/** Sets the color when a swatch is clicked. */
+	async handleSwatchClick(color) {
+		const oldValue = this.value;
+		if (this.disabled) return;
+		this.setColorFromString(color);
+		this.hadUserInteraction = true;
+		this.colorSliderThumb.focus();
+		await this.updateComplete;
+		if (this.value !== oldValue) {
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	/**
+	* Parses an arbitrary color string and sets the corresponding HSVA values.
+	*/
+	setColorFromString(color) {
+		const hsv = new TinyColor(color).toHsv();
+		this.h = hsv.h;
+		this.s = hsv.s;
+		this.v = hsv.v;
+		this.a = hsv.a;
+	}
+	/** Sets the S and V value based on the pointer's x and y coordinates. */
+	async setColorFromCoordinates(x, y) {
+		const isRtl = this.localize.dir() === "rtl";
+		const oldValue = this.value;
+		const { top, left, height, width } = this.colorSliderBoundingClientRect;
+		const relativeXPercent = isRtl ? clamp(1 - (x - left) / width, 0, 1) : clamp((x - left) / width, 0, 1);
+		const relativeYPercent = clamp((y - top) / height, 0, 1);
+		this.s = relativeXPercent;
+		this.v = 1 - relativeYPercent;
+		await this.updateComplete;
+		if (this.value !== oldValue) {
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+		}
+	}
+	/** Prevent custom events that bubble from propagating outside of the component */
+	stopPropagation(event) {
+		event.stopImmediatePropagation();
+	}
+	/** Updates the color slider's thumb position based on S and V. */
+	updateColorSliderThumbPosition() {
+		const isRtl = this.localize.dir() === "rtl";
+		this.colorSliderThumbX = isRtl ? (1 - this.s) * 100 : this.s * 100;
+		this.colorSliderThumbY = (1 - this.v) * 100;
+	}
+	/** Sets focus to the color picker. */
+	focus() {
+		this.colorSliderThumb.focus();
+	}
+	/** Removes focus from the color picker. */
+	blur() {
+		this.shadowRoot.activeElement?.blur();
+	}
+	/**
+	* Gets the current value as a hex string, a hex8 string, an RGB object, or an HSL object. RBG objects have `r`, `g`,
+	* and `b` properties ranging from 0–255 and an `a` property (representing opacity) that ranges from 0-1. HSL objects
+	* have an `h` property ranging from `0-359` and `s`, `l`, and `a` properties ranging from 0–1.
+	*/
+	getValueAs(format = "rgb") {
+		const color = new TinyColor({
+			h: this.h,
+			s: this.s,
+			v: this.v,
+			a: this.a
+		});
+		switch (format) {
+			case "hex": return color.toHexString();
+			case "hex8": return color.toHex8String();
+			case "hsl": return color.toHsl();
+			default: return color.toRgb();
+		}
+	}
+	render() {
+		const isRtl = this.localize.dir() === "rtl";
+		const currentColor = new TinyColor({
+			h: this.h,
+			s: this.s,
+			v: this.v,
+			a: this.a
+		});
+		const colorWithoutAlpha = new TinyColor({
+			h: this.h,
+			s: this.s,
+			v: this.v,
+			a: 1
+		});
+		const hueColor = new TinyColor({
+			h: this.h,
+			s: 1,
+			v: 1,
+			a: 1
+		});
+		const alphaColor = `color-mix(in oklab, light-dark(white, black), ${currentColor.toHexString()} ${this.a * 100}%);`;
+		const swatches = this.swatches.split(";").map((val) => val.trim()).filter((val) => val !== "");
+		const luminosityText = this.localize.term("percentLuminosity", this.localize.number(this.v, { style: "percent" }));
+		const saturationText = this.localize.term("percentSaturation", this.localize.number(this.s, { style: "percent" }));
+		let valueText = "";
+		if (this.isChangingV) valueText = luminosityText;
+		else if (this.isChangingS) valueText = saturationText;
+		else valueText = `${luminosityText}, ${saturationText}`;
+		return html`
+      <div
+        id="picker"
+        part="picker"
+        class=${classMap({
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			disabled: this.disabled
+		})}
+        style="
+          --current-color: ${currentColor.toHex8String()};
+          --current-color-without-alpha: ${colorWithoutAlpha.toHexString()};
+          --hue-thumb-color: ${hueColor.toHexString()};
+          --alpha-thumb-color: ${alphaColor};
+        "
+      >
+        <div
+          id="color-slider"
+          part="color-slider"
+          style="background-color: ${hueColor.toHexString()};"
+        >
+          <span
+            id="color-slider-thumb"
+            part="color-slider-thumb"
+            style="
+              top: ${this.colorSliderThumbY}%;
+              left: ${this.colorSliderThumbX}%;
+              background-color: ${colorWithoutAlpha.toHexString()};
+            "
+            tabindex="${this.disabled ? "-1" : "0"}"
+            role="slider"
+            aria-roledescription="2d slider"
+            aria-label=${this.label}
+            aria-valuenow="0"
+            aria-valuetext="${valueText}"
+            @blur=${this.handleColorSliderBlur}
+            @keydown=${this.handleColorSliderThumbKeyDown}
+          ></span>
+        </div>
+
+        <div id="controls" part="controls">
+          <sigvelo-copy id="copy-button" data=${this.value} ?disabled=${this.disabled}>
+            <sigvelo-button
+              id="preview-button"
+              part="preview-button"
+              variant="ghost"
+              ?disabled=${this.disabled}
+              icon-label=${this.localize.term("copyToClipboard")}
+            ></sigvelo-button>
+          </sigvelo-copy>
+
+          ${this.withEyeDropper && hasEyeDropper ? html`
+                <sigvelo-button
+                  id="eye-dropper"
+                  part="eye-dropper-button"
+                  variant="ghost"
+                  ?disabled=${this.disabled}
+                  icon-label=${this.localize.term("selectAColorFromTheScreen")}
+                  @click=${this.handleEyeDropperClick}
+                >
+                  <sigvelo-icon library="system" name="color-picker"></sigvelo-icon>
+                </sigvelo-button>
+              ` : ""}
+
+          <div id="sliders" part="sliders">
+            <sigvelo-slider
+              id="hue"
+              part="hue-slider"
+              exportparts="
+                label:hue-slider__label,
+                description:hue-slider__description,
+                slider:hue-slider__slider,
+                track:hue-slider__track,
+                indicator:hue-slider__indicator,
+                thumb:hue-slider__thumb,
+              "
+              dir=${isRtl ? "rtl" : " ltr"}
+              label="${this.localize.term("hue")}"
+              min="0"
+              max="359"
+              value=${this.h}
+              .valueFormatter=${this.formatHue}
+              ?disabled=${this.disabled}
+              @sigvelo-focus=${this.stopPropagation}
+              @sigvelo-blur=${this.stopPropagation}
+              @sigvelo-change=${this.handleHueSliderInput}
+              @sigvelo-input=${this.handleHueSliderInput}
+            ></sigvelo-slider>
+
+            ${this.withAlpha ? html`
+                  <sigvelo-slider
+                    id="alpha"
+                    part="alpha-slider"
+                    exportparts="
+                      label:alpha-slider__label,
+                      description:alpha-slider__description,
+                      slider:alpha-slider__slider,
+                      track:alpha-slider__track,
+                      indicator:alpha-slider__indicator,
+                      thumb:alpha-slider__thumb,
+                    "
+                    dir=${isRtl ? "rtl" : " ltr"}
+                    label=${this.localize.term("opacity")}
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    value=${this.a}
+                    .valueFormatter=${this.formatAlpha}
+                    ?disabled=${this.disabled}
+                    @sigvelo-focus=${this.stopPropagation}
+                    @sigvelo-blur=${this.stopPropagation}
+                    @sigvelo-change=${this.handleAlphaSliderInput}
+                    @sigvelo-input=${this.handleAlphaSliderInput}
+                  ></sigvelo-slider>
+                ` : ""}
+          </div>
+        </div>
+
+        ${this.withInput ? html`
+              <sigvelo-text-field
+                id="color-input"
+                part="color-input"
+                exportparts="
+                  visual-box:color-input__visual-box,
+                  text-box:color-input__text-box
+                "
+                label=${this.localize.term("colorValue")}
+                value=${this.displayValue}
+                ?disabled=${this.disabled}
+                size=${this.size}
+                @sigvelo-input=${this.handleColorInputInput}
+                @sigvelo-blur=${this.handleColorInputBlur}
+                @sigvelo-focus=${this.handleColorInputFocus}
+              ></sigvelo-text-field>
+            ` : ""}
+        ${swatches.length > 0 ? html`
+              <div id="swatches" part="swatches">
+                ${swatches.map((swatch) => {
+			return html`
+                    <button
+                      part="swatch"
+                      aria-label="${swatch}"
+                      style="--swatch-color: ${swatch}"
+                      tabindex=${this.disabled ? "-1" : "0"}
+                      @click=${() => this.handleSwatchClick(swatch)}
+                    ></button>
+                  `;
+		})}
+              </div>
+            ` : ""}
+      </div>
+    `;
+	}
+};
+__decorate([query("#color-slider")], SigveloColorPicker.prototype, "colorSlider", void 0);
+__decorate([query("#color-slider-thumb")], SigveloColorPicker.prototype, "colorSliderThumb", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "h", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "s", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "v", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "a", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "colorSliderThumbX", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "colorSliderThumbY", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "hasFocus", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "isChangingV", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "isChangingS", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "inputIsFocused", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "displayValue", void 0);
+__decorate([state()], SigveloColorPicker.prototype, "hadUserInteraction", void 0);
+__decorate([property()], SigveloColorPicker.prototype, "label", void 0);
+__decorate([property()], SigveloColorPicker.prototype, "value", void 0);
+__decorate([property()], SigveloColorPicker.prototype, "format", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloColorPicker.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloColorPicker.prototype, "size", void 0);
+__decorate([property()], SigveloColorPicker.prototype, "swatches", void 0);
+__decorate([property({
+	attribute: "with-alpha",
+	type: Boolean,
+	reflect: true
+})], SigveloColorPicker.prototype, "withAlpha", void 0);
+__decorate([property({
+	attribute: "with-eye-dropper",
+	type: Boolean,
+	reflect: true
+})], SigveloColorPicker.prototype, "withEyeDropper", void 0);
+__decorate([property({
+	attribute: "with-input",
+	type: Boolean,
+	reflect: true
+})], SigveloColorPicker.prototype, "withInput", void 0);
+SigveloColorPicker.disableWarning?.("change-in-update");
+customElements.define("sigvelo-color-picker", SigveloColorPicker);
+//#endregion
+export { SigveloColorPicker as t };