ropav 0.1.6 → 0.1.7

package/dist/collapse.css

@@ -1,16 +1,16 @@
 @layer ropav.components {
-.rp-collapse[data-v-06c57838] {
+.rp-collapse[data-v-13f319ff] {
     --_rp-collapse-duration: var(--rp-transition-fast);
     display: block;
     min-width: 0;
     font-family: var(--rp-font-family);
     color: var(--rp-color-text);
 }
-.rp-collapse--disabled[data-v-06c57838] {
+.rp-collapse--disabled[data-v-13f319ff] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-collapse__content[data-v-06c57838] {
+.rp-collapse__content[data-v-13f319ff] {
     box-sizing: border-box;
     display: grid;
     min-width: 0;
@@ -21,13 +21,13 @@
     grid-template-rows: 1fr;
     transition: grid-template-rows var(--_rp-collapse-duration), opacity var(--_rp-collapse-duration);
 }
-.rp-collapse__inner[data-v-06c57838] {
+.rp-collapse__inner[data-v-13f319ff] {
     min-height: 0;
     min-width: 0;
     overflow: hidden;
 }
-.rp-collapse-content-enter-from[data-v-06c57838],
-  .rp-collapse-content-leave-to[data-v-06c57838] {
+.rp-collapse-content-enter-from[data-v-13f319ff],
+  .rp-collapse-content-leave-to[data-v-13f319ff] {
     opacity: 0;
     grid-template-rows: 0fr;
 }

package/dist/collapse.js

@@ -1,11 +1,12 @@
 import './collapse.css';
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as useCollapse } from "./useCollapse.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/collapse/collapse.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-06c57838><div data-v-06c57838 class=rp-collapse__inner>");
-var t1 = template("<div data-v-06c57838>", 1);
+var t0 = template("<div data-v-13f319ff><div data-v-13f319ff class=rp-collapse__inner>");
+var t1 = template("<div data-v-13f319ff>", 1);
 //#endregion
 //#region src/components/collapse/collapse.vue
 var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -43,7 +44,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			...internalRootProps.value,
-			"data-disabled": presence(isDisabled.value)
+			"data-disabled": toPresenceAttribute(isDisabled.value)
 		}));
 		const publicTriggerProps = computed(() => {
 			const partAttrs = getPartAttrs("trigger");
@@ -52,7 +53,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				...props.classNames?.trigger !== void 0 ? { class: partAttrs.class } : {},
 				...props.styles?.trigger !== void 0 ? { style: partAttrs.style } : {},
 				"data-state": state.value,
-				"data-disabled": presence(isDisabled.value)
+				"data-disabled": toPresenceAttribute(isDisabled.value)
 			};
 		});
 		const publicTriggerSlotProps = computed(() => ({
@@ -81,7 +82,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		}, { _: 8 }));
 		return n7;
 	}
