ropav 0.0.9 → 0.0.10

package/dist/color-input.css

@@ -1,4 +1,4 @@
-.rp-color-input[data-v-bae38f91] {
+.rp-color-input[data-v-e752da15] {
   --_rp-color-input-height: var(--rp-size-control-md);
   --_rp-color-input-preview-size: calc(var(--_rp-color-input-height) / 2);
   --_rp-color-input-preview-inset: calc(
@@ -17,42 +17,42 @@
   font-family: var(--rp-font-family);
   vertical-align: middle;
 }
-.rp-color-input--size-xs[data-v-bae38f91] {
+.rp-color-input--size-xs[data-v-e752da15] {
   --_rp-color-input-height: var(--rp-size-control-xs);
 }
-.rp-color-input--size-sm[data-v-bae38f91] {
+.rp-color-input--size-sm[data-v-e752da15] {
   --_rp-color-input-height: var(--rp-size-control-sm);
 }
-.rp-color-input--size-md[data-v-bae38f91] {
+.rp-color-input--size-md[data-v-e752da15] {
   --_rp-color-input-height: var(--rp-size-control-md);
 }
-.rp-color-input--size-lg[data-v-bae38f91] {
+.rp-color-input--size-lg[data-v-e752da15] {
   --_rp-color-input-height: var(--rp-size-control-lg);
 }
-.rp-color-input--size-xl[data-v-bae38f91] {
+.rp-color-input--size-xl[data-v-e752da15] {
   --_rp-color-input-height: var(--rp-size-control-xl);
 }
-html.dark .rp-color-input[data-v-bae38f91], [data-rp-color-scheme=dark] .rp-color-input[data-v-bae38f91] {
+html.dark .rp-color-input[data-v-e752da15], [data-rp-color-scheme=dark] .rp-color-input[data-v-e752da15] {
   --_rp-color-input-empty-tile: var(--rp-color-dark-6);
   --_rp-color-input-empty-tile-alt: var(--rp-color-dark-4);
 }
-.rp-color-input[data-v-bae38f91] .rp-input {
+.rp-color-input[data-v-e752da15] .rp-input {
   width: 100%;
   min-width: 180px;
   padding-inline-start: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
-.rp-color-input[data-v-bae38f91] .rp-popover__content {
+.rp-color-input[data-v-e752da15] .rp-popover__content {
   min-width: auto;
   padding: var(--rp-spacing-3);
   padding-inline: calc(var(--_rp-color-input-preview-inset) - var(--rp-border-width-thin));
 }
-.rp-color-input[data-v-bae38f91] .rp-color-picker {
+.rp-color-input[data-v-e752da15] .rp-color-picker {
   --_rp-color-picker-size: min(
       var(--_rp-color-picker-saturation-width),
       calc(100vw - var(--rp-spacing-12))
   );
 }
-.rp-color-input__preview[data-v-bae38f91] {
+.rp-color-input__preview[data-v-e752da15] {
   --_rp-color-swatch-radius: 50%;
   width: var(--_rp-color-input-preview-size);
   height: var(--_rp-color-input-preview-size);
@@ -60,14 +60,14 @@ html.dark .rp-color-input[data-v-bae38f91], [data-rp-color-scheme=dark] .rp-colo
   border-radius: 50%;
   pointer-events: none;
 }
-.rp-color-input__preview--empty[data-v-bae38f91] {
+.rp-color-input__preview--empty[data-v-e752da15] {
   box-sizing: border-box;
   display: inline-flex;
   background: var(--_rp-color-input-empty-grid);
   background-size: calc(var(--_rp-color-input-preview-size) / 2) calc(var(--_rp-color-input-preview-size) / 2);
   border: var(--rp-border-width-thin) dashed var(--rp-color-control-border);
 }
-.rp-color-input__eye-dropper[data-v-bae38f91] {
+.rp-color-input__eye-dropper[data-v-e752da15] {
   padding: 0;
   font: inherit;
   background: none;
@@ -80,29 +80,29 @@ html.dark .rp-color-input[data-v-bae38f91], [data-rp-color-scheme=dark] .rp-colo
   color: var(--rp-color-control-icon);
   transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-color-input__eye-dropper[data-v-bae38f91]:hover:not(:disabled) {
+.rp-color-input__eye-dropper[data-v-e752da15]:hover:not(:disabled) {
   color: var(--rp-color-control-fg);
 }
-.rp-color-input__eye-dropper[data-v-bae38f91]:focus-visible {
+.rp-color-input__eye-dropper[data-v-e752da15]:focus-visible {
   outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
   outline-offset: 2px;
 }
-.rp-color-input__eye-dropper[data-v-bae38f91]:disabled {
+.rp-color-input__eye-dropper[data-v-e752da15]:disabled {
   cursor: not-allowed;
   opacity: var(--rp-opacity-disabled);
 }
-.rp-color-input__eye-dropper-icon[data-v-bae38f91] {
+.rp-color-input__eye-dropper-icon[data-v-e752da15] {
   display: inline-flex;
   align-items: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-color-input__eye-dropper-icon svg[data-v-bae38f91] {
+.rp-color-input__eye-dropper-icon svg[data-v-e752da15] {
   width: 100%;
   height: 100%;
 }
-.rp-color-input__eye-dropper-icon[data-v-bae38f91] >  svg {
+.rp-color-input__eye-dropper-icon[data-v-e752da15] >  svg {
   width: 100%;
   height: 100%;
 }

package/dist/color-input.js

@@ -176,8 +176,8 @@ function useColorInput(props, emit) {
 }
 //#endregion
 //#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-bae38f91 class=\"rp-color-input__preview rp-color-input__preview--empty\"aria-hidden=true>", 2);
-var t1 = template("<button data-v-bae38f91 class=rp-color-input__eye-dropper type=button><span data-v-bae38f91 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
+var t0 = template("<span data-v-e752da15 class=\"rp-color-input__preview rp-color-input__preview--empty\"aria-hidden=true>", 2);
+var t1 = template("<button data-v-e752da15 class=rp-color-input__eye-dropper type=button><span data-v-e752da15 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
 //#endregion
 //#region src/components/color-input/color-input.vue
 var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -235,6 +235,10 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			type: Boolean,
 			default: void 0
 		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		},
 		popoverId: {},
 		pickerAriaLabel: { default: "Choose color" },
 		withEyeDropper: {
@@ -256,6 +260,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			class: () => unref(rootClass),
 			placement: () => __props.placement,
 			open: () => __props.open,
+			"keep-mounted": () => __props.keepMounted,
 			disabled: () => unref(popoverDisabled),
 			"aria-label": () => __props.pickerAriaLabel,
 			onFocusout: () => unref(onFocusOut),
@@ -339,6 +344,6 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-bae38f91"]]);
+}), [["__scopeId", "data-v-e752da15"]]);
 //#endregion
 export { color_input_default as t };

package/dist/color-picker.css

@@ -1,4 +1,4 @@
-.rp-color-picker__saturation[data-v-0ff88f34] {
+.rp-color-picker__saturation[data-v-ae77cf79] {
   position: relative;
   box-sizing: border-box;
   width: var(--_rp-color-picker-control-width);
@@ -9,13 +9,13 @@
   touch-action: none;
   cursor: crosshair;
 }
-.rp-color-picker__saturation[data-v-0ff88f34]:focus-visible {
+.rp-color-picker__saturation[data-v-ae77cf79]:focus-visible {
   outline: none;
 }
-.rp-color-picker__saturation[data-readonly=true][data-v-0ff88f34] {
+.rp-color-picker__saturation[data-readonly=true][data-v-ae77cf79] {
   cursor: default;
 }
-.rp-color-picker__axis-input[data-v-0ff88f34] {
+.rp-color-picker__axis-input[data-v-ae77cf79] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -27,10 +27,10 @@
   border-width: 0;
   pointer-events: none;
 }
-.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-0ff88f34] {
+.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-ae77cf79] {
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-color-picker__surface[data-v-0ff88f34] {
+.rp-color-picker__surface[data-v-ae77cf79] {
   position: absolute;
   inset: calc(-1 * var(--_rp-color-picker-thumb-radius));
   overflow: hidden;
@@ -38,7 +38,7 @@
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
   background: linear-gradient(to top, #000 0 var(--_rp-color-picker-thumb-radius), rgba(0, 0, 0, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), linear-gradient(to right, #fff 0 var(--_rp-color-picker-thumb-radius), rgba(255, 255, 255, 0) calc(100% - var(--_rp-color-picker-thumb-radius)) 100%), hsl(var(--_rp-color-picker-hue), 100%, 50%);
 }
-.rp-color-picker__handle[data-v-0ff88f34] {
+.rp-color-picker__handle[data-v-ae77cf79] {
   position: absolute;
   top: var(--_rp-color-picker-saturation-y);
   left: var(--_rp-color-picker-saturation-x);
@@ -52,7 +52,7 @@
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
   pointer-events: none;
   transform: translate(-50%, -50%);
-}.rp-color-picker__hue[data-v-d0c81f73], .rp-color-picker__opacity[data-v-d0c81f73] {
+}.rp-color-picker__hue[data-v-2de2d9f2], .rp-color-picker__opacity[data-v-2de2d9f2] {
   position: relative;
   box-sizing: border-box;
   width: var(--_rp-color-picker-control-width);
@@ -62,22 +62,22 @@
   touch-action: none;
   cursor: pointer;
 }
-.rp-color-picker__hue[data-v-d0c81f73]:focus-visible, .rp-color-picker__opacity[data-v-d0c81f73]:focus-visible {
+.rp-color-picker__hue[data-v-2de2d9f2]:focus-visible, .rp-color-picker__opacity[data-v-2de2d9f2]:focus-visible {
   outline: none;
 }
-.rp-color-picker__hue[data-readonly=true][data-v-d0c81f73], .rp-color-picker__opacity[data-readonly=true][data-v-d0c81f73] {
+.rp-color-picker__hue[data-readonly=true][data-v-2de2d9f2], .rp-color-picker__opacity[data-readonly=true][data-v-2de2d9f2] {
   cursor: default;
 }
-.rp-color-picker__hue:focus-visible .rp-color-picker__slider-handle[data-v-d0c81f73], .rp-color-picker__opacity:focus-visible .rp-color-picker__slider-handle[data-v-d0c81f73] {
+.rp-color-picker__hue:focus-visible .rp-color-picker__slider-handle[data-v-2de2d9f2], .rp-color-picker__opacity:focus-visible .rp-color-picker__slider-handle[data-v-2de2d9f2] {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-color-picker__hue[data-v-d0c81f73] {
+.rp-color-picker__hue[data-v-2de2d9f2] {
   margin-block-start: var(--_rp-color-picker-saturation-slider-gap);
 }
-.rp-color-picker__opacity[data-v-d0c81f73] {
+.rp-color-picker__opacity[data-v-2de2d9f2] {
   margin-block-start: var(--_rp-color-picker-slider-gap);
 }
-.rp-color-picker__slider-surface[data-v-d0c81f73] {
+.rp-color-picker__slider-surface[data-v-2de2d9f2] {
   position: absolute;
   top: 50%;
   right: calc(-1 * var(--_rp-color-picker-thumb-radius));
@@ -88,20 +88,20 @@
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
   transform: translateY(-50%);
 }
-.rp-color-picker__hue-surface[data-v-d0c81f73] {
+.rp-color-picker__hue-surface[data-v-2de2d9f2] {
   background: hsl(0, 100%, 50%);
 }
-.rp-color-picker__hue-surface[data-v-d0c81f73]::before {
+.rp-color-picker__hue-surface[data-v-2de2d9f2]::before {
   position: absolute;
   inset: 0 var(--_rp-color-picker-thumb-radius);
   content: "";
   background: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
 }
-.rp-color-picker__opacity-surface[data-v-d0c81f73] {
+.rp-color-picker__opacity-surface[data-v-2de2d9f2] {
   background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--_rp-color-picker-opacity-color)), var(--_rp-color-picker-checkerboard);
   background-size: auto, var(--_rp-color-picker-checkerboard-size);
 }
-.rp-color-picker__slider-handle[data-v-d0c81f73] {
+.rp-color-picker__slider-handle[data-v-2de2d9f2] {
   position: absolute;
   top: 50%;
   left: var(--_rp-color-picker-slider-x);
@@ -115,10 +115,10 @@
   pointer-events: none;
   transform: translate(-50%, -50%);
 }
-.rp-color-picker__hue-handle[data-v-d0c81f73] {
+.rp-color-picker__hue-handle[data-v-2de2d9f2] {
   background-color: hsl(var(--_rp-color-picker-hue), 100%, 50%);
 }
-.rp-color-picker__opacity-handle[data-v-d0c81f73] {
+.rp-color-picker__opacity-handle[data-v-2de2d9f2] {
   background-color: var(--_rp-color-picker-opacity-color);
 }.rp-color-picker[data-v-38eeea2b] {
   --_rp-color-picker-saturation-width: 220px;

package/dist/color-picker.js

@@ -145,42 +145,122 @@ function formatNumber(value) {
 }
 //#endregion
 //#region src/components/color-picker/useColorPickerDrag.ts
-function useColorPickerDrag({ target, focusTarget, readonly, updateFromPointer }) {
-	let dragWindow = null;
-	function stopDragging() {
-		if (!dragWindow) return;
-		dragWindow.removeEventListener("pointermove", onPointerMove);
-		dragWindow.removeEventListener("pointerup", stopDragging);
-		dragWindow.removeEventListener("pointercancel", stopDragging);
-		dragWindow = null;
+function getPointerId(event) {
+	return Number.isFinite(event.pointerId) ? event.pointerId : void 0;
+}
+function useColorPickerDrag({ target, focusTarget, readonly, isGeometryValid, updateFromPointer }) {
+	let session;
+	let frameWindow = null;
+	let frameId;
+	let geometryDirty = false;
+	let pendingPointer;
+	function isCurrentPointer(event) {
+		const currentSession = session;
+		if (!currentSession) return false;
+		const pointerId = getPointerId(event);
+		return currentSession.pointerId === void 0 || pointerId === currentSession.pointerId;
 	}
-	function onPointerMove(event) {
-		const el = target.value;
-		if (!el) {
-			stopDragging();
+	function cancelScheduledFrame() {
+		if (frameId !== void 0) frameWindow?.cancelAnimationFrame(frameId);
+		frameWindow = null;
+		frameId = void 0;
+	}
+	function applyScheduledUpdate(currentSession) {
+		if (session !== currentSession) return;
+		if (geometryDirty) {
+			const rect = currentSession.element.getBoundingClientRect();
+			if (!isGeometryValid(rect)) return;
+			currentSession.rect = rect;
+			geometryDirty = false;
+		}
+		const pointer = pendingPointer;
+		pendingPointer = void 0;
+		if (pointer) updateFromPointer(pointer, currentSession.rect);
+	}
+	function flushScheduledUpdate() {
+		const currentSession = session;
+		cancelScheduledFrame();
+		if (currentSession) applyScheduledUpdate(currentSession);
+	}
+	function scheduleUpdate() {
+		const currentSession = session;
+		if (!currentSession) return;
+		const view = currentSession.view;
+		if (!view?.requestAnimationFrame) {
+			applyScheduledUpdate(currentSession);
 			return;
 		}
-		updateFromPointer(event, el);
+		if (frameId !== void 0) return;
+		frameWindow = view;
+		frameId = view.requestAnimationFrame(() => {
+			frameWindow = null;
+			frameId = void 0;
+			applyScheduledUpdate(currentSession);
+		});
+	}
+	function onGeometryChange() {
+		if (!session) return;
+		geometryDirty = true;
+		scheduleUpdate();
+	}
+	function stopDragging() {
+		const stoppedSession = session;
+		if (!stoppedSession) return;
+		stoppedSession.view?.removeEventListener("pointermove", onPointerMove);
+		stoppedSession.view?.removeEventListener("pointerup", onPointerEnd);
+		stoppedSession.view?.removeEventListener("pointercancel", onPointerEnd);
+		stoppedSession.view?.removeEventListener("resize", onGeometryChange);
+		stoppedSession.view?.removeEventListener("scroll", onGeometryChange, true);
+		cancelScheduledFrame();
+		geometryDirty = false;
+		pendingPointer = void 0;
+		session = void 0;
+	}
+	function onPointerMove(event) {
+		if (!isCurrentPointer(event)) return;
+		pendingPointer = {
+			clientX: event.clientX,
+			clientY: event.clientY
+		};
+		scheduleUpdate();
+	}
+	function onPointerEnd(event) {
+		if (!isCurrentPointer(event)) return;
+		if (event.type === "pointerup") flushScheduledUpdate();
+		stopDragging();
 	}
 	function onPointerDown(event) {
-		if (readonly()) return;
+		if (readonly() || event.button !== 0 || event.isPrimary === false) return;
 		const el = target.value;
 		if (!el) return;
 		event.preventDefault();
 		(focusTarget?.value ?? el).focus();
-		updateFromPointer(event, el);
 		stopDragging();
-		dragWindow = el.ownerDocument.defaultView;
-		dragWindow?.addEventListener("pointermove", onPointerMove);
-		dragWindow?.addEventListener("pointerup", stopDragging);
-		dragWindow?.addEventListener("pointercancel", stopDragging);
+		const nextSession = {
+			element: el,
+			pointerId: getPointerId(event),
+			rect: el.getBoundingClientRect(),
+			view: el.ownerDocument.defaultView
+		};
+		session = nextSession;
+		geometryDirty = !isGeometryValid(nextSession.rect);
+		if (!geometryDirty) updateFromPointer({
+			clientX: event.clientX,
+			clientY: event.clientY
+		}, nextSession.rect);
+		if (session !== nextSession) return;
+		nextSession.view?.addEventListener("pointermove", onPointerMove);
+		nextSession.view?.addEventListener("pointerup", onPointerEnd);
+		nextSession.view?.addEventListener("pointercancel", onPointerEnd);
+		nextSession.view?.addEventListener("resize", onGeometryChange);
+		nextSession.view?.addEventListener("scroll", onGeometryChange, true);
 	}
 	onBeforeUnmount(stopDragging);
 	return { onPointerDown };
 }
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<div data-v-0ff88f34 class=rp-color-picker__saturation role=group><input data-v-0ff88f34 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--saturation\"type=range min=0 max=100 step=1 aria-label=Saturation aria-orientation=horizontal><input data-v-0ff88f34 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--value\"type=range min=0 max=100 step=1 aria-label=Value aria-orientation=vertical><span data-v-0ff88f34 class=rp-color-picker__surface aria-hidden=true></span><span data-v-0ff88f34 class=rp-color-picker__handle aria-hidden=true>", 1);
+var t0$2 = template("<div data-v-ae77cf79 class=rp-color-picker__saturation role=group><input data-v-ae77cf79 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--saturation\"type=range min=0 max=100 step=1 aria-label=Saturation aria-orientation=horizontal><input data-v-ae77cf79 class=\"rp-color-picker__axis-input rp-color-picker__axis-input--value\"type=range min=0 max=100 step=1 aria-label=Value aria-orientation=vertical><span data-v-ae77cf79 class=rp-color-picker__surface aria-hidden=true></span><span data-v-ae77cf79 class=rp-color-picker__handle aria-hidden=true>", 1);
 delegateEvents("input", "keydown", "pointerdown");
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue
@@ -226,8 +306,7 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 				value: normalizedValue
 			});
 		}
-		function updateFromPointer(e, el) {
-			const rect = el.getBoundingClientRect();
+		function updateFromPointer(e, rect) {
 			if (rect.width <= 0 || rect.height <= 0) return;
 			updateValue((e.clientX - rect.left) / rect.width * 100, 100 - (e.clientY - rect.top) / rect.height * 100);
 		}
@@ -235,6 +314,7 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			target: saturationRef,
 			focusTarget: saturationInputRef,
 			readonly: () => props.readonly,
+			isGeometryValid: (rect) => rect.width > 0 && rect.height > 0,
 			updateFromPointer
 		});
 		function onAxisKeydown(event, axis) {
@@ -312,10 +392,10 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 		});
 		return n2;
 	}
-}), [["__scopeId", "data-v-0ff88f34"]]);
+}), [["__scopeId", "data-v-ae77cf79"]]);
 //#endregion
 //#region src/components/color-picker/color-picker-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<div data-v-d0c81f73 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-d0c81f73 aria-hidden=true></span><span data-v-d0c81f73 aria-hidden=true>", 1);
+var t0$1 = template("<div data-v-2de2d9f2 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-2de2d9f2 aria-hidden=true></span><span data-v-2de2d9f2 aria-hidden=true>", 1);
 delegateEvents("pointerdown", "keydown");
 //#endregion
 //#region src/components/color-picker/color-picker-slider.vue
@@ -357,14 +437,14 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			if (normalizedNextValue === currentOutputValue.value) return;
 			emit("update:value", normalizedNextValue);
 		}
-		function updateFromPointer(e, el) {
-			const rect = el.getBoundingClientRect();
+		function updateFromPointer(e, rect) {
 			if (rect.width <= 0) return;
 			updateValue((e.clientX - rect.left) / rect.width * max.value);
 		}
 		const { onPointerDown } = useColorPickerDrag({
 			target: sliderRef,
 			readonly: () => props.readonly,
+			isGeometryValid: (rect) => rect.width > 0,
 			updateFromPointer
 		});
 		function onKeydown(e) {
@@ -415,7 +495,7 @@ var color_picker_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 		});
 		return n2;
 	}
-}), [["__scopeId", "data-v-d0c81f73"]]);
+}), [["__scopeId", "data-v-2de2d9f2"]]);
 //#endregion
 //#region src/components/color-picker/useColorPickerSwatches.ts
 var MAX_SWATCHES_PER_ROW = 15;

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

@@ -1,4 +1,4 @@
-import { AccordionItemProps } from './types';
+import { AccordionItemProps } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<AccordionItemProps> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -7,8 +7,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     attrs: any;
     slots: {
         trigger?: (props: {
-            triggerProps: import('./types').AccordionTriggerProps;
-            value: import('./types').AccordionItemValue;
+            triggerProps: import('./types.js').AccordionTriggerProps;
+            value: import('./types.js').AccordionItemValue;
             isOpen: boolean;
             disabled: boolean;
             open: () => void;
@@ -19,7 +19,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
         title?: (props: {}) => any;
     } & {
         default?: (props: {
-            value: import('./types').AccordionItemValue;
+            value: import('./types.js').AccordionItemValue;
             isOpen: boolean;
             disabled: boolean;
             open: () => void;

package/dist/components/accordion/accordion.d.ts

@@ -1,4 +1,4 @@
-import { AccordionModelValue, AccordionProps } from './types';
+import { AccordionModelValue, AccordionProps } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<AccordionProps & {
         "onUpdate:modelValue"?: ((value: AccordionModelValue) => any) | undefined;

package/dist/components/accordion/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Accordion } from './accordion';
-export { default as AccordionItem } from './accordion-item';
-export { useAccordion, useAccordionItem } from './useAccordion';
-export type { AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionOrientation, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types';
+export { default as Accordion } from './accordion.js';
+export { default as AccordionItem } from './accordion-item.js';
+export { useAccordion, useAccordionItem } from './useAccordion.js';
+export type { AccordionContentProps, AccordionContext, AccordionItemProps, AccordionItemRootProps, AccordionItemSlotProps, AccordionItemTriggerSlotProps, AccordionItemValue, AccordionModelValue, AccordionOrientation, AccordionProps, AccordionRootProps, AccordionState, AccordionTriggerProps, UseAccordionItemReturn, UseAccordionReturn, } from './types.js';

package/dist/components/accordion/types.d.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, InjectionKey } from 'vue';
-import { CollapseContentProps, CollapseContentRole, CollapseTriggerProps } from '../collapse/types';
+import { CollapseContentProps, CollapseContentRole, CollapseTriggerProps } from '../collapse/types.js';
 export type AccordionItemValue = string | number;
 export type AccordionModelValue = AccordionItemValue | AccordionItemValue[] | null;
 export type AccordionOrientation = 'vertical' | 'horizontal';

package/dist/components/accordion/useAccordion.d.ts

@@ -1,3 +1,3 @@
-import { AccordionItemProps, AccordionModelValue, AccordionProps, UseAccordionItemReturn, UseAccordionReturn } from './types';
+import { AccordionItemProps, AccordionModelValue, AccordionProps, UseAccordionItemReturn, UseAccordionReturn } from './types.js';
 export declare function useAccordion(props: Readonly<AccordionProps>, emitUpdate: (value: AccordionModelValue) => void): UseAccordionReturn;
 export declare function useAccordionItem(props: Readonly<AccordionItemProps>): UseAccordionItemReturn;

package/dist/components/alert/alert.d.ts

@@ -1,4 +1,4 @@
-import { AlertProps } from './types';
+import { AlertProps } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<AlertProps & {
         "onUpdate:open"?: ((value: boolean) => any) | undefined;

package/dist/components/alert/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Alert } from './alert';
-export { alertColors, alertRadiuses, alertVariants } from './types';
-export type { AlertColor, AlertProps, AlertRadius, AlertRole, AlertVariant } from './types';
+export { default as Alert } from './alert.js';
+export { alertColors, alertRadiuses, alertVariants } from './types.js';
+export type { AlertColor, AlertProps, AlertRadius, AlertRole, AlertVariant } from './types.js';

package/dist/components/alert/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentColorValue } from '../../utils/componentColors';
+import { ComponentColorValue } from '../../utils/componentColors.js';
 export declare const alertColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const alertVariants: readonly ["subtle", "surface", "outline", "solid"];
 export declare const alertRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl"];

package/dist/components/alert/useAlertColor.d.ts

@@ -1,3 +1,3 @@
 import { CSSProperties } from 'vue';
-import { AlertColor, AlertVariant } from './types';
+import { AlertColor, AlertVariant } from './types.js';
 export declare function getAlertColorStyle(color: AlertColor | undefined, variant: AlertVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;

package/dist/components/aspect-ratio/aspect-ratio.d.ts

@@ -1,4 +1,4 @@
-import { AspectRatioProps } from './types';
+import { AspectRatioProps } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<AspectRatioProps> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/components/aspect-ratio/index.d.ts

@@ -1,2 +1,2 @@
-export { default as AspectRatio } from './aspect-ratio';
-export type { AspectRatioProps } from './types';
+export { default as AspectRatio } from './aspect-ratio.js';
+export type { AspectRatioProps } from './types.js';

package/dist/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import { AvatarProps } from './types';
+import { AvatarProps } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<AvatarProps & {
         onLoad?: ((event: Event) => any) | undefined;

package/dist/components/avatar/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Avatar } from './avatar';
-export { avatarColors, avatarRadiuses, avatarSizes, avatarVariants } from './types';
-export type { AvatarColor, AvatarProps, AvatarRadius, AvatarSize, AvatarVariant } from './types';
+export { default as Avatar } from './avatar.js';
+export { avatarColors, avatarRadiuses, avatarSizes, avatarVariants } from './types.js';
+export type { AvatarColor, AvatarProps, AvatarRadius, AvatarSize, AvatarVariant } from './types.js';

package/dist/components/avatar/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentColorValue } from '../../utils/componentColors';
+import { ComponentColorValue } from '../../utils/componentColors.js';
 export declare const avatarColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const avatarSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const avatarRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];

package/dist/components/avatar/useAvatarColor.d.ts

@@ -1,3 +1,3 @@
 import { CSSProperties } from 'vue';
-import { AvatarColor, AvatarVariant } from './types';
+import { AvatarColor, AvatarVariant } from './types.js';
 export declare function getAvatarColorStyle(color: AvatarColor | undefined, variant: AvatarVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;

package/dist/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
-import { BadgeProps } from './types';
+import { BadgeProps } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<BadgeProps> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/components/badge/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Badge } from './badge';
-export { badgeColors, badgeRadiuses, badgeSizes, badgeVariants } from './types';
-export type { BadgeColor, BadgeProps, BadgeRadius, BadgeSize, BadgeVariant } from './types';
+export { default as Badge } from './badge.js';
+export { badgeColors, badgeRadiuses, badgeSizes, badgeVariants } from './types.js';
+export type { BadgeColor, BadgeProps, BadgeRadius, BadgeSize, BadgeVariant } from './types.js';

package/dist/components/badge/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentColorValue } from '../../utils/componentColors';
+import { ComponentColorValue } from '../../utils/componentColors.js';
 export declare const badgeColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
 export declare const badgeSizes: readonly ["xs", "sm", "md", "lg", "xl"];
 export declare const badgeRadiuses: readonly ["none", "xs", "sm", "md", "lg", "xl", "full"];

package/dist/components/badge/useBadgeColor.d.ts

@@ -1,3 +1,3 @@
 import { CSSProperties } from 'vue';
-import { BadgeColor, BadgeVariant } from './types';
+import { BadgeColor, BadgeVariant } from './types.js';
 export declare function getBadgeColorStyle(color: BadgeColor | undefined, variant: BadgeVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;

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

@@ -1,4 +1,4 @@
-import { ButtonProps } from './types';
+import { ButtonProps } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<ButtonProps> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;