@mcp-b/web-components 0.2.22 → 0.3.1

package/dist/{checkbox-C96lUDIM.js → checkbox-C97tlcf2.js}

@@ -1,5 +1,6 @@
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { mirrorNativeValidity } from "./utilities/form-validity.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -63,9 +64,8 @@ var checkbox_styles_default = css`
       var(--sigvelo-motion-duration-interaction) border-color ease;
 
     &:has(:focus-visible) {
-      outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
-        var(--sigvelo-color-focus);
-      outline-offset: var(--sigvelo-border-width);
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
     }
 
     /* Normal */
@@ -477,42 +477,17 @@ var SigveloCheckbox = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.checkbox;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
-	}
 	updated(changedProperties) {
 		this.updateValidity();
 		if (changedProperties.has("checked") || changedProperties.has("value")) this.internals.setFormValue(this.checked ? this.value : null);
 		if (changedProperties.has("checked")) this.customStates.set("checked", this.checked);
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
-		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;
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.effectiveDisabled);
 	}
 	/** @internal Called when the form is reset. */
 	formResetCallback() {
-		this.isInvalid = false;
-		this.hadUserInteraction = false;
-		this.wasSubmitted = false;
+		super.formResetCallback();
 		this.checked = this.hasAttribute("checked");
 	}
-	handleClick() {
-		this.checked = !this.checked;
-		this.indeterminate = false;
-	}
 	handleBlur() {
 		this.customStates.set("focused", false);
 		this.dispatchEvent(new SigveloBlurEvent());
@@ -526,25 +501,19 @@ var SigveloCheckbox = class extends SigveloFormControlElement {
 		}));
 	}
 	handleInput() {
+		this.checked = this.checkbox.checked;
+		this.indeterminate = this.checkbox.indeterminate;
 		this.dispatchEvent(new SigveloInputEvent());
 	}
 	handleFocus() {
 		this.customStates.set("focused", true);
 		this.dispatchEvent(new SigveloFocusEvent());
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	/** Sets the form control's validity */
 	async updateValidity() {
 		await this.updateComplete;
-		const hasCustomValidity = this.getCustomValidity().length > 0;
-		const validationMessage = hasCustomValidity ? this.getCustomValidity() : this.checkbox.validationMessage;
-		const flags = {
-			customError: hasCustomValidity,
-			valueMissing: this.checkbox.validity.valueMissing
-		};
-		this.isInvalid = hasCustomValidity ? true : !this.checkbox.validity.valid;
+		const { flags, validationMessage, isInvalid } = mirrorNativeValidity(this.checkbox, this.getCustomValidity());
+		this.isInvalid = isInvalid;
 		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
 	}
 	/** Sets focus to the checkbox. */
@@ -572,7 +541,7 @@ var SigveloCheckbox = class extends SigveloFormControlElement {
 			xl: this.size === "xl",
 			checked: this.checked,
 			indeterminate: this.indeterminate,
-			disabled: this.disabled,
+			disabled: this.effectiveDisabled,
 			required: this.required
 		})}
         >
@@ -582,11 +551,10 @@ var SigveloCheckbox = class extends SigveloFormControlElement {
             value=${ifDefined(this.value)}
             .indeterminate=${live(this.indeterminate)}
             .checked=${live(this.checked)}
-            .disabled=${this.disabled}
+            .disabled=${this.effectiveDisabled}
             .required=${this.required}
             aria-describedby="description"
             @change=${this.handleChange}
-            @click=${this.handleClick}
             @input=${this.handleInput}
             @focus=${this.handleFocus}
             @blur=${this.handleBlur}

package/dist/{color-input-Gae_-9w-.js → color-input-Dtp1v7A-.js}

@@ -1,6 +1,7 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./color-picker-BYyZavkT.js";
+import { Localize } from "./utilities/localize.js";
+import { mirrorNativeValidity } from "./utilities/form-validity.js";
+import "./color-picker-Mnpc5u6E.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -516,18 +517,10 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 	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;
+		if (changedProperties.has("isOpen") || this.effectiveDisabled && this.isOpen) {
+			if (this.effectiveDisabled) this.isOpen = false;
 			this.customStates.set("open", this.isOpen);
 			if (this.isOpen) this.showPicker();
 			else this.hidePicker();
@@ -537,33 +530,17 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 			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);
-		}
+		this.customStates.set("disabled", this.effectiveDisabled);
 		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;
