ropav 0.0.7 → 0.0.9

package/dist/icon-button.js

@@ -1,12 +1,11 @@
 import './icon-button.css';
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { r as isComponentPresetColor } from "./componentColors.js";
 import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/icon-button/icon-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-7005752e class=rp-icon-button__icon aria-hidden=true>");
-var t1 = template("<button data-v-7005752e>", 1);
+var t0 = template("<span data-v-9f46a6a3 class=rp-icon-button__icon aria-hidden=true>");
+var t1 = template("<button data-v-9f46a6a3>", 1);
 //#endregion
 //#region src/components/icon-button/icon-button.vue
 var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -16,6 +15,7 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		ariaLabel: {},
 		variant: {},
 		color: {},
+		autoContrast: { type: Boolean },
 		size: {},
 		radius: {},
 		type: { default: "button" },
@@ -32,11 +32,10 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const props = __props;
 		const rootClass = computed(() => [...bem("rp-button", {
 			[props.variant ?? ""]: Boolean(props.variant),
-			[`color-${props.color}`]: isComponentPresetColor(props.color),
 			[`size-${props.size}`]: Boolean(props.size),
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}), "rp-icon-button"]);
-		const rootStyle = computed(() => getButtonColorStyle(props.color));
+		const rootStyle = computed(() => getButtonColorStyle(props.color, props.variant, props.autoContrast));
 		const n6 = t1();
 		renderEffect(() => {
 			const _loading = __props.loading;
@@ -61,8 +60,6 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		}, 261);
 		return n6;
 	}
-}), [["__scopeId", "data-v-7005752e"]]);
+}), [["__scopeId", "data-v-9f46a6a3"]]);
 //#endregion
 export { icon_button_default as t };
-
-//# sourceMappingURL=icon-button.js.map

package/dist/index.d.ts

@@ -1,15 +1,23 @@
+export * from './components/alert';
 export * from './components/accordion';
+export * from './components/aspect-ratio';
+export * from './components/avatar';
 export * from './components/badge';
 export * from './components/button';
+export * from './components/button-link';
 export * from './components/button-group';
 export * from './components/card';
 export * from './components/checkbox';
 export * from './components/collapse';
+export * from './components/color-input';
+export * from './components/color-picker';
+export * from './components/color-swatch';
 export * from './components/dropdown-menu';
 export * from './components/field';
 export * from './components/icon-button';
 export * from './components/input';
 export * from './components/modal';
+export * from './components/number-input';
 export * from './components/overlay';
 export * from './components/popover';
 export * from './components/progress';

package/dist/index.js

@@ -1,27 +1,39 @@
+import { i as alert_default, n as alertRadiuses, r as alertVariants, t as alertColors } from "./alert.js";
 import { t as useCollapse } from "./useCollapse.js";
 import { i as useAccordionItem, n as accordion_default, r as useAccordion, t as accordion_item_default } from "./accordion.js";
+import { t as aspect_ratio_default } from "./aspect-ratio.js";
+import { a as avatar_default, i as avatarVariants, n as avatarRadiuses, r as avatarSizes, t as avatarColors } from "./avatar.js";
 import { a as badge_default, i as badgeVariants, n as badgeRadiuses, r as badgeSizes, t as badgeColors } from "./badge.js";
 import { t as button_default } from "./button.js";
+import { t as button_link_default } from "./button-link.js";
 import { t as button_group_default } from "./button-group.js";
 import { t as card_default } from "./card.js";
 import { t as checkbox_default } from "./checkbox.js";
 import { t as collapse_default } from "./collapse.js";
+import { t as color_input_default } from "./color-input.js";
+import { t as color_swatch_default } from "./color-swatch.js";
+import { t as color_picker_default } from "./color-picker.js";
+import { t as input_default } from "./input.js";
+import { t as popover_default } from "./popover.js";
+import { n as colorPickerSizes, t as colorPickerFormats } from "./color-picker2.js";
+import "./components/color-swatch/index.js";
 import { n as useDropdownMenu, t as dropdown_menu_default } from "./dropdown-menu.js";
 import { t as field_default } from "./field.js";
 import { t as icon_button_default } from "./icon-button.js";
 import "./components/icon-button/index.js";
-import { t as input_default } from "./input.js";
+import "./components/input/index.js";
 import { t as overlay_default } from "./overlay.js";
 import { t as modal_default } from "./modal.js";
