ropav 0.0.10 → 0.0.12

package/dist/tabs.js

@@ -1,5 +1,6 @@
 import './tabs.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 { t as useRequiredInject } from "./useRequiredInject.js";
 import { computed, createIf, createSlot, defineVaporComponent, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
@@ -388,11 +389,12 @@ function useTabsContent(props) {
 }
 //#endregion
 //#region src/components/tabs/tabs.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$3 = template("<div data-v-32e41419>", 1);
+var t0$3 = template("<div data-v-163486d1>", 1);
 //#endregion
 //#region src/components/tabs/tabs.vue
 var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpTabs",
+	inheritAttrs: false,
 	__name: "tabs",
 	props: {
 		id: {},
@@ -414,29 +416,37 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { rootProps, slotProps } = useTabs(props, (value) => {
+		const { rootProps: internalRootProps, slotProps } = useTabs(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			...internalRootProps.value,
+			"data-disabled": presence(props.disabled)
+		}));
 		const n1 = t0$3();
-		renderEffect(() => setDynamicProps(n1, [unref(rootProps)]));
+		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-32e41419"]]);
+}), [["__scopeId", "data-v-163486d1"]]);
 //#endregion
 //#region src/components/tabs/tabs-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<section data-v-3ff419c3>", 1);
+var t0$2 = template("<section data-v-7206185c>", 1);
 //#endregion
 //#region src/components/tabs/tabs-content.vue
 var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpTabsContent",
+	inheritAttrs: false,
 	__name: "tabs-content",
 	props: {
 		id: {},
@@ -447,49 +457,64 @@ var tabs_content_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		},
 		ariaLabel: {},
 		ariaDescribedby: {},
-		ariaLabelledby: {}
+		ariaLabelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { rootProps, slotProps, shouldRenderContent } = useTabsContent(__props);
+		const props = __props;
+		const { rootProps: internalRootProps, slotProps, shouldRenderContent } = useTabsContent(props);
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs(internalRootProps.value));
 		return createIf(() => unref(shouldRenderContent), () => {
 			const n3 = t0$2();
-			renderEffect(() => setDynamicProps(n3, [unref(rootProps)]));
+			renderEffect(() => setDynamicProps(n3, [rootAttrs.value]));
 			setInsertionState(n3, null, 0);
 			createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 			return n3;
 		});
 	}
-}), [["__scopeId", "data-v-3ff419c3"]]);
+}), [["__scopeId", "data-v-7206185c"]]);
 //#endregion
 //#region src/components/tabs/tabs-list.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<div data-v-7f168d05>", 1);
+var t0$1 = template("<div data-v-5016edc1>", 1);
 //#endregion
 //#region src/components/tabs/tabs-list.vue
 var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpTabsList",
+	inheritAttrs: false,
 	__name: "tabs-list",
 	props: {
 		id: {},
 		ariaLabel: {},
 		ariaDescribedby: {},
-		ariaLabelledby: {}
+		ariaLabelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { rootProps, slotProps } = useTabsList(__props);
+		const props = __props;
+		const { rootProps: internalRootProps, slotProps } = useTabsList(props);
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			...internalRootProps.value,
+			"data-disabled": presence(internalRootProps.value["data-disabled"])
+		}));
 		const n1 = t0$1();
-		renderEffect(() => setDynamicProps(n1, [unref(rootProps)]));
+		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-7f168d05"]]);
+}), [["__scopeId", "data-v-5016edc1"]]);
 //#endregion
 //#region src/components/tabs/tabs-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-4adec360>", 1);
+var t0 = template("<button data-v-6df68725>", 1);
 //#endregion
 //#region src/components/tabs/tabs-trigger.vue
 var tabs_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpTabsTrigger",
+	inheritAttrs: false,
 	__name: "tabs-trigger",
 	props: {
 		id: {},
@@ -498,16 +523,30 @@ var tabs_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: false
 		},
-		align: {}
+		align: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props) {
-		const { rootProps, slotProps } = useTabsTrigger(__props);
+		const props = __props;
+		const { rootProps: internalRootProps, slotProps } = useTabsTrigger(props);
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			...internalRootProps.value,
+			"data-disabled": presence(internalRootProps.value["data-disabled"])
+		}));
 		const n1 = t0();
-		renderEffect(() => setDynamicProps(n1, [unref(rootProps)]));
+		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-4adec360"]]);
+}), [["__scopeId", "data-v-6df68725"]]);
+//#endregion
+//#region src/components/tabs/types.ts
+var tabsParts = ["root"];
+var tabsListParts = ["root"];
+var tabsTriggerParts = ["root"];
+var tabsContentParts = ["root"];
 //#endregion