+		super.formResetCallback();
 		this.value = this.getAttribute("value") ?? "";
 	}
 	handleBlur() {
@@ -583,9 +560,6 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 		this.customStates.set("focused", true);
 		this.dispatchEvent(new SigveloFocusEvent());
 	}
-	handleHostInvalid() {
-		this.wasSubmitted = true;
-	}
 	handleClearClick() {
 		this.hadUserInteraction = true;
 		this.value = "";
@@ -629,7 +603,7 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 		const target = event.target;
 		const isBox = target?.id === "visual-box";
 		const isSlot = target.hasAttribute("slot");
-		if (this.disabled) return;
+		if (this.effectiveDisabled) return;
 		if (isBox || isSlot) event.preventDefault();
 		if (!this.isOpen && !event.composedPath().includes(this.colorPicker)) {
 			if (event.pointerType === "touch") event.preventDefault();
@@ -661,21 +635,8 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 	/** 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;
+		const { flags, validationMessage, isInvalid } = mirrorNativeValidity(this.textBox, this.getCustomValidity());
+		this.isInvalid = isInvalid;
 		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
 	}
 	/** Removes focus from the color input. */
@@ -710,7 +671,7 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 	}
 	/** Shows the color picker. */
 	async showPicker() {
-		if (this.disabled) return;
+		if (this.effectiveDisabled || this.colorPicker.matches(":popover-open")) return;
 		openColorPickers.forEach((picker) => picker.isOpen = false);
 		this.colorPicker.showPopover();
 		this.isOpen = true;
@@ -725,7 +686,6 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 	}
 	/** Hides the color picker. */
 	async hidePicker() {
-		if (this.disabled) return;
 		this.isOpen = false;
 		openColorPickers.delete(this);
 		document.removeEventListener("keydown", this.handleDocumentKeyDown);
@@ -767,7 +727,7 @@ var SigveloColorInput = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			pill: this.pill,
-			disabled: this.disabled
+			disabled: this.effectiveDisabled
 		})}
         @pointerdown=${this.handleVisualBoxPointerDown}
       >