+import { t as number_input_default } from "./number-input.js";
 import "./components/overlay/index.js";
-import { t as popover_default } from "./popover.js";
+import { t as popoverPlacements } from "./popover2.js";
 import { i as progress_default, n as progressRadiuses, r as progressSizes, t as progressColors } from "./progress.js";
 import { n as radio_default, t as radio_group_default } from "./radio.js";
 import { t as select_default } from "./select.js";
 import { t as tooltip_default } from "./tooltip.js";
-import { i as sliderSizes, n as sliderColors, r as sliderOrientations, t as slider_default } from "./slider.js";
+import { a as slider_default, i as range_slider_default, n as sliderOrientations, r as sliderSizes, t as sliderColors } from "./slider.js";
 import { t as switch_default } from "./switch.js";
 import { a as useTabs, c as useTabsTrigger, i as tabs_default, n as tabs_list_default, o as useTabsContent, r as tabs_content_default, s as useTabsList, t as tabs_trigger_default } from "./tabs.js";
 import { t as textarea_default } from "./textarea.js";
 import "./components/tooltip/index.js";
-export { accordion_default as Accordion, accordion_item_default as AccordionItem, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, dropdown_menu_default as DropdownMenu, field_default as Field, icon_button_default as IconButton, input_default as Input, modal_default as Modal, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, textarea_default as Textarea, tooltip_default as Tooltip, badgeColors, badgeRadiuses, badgeSizes, badgeVariants, progressColors, progressRadiuses, progressSizes, sliderColors, sliderOrientations, sliderSizes, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useTabs, useTabsContent, useTabsList, useTabsTrigger };
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dropdown_menu_default as DropdownMenu, field_default as Field, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, textarea_default as Textarea, tooltip_default as Tooltip, alertColors, alertRadiuses, alertVariants, avatarColors, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeRadiuses, badgeSizes, badgeVariants, colorPickerFormats, colorPickerSizes, popoverPlacements, progressColors, progressRadiuses, progressSizes, sliderColors, sliderOrientations, sliderSizes, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useTabs, useTabsContent, useTabsList, useTabsTrigger };

package/dist/input.css

@@ -1,12 +1,12 @@
-.rp-input[data-v-e5ad32a7] {
+.rp-input[data-v-67d291cf] {
   --_rp-input-height: var(--rp-size-control-md);
-  --_rp-input-padding-x: var(--rp-spacing-3);
-  --_rp-input-font-size: var(--rp-font-size-base);
+  --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-input-font-size: var(--rp-font-size-md);
   --_rp-input-radius: var(--rp-radius-sm);
-  --_rp-input-valid-border: var(--rp-color-success-border-hover);
-  --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
-  --_rp-input-invalid-border: var(--rp-color-danger);
-  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+  --_rp-input-valid-border: var(--rp-color-green-outline);
+  --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-green-outline) 32%, transparent);
+  --_rp-input-invalid-border: var(--rp-color-red-outline);
+  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -19,87 +19,81 @@
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-input[data-v-e5ad32a7]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-67d291cf]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
   border-color: var(--rp-color-control-border-hover);
 }
