ropav 0.1.4 → 0.1.6

package/dist/slider.js

@@ -1,9 +1,10 @@
 import './slider.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 { n as getComponentColorValue, t as componentColors } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
+import { n as getComponentColorRoles, r as getComponentColorValue, t as componentColors } from "./componentColors.js";
+import { i as useFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { i as useDelayedOpen, n as resolveTooltipColorStyleWithContrast, r as resolveTooltipOffsetStyle, t as tooltip_default } from "./tooltip.js";
 import { applyVShow, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setClass, setDynamicProps, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toRef, txt, unref, useId, useSlots, watch } from "vue";
@@ -66,7 +67,9 @@ function getSliderThumbMode(thumb) {
 function getSliderMarkStyle(percent, color, properties) {
 	const style = { [properties.position]: `${percent}%` };
 	const colorValue = getComponentColorValue(color);
-	for (const property of properties.colors) setSliderStyleValue(style, property, colorValue);
+	const foreground = getComponentColorRoles(color)?.foreground;
+	for (const property of properties.decorativeColors) setSliderStyleValue(style, property, colorValue);
+	for (const property of properties.foregroundColors) setSliderStyleValue(style, property, foreground);
 	return style;
 }
 function createSliderMarkItems(marks, min, max, isFilled, properties) {
@@ -139,12 +142,8 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 	const ariaValueText = computed(() => getSliderAriaValueText(normalizedValue.value, props.ariaValueText, props.formatValue));
 	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (_value, percent) => percent <= valuePercent.value, {
 		position: "--_rp-slider-mark-position",
-		colors: [
-			"--_rp-slider-mark-color",
-			"--_rp-slider-mark-label-color",
-			"--_rp-slider-mark-filled-label-color",
-			"--_rp-slider-mark-ring-color"
-		]
+		decorativeColors: ["--_rp-slider-mark-color", "--_rp-slider-mark-ring-color"],
+		foregroundColors: ["--_rp-slider-mark-label-color", "--_rp-slider-mark-filled-label-color"]
 	}));
 	const tooltipOptions = computed(() => getSliderTooltipOptions(props.tooltip));
 	const tooltipAnchor = computed(() => getSliderTooltipAnchor(props.tooltip));
@@ -185,6 +184,8 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 	const tooltipPlacement = computed(() => tooltipOptions.value.placement ?? (props.orientation === "vertical" ? "left" : "top"));
 	const tooltipId = computed(() => tooltipOptions.value.id);
 	const tooltipColor = computed(() => tooltipOptions.value.color);
+	const tooltipAutoContrast = computed(() => tooltipOptions.value.autoContrast);
+	const tooltipContrastColor = computed(() => tooltipOptions.value.contrastColor);
 	const tooltipOffset = computed(() => tooltipOptions.value.offset);
 	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
 	const tooltipValue = computed(() => tooltipAnchor.value === "pointer" && previewAvailable.value ? previewValue.value : normalizedValue.value);
@@ -363,6 +364,8 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 		tooltipPlacement,
 		tooltipId,
 		tooltipColor,
+		tooltipAutoContrast,
+		tooltipContrastColor,
 		tooltipOffset,
 		tooltipOpenDelay,
 		tooltipArrow,
@@ -382,17 +385,17 @@ function useSlider(props, emitUpdate, getValue = () => props.modelValue ?? props
 }
 //#endregion
 //#region src/components/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<span data-v-3864baf4>");
-var t1$2 = template("<span data-v-3864baf4 class=rp-slider__header>");
-var t2$2 = template("<span data-v-3864baf4 class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
-var t3$2 = template("<span data-v-3864baf4 class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
-var t4$2 = template("<span data-v-3864baf4 class=rp-slider__travel aria-hidden=true>", 2);
-var t5$1 = template("<span data-v-3864baf4> ");
-var t6$1 = template("<span data-v-3864baf4><span data-v-3864baf4 class=rp-slider__mark-dot></span>");
-var t7$1 = template("<span data-v-3864baf4 class=rp-slider__marks aria-hidden=true>");
-var t8$1 = template("<span data-v-3864baf4 class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
+var t0$2 = template("<span data-v-c850c027>");
+var t1$2 = template("<span data-v-c850c027 class=rp-slider__header>");
+var t2$2 = template("<span data-v-c850c027 class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
+var t3$2 = template("<span data-v-c850c027 class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
+var t4$2 = template("<span data-v-c850c027 class=rp-slider__travel aria-hidden=true>", 2);
+var t5$1 = template("<span data-v-c850c027> ");
+var t6$1 = template("<span data-v-c850c027><span data-v-c850c027 class=rp-slider__mark-dot></span>");
+var t7$1 = template("<span data-v-c850c027 class=rp-slider__marks aria-hidden=true>");
+var t8$1 = template("<span data-v-c850c027 class=rp-slider__tooltip-anchor aria-hidden=true></span>", 2);
 var t9$1 = template(" ");
-var t10 = template("<label data-v-3864baf4><span data-v-3864baf4><span data-v-3864baf4 class=rp-slider__rail aria-hidden=true></span><!><span data-v-3864baf4></span><!><input data-v-3864baf4><!><span data-v-3864baf4><span data-v-3864baf4 class=rp-slider__thumb-content>", 1);
+var t10 = template("<label data-v-c850c027><span data-v-c850c027><span data-v-c850c027 class=rp-slider__rail aria-hidden=true></span><!><span data-v-c850c027></span><!><input data-v-c850c027><!><span data-v-c850c027><span data-v-c850c027 class=rp-slider__thumb-content>", 1);
 delegateEvents("pointerdown", "pointermove", "focusin", "focusout", "keydown");
 //#endregion
 //#region src/components/slider/slider.vue
@@ -462,7 +465,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			defaultValue: () => props.defaultValue ?? props.min,
 			onChange: (value) => emit("update:modelValue", value)
 		});
-		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTooltipPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		const { control, nativeMin, nativeMax, nativeStep, rootClass, normalizedValue, valuePercent, formattedValue, ariaValueText, markItems, thumbMode, trackSlotProps, trackStyle, trackHovered, dragging, tooltipVisible, tooltipOpen, tooltipAnchor, tooltipPlacement, tooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipOpenDelay, tooltipArrow, tooltipValue, tooltipPercent, tooltipFormattedValue, tooltipContent, onInput, onTooltipPointerDown, onTooltipPointerMove, onTooltipTrackEnter, onTooltipTrackLeave, onTooltipFocusIn, onTooltipFocusOut, onTooltipKeydown } = useSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
 		useFormControl({
 			elements: () => [inputRef.value],
 			isControlled: () => controllable.isControlled.value,
@@ -643,6 +646,8 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				content: () => unref(tooltipContent),
 				placement: () => unref(tooltipPlacement),
 				color: () => unref(tooltipColor),
+				"auto-contrast": () => unref(tooltipAutoContrast),
+				"contrast-color": () => unref(tooltipContrastColor),
 				offset: () => unref(tooltipOffset),
 				open: () => unref(tooltipOpen),
 				"open-delay": () => unref(tooltipOpenDelay),
@@ -675,7 +680,7 @@ var slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		n45.$evtkeydown = createInvoker((e) => unref(onTooltipKeydown)(e));
 		return n48;
 	}
-}), [["__scopeId", "data-v-3864baf4"]]);
+}), [["__scopeId", "data-v-c850c027"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -867,11 +872,11 @@ function useRangeSliderTooltipCollision({ enabled, lower, orientation, placement
 }
 //#endregion
 //#region src/components/slider/range-slider-tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> </span>");
-var t1$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-value> ");
-var t2$1 = template("<span data-v-ce70c540 class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
+var t0$1 = template("<span data-v-031ced3e class=rp-range-slider__tooltip-merged-value> </span>");
+var t1$1 = template("<span data-v-031ced3e class=rp-range-slider__tooltip-merged-value> ");
+var t2$1 = template("<span data-v-031ced3e class=rp-range-slider__tooltip-merged-separator>–</span>", 2);
 var t3$1 = template(" ");
-var t4$1 = template("<span data-v-ce70c540 aria-hidden=true><span data-v-ce70c540 data-thumb=lower><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=upper><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-ce70c540 data-thumb=merged><span data-v-ce70c540 class=rp-range-slider__tooltip-anchor></span><span data-v-ce70c540 class=rp-tooltip__content aria-hidden=true>", 1);
+var t4$1 = template("<span data-v-031ced3e aria-hidden=true><span data-v-031ced3e data-thumb=lower><span data-v-031ced3e class=rp-range-slider__tooltip-anchor></span><span data-v-031ced3e class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-031ced3e data-thumb=upper><span data-v-031ced3e class=rp-range-slider__tooltip-anchor></span><span data-v-031ced3e class=rp-tooltip__content aria-hidden=true> </span></span><span data-v-031ced3e data-thumb=merged><span data-v-031ced3e class=rp-range-slider__tooltip-anchor></span><span data-v-031ced3e class=rp-tooltip__content aria-hidden=true>", 1);
 //#endregion
 //#region src/components/slider/range-slider-tooltip.vue
 var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -883,6 +888,11 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			default: false
 		},
 		color: { default: void 0 },
+		autoContrast: {
+			type: Boolean,
+			default: true
+		},
+		contrastColor: { default: void 0 },
 		content: {},
 		ids: {},
 		mergedContent: {},
@@ -924,7 +934,7 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		}));
 		const contentStyle = computed(() => ({
 			...resolveTooltipOffsetStyle(props.offset),
-			...resolveTooltipColorStyleWithContrast(props.color, void 0)
+			...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast, props.contrastColor)
 		}));
 		const { tooltipsOverlapping, mergedArrowOffset, mergedMinSize } = useRangeSliderTooltipCollision({
 			enabled: toRef(props, "open"),
@@ -1041,7 +1051,7 @@ var range_slider_tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 		_setTemplateRef(n16, tooltipLayerRef, null, "tooltipLayerRef");
 		return n16;
 	}
-}), [["__scopeId", "data-v-ce70c540"]]);
+}), [["__scopeId", "data-v-031ced3e"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderPointer.ts
 function useRangeSliderPointer(options) {
@@ -1390,12 +1400,8 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 	});
 	const markItems = computed(() => createSliderMarkItems(props.marks, bounds.value.min, bounds.value.max, (value) => value >= normalizedValue.value[0] && value <= normalizedValue.value[1], {
 		position: "--_rp-range-slider-mark-position",
-		colors: [
-			"--_rp-range-slider-mark-color",
-			"--_rp-range-slider-mark-label-color",
-			"--_rp-range-slider-mark-filled-label-color",
-			"--_rp-range-slider-mark-ring-color"
-		]
+		decorativeColors: ["--_rp-range-slider-mark-color", "--_rp-range-slider-mark-ring-color"],
+		foregroundColors: ["--_rp-range-slider-mark-label-color", "--_rp-range-slider-mark-filled-label-color"]
 	}));
 	const hasMarkLabels = computed(() => markItems.value.some((mark) => mark.hasLabel));
 	const trackSlotProps = computed(() => ({
@@ -1434,6 +1440,8 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 		return baseId ? `${baseId}-merged` : void 0;
 	});
 	const tooltipColor = computed(() => tooltipOptions.value.color);
+	const tooltipAutoContrast = computed(() => tooltipOptions.value.autoContrast);
+	const tooltipContrastColor = computed(() => tooltipOptions.value.contrastColor);
 	const tooltipOffset = computed(() => tooltipOptions.value.offset);
 	const tooltipArrow = computed(() => tooltipOptions.value.arrow ?? false);
 	const tooltipContent = computed(() => [String(formattedValue.value[0]), String(formattedValue.value[1])]);
@@ -1586,6 +1594,8 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 		tooltipIds,
 		mergedTooltipId,
 		tooltipColor,
+		tooltipAutoContrast,
+		tooltipContrastColor,
 		tooltipOffset,
 		tooltipOpenDelay,
 		tooltipArrow,
@@ -1602,16 +1612,16 @@ function useRangeSlider(props, emitUpdate, getValue = () => props.modelValue ??
 }
 //#endregion
 //#region src/components/slider/range-slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-6bfae0e8>");
-var t1 = template("<span data-v-6bfae0e8 class=rp-range-slider__header>");
-var t2 = template("<span data-v-6bfae0e8 class=\"rp-range-slider__track-layer rp-range-slider__track-underlay\"aria-hidden=true>");
-var t3 = template("<span data-v-6bfae0e8 class=\"rp-range-slider__track-layer rp-range-slider__track-overlay\"aria-hidden=true>");
-var t4 = template("<input data-v-6bfae0e8>");
-var t5 = template("<span data-v-6bfae0e8> ");
-var t6 = template("<span data-v-6bfae0e8><span data-v-6bfae0e8 class=rp-range-slider__mark-dot></span>");
-var t7 = template("<span data-v-6bfae0e8 class=rp-range-slider__marks aria-hidden=true>");
-var t8 = template("<span data-v-6bfae0e8><span data-v-6bfae0e8 class=rp-range-slider__thumb-content>");
-var t9 = template("<div data-v-6bfae0e8><span data-v-6bfae0e8><span data-v-6bfae0e8 class=rp-range-slider__rail aria-hidden=true></span><!><span data-v-6bfae0e8></span><!><span data-v-6bfae0e8 class=rp-range-slider__thumbs aria-hidden=true>", 1);
+var t0 = template("<span data-v-ec20f482>");
+var t1 = template("<span data-v-ec20f482 class=rp-range-slider__header>");
+var t2 = template("<span data-v-ec20f482 class=\"rp-range-slider__track-layer rp-range-slider__track-underlay\"aria-hidden=true>");
+var t3 = template("<span data-v-ec20f482 class=\"rp-range-slider__track-layer rp-range-slider__track-overlay\"aria-hidden=true>");
+var t4 = template("<input data-v-ec20f482>");
+var t5 = template("<span data-v-ec20f482> ");
+var t6 = template("<span data-v-ec20f482><span data-v-ec20f482 class=rp-range-slider__mark-dot></span>");
+var t7 = template("<span data-v-ec20f482 class=rp-range-slider__marks aria-hidden=true>");
+var t8 = template("<span data-v-ec20f482><span data-v-ec20f482 class=rp-range-slider__thumb-content>");
+var t9 = template("<div data-v-ec20f482><span data-v-ec20f482><span data-v-ec20f482 class=rp-range-slider__rail aria-hidden=true></span><!><span data-v-ec20f482></span><!><span data-v-ec20f482 class=rp-range-slider__thumbs aria-hidden=true>", 1);
 delegateEvents("pointerdown");
 //#endregion
 //#region src/components/slider/range-slider.vue
@@ -1680,7 +1690,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			defaultValue: () => props.defaultValue ?? [props.min, props.max],
 			onChange: (value) => emit("update:modelValue", value)
 		});
