ropav 0.1.4 → 0.1.5

package/dist/components/select/useSelect.d.ts

@@ -10,7 +10,7 @@ export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpda
     listboxId: string;
     control: import('../../composables/useControlState.js').ControlState;
     visibleOptions: import('vue').ComputedRef<SelectOption[]>;
-    focusedIndex: Ref<number, number>;
+    focusedIndex: import('vue').ComputedRef<number>;
     activeDescendantId: import('vue').ComputedRef<string | undefined>;
     rootClass: import('vue').ComputedRef<string[]>;
     hasValue: import('vue').ComputedRef<boolean>;

package/dist/components/slider/range-slider-tooltip.d.ts

@@ -5,6 +5,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     props: import('vue').PublicProps & __VLS_PrettifyLocal<{
         arrow?: boolean;
         color?: TooltipColor;
+        autoContrast?: boolean;
+        contrastColor?: string;
         content: [string, string];
         ids: [string | undefined, string | undefined];
         mergedContent: string;

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

@@ -23,7 +23,7 @@ export type RangeSliderEndpointValueText = string | SliderValueFormatter;
 export type RangeSliderAriaValueText = RangeSliderEndpointValueText | [RangeSliderEndpointValueText, RangeSliderEndpointValueText];
 export type RangeSliderValidationMessage = string | [string | undefined, string | undefined];
 export type SliderTooltipMode = 'hover' | 'always';
-type SliderTooltipBaseOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'>;
+type SliderTooltipBaseOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'autoContrast' | 'contrastColor' | 'offset' | 'openDelay' | 'arrow'>;
 export type SliderTooltipAnchor = 'thumb' | 'pointer';
 export type SliderTooltipOptions = (SliderTooltipBaseOptions & {
     anchor?: 'thumb';

package/dist/components/slider/useRangeSlider.d.ts

@@ -42,6 +42,8 @@ export declare function useRangeSlider(props: RangeSliderStateProps, emitUpdate:
     tooltipIds: import('vue').ComputedRef<[string | undefined, string | undefined]>;
     mergedTooltipId: import('vue').ComputedRef<string | undefined>;
     tooltipColor: import('vue').ComputedRef<import('../../utils/componentColors.js').ComponentColorValue | undefined>;
+    tooltipAutoContrast: import('vue').ComputedRef<boolean | undefined>;
+    tooltipContrastColor: import('vue').ComputedRef<string | undefined>;
     tooltipOffset: import('vue').ComputedRef<import('../floating/index.js').FloatingOffset | undefined>;
     tooltipOpenDelay: import('vue').ComputedRef<number>;
     tooltipArrow: import('vue').ComputedRef<boolean>;

package/dist/components/slider/useSlider.d.ts

@@ -38,6 +38,8 @@ export declare function useSlider(props: SliderStateProps, emitUpdate: (value: n
     tooltipPlacement: import('vue').ComputedRef<import('../tooltip/index.js').TooltipPlacement>;
     tooltipId: import('vue').ComputedRef<string | undefined>;
     tooltipColor: import('vue').ComputedRef<import('../../utils/componentColors.js').ComponentColorValue | undefined>;
+    tooltipAutoContrast: import('vue').ComputedRef<boolean | undefined>;
+    tooltipContrastColor: import('vue').ComputedRef<string | undefined>;
     tooltipOffset: import('vue').ComputedRef<import('../floating/index.js').FloatingOffset | undefined>;
     tooltipOpenDelay: import('vue').ComputedRef<number>;
     tooltipArrow: import('vue').ComputedRef<boolean>;

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

@@ -27,6 +27,7 @@ export interface ToastProps extends StylesApiProps<ToastPart> {
     variant?: ToastVariant;
     color?: ToastColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     radius?: ToastRadius;
     role?: ToastRole;
     duration?: number;
@@ -61,6 +62,7 @@ export interface ToastStoreOptions {
     variant?: ToastVariant;
     color?: ToastColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     radius?: ToastRadius;
     role?: ToastRole;
     pauseOnHover?: boolean;

package/dist/components/toast/useToastColor.d.ts

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

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

@@ -25,6 +25,7 @@ export interface TooltipProps extends FloatingPositionProps<TooltipPlacement>, S
     content?: string;
     color?: TooltipColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     open?: boolean;
     openDelay?: number;
     disabled?: boolean;

package/dist/components/tooltip/useTooltip.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'vue';
 import { TooltipOffset, TooltipProps, TooltipTriggerProps } from './types.js';
 type TooltipBehaviorProps = Omit<TooltipProps, 'classNames' | 'styles'>;
 export declare function resolveTooltipOffsetStyle(offset: TooltipOffset | undefined): CSSProperties | undefined;
-export declare function resolveTooltipColorStyleWithContrast(color: TooltipProps['color'], autoContrast: TooltipProps['autoContrast']): CSSProperties | undefined;
+export declare function resolveTooltipColorStyleWithContrast(color: TooltipProps['color'], autoContrast: TooltipProps['autoContrast'], contrastColor?: TooltipProps['contrastColor']): CSSProperties | undefined;
 export declare function useTooltip(props: Readonly<TooltipBehaviorProps>, emitOpenChange?: (open: boolean) => void): {
     rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;

package/dist/dropdown-menu.js

@@ -5,7 +5,9 @@ import { t as useRequiredInject } from "./useRequiredInject.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
 import { n as useTeleportPositioningKey, r as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
-import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, markRaw, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
+import { n as getNextEnabledIndex, r as useTypeahead, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { t as chevron_right_default } from "./chevron-right.js";
+import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
 //#region src/components/dropdown-menu/dropdown-menu-primitive-core.ts
 var rootKey = Symbol("dropdown-menu-root");
 var menuKey = Symbol("dropdown-menu-content");
@@ -156,6 +158,17 @@ function createMenuContext(options) {
 		const item = enabledItems[((currentIndex < 0 ? direction === 1 ? -1 : 0 : currentIndex) + direction + enabledItems.length) % enabledItems.length];
 		if (item) setActive(item.id);
 	}
+	const typeahead = useTypeahead({
+		items: () => sortItems(items.value),
+		activeIndex: () => sortItems(items.value).findIndex((item) => item.id === activeId.value),
+		getKey: (item) => item.id,
+		getTextValue: (item) => item.textValue(),
+		isDisabled: (item) => item.disabled(),
+		onMatch: (item) => setActive(item.id)
+	});
+	watch(computed(() => options.parentSub?.isOpen.value ?? options.root.isOpen.value), (open) => {
+		if (!open) typeahead.reset();
+	}, { flush: "sync" });
 	function onHorizontalKeydown(event, active) {
 		if (options.parentSub && event.key === getCloseDirection(context)) {
 			event.preventDefault();
@@ -169,6 +182,10 @@ function createMenuContext(options) {
 		active.submenu.open("first");
 	}
 	function onKeydown(event) {
+		if (typeahead.handleKey(event)) {
+			event.stopPropagation();
+			return;
+		}
 		const active = items.value.find((item) => item.id === activeId.value);
 		switch (event.key) {
 			case "ArrowDown":
@@ -249,6 +266,7 @@ function usePrimitiveItem(componentName, props, emitSelect, options) {
 			return id.value;
 		},
 		element: () => element.value,
+		textValue: () => props.textValue ?? element.value?.textContent?.trim() ?? "",
 		disabled: () => isDisabled.value,
 		activate
 	};
@@ -302,6 +320,7 @@ var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
 		},
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -569,7 +588,7 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 }
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$3 = template("<span class=rp-dropdown-menu__arrow aria-hidden=true>");
+var t0$2 = template("<span class=rp-dropdown-menu__arrow aria-hidden=true>");
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-content.vue
 var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
@@ -625,7 +644,7 @@ var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
 		return createIf(() => unref(shouldRender), () => {
 			const n6 = createDynamicComponent(() => __props.as, { $: [() => unref(rootAttrs)] }, extend(() => {
 				return [createIf(() => __props.arrow, () => {
-					const n4 = t0$3();
+					const n4 = t0$2();
 					_setTemplateRef(n4, arrowElement, null, "arrowElement");
 					renderEffect(() => {
 						setAttr(n4, "data-side", unref(placementSide));
@@ -781,6 +800,7 @@ var dropdown_menu_item_default = /* @__PURE__ */ defineVaporComponent({
 		id: {},
 		as: { default: "button" },
 		value: {},
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -970,6 +990,7 @@ var dropdown_menu_radio_item_default = /* @__PURE__ */ defineVaporComponent({
 		value: {},
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1347,6 +1368,7 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 	props: {
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1366,6 +1388,7 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 				return id.value;
 			},
 			element: () => sub.trigger.value,
+			textValue: () => props.textValue ?? sub.trigger.value?.textContent?.trim() ?? "",
 			disabled: () => isDisabled.value,
 			activate: () => sub.open("first"),
 			submenu: sub
@@ -1495,16 +1518,6 @@ var dropdown_menu_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		return n1;
 	}
 });
-//#endregion
-//#region ~icons/lucide/chevron-right
-var t0$2 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m9 18l6-6l-6-6\">", 3, 1);
-function render(_ctx) {
-	return t0$2();
-}
-var chevron_right_default = markRaw(defineVaporComponent({
-	name: "lucide-chevron-right",
-	render
-}));
 var DEFAULT_FOCUS_TARGET = "first";
 function getOpenFocusTarget(options) {
 	if (typeof options === "string") return options;
@@ -1552,19 +1565,6 @@ function hasMeasuredRect(rect) {
 function isPointInRect(point, rect, padding = 0) {
 	return point.x >= rect.left - padding && point.x <= rect.right + padding && point.y >= rect.top - padding && point.y <= rect.bottom + padding;
 }
-function getEnabledIndexes(items) {
-	return items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0);
-}
-function getNextEnabledIndex(items, index, direction) {
-	const enabledIndexes = getEnabledIndexes(items);
-	if (enabledIndexes.length === 0) return void 0;
-	if (direction === 1) return enabledIndexes.find((candidate) => candidate > index) ?? enabledIndexes[0];
-	for (let i = enabledIndexes.length - 1; i >= 0; i -= 1) {
-		const candidate = enabledIndexes[i];
-		if (candidate < index) return candidate;
-	}
-	return enabledIndexes[enabledIndexes.length - 1];
-}
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-item-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0$1 = template("<div>");
@@ -1979,7 +1979,7 @@ function useDropdownMenuHoverIntent({ openSubmenuPath, getItemElement, getSubmen
 }
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuInteractions.ts
-function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft }) {
+function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, handleTypeahead, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft }) {
 	function activateItem(item, path, event) {
 		if (item.disabled) return;
 		if (hasItemSubmenu(item)) {
@@ -2062,6 +2062,7 @@ function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, ope
 	}
 	function onMenuKeydown(event) {
 		hoverIntent.resetHoverIntent();
+		if (handleTypeahead(event)) return;
 		switch (event.key) {
 			case "ArrowDown":
 				event.preventDefault();
@@ -2150,7 +2151,7 @@ function useDropdownMenuNavigation(items) {
 		return getItemsAtPath(getParentPath(path))[path[path.length - 1]];
 	}
 	function focusItem(target, menuPath = []) {
-		const enabledIndexes = getEnabledIndexes(getItemsAtPath(menuPath));
+		const enabledIndexes = getEnabledIndexes(getItemsAtPath(menuPath), (item) => Boolean(item.disabled));
 		const index = target === "last" ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];
 		if (index === void 0) {
 			if (menuPath.length === 0) focusedPath.value = [];
@@ -2162,13 +2163,19 @@ function useDropdownMenuNavigation(items) {
 	function resetFocus() {
 		focusedPath.value = [];
 	}
+	function setFocusedIndex(index, menuPath = []) {
+		const item = getItemsAtPath(menuPath)[index];
+		if (!item || item.disabled) return false;
+		focusedPath.value = [...menuPath, index];
+		return true;
+	}
 	function isItemFocused(indexOrPath) {
 		return arePathsEqual(normalizePath(indexOrPath), focusedPath.value);
 	}
 	function moveFocus(direction) {
 		const menuPath = getParentPath(focusedPath.value);
 		const itemsAtPath = getItemsAtPath(menuPath);
-		const nextIndex = getNextEnabledIndex(itemsAtPath, focusedPath.value.length === 0 ? direction === 1 ? -1 : itemsAtPath.length : focusedPath.value[focusedPath.value.length - 1], direction);
+		const nextIndex = getNextEnabledIndex(itemsAtPath, focusedPath.value.length === 0 ? direction === 1 ? -1 : itemsAtPath.length : focusedPath.value[focusedPath.value.length - 1], direction, (item) => Boolean(item.disabled));
 		if (nextIndex === void 0) {
 			focusedPath.value = [];
 			return;
@@ -2183,6 +2190,7 @@ function useDropdownMenuNavigation(items) {
 		getItemAtPath,
 		focusItem,
 		resetFocus,
+		setFocusedIndex,
 		isItemFocused,
 		moveFocus
 	};
@@ -2398,13 +2406,26 @@ function useDropdownMenu(props, emit = {}) {
 		]
 	});
 	const placementSide = computed(() => actualPlacement.value.split("-")[0]);
-	const { focusedPath, focusedIndex, getItemAtPath, focusItem, resetFocus, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
+	const { focusedPath, focusedIndex, getItemsAtPath, getItemAtPath, focusItem, resetFocus, setFocusedIndex, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
 	const submenus = useDropdownSubmenus({
 		focusedPath,
 		getItemAtPath,
 		focusItem
 	});
 	const { openSubmenuPath, isSubmenuOpen } = submenus;
+	const activeMenuPath = computed(() => getParentPath(focusedPath.value));
+	const typeahead = useTypeahead({
+		items: () => getItemsAtPath(activeMenuPath.value),
+		activeIndex: () => focusedPath.value.at(-1) ?? -1,
+		getKey: (item) => item.value,
+		getTextValue: (item) => item.label,
+		isDisabled: (item) => Boolean(item.disabled),
+		scopeKey: () => activeMenuPath.value.join("/"),
+		onMatch(_item, index) {
+			const menuPath = activeMenuPath.value;
+			if (setFocusedIndex(index, menuPath)) submenus.closeSubmenusAfter(menuPath);
+		}
+	});
 	const { activeDescendantId, focusMenu, focusTrigger, getItemId, getSubmenuId, getItemElement, getSubmenuElement, isSubmenuOpeningLeft, getMenuActiveDescendant } = useDropdownMenuDom({
 		menuId,
 		rootRef,
@@ -2447,6 +2468,7 @@ function useDropdownMenu(props, emit = {}) {
 		getItemAtPath,
 		focusItem,
 		moveFocus,
+		handleTypeahead: typeahead.handleKey,
 		submenus,
 		hoverIntent,
 		disclosure,
@@ -2510,6 +2532,9 @@ function useDropdownMenu(props, emit = {}) {
 			target.removeEventListener("keydown", onTriggerKeydown);
 		});
 	}, { flush: "sync" });
+	watch(isVisible, (visible) => {
+		if (!visible) typeahead.reset();
+	}, { flush: "sync" });
 	watch([
 		isExplicitTarget,
 		targetElement,

package/dist/icon-button.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-button[data-v-cda9a84b] {
+.rp-button[data-v-5d5bd5fa] {
     --_rp-button-bg: var(--rp-color-default);
     --_rp-button-bg-hover: var(--rp-color-default-hover);
     --_rp-button-bg-active: var(--rp-color-disabled);
@@ -7,6 +7,8 @@
     --_rp-button-border-hover: var(--_rp-button-border);
     --_rp-button-border-active: var(--_rp-button-border-hover);
     --_rp-button-fg: var(--rp-color-default-color);
+    --_rp-button-fg-hover: var(--_rp-button-fg);
+    --_rp-button-fg-active: var(--_rp-button-fg-hover);
     --_rp-button-height: var(--rp-size-control-md);
     --_rp-button-padding-x: 22px;
     --_rp-button-font-size: var(--rp-font-size-md);
@@ -29,7 +31,7 @@
     color: var(--_rp-button-fg);
     cursor: pointer;
     text-decoration: none;
-    transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
     white-space: nowrap;
     user-select: none;
     height: var(--_rp-button-height);
@@ -37,108 +39,110 @@
     font-size: var(--_rp-button-font-size);
     border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-cda9a84b]:hover:not(:disabled):not(.rp-button--disabled) {
+.rp-button[data-v-5d5bd5fa]:hover:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-hover);
     border-color: var(--_rp-button-border-hover);
     box-shadow: var(--_rp-button-shadow-hover);
+    color: var(--_rp-button-fg-hover);
 }
-.rp-button[data-v-cda9a84b]:active:not(:disabled):not(.rp-button--disabled) {
+.rp-button[data-v-5d5bd5fa]:active:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-active);
     border-color: var(--_rp-button-border-active);
     box-shadow: var(--_rp-button-shadow-active);
+    color: var(--_rp-button-fg-active);
     transform: translateY(1px);
 }
-.rp-button--size-xs[data-v-cda9a84b] {
+.rp-button--size-xs[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-xs);
     --_rp-button-padding-x: 14px;
     --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-cda9a84b] {
+.rp-button--size-sm[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-sm);
     --_rp-button-padding-x: 18px;
     --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-md[data-v-cda9a84b] {
+.rp-button--size-md[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-md);
     --_rp-button-padding-x: 22px;
     --_rp-button-font-size: var(--rp-font-size-md);
 }
-.rp-button--size-lg[data-v-cda9a84b] {
+.rp-button--size-lg[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-lg);
     --_rp-button-padding-x: 26px;
     --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-cda9a84b] {
+.rp-button--size-xl[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-xl);
     --_rp-button-padding-x: 32px;
     --_rp-button-font-size: var(--rp-font-size-xl);
 }
-.rp-button--radius-xs[data-v-cda9a84b] {
+.rp-button--radius-xs[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-cda9a84b] {
+.rp-button--radius-sm[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-cda9a84b] {
+.rp-button--radius-md[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-cda9a84b] {
+.rp-button--radius-lg[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-cda9a84b] {
+.rp-button--radius-xl[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--subtle[data-v-cda9a84b] {
+.rp-button--subtle[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-cda9a84b] {
+.rp-button--surface[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-cda9a84b] {
+.rp-button--outline[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-cda9a84b] {
+.rp-button--ghost[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-cda9a84b] {
+.rp-button--plain[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-cda9a84b]:disabled, .rp-button--disabled[data-v-cda9a84b] {
+.rp-button[data-v-5d5bd5fa]:disabled, .rp-button--disabled[data-v-5d5bd5fa] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
 }
-.rp-button[data-v-cda9a84b]:focus-visible {
+.rp-button[data-v-5d5bd5fa]: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-button--loading .rp-button__content[data-v-cda9a84b] {
+.rp-button--loading .rp-button__content[data-v-5d5bd5fa] {
     opacity: 0;
 }
-.rp-button__content[data-v-cda9a84b] {
+.rp-button__content[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--rp-spacing-2);
 }
-.rp-button__left[data-v-cda9a84b], .rp-button__right[data-v-cda9a84b] {
+.rp-button__left[data-v-5d5bd5fa], .rp-button__right[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
 }
-.rp-button__loading[data-v-cda9a84b] {
+.rp-button__loading[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -147,49 +151,49 @@
     left: 50%;
     translate: -50% -50%;
 }
-.rp-button__spinner[data-v-cda9a84b] {
+.rp-button__spinner[data-v-5d5bd5fa] {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-cda9a84b 700ms linear infinite;
+    animation: rp-spinner-spin-5d5bd5fa 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-cda9a84b {
+@keyframes rp-spinner-spin-5d5bd5fa {
 to {
       transform: rotate(360deg);
 }
 }
 }@layer ropav.components {
-.rp-icon-button[data-v-cda9a84b] {
+.rp-icon-button[data-v-5d5bd5fa] {
     width: var(--_rp-button-height);
     padding: 0;
 }
-.rp-icon-button__icon[data-v-cda9a84b] {
+.rp-icon-button__icon[data-v-5d5bd5fa] {
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-icon-button__icon[data-v-cda9a84b] {
+.rp-icon-button__icon[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
 }
-.rp-icon-button__icon[data-v-cda9a84b] >  svg {
+.rp-icon-button__icon[data-v-5d5bd5fa] >  svg {
     display: block;
     width: 1em;
     height: 1em;
 }
-.rp-icon-button__spinner[data-v-cda9a84b] {
+.rp-icon-button__spinner[data-v-5d5bd5fa] {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-cda9a84b 700ms linear infinite;
+    animation: rp-spinner-spin-5d5bd5fa 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-cda9a84b {
+@keyframes rp-spinner-spin-5d5bd5fa {
 to {
       transform: rotate(360deg);
 }

package/dist/icon-button.js

@@ -5,8 +5,8 @@ import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-hel
 import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/icon-button/icon-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-cda9a84b>");
-var t1 = template("<button data-v-cda9a84b>", 1);
+var t0 = template("<span data-v-5d5bd5fa>");
+var t1 = template("<button data-v-5d5bd5fa>", 1);
 //#endregion
 //#region src/components/icon-button/icon-button.vue
 var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -17,7 +17,11 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		ariaLabel: {},
 		variant: {},
 		color: {},
-		autoContrast: { type: Boolean },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: {},
 		size: {},
 		radius: {},
 		type: { default: "button" },
@@ -39,7 +43,7 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}), "rp-icon-button"]);
-		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast));
+		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast, props.contrastColor));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -65,6 +69,6 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		}, 261);
 		return n6;
 	}
-}), [["__scopeId", "data-v-cda9a84b"]]);
+}), [["__scopeId", "data-v-5d5bd5fa"]]);
 //#endregion
 export { icon_button_default as t };

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export * from './components/input/index.js';
 export * from './components/modal/index.js';
 export * from './components/number-input/index.js';
 export * from './components/overlay/index.js';
+export * from './components/pagination/index.js';
 export * from './components/popover/index.js';
 export * from './components/progress/index.js';
 export * from './components/radio/index.js';

package/dist/index.js

@@ -34,6 +34,7 @@ import { t as scroll_area_default } from "./scroll-area.js";
 import { n as modal_default, t as modalParts } from "./modal.js";
 import { n as number_input_default, t as numberInputParts } from "./number-input.js";
 import { n as overlay_layer_provider_default, t as overlayParts } from "./overlay2.js";
+import { a as pagination_default, c as normalizePaginationTotal, i as paginationSizes, l as usePagination, n as paginationParts, o as getPaginationItems, r as paginationRadiuses, s as normalizePaginationPage, t as paginationColors } from "./pagination.js";
 import { n as popoverPlacements, t as popoverParts } from "./popover2.js";
 import { a as progress_default, i as progressSizes, n as progressParts, r as progressRadiuses, t as progressColors } from "./progress.js";
 import { i as radioParts, n as radio_default, r as radioGroupParts, t as radio_group_default } from "./radio.js";
@@ -47,4 +48,4 @@ import { t as teleport_provider_default } from "./teleport-provider.js";
 import { n as textarea_default, t as textareaParts } from "./textarea.js";
 import { a as toastColors, c as toastRadiuses, d as toastViewportParts, f as createToastStore, i as useToast, l as toastTypes, n as toast_viewport_default, o as toastParts, p as toast_default, r as toast_provider_default, s as toastPositions, t as useToastState, u as toastVariants } from "./toast.js";
 import { t as tooltipParts } from "./tooltip2.js";
-export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, scroll_area_default as ScrollArea, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, pagination_default as Pagination, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, scroll_area_default as ScrollArea, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, getPaginationItems, iconButtonParts, inputParts, modalParts, normalizePaginationPage, normalizePaginationTotal, numberInputParts, overlayParts, paginationColors, paginationParts, paginationRadiuses, paginationSizes, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, scrollAreaParts, scrollAreaScrollbars, scrollAreaTypes, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, usePagination, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };

package/dist/input.js

@@ -2,7 +2,8 @@ import './input.css';
 import { t as bem } from "./bem.js";
 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 { a as useTextFormControl, o as useControllableValue, t as claimNestedFormControlOwner } from "./useFormControl.js";
+import { t as useControllableValue } from "./useControllableValue.js";
+import { a as useTextFormControl, t as claimNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/input/useInput.ts

package/dist/number-input.js

@@ -3,7 +3,8 @@ import { t as bem } from "./bem.js";
 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 minus_default } from "./minus.js";
-import { i as useFormControl, n as provideNestedFormControlOwner, o as useControllableValue } from "./useFormControl.js";
+import { t as useControllableValue } from "./useControllableValue.js";
+import { i as useFormControl, n as provideNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { t as input_default } from "./input.js";
 import { child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, delegateEvents, markRaw, on, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, withModifiers, withVaporModifiers } from "vue";