-}), [["__scopeId", "data-v-06c57838"]]);
+}), [["__scopeId", "data-v-13f319ff"]]);
 //#endregion
 //#region src/components/collapse/types.ts
 var collapseParts = [

package/dist/collectionNavigation.js

@@ -1,101 +1,4 @@
-import { onBeforeUnmount } from "vue";
-//#region src/internal/composables/useTypeahead.ts
-var DEFAULT_TYPEAHEAD_TIMEOUT = 1e3;
-var COMBINING_MARKS = /\p{M}/gu;
-var WHITESPACE = /\s+/g;
-function normalizeTypeaheadText(value, locales) {
-	return value.toLocaleLowerCase(locales).normalize("NFKD").replace(COMBINING_MARKS, "").replace(WHITESPACE, " ").trim();
-}
-function isRepeatedQuery(query) {
-	const characters = [...query];
-	return characters.length > 1 && characters.every((character) => character === characters[0]);
-}
-function useTypeahead(options) {
-	let buffer = "";
-	let timer;
-	let lastMatch;
-	let currentScope = options.scopeKey?.();
-	const isDisabled = options.isDisabled ?? (() => false);
-	function clearTimer() {
-		if (timer !== void 0) clearTimeout(timer);
-		timer = void 0;
-	}
-	function reset() {
-		clearTimer();
-		buffer = "";
-		lastMatch = void 0;
-		currentScope = options.scopeKey?.();
-	}
-	function scheduleReset() {
-		clearTimer();
-		timer = setTimeout(reset, options.timeout ?? DEFAULT_TYPEAHEAD_TIMEOUT);
-	}
-	function hasBuffer() {
-		return buffer.length > 0;
-	}
-	function getMatchIndex(query, startIndex, keepCurrent) {
-		const items = options.items();
-		if (items.length === 0) return -1;
-		function matches(index) {
-			const item = items[index];
-			return Boolean(item && !isDisabled(item) && normalizeTypeaheadText(options.getTextValue(item)).startsWith(query));
-		}
-		if (keepCurrent && startIndex >= 0 && matches(startIndex)) return startIndex;
-		for (let offset = 1; offset <= items.length; offset += 1) {
-			const index = (startIndex + offset + items.length) % items.length;
-			if (matches(index)) return index;
-		}
-		return -1;
-	}
-	function getLastMatchIndex(items) {
-		const match = lastMatch;
-		if (!match) return -1;
-		if (Object.is(items[match.index], match.item)) return match.index;
-		const identityIndex = items.findIndex((item) => Object.is(item, match.item));
-		if (identityIndex >= 0) return identityIndex;
-		let keyIndex = -1;
-		for (let index = 0; index < items.length; index += 1) {
-			if (!Object.is(options.getKey(items[index]), match.key)) continue;
-			if (keyIndex >= 0) return -1;
-			keyIndex = index;
-		}
-		return keyIndex;
-	}
-	function handleKey(event) {
-		const nextScope = options.scopeKey?.();
-		if (!Object.is(currentScope, nextScope)) reset();
-		currentScope = nextScope;
-		if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing || [...event.key].length !== 1 || event.key === " " && !hasBuffer()) return false;
-		event.preventDefault();
-		buffer += event.key;
-		scheduleReset();
-		const normalizedBuffer = normalizeTypeaheadText(buffer);
-		if (!normalizedBuffer) return true;
-		const repeated = isRepeatedQuery(normalizedBuffer);
-		const query = repeated ? [...normalizedBuffer][0] : normalizedBuffer;
-		const items = options.items();
-		const lastMatchIndex = getLastMatchIndex(items);
-		const matchIndex = getMatchIndex(query, lastMatchIndex >= 0 ? lastMatchIndex : options.activeIndex(), !repeated && [...query].length > 1);
-		if (matchIndex < 0) return true;
-		const item = items[matchIndex];
-		if (!item) return true;
-		lastMatch = {
-			item,
-			index: matchIndex,
-			key: options.getKey(item)
-		};
-		options.onMatch(item, matchIndex);
-		return true;
-	}
-	onBeforeUnmount(clearTimer);
-	return {
-		handleKey,
-		hasBuffer,
-		reset
-	};
-}
-//#endregion
-//#region src/internal/composables/collectionNavigation.ts
+//#region src/utils/collectionNavigation.ts
 function getEnabledIndexes(items, isDisabled) {
 	return items.map((item, index) => isDisabled(item) ? -1 : index).filter((index) => index >= 0);
 }
@@ -117,4 +20,4 @@ function getNextEnabledIndex(items, currentIndex, direction, isDisabled, loop =
 	return direction === 1 ? enabledIndexes[0] : enabledIndexes[enabledIndexes.length - 1];
 }
 //#endregion
-export { getNextEnabledIndex as n, useTypeahead as r, getEnabledIndexes as t };
+export { getNextEnabledIndex as n, getEnabledIndexes as t };

