ropav 0.1.5 → 0.1.7

package/dist/color-swatch.js

@@ -1,9 +1,10 @@
 import './color-swatch.css';
-import { n as useStylesApi } from "./styles-api.js";
-import { t as parseCssColor } from "./color.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as parseCssColor } from "./color.js";
+import { t as toCssLength } from "./css.js";
 import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template } from "vue";
-//#region src/components/color-swatch/useColorSwatchColor.ts
+//#region src/components/color-swatch/colorSwatchColor.ts
 function getColorSwatchForeground(color) {
 	const background = parseCssColor(color);
 	if (!background) return "var(--rp-color-white)";
@@ -25,7 +26,7 @@ function getPerceivedBrightness({ red, green, blue }) {
 }
 //#endregion
 //#region src/components/color-swatch/color-swatch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-13032098><span data-v-13032098 class=rp-color-swatch__icon aria-hidden=true>", 1);
+var t0 = template("<span data-v-63bed4a0><span data-v-63bed4a0 class=rp-color-swatch__icon aria-hidden=true>", 1);
 //#endregion
 //#region src/components/color-swatch/color-swatch.vue
 var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -53,7 +54,7 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"--_rp-color-swatch-overlay-stroke": overlay.stroke,
 				"--_rp-color-swatch-overlay-shadow": overlay.shadow
 			};
-			if (props.size !== void 0) style["--_rp-color-swatch-size"] = normalizeSize(props.size);
+			if (props.size !== void 0) style["--_rp-color-swatch-size"] = toCssLength(props.size);
 			return style;
 		});
 		const rootAttrs = computed(() => getRootAttrs({
@@ -62,9 +63,6 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			role: rootRole.value,
 			"aria-label": rootAriaLabel.value
 		}));
-		function normalizeSize(size) {
-			return typeof size === "number" ? `${size}px` : size;
-		}
 		const n2 = t0();
 		const n1 = child(n2);
 		renderEffect(() => setDynamicProps(n2, [rootAttrs.value]));
@@ -72,6 +70,6 @@ var color_swatch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		createSlot("default", null, null, 1);
 		return n2;
 	}
-}), [["__scopeId", "data-v-13032098"]]);
+}), [["__scopeId", "data-v-63bed4a0"]]);
 //#endregion
 export { color_swatch_default as t };

package/dist/color.js

@@ -1,3 +1,4 @@
+import { i as roundTo, t as clamp } from "./number.js";
 //#region src/utils/color.ts
 var DEFAULT_OPACITY = 100;
 var NUMBER_SOURCE = String.raw`[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?`;