@@ -777,7 +737,7 @@ var SigveloColorInput = class extends SigveloFormControlElement {
           part="text-box"
           type="text"
           ?autofocus=${this.autofocus}
-          ?disabled=${this.disabled}
+          ?disabled=${this.effectiveDisabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
           placeholder=${ifDefined(this.placeholder)}
@@ -800,7 +760,7 @@ var SigveloColorInput = class extends SigveloFormControlElement {
           @keydown=${this.handleTextBoxKeyDown}
         />
 
-        ${this.withClear && this.value?.length > 0 && !this.disabled && !this.readonly ? html`
+        ${this.withClear && this.value?.length > 0 && !this.effectiveDisabled && !this.readonly ? html`
               <button
                 id="clear-button"
                 part="clear-button"

package/dist/{color-input-Bky89xg_.d.ts → color-input-S29ZHwHE.d.ts}

@@ -412,17 +412,12 @@ declare class SigveloColorInput extends SigveloFormControlElement {
    * virtual keyboard to be displayed on supported devices.
    */
   inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
-  connectedCallback(): void;
-  disconnectedCallback(): void;
   updated(changedProperties: PropertyValues<this>): Promise<void>;
-  /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
   private handleBlur;
   private handleChange;
   private handleFocus;
-  private handleHostInvalid;
   private handleClearClick;
   private handleColorPickerChange;
   private handleColorPickerInput;

package/dist/{color-picker-BYyZavkT.js → color-picker-Mnpc5u6E.js}

@@ -1,9 +1,9 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./button-gg3JJxQZ.js";
+import { Localize } from "./utilities/localize.js";
+import "./button-BbabhtKj.js";
 import "./components/copy/copy.js";
-import "./slider-B90Il7x3.js";
-import "./text-field-Cznb4Afc.js";
+import "./slider-DY-GuC8T.js";
+import "./text-field-gX5RovkE.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -717,11 +717,15 @@ var SigveloColorPicker = class extends SigveloElement {
 		super.connectedCallback();
 		this.addEventListener("focusin", this.handleFocusIn);
 		this.addEventListener("focusout", this.handleFocusOut);
+		this.draggableThumb?.toggle(!this.disabled);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener("focusin", this.handleFocusIn);
 		this.removeEventListener("focusout", this.handleFocusOut);
+		this.draggableThumb?.stop();
+		this.isDragging = false;
+		this.valueWhenDraggingStarted = void 0;
 	}
 	firstUpdated() {
 		this.setColorFromString(this.value);

package/dist/{combobox-iERnTD3A.js → combobox-D4ji7M2B.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import "./combobox-item-yM6tDrGG.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -110,9 +110,8 @@ var combobox_styles_default = css`
 
   /* Focus styles */
   :not(:host([variant="unstyled"])) #visual-box:has(#text-box:focus-visible) {
-    outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
-      var(--sigvelo-color-focus);
-    outline-offset: calc(-1 * var(--sigvelo-border-width));
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(-1 * var(--sigvelo-focus-width));
   }
 
   /* Input area - single flex container for all content */
@@ -1001,7 +1000,7 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 			this.dispatchEvent(new SigveloBlurEvent());
 		};
 		this.handleKeyDown = (event) => {
-			if (this.disabled) return;
+			if (this.effectiveDisabled) return;
 			if (event.key === "Backspace" && !this.inputValue && this.multiple && this.selectedItems.length > 0) {
 				const lastItem = this.selectedItems[this.selectedItems.length - 1];
 				this.deselectItem(lastItem);
@@ -1050,7 +1049,7 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 			if (event.key === "Escape") this.open = false;
 		};
 		this.handleVisualBoxClick = (event) => {
-			if (this.disabled) return;
+			if (this.effectiveDisabled) return;
 			const target = event.target;
 			if (target.closest("#clear-button") || target.closest(".tag-remove")) return;
 			event.stopPropagation();
@@ -1083,7 +1082,7 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 		};
 		this.handleItemPointerMove = (event) => {
 			const hoveredItem = event.target.closest("sigvelo-combobox-item");
-			if (!hoveredItem || this.disabled) return;
+			if (!hoveredItem || this.effectiveDisabled) return;
 			if (hoveredItem !== this.activeItem) {
 				if (this.activeItem) {
 					this.activeItem.active = false;
@@ -1091,9 +1090,6 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 				}
 			}
 		};
-		this.handleHostInvalid = () => {
-			this.wasSubmitted = true;
-		};
 	}
 	static {
 		this.formAssociated = true;
@@ -1111,13 +1107,8 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 	get focusableAnchor() {
 		return this.textBox;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("invalid", this.handleHostInvalid);
-	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.removeEventListener("invalid", this.handleHostInvalid);
 		this.cleanup?.();
 		this.clearAnnouncementTimers();
 	}
@@ -1138,14 +1129,7 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 			this.updateFormValue();
 			this.customStates.set("blank", this.isBlank());
 		}
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
-		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);
-		}
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.effectiveDisabled);
 		if (changedProperties.has("multiple")) {
 			this.value = this.multiple ? [] : "";
 			this.selectedItems = [];
@@ -1153,9 +1137,6 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 		}
 		if (changedProperties.has("inputValue")) this.updateInputWidth();
 	}
