ropav 0.1.5 → 0.1.6

package/dist/slider.js

@@ -1,9 +1,9 @@
 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 { t as useControllableValue } from "./useControllableValue.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";
@@ -67,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) {
@@ -140,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));
@@ -387,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-7833309e>");
-var t1$2 = template("<span data-v-7833309e class=rp-slider__header>");
-var t2$2 = template("<span data-v-7833309e class=\"rp-slider__track-layer rp-slider__track-underlay\"aria-hidden=true>");
-var t3$2 = template("<span data-v-7833309e class=\"rp-slider__track-layer rp-slider__track-overlay\"aria-hidden=true>");
-var t4$2 = template("<span data-v-7833309e class=rp-slider__travel aria-hidden=true>", 2);
-var t5$1 = template("<span data-v-7833309e> ");
-var t6$1 = template("<span data-v-7833309e><span data-v-7833309e class=rp-slider__mark-dot></span>");
-var t7$1 = template("<span data-v-7833309e class=rp-slider__marks aria-hidden=true>");
-var t8$1 = template("<span data-v-7833309e 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-7833309e><span data-v-7833309e><span data-v-7833309e class=rp-slider__rail aria-hidden=true></span><!><span data-v-7833309e></span><!><input data-v-7833309e><!><span data-v-7833309e><span data-v-7833309e 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
@@ -682,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-7833309e"]]);
+}), [["__scopeId", "data-v-c850c027"]]);
 //#endregion
 //#region src/components/slider/useRangeSliderTooltipCollision.ts
 var TOOLTIP_COLLISION_GAP = 4;
