ropav 0.1.3 → 0.1.5

package/dist/tooltip.js

@@ -66,12 +66,13 @@ function resolveTooltipOffsetStyle(offset) {
 	if (offset.crossAxis != null) style["--_rp-tooltip-cross-axis-offset"] = `${offset.crossAxis}px`;
 	return Object.keys(style).length > 0 ? style : void 0;
 }
-function resolveTooltipColorStyleWithContrast(color, autoContrast) {
+function resolveTooltipColorStyleWithContrast(color, autoContrast, contrastColor) {
 	if (!color) return void 0;
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant: "solid",
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -140,7 +141,7 @@ function useTooltip(props, emitOpenChange) {
 	const contentStyle = computed(() => ({
 		...floating.floatingStyle.value,
 		...resolveTooltipOffsetStyle(props.offset),
-		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast),
+		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast, props.contrastColor),
 		zIndex: zIndex.value
 	}));
 	function openTooltip() {
@@ -212,10 +213,10 @@ function useTooltip(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/tooltip/tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-38bfcb12 class=rp-tooltip__arrow aria-hidden=true>");
+var t0 = template("<span data-v-9457a843 class=rp-tooltip__arrow aria-hidden=true>");
 var t1 = template(" ");
-var t2 = template("<span data-v-38bfcb12>");
-var t3 = template("<span data-v-38bfcb12>", 1);
+var t2 = template("<span data-v-9457a843>");
+var t3 = template("<span data-v-9457a843>", 1);
 //#endregion
 //#region src/components/tooltip/tooltip.vue
 var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -227,7 +228,11 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		baseZIndex: {},
 		content: { default: "" },
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		open: {
 			type: Boolean,
 			default: void 0
@@ -354,6 +359,6 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		setStaticTemplateRef(n14, rootRef, null, "rootRef");
 		return n14;
 	}
-}), [["__scopeId", "data-v-38bfcb12"]]);
+}), [["__scopeId", "data-v-9457a843"]]);
 //#endregion
 export { useDelayedOpen as i, resolveTooltipColorStyleWithContrast as n, resolveTooltipOffsetStyle as r, tooltip_default as t };

package/dist/unplugin-icons.js

@@ -1,39 +1,52 @@
 import { compile } from "@vue/compiler-vapor";
 //#region src/unplugin-icons.ts
