ropav 0.0.8 → 0.0.10

package/dist/switch.css

@@ -1,24 +1,20 @@
 .rp-switch[data-v-e9d95947] {
-  --_rp-switch-color: var(--_rp-switch-custom-color, var(--rp-color-control-selected-bg));
-  --_rp-switch-font-size: var(--rp-font-size-base);
-  --_rp-switch-track-width: 40px;
-  --_rp-switch-track-height: 22px;
+  --_rp-switch-color: var(--rp-color-control-selected-bg);
+  --_rp-switch-font-size: var(--rp-font-size-md);
+  --_rp-switch-track-width: 46px;
+  --_rp-switch-track-height: 24px;
   --_rp-switch-thumb-size: 18px;
   --_rp-switch-thumb-offset: 2px;
   --_rp-switch-track-bg: var(--rp-color-control-track-bg);
   --_rp-switch-thumb-bg: var(--rp-color-control-thumb-bg);
-  --_rp-switch-invalid-border: var(--rp-color-danger);
-  --_rp-switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+  --_rp-switch-invalid-border: var(--rp-color-red-filled);
+  --_rp-switch-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
 }
-html.dark .rp-switch[data-v-e9d95947] {
-  --_rp-switch-invalid-border: var(--rp-color-danger-fg);
-  --_rp-switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
-}
 .rp-switch--disabled[data-v-e9d95947] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
@@ -40,7 +36,7 @@ html.dark .rp-switch[data-v-e9d95947] {
   pointer-events: none;
 }
 .rp-switch__native:focus-visible + .rp-switch__track[data-v-e9d95947] {
-  border-color: var(--rp-color-primary);
+  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-e9d95947] {
@@ -78,57 +74,36 @@ html.dark .rp-switch[data-v-e9d95947] {
   transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
 }
 .rp-switch__label[data-v-e9d95947] {
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
   color: var(--rp-color-text);
 }
-.rp-switch--color-primary[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-primary);
-}
-.rp-switch--color-secondary[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-secondary);
-}
-.rp-switch--color-success[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-success);
-}
-.rp-switch--color-warning[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-warning);
-}
-.rp-switch--color-danger[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-danger);
-}
-.rp-switch--color-info[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-info);
-}
-.rp-switch--color-neutral[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-neutral);
-}
 .rp-switch--size-xs[data-v-e9d95947] {
-  --_rp-switch-track-width: 28px;
+  --_rp-switch-track-width: 32px;
   --_rp-switch-track-height: 16px;
   --_rp-switch-thumb-size: 12px;
   --_rp-switch-font-size: var(--rp-font-size-xs);
 }
 .rp-switch--size-sm[data-v-e9d95947] {
-  --_rp-switch-track-width: 34px;
-  --_rp-switch-track-height: 18px;
+  --_rp-switch-track-width: 38px;
+  --_rp-switch-track-height: 20px;
   --_rp-switch-thumb-size: 14px;
   --_rp-switch-font-size: var(--rp-font-size-sm);
 }
 .rp-switch--size-md[data-v-e9d95947] {
-  --_rp-switch-track-width: 40px;
-  --_rp-switch-track-height: 22px;
+  --_rp-switch-track-width: 46px;
+  --_rp-switch-track-height: 24px;
   --_rp-switch-thumb-size: 18px;
-  --_rp-switch-font-size: var(--rp-font-size-base);
+  --_rp-switch-font-size: var(--rp-font-size-md);
 }
 .rp-switch--size-lg[data-v-e9d95947] {
-  --_rp-switch-track-width: 48px;
-  --_rp-switch-track-height: 26px;
+  --_rp-switch-track-width: 56px;
+  --_rp-switch-track-height: 30px;
   --_rp-switch-thumb-size: 22px;
   --_rp-switch-font-size: var(--rp-font-size-lg);
 }
 .rp-switch--size-xl[data-v-e9d95947] {
-  --_rp-switch-track-width: 56px;
-  --_rp-switch-track-height: 30px;
-  --_rp-switch-thumb-size: 26px;
+  --_rp-switch-track-width: 72px;
+  --_rp-switch-track-height: 36px;
+  --_rp-switch-thumb-size: 28px;
   --_rp-switch-font-size: var(--rp-font-size-xl);
 }

package/dist/switch.js

@@ -1,14 +1,14 @@
 import './switch.css';
 import { t as bem } from "./bem.js";