-.rp-input[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-67d291cf]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--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-input[data-v-e5ad32a7] {
+.rp-input[data-v-67d291cf] {
   height: var(--_rp-input-height);
   padding: 0 var(--_rp-input-padding-x);
   font-size: var(--_rp-input-font-size);
   border-radius: var(--_rp-input-radius);
 }
-.rp-input--size-xs[data-v-e5ad32a7] {
-  --_rp-input-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
-  --_rp-input-padding-x: var(--rp-spacing-1);
+.rp-input--size-xs[data-v-67d291cf] {
+  --_rp-input-height: var(--rp-size-control-xs);
+  --_rp-input-padding-x: calc(var(--rp-size-control-xs) / 3);
   --_rp-input-font-size: var(--rp-font-size-xs);
 }
-.rp-input--size-sm[data-v-e5ad32a7] {
+.rp-input--size-sm[data-v-67d291cf] {
   --_rp-input-height: var(--rp-size-control-sm);
-  --_rp-input-padding-x: var(--rp-spacing-2);
+  --_rp-input-padding-x: calc(var(--rp-size-control-sm) / 3);
   --_rp-input-font-size: var(--rp-font-size-sm);
 }
-.rp-input--size-md[data-v-e5ad32a7] {
+.rp-input--size-md[data-v-67d291cf] {
   --_rp-input-height: var(--rp-size-control-md);
-  --_rp-input-padding-x: var(--rp-spacing-3);
-  --_rp-input-font-size: var(--rp-font-size-base);
+  --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
+  --_rp-input-font-size: var(--rp-font-size-md);
 }
-.rp-input--size-lg[data-v-e5ad32a7] {
+.rp-input--size-lg[data-v-67d291cf] {
   --_rp-input-height: var(--rp-size-control-lg);
-  --_rp-input-padding-x: var(--rp-spacing-4);
+  --_rp-input-padding-x: calc(var(--rp-size-control-lg) / 3);
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.rp-input--size-xl[data-v-e5ad32a7] {
-  --_rp-input-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
-  --_rp-input-padding-x: var(--rp-spacing-5);
-  --_rp-input-font-size: var(--rp-font-size-lg);
+.rp-input--size-xl[data-v-67d291cf] {
+  --_rp-input-height: var(--rp-size-control-xl);
+  --_rp-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+  --_rp-input-font-size: var(--rp-font-size-xl);
 }
-.rp-input--radius-xs[data-v-e5ad32a7] {
+.rp-input--radius-xs[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-xs);
 }
-.rp-input--radius-sm[data-v-e5ad32a7] {
+.rp-input--radius-sm[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-sm);
 }
-.rp-input--radius-md[data-v-e5ad32a7] {
+.rp-input--radius-md[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-md);
 }
-.rp-input--radius-lg[data-v-e5ad32a7] {
+.rp-input--radius-lg[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-lg);
 }
-.rp-input--radius-xl[data-v-e5ad32a7] {
+.rp-input--radius-xl[data-v-67d291cf] {
   --_rp-input-radius: var(--rp-radius-xl);
 }
-html.dark .rp-input[data-v-e5ad32a7] {
-  --_rp-input-valid-border: var(--rp-color-success-fg);
-  --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
-  --_rp-input-invalid-border: var(--rp-color-danger-fg);
-  --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
-}
-.rp-input--disabled[data-v-e5ad32a7] {
+.rp-input--disabled[data-v-67d291cf] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-input--valid[data-v-e5ad32a7] {
+.rp-input--valid[data-v-67d291cf] {
   border-color: var(--_rp-input-valid-border);
 }
-.rp-input--valid[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled) {
+.rp-input--valid[data-v-67d291cf]:focus-within:not(.rp-input--disabled) {
   border-color: var(--_rp-input-valid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-valid-ring);
 }
-.rp-input--invalid[data-v-e5ad32a7] {
+.rp-input--invalid[data-v-67d291cf] {
   border-color: var(--_rp-input-invalid-border);
 }
-.rp-input--invalid[data-v-e5ad32a7]:focus-within:not(.rp-input--disabled) {
+.rp-input--invalid[data-v-67d291cf]:focus-within:not(.rp-input--disabled) {
   border-color: var(--_rp-input-invalid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-invalid-ring);
 }
-.rp-input--readonly[data-v-e5ad32a7] {
+.rp-input--readonly[data-v-67d291cf] {
   background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-input__native[data-v-e5ad32a7] {
+.rp-input__native[data-v-67d291cf] {
   box-sizing: border-box;
   flex: 1;
   width: 100%;
@@ -111,15 +105,15 @@ html.dark .rp-input[data-v-e5ad32a7] {
   background: transparent;
   font: inherit;
   color: var(--rp-color-control-fg);
-  line-height: var(--rp-line-height-none);
+  line-height: 1;
 }
-.rp-input__native[data-v-e5ad32a7]::placeholder {
+.rp-input__native[data-v-67d291cf]::placeholder {
   color: var(--rp-color-control-placeholder);
 }
-.rp-input__native[data-v-e5ad32a7]:disabled {
+.rp-input__native[data-v-67d291cf]:disabled {
   cursor: not-allowed;
 }
-.rp-input__left[data-v-e5ad32a7], .rp-input__right[data-v-e5ad32a7] {
+.rp-input__left[data-v-67d291cf], .rp-input__right[data-v-67d291cf] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;

package/dist/input.js

@@ -2,7 +2,7 @@ import './input.css';
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setValue, template, unref } from "vue";
+import { child, computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, ref, renderEffect, setClass, setDynamicProps, setInsertionState, template, unref, watch } from "vue";
 //#region src/components/input/useInput.ts
 var INTERACTIVE_SELECTOR = [
 	"button",
@@ -46,10 +46,10 @@ function useInput(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/input/input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-e5ad32a7 class=rp-input__left>");
-var t1 = template("<span data-v-e5ad32a7 class=rp-input__right>");
-var t2 = template("<label data-v-e5ad32a7><input data-v-e5ad32a7 class=rp-input__native>", 1);
-delegateEvents("input", "mousedown");
+var t0 = template("<span data-v-67d291cf class=rp-input__left>");
+var t1 = template("<span data-v-67d291cf class=rp-input__right>");
+var t2 = template("<label data-v-67d291cf><input data-v-67d291cf>", 1);
+delegateEvents("mousedown");
 //#endregion
 //#region src/components/input/input.vue
 var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -85,7 +85,9 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit, slots: $slots }) {
@@ -94,6 +96,20 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const { inputRef, control, rootClass, onInput, focusInput } = useInput(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const nativeInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				onInput(event) {
+					onInput(event);
+					attrs.onInput?.(event);
+				}
+			};
+		});
+		watch([inputRef, () => props.validationMessage], ([input, validationMessage]) => input?.setCustomValidity(validationMessage ?? ""), {
+			flush: "post",
+			immediate: true
+		});
 		const _setTemplateRef = createTemplateRefSetter();
 		const n9 = t2();
 		const n4 = child(n9, 1);
@@ -105,24 +121,26 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			createSlot("left", null, null, 1);
 			return n3;
 		});
-		n4.$evtinput = createInvoker((e) => unref(onInput)(e));
 		_setTemplateRef(n4, inputRef, null, "inputRef");
 		renderEffect(() => {
 			const _control = unref(control);
 			const _control_required = _control.required;
-			setProp(n4, "id", _control.id);
-			setProp(n4, "name", __props.name);
-			setProp(n4, "type", __props.type);
-			setValue(n4, __props.modelValue);
-			setProp(n4, "placeholder", __props.placeholder);
-			setProp(n4, "disabled", _control.disabled || void 0);
-			setProp(n4, "readonly", __props.readonly || void 0);
-			setProp(n4, "required", _control_required || void 0);
-			setAttr(n4, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n4, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n4, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n4, "aria-invalid", _control.invalid || void 0);
-			setAttr(n4, "aria-required", _control_required || void 0);
+			setDynamicProps(n4, [nativeInputAttrs.value, {
+				id: _control.id,
+				name: __props.name,
+				class: "rp-input__native",
+				type: __props.type,
+				value: __props.modelValue,
+				placeholder: __props.placeholder,
+				disabled: _control.disabled || void 0,
+				readonly: __props.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
+			}]);
 		});
 		setInsertionState(n9, null, 2);
 		createIf(() => $slots.right, () => {
@@ -134,8 +152,6 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		n9.$evtmousedown = createInvoker((e) => unref(focusInput)(e));
 		return n9;
 	}
-}), [["__scopeId", "data-v-e5ad32a7"]]);
+}), [["__scopeId", "data-v-67d291cf"]]);
 //#endregion
 export { input_default as t };
-
-//# sourceMappingURL=input.js.map

package/dist/minus.js

@@ -0,0 +1,12 @@
+import { defineVaporComponent, markRaw, template } from "vue";
+//#region ~icons/lucide/minus
+var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M5 12h14\">", 3, 1);
+function render(_ctx) {
+	return t0();
+}
+var minus_default = markRaw(defineVaporComponent({
+	name: "lucide-minus",
+	render
+}));
+//#endregion
+export { minus_default as t };

package/dist/modal.css

@@ -1,4 +1,4 @@
-.rp-modal[data-v-fe44cbf7] {
+.rp-modal[data-v-657f313d] {
   --_rp-modal-width: 32rem;
   --_rp-modal-max-height: calc(100vh - var(--rp-spacing-12));
   --_rp-modal-radius: var(--rp-radius-sm);
@@ -12,25 +12,25 @@
   overflow: auto;
   font-family: var(--rp-font-family);
 }
-.rp-modal--size-sm[data-v-fe44cbf7] {
+.rp-modal--size-sm[data-v-657f313d] {
   --_rp-modal-width: 22rem;
 }
-.rp-modal--size-lg[data-v-fe44cbf7] {
+.rp-modal--size-lg[data-v-657f313d] {
   --_rp-modal-width: 45rem;
 }
-.rp-modal--size-xl[data-v-fe44cbf7] {
+.rp-modal--size-xl[data-v-657f313d] {
   --_rp-modal-width: 58rem;
 }
-.rp-modal--size-full[data-v-fe44cbf7] {
+.rp-modal--size-full[data-v-657f313d] {
   --_rp-modal-width: 100vw;
   --_rp-modal-max-height: 100vh;
   --_rp-modal-radius: var(--rp-radius-none);
   padding: 0;
 }
-.rp-modal__overlay[data-v-fe44cbf7] {
+.rp-modal__overlay[data-v-657f313d] {
   border-radius: 0;
 }
-.rp-modal__panel[data-v-fe44cbf7] {
+.rp-modal__panel[data-v-657f313d] {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
@@ -40,58 +40,58 @@
   max-height: var(--_rp-modal-max-height);
   color: var(--rp-color-text);
   overflow: hidden;
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-modal-radius);
   box-shadow: var(--rp-shadow-lg);
   outline: none;
 }
-.rp-modal--size-full .rp-modal__panel[data-v-fe44cbf7] {
+.rp-modal--size-full .rp-modal__panel[data-v-657f313d] {
   min-height: 100vh;
   border: 0;
 }
-.rp-modal__header[data-v-fe44cbf7] {
+.rp-modal__header[data-v-657f313d] {
   box-sizing: border-box;
   padding: var(--rp-spacing-5) calc(var(--rp-spacing-6) + var(--rp-size-control-sm)) var(--rp-spacing-4) var(--rp-spacing-5);
-  border-bottom: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-bottom: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
-.rp-modal__heading[data-v-fe44cbf7] {
+.rp-modal__heading[data-v-657f313d] {
   display: grid;
   gap: var(--rp-spacing-1);
 }
-.rp-modal__title[data-v-fe44cbf7] {
+.rp-modal__title[data-v-657f313d] {
   margin: 0;
   color: var(--rp-color-text);
   font-size: var(--rp-font-size-xl);
   font-weight: var(--rp-font-weight-semibold);
-  line-height: var(--rp-line-height-tight);
+  line-height: var(--rp-line-height-xs);
 }
-.rp-modal__description[data-v-fe44cbf7] {
+.rp-modal__description[data-v-657f313d] {
   margin: 0;
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-dimmed);
   font-size: var(--rp-font-size-sm);
-  line-height: var(--rp-line-height-normal);
+  line-height: var(--rp-line-height-md);
 }
-.rp-modal__close[data-v-fe44cbf7] {
+.rp-modal__close[data-v-657f313d] {
   position: absolute;
   top: var(--rp-spacing-3);
   right: var(--rp-spacing-3);
   z-index: 1;
 }
-.rp-modal__body[data-v-fe44cbf7] {
+.rp-modal__body[data-v-657f313d] {
   box-sizing: border-box;
   flex: 1 1 auto;
   min-height: 0;
   padding: var(--rp-spacing-5);
   overflow: auto;
   color: var(--rp-color-text);
-  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-modal--closable.rp-modal--headerless .rp-modal__body[data-v-fe44cbf7] {
+.rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-657f313d] {
   padding-right: calc(var(--rp-spacing-6) + var(--rp-size-control-sm));
 }
-.rp-modal__footer[data-v-fe44cbf7] {
+.rp-modal__footer[data-v-657f313d] {
   box-sizing: border-box;
   display: flex;
   flex: 0 0 auto;
@@ -99,36 +99,36 @@
   gap: var(--rp-spacing-2);
   justify-content: flex-end;
   padding: var(--rp-spacing-4) var(--rp-spacing-5);
-  border-top: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-top: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
-.rp-modal-enter-active[data-v-fe44cbf7],
-.rp-modal-leave-active[data-v-fe44cbf7] {
+.rp-modal-enter-active[data-v-657f313d],
+.rp-modal-leave-active[data-v-657f313d] {
   transition: opacity var(--rp-transition-fast);
 }
-.rp-modal-enter-active .rp-modal__panel[data-v-fe44cbf7],
-.rp-modal-leave-active .rp-modal__panel[data-v-fe44cbf7] {
+.rp-modal-enter-active .rp-modal__panel[data-v-657f313d],
+.rp-modal-leave-active .rp-modal__panel[data-v-657f313d] {
   transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-modal-enter-from[data-v-fe44cbf7],
-.rp-modal-leave-to[data-v-fe44cbf7] {
+.rp-modal-enter-from[data-v-657f313d],
+.rp-modal-leave-to[data-v-657f313d] {
   opacity: 0;
 }
-.rp-modal-enter-from .rp-modal__panel[data-v-fe44cbf7],
-.rp-modal-leave-to .rp-modal__panel[data-v-fe44cbf7] {
+.rp-modal-enter-from .rp-modal__panel[data-v-657f313d],
+.rp-modal-leave-to .rp-modal__panel[data-v-657f313d] {
   opacity: 0;
   transform: translateY(var(--rp-spacing-2)) scale(0.98);
 }
 @media (max-width: 480px) {
-.rp-modal[data-v-fe44cbf7] {
+.rp-modal[data-v-657f313d] {
     padding: var(--rp-spacing-3);
 }
-.rp-modal__header[data-v-fe44cbf7] {
+.rp-modal__header[data-v-657f313d] {
     padding-left: var(--rp-spacing-4);
 }
-.rp-modal__body[data-v-fe44cbf7] {
+.rp-modal__body[data-v-657f313d] {
     padding: var(--rp-spacing-4);
 }
-.rp-modal__footer[data-v-fe44cbf7] {
+.rp-modal__footer[data-v-657f313d] {
     padding: var(--rp-spacing-4);
 }
 }

package/dist/modal.js

@@ -1,8 +1,8 @@
 import './modal.css';
+import { t as x_default } from "./x.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 icon_button_default } from "./icon-button.js";
-import { t as x_default } from "./x.js";
 import { t as overlay_default } from "./overlay.js";
 import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
 //#region src/components/modal/useModal.ts
@@ -76,7 +76,7 @@ function useModal(props, emitOpenChange) {
 	const slots = useSlots();
 	const generatedId = useId();
 	const panelRef = ref(null);
-	const uncontrolledOpen = ref(Boolean(props.defaultOpen));
+	const uncontrolledOpen = ref(false);
 	const modalToken = Symbol("modal");
 	let isMounted = false;
 	let isActiveModal = false;
@@ -275,13 +275,13 @@ function useModal(props, emitOpenChange) {
 }
 //#endregion
 //#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<h2 data-v-fe44cbf7 class=rp-modal__title> ");
-var t1 = template("<p data-v-fe44cbf7 class=rp-modal__description> ");
-var t2 = template("<div data-v-fe44cbf7 class=rp-modal__heading>");
-var t3 = template("<div data-v-fe44cbf7 class=rp-modal__header>");
-var t4 = template("<div data-v-fe44cbf7 class=rp-modal__body>");
-var t5 = template("<div data-v-fe44cbf7 class=rp-modal__footer>");
-var t6 = template("<div data-v-fe44cbf7><section data-v-fe44cbf7 class=rp-modal__panel aria-modal=true tabindex=-1>");
+var t0 = template("<h2 data-v-657f313d class=rp-modal__title> ");
+var t1 = template("<p data-v-657f313d class=rp-modal__description> ");
+var t2 = template("<div data-v-657f313d class=rp-modal__heading>");
+var t3 = template("<div data-v-657f313d class=rp-modal__header>");
+var t4 = template("<div data-v-657f313d class=rp-modal__body>");
+var t5 = template("<div data-v-657f313d class=rp-modal__footer>");
+var t6 = template("<div data-v-657f313d><section data-v-657f313d class=rp-modal__panel aria-modal=true tabindex=-1>");
 //#endregion
 //#region src/components/modal/modal.vue
 var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -293,10 +293,6 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: void 0
 		},
-		defaultOpen: {
-			type: Boolean,
-			default: false
-		},
 		title: { default: "" },
 		description: { default: "" },
 		ariaLabel: { default: "" },
@@ -426,8 +422,6 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			}, null, 129);
 		}, { _: 8 }), true);
 	}
-}), [["__scopeId", "data-v-fe44cbf7"]]);
+}), [["__scopeId", "data-v-657f313d"]]);
 //#endregion
 export { modal_default as t };
-
-//# sourceMappingURL=modal.js.map