-	formDisabledCallback(disabled) {
-		this.disabled = disabled;
-	}
 	formResetCallback() {
 		const initiallySelectedItems = this.getItems(true).filter((item) => item.hasAttribute("selected"));
 		this.getItems(true).forEach((item) => {
@@ -1169,9 +1150,7 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 			this.selectedItems = initiallySelectedItems.length > 0 ? [initiallySelectedItems[0]] : [];
 			this.inputValue = initiallySelectedItems.length > 0 ? initiallySelectedItems[0].getLabelText() : "";
 		}
-		this.hadUserInteraction = false;
-		this.wasSubmitted = false;
-		this.isInvalid = false;
+		super.formResetCallback();
 		this.updateFormValue();
 	}
 	/** Gets all <sigvelo-combobox-item> elements that aren't disabled (by default). */
@@ -1534,9 +1513,9 @@ var SigveloCombobox = class extends SigveloFormControlElement {
 			lg: this.size === "lg",
 			xl: this.size === "xl",
 			pill: this.pill,
-			disabled: this.disabled,
+			disabled: this.effectiveDisabled,
 			multiple: this.multiple,
-			"has-clear": this.withClear && !this.isBlank() && !this.disabled,
+			"has-clear": this.withClear && !this.isBlank() && !this.effectiveDisabled,
 			"has-start": hasStart,
 			"has-end": hasEnd
 		})}