@@ -32,13 +33,13 @@ function parseHexColor(color) {
 		red: Number.parseInt(hex[0] + hex[0], 16),
 		green: Number.parseInt(hex[1] + hex[1], 16),
 		blue: Number.parseInt(hex[2] + hex[2], 16),
-		opacity: hex.length === 4 ? roundPercent(Number.parseInt(hex[3] + hex[3], 16) / 255 * 100) : DEFAULT_OPACITY
+		opacity: hex.length === 4 ? roundTo(Number.parseInt(hex[3] + hex[3], 16) / 255 * 100) : DEFAULT_OPACITY
 	};
 	return {
 		red: Number.parseInt(hex.slice(0, 2), 16),
 		green: Number.parseInt(hex.slice(2, 4), 16),
 		blue: Number.parseInt(hex.slice(4, 6), 16),
-		opacity: hex.length === 8 ? roundPercent(Number.parseInt(hex.slice(6, 8), 16) / 255 * 100) : DEFAULT_OPACITY
+		opacity: hex.length === 8 ? roundTo(Number.parseInt(hex.slice(6, 8), 16) / 255 * 100) : DEFAULT_OPACITY
 	};
 }
 function parseRgbColor(color) {
@@ -131,9 +132,9 @@ function parsePercentage(channel) {
 function parseAlpha(alpha) {
 	if (alpha === void 0) return DEFAULT_OPACITY;
 	const percentage = parsePercentage(alpha);
-	if (percentage != null) return roundPercent(percentage);
+	if (percentage != null) return roundTo(percentage);
 	const number = parseNumber(alpha);
-	return number == null ? void 0 : roundPercent(clamp(number, 0, 1) * 100);
+	return number == null ? void 0 : roundTo(clamp(number, 0, 1) * 100);
 }
 function parseNumber(value) {
 	const token = value.trim();
@@ -180,11 +181,5 @@ function hslToRgb(hue, saturation, lightness, opacity) {
 function normalizeHue(value) {
 	return (value % 360 + 360) % 360;
 }
-function roundPercent(value) {
-	return Math.round(value * 100) / 100;
-}
-function clamp(value, min, max) {
-	return Math.min(max, Math.max(min, value));
-}
 //#endregion
 export { parseCssColor as t };

package/dist/componentColors.js

@@ -61,6 +61,18 @@ function getComponentColorValue(color) {
 function getComponentContrastColor(color, options = {}) {
 	return getComponentContrastColorRoles(color, options).color;
 }
+function getComponentCheckedColorStyle({ color, colorProperty, checkedColorProperty, defaultColor = "primary", autoContrast, contrastColor }) {
+	const colorValue = getComponentColorValue(color);
+	if (color && !colorValue) return void 0;
+	if (!colorValue && autoContrast === false && contrastColor === void 0) return void 0;
+	const style = {};
+	if (colorValue) style[colorProperty] = colorValue;
+	if (autoContrast !== false || contrastColor !== void 0) style[checkedColorProperty] = getComponentContrastColor(color ?? defaultColor, {
+		autoContrast,
+		contrastColor
+	});
+	return style;
+}
 function getComponentContrastColorRoles(color, options = {}) {
 	if (options.contrastColor !== void 0) return createContrastColorRoles(options.contrastColor);
 	if (options.autoContrast === false) return createContrastColorRoles("var(--rp-color-white)");
@@ -76,8 +88,17 @@ function getComponentContrastColorRoles(color, options = {}) {
 }
 function getComponentColorRoles(color) {
 	const parsed = parseComponentColor(color);
-	if (parsed.kind === "empty" || parsed.kind === "invalid") return;
-	if (parsed.kind === "primary") return createComponentColorRoles("var(--rp-primary-color-filled)", {
+	switch (parsed.kind) {
+		case "empty":
+		case "invalid": return;
+		case "primary": return createPrimaryColorRoles();
+		case "preset": return createPresetColorRoles(parsed.color);
+		case "shade": return createShadeColorRoles(parsed.color, parsed.shade);
+		case "custom": return createCustomColorRoles(parsed.value);
+	}
+}
+function createPrimaryColorRoles() {
+	return createComponentColorRoles("var(--rp-primary-color-filled)", {
 		hover: "var(--rp-primary-color-filled-hover)",
 		contrast: "var(--rp-primary-color-contrast)",
 		light: "var(--rp-primary-color-light)",
@@ -86,118 +107,139 @@ function getComponentColorRoles(color) {
 		outlineHover: "color-mix(in srgb, var(--rp-primary-color-outline) 62%, transparent)",
 		foreground: "var(--rp-primary-color-light-color)"
 	});
-	if (parsed.kind === "preset") return createComponentColorRoles(`var(--rp-color-${parsed.color}-filled)`, {
-		hover: `var(--rp-color-${parsed.color}-filled-hover)`,
-		contrast: `var(--rp-color-${parsed.color}-contrast)`,
-		light: `var(--rp-color-${parsed.color}-light)`,
-		lightHover: `var(--rp-color-${parsed.color}-light-hover)`,
-		outline: `var(--rp-color-${parsed.color}-outline)`,
-		outlineHover: `color-mix(in srgb, var(--rp-color-${parsed.color}-outline) 62%, transparent)`,
-		foreground: `var(--rp-color-${parsed.color}-light-color)`
+}
+function createPresetColorRoles(color) {
+	return createComponentColorRoles(`var(--rp-color-${color}-filled)`, {
+		hover: `var(--rp-color-${color}-filled-hover)`,
+		contrast: `var(--rp-color-${color}-contrast)`,
+		light: `var(--rp-color-${color}-light)`,
+		lightHover: `var(--rp-color-${color}-light-hover)`,
+		outline: `var(--rp-color-${color}-outline)`,
+		outlineHover: `color-mix(in srgb, var(--rp-color-${color}-outline) 62%, transparent)`,
+		foreground: `var(--rp-color-${color}-light-color)`
 	});
-	if (parsed.kind === "shade") {
-		const base = `var(--rp-color-${parsed.color}-${parsed.shade})`;
-		const hoverShade = Math.min(Number(parsed.shade) + 1, 9);
-		return createComponentColorRoles(base, {
-			hover: `var(--rp-color-${parsed.color}-${hoverShade})`,
-			contrast: `var(--rp-color-${parsed.color}-${parsed.shade}-contrast)`,
-			contrastHover: `var(--rp-color-${parsed.color}-${hoverShade}-contrast)`,
-			contrastActive: `var(--rp-color-${parsed.color}-${parsed.shade}-active-contrast)`,
-			foreground: base
-		});
-	}
-	const contrast = getCustomContrastColorRoles(parsed.value);
-	return createComponentColorRoles(parsed.value, {
+}
+function createShadeColorRoles(color, shade) {
+	const base = `var(--rp-color-${color}-${shade})`;
+	const hoverShade = Math.min(Number(shade) + 1, 9);
+	return createComponentColorRoles(base, {
+		hover: `var(--rp-color-${color}-${hoverShade})`,
+		contrast: `var(--rp-color-${color}-${shade}-contrast)`,
+		contrastHover: `var(--rp-color-${color}-${hoverShade}-contrast)`,
+		contrastActive: `var(--rp-color-${color}-${shade}-active-contrast)`,
+		foreground: base
+	});
+}
+function createCustomColorRoles(color) {
+	const contrast = getCustomContrastColorRoles(color);
+	return createComponentColorRoles(color, {
 		contrast: contrast.color,
 		contrastHover: contrast.hover,
-		contrastActive: contrast.active
+		contrastActive: contrast.active,
+		foreground: getCustomForegroundColor(color)
 	});
 }
 function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast, contrastColor }) {
-	const roles = getComponentColorRoles(color ?? defaultColor);
+	const resolvedColor = color ?? defaultColor;
+	const roles = getComponentColorRoles(resolvedColor);
 	if (!roles) return void 0;
-	if (variant === "solid") {
-		const contrast = getComponentContrastColorRoles(color ?? defaultColor, {
-			autoContrast,
-			contrastColor
-		});
-		return {
-			background: roles.filled,
-			hover: roles.hover,
-			active: roles.active,
-			color: contrast.color,
-			colorHover: contrast.hover,
-			colorActive: contrast.active,
-			border: roles.filled,
-			borderHover: roles.hover,
-			borderActive: roles.active
-		};
+	if (variant === "solid") return createSolidVariantColorRoles(roles, getComponentContrastColorRoles(resolvedColor, {
+		autoContrast,
+		contrastColor
+	}));
+	return createForegroundVariantColorRoles(roles, variant);
+}
+function createSolidVariantColorRoles(roles, contrast) {
+	return {
+		background: roles.filled,
+		hover: roles.hover,
+		active: roles.active,
+		color: contrast.color,
+		colorHover: contrast.hover,
+		colorActive: contrast.active,
+		border: roles.filled,
+		borderHover: roles.hover,
+		borderActive: roles.active
+	};
+}
+function createForegroundVariantColorRoles(roles, variant) {
+	return {
+		...getForegroundVariantSurfaces(roles, variant),
+		color: roles.foreground,
+		colorHover: roles.foreground,
+		colorActive: roles.foreground
+	};
+}
+function getForegroundVariantSurfaces(roles, variant) {
+	switch (variant) {
+		case "subtle": return createSubtleVariantSurfaces(roles);
+		case "surface": return createSurfaceVariantSurfaces(roles);
+		case "outline": return createOutlineVariantSurfaces(roles);
+		case "ghost": return createGhostVariantSurfaces(roles);
+		case "plain": return createPlainVariantSurfaces();
+		default: return createDefaultVariantSurfaces(roles);
 	}
-	if (variant === "subtle") return {
+}
+function createSubtleVariantSurfaces(roles) {
+	return createVariantSurfaces({
 		background: roles.light,
 		hover: roles.lightHover,
 		active: roles.lightActive,
-		color: roles.foreground,
-		colorHover: roles.foreground,
-		colorActive: roles.foreground,
-		border: "transparent",
-		borderHover: "transparent",
-		borderActive: "transparent"
-	};
-	if (variant === "surface") return {
+		border: "transparent"
+	});
+}
+function createSurfaceVariantSurfaces(roles) {
+	return createVariantSurfaces({
 		background: roles.light,
 		hover: roles.lightHover,
 		active: roles.lightActive,
-		color: roles.foreground,
-		colorHover: roles.foreground,
-		colorActive: roles.foreground,
 		border: roles.outline,
 		borderHover: roles.lightHover,
 		borderActive: roles.outlineHover
-	};
-	if (variant === "outline") return {
+	});
+}
+function createOutlineVariantSurfaces(roles) {
+	return createVariantSurfaces({
 		background: "transparent",
 		hover: roles.lightHover,
 		active: roles.lightActive,
-		color: roles.foreground,
-		colorHover: roles.foreground,
-		colorActive: roles.foreground,
 		border: roles.outline,
-		borderHover: roles.outlineHover,
-		borderActive: roles.outlineHover
-	};
-	if (variant === "ghost") return {
+		borderHover: roles.outlineHover
+	});
+}
+function createGhostVariantSurfaces(roles) {
+	return createVariantSurfaces({
 		background: "transparent",
 		hover: roles.lightHover,
 		active: roles.lightActive,
-		color: roles.foreground,
-		colorHover: roles.foreground,
-		colorActive: roles.foreground,
-		border: "transparent",
-		borderHover: "transparent",
-		borderActive: "transparent"
-	};
-	if (variant === "plain") return {
+		border: "transparent"
+	});
+}
+function createPlainVariantSurfaces() {
+	return createVariantSurfaces({
 		background: "transparent",
 		hover: "transparent",
 		active: "transparent",
-		color: roles.foreground,
-		colorHover: roles.foreground,
-		colorActive: roles.foreground,
-		border: "transparent",
-		borderHover: "transparent",
-		borderActive: "transparent"
-	};
-	return {
+		border: "transparent"
+	});
+}
+function createDefaultVariantSurfaces(roles) {
+	return createVariantSurfaces({
 		background: "var(--rp-color-default)",
 		hover: roles.lightHover,
 		active: roles.lightActive,
-		color: roles.foreground,
-		colorHover: roles.foreground,
-		colorActive: roles.foreground,
 		border: roles.outline,
-		borderHover: roles.outlineHover,
-		borderActive: roles.outlineHover
+		borderHover: roles.outlineHover
+	});
+}
+function createVariantSurfaces({ background, hover, active, border, borderHover = border, borderActive = borderHover }) {
+	return {
+		background,
+		hover,
+		active,
+		border,
+		borderHover,
+		borderActive
 	};
 }
 function createComponentColorRoles(color, overrides = {}) {
@@ -222,6 +264,45 @@ function createComponentColorRoles(color, overrides = {}) {
 		contrastActive: overrides.contrastActive ?? roles.contrast
 	};
 }
+var customForegroundBackgroundMixes = [
+	0,
+	.12,
+	.18,
+	.24
+];
+function getCustomForegroundColor(color) {
+	const parsed = parseCssColor(color);
+	if (!parsed || parsed.opacity < 100) return color;
+	const black = {
+		red: 0,
+		green: 0,
+		blue: 0
+	};
+	const white = {
+		red: 255,
+		green: 255,
+		blue: 255
+	};
+	const darkBody = {
+		red: 36,
+		green: 36,
+		blue: 36
+	};
+	let colorPercent = 100;
+	while (colorPercent > 0) {
+		const weight = colorPercent / 100;
+		const lightForeground = mixOpaqueColors(parsed, weight, black);
+		const darkForeground = mixOpaqueColors(parsed, weight, white);
+		if (customForegroundBackgroundMixes.every((backgroundWeight) => {
+			const lightBackground = mixOpaqueColors(parsed, backgroundWeight, white);
+			const darkBackground = mixOpaqueColors(parsed, backgroundWeight, darkBody);
+			return contrastRatio(lightForeground, lightBackground) >= 4.5 && contrastRatio(darkForeground, darkBackground) >= 4.5;
+		})) break;
+		colorPercent -= 1;
+	}
+	if (colorPercent === 100) return color;
+	return `color-mix(in srgb, ${color} ${colorPercent}%, var(--rp-color-bright))`;
+}
 function getCustomContrastColorRoles(color, warnForTranslucentColor = false) {
 	const parsed = parseCssColor(color);
 	if (!parsed) return createContrastColorRoles("var(--rp-color-white)");
@@ -282,4 +363,4 @@ function relativeLuminance(color) {
 	return .2126 * red + .7152 * green + .0722 * blue;
 }
 //#endregion
-export { getComponentVariantColorRoles as i, getComponentColorValue as n, getComponentContrastColor as r, componentColors as t };
+export { getComponentVariantColorRoles as a, getComponentColorValue as i, getComponentCheckedColorStyle as n, getComponentColorRoles as r, componentColors as t };

package/dist/componentRef.js

@@ -0,0 +1,26 @@
+import { nextTick } from "vue";
+//#region src/utils/dom/componentRef.ts
+function asHTMLElement(value) {
+	if (value == null || typeof value !== "object") return null;
+	const ElementConstructor = ("ownerDocument" in value ? value.ownerDocument : null)?.defaultView?.HTMLElement;
+	if (ElementConstructor && value instanceof ElementConstructor) return value;
+	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
+	return null;
+}
+function toHTMLElement(value, fallbackId) {
+	const directElement = asHTMLElement(value);
+	if (directElement) return directElement;
+	const vdomElement = asHTMLElement(value?.$el);
+	if (vdomElement) return vdomElement;
+	const vaporBlock = asHTMLElement(value?.block);
+	if (vaporBlock) return vaporBlock;
+	return fallbackId && typeof document !== "undefined" ? document.getElementById(fallbackId) : null;
+}
+function resolveHTMLElementRef(value, fallbackId, resolve) {
+	const element = toHTMLElement(value, fallbackId);
+	resolve(element);
+	if (element || !value) return;
+	nextTick(() => resolve(toHTMLElement(value, fallbackId)));
+}
+//#endregion
+export { toHTMLElement as n, resolveHTMLElementRef as t };

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

@@ -0,0 +1,3 @@
+import { InjectionKey } from 'vue';
+import { AccordionContext } from './types.js';
+export declare const accordionKey: InjectionKey<AccordionContext>;

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

@@ -0,0 +1,14 @@
+import { AccordionItemValue, AccordionModelValue } from './types.js';
+type AccordionValueTransition = {
+    changed: false;
+} | {
+    changed: true;
+    modelValue: AccordionModelValue;
+};
+interface AccordionValueTransitionOptions {
+    multiple: boolean;
+    collapsible: boolean;
+}
+export declare function readAccordionOpenValues(value: AccordionModelValue | undefined, multiple: boolean): AccordionItemValue[];
+export declare function transitionAccordionValue(currentValue: AccordionModelValue | undefined, itemValue: AccordionItemValue, open: boolean, options: AccordionValueTransitionOptions): AccordionValueTransition;
+export {};

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

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

package/dist/components/accordion/index.js

@@ -1,2 +1,2 @@
-import { a as accordionItemParts, i as useAccordionItem, n as accordion_default, o as accordionParts, r as useAccordion, t as accordion_item_default } from "../../accordion.js";
+import { a as useAccordion, i as accordion_default, n as accordionParts, o as useAccordionItem, r as accordion_item_default, t as accordionItemParts } from "../../accordion.js";
 export { accordion_default as Accordion, accordion_item_default as AccordionItem, accordionItemParts, accordionParts, useAccordion, useAccordionItem };

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

@@ -1,4 +1,4 @@
-import { ComputedRef, HTMLAttributes, InjectionKey } from 'vue';
+import { ComputedRef, HTMLAttributes } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
 import { CollapseContentProps, CollapseContentRole, CollapseTriggerProps } from '../collapse/types.js';
 export type AccordionItemValue = string | number;
@@ -98,4 +98,3 @@ export interface UseAccordionItemReturn {
     close: () => void;
     toggle: () => void;
 }
-export declare const accordionKey: InjectionKey<AccordionContext>;

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

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

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

@@ -0,0 +1,2 @@
+import { AccordionItemProps, UseAccordionItemReturn } from './types.js';
+export declare function useAccordionItem(props: Readonly<AccordionItemProps>): UseAccordionItemReturn;

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

@@ -1,10 +1,9 @@
-import { CSSProperties } from 'vue';
 import { CheckboxProps } from './types.js';
 export declare function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void, getValue?: () => boolean): {
     inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
-    rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
+    rootStyle: import('vue').ComputedRef<Record<string, string> | undefined>;
     onChange: (e: Event) => void;
     focus: (options?: FocusOptions) => void;
 };

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

@@ -1,8 +1,8 @@
 import { ColorInputProps } 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<ColorInputProps & {
-        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -16,7 +16,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } & {
         'eye-dropper-icon'?: (props: {}) => any;
     };
-    emit: ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: string) => void);
+    emit: ((evt: "update:modelValue", value: string) => void) & ((evt: "update:open", value: boolean) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

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

@@ -20,7 +20,7 @@ export declare function useColorInput(props: Readonly<ColorInputProps>, emit: Us
     hasInvalidColor: import('vue').ComputedRef<boolean | undefined>;
     isInvalid: import('vue').ComputedRef<boolean | undefined>;
     colorValidationMessage: import('vue').ComputedRef<string | undefined>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     popoverDisabled: import('vue').ComputedRef<boolean>;
 };

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

@@ -1,3 +1,3 @@
-import { t as color_picker_default } from "../../color-picker.js";
-import { n as colorPickerParts, r as colorPickerSizes, t as colorPickerFormats } from "../../color-picker2.js";
+import { n as colorPickerFormats, t as color_picker_default } from "../../color-picker.js";
+import { n as colorPickerSizes, t as colorPickerParts } from "../../color-picker2.js";
 export { color_picker_default as ColorPicker, colorPickerFormats, colorPickerParts, colorPickerSizes };

package/dist/components/color-picker/types.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'vue';
+import { colorPickerFormats, ColorPickerFormat } from '../../utils/colorPicker.js';
 import { StylesApiProps } from '../../styles-api.js';
+export { colorPickerFormats, type ColorPickerFormat };
 export declare const colorPickerParts: readonly ["root", "label", "control", "handle", "swatches", "swatch"];
 export type ColorPickerPart = (typeof colorPickerParts)[number];
-export declare const colorPickerFormats: readonly ["hex", "hexa", "rgb", "rgba", "hsl", "hsla"];
 export declare const colorPickerSizes: readonly ["xs", "sm", "md", "lg", "xl"];
-export type ColorPickerFormat = (typeof colorPickerFormats)[number];
 export type ColorPickerSize = (typeof colorPickerSizes)[number];
 export interface ColorPickerSelection {
     saturation: number;

package/dist/components/color-picker/useColorPickerSaturation.d.ts

@@ -0,0 +1,22 @@
+import { ComponentElementRef } from '../../utils/dom/componentRef.js';
+import { ColorPickerSelection } from './types.js';
+type ColorPickerAxis = 'saturation' | 'value';
+interface UseColorPickerSaturationOptions {
+    modelValue: () => Readonly<ColorPickerSelection>;
+    hue: () => number;
+    readonly: () => boolean;
+    onChange: (selection: ColorPickerSelection) => void;
+}
+export declare function useColorPickerSaturation({ modelValue, hue, readonly, onChange, }: UseColorPickerSaturationOptions): {
+    setSaturationElement: (value: ComponentElementRef) => void;
+    setSaturationInput: (value: ComponentElementRef) => void;
+    selection: import('vue').ComputedRef<{
+        saturation: number;
+        value: number;
+    }>;
+    normalizedHue: import('vue').ComputedRef<number>;
+    onPointerDown: (event: PointerEvent) => void;
+    onAxisKeydown: (event: KeyboardEvent, axis: ColorPickerAxis) => void;
+    onAxisInput: (event: Event, axis: ColorPickerAxis) => void;
+};
+export {};

package/dist/components/color-picker/useColorPickerSlider.d.ts

@@ -0,0 +1,20 @@
+import { ComponentElementRef } from '../../utils/dom/componentRef.js';
+import { ColorPickerSliderVariant } from './types.js';
+interface UseColorPickerSliderOptions {
+    variant: () => ColorPickerSliderVariant;
+    value: () => number;
+    readonly: () => boolean;
+    onChange: (value: number) => void;
+}
+export declare function useColorPickerSlider({ variant, value, readonly, onChange, }: UseColorPickerSliderOptions): {
+    setSliderElement: (element: ComponentElementRef) => void;
+    sliderState: import('vue').ComputedRef<{
+        isHue: boolean;
+        max: number;
+        value: number;
+        outputValue: number;
+    }>;
+    onPointerDown: (event: PointerEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};
+export {};

package/dist/components/color-picker/useColorPickerValue.d.ts

@@ -1,4 +1,4 @@
-import { ColorPickerHsvColor } from './color-picker-utils.js';
+import { ColorPickerHsvColor } from '../../utils/colorPicker.js';
 import { ColorPickerProps, ColorPickerSelection, ColorPickerValue } from './types.js';
 type ColorPickerValueProps = Readonly<Pick<ColorPickerProps, 'modelValue' | 'format' | 'readonly'>>;
 export declare function useColorPickerValue(props: ColorPickerValueProps, emitUpdate: (value: ColorPickerValue) => void): {

package/dist/components/dialog/{dialog-core.d.ts → dialogContext.d.ts}

@@ -1,5 +1,5 @@
-import { ComponentPublicInstance, ComputedRef, InjectionKey, Ref, VaporComponentInstance } from 'vue';
-import { OverlayLayerContext } from '../../composables/useOverlayLayer.js';
+import { ComputedRef, InjectionKey, Ref } from 'vue';
+import { OverlayLayerContext } from '../../internal/composables/useOverlayLayer.js';
 import { DialogCloseReason } from './types.js';
 export interface DialogRootContext {
     isOpen: ComputedRef<boolean>;
@@ -22,8 +22,4 @@ export interface DialogRootContext {
     registerDescription: (id: string) => () => void;
 }
 export declare const dialogRootKey: InjectionKey<DialogRootContext>;
-export type DialogElementRefValue = Element | ComponentPublicInstance | VaporComponentInstance | null;
 export declare function resolveDialogCloseReason(reason: unknown): DialogCloseReason;
-export declare function toDialogHTMLElement(value: DialogElementRefValue): HTMLElement | null;
-export declare function resolveDialogHTMLElementRef(value: DialogElementRefValue, fallbackId: string, resolve: (element: HTMLElement | null) => void): void;
-export declare function createDialogEvent<T>(type: string, detail: T, originalEvent: Event): CustomEvent<T>;

package/dist/components/dialog/useDialogContentInteractions.d.ts

@@ -0,0 +1,18 @@
+import { ComponentElementRef } from '../../utils/dom/componentRef.js';
+import { DialogRootContext } from './dialogContext.js';
+import { DialogContentProps, DialogFocusTrapOptions, DialogInteractOutsideEvent } from './types.js';
+type DialogContentInteractionProps = Readonly<DialogContentProps & {
+    focusTrapOptions: DialogFocusTrapOptions;
+}>;
+interface DialogContentInteractionEvents {
+    escapeKeyDown: (event: CustomEvent<{
+        originalEvent: KeyboardEvent;
+    }>) => void;
+    pointerDownOutside: (event: DialogInteractOutsideEvent) => void;
+    interactOutside: (event: DialogInteractOutsideEvent) => void;
+}
+export declare function useDialogContentInteractions(root: DialogRootContext, props: DialogContentInteractionProps, events: Readonly<DialogContentInteractionEvents>): {
+    id: import('vue').ComputedRef<string>;
+    setElement: (value: ComponentElementRef) => void;
+};
+export {};