ropav 0.1.4 → 0.1.6

package/dist/collapse.js

@@ -1,11 +1,11 @@
 import './collapse.css';
 import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.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("<section data-v-a380be0d><div data-v-a380be0d class=rp-collapse__inner>");
-var t1 = template("<div data-v-a380be0d>", 1);
+var t0 = template("<div data-v-06c57838><div data-v-06c57838 class=rp-collapse__inner>");
+var t1 = template("<div data-v-06c57838>", 1);
 //#endregion
 //#region src/components/collapse/collapse.vue
 var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -81,7 +81,7 @@ var collapse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		}, { _: 8 }));
 		return n7;
 	}
-}), [["__scopeId", "data-v-a380be0d"]]);
+}), [["__scopeId", "data-v-06c57838"]]);
 //#endregion
 //#region src/components/collapse/types.ts
 var collapseParts = [

package/dist/collectionNavigation.js

@@ -0,0 +1,120 @@
+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
+function getEnabledIndexes(items, isDisabled) {
+	return items.map((item, index) => isDisabled(item) ? -1 : index).filter((index) => index >= 0);
+}
+function getNextEnabledIndex(items, currentIndex, direction, isDisabled, loop = true) {
+	const enabledIndexes = getEnabledIndexes(items, isDisabled);
+	if (enabledIndexes.length === 0) return void 0;
+	const currentPosition = enabledIndexes.indexOf(currentIndex);
+	if (currentPosition < 0) {
+		if (direction === 1) return enabledIndexes.find((index) => index > currentIndex) ?? (loop ? enabledIndexes[0] : enabledIndexes[enabledIndexes.length - 1]);
+		for (let index = enabledIndexes.length - 1; index >= 0; index -= 1) {
+			const candidate = enabledIndexes[index];
+			if (candidate < currentIndex) return candidate;
+		}
+		return loop ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];
+	}
+	const nextPosition = currentPosition + direction;
+	if (nextPosition >= 0 && nextPosition < enabledIndexes.length) return enabledIndexes[nextPosition];
+	if (!loop) return enabledIndexes[currentPosition];
+	return direction === 1 ? enabledIndexes[0] : enabledIndexes[enabledIndexes.length - 1];
+}
+//#endregion
+export { getNextEnabledIndex as n, useTypeahead as r, getEnabledIndexes as t };

package/dist/color-input.css

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

package/dist/color-input.js

@@ -1,8 +1,9 @@
 import './color-input.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.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, o as useControllableValue } from "./useFormControl.js";
+import { a as useTextFormControl, n as provideNestedFormControlOwner } from "./useFormControl.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";
@@ -182,8 +183,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-0c4e1f32>");
-var t1 = template("<button data-v-0c4e1f32><span data-v-0c4e1f32 class=rp-color-input__eye-dropper-icon aria-hidden=true></button>");
+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>");
 //#endregion
 //#region src/components/color-input/color-input.vue
 var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -416,7 +417,7 @@ var color_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}
 		}, true);
 	}
-}), [["__scopeId", "data-v-0c4e1f32"]]);
+}), [["__scopeId", "data-v-19e2ebe7"]]);
 //#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-fbb051b0] {
+.rp-color-picker__saturation[data-v-22669f8e] {
     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-fbb051b0]:focus-visible {
+.rp-color-picker__saturation[data-v-22669f8e]:focus-visible {
     outline: none;
 }
-.rp-color-picker__saturation[data-readonly][data-v-fbb051b0] {
+.rp-color-picker__saturation[data-readonly][data-v-22669f8e] {
     cursor: default;
 }
-.rp-color-picker__axis-input[data-v-fbb051b0] {
+.rp-color-picker__axis-input[data-v-22669f8e] {
     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-fbb051b0] {
+.rp-color-picker__axis-input:focus-visible ~ .rp-color-picker__handle[data-v-22669f8e] {
     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-fbb051b0] {
+.rp-color-picker__surface[data-v-22669f8e] {
     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-fbb051b0] {
+.rp-color-picker__handle[data-v-22669f8e] {
     position: absolute;
     top: var(--_rp-color-picker-saturation-y);
     left: var(--_rp-color-picker-saturation-x);

package/dist/color-picker.js

@@ -1,8 +1,8 @@
 import './color-picker.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { t as parseCssColor } from "./color.js";
+import { t as bem } from "./bem.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 check_default } from "./check.js";
 import { t as color_swatch_default } from "./color-swatch.js";
 import { child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, nthChild, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setValue, template, unref } from "vue";
@@ -261,7 +261,7 @@ function useColorPickerDrag({ target, focusTarget, readonly, isGeometryValid, up
 }
 //#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-fbb051b0 role=group data-control=saturation><input data-v-fbb051b0 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-fbb051b0 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-fbb051b0 class=rp-color-picker__surface aria-hidden=true></span><span data-v-fbb051b0 data-control=saturation aria-hidden=true>", 1);
+var t0$2 = template("<div data-v-22669f8e role=group data-control=saturation><input data-v-22669f8e 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-22669f8e 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-22669f8e class=rp-color-picker__surface aria-hidden=true></span><span data-v-22669f8e data-control=saturation aria-hidden=true>", 1);
 delegateEvents("input", "keydown", "pointerdown");
 //#endregion
 //#region src/components/color-picker/color-picker-saturation.vue
@@ -407,7 +407,6 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			setAttr(n3, "aria-label", groupAriaLabel.value);
 			setAttr(n3, "aria-labelledby", __props.labelledby);
 			setAttr(n3, "aria-describedby", _describedby);
-			setAttr(n3, "aria-readonly", _readonly || void 0);
 			setAttr(n3, "data-readonly", unref(presence)(_readonly));
 			setProp(n0, "id", _id);
 			setValue(n0, _saturation);
@@ -426,7 +425,7 @@ var color_picker_saturation_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 		});
 		return n3;
 	}
-}), [["__scopeId", "data-v-fbb051b0"]]);
+}), [["__scopeId", "data-v-22669f8e"]]);
 //#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-0299a505 role=slider tabindex=0 aria-orientation=horizontal aria-valuemin=0><span data-v-0299a505 aria-hidden=true></span><span data-v-0299a505 aria-hidden=true>", 1);