+import { n as getComponentColorValue } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
 function getSwitchColorStyle(color) {
-	const customColor = getComponentCustomColor(color);
-	if (!customColor) return void 0;
-	return { "--_rp-switch-custom-color": customColor };
+	const colorValue = getComponentColorValue(color);
+	if (!colorValue) return void 0;
+	return { "--_rp-switch-color": colorValue };
 }
 function useSwitch(props, emitUpdate) {
 	const control = useControlState(props);
@@ -16,7 +16,6 @@ function useSwitch(props, emitUpdate) {
 		checked: props.modelValue,
 		disabled: control.disabled,
 		invalid: control.invalid,
-		[`color-${props.color}`]: isComponentPresetColor(props.color),
 		[`size-${props.size}`]: Boolean(props.size)
 	}));
 	const rootStyle = computed(() => getSwitchColorStyle(props.color));

package/dist/tabs.css

@@ -19,12 +19,12 @@
   min-width: 0;
   color: var(--rp-color-text);
   font-family: var(--rp-font-family);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
 }
 .rp-tabs-content[data-v-3ff419c3]:focus-visible {
   outline: none;
-  border-color: var(--rp-color-primary);
+  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-3ff419c3] {
@@ -46,14 +46,14 @@
   width: max-content;
 }
 .rp-tabs-list--line[data-v-7f168d05] {
-  border-bottom: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border-bottom: var(--rp-border-width-medium) solid var(--rp-color-default-border);
 }
 .rp-tabs-list--line.rp-tabs-list--vertical[data-v-7f168d05] {
   border-bottom: 0;
-  border-left: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border-left: var(--rp-border-width-medium) solid var(--rp-color-default-border);
 }
 .rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-7f168d05] {
-  border-right: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border-right: var(--rp-border-width-medium) solid var(--rp-color-default-border);
   border-left: 0;
 }
 .rp-tabs-list--pills[data-v-7f168d05], .rp-tabs-list--outline[data-v-7f168d05] {
@@ -75,7 +75,7 @@
   left: 0;
   height: var(--rp-border-width-thin);
   content: "";
-  background-color: var(--rp-color-border);
+  background-color: var(--rp-color-default-border);
   pointer-events: none;
 }
 .rp-tabs-list--outline.rp-tabs-list--vertical[data-v-7f168d05]::after {
@@ -94,20 +94,20 @@
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }.rp-tabs-trigger[data-v-4adec360] {
-  --_rp-tabs-trigger-fg: var(--rp-color-text-secondary);
+  --_rp-tabs-trigger-fg: var(--rp-color-dimmed);
   --_rp-tabs-trigger-bg: transparent;
   --_rp-tabs-trigger-bg-hover: transparent;
   --_rp-tabs-trigger-border: transparent;
   --_rp-tabs-trigger-border-hover: transparent;
   --_rp-tabs-trigger-radius: var(--rp-radius-none);
   --_rp-tabs-trigger-shadow: none;
-  --_rp-tabs-trigger-outline-bg: var(--rp-color-background);
+  --_rp-tabs-trigger-outline-bg: var(--rp-color-body);
   --_rp-tabs-trigger-indicator: transparent;
   --_rp-tabs-trigger-height: var(--rp-size-control-md);
-  --_rp-tabs-trigger-padding-y: var(--rp-spacing-2);
-  --_rp-tabs-trigger-padding-x: var(--rp-spacing-3);
+  --_rp-tabs-trigger-padding-y: 0;
+  --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-md) / 3);
   --_rp-tabs-trigger-gap: var(--rp-spacing-2);
-  --_rp-tabs-trigger-font-size: var(--rp-font-size-base);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-md);
   padding: 0;
   font: inherit;
   background: none;
@@ -126,7 +126,7 @@
   font-family: var(--rp-font-family);
   font-size: var(--_rp-tabs-trigger-font-size);
   font-weight: var(--rp-font-weight-normal);
-  line-height: var(--rp-line-height-tight);
+  line-height: 1;
   text-align: center;
   background-color: var(--_rp-tabs-trigger-bg);
   border: 0;
