ropav 0.1.6 → 0.1.8

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%;
 }