package/dist/color-swatch.js

@@ -1,7 +1,7 @@
 import './color-swatch.css';
 import { n as useStylesApi } from "./styles-api.js";
-import { t as parseCssColor } from "./color.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as parseCssColor } from "./color.js";
 import { child, computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template } from "vue";
 //#region src/components/color-swatch/useColorSwatchColor.ts
 function getColorSwatchForeground(color) {

package/dist/componentColors.js

@@ -59,13 +59,20 @@ function getComponentColorValue(color) {
 	if (parsed.kind === "custom") return parsed.value;
 }
 function getComponentContrastColor(color, options = {}) {
-	if (!options.autoContrast) return "var(--rp-color-white)";
+	return getComponentContrastColorRoles(color, options).color;
+}
+function getComponentContrastColorRoles(color, options = {}) {
+	if (options.contrastColor !== void 0) return createContrastColorRoles(options.contrastColor);
+	if (options.autoContrast === false) return createContrastColorRoles("var(--rp-color-white)");
 	const parsed = parseComponentColor(color);
-	if (parsed.kind === "primary") return "var(--rp-primary-color-contrast)";
-	if (parsed.kind === "preset") return `var(--rp-color-${parsed.color}-contrast)`;
-	if (parsed.kind === "shade") return `var(--rp-color-${parsed.color}-${parsed.shade}-contrast)`;
-	if (parsed.kind === "custom") return getReadableColorVariable(parsed.value);
-	return "var(--rp-color-white)";
+	if (parsed.kind === "custom") return getCustomContrastColorRoles(parsed.value, true);
+	const roles = getComponentColorRoles(color);
+	if (!roles) return createContrastColorRoles("var(--rp-color-white)");
+	return {
+		color: roles.contrast,
+		hover: roles.contrastHover,
+		active: roles.contrastActive
+	};
 }
 function getComponentColorRoles(color) {
 	const parsed = parseComponentColor(color);
@@ -90,32 +97,50 @@ function getComponentColorRoles(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}-${Math.min(Number(parsed.shade) + 1, 9)})`,
+			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
 		});
 	}
-	return createComponentColorRoles(parsed.value, { contrast: getReadableColorVariable(parsed.value) });
+	const contrast = getCustomContrastColorRoles(parsed.value);
+	return createComponentColorRoles(parsed.value, {
+		contrast: contrast.color,
+		contrastHover: contrast.hover,
+		contrastActive: contrast.active,
+		foreground: getCustomForegroundColor(parsed.value)
+	});
 }
-function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast }) {
+function getComponentVariantColorRoles({ color, variant, defaultColor = "primary", autoContrast, contrastColor }) {
 	const roles = getComponentColorRoles(color ?? defaultColor);
 	if (!roles) return void 0;
-	const contrast = getComponentContrastColor(color ?? defaultColor, { autoContrast });
-	if (variant === "solid") return {
-		background: roles.filled,
-		hover: roles.hover,
-		active: roles.active,
-		color: contrast,
-		border: roles.filled,
-		borderHover: roles.hover,
-		borderActive: roles.active
-	};
+	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 === "subtle") return {
 		background: roles.light,
 		hover: roles.lightHover,
 		active: roles.lightActive,
 		color: roles.foreground,
+		colorHover: roles.foreground,
+		colorActive: roles.foreground,
 		border: "transparent",
 		borderHover: "transparent",
 		borderActive: "transparent"
@@ -125,6 +150,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
 		hover: roles.lightHover,
 		active: roles.lightActive,
 		color: roles.foreground,
+		colorHover: roles.foreground,
+		colorActive: roles.foreground,
 		border: roles.outline,
 		borderHover: roles.lightHover,
 		borderActive: roles.outlineHover
@@ -134,6 +161,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
 		hover: roles.lightHover,
 		active: roles.lightActive,
 		color: roles.foreground,
+		colorHover: roles.foreground,
+		colorActive: roles.foreground,
 		border: roles.outline,
 		borderHover: roles.outlineHover,
 		borderActive: roles.outlineHover
@@ -143,6 +172,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
 		hover: roles.lightHover,
 		active: roles.lightActive,
 		color: roles.foreground,
+		colorHover: roles.foreground,
+		colorActive: roles.foreground,
 		border: "transparent",
 		borderHover: "transparent",
 		borderActive: "transparent"
@@ -152,6 +183,8 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
 		hover: "transparent",
 		active: "transparent",
 		color: roles.foreground,
+		colorHover: roles.foreground,
+		colorActive: roles.foreground,
 		border: "transparent",
 		borderHover: "transparent",
 		borderActive: "transparent"
@@ -161,17 +194,21 @@ function getComponentVariantColorRoles({ color, variant, defaultColor = "primary
 		hover: roles.lightHover,
 		active: roles.lightActive,
 		color: roles.foreground,
+		colorHover: roles.foreground,
+		colorActive: roles.foreground,
 		border: roles.outline,
 		borderHover: roles.outlineHover,
 		borderActive: roles.outlineHover
 	};
 }
 function createComponentColorRoles(color, overrides = {}) {
-	return {
+	const roles = {
 		filled: color,
 		hover: `color-mix(in srgb, ${color} 90%, var(--rp-color-black))`,
 		active: `color-mix(in srgb, ${color} 80%, var(--rp-color-black))`,
 		contrast: "var(--rp-color-white)",
+		contrastHover: "var(--rp-color-white)",
+		contrastActive: "var(--rp-color-white)",
 		light: `color-mix(in srgb, ${color} 12%, transparent)`,
 		lightHover: `color-mix(in srgb, ${color} 18%, transparent)`,
 		lightActive: `color-mix(in srgb, ${color} 24%, transparent)`,
@@ -180,10 +217,70 @@ function createComponentColorRoles(color, overrides = {}) {
 		foreground: color,
 		...overrides
 	};
+	return {
+		...roles,
+		contrastHover: overrides.contrastHover ?? roles.contrast,
+		contrastActive: overrides.contrastActive ?? roles.contrast
+	};
 }
-function getReadableColorVariable(color) {
+var customForegroundBackgroundMixes = [
+	0,
+	.12,
+	.18,
+	.24
+];
+function getCustomForegroundColor(color) {
 	const parsed = parseCssColor(color);
-	if (!parsed) return "var(--rp-color-white)";
+	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)");
+	if (parsed.opacity < 100) {
+		if (warnForTranslucentColor);
+		return createContrastColorRoles("var(--rp-color-white)");
+	}
+	const black = {
+		red: 0,
+		green: 0,
+		blue: 0
+	};
+	return {
+		color: getReadableParsedColorVariable(parsed),
+		hover: getReadableParsedColorVariable(mixOpaqueColors(parsed, .9, black)),
+		active: getReadableParsedColorVariable(mixOpaqueColors(parsed, .8, black))
+	};
+}
+function getReadableParsedColorVariable(parsed) {
 	return contrastRatio({
 		red: 0,
 		green: 0,
@@ -194,6 +291,21 @@ function getReadableColorVariable(color) {
 		blue: 255
 	}, parsed) ? "var(--rp-color-black)" : "var(--rp-color-white)";
 }
+function createContrastColorRoles(color) {
+	return {
+		color,
+		hover: color,
+		active: color
+	};
+}
+function mixOpaqueColors(first, firstWeight, second) {
+	const secondWeight = 1 - firstWeight;
+	return {
+		red: first.red * firstWeight + second.red * secondWeight,
+		green: first.green * firstWeight + second.green * secondWeight,
+		blue: first.blue * firstWeight + second.blue * secondWeight
+	};
+}
 function contrastRatio(foreground, background) {
 	const foregroundLuminance = relativeLuminance(foreground);
 	const backgroundLuminance = relativeLuminance(background);
@@ -210,4 +322,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, getComponentContrastColor as i, getComponentColorRoles as n, getComponentColorValue as r, componentColors as t };

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

@@ -16,6 +16,7 @@ export interface AlertProps extends StylesApiProps<AlertPart> {
     variant?: AlertVariant;
     color?: AlertColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     radius?: AlertRadius;
     role?: AlertRole;
     closable?: boolean;

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

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

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

@@ -18,6 +18,7 @@ export interface AvatarProps extends StylesApiProps<AvatarPart> {
     variant?: AvatarVariant;
     color?: AvatarColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     size?: AvatarSize;
     radius?: AvatarRadius;
 }

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

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