package/dist/color-input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-color-input[data-v-19e2ebe7] {
+.rp-color-input[data-v-fe0168d1] {
     --_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(
@@ -18,42 +18,42 @@
     font-family: var(--rp-font-family);
     vertical-align: middle;
 }
-.rp-color-input--size-xs[data-v-19e2ebe7] {
+.rp-color-input--size-xs[data-v-fe0168d1] {
     --_rp-color-input-height: var(--rp-size-control-xs);
 }
-.rp-color-input--size-sm[data-v-19e2ebe7] {
+.rp-color-input--size-sm[data-v-fe0168d1] {
     --_rp-color-input-height: var(--rp-size-control-sm);
 }
-.rp-color-input--size-md[data-v-19e2ebe7] {
+.rp-color-input--size-md[data-v-fe0168d1] {
     --_rp-color-input-height: var(--rp-size-control-md);
 }
-.rp-color-input--size-lg[data-v-19e2ebe7] {
+.rp-color-input--size-lg[data-v-fe0168d1] {
     --_rp-color-input-height: var(--rp-size-control-lg);
 }
-.rp-color-input--size-xl[data-v-19e2ebe7] {
+.rp-color-input--size-xl[data-v-fe0168d1] {
     --_rp-color-input-height: var(--rp-size-control-xl);
 }
-html.dark .rp-color-input[data-v-19e2ebe7], [data-rp-color-scheme=dark] .rp-color-input[data-v-19e2ebe7] {
+html.dark .rp-color-input[data-v-fe0168d1], [data-rp-color-scheme=dark] .rp-color-input[data-v-fe0168d1] {
     --_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-19e2ebe7] .rp-input {
+.rp-color-input[data-v-fe0168d1] .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-19e2ebe7] .rp-popover__content {
+.rp-color-input[data-v-fe0168d1] .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-19e2ebe7] .rp-color-picker {
+.rp-color-input[data-v-fe0168d1] .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-19e2ebe7] {
+.rp-color-input__preview[data-v-fe0168d1] {
     --_rp-color-swatch-radius: 50%;
     width: var(--_rp-color-input-preview-size);
     height: var(--_rp-color-input-preview-size);
@@ -61,14 +61,14 @@ html.dark .rp-color-input[data-v-19e2ebe7], [data-rp-color-scheme=dark] .rp-colo
     border-radius: 50%;
     pointer-events: none;
 }
-.rp-color-input__preview--empty[data-v-19e2ebe7] {
+.rp-color-input__preview--empty[data-v-fe0168d1] {
     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-19e2ebe7] {
+.rp-color-input__eye-dropper[data-v-fe0168d1] {
     padding: 0;
     font: inherit;
     background: none;
@@ -81,29 +81,29 @@ html.dark .rp-color-input[data-v-19e2ebe7], [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-19e2ebe7]:hover:not(:disabled) {
+.rp-color-input__eye-dropper[data-v-fe0168d1]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
 }
-.rp-color-input__eye-dropper[data-v-19e2ebe7]:focus-visible {
+.rp-color-input__eye-dropper[data-v-fe0168d1]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-color-input__eye-dropper[data-v-19e2ebe7]:disabled {
+.rp-color-input__eye-dropper[data-v-fe0168d1]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-color-input__eye-dropper-icon[data-v-19e2ebe7] {
+.rp-color-input__eye-dropper-icon[data-v-fe0168d1] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-color-input__eye-dropper-icon svg[data-v-19e2ebe7] {
+.rp-color-input__eye-dropper-icon svg[data-v-fe0168d1] {
     width: 100%;
     height: 100%;
 }
-.rp-color-input__eye-dropper-icon[data-v-19e2ebe7] >  svg {
+.rp-color-input__eye-dropper-icon[data-v-fe0168d1] >  svg {
     width: 100%;
     height: 100%;
 }

package/dist/color-input.js

@@ -1,12 +1,15 @@
 import './color-input.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { a as useTextFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
+import { r as parseAriaIdRefs, t as hasAriaIdRef } from "./aria.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as color_swatch_default } from "./color-swatch.js";
-import { n as formatColorPickerValue, r as parseColorPickerValue, t as color_picker_default } from "./color-picker.js";
+import { i as parseColorPickerValue, r as formatColorPickerValue, t as color_picker_default } from "./color-picker.js";
+import { i as isNodeWithinElement } from "./events.js";
 import { t as input_default } from "./input.js";
 import { t as popover_default } from "./popover.js";
 import { child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, markRaw, nextTick, on, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, withModifiers } from "vue";
@@ -60,7 +63,7 @@ function onInputKeydown(event, popover) {
 	if (event.key === "Escape") popover.triggerProps.onKeydown(event);
 }
 function focusPickerFromTrigger(trigger) {
-	const contentId = trigger?.getAttribute("aria-controls")?.split(/\s+/).find(Boolean);
+	const contentId = parseAriaIdRefs(trigger?.getAttribute("aria-controls"))[0];
 	const picker = contentId ? trigger?.ownerDocument.getElementById(contentId)?.querySelector(".rp-color-picker") : null;
 	if (!picker) return;
 	(Boolean(picker.querySelector(".rp-color-picker__saturation")) ? picker.querySelector("input:not(:disabled), button:not(:disabled), [tabindex=\"0\"]") : picker.querySelector("[role=\"radio\"][aria-checked=\"true\"]") ?? picker.querySelector("[role=\"radio\"][tabindex=\"0\"]"))?.focus({ preventScroll: true });
@@ -70,7 +73,7 @@ function onPickerKeydown(event, popover) {
 	const pickerRoot = event.currentTarget;
 	const content = pickerRoot instanceof Element ? pickerRoot.closest("[role=\"dialog\"]") : null;
 	const contentId = content?.id;
-	const focusTarget = contentId ? [...content.ownerDocument.querySelectorAll("[aria-controls]")].find((element) => element.getAttribute("aria-controls")?.split(/\s+/).includes(contentId)) : void 0;
+	const focusTarget = contentId ? [...content.ownerDocument.querySelectorAll("[aria-controls]")].find((element) => hasAriaIdRef(element.getAttribute("aria-controls"), contentId)) : void 0;
 	event.stopPropagation();
 	focusTarget?.focus({ preventScroll: true });
 	popover.close();
@@ -109,9 +112,7 @@ function useColorInputPopover(getInputAttrs) {
 		closePicker = slotProps.close;
 	}
 	function onFocusOut(event) {
-		const root = event.currentTarget;
-		const nextTarget = event.relatedTarget;
-		if (root instanceof HTMLElement && nextTarget instanceof Node && root.contains(nextTarget)) return;
+		if (isNodeWithinElement(event.relatedTarget, event.currentTarget)) return;
 		closePicker?.();
 	}
 	return {
@@ -183,8 +184,8 @@ function useColorInput(props, emit, getValue = () => props.modelValue ?? "") {
 }
 //#endregion
 //#region src/components/color-input/color-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-19e2ebe7>");
-var t1 = template("<button data-v-19e2ebe7><span data-v-19e2ebe7 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
+var t0 = template("<span data-v-fe0168d1>");
+var t1 = template("<button data-v-fe0168d1><span data-v-fe0168d1 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({
@@ -279,9 +280,9 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		useTextFormControl(() => inputComponentRef.value?.nativeElement, controllable, () => effectiveValidationMessage.value);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
-			"data-disabled": presence(control.disabled),
-			"data-readonly": presence(props.readonly),
-			"data-invalid": presence(isInvalid.value),
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-readonly": toPresenceAttribute(props.readonly),
+			"data-invalid": toPresenceAttribute(isInvalid.value),
 			onFocusout: onFocusOut
 		}));
 		const popoverClassNames = computed(() => ({
@@ -417,7 +418,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-19e2ebe7"]]);
+}), [["__scopeId", "data-v-fe0168d1"]]);
 //#endregion
 //#region src/components/color-input/types.ts
 var colorInputParts = [

package/dist/color-picker.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-color-picker__saturation[data-v-22669f8e] {
+.rp-color-picker__saturation[data-v-9c7fa05b] {
     position: relative;
     box-sizing: border-box;
     width: var(--_rp-color-picker-control-width);
@@ -10,13 +10,13 @@
     touch-action: none;
     cursor: crosshair;
 }
-.rp-color-picker__saturation[data-v-22669f8e]:focus-visible {
+.rp-color-picker__saturation[data-v-9c7fa05b]:focus-visible {
     outline: none;
 }
-.rp-color-picker__saturation[data-readonly][data-v-22669f8e] {
+.rp-color-picker__saturation[data-readonly][data-v-9c7fa05b] {
     cursor: default;
 }
-.rp-color-picker__axis-input[data-v-22669f8e] {
+.rp-color-picker__axis-input[data-v-9c7fa05b] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -28,10 +28,10 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-22669f8e] {
+.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-9c7fa05b] {
     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-22669f8e] {
+.rp-color-picker__surface[data-v-9c7fa05b] {
     position: absolute;
     inset: calc(-1 * var(--_rp-color-picker-thumb-radius));
     overflow: hidden;
@@ -39,7 +39,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-22669f8e] {
+.rp-color-picker__handle[data-v-9c7fa05b] {
     position: absolute;
     top: var(--_rp-color-picker-saturation-y);
     left: var(--_rp-color-picker-saturation-x);
@@ -55,7 +55,7 @@
     transform: translate(-50%, -50%);
 }
 }@layer ropav.components {
-.rp-color-picker__hue[data-v-0299a505], .rp-color-picker__opacity[data-v-0299a505] {
+.rp-color-picker__hue[data-v-3a0ac9e0], .rp-color-picker__opacity[data-v-3a0ac9e0] {
     position: relative;
     box-sizing: border-box;
     width: var(--_rp-color-picker-control-width);
@@ -65,22 +65,22 @@
     touch-action: none;
     cursor: pointer;
 }
-.rp-color-picker__hue[data-v-0299a505]:focus-visible, .rp-color-picker__opacity[data-v-0299a505]:focus-visible {
+.rp-color-picker__hue[data-v-3a0ac9e0]:focus-visible, .rp-color-picker__opacity[data-v-3a0ac9e0]:focus-visible {
     outline: none;
 }
-.rp-color-picker__hue[data-readonly][data-v-0299a505], .rp-color-picker__opacity[data-readonly][data-v-0299a505] {
+.rp-color-picker__hue[data-readonly][data-v-3a0ac9e0], .rp-color-picker__opacity[data-readonly][data-v-3a0ac9e0] {
     cursor: default;
 }
-.rp-color-picker__hue:focus-visible .rp-color-picker__slider-handle[data-v-0299a505], .rp-color-picker__opacity:focus-visible .rp-color-picker__slider-handle[data-v-0299a505] {
+.rp-color-picker__hue:focus-visible .rp-color-picker__slider-handle[data-v-3a0ac9e0], .rp-color-picker__opacity:focus-visible .rp-color-picker__slider-handle[data-v-3a0ac9e0] {
     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-0299a505] {
+.rp-color-picker__hue[data-v-3a0ac9e0] {
     margin-block-start: var(--_rp-color-picker-saturation-slider-gap);
 }
-.rp-color-picker__opacity[data-v-0299a505] {
+.rp-color-picker__opacity[data-v-3a0ac9e0] {
     margin-block-start: var(--_rp-color-picker-slider-gap);
 }
-.rp-color-picker__slider-surface[data-v-0299a505] {
+.rp-color-picker__slider-surface[data-v-3a0ac9e0] {
     position: absolute;
     top: 50%;
     right: calc(-1 * var(--_rp-color-picker-thumb-radius));
@@ -91,20 +91,20 @@
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
     transform: translateY(-50%);
 }
-.rp-color-picker__hue-surface[data-v-0299a505] {
+.rp-color-picker__hue-surface[data-v-3a0ac9e0] {
     background: hsl(0, 100%, 50%);
 }
-.rp-color-picker__hue-surface[data-v-0299a505]::before {
+.rp-color-picker__hue-surface[data-v-3a0ac9e0]::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-0299a505] {
+.rp-color-picker__opacity-surface[data-v-3a0ac9e0] {
     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-0299a505] {
+.rp-color-picker__slider-handle[data-v-3a0ac9e0] {
     position: absolute;
     top: 50%;
     left: var(--_rp-color-picker-slider-x);
@@ -118,14 +118,14 @@
     pointer-events: none;
     transform: translate(-50%, -50%);
 }
-.rp-color-picker__hue-handle[data-v-0299a505] {
+.rp-color-picker__hue-handle[data-v-3a0ac9e0] {
     background-color: hsl(var(--_rp-color-picker-hue), 100%, 50%);
 }
-.rp-color-picker__opacity-handle[data-v-0299a505] {
+.rp-color-picker__opacity-handle[data-v-3a0ac9e0] {
     background-color: var(--_rp-color-picker-opacity-color);
 }
 }@layer ropav.components {
-.rp-color-picker[data-v-41c4ca07] {
+.rp-color-picker[data-v-7fe38e4e] {
     --_rp-color-picker-saturation-width: 220px;
     --_rp-color-picker-saturation-height: 160px;
     --_rp-color-picker-hue-height: 14px;
@@ -168,14 +168,14 @@
     user-select: none;
     vertical-align: top;
 }
-html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-color-picker[data-v-41c4ca07] {
+html.dark .rp-color-picker[data-v-7fe38e4e], [data-rp-color-scheme=dark] .rp-color-picker[data-v-7fe38e4e] {
     --_rp-color-picker-checkerboard-tile: var(--rp-color-dark-6);
     --_rp-color-picker-checkerboard-tile-alt: var(--rp-color-dark-4);
 }
-.rp-color-picker--readonly[data-v-41c4ca07] {
+.rp-color-picker--readonly[data-v-7fe38e4e] {
     cursor: default;
 }
-.rp-color-picker--size-xs[data-v-41c4ca07] {
+.rp-color-picker--size-xs[data-v-7fe38e4e] {
     --_rp-color-picker-saturation-width: 160px;
     --_rp-color-picker-saturation-height: 120px;
     --_rp-color-picker-hue-height: 10px;
@@ -188,7 +188,7 @@ html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-col
     --_rp-color-picker-thumb-size: 10px;
     --_rp-color-picker-font-size: var(--rp-font-size-xs);
 }
-.rp-color-picker--size-sm[data-v-41c4ca07] {
+.rp-color-picker--size-sm[data-v-7fe38e4e] {
     --_rp-color-picker-saturation-width: 190px;
     --_rp-color-picker-saturation-height: 140px;
     --_rp-color-picker-hue-height: 12px;
@@ -201,7 +201,7 @@ html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-col
     --_rp-color-picker-thumb-size: 12px;
     --_rp-color-picker-font-size: var(--rp-font-size-sm);
 }
-.rp-color-picker--size-md[data-v-41c4ca07] {
+.rp-color-picker--size-md[data-v-7fe38e4e] {
     --_rp-color-picker-saturation-width: 220px;
     --_rp-color-picker-saturation-height: 160px;
     --_rp-color-picker-hue-height: 14px;
@@ -214,7 +214,7 @@ html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-col
     --_rp-color-picker-thumb-size: 14px;
     --_rp-color-picker-font-size: var(--rp-font-size-md);
 }
-.rp-color-picker--size-lg[data-v-41c4ca07] {
+.rp-color-picker--size-lg[data-v-7fe38e4e] {
     --_rp-color-picker-saturation-width: 260px;
     --_rp-color-picker-saturation-height: 190px;
     --_rp-color-picker-hue-height: 18px;
@@ -227,7 +227,7 @@ html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-col
     --_rp-color-picker-thumb-size: 18px;
     --_rp-color-picker-font-size: var(--rp-font-size-lg);
 }
-.rp-color-picker--size-xl[data-v-41c4ca07] {
+.rp-color-picker--size-xl[data-v-7fe38e4e] {
     --_rp-color-picker-saturation-width: 300px;
     --_rp-color-picker-saturation-height: 220px;
     --_rp-color-picker-hue-height: 22px;
@@ -240,7 +240,7 @@ html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-col
     --_rp-color-picker-thumb-size: 22px;
     --_rp-color-picker-font-size: var(--rp-font-size-xl);
 }
-.rp-color-picker__label[data-v-41c4ca07] {
+.rp-color-picker__label[data-v-7fe38e4e] {
     display: block;
     overflow: hidden;
     color: var(--rp-color-text);
@@ -248,24 +248,24 @@ html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-col
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.rp-color-picker__header[data-v-41c4ca07] {
+.rp-color-picker__header[data-v-7fe38e4e] {
     margin-block-end: var(--_rp-color-picker-header-gap);
 }
-.rp-color-picker__swatches[data-v-41c4ca07] {
+.rp-color-picker__swatches[data-v-7fe38e4e] {
     display: flex;
     flex-wrap: wrap;
     gap: var(--_rp-color-picker-swatches-gap);
 }
-.rp-color-picker__swatches[data-with-picker=true][data-v-41c4ca07] {
+.rp-color-picker__swatches[data-with-picker=true][data-v-7fe38e4e] {
     margin-block-start: var(--_rp-color-picker-swatches-margin);
 }
-.rp-color-picker__swatches[data-fill=true][data-v-41c4ca07] {
+.rp-color-picker__swatches[data-fill=true][data-v-7fe38e4e] {
     display: grid;
     grid-template-columns: repeat(var(--_rp-color-picker-swatches-per-row), minmax(var(--_rp-color-picker-target-min-size), 1fr));
     width: 100%;
     overflow-x: auto;
 }
-.rp-color-picker__swatch[data-v-41c4ca07] {
+.rp-color-picker__swatch[data-v-7fe38e4e] {
     position: relative;
     box-sizing: border-box;
     display: inline-flex;
@@ -283,27 +283,27 @@ html.dark .rp-color-picker[data-v-41c4ca07], [data-rp-color-scheme=dark] .rp-col
     box-shadow: none;
     line-height: 0;
 }
-.rp-color-picker__swatch[data-v-41c4ca07]:focus-visible {
+.rp-color-picker__swatch[data-v-7fe38e4e]:focus-visible {
     outline: none;
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-color-picker__swatch[data-v-41c4ca07]:disabled {
+.rp-color-picker__swatch[data-v-7fe38e4e]:disabled {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
     cursor: default;
 }
-.rp-color-picker__swatch[data-v-41c4ca07] >  .rp-color-swatch {
+.rp-color-picker__swatch[data-v-7fe38e4e] >  .rp-color-swatch {
     pointer-events: none;
 }
-.rp-color-picker__swatch-check[data-v-41c4ca07] {
+.rp-color-picker__swatch-check[data-v-7fe38e4e] {
     stroke-width: 3;
 }
-.rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-41c4ca07] {
+.rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-7fe38e4e] {
     width: 100%;
     aspect-ratio: 1;
 }
-.rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-41c4ca07] >  .rp-color-swatch {
+.rp-color-picker__swatches[data-fill=true] .rp-color-picker__swatch[data-v-7fe38e4e] >  .rp-color-swatch {
     width: 100%;
     height: 100%;
 }