-export { useTabs as a, useTabsTrigger as c, tabs_default as i, tabs_list_default as n, useTabsContent as o, tabs_content_default as r, useTabsList as s, tabs_trigger_default as t };
+export { tabs_trigger_default as a, tabs_default as c, useTabsList as d, useTabsTrigger as f, tabsTriggerParts as i, useTabs as l, tabsListParts as n, tabs_list_default as o, tabsParts as r, tabs_content_default as s, tabsContentParts as t, useTabsContent as u };

package/dist/teleport-provider.js

@@ -0,0 +1,15 @@
+import { t as provideTeleportTarget } from "./useTeleportTarget.js";
+import { createSlot, defineVaporComponent } from "vue";
+//#endregion
+//#region src/components/teleport-provider/teleport-provider.vue
+var teleport_provider_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpTeleportProvider",
+	__name: "teleport-provider",
+	props: { teleportTo: {} },
+	setup(__props) {
+		provideTeleportTarget(__props);
+		return createSlot();
+	}
+});
+//#endregion
+export { teleport_provider_default as t };

package/dist/textarea.css

@@ -1,131 +1,133 @@
-.rp-textarea[data-v-6c62dc31] {
-  --_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-radius: var(--rp-radius-sm);
-  --_rp-textarea-valid-border: var(--rp-color-green-outline);
-  --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-green-filled) 32%, transparent);
-  --_rp-textarea-invalid-border: var(--rp-color-red-filled);
-  --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
-  display: inline-flex;
-  box-sizing: border-box;
-  font-family: var(--rp-font-family);
-  font-weight: var(--rp-font-weight-normal);
-  background-color: var(--rp-color-control-bg);
-  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
-  cursor: text;
-  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
-}
-.rp-textarea[data-v-6c62dc31]: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-6c62dc31]: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-6c62dc31] {
-  font-size: var(--_rp-textarea-font-size);
-  border-radius: var(--_rp-textarea-radius);
-}
-.rp-textarea--size-xs[data-v-6c62dc31] {
-  --_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-6c62dc31] {
-  --_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-6c62dc31] {
-  --_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-6c62dc31] {
-  --_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-6c62dc31] {
-  --_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-6c62dc31] {
-  --_rp-textarea-radius: var(--rp-radius-xs);
-}
-.rp-textarea--radius-sm[data-v-6c62dc31] {
-  --_rp-textarea-radius: var(--rp-radius-sm);
-}
-.rp-textarea--radius-md[data-v-6c62dc31] {
-  --_rp-textarea-radius: var(--rp-radius-md);
-}
-.rp-textarea--radius-lg[data-v-6c62dc31] {
-  --_rp-textarea-radius: var(--rp-radius-lg);
-}
-.rp-textarea--radius-xl[data-v-6c62dc31] {
-  --_rp-textarea-radius: var(--rp-radius-xl);
-}
-html.dark .rp-textarea[data-v-6c62dc31], [data-rp-color-scheme=dark] .rp-textarea[data-v-6c62dc31] {
-  --_rp-textarea-valid-border: var(--rp-color-green-light-color);
-  --_rp-textarea-valid-ring: color-mix(
-      in srgb,
-      var(--rp-color-green-light-color) 32%,
-      transparent
-  );
-  --_rp-textarea-invalid-border: var(--rp-color-red-light-color);
-  --_rp-textarea-invalid-ring: color-mix(
-      in srgb,
-      var(--rp-color-red-light-color) 32%,
-      transparent
-  );
-}
-.rp-textarea--disabled[data-v-6c62dc31] {
-  opacity: var(--rp-opacity-disabled);
-  cursor: not-allowed;
-}
-.rp-textarea--valid[data-v-6c62dc31] {
-  border-color: var(--_rp-textarea-valid-border);
-}
-.rp-textarea--valid[data-v-6c62dc31]: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-6c62dc31] {
-  border-color: var(--_rp-textarea-invalid-border);
-}
-.rp-textarea--invalid[data-v-6c62dc31]: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-6c62dc31] {
-  background-color: var(--rp-color-control-readonly-bg);
-}
-.rp-textarea--resize-vertical .rp-textarea__native[data-v-6c62dc31] {
-  resize: vertical;
-}
-.rp-textarea--resize-both .rp-textarea__native[data-v-6c62dc31] {
-  resize: both;
-}
-.rp-textarea__native[data-v-6c62dc31] {
-  box-sizing: border-box;
-  flex: 1;
-  width: 100%;
-  min-width: 0;
-  min-height: calc(1lh + var(--_rp-textarea-padding-y) + var(--_rp-textarea-padding-y));
-  padding: var(--_rp-textarea-padding-y) var(--_rp-textarea-padding-x);
-  border: none;
-  outline: none;
-  resize: none;
-  background: transparent;
-  font: inherit;
-  color: var(--rp-color-control-fg);
-  line-height: var(--rp-line-height-md);
-}
-.rp-textarea__native[data-v-6c62dc31]::placeholder {
-  color: var(--rp-color-control-placeholder);
-}
-.rp-textarea__native[data-v-6c62dc31]:disabled {
-  cursor: not-allowed;
+@layer ropav.components {
+.rp-textarea[data-v-f2ee1457] {
+    --_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-radius: var(--rp-radius-sm);
+    --_rp-textarea-valid-border: var(--rp-color-green-outline);
+    --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-green-filled) 32%, transparent);
+    --_rp-textarea-invalid-border: var(--rp-color-red-filled);
+    --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
+    display: inline-flex;
+    box-sizing: border-box;
+    font-family: var(--rp-font-family);
+    font-weight: var(--rp-font-weight-normal);
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    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) {
+    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) {
+    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] {
+    font-size: var(--_rp-textarea-font-size);
+    border-radius: var(--_rp-textarea-radius);
+}
+.rp-textarea--size-xs[data-v-f2ee1457] {
+    --_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-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-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-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-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: var(--rp-radius-xs);
+}
+.rp-textarea--radius-sm[data-v-f2ee1457] {
+    --_rp-textarea-radius: var(--rp-radius-sm);
+}
+.rp-textarea--radius-md[data-v-f2ee1457] {
+    --_rp-textarea-radius: var(--rp-radius-md);
+}
+.rp-textarea--radius-lg[data-v-f2ee1457] {
+    --_rp-textarea-radius: var(--rp-radius-lg);
+}
+.rp-textarea--radius-xl[data-v-f2ee1457] {
+    --_rp-textarea-radius: var(--rp-radius-xl);
+}
+html.dark .rp-textarea[data-v-f2ee1457], [data-rp-color-scheme=dark] .rp-textarea[data-v-f2ee1457] {
+    --_rp-textarea-valid-border: var(--rp-color-green-light-color);
+    --_rp-textarea-valid-ring: color-mix(
+        in srgb,
+        var(--rp-color-green-light-color) 32%,
+        transparent
+    );
+    --_rp-textarea-invalid-border: var(--rp-color-red-light-color);
+    --_rp-textarea-invalid-ring: color-mix(
+        in srgb,
+        var(--rp-color-red-light-color) 32%,
+        transparent
+    );
+}
+.rp-textarea--disabled[data-v-f2ee1457] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-textarea--valid[data-v-f2ee1457] {
+    border-color: var(--_rp-textarea-valid-border);
+}
+.rp-textarea--valid[data-v-f2ee1457]: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] {
+    border-color: var(--_rp-textarea-invalid-border);
+}
+.rp-textarea--invalid[data-v-f2ee1457]: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] {
+    background-color: var(--rp-color-control-readonly-bg);
+}
+.rp-textarea--resize-vertical .rp-textarea__native[data-v-f2ee1457] {
+    resize: vertical;
+}
+.rp-textarea--resize-both .rp-textarea__native[data-v-f2ee1457] {
+    resize: both;
+}
+.rp-textarea__native[data-v-f2ee1457] {
+    box-sizing: border-box;
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    min-height: calc(1lh + var(--_rp-textarea-padding-y) + var(--_rp-textarea-padding-y));
+    padding: var(--_rp-textarea-padding-y) var(--_rp-textarea-padding-x);
+    border: none;
+    outline: none;
+    resize: none;
+    background: transparent;
+    font: inherit;
+    color: var(--rp-color-control-fg);
+    line-height: var(--rp-line-height-md);
+}
+.rp-textarea__native[data-v-f2ee1457]::placeholder {
+    color: var(--rp-color-control-placeholder);
+}
+.rp-textarea__native[data-v-f2ee1457]:disabled {
+    cursor: not-allowed;
+}
 }

