@mcp-b/web-components 0.2.0

package/dist/color-input-DPIxi9wR.js

@@ -0,0 +1,894 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./color-picker-adwOmtRl.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 { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { SigveloBlurEvent, SigveloChangeEvent, SigveloFocusEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import { live } from "lit/directives/live.js";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/components/color-input/color-input.styles.ts
+var color_input_styles_default = css`
+  :host {
+    --show-duration: var(--sigvelo-motion-duration-interaction);
+    --preview-size: 1.5em;
+  }
+
+  /* Pills */
+  #visual-box.pill {
+    padding: 0 0.5em;
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  :host(:state(open):not(:state(disabled)) #visual-box:is(.normal, .filled)) {
+    outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+      var(--sigvelo-color-focus);
+    outline-offset: calc(-1 * var(--sigvelo-border-width));
+  }
+
+  #preview {
+    position: relative;
+    aspect-ratio: 1;
+    width: var(--preview-size);
+    height: var(--preview-size);
+    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: var(--current-color, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, light-dark(black, white), transparent 90%);
+    pointer-events: none;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: var(--preview-size);
+      height: var(--preview-size);
+      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: '';
+    }
+  }
+
+  #color-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    box-shadow: var(--sigvelo-elevation-floating);
+    cursor: default;
+
+    &::part(picker) {
+      border-color: var(--sigvelo-color-neutral-border-muted);
+    }
+
+    &.show {
+      animation: show var(--show-duration) ease;
+    }
+
+    &.hide {
+      animation: show var(--show-duration) ease reverse;
+    }
+  }
+
+  :host([data-placement^='top']) #color-picker {
+    transform-origin: bottom;
+  }
+
+  :host([data-placement^='bottom']) #color-picker {
+    transform-origin: top;
+  }
+
+  :host([data-placement^='left']) #color-picker {
+    transform-origin: right;
+  }
+
+  :host([data-placement^='right']) #color-picker {
+    transform-origin: left;
+  }
+
+  :host([data-placement='left-start']) #color-picker {
+    transform-origin: right top;
+  }
+
+  :host([data-placement='left-end']) #color-picker {
+    transform-origin: right bottom;
+  }
+
+  :host([data-placement='right-start']) #color-picker {
+    transform-origin: left top;
+  }
+
+  :host([data-placement='right-end']) #color-picker {
+    transform-origin: left bottom;
+  }
+
+  @keyframes show {
+    from {
+      scale: 0.9;
+      opacity: 0;
+    }
+    to {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+//#region src/components/color-input/color-input.ts
+const openColorPickers = /* @__PURE__ */ new Set();
+/**
+* <sigvelo-color-input>
+*
+* @summary Allows users to enter or select a color and submit it with a form.
+* @tag sigvelo-color-input
+* @documentation https://design-system.sigvelo.com/docs/components/color-input
+* @status stable
+* @since 1.0
+*
+* @dependency - sigvelo-color-picker
+*
+* @slot label - The color input's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The color input's description. For plain-text descriptions, you can use the `description`
+*  attribute instead.
+*
+* @event sigvelo-blur - Emitted when the color input loses focus. This event does not bubble.
+* @event sigvelo-change - Emitted when the user commits changes to the color input's value.
+* @event sigvelo-focus - Emitted when the color input receives focus. This event does not bubble.
+* @event sigvelo-input - Emitted when the color input receives input.
+*
+* @csspart label - The element that contains the color input's label.
+* @csspart description - The element that contains the color input's description.
+* @csspart visual-box - The element that wraps the internal text box.
+* @csspart text-box - The internal text box, an `<input>` element.
+* @csspart clear-button - The clear button, a `<button>` element.
+*
+* @cssproperty [--show-duration=50ms] - The duration of the show/hide animation.
+* @cssproperty [--preview-size=1.6em] - The size of the color preview.
+*
+* @cssstate disabled - Applied when the color input is disabled.
+* @cssstate blank - Applied when the color input has a blank value.
+* @cssstate focused - Applied when the color input has focus.
+* @cssstate open - Applied when the color picker is open.
+* @cssstate user-valid - Applied when the color input is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the color input is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* ```html
+* <sigvelo-color-input
+*   label="Select a color"
+*   description="The cats like violet, but any color works"
+*   name="color"
+*   value="#f0803a"
+*   swatches="
+*     #09090b; #71717a; #ef4444; #f97316;
+*     #f59e0b; #eab308; #84cc16; #22c55e;
+*     #10b981; #14b8a6; #06b6d4; #3b82f6;
+*     #6366f1; #a855f7; #d946ef; #ec4899
+*   "
+*   with-input
+*   with-alpha
+*   with-eye-dropper
+*   with-clear
+* ></sigvelo-color-input>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the color input. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-color-input
+*   label="Select a color"
+*   name="color"
+* >
+*   <span slot="description">
+*     For our cafe branding guidelines, <a href="https://example.com/" target="_blank">visit our style guide</a>.
+*   </span>
+* </sigvelo-color-input>
+* ```
+*
+* @example Providing an initial value
+* Use the `value` attribute to provide an initial value for the color input.
+*
+* ```html
+* <sigvelo-color-input
+*   label="Select a color"
+*   value="#7578c5"
+* ></sigvelo-color-input>
+* ```
+*
+* @example Enabling alpha
+* Add the `with-alpha` attribute to allow users to adjust opacity. Hex colors will become the eight-value syntax, e.g. `#rrggbbaa`, and other formats will include alpha as well.
+*
+* ```html
+* <sigvelo-color-input
+*   label="Select a color"
+*   value="#ce238088"
+*   with-alpha
+* ></sigvelo-color-input>
+* ```
+*
+* @example Adding a clear button
+* To add a clear button to the color input, use the `with-clear` attribute. The `sigvelo-input` event will be emitted when the clear button is activated.
+*
+* ```html
+* <sigvelo-color-input
+*   label="Select a color"
+*   name="color"
+*   value="#21b8bc"
+*   with-clear
+* ></sigvelo-color-input>
+* ```
+*
+* @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-input
+*   label="Select a color (RGB)"
+*   value="rgb(255, 204, 0)"
+*   format="rgb"
+* ></sigvelo-color-input>
+* ```
+*
+* @example Filled and unstyled color inputs
+* Color inputs support multiple visual styles through the `variant` attribute.
+*
+* ```html
+* <sigvelo-color-input
+*   label="Normal"
+*   variant="normal"
+*   value="#6366f1"
+* ></sigvelo-color-input>
+*
+* <br>
+*
+* <sigvelo-color-input
+*   label="Filled"
+*   variant="filled"
+*   value="#6366f1"
+* ></sigvelo-color-input>
+*
+* <br>
+*
+* <sigvelo-color-input
+*   label="Unstyled"
+*   variant="unstyled"
+*   value="#6366f1"
+* ></sigvelo-color-input>
+* ```
+*
+* @example Pill-shaped color inputs
+* Color inputs can be rendered with pill-shaped edges by adding the `pill` attribute.
+*
+* ```html
+* <sigvelo-color-input pill label="Pill-shaped"></sigvelo-color-input>
+* ```
+*
+* @example Sizes
+* Use the `size` attribute to change the color input's size.
+*
+* ```html
+* <sigvelo-color-input size="xs" label="Extra small"></sigvelo-color-input><br>
+* <sigvelo-color-input size="sm" label="Small"></sigvelo-color-input><br>
+* <sigvelo-color-input size="md" label="Medium"></sigvelo-color-input><br>
+* <sigvelo-color-input size="lg" label="Large"></sigvelo-color-input><br>
+* <sigvelo-color-input size="xl" label="Extra large"></sigvelo-color-input>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the color input.
+*
+* ```html
+* <sigvelo-color-input
+*   label="Disabled color input"
+*   disabled
+*   value="#6366f1"
+* ></sigvelo-color-input>
+* ```
+*
+* @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-input
+*   label="Select a color"
+*   swatches="
+*     #09090b; #71717a; #ef4444; #f97316;
+*     #f59e0b; #eab308; #84cc16; #22c55e;
+*     #10b981; #14b8a6; #06b6d4; #3b82f6;
+*     #6366f1; #a855f7; #d946ef; #ec4899
+*   "
+* ></sigvelo-color-input>
+* ```
+*
+* You can also mix different color formats in the swatches:
+*
+* ```html
+* <sigvelo-color-input
+*   label="Select a color"
+*   swatches="
+*     rgb(255 0 0);
+*     hsl(120, 100%, 50%);
+*     rgb(0 0 255 / 0.5);
+*     lightblue;
+*     #ff00ff
+*   "
+* ></sigvelo-color-input>
+* ```
+*
+* @example Showing labels on the side
+* With the `sigvelo-side-label` utility, you can show labels on the side instead of on top of the color input. You can control the width of the label by setting the `--label-width` custom property.
+*
+* ```html
+* <sigvelo-color-input
+*   class="sigvelo-side-label"
+*   style="--label-width: 10ch;"
+*   name="color"
+*   label="Brand color"
+*   description="Make it pop"
+* ></sigvelo-color-input>
+* <br>
+* <sigvelo-color-input
+*   class="sigvelo-side-label"
+*   style="--label-width: 10ch;"
+*   name="color"
+*   label="Accent color"
+*   description="Complementary colors work well here"
+* ></sigvelo-color-input>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission when the color input is missing a value.
+*
+* ```html
+* <form action="about:blank" target="_blank">
+*   <sigvelo-color-input
+*     name="color"
+*     label="Select a color"
+*     required
+*     style="margin-block-end: 1rem;"
+*   ></sigvelo-color-input>
+*   <sigvelo-button type="submit">Submit</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the color input invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="color-input__custom">
+*   <sigvelo-color-input
+*     name="color"
+*     label="Select a color"
+*     description="This field will be invalid until custom validation is removed"
+*   ></sigvelo-color-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('color-input__custom');
+*   const colorInput = form.querySelector('sigvelo-color-input');
+*
+*   colorInput.setCustomValidity('Please select a different color!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid color inputs using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="field__validation-pseudo">
+*   <sigvelo-color-input
+*     name="color"
+*     label="Select a color"
+*     description="This field is required"
+*     required
+*   ></sigvelo-color-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .field__validation-pseudo {
+*     sigvelo-color-input:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-color-input:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="field__validation-custom">
+*   <sigvelo-color-input
+*     name="color"
+*     label="Select a color"
+*     description="This field is required"
+*     required
+*   ></sigvelo-color-input>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .field__validation-custom {
+*     sigvelo-color-input:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-color-input:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloColorInput = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.isOpen = false;
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.withClear = false;
+		this.variant = "normal";
+		this.size = "md";
+		this.pill = false;
+		this.format = "hex";
+		this.swatches = "";
+		this.withAlpha = false;
+		this.withEyeDropper = false;
+		this.placement = "bottom-start";
+		this.distance = 0;
+		this.offset = 0;
+		this.required = false;
+		this.handleDocumentFocusIn = (event) => {
+			const path = event.composedPath();
+			if (!path.includes(this) && !path.includes(this.colorPicker)) this.isOpen = false;
+		};
+		this.handleDocumentKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				this.focus();
+				this.hidePicker();
+			}
+		};
+		this.handleDocumentPointerDown = (event) => {
+			const path = event.composedPath();
+			if (!path.includes(this.visualBox) && !path.includes(this.colorPicker)) this.hidePicker();
+		};
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			color_input_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.textBox;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+	}
+	async updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("isOpen")) {
+			if (this.disabled) this.isOpen = false;
+			this.customStates.set("open", this.isOpen);
+			if (this.isOpen) this.showPicker();
+			else this.hidePicker();
+		}
+		if (changedProperties.has("value")) {
+			this.customStates.set("blank", this.value === "");
+			this.internals.setFormValue(this.value);
+			this.preview.style.setProperty("--current-color", this.value);
+		}
+		if (changedProperties.has("disabled")) {
+			if (this.disabled) this.isOpen = false;
+			this.customStates.set("disabled", this.disabled);
+		}
+		if (changedProperties.has("format")) {
+			if (this.value !== "") {
+				await this.colorPicker.updateComplete;
+				this.value = this.colorPicker.value;
+			}
+		}
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+	}
+	/** @internal Called when a containing fieldset is disabled. */
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+	}
+	/** @internal Called when the form is reset. */
+	formResetCallback() {
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = this.getAttribute("value") ?? "";
+	}
+	handleBlur() {
+		this.customStates.set("focused", false);
+		this.dispatchEvent(new SigveloBlurEvent());
+		if (this.value !== "") this.value = this.colorPicker.value;
+	}
+	handleChange() {
+		this.hadUserInteraction = true;
+		this.dispatchEvent(new SigveloChangeEvent());
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleFocus() {
+		this.customStates.set("focused", true);
+		this.dispatchEvent(new SigveloFocusEvent());
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	handleClearClick() {
+		this.hadUserInteraction = true;
+		this.value = "";
+		this.textBox.focus();
+		this.dispatchEvent(new SigveloInputEvent());
+		this.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			composed: true,
+			cancelable: false
+		}));
+	}
+	handleColorPickerChange() {
+		this.hadUserInteraction = true;
+	}
+	handleColorPickerInput() {
+		this.value = this.colorPicker.value;
+		this.dispatchEvent(new SigveloInputEvent());
+		this.dispatchEvent(new InputEvent("input", {
+			bubbles: true,
+			composed: true,
+			cancelable: false
+		}));
+	}
+	async handleInput() {
+		this.value = this.textBox.value;
+		this.colorPicker.value = this.value;
+		await this.updateComplete;
+		this.dispatchEvent(new SigveloInputEvent());
+	}
+	handleTextBoxButtonPointerDown(event) {
+		event.preventDefault();
+	}
+	handleTextBoxKeyDown(event) {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.isOpen = true;
+		}
+	}
+	handleVisualBoxPointerDown(event) {
+		const target = event.target;
+		const isBox = target?.id === "visual-box";
+		const isSlot = target.hasAttribute("slot");
+		if (this.disabled) return;
+		if (isBox || isSlot) event.preventDefault();
+		if (!this.isOpen && !event.composedPath().includes(this.colorPicker)) {
+			if (event.pointerType === "touch") event.preventDefault();
+			else this.textBox.focus();
+			this.isOpen = true;
+		}
+	}
+	/** Repositions the dropdown menu */
+	reposition() {
+		const anchor = this.visualBox;
+		computePosition(anchor, this.colorPicker, {
+			placement: this.placement,
+			middleware: [
+				offset({
+					mainAxis: this.distance,
+					crossAxis: this.offset
+				}),
+				flip(),
+				shift()
+			]
+		}).then(({ x, y, placement }) => {
+			this.setAttribute("data-placement", placement);
+			Object.assign(this.colorPicker.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+		});
+	}
+	/** Sets the form control's validity */
+	async updateValidity() {
+		await this.updateComplete;
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		const validationMessage = hasCustomValidity ? this.getCustomValidity() : this.textBox.validationMessage;
+		const flags = {
+			badInput: this.textBox.validity.badInput,
+			customError: hasCustomValidity,
+			patternMismatch: this.textBox.validity.patternMismatch,
+			rangeOverflow: this.textBox.validity.rangeOverflow,
+			rangeUnderflow: this.textBox.validity.rangeUnderflow,
+			stepMismatch: this.textBox.validity.stepMismatch,
+			tooLong: this.textBox.validity.tooLong,
+			tooShort: this.textBox.validity.tooShort,
+			typeMismatch: this.textBox.validity.typeMismatch,
+			valueMissing: this.textBox.validity.valueMissing
+		};
+		this.isInvalid = hasCustomValidity ? true : !this.textBox.validity.valid;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	/** Removes focus from the color input. */
+	blur() {
+		this.textBox.blur();
+	}
+	/** Sets focus to the color input. */
+	focus() {
+		this.textBox.focus();
+		this.isOpen = true;
+	}
+	/**
+	* 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") {
+		return this.colorPicker.getValueAs(format);
+	}
+	/** Selects all text in the color input. */
+	select() {
+		this.textBox.select();
+	}
+	/** Sets the start and end positions of the current text selection in the color input. */
+	setSelectionRange(start, end, direction = "none") {
+		this.textBox.setSelectionRange(start, end, direction);
+	}
+	/** Replaces a range of text in the color input with a new string. */
+	setRangeText(replacement, start, end, selectMode) {
+		this.textBox.setRangeText(replacement, start ?? this.textBox.selectionStart, end ?? this.textBox.selectionEnd, selectMode);
+		this.value = this.textBox.value;
+	}
+	/** Shows the color picker. */
+	async showPicker() {
+		if (this.disabled) return;
+		openColorPickers.forEach((picker) => picker.isOpen = false);
+		this.colorPicker.showPopover();
+		this.isOpen = true;
+		this.reposition();
+		openColorPickers.add(this);
+		document.addEventListener("keydown", this.handleDocumentKeyDown);
+		document.addEventListener("pointerdown", this.handleDocumentPointerDown);
+		document.addEventListener("focusin", this.handleDocumentFocusIn);
+		this.colorPicker.hidden = false;
+		this.cleanup = autoUpdate(this.visualBox, this.colorPicker, () => this.reposition());
+		await animateWithClass(this.colorPicker, "show");
+	}
+	/** Hides the color picker. */
+	async hidePicker() {
+		if (this.disabled) return;
+		this.isOpen = false;
+		openColorPickers.delete(this);
+		document.removeEventListener("keydown", this.handleDocumentKeyDown);
+		document.removeEventListener("pointerdown", this.handleDocumentPointerDown);
+		document.removeEventListener("focusin", this.handleDocumentFocusIn);
+		if (!this.colorPicker.hidden) {
+			await animateWithClass(this.colorPicker, "hide");
+			this.colorPicker.hidden = true;
+			this.colorPicker.hidePopover();
+		}
+		if (this.cleanup) {
+			this.cleanup();
+			this.cleanup = void 0;
+			this.removeAttribute("data-placement");
+		}
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		return html`
+      <label id="label" part="label" for="text-box" class=${classMap({ vh: !hasLabel })}>
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+
+      <div
+        id="visual-box"
+        part="visual-box"
+        class=${classMap({
+			normal: this.variant === "normal",
+			filled: this.variant === "filled",
+			unstyled: this.variant === "unstyled",
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			pill: this.pill,
+			disabled: this.disabled
+		})}
+        @pointerdown=${this.handleVisualBoxPointerDown}
+      >
+        <div id="preview"></div>
+        <input
+          id="text-box"
+          part="text-box"
+          type="text"
+          ?autofocus=${this.autofocus}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          placeholder=${ifDefined(this.placeholder)}
+          .value=${live(this.value)}
+          autocapitalize="off"
+          autocomplete=${ifDefined(this.autocomplete)}
+          autocorrect="off"
+          enterkeyhint=${ifDefined(this.enterkeyhint)}
+          inputmode=${ifDefined(this.inputmode)}
+          aria-describedby="description"
+          aria-invalid=${this.isInvalid ? "true" : "false"}
+          aria-haspopup="dialog"
+          aria-expanded=${this.isOpen ? "true" : "false"}
+          aria-controls="color-picker"
+          role="combobox"
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @keydown=${this.handleTextBoxKeyDown}
+        />
+
+        ${this.withClear && this.value?.length > 0 && !this.disabled && !this.readonly ? html`
+              <button
+                id="clear-button"
+                part="clear-button"
+                class="text-box-button"
+                type="button"
+                aria-label=${this.localize.term("clearEntry")}
+                tabindex="-1"
+                @pointerdown=${this.handleTextBoxButtonPointerDown}
+                @click=${this.handleClearClick}
+              >
+                <sigvelo-icon library="system" name="circle-x"></sigvelo-icon>
+              </button>
+            ` : ""}
+      </div>
+
+      <sigvelo-color-picker
+        id="color-picker"
+        popover="manual"
+        value=${this.value}
+        size=${this.size}
+        format=${this.format}
+        swatches=${ifDefined(this.swatches)}
+        ?with-alpha=${this.withAlpha}
+        ?with-eye-dropper=${this.withEyeDropper}
+        hidden
+        role="dialog"
+        @sigvelo-change=${this.handleColorPickerChange}
+        @sigvelo-input=${this.handleColorPickerInput}
+      ></sigvelo-color-picker>
+    `;
+	}
+};
+__decorate([query("#color-picker")], SigveloColorInput.prototype, "colorPicker", void 0);
+__decorate([query("input")], SigveloColorInput.prototype, "textBox", void 0);
+__decorate([query("#preview")], SigveloColorInput.prototype, "preview", void 0);
+__decorate([query("#visual-box")], SigveloColorInput.prototype, "visualBox", void 0);
+__decorate([state()], SigveloColorInput.prototype, "isOpen", void 0);
+__decorate([state()], SigveloColorInput.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloColorInput.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloColorInput.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloColorInput.prototype, "label", void 0);
+__decorate([property()], SigveloColorInput.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloColorInput.prototype, "name", void 0);
+__decorate([property()], SigveloColorInput.prototype, "value", void 0);
+__decorate([property()], SigveloColorInput.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloColorInput.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloColorInput.prototype, "readonly", void 0);
+__decorate([property({
+	attribute: "with-clear",
+	type: Boolean,
+	reflect: true
+})], SigveloColorInput.prototype, "withClear", void 0);
+__decorate([property({ reflect: true })], SigveloColorInput.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloColorInput.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloColorInput.prototype, "pill", void 0);
+__decorate([property()], SigveloColorInput.prototype, "format", void 0);
+__decorate([property()], SigveloColorInput.prototype, "swatches", void 0);
+__decorate([property({
+	attribute: "with-alpha",
+	type: Boolean,
+	reflect: true
+})], SigveloColorInput.prototype, "withAlpha", void 0);
+__decorate([property({
+	attribute: "with-eye-dropper",
+	type: Boolean,
+	reflect: true
+})], SigveloColorInput.prototype, "withEyeDropper", void 0);
+__decorate([property({ reflect: true })], SigveloColorInput.prototype, "placement", void 0);
+__decorate([property({ type: Number })], SigveloColorInput.prototype, "distance", void 0);
+__decorate([property({ type: Number })], SigveloColorInput.prototype, "offset", void 0);
+__decorate([property()], SigveloColorInput.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloColorInput.prototype, "required", void 0);
+__decorate([property()], SigveloColorInput.prototype, "autocomplete", void 0);
+__decorate([property({ type: Boolean })], SigveloColorInput.prototype, "autofocus", void 0);
+__decorate([property()], SigveloColorInput.prototype, "enterkeyhint", void 0);
+__decorate([property()], SigveloColorInput.prototype, "inputmode", void 0);
+customElements.define("sigvelo-color-input", SigveloColorInput);
+//#endregion
+export { SigveloColorInput as t };