-		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackSlotProps, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		const { control, nativeMin, nativeMax, nativeStep, nativeNames, nativeIds, rootClass, normalizedValue, valuePercent, formattedValue, ariaLabels, ariaValueText, markItems, trackSlotProps, trackStyle, activeThumb, tooltipVisible, tooltipOpen, tooltipPlacement, tooltipIds, mergedTooltipId, tooltipColor, tooltipAutoContrast, tooltipContrastColor, tooltipOffset, tooltipArrow, tooltipContent, mergedTooltipContent, onInput, onTrackPointerDown, onTooltipFocus, onTooltipBlur, onTooltipTrackMouseEnter, onTooltipTrackMouseLeave, onTooltipKeydown } = useRangeSlider(props, (value) => controllable.setValue(value), () => controllable.value.value);
 		const validationMessages = computed(() => Array.isArray(props.validationMessage) ? props.validationMessage : [props.validationMessage, props.validationMessage]);
 		function normalizeInitialValue(value = controllable.initialValue) {
 			return normalizeRangeSliderValue(value, props.min, props.max, props.step, props.minRange);
@@ -1916,6 +1926,8 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return createComponent(range_slider_tooltip_default, {
 				arrow: () => unref(tooltipArrow),
 				color: () => unref(tooltipColor),
+				"auto-contrast": () => unref(tooltipAutoContrast),
+				"contrast-color": () => unref(tooltipContrastColor),
 				content: () => unref(tooltipContent),
 				ids: () => unref(tooltipIds),
 				"merged-content": () => unref(mergedTooltipContent),
@@ -1935,7 +1947,7 @@ var range_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		on(n42, "mouseleave", (e) => unref(onTooltipTrackMouseLeave)(e));
 		return n44;
 	}
-}), [["__scopeId", "data-v-6bfae0e8"]]);
+}), [["__scopeId", "data-v-ec20f482"]]);
 //#endregion
 //#region src/components/slider/types.ts
 var sliderParts = [

package/dist/switch.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-switch[data-v-81b33803] {
+.rp-switch[data-v-524fc431] {
     --_rp-switch-color: var(--rp-color-control-selected-bg);
     --_rp-switch-font-size: var(--rp-font-size-md);
     --_rp-switch-default-track-width: 46px;
@@ -26,15 +26,15 @@
     font-family: var(--rp-font-family);
     user-select: none;
 }
-.rp-switch--disabled[data-v-81b33803] {
+.rp-switch--disabled[data-v-524fc431] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-switch[data-v-81b33803] {
+.rp-switch[data-v-524fc431] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-switch-font-size);
 }
-.rp-switch__native[data-v-81b33803] {
+.rp-switch__native[data-v-524fc431] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -46,11 +46,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-524fc431] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-switch__track[data-v-81b33803] {
+.rp-switch__track[data-v-524fc431] {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -61,17 +61,17 @@
     border-radius: var(--rp-radius-full);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__track[data-v-81b33803] {
+.rp-switch--checked .rp-switch__track[data-v-524fc431] {
     background-color: var(--_rp-switch-color);
 }
-.rp-switch--invalid .rp-switch__track[data-v-81b33803] {
+.rp-switch--invalid .rp-switch__track[data-v-524fc431] {
     outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
     outline-offset: var(--_rp-switch-thumb-offset);
 }
-.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-524fc431] {
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
 }
-.rp-switch__thumb[data-v-81b33803] {
+.rp-switch__thumb[data-v-524fc431] {
     position: absolute;
     left: var(--_rp-switch-thumb-offset);
     width: var(--_rp-switch-thumb-size);
@@ -81,38 +81,38 @@
     box-shadow: var(--rp-shadow-sm);
     transition: transform var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__thumb[data-v-81b33803] {
+.rp-switch--checked .rp-switch__thumb[data-v-524fc431] {
     transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
 }
-.rp-switch__label[data-v-81b33803] {
+.rp-switch__label[data-v-524fc431] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-switch--size-xs[data-v-81b33803] {
+.rp-switch--size-xs[data-v-524fc431] {
     --_rp-switch-default-track-width: 32px;
     --_rp-switch-default-track-height: 16px;
     --_rp-switch-default-thumb-size: 12px;
     --_rp-switch-font-size: var(--rp-font-size-xs);
 }
-.rp-switch--size-sm[data-v-81b33803] {
+.rp-switch--size-sm[data-v-524fc431] {
     --_rp-switch-default-track-width: 38px;
     --_rp-switch-default-track-height: 20px;
     --_rp-switch-default-thumb-size: 14px;
     --_rp-switch-font-size: var(--rp-font-size-sm);
 }
-.rp-switch--size-md[data-v-81b33803] {
+.rp-switch--size-md[data-v-524fc431] {
     --_rp-switch-default-track-width: 46px;
     --_rp-switch-default-track-height: 24px;
     --_rp-switch-default-thumb-size: 18px;
     --_rp-switch-font-size: var(--rp-font-size-md);
 }
-.rp-switch--size-lg[data-v-81b33803] {
+.rp-switch--size-lg[data-v-524fc431] {
     --_rp-switch-default-track-width: 56px;
     --_rp-switch-default-track-height: 30px;
     --_rp-switch-default-thumb-size: 22px;
     --_rp-switch-font-size: var(--rp-font-size-lg);
 }
-.rp-switch--size-xl[data-v-81b33803] {
+.rp-switch--size-xl[data-v-524fc431] {
     --_rp-switch-default-track-width: 72px;
     --_rp-switch-default-track-height: 36px;
     --_rp-switch-default-thumb-size: 28px;

package/dist/switch.js

@@ -1,9 +1,10 @@
 import './switch.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 { n as getComponentColorValue } from "./componentColors.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
+import { r as getComponentColorValue } from "./componentColors.js";
+import { r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, next, nextTick, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
@@ -43,8 +44,8 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-81b33803>");
-var t1 = template("<label data-v-81b33803><input data-v-81b33803><span data-v-81b33803><span data-v-81b33803></span></span>", 1);
+var t0 = template("<span data-v-524fc431>");
+var t1 = template("<label data-v-524fc431><input data-v-524fc431><span data-v-524fc431><span data-v-524fc431></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -170,7 +171,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n7;
 	}
-}), [["__scopeId", "data-v-81b33803"]]);
+}), [["__scopeId", "data-v-524fc431"]]);
 //#endregion
 //#region src/components/switch/types.ts
 var switchParts = [

package/dist/tabs.css

@@ -17,7 +17,7 @@
     gap: var(--rp-spacing-5);
 }
 }@layer ropav.components {
-.rp-tabs-content[data-v-7206185c] {
+.rp-tabs-content[data-v-741d0283] {
     box-sizing: border-box;
     min-width: 0;
     color: var(--rp-color-text);
@@ -25,12 +25,12 @@
     font-size: var(--rp-font-size-md);
     line-height: var(--rp-line-height-md);
 }
-.rp-tabs-content[data-v-7206185c]:focus-visible {
+.rp-tabs-content[data-v-741d0283]: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-tabs-content--vertical[data-v-7206185c] {
+.rp-tabs-content--vertical[data-v-741d0283] {
     flex: 1 1 0;
 }
 }@layer ropav.components {

package/dist/tabs.js

@@ -1,8 +1,9 @@
 import './tabs.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 _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useRequiredInject } from "./useRequiredInject.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 scroll_area_default } from "./scroll-area.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, extend, mergeProps, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
 //#region src/components/tabs/useTabs.ts
@@ -116,7 +117,7 @@ function getNextTrigger(list, currentTrigger, key, orientation) {
 	if (key === "End") return triggers[triggers.length - 1];
 	const direction = ORIENTATION_NAVIGATION_KEYS[orientation][key];
 	if (!direction) return void 0;
-	return triggers[(currentIndex + direction + triggers.length) % triggers.length];
+	return triggers[(currentIndex + (orientation === "horizontal" && list.ownerDocument.defaultView?.getComputedStyle(list).direction === "rtl" ? -direction : direction) + triggers.length) % triggers.length];
 }
 function useTabsItem(componentName, props, suffix) {
 	const group = useRequiredInject(tabsKey, componentName);
@@ -133,10 +134,15 @@ function useTabsItem(componentName, props, suffix) {
 function useTabs(props, emitUpdate) {
 	const triggerRegistry = useTabsRegistry();
 	const contentRegistry = useTabsRegistry();
-	const { items: triggers, unregister: unregisterTrigger } = triggerRegistry;
+	const { items: triggers } = triggerRegistry;
 	const { items: contents, register: registerContent, unregister: unregisterContent } = contentRegistry;
-	const isControlled = computed(() => props.modelValue !== void 0);
-	const uncontrolledValue = ref(props.defaultValue ?? null);
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: (value) => {
+			if (value !== null) emitUpdate(value);
+		}
+	});
 	const isDisabled = computed(() => Boolean(props.disabled));
 	const size = computed(() => props.size ?? DEFAULT_SIZE);
 	const variant = computed(() => props.variant ?? DEFAULT_VARIANT);
@@ -144,7 +150,7 @@ function useTabs(props, emitUpdate) {
 	const placement = computed(() => props.placement ?? DEFAULT_PLACEMENT);
 	const align = computed(() => props.align);
 	const activationMode = computed(() => props.activationMode ?? DEFAULT_ACTIVATION_MODE);
-	const selectedValue = computed(() => isControlled.value ? props.modelValue ?? null : uncontrolledValue.value);
+	const selectedValue = controllable.value;
 	const firstEnabledTrigger = computed(() => triggers.value.find((trigger) => !trigger.disabled));
 	const selectedEnabledTrigger = computed(() => {
 		const trigger = findRegistration(triggers.value, selectedValue.value);
@@ -171,16 +177,15 @@ function useTabs(props, emitUpdate) {
 		align: align.value ?? getDefaultAlign(orientation.value),
 		select: selectValue
 	}));
-	function syncUncontrolledValue() {
-		if (isControlled.value || isDisabled.value) return;
+	function syncUncontrolledValue(reconcileMissing = false) {
+		if (controllable.isControlled.value || isDisabled.value) return;
 		const selectedTrigger = findRegistration(triggers.value, selectedValue.value);
-		if (selectedValue.value != null && !selectedTrigger?.disabled) return;
-		uncontrolledValue.value = firstEnabledTrigger.value?.value ?? null;
+		if (selectedValue.value != null && (selectedTrigger ? !selectedTrigger.disabled : !reconcileMissing)) return;
+		controllable.resetValue(firstEnabledTrigger.value?.value ?? null);
 	}
 	function setValue(value) {
 		if (isDisabled.value || value === selectedValue.value) return;
-		if (!isControlled.value) uncontrolledValue.value = value;
-		emitUpdate(value);
+		controllable.setValue(value);
 	}
 	function selectValue(value) {
 		const trigger = findRegistration(triggers.value, value);
@@ -195,6 +200,11 @@ function useTabs(props, emitUpdate) {
 		triggerRegistry.register(registration);
 		syncUncontrolledValue();
 	}
+	function unregisterTrigger(id) {
+		const trigger = triggers.value.find((registration) => registration.id === id);
+		triggerRegistry.unregister(id);
+		syncUncontrolledValue(trigger?.value === selectedValue.value);
+	}
 	function onListKeydown(event) {
 		const list = event.currentTarget;
 		if (!list || isDisabled.value) return;
@@ -442,7 +452,7 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 }), [["__scopeId", "data-v-163486d1"]]);
 //#endregion
 //#region src/components/tabs/tabs-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<section data-v-7206185c>", 1);
+var t0$1 = template("<div data-v-741d0283>", 1);
 //#endregion
 //#region src/components/tabs/tabs-content.vue
 var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -475,7 +485,7 @@ var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return n3;
 		});
 	}
-}), [["__scopeId", "data-v-7206185c"]]);
+}), [["__scopeId", "data-v-741d0283"]]);
 //#endregion
 //#region src/components/tabs/tabs-list.vue
 var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({