package/dist/textarea.js

@@ -1,8 +1,10 @@
 import './textarea.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 } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createInvoker, createTemplateRefSetter, defineVaporComponent, delegateEvents, nextTick, onMounted, ref, renderEffect, setAttr, setClass, setProp, setValue, template, unref, watch } from "vue";
+import { child, computed, defineVaporComponent, nextTick, onMounted, ref, renderEffect, setDynamicProps, setStaticTemplateRef, template, unref, watch } from "vue";
 //#region src/components/textarea/useTextarea.ts
 var MIN_ROWS = 1;
 var INTERACTIVE_SELECTOR = [
@@ -55,7 +57,7 @@ function resetTextareaHeight(textarea) {
 	textarea.style.height = "";
 	textarea.style.overflowY = "";
 }
-function useTextarea(props, emitUpdate) {
+function useTextarea(props, emitUpdate, getValue = () => props.modelValue ?? "") {
 	const textareaRef = ref(null);
 	const control = useControlState(props);
 	let heightSyncPending = false;
@@ -79,7 +81,7 @@ function useTextarea(props, emitUpdate) {
 		readonly: props.readonly
 	}));
 	const autosizeWatchSource = computed(() => [
-		props.modelValue,
+		getValue(),
 		props.autosize,
 		props.minRows,
 		props.maxRows,
@@ -118,6 +120,9 @@ function useTextarea(props, emitUpdate) {
 		if (target instanceof Element && isInteractiveElement(target)) return;
 		textareaRef.value?.focus();
 	}
+	function focus(options) {
+		textareaRef.value?.focus(options);
+	}
 	onMounted(scheduleTextareaHeightSync);
 	watch(autosizeWatchSource, scheduleTextareaHeightSync);
 	return {
@@ -126,22 +131,25 @@ function useTextarea(props, emitUpdate) {
 		rootClass,
 		nativeRows,
 		onInput,
-		focusTextarea
+		focusTextarea,
+		focus
 	};
 }
 //#endregion
 //#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-6c62dc31><textarea data-v-6c62dc31 class=rp-textarea__native>", 1);
-delegateEvents("input", "mousedown");
+var t0 = template("<div data-v-f2ee1457><textarea data-v-f2ee1457>", 1);
 //#endregion
 //#region src/components/textarea/textarea.vue
 var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpTextarea",
+	inheritAttrs: false,
 	__name: "textarea",
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: "" },
 		size: {},
 		radius: {},
 		resize: { default: "none" },
@@ -175,41 +183,85 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea } = useTextarea(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea, focus } = useTextarea(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		useTextFormControl(() => textareaRef.value, controllable, () => props.validationMessage);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			onMousedown: focusTextarea,
+			"data-disabled": presence(control.disabled),
+			"data-readonly": presence(props.readonly),
+			"data-invalid": presence(control.invalid)
+		}));
+		const nativeInputAttrs = computed(() => {
+			const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				...getPartAttrs("input", {
+					class: "rp-textarea__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onInput(event) {
+					onInput(event);
+					compatibilityOnInput?.(event);
+				}
+			};
+		});
+		__expose({
+			nativeElement: textareaRef,
+			focus
 		});