@@ -1576,7 +1555,7 @@ var SigveloCombobox = class extends SigveloFormControlElement {
             aria-controls="dropdown"
             aria-describedby=${ariaDescribedBy}
             aria-invalid=${this.isInvalid ? "true" : "false"}
-            ?disabled=${this.disabled}
+            ?disabled=${this.effectiveDisabled}
             ?required=${this.required}
             placeholder=${ifDefined(this.placeholder)}
             .value=${this.inputValue}
@@ -1590,7 +1569,7 @@ var SigveloCombobox = class extends SigveloFormControlElement {
           />
         </div>
 
-        ${this.withClear && !this.isBlank() && !this.disabled ? html`
+        ${this.withClear && !this.isBlank() && !this.effectiveDisabled ? html`
               <button
                 id="clear-button"
                 part="clear-button"

package/dist/{combobox-item-D2H1CMxC.d.ts → combobox-item-BnBtZyhw.d.ts}

@@ -562,9 +562,9 @@ declare class SigveloCombobox extends SigveloFormControlElement {
   private selectedItems;
   private filteredItems;
   private inputWidth;
-  private isInvalid;
-  private hadUserInteraction;
-  private wasSubmitted;
+  protected isInvalid: boolean;
+  protected hadUserInteraction: boolean;
+  protected wasSubmitted: boolean;
   private liveAnnouncement;
   /** The combobox's label. */
   label: string;
@@ -598,11 +598,9 @@ declare class SigveloCombobox extends SigveloFormControlElement {
   offset: number;
   /** The form to associate with. */
   form: string;
-  connectedCallback(): void;
   disconnectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues<this>): void;
-  formDisabledCallback(disabled: boolean): void;
   formResetCallback(): void;
   /** Gets all <sigvelo-combobox-item> elements that aren't disabled (by default). */
   private getItems;
@@ -639,7 +637,6 @@ declare class SigveloCombobox extends SigveloFormControlElement {
   private handleSlotChange;
   private handleItemClick;
   private handleItemPointerMove;
-  private handleHostInvalid;
   /**
    * A custom function for rendering tag content. By default, this function returns the item's full `textContent`. You
    * can override it to customize the content that gets rendered in tags in `multiple` mode.

package/dist/{comparison-B1-nMwmp.d.ts → comparison-CRvbwS7X.d.ts}

@@ -116,6 +116,7 @@ declare class SigveloComparison extends SigveloElement {
   orientation: "horizontal" | "vertical";
   /** Disables the comparison component, preventing it from being focused and adjusted. */
   disabled: boolean;
+  connectedCallback(): void;
   firstUpdated(): void;
   updated(changedProperties: PropertyValues<this>): void;
   disconnectedCallback(): void;

package/dist/{comparison-HJ1Zedhs.js → comparison-DQUpvkmg.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css, html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -294,6 +294,10 @@ var SigveloComparison = class extends SigveloElement {
 	static {
 		this.styles = [hostStyles, comparison_styles_default];
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasUpdated) this.setupDragging();
+	}
 	firstUpdated() {
 		this.setupDragging();
 	}
@@ -309,6 +313,8 @@ var SigveloComparison = class extends SigveloElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.dragHandler?.stop();
+		this.divider?.classList.remove("dragging");
+		this.customStates.set("dragging", false);
 	}
 	handleFocus() {
 		this.customStates.set("focused", true);
@@ -351,7 +357,9 @@ var SigveloComparison = class extends SigveloElement {
 	}
 	setupDragging() {
 		this.dragHandler?.stop();
-		if (this.disabled) return;
+		this.divider?.classList.remove("dragging");
+		this.customStates.set("dragging", false);
+		if (this.disabled || !this.isConnected) return;
 		this.dragHandler = new DraggableElement(this.divider, {
 			start: (clientX, clientY) => {
 				this.divider.classList.add("dragging");
@@ -376,7 +384,7 @@ var SigveloComparison = class extends SigveloElement {
 				}
 			},
 			stop: () => {
-				this.divider.classList.remove("dragging");
+				this.divider?.classList.remove("dragging");
 				this.customStates.set("dragging", false);
 			}
 		});

package/dist/components/alert-dialog/alert-dialog.js

@@ -1,2 +1,2 @@
-import { t as SigveloAlertDialog } from "../../alert-dialog-D25Oi_TS.js";
+import { t as SigveloAlertDialog } from "../../alert-dialog-CGUwj_0U.js";
 export { SigveloAlertDialog };

package/dist/components/button/button.d.ts

@@ -1,2 +1,2 @@
-import { t as SigveloButton } from "../../button-BQofnUt4.js";
+import { t as SigveloButton } from "../../button-c5YKsC69.js";
 export { SigveloButton };

package/dist/components/button/button.js

@@ -1,2 +1,2 @@
-import { t as SigveloButton } from "../../button-gg3JJxQZ.js";
+import { t as SigveloButton } from "../../button-BbabhtKj.js";
 export { SigveloButton };

package/dist/components/carousel/carousel.js

@@ -1,2 +1,2 @@
-import { t as SigveloCarousel } from "../../carousel-XopKISBQ.js";
+import { t as SigveloCarousel } from "../../carousel-DpIqPTuO.js";
 export { SigveloCarousel };

package/dist/components/checkbox/checkbox.d.ts

@@ -1,2 +1,2 @@
-import { t as SigveloCheckbox } from "../../checkbox-DoFcDEKB.js";
+import { t as SigveloCheckbox } from "../../checkbox-BtoypUxD.js";
 export { SigveloCheckbox };

package/dist/components/checkbox/checkbox.js

@@ -1,2 +1,2 @@
-import { t as SigveloCheckbox } from "../../checkbox-C96lUDIM.js";
+import { t as SigveloCheckbox } from "../../checkbox-C97tlcf2.js";
 export { SigveloCheckbox };

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

@@ -1,2 +1,2 @@
-import { t as SigveloColorInput } from "../../color-input-Bky89xg_.js";
+import { t as SigveloColorInput } from "../../color-input-S29ZHwHE.js";
 export { SigveloColorInput };

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

@@ -1,2 +1,2 @@
-import { t as SigveloColorInput } from "../../color-input-Gae_-9w-.js";
+import { t as SigveloColorInput } from "../../color-input-Dtp1v7A-.js";
 export { SigveloColorInput };

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

@@ -1,2 +1,2 @@
-import { t as SigveloColorPicker } from "../../color-picker-BYyZavkT.js";
+import { t as SigveloColorPicker } from "../../color-picker-Mnpc5u6E.js";
 export { SigveloColorPicker };

package/dist/components/combobox/combobox.d.ts

@@ -1,2 +1,2 @@
-import { n as SigveloCombobox } from "../../combobox-item-D2H1CMxC.js";
+import { n as SigveloCombobox } from "../../combobox-item-BnBtZyhw.js";
 export { SigveloCombobox };

package/dist/components/combobox/combobox.js

@@ -1,2 +1,2 @@
-import { t as SigveloCombobox } from "../../combobox-iERnTD3A.js";
+import { t as SigveloCombobox } from "../../combobox-D4ji7M2B.js";
 export { SigveloCombobox };

package/dist/components/combobox-item/combobox-item.d.ts

@@ -1,2 +1,2 @@
-import { t as SigveloComboboxItem } from "../../combobox-item-D2H1CMxC.js";
+import { t as SigveloComboboxItem } from "../../combobox-item-BnBtZyhw.js";
 export { SigveloComboboxItem };

package/dist/components/comparison/comparison.d.ts

@@ -1,2 +1,2 @@
-import { t as SigveloComparison } from "../../comparison-B1-nMwmp.js";
+import { t as SigveloComparison } from "../../comparison-CRvbwS7X.js";
 export { SigveloComparison };

package/dist/components/comparison/comparison.js

@@ -1,2 +1,2 @@
-import { t as SigveloComparison } from "../../comparison-HJ1Zedhs.js";
+import { t as SigveloComparison } from "../../comparison-DQUpvkmg.js";
 export { SigveloComparison };

package/dist/components/copy/copy.js

@@ -1,14 +1,13 @@
-import { Localize } from "../../utilities/localize.js";
 import "../../icon-Df0H7LYB.js";
 import { t as __decorate } from "../../decorate-DcF3lt7P.js";
-import "../../button-gg3JJxQZ.js";
+import { Localize } from "../../utilities/localize.js";
+import "../../button-BbabhtKj.js";
+import { showCopyFeedback } from "../../utilities/copy-feedback.js";
 import { t as copy_styles_default } from "../../copy.styles-DWGvGNTP.js";
 import { html } from "lit";
 import { property, query } 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 { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
-import { computePosition, flip } from "@floating-ui/dom";
 import { SigveloCopyErrorEvent, SigveloCopyEvent } from "@mcp-b/wc-support/events/copy";
 //#region src/components/copy/copy.ts
 /**
@@ -229,22 +228,7 @@ var SigveloCopy = class extends SigveloElement {
 	}
 	/** Shows copy feedback with an animation */
 	async showFeedback(message) {
-		if (this.feedbackPlacement === "hidden") return;
-		this.feedback.textContent = message;
-		this.feedback.hidden = false;
-		this.feedback.showPopover();
-		computePosition(this, this.feedback, {
-			placement: this.feedbackPlacement,
-			middleware: [flip()]
-		}).then(({ x, y }) => {
-			Object.assign(this.feedback.style, {
-				left: `${x}px`,
-				top: `${y}px`
-			});
-		});
-		await animateWithClass(this.feedback, "show");
-		this.feedback.hidden = true;
-		this.feedback.hidePopover();
+		await showCopyFeedback(this, this.feedback, message, this.feedbackPlacement);
 	}
 	render() {
 		return html`

package/dist/components/date/date.d.ts

@@ -1,2 +1,2 @@
-import { t as SigveloDate } from "../../date-6M6wfa8L.js";
+import { t as SigveloDate } from "../../date-DtaTBM71.js";
 export { SigveloDate };