-var randomIdHelper = "const __randId = () => Math.random().toString(36).substr(2, 10);";
-function handleSVGId(svg) {
-	if (!/="url\(#/.test(svg)) return {
+var ID_MAP_LOCAL = "__ropavIconIdMap";
+var RANDOM_ID_LOCAL = "__ropavIconRandomId";
+var RENDER_FUNCTION_START = "function render(_ctx) {";
+var PAINT_SERVER_REFERENCE = /\b([\w-]+)="url\(#(.+?)\)"/g;
+var SVG_ID_ATTRIBUTE = /\bid="(.+?)"/g;
+function transformSvgIds(svg) {
+	if (!svg.includes("=\"url(#")) return {
 		svg,
-		injectScripts: ""
+		renderLocals: ""
 	};
-	const idMap = {};
+	const referencedIds = /* @__PURE__ */ new Set();
+	const svgWithBoundReferences = svg.replace(PAINT_SERVER_REFERENCE, (_, attribute, id) => {
+		referencedIds.add(id);
+		return `:${attribute}="'url(#'+${ID_MAP_LOCAL}['${id}']+')'"`;
+	});
+	if (referencedIds.size === 0) return {
+		svg,
+		renderLocals: ""
+	};
+	const svgWithBoundIds = svgWithBoundReferences.replace(SVG_ID_ATTRIBUTE, (attribute, id) => referencedIds.has(id) ? `:id="${ID_MAP_LOCAL}['${id}']"` : attribute);
+	const idMapEntries = Array.from(referencedIds, (id) => `'${id}':'uicons-'+${RANDOM_ID_LOCAL}()`).join(",");
 	return {
-		svg: svg.replace(/\b([\w-]+)="url\(#(.+?)\)"/g, (_, attr, id) => {
-			idMap[id] = `'${id}':'uicons-'+__randId()`;
-			return `:${attr}="'url(#'+idMap['${id}']+')'"`;
-		}).replace(/\bid="(.+?)"/g, (full, id) => {
-			if (idMap[id]) return `:id="idMap['${id}']"`;
-			return full;
-		}),
-		injectScripts: `${randomIdHelper}const idMap = {${Object.values(idMap).join(",")}};`
+		svg: svgWithBoundIds,
+		renderLocals: [`const ${RANDOM_ID_LOCAL} = () => Math.random().toString(36).slice(2, 12);`, `const ${ID_MAP_LOCAL} = {${idMapEntries}};`].join("\n  ")
 	};
 }
+function injectRenderLocals(code, renderLocals) {
+	if (!renderLocals) return code;
+	if (!code.includes(RENDER_FUNCTION_START)) throw new Error("Unable to inject SVG ID bindings into the Vapor render function");
+	return code.replaceAll(`_ctx.${ID_MAP_LOCAL}`, ID_MAP_LOCAL).replace(RENDER_FUNCTION_START, `${RENDER_FUNCTION_START}\n  ${renderLocals}`);
+}
+function createVaporIconModule(renderCode, componentName) {
+	return `${renderCode}
+import { defineVaporComponent, markRaw } from 'vue';
+
+export default markRaw(defineVaporComponent({ name: ${JSON.stringify(componentName)}, render }))
+/* vite-plugin-components disabled */`;
+}
 /** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
 function vaporIconCompiler() {
 	return { compiler(svg, collection, icon) {
-		const name = `${collection}-${icon}`;
-		const { injectScripts, svg: handled } = handleSVGId(svg);
-		let { code } = compile(handled, {
-			filename: `${name}.vue`,
+		const componentName = `${collection}-${icon}`;
+		const transformed = transformSvgIds(svg);
+		return createVaporIconModule(injectRenderLocals(compile(transformed.svg, {
+			filename: `${componentName}.vue`,
 			prefixIdentifiers: true
-		});
-		code = code.replace(/^export /gm, "");
-		const setup = injectScripts ? `,\n    setup() {${injectScripts};return { idMap }}` : "";
-		return `${code}
-import { defineVaporComponent, markRaw } from 'vue';
-
-export default markRaw(defineVaporComponent({ name: ${JSON.stringify(name)}, render${setup} }))
-/* vite-plugin-components disabled */`;
+		}).code.replace(/^export /gm, ""), transformed.renderLocals), componentName);
 	} };
 }
 //#endregion

package/dist/useButtonColor.js

@@ -11,12 +11,13 @@ var loader_circle_default = markRaw(defineVaporComponent({
 }));
 //#endregion
 //#region src/components/button/useButtonColor.ts
-function getButtonColorStyle(color, variant, autoContrast) {
+function getButtonColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const roles = getComponentVariantColorRoles({
 		color,
 		variant,
-		autoContrast
+		autoContrast,
+		contrastColor
 	});
 	if (!roles) return void 0;
 	return {
@@ -26,7 +27,9 @@ function getButtonColorStyle(color, variant, autoContrast) {
 		"--_rp-button-border": roles.border,
 		"--_rp-button-border-hover": roles.borderHover,
 		"--_rp-button-border-active": roles.borderActive,
-		"--_rp-button-fg": roles.color
+		"--_rp-button-fg": roles.color,
+		"--_rp-button-fg-hover": roles.colorHover,
+		"--_rp-button-fg-active": roles.colorActive
 	};
 }
 //#endregion

package/dist/useControllableValue.js

@@ -0,0 +1,27 @@
+import { computed, shallowRef, watch } from "vue";
+//#region src/composables/useControllableValue.ts
+function useControllableValue(options) {
+	const initialValue = options.defaultValue();
+	const uncontrolledValue = shallowRef(initialValue);
+	const isControlled = computed(() => options.modelValue() !== void 0);
+	watch(options.modelValue, (value) => {
+		if (value !== void 0) uncontrolledValue.value = value;
+	}, { immediate: true });
+	const value = computed(() => options.modelValue() ?? uncontrolledValue.value);
+	function setValue(nextValue) {
+		if (!isControlled.value) uncontrolledValue.value = nextValue;
+		options.onChange(nextValue);
+	}
+	function resetValue(nextValue = initialValue) {
+		if (!isControlled.value) uncontrolledValue.value = nextValue;
+	}
+	return {
+		initialValue,
+		isControlled,
+		value,
+		setValue,
+		resetValue
+	};
+}
+//#endregion
+export { useControllableValue as t };

package/dist/useFormControl.js

@@ -1,29 +1,4 @@
-import { computed, inject, provide, shallowRef, watch, watchEffect } from "vue";
-//#region src/composables/useControllableValue.ts
-function useControllableValue(options) {
-	const initialValue = options.defaultValue();
-	const uncontrolledValue = shallowRef(initialValue);
-	const isControlled = computed(() => options.modelValue() !== void 0);
-	watch(options.modelValue, (value) => {
-		if (value !== void 0) uncontrolledValue.value = value;
-	}, { immediate: true });
-	const value = computed(() => options.modelValue() ?? uncontrolledValue.value);
-	function setValue(nextValue) {
-		if (!isControlled.value) uncontrolledValue.value = nextValue;
-		options.onChange(nextValue);
-	}
-	function resetValue(nextValue = initialValue) {
-		if (!isControlled.value) uncontrolledValue.value = nextValue;
-	}
-	return {
-		initialValue,
-		isControlled,
-		value,
-		setValue,
-		resetValue
-	};
-}
-//#endregion
+import { inject, provide, watchEffect } from "vue";
 //#region src/composables/useFormControl.ts
 var nestedFormControlOwnerKey = Symbol("nestedFormControlOwner");
 function provideNestedFormControlOwner() {
@@ -104,4 +79,4 @@ function useCheckedFormControl(element, controllable, validationMessage) {
 	});
 }
 //#endregion
-export { useTextFormControl as a, useFormControl as i, provideNestedFormControlOwner as n, useControllableValue as o, useCheckedFormControl as r, claimNestedFormControlOwner as t };
+export { useTextFormControl as a, useFormControl as i, provideNestedFormControlOwner as n, useCheckedFormControl as r, claimNestedFormControlOwner as t };

package/dist/utils/componentColors.d.ts

@@ -10,6 +10,8 @@ export interface ComponentColorRoles {
     hover: string;
     active: string;
     contrast: string;
+    contrastHover: string;
+    contrastActive: string;
     light: string;
     lightHover: string;
     lightActive: string;
@@ -22,12 +24,22 @@ export interface ComponentVariantColorRoles {
     hover: string;
     active: string;
     color: string;
+    colorHover: string;
+    colorActive: string;
     border: string;
     borderHover: string;
     borderActive: string;
 }
 export interface ComponentContrastColorOptions {
+    /** Automatically selects a readable foreground for preset and opaque custom colors. */
     autoContrast?: boolean;
+    /** Required when an automatically contrasted custom color is translucent. */
+    contrastColor?: string;
+}
+export interface ComponentContrastColorRoles {
+    color: string;
+    hover: string;
+    active: string;
 }
 export interface ComponentVariantColorOptions extends ComponentContrastColorOptions {
     color: ComponentColorValue | undefined;
@@ -56,5 +68,6 @@ export declare function isComponentPresetColor(color: ComponentColorValue | unde
 export declare function parseComponentColor(color: ComponentColorValue | undefined): ParsedComponentColor;
 export declare function getComponentColorValue(color: ComponentColorValue | undefined): string | undefined;
 export declare function getComponentContrastColor(color: ComponentColorValue | undefined, options?: ComponentContrastColorOptions): string;
+export declare function getComponentContrastColorRoles(color: ComponentColorValue | undefined, options?: ComponentContrastColorOptions): ComponentContrastColorRoles;
 export declare function getComponentColorRoles(color: ComponentColorValue | undefined): ComponentColorRoles | undefined;
-export declare function getComponentVariantColorRoles({ color, variant, defaultColor, autoContrast, }: ComponentVariantColorOptions): ComponentVariantColorRoles | undefined;
+export declare function getComponentVariantColorRoles({ color, variant, defaultColor, autoContrast, contrastColor, }: ComponentVariantColorOptions): ComponentVariantColorRoles | undefined;

package/docs/public-styles-api.md

@@ -111,7 +111,7 @@ The exact entries in [`styles-manifest.json`](../src/styles/styles-manifest.json
 
 The manifest contains design tokens plus a deliberately small component-geometry allowlist. Slider and RangeSlider share the `--rp-slider-*` namespace. Size presets provide fallbacks, while a consumer value wins for the individual dimension. See the generated [token table](./public-tokens.md).
 
-Palette shades and their `*-contrast` companions are required override groups because `autoContrast` consumes the companion selected at build time. The [color override contract](./public-tokens.md#color-override-contract) documents the paired override and preset-role requirements.
+Palette shades and their normal and active `*-contrast` companions are required override groups because `autoContrast` consumes state-specific companions selected at build time. The [color override contract](./public-tokens.md#color-override-contract) documents the state pairings and preset-role requirements.
 
 ## Cascade layers and migration