-		const _setTemplateRef = createTemplateRefSetter();
 		const n1 = t0();
 		const n0 = child(n1);
-		n0.$evtinput = createInvoker((e) => unref(onInput)(e));
-		_setTemplateRef(n0, textareaRef, null, "textareaRef");
-		n1.$evtmousedown = createInvoker((e) => unref(focusTextarea)(e));
+		setStaticTemplateRef(n0, textareaRef, null, "textareaRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
+			const _readonly = __props.readonly;
+			const _presence = unref(presence);
 			const _control_required = _control.required;
-			setClass(n1, unref(rootClass));
-			setProp(n0, "id", _control.id);
-			setProp(n0, "name", __props.name);
-			setValue(n0, __props.modelValue);
-			setProp(n0, "placeholder", __props.placeholder);
-			setProp(n0, "rows", unref(nativeRows));
-			setProp(n0, "disabled", _control.disabled || void 0);
-			setProp(n0, "readonly", __props.readonly || void 0);
-			setProp(n0, "required", _control_required || void 0);
-			setAttr(n0, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n0, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n0, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n0, "aria-invalid", _control.invalid || void 0);
-			setAttr(n0, "aria-required", _control_required || void 0);
+			setDynamicProps(n1, [rootAttrs.value]);
+			setDynamicProps(n0, [_nativeInputAttrs, {
+				id: _control.id,
+				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
+				value: unref(controllable).value.value,
+				placeholder: __props.placeholder,
+				rows: unref(nativeRows),
+				disabled: _control.disabled || void 0,
+				readonly: _readonly || void 0,
+				required: _control_required || void 0,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-invalid": _control.invalid || void 0,
+				"aria-required": _control_required || void 0,
+				"data-disabled": _presence(_control.disabled),
+				"data-readonly": _presence(_readonly),
+				"data-invalid": _presence(_control.invalid)
+			}]);
 		});
 		return n1;
 	}
-}), [["__scopeId", "data-v-6c62dc31"]]);
+}), [["__scopeId", "data-v-f2ee1457"]]);
+//#endregion
+//#region src/components/textarea/types.ts
+var textareaParts = ["root", "input"];
 //#endregion
-export { textarea_default as t };
+export { textarea_default as n, textareaParts as t };