@@ -154,39 +154,39 @@
   color: currentColor;
 }
 .rp-tabs-trigger--size-xs[data-v-4adec360] {
-  --_rp-tabs-trigger-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
-  --_rp-tabs-trigger-padding-y: var(--rp-spacing-1);
-  --_rp-tabs-trigger-padding-x: 0.375rem;
+  --_rp-tabs-trigger-height: var(--rp-size-control-xs);
+  --_rp-tabs-trigger-padding-y: 0;
+  --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-xs) / 3);
   --_rp-tabs-trigger-gap: var(--rp-spacing-1);
   --_rp-tabs-trigger-font-size: var(--rp-font-size-xs);
 }
 .rp-tabs-trigger--size-sm[data-v-4adec360] {
   --_rp-tabs-trigger-height: var(--rp-size-control-sm);
-  --_rp-tabs-trigger-padding-y: var(--rp-spacing-1);
-  --_rp-tabs-trigger-padding-x: var(--rp-spacing-2);
+  --_rp-tabs-trigger-padding-y: 0;
+  --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-sm) / 3);
   --_rp-tabs-trigger-gap: var(--rp-spacing-2);
   --_rp-tabs-trigger-font-size: var(--rp-font-size-sm);
 }
 .rp-tabs-trigger--size-md[data-v-4adec360] {
   --_rp-tabs-trigger-height: var(--rp-size-control-md);
-  --_rp-tabs-trigger-padding-y: var(--rp-spacing-2);
-  --_rp-tabs-trigger-padding-x: var(--rp-spacing-3);
+  --_rp-tabs-trigger-padding-y: 0;
+  --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-md) / 3);
   --_rp-tabs-trigger-gap: var(--rp-spacing-2);