@@ -1402,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(() => ({
@@ -1618,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-458ba46f>");
-var t1 = template("<span data-v-458ba46f class=rp-range-slider__header>");
-var t2 = template("<span data-v-458ba46f class=\"rp-range-slider__track-layer rp-range-slider__track-underlay\"aria-hidden=true>");
-var t3 = template("<span data-v-458ba46f class=\"rp-range-slider__track-layer rp-range-slider__track-overlay\"aria-hidden=true>");
-var t4 = template("<input data-v-458ba46f>");
-var t5 = template("<span data-v-458ba46f> ");
-var t6 = template("<span data-v-458ba46f><span data-v-458ba46f class=rp-range-slider__mark-dot></span>");
-var t7 = template("<span data-v-458ba46f class=rp-range-slider__marks aria-hidden=true>");
-var t8 = template("<span data-v-458ba46f><span data-v-458ba46f class=rp-range-slider__thumb-content>");
-var t9 = template("<div data-v-458ba46f><span data-v-458ba46f><span data-v-458ba46f class=rp-range-slider__rail aria-hidden=true></span><!><span data-v-458ba46f></span><!><span data-v-458ba46f 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
@@ -1953,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-458ba46f"]]);
+}), [["__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,9 @@
 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 { t as useControllableValue } from "./useControllableValue.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";
@@ -44,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({
@@ -171,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({

package/dist/textarea.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-textarea[data-v-f2ee1457] {
+.rp-textarea[data-v-b604b69c] {
     --_rp-textarea-padding-y: 7px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-md);
@@ -17,58 +17,58 @@
     cursor: text;
     transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-textarea[data-v-f2ee1457]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-b604b69c]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
     border-color: var(--rp-color-control-border-hover);
 }
-.rp-textarea[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-b604b69c]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-textarea[data-v-f2ee1457] {
+.rp-textarea[data-v-b604b69c] {
     font-size: var(--_rp-textarea-font-size);
     border-radius: var(--_rp-textarea-radius);
 }
-.rp-textarea--size-xs[data-v-f2ee1457] {
+.rp-textarea--size-xs[data-v-b604b69c] {
     --_rp-textarea-padding-y: 4.5px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-xs) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-xs);
 }
-.rp-textarea--size-sm[data-v-f2ee1457] {
+.rp-textarea--size-sm[data-v-b604b69c] {
     --_rp-textarea-padding-y: 5.5px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-sm) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-sm);
 }
-.rp-textarea--size-md[data-v-f2ee1457] {
+.rp-textarea--size-md[data-v-b604b69c] {
     --_rp-textarea-padding-y: 7px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-md);
 }
-.rp-textarea--size-lg[data-v-f2ee1457] {
+.rp-textarea--size-lg[data-v-b604b69c] {
     --_rp-textarea-padding-y: 9.5px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-lg) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-lg);
 }
-.rp-textarea--size-xl[data-v-f2ee1457] {
+.rp-textarea--size-xl[data-v-b604b69c] {
     --_rp-textarea-padding-y: 13px;
     --_rp-textarea-padding-x: calc(var(--rp-size-control-xl) / 3);
     --_rp-textarea-font-size: var(--rp-font-size-xl);
 }
-.rp-textarea--radius-xs[data-v-f2ee1457] {
+.rp-textarea--radius-xs[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-xs);
 }
-.rp-textarea--radius-sm[data-v-f2ee1457] {
+.rp-textarea--radius-sm[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-sm);
 }
-.rp-textarea--radius-md[data-v-f2ee1457] {
+.rp-textarea--radius-md[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-md);
 }
-.rp-textarea--radius-lg[data-v-f2ee1457] {
+.rp-textarea--radius-lg[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-lg);
 }
-.rp-textarea--radius-xl[data-v-f2ee1457] {
+.rp-textarea--radius-xl[data-v-b604b69c] {
     --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-f2ee1457], [data-rp-color-scheme=dark] .rp-textarea[data-v-f2ee1457] {
+html.dark .rp-textarea[data-v-b604b69c], [data-rp-color-scheme=dark] .rp-textarea[data-v-b604b69c] {
     --_rp-textarea-valid-border: var(--rp-color-green-light-color);
     --_rp-textarea-valid-ring: color-mix(
         in srgb,
@@ -82,34 +82,34 @@ html.dark .rp-textarea[data-v-f2ee1457], [data-rp-color-scheme=dark] .rp-textare
         transparent
     );
 }
-.rp-textarea--disabled[data-v-f2ee1457] {
+.rp-textarea--disabled[data-v-b604b69c] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-textarea--valid[data-v-f2ee1457] {
+.rp-textarea--valid[data-v-b604b69c] {
     border-color: var(--_rp-textarea-valid-border);
 }
-.rp-textarea--valid[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--valid[data-v-b604b69c]:focus-within:not(.rp-textarea--disabled) {
     border-color: var(--_rp-textarea-valid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-valid-ring);
 }
-.rp-textarea--invalid[data-v-f2ee1457] {
+.rp-textarea--invalid[data-v-b604b69c] {
     border-color: var(--_rp-textarea-invalid-border);
 }
-.rp-textarea--invalid[data-v-f2ee1457]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--invalid[data-v-b604b69c]:focus-within:not(.rp-textarea--disabled) {
     border-color: var(--_rp-textarea-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-invalid-ring);
 }
-.rp-textarea--readonly[data-v-f2ee1457] {
+.rp-textarea--readonly[data-v-b604b69c] {
     background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-textarea--resize-vertical .rp-textarea__native[data-v-f2ee1457] {
+.rp-textarea--resize-vertical .rp-textarea__native[data-v-b604b69c] {
     resize: vertical;
 }
-.rp-textarea--resize-both .rp-textarea__native[data-v-f2ee1457] {
+.rp-textarea--resize-both .rp-textarea__native[data-v-b604b69c] {
     resize: both;
 }
-.rp-textarea__native[data-v-f2ee1457] {
+.rp-textarea__native[data-v-b604b69c] {
     box-sizing: border-box;
     flex: 1;
     width: 100%;
@@ -124,10 +124,10 @@ html.dark .rp-textarea[data-v-f2ee1457], [data-rp-color-scheme=dark] .rp-textare
     color: var(--rp-color-control-fg);
     line-height: var(--rp-line-height-md);
 }
-.rp-textarea__native[data-v-f2ee1457]::placeholder {
+.rp-textarea__native[data-v-b604b69c]::placeholder {
     color: var(--rp-color-control-placeholder);
 }
-.rp-textarea__native[data-v-f2ee1457]:disabled {
+.rp-textarea__native[data-v-b604b69c]:disabled {
     cursor: not-allowed;
 }
 }

package/dist/textarea.js

@@ -1,8 +1,8 @@
 import './textarea.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 { t as useControllableValue } from "./useControllableValue.js";
 import { a as useTextFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, defineVaporComponent, nextTick, onMounted, ref, renderEffect, setDynamicProps, setStaticTemplateRef, template, unref, watch } from "vue";
@@ -138,7 +138,7 @@ function useTextarea(props, emitUpdate, getValue = () => props.modelValue ?? "")
 }
 //#endregion
 //#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-f2ee1457><textarea data-v-f2ee1457>", 1);
+var t0 = template("<div data-v-b604b69c><textarea data-v-b604b69c>", 1);
 //#endregion
 //#region src/components/textarea/textarea.vue
 var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -260,7 +260,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n1;
 	}
-}), [["__scopeId", "data-v-f2ee1457"]]);
+}), [["__scopeId", "data-v-b604b69c"]]);
 //#endregion
 //#region src/components/textarea/types.ts
 var textareaParts = ["root", "input"];