-  --_rp-tabs-trigger-font-size: var(--rp-font-size-base);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-md);
 }
 .rp-tabs-trigger--size-lg[data-v-4adec360] {
   --_rp-tabs-trigger-height: var(--rp-size-control-lg);
-  --_rp-tabs-trigger-padding-y: var(--rp-spacing-3);
-  --_rp-tabs-trigger-padding-x: var(--rp-spacing-4);
+  --_rp-tabs-trigger-padding-y: 0;
+  --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-lg) / 3);
   --_rp-tabs-trigger-gap: var(--rp-spacing-3);
   --_rp-tabs-trigger-font-size: var(--rp-font-size-lg);
 }
 .rp-tabs-trigger--size-xl[data-v-4adec360] {
-  --_rp-tabs-trigger-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
-  --_rp-tabs-trigger-padding-y: var(--rp-spacing-4);
-  --_rp-tabs-trigger-padding-x: var(--rp-spacing-5);
+  --_rp-tabs-trigger-height: var(--rp-size-control-xl);
+  --_rp-tabs-trigger-padding-y: 0;
+  --_rp-tabs-trigger-padding-x: calc(var(--rp-size-control-xl) / 3);
   --_rp-tabs-trigger-gap: var(--rp-spacing-3);
-  --_rp-tabs-trigger-font-size: var(--rp-font-size-lg);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-xl);
 }
 .rp-tabs-trigger[data-v-4adec360]:hover:not(:disabled) {
   --_rp-tabs-trigger-fg: var(--rp-color-text);
@@ -196,27 +196,27 @@
 .rp-tabs-trigger[data-v-4adec360]:focus-visible {
   z-index: 2;
   outline: none;
-  border-color: var(--rp-color-primary);
+  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-trigger--active[data-v-4adec360] {
   --_rp-tabs-trigger-fg: var(--rp-color-text);
-  --_rp-tabs-trigger-indicator: var(--rp-color-primary);
+  --_rp-tabs-trigger-indicator: var(--rp-primary-color-filled);
 }
 .rp-tabs-trigger--pills[data-v-4adec360]::after, .rp-tabs-trigger--outline[data-v-4adec360]::after {
   display: none;
 }
 .rp-tabs-trigger--pills[data-v-4adec360] {
-  --_rp-tabs-trigger-bg-hover: var(--rp-color-surface-hover);
+  --_rp-tabs-trigger-bg-hover: var(--rp-color-default-hover);
   --_rp-tabs-trigger-radius: var(--rp-radius-md);
 }
 .rp-tabs-trigger--pills.rp-tabs-trigger--active[data-v-4adec360] {
-  --_rp-tabs-trigger-fg: var(--rp-color-on-primary);
-  --_rp-tabs-trigger-bg: var(--rp-color-primary);
-  --_rp-tabs-trigger-bg-hover: var(--rp-color-primary-hover);
+  --_rp-tabs-trigger-fg: var(--rp-color-white);
+  --_rp-tabs-trigger-bg: var(--rp-primary-color-filled);
+  --_rp-tabs-trigger-bg-hover: var(--rp-primary-color-filled-hover);
 }
 .rp-tabs-trigger--outline[data-v-4adec360] {
-  --_rp-tabs-trigger-bg-hover: var(--rp-color-surface-hover);
+  --_rp-tabs-trigger-bg-hover: var(--rp-color-default-hover);
   --_rp-tabs-trigger-radius: var(--rp-radius-md) var(--rp-radius-md) 0 0;
   z-index: 1;
   border: var(--rp-border-width-thin) solid var(--_rp-tabs-trigger-border);
@@ -225,8 +225,8 @@
   --_rp-tabs-trigger-fg: var(--rp-color-text);
   --_rp-tabs-trigger-bg: var(--_rp-tabs-trigger-outline-bg);
   --_rp-tabs-trigger-bg-hover: var(--_rp-tabs-trigger-outline-bg);
-  --_rp-tabs-trigger-border: var(--rp-color-border);
-  --_rp-tabs-trigger-border-hover: var(--rp-color-border);
+  --_rp-tabs-trigger-border: var(--rp-color-default-border);
+  --_rp-tabs-trigger-border-hover: var(--rp-color-default-border);
   z-index: 1;
   border-bottom-color: var(--_rp-tabs-trigger-bg);
 }

package/dist/tabs.js

@@ -1,7 +1,7 @@
 import './tabs.css';
-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 useRequiredInject } from "./useRequiredInject.js";
 import { computed, createIf, createSlot, defineVaporComponent, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
 //#region src/components/tabs/useTabs.ts
 var TABLIST_SELECTOR = ".rp-tabs-list";

package/dist/textarea.css

@@ -1,12 +1,12 @@
 .rp-textarea[data-v-6c62dc31] {
-  --_rp-textarea-padding-y: var(--rp-spacing-3);
-  --_rp-textarea-padding-x: var(--rp-spacing-3);
-  --_rp-textarea-font-size: var(--rp-font-size-base);
+  --_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-success-border-hover);
-  --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
-  --_rp-textarea-invalid-border: var(--rp-color-danger);
-  --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+  --_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);
@@ -28,29 +28,29 @@
   border-radius: var(--_rp-textarea-radius);
 }
 .rp-textarea--size-xs[data-v-6c62dc31] {
-  --_rp-textarea-padding-y: var(--rp-spacing-1);
-  --_rp-textarea-padding-x: var(--rp-spacing-1);
+  --_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: var(--rp-spacing-2);
-  --_rp-textarea-padding-x: var(--rp-spacing-2);
+  --_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: var(--rp-spacing-3);
-  --_rp-textarea-padding-x: var(--rp-spacing-3);
-  --_rp-textarea-font-size: var(--rp-font-size-base);
+  --_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: var(--rp-spacing-4);
-  --_rp-textarea-padding-x: var(--rp-spacing-4);
+  --_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: var(--rp-spacing-5);
-  --_rp-textarea-padding-x: var(--rp-spacing-5);
-  --_rp-textarea-font-size: var(--rp-font-size-lg);
+  --_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);
@@ -67,11 +67,19 @@
 .rp-textarea--radius-xl[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-6c62dc31] {
-  --_rp-textarea-valid-border: var(--rp-color-success-fg);
-  --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
-  --_rp-textarea-invalid-border: var(--rp-color-danger-fg);
-  --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+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);
@@ -113,7 +121,7 @@ html.dark .rp-textarea[data-v-6c62dc31] {
   background: transparent;
   font: inherit;
   color: var(--rp-color-control-fg);
-  line-height: var(--rp-line-height-relaxed);
+  line-height: var(--rp-line-height-md);
 }
 .rp-textarea__native[data-v-6c62dc31]::placeholder {
   color: var(--rp-color-control-placeholder);

package/dist/textarea.js

@@ -58,6 +58,7 @@ function resetTextareaHeight(textarea) {
 function useTextarea(props, emitUpdate) {
 	const textareaRef = ref(null);
 	const control = useControlState(props);
+	let heightSyncPending = false;
 	const autosizeRows = computed(() => {
 		const minRows = normalizeRows(props.minRows, normalizeRows(props.rows, MIN_ROWS)) ?? MIN_ROWS;
 		const maxRows = normalizeRows(props.maxRows);
@@ -100,11 +101,16 @@ function useTextarea(props, emitUpdate) {
 		textarea.style.overflowY = maxHeight !== void 0 && contentHeight > maxHeight ? "auto" : "hidden";
 	}
 	function scheduleTextareaHeightSync() {
-		nextTick(syncTextareaHeight);
+		if (heightSyncPending) return;
+		heightSyncPending = true;
+		nextTick(() => {
+			heightSyncPending = false;
+			syncTextareaHeight();
+		});
 	}
 	function onInput(e) {
 		emitUpdate(e.target.value);
-		syncTextareaHeight();
+		if (props.autosize) scheduleTextareaHeightSync();
 	}
 	function focusTextarea(e) {
 		if (control.disabled) return;

package/dist/toast.css

@@ -0,0 +1,232 @@
+.rp-toast[data-v-face18fc] {
+  --_rp-toast-bg: var(--rp-color-default);
+  --_rp-toast-fg: var(--rp-color-text);
+  --_rp-toast-title-fg: var(--rp-color-text);
+  --_rp-toast-icon-fg: var(--rp-color-cyan-light-color);
+  --_rp-toast-border: var(--rp-color-default-border);
+  --_rp-toast-radius: var(--rp-radius-md);
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  width: 22rem;
+  max-width: 100%;
+  min-width: 0;
+  padding: var(--rp-spacing-4);
+  gap: var(--rp-spacing-3);
+  color: var(--_rp-toast-fg);
+  font-family: var(--rp-font-family);
+  font-size: var(--rp-font-size-sm);
+  line-height: var(--rp-line-height-md);
+  background-color: var(--_rp-toast-bg);
+  border: var(--rp-border-width-thin) solid var(--_rp-toast-border);
+  border-radius: var(--_rp-toast-radius);
+  box-shadow: var(--rp-shadow-md);
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
+}
+.rp-toast--radius-none[data-v-face18fc] {
+  --_rp-toast-radius: var(--rp-radius-none);
+}
+.rp-toast--radius-xs[data-v-face18fc] {
+  --_rp-toast-radius: var(--rp-radius-xs);
+}
+.rp-toast--radius-sm[data-v-face18fc] {
+  --_rp-toast-radius: var(--rp-radius-sm);
+}
+.rp-toast--radius-md[data-v-face18fc] {
+  --_rp-toast-radius: var(--rp-radius-md);
+}
+.rp-toast--radius-lg[data-v-face18fc] {
+  --_rp-toast-radius: var(--rp-radius-lg);
+}
+.rp-toast--radius-xl[data-v-face18fc] {
+  --_rp-toast-radius: var(--rp-radius-xl);
+}
+.rp-toast__icon[data-v-face18fc] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.125rem;
+  color: var(--_rp-toast-icon-fg);
+  line-height: 0;
+}
+.rp-toast__icon[data-v-face18fc] >  svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+.rp-toast__content[data-v-face18fc] {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--rp-spacing-1);
+}
+.rp-toast__title[data-v-face18fc] {
+  color: var(--_rp-toast-title-fg);
+  font-size: var(--rp-font-size-md);
+  font-weight: var(--rp-font-weight-semibold);
+  line-height: var(--rp-line-height-xs);
+}
+.rp-toast__description[data-v-face18fc] {
+  margin: 0;
+}
+.rp-toast__body[data-v-face18fc], .rp-toast__description[data-v-face18fc] {
+  min-width: 0;
+  color: var(--_rp-toast-fg);
+}
+.rp-toast__action[data-v-face18fc] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-left: auto;
+}
+.rp-toast__close[data-v-face18fc] {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) 0;
+  padding: 0;
+  color: var(--_rp-toast-icon-fg);
+  background: transparent;
+  border: 0;
+  border-radius: var(--rp-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
+}
+.rp-toast__close[data-v-face18fc]:hover {
+  background-color: color-mix(in srgb, var(--_rp-toast-icon-fg) 12%, transparent);
+}
+.rp-toast__close[data-v-face18fc]:focus-visible {
+  outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
+  outline-offset: 2px;
+}
+.rp-toast__close[data-v-face18fc] >  svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+.rp-toast-enter-active[data-v-face18fc],
+.rp-toast-leave-active[data-v-face18fc] {
+  will-change: opacity, transform;
+}
+.rp-toast-enter-active[data-v-face18fc] {
+  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.rp-toast-leave-active[data-v-face18fc] {
+  transition: opacity 120ms ease-in, transform 180ms cubic-bezier(0.4, 0, 1, 1);
+}
+.rp-toast-enter-from[data-v-face18fc],
+.rp-toast-leave-to[data-v-face18fc] {
+  opacity: 0;
+  transform: translate3d(0, calc(var(--rp-spacing-2) * -1), 0) scale(0.98);
+}
+@media (prefers-reduced-motion: reduce) {
+.rp-toast-enter-active[data-v-face18fc],
+  .rp-toast-leave-active[data-v-face18fc] {
+    transition: none;
+}
+}.rp-toast-viewport[data-v-e4c0bb63] {
+  --_rp-toast-viewport-shift-x: 0;
+  --_rp-toast-viewport-shift-y: calc(var(--rp-spacing-3) * -1);
+  position: fixed;
+  z-index: 1001;
+  display: flex;
+  box-sizing: border-box;
+  width: min(24rem, 100vw);
+  max-height: 100vh;
+  max-height: 100dvh;
+  margin: 0;
+  padding: var(--rp-spacing-4);
+  overflow: hidden auto;
+  flex-direction: column;
+  gap: var(--rp-spacing-3);
+  list-style: none;
+  pointer-events: none;
+}
+.rp-toast-viewport--top-left[data-v-e4c0bb63] {
+  --_rp-toast-viewport-shift-x: calc(var(--rp-spacing-3) * -1);
+  --_rp-toast-viewport-shift-y: 0;
+  top: 0;
+  left: 0;
+}
+.rp-toast-viewport--top-center[data-v-e4c0bb63] {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rp-toast-viewport--top-right[data-v-e4c0bb63] {
+  --_rp-toast-viewport-shift-x: var(--rp-spacing-3);
+  --_rp-toast-viewport-shift-y: 0;
+  top: 0;
+  right: 0;
+}
+.rp-toast-viewport--bottom-left[data-v-e4c0bb63] {
+  --_rp-toast-viewport-shift-x: calc(var(--rp-spacing-3) * -1);
+  --_rp-toast-viewport-shift-y: 0;
+  bottom: 0;
+  left: 0;
+}
+.rp-toast-viewport--bottom-center[data-v-e4c0bb63] {
+  --_rp-toast-viewport-shift-y: var(--rp-spacing-3);
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rp-toast-viewport--bottom-right[data-v-e4c0bb63] {
+  --_rp-toast-viewport-shift-x: var(--rp-spacing-3);
+  --_rp-toast-viewport-shift-y: 0;
+  right: 0;
+  bottom: 0;
+}
+.rp-toast-viewport__item[data-v-e4c0bb63] {
+  display: flex;
+  width: 100%;
+  flex: 0 0 auto;
+  pointer-events: auto;
+}
+.rp-toast-viewport__item[data-v-e4c0bb63] .rp-toast {
+  width: 100%;
+}
+.rp-toast-viewport-item-enter-active[data-v-e4c0bb63],
+.rp-toast-viewport-item-leave-active[data-v-e4c0bb63] {
+  will-change: opacity, transform;
+}
+.rp-toast-viewport-item-enter-active[data-v-e4c0bb63] {
+  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.rp-toast-viewport-item-leave-active[data-v-e4c0bb63] {
+  position: absolute;
+  right: var(--rp-spacing-4);
+  left: var(--rp-spacing-4);
+  width: auto;
+  pointer-events: none;
+  transition: opacity 120ms ease-in, transform 180ms cubic-bezier(0.4, 0, 1, 1);
+}
+.rp-toast-viewport--empty .rp-toast-viewport-item-leave-active[data-v-e4c0bb63] {
+  position: relative;
+  right: auto;
+  left: auto;
+  width: 100%;
+}
+.rp-toast-viewport-item-move[data-v-e4c0bb63] {
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.rp-toast-viewport-item-enter-from[data-v-e4c0bb63],
+.rp-toast-viewport-item-leave-to[data-v-e4c0bb63] {
+  opacity: 0;
+  transform: translate3d(var(--_rp-toast-viewport-shift-x), var(--_rp-toast-viewport-shift-y), 0) scale(0.98);
+}
+@media (prefers-reduced-motion: reduce) {
+.rp-toast-viewport[data-v-e4c0bb63] {
+    scroll-behavior: auto;
+}
+.rp-toast-viewport-item-enter-active[data-v-e4c0bb63],
+  .rp-toast-viewport-item-leave-active[data-v-e4c0bb63],
+  .rp-toast-viewport-item-move[data-v-e4c0bb63] {
+    transition: none;
+}
+}