ropav 0.0.11 → 0.0.13

package/dist/modal.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-modal[data-v-3646bb42] {
+.rp-modal[data-v-1a627831] {
     --_rp-modal-width: 32rem;
     --_rp-modal-max-height: calc(100vh - var(--rp-spacing-12));
     --_rp-modal-radius: var(--rp-radius-sm);
@@ -13,25 +13,25 @@
     overflow: auto;
     font-family: var(--rp-font-family);
 }
-.rp-modal--size-sm[data-v-3646bb42] {
+.rp-modal--size-sm[data-v-1a627831] {
     --_rp-modal-width: 22rem;
 }
-.rp-modal--size-lg[data-v-3646bb42] {
+.rp-modal--size-lg[data-v-1a627831] {
     --_rp-modal-width: 45rem;
 }
-.rp-modal--size-xl[data-v-3646bb42] {
+.rp-modal--size-xl[data-v-1a627831] {
     --_rp-modal-width: 58rem;
 }
-.rp-modal--size-full[data-v-3646bb42] {
+.rp-modal--size-full[data-v-1a627831] {
     --_rp-modal-width: 100vw;
     --_rp-modal-max-height: 100vh;
     --_rp-modal-radius: var(--rp-radius-none);
     padding: 0;
 }
-.rp-modal__overlay[data-v-3646bb42] {
+.rp-modal__overlay[data-v-1a627831] {
     border-radius: 0;
 }
-.rp-modal__panel[data-v-3646bb42] {
+.rp-modal__panel[data-v-1a627831] {
     position: relative;
     z-index: 1;
     box-sizing: border-box;
@@ -47,39 +47,39 @@
     box-shadow: var(--rp-shadow-lg);
     outline: none;
 }
-.rp-modal--size-full .rp-modal__panel[data-v-3646bb42] {
+.rp-modal--size-full .rp-modal__panel[data-v-1a627831] {
     min-height: 100vh;
     border: 0;
 }
-.rp-modal__header[data-v-3646bb42] {
+.rp-modal__header[data-v-1a627831] {
     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-default-border);
 }
-.rp-modal__heading[data-v-3646bb42] {
+.rp-modal__heading[data-v-1a627831] {
     display: grid;
     gap: var(--rp-spacing-1);
 }
-.rp-modal__title[data-v-3646bb42] {
+.rp-modal__title[data-v-1a627831] {
     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-xs);
 }
-.rp-modal__description[data-v-3646bb42] {
+.rp-modal__description[data-v-1a627831] {
     margin: 0;
     color: var(--rp-color-dimmed);
     font-size: var(--rp-font-size-sm);
     line-height: var(--rp-line-height-md);
 }
-.rp-modal__close[data-v-3646bb42] {
+.rp-modal__close[data-v-1a627831] {
     position: absolute;
     top: var(--rp-spacing-3);
     right: var(--rp-spacing-3);
     z-index: 1;
 }
-.rp-modal__body[data-v-3646bb42] {
+.rp-modal__body[data-v-1a627831] {
     box-sizing: border-box;
     flex: 1 1 auto;
     min-height: 0;
@@ -89,10 +89,10 @@
     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-3646bb42] {
+.rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-1a627831] {
     padding-right: calc(var(--rp-spacing-6) + var(--rp-size-control-sm));
 }
-.rp-modal__footer[data-v-3646bb42] {
+.rp-modal__footer[data-v-1a627831] {
     box-sizing: border-box;
     display: flex;
     flex: 0 0 auto;
@@ -102,34 +102,34 @@
     padding: var(--rp-spacing-4) var(--rp-spacing-5);
     border-top: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
-.rp-modal-enter-active[data-v-3646bb42],
-  .rp-modal-leave-active[data-v-3646bb42] {
+.rp-modal-enter-active[data-v-1a627831],
+  .rp-modal-leave-active[data-v-1a627831] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-modal-enter-active .rp-modal__panel[data-v-3646bb42],
-  .rp-modal-leave-active .rp-modal__panel[data-v-3646bb42] {
+.rp-modal-enter-active .rp-modal__panel[data-v-1a627831],
+  .rp-modal-leave-active .rp-modal__panel[data-v-1a627831] {
     transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-modal-enter-from[data-v-3646bb42],
-  .rp-modal-leave-to[data-v-3646bb42] {
+.rp-modal-enter-from[data-v-1a627831],
+  .rp-modal-leave-to[data-v-1a627831] {
     opacity: 0;
 }
-.rp-modal-enter-from .rp-modal__panel[data-v-3646bb42],
-  .rp-modal-leave-to .rp-modal__panel[data-v-3646bb42] {
+.rp-modal-enter-from .rp-modal__panel[data-v-1a627831],
+  .rp-modal-leave-to .rp-modal__panel[data-v-1a627831] {
     opacity: 0;
     transform: translateY(var(--rp-spacing-2)) scale(0.98);
 }
 @media (max-width: 480px) {
-.rp-modal[data-v-3646bb42] {
+.rp-modal[data-v-1a627831] {
       padding: var(--rp-spacing-3);
 }
-.rp-modal__header[data-v-3646bb42] {
+.rp-modal__header[data-v-1a627831] {
       padding-left: var(--rp-spacing-4);
 }
-.rp-modal__body[data-v-3646bb42] {
+.rp-modal__body[data-v-1a627831] {
       padding: var(--rp-spacing-4);
 }
-.rp-modal__footer[data-v-3646bb42] {
+.rp-modal__footer[data-v-1a627831] {
       padding: var(--rp-spacing-4);
 }
 }

package/dist/modal.js

@@ -3,14 +3,11 @@ import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as useFocusTrap } from "./useFocusTrap.js";
-import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { a as dialog_overlay_default, c as dialog_close_default, i as dialog_portal_default, l as resolveDialogCloseReason, n as dialog_title_default, o as dialog_description_default, r as dialog_root_default, s as dialog_content_default } from "./dialog.js";
 import { t as icon_button_default } from "./icon-button.js";
 import { t as overlay_default } from "./overlay.js";
-import { VaporTeleport, VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
+import { VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, mergeProps, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/modal/useModal.ts
-var bodyScrollLockCount = 0;
-var previousBodyOverflow = "";
 var DEFAULT_ROLE = "dialog";
 var DEFAULT_SIZE = "md";
 var MODAL_PRESET_SIZES = /* @__PURE__ */ new Set([
@@ -20,43 +17,13 @@ var MODAL_PRESET_SIZES = /* @__PURE__ */ new Set([
 	"xl",
 	"full"
 ]);
-function isHTMLElement(value) {
-	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement;
-}
 function isModalPresetSize(size) {
 	return MODAL_PRESET_SIZES.has(size);
 }
-function lockBodyScroll() {
-	if (typeof document === "undefined") return void 0;
-	if (bodyScrollLockCount === 0) {
-		previousBodyOverflow = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-	}
-	bodyScrollLockCount += 1;
-	return () => {
-		bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
-		if (bodyScrollLockCount === 0) document.body.style.overflow = previousBodyOverflow;
-	};
-}
-function readInitialFocus(initialFocus) {
-	return isRef(initialFocus) ? initialFocus.value : initialFocus;
-}
-function queryPanelElement(panel, selector) {
-	try {
-		const element = panel.querySelector(selector);
-		return isHTMLElement(element) ? element : null;
-	} catch {
-		return null;
-	}
-}
-function useModal(props, emitOpenChange) {
+function useModal(props, emit = {}) {
 	const slots = useSlots();
 	const generatedId = useId();
-	const panelRef = ref(null);
 	const uncontrolledOpen = ref(false);
-	let isMounted = false;
-	let isActiveModal = false;
-	let unlockScroll;
 	const modalId = computed(() => props.id ?? `${generatedId}-modal`);
 	const titleId = computed(() => `${modalId.value}-title`);
 	const descriptionId = computed(() => `${modalId.value}-description`);
@@ -98,71 +65,21 @@ function useModal(props, emitOpenChange) {
 	function setOpen(nextOpen) {
 		if (nextOpen === isOpen.value) return;
 		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
-		emitOpenChange?.(nextOpen);
+		emit.openChange?.(nextOpen);
 	}
 	function openModal() {
 		setOpen(true);
 	}
-	function closeModal() {
+	function closeModal(reason = "programmatic") {
+		if (!isOpen.value) return;
 		setOpen(false);
+		emit.close?.(resolveDialogCloseReason(reason));
 	}
 	function toggleModal() {
-		setOpen(!isOpen.value);
-	}
-	function resolveInitialFocus() {
-		const initialFocus = readInitialFocus(props.initialFocus);
-		const panel = panelRef.value;
-		if (!initialFocus || !panel) return null;
-		if (typeof initialFocus === "string") return queryPanelElement(panel, initialFocus);
-		return panel.contains(initialFocus) ? initialFocus : null;
+		if (isOpen.value) closeModal("programmatic");
+		else openModal();
 	}
-	const focusTrap = useFocusTrap(panelRef, {
-		...props.focusTrapOptions,
-		initialFocus: () => resolveInitialFocus() ?? void 0,
-		fallbackFocus: () => panelRef.value,
-		returnFocusOnDeactivate: props.returnFocus !== false,
-		escapeDeactivates: (event) => {
-			if (props.closeOnEscape === false) return false;
-			event.preventDefault();
-			closeModal();
-			return false;
-		},
-		allowOutsideClick: true,
-		preventScroll: true,
-		delayInitialFocus: props.focusTrapOptions?.delayInitialFocus ?? false,
-		delayReturnFocus: props.focusTrapOptions?.delayReturnFocus ?? false
-	});
-	function activateModal() {
-		if (isActiveModal) return;
-		isActiveModal = true;
-		if (props.preventScroll !== false) unlockScroll = lockBodyScroll();
-		focusTrap.activate();
-	}
-	function deactivateModal() {
-		if (!isActiveModal) return;
-		isActiveModal = false;
-		focusTrap.deactivate({ returnFocus: props.returnFocus !== false });
-		unlockScroll?.();
-		unlockScroll = void 0;
-	}
-	function onOverlayClick(event) {
-		if (props.closeOnOverlayClick === false || event.target !== event.currentTarget) return;
-		closeModal();
-	}
-	onMounted(() => {
-		isMounted = true;
-		if (isOpen.value) activateModal();
-	});
-	onBeforeUnmount(() => {
-		deactivateModal();
-	});
-	watch(isOpen, (nextOpen) => {
-		if (!isMounted) return;
-		if (nextOpen) activateModal();
-		else deactivateModal();
-	});
 	return {
-		panelRef,
 		modalId,
 		titleId,
 		descriptionId,
@@ -183,16 +100,14 @@ function useModal(props, emitOpenChange) {
 		openModal,
 		closeModal,
 		toggleModal,
-		onOverlayClick
+		setOpen
 	};
 }
 //#endregion
 //#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<h2 data-v-3646bb42> ");
-var t1 = template("<p data-v-3646bb42> ");
-var t2 = template("<div data-v-3646bb42 class=rp-modal__heading>");
-var t3 = template("<div data-v-3646bb42>");
-var t4 = template("<div data-v-3646bb42><section data-v-3646bb42>");
+var t0 = template(" ");
+var t1 = template("<div data-v-1a627831 class=rp-modal__heading>");
+var t2 = template("<div data-v-1a627831>");
 //#endregion
 //#region src/components/modal/modal.vue
 var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -237,6 +152,10 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: false
 		},
+		modal: {
+			type: Boolean,
+			default: true
+		},
 		focusTrapOptions: { default: () => ({}) },
 		teleport: {
 			type: Boolean,
@@ -246,14 +165,17 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		classNames: {},
 		styles: {}
 	},
-	emits: ["update:open"],
+	emits: ["update:open", "close"],
 	setup(__props, { emit: __emit, slots: $slots }) {
 		const props = __props;
-		const teleportTo = useTeleportTarget(() => props.teleportTo);
 		const emit = __emit;
-		const { panelRef, modalId, titleId, descriptionId, role, isOpen, shouldRender, hasHeader, hasFooter, showCloseButton, headerId, ariaLabelledby, ariaDescribedby, ariaLabel, rootClass, rootStyle, stateClass, slotProps, closeModal, onOverlayClick } = useModal(props, (open) => {
-			emit("update:open", open);
+		const { modalId, titleId, descriptionId, role, isOpen, shouldRender, hasHeader, hasFooter, showCloseButton, headerId, ariaLabelledby, ariaDescribedby, ariaLabel, rootClass, rootStyle, stateClass, slotProps, setOpen } = useModal(props, {
+			openChange: (open) => emit("update:open", open),
+			close: (reason) => emit("close", reason)
 		});
+		function onDialogClose(reason) {
+			emit("close", reason);
+		}
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const state = computed(() => isOpen.value ? "open" : "closed");
 		const rootAttrs = computed(() => getRootAttrs({
@@ -261,6 +183,9 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			style: rootStyle.value,
 			"data-state": state.value
 		}));
+		function getLayeredRootAttrs(zIndex) {
+			return mergeProps(rootAttrs.value, { style: { zIndex } });
+		}
 		const overlayClassNames = computed(() => ({ root: ["rp-modal__overlay", props.classNames?.overlay] }));
 		const overlayStyles = computed(() => ({ root: props.styles?.overlay }));
 		const panelAttrs = computed(() => ({
@@ -269,107 +194,123 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		}));
 		const closeClassNames = computed(() => ({ root: ["rp-modal__close", props.classNames?.close] }));
 		const closeStyles = computed(() => ({ root: props.styles?.close }));
-		const _setTemplateRef = createTemplateRefSetter();
-		return createComponent(VaporTeleport, {
-			to: () => unref(teleportTo),
-			disabled: () => !__props.teleport
-		}, () => {
-			return createComponent(VaporTransition, {
-				name: "rp-modal",
-				persisted: ""
-			}, extend(() => {
-				return createIf(() => unref(shouldRender), () => {
-					const n28 = t4();
-					const n27 = child(n28, 1);
-					renderEffect(() => setDynamicProps(n28, [rootAttrs.value]));
-					setInsertionState(n28, 0, 0);
-					createComponent(overlay_default, { $: [() => __props.overlayProps, {
-						"class-names": () => overlayClassNames.value,
-						styles: () => overlayStyles.value,
-						"z-index": 0,
-						interactive: "",
-						onClick: () => unref(onOverlayClick)
-					}] });
-					renderEffect(() => setDynamicProps(n27, [
-						{ id: unref(modalId) },
-						panelAttrs.value,
-						{
-							role: unref(role),
-							"aria-modal": "true",
-							"aria-label": unref(ariaLabel),
-							"aria-labelledby": unref(ariaLabelledby),
-							"aria-describedby": unref(ariaDescribedby),
-							tabindex: "-1"
-						}
-					]));
-					setInsertionState(n27, null, 0);
-					createIf(() => unref(hasHeader), () => {
-						const n14 = t3();
-						renderEffect(() => setDynamicProps(n14, [{ id: unref(headerId) }, unref(getPartAttrs)("header", { class: "rp-modal__header" })]));
-						setInsertionState(n14, null, 0);
-						createSlot("header", { $: [() => unref(slotProps)] }, () => {
-							const n13 = t2();
-							setInsertionState(n13, null, 0);
-							createIf(() => __props.title, () => {
-								const n9 = t0();
-								const x9 = txt(n9);
-								renderEffect(() => {
-									setDynamicProps(n9, [{ id: unref(titleId) }, unref(getPartAttrs)("title", { class: "rp-modal__title" })]);
-									setText(x9, toDisplayString(__props.title));
-								});
-								return n9;
-							});
-							setInsertionState(n13, null, 1);
-							createIf(() => __props.description, () => {
-								const n12 = t1();
-								const x12 = txt(n12);
-								renderEffect(() => {
-									setDynamicProps(n12, [{ id: unref(descriptionId) }, unref(getPartAttrs)("description", { class: "rp-modal__description" })]);
-									setText(x12, toDisplayString(__props.description));
-								});
-								return n12;
-							});
-							return n13;
-						}, 1);
-						return n14;
-					});
-					setInsertionState(n27, null, 1);
-					createIf(() => unref(showCloseButton), () => {
-						return createComponent(icon_button_default, {
-							"class-names": () => closeClassNames.value,
-							styles: () => closeStyles.value,
-							ariaLabel: () => __props.closeLabel,
-							variant: "ghost",
-							size: "sm",
-							onClick: () => unref(closeModal)
-						}, () => {
-							return createComponent(unref(x_default));
+		return createComponent(unref(dialog_root_default), {
+			open: () => unref(isOpen),
+			modal: () => __props.modal,
+			"close-on-escape": () => __props.closeOnEscape,
+			"close-on-outside-click": () => __props.closeOnOverlayClick,
+			"prevent-scroll": () => __props.preventScroll,
+			"return-focus": () => __props.returnFocus,
+			"onUpdate:open": () => unref(setOpen),
+			onClose: () => onDialogClose
+		}, (_slotProps0) => {
+			return createComponent(unref(dialog_portal_default), {
+				teleport: () => __props.teleport,
+				"teleport-to": () => __props.teleportTo
+			}, () => {
+				return createComponent(VaporTransition, {
+					name: "rp-modal",
+					persisted: ""
+				}, extend(() => {
+					return createIf(() => unref(shouldRender), () => {
+						const n30 = t2();
+						renderEffect(() => setDynamicProps(n30, [getLayeredRootAttrs(_slotProps0.zIndex)]));
+						setInsertionState(n30, null, 0);
+						createComponent(unref(dialog_overlay_default), {
+							as: () => overlay_default,
+							"force-mount": () => __props.keepMounted,
+							$: [() => __props.overlayProps, {
+								"class-names": () => overlayClassNames.value,
+								styles: () => overlayStyles.value,
+								"z-index": 0,
+								interactive: ""
+							}]
 						});
-					});
-					setInsertionState(n27, null, 2);
-					createIf(() => $slots.default, () => {
-						const n22 = t3();
-						renderEffect(() => setDynamicProps(n22, [unref(getPartAttrs)("body", { class: "rp-modal__body" })]));
-						setInsertionState(n22, null, 0);
-						createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
-						return n22;
-					});
-					setInsertionState(n27, null, 3);
-					createIf(() => unref(hasFooter), () => {
-						const n26 = t3();
-						renderEffect(() => setDynamicProps(n26, [unref(getPartAttrs)("footer", { class: "rp-modal__footer" })]));
-						setInsertionState(n26, null, 0);
-						createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
-						return n26;
-					});
-					_setTemplateRef(n27, panelRef, null, "panelRef");
-					applyVShow(n28, () => unref(isOpen));
-					return n28;
-				}, null, 129);
-			}, { _: 8 }));
+						setInsertionState(n30, null, 1);
+						createComponent(unref(dialog_content_default), {
+							id: () => unref(modalId),
+							as: "section",
+							"force-mount": () => __props.keepMounted,
+							$: [() => panelAttrs.value, {
+								role: () => unref(role),
+								"aria-label": () => unref(ariaLabel),
+								"aria-labelledby": () => unref(ariaLabelledby),
+								"aria-describedby": () => unref(ariaDescribedby),
+								"initial-focus": () => __props.initialFocus,
+								"focus-trap-options": () => __props.focusTrapOptions
+							}]
+						}, extend(() => {
+							return [
+								createIf(() => unref(hasHeader), () => {
+									const n16 = t2();
+									renderEffect(() => setDynamicProps(n16, [{ id: unref(headerId) }, unref(getPartAttrs)("header", { class: "rp-modal__header" })]));
+									setInsertionState(n16, null, 0);
+									createSlot("header", { $: [() => unref(slotProps)] }, () => {
+										const n15 = t1();
+										setInsertionState(n15, null, 0);
+										createIf(() => __props.title, () => {
+											return createComponent(unref(dialog_title_default), {
+												id: () => unref(titleId),
+												as: "h2",
+												$: [() => unref(getPartAttrs)("title", { class: "rp-modal__title" })]
+											}, () => {
+												const n9 = t0();
+												renderEffect(() => setText(n9, toDisplayString(__props.title)));
+												return n9;
+											});
+										});
+										setInsertionState(n15, null, 1);
+										createIf(() => __props.description, () => {
+											return createComponent(unref(dialog_description_default), {
+												id: () => unref(descriptionId),
+												as: "p",
+												$: [() => unref(getPartAttrs)("description", { class: "rp-modal__description" })]
+											}, () => {
+												const n13 = t0();
+												renderEffect(() => setText(n13, toDisplayString(__props.description)));
+												return n13;
+											});
+										});
+										return n15;
+									}, 1);
+									return n16;
+								}, null, 129),
+								createIf(() => unref(showCloseButton), () => {
+									return createComponent(unref(dialog_close_default), {
+										as: () => icon_button_default,
+										"class-names": () => closeClassNames.value,
+										styles: () => closeStyles.value,
+										ariaLabel: () => __props.closeLabel,
+										variant: "ghost",
+										size: "sm"
+									}, () => {
+										return createComponent(unref(x_default));
+									});
+								}, null, 129),
+								createIf(() => $slots.default, () => {
+									const n24 = t2();
+									renderEffect(() => setDynamicProps(n24, [unref(getPartAttrs)("body", { class: "rp-modal__body" })]));
+									setInsertionState(n24, null, 0);
+									createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
+									return n24;
+								}, null, 129),
+								createIf(() => unref(hasFooter), () => {
+									const n28 = t2();
+									renderEffect(() => setDynamicProps(n28, [unref(getPartAttrs)("footer", { class: "rp-modal__footer" })]));
+									setInsertionState(n28, null, 0);
+									createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
+									return n28;
+								}, null, 129)
+							];
+						}, { _: 8 }));
+						applyVShow(n30, () => unref(isOpen));
+						return n30;
+					}, null, 129);
+				}, { _: 8 }));
+			});
 		}, true);
 	}
-}), [["__scopeId", "data-v-3646bb42"]]);
+}), [["__scopeId", "data-v-1a627831"]]);
 //#endregion
 //#region src/components/modal/types.ts
 var modalParts = [

package/dist/number-input.css

@@ -1,48 +1,48 @@
 @layer ropav.components {
-.rp-number-input[data-v-3cef367f] {
+.rp-number-input[data-v-eb2db673] {
     --_rp-number-input-control-size: var(--_rp-input-height);
     --_rp-number-input-text-align: left;
     overflow: hidden;
     vertical-align: middle;
 }
-.rp-number-input[data-v-3cef367f] .rp-input__native {
+.rp-number-input[data-v-eb2db673] .rp-input__native {
     appearance: textfield;
     text-align: var(--_rp-number-input-text-align);
 }
-.rp-number-input--text-align-center[data-v-3cef367f] {
+.rp-number-input--text-align-center[data-v-eb2db673] {
     --_rp-number-input-text-align: center;
 }
-.rp-number-input--text-align-right[data-v-3cef367f] {
+.rp-number-input--text-align-right[data-v-eb2db673] {
     --_rp-number-input-text-align: right;
 }
-.rp-number-input[data-v-3cef367f] .rp-input__native::-webkit-inner-spin-button,
-  .rp-number-input[data-v-3cef367f] .rp-input__native::-webkit-outer-spin-button {
+.rp-number-input[data-v-eb2db673] .rp-input__native::-webkit-inner-spin-button,
+  .rp-number-input[data-v-eb2db673] .rp-input__native::-webkit-outer-spin-button {
     margin: 0;
     appearance: none;
 }
-.rp-number-input[data-v-3cef367f] .rp-input__left,
-  .rp-number-input[data-v-3cef367f] .rp-input__right {
+.rp-number-input[data-v-eb2db673] .rp-input__left,
+  .rp-number-input[data-v-eb2db673] .rp-input__right {
     align-self: stretch;
     margin-block: calc(-1 * var(--rp-border-width-thin));
 }
-.rp-number-input[data-v-3cef367f] .rp-input__left {
+.rp-number-input[data-v-eb2db673] .rp-input__left {
     margin-inline-start: calc(-1 * var(--_rp-input-padding-x));
 }
-.rp-number-input[data-v-3cef367f] .rp-input__right {
+.rp-number-input[data-v-eb2db673] .rp-input__right {
     margin-inline-end: calc(-1 * var(--_rp-input-padding-x));
 }
-.rp-number-input__controls[data-v-3cef367f] {
+.rp-number-input__controls[data-v-eb2db673] {
     display: inline-flex;
     height: var(--_rp-input-height);
     flex-shrink: 0;
 }
-.rp-number-input__controls--left[data-v-3cef367f] {
+.rp-number-input__controls--left[data-v-eb2db673] {
     border-inline-end: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__controls--right[data-v-3cef367f] {
+.rp-number-input__controls--right[data-v-eb2db673] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-3cef367f] {
+.rp-number-input__control[data-v-eb2db673] {
     padding: 0;
     font: inherit;
     background: none;
@@ -58,29 +58,29 @@
     color: var(--rp-color-control-icon);
     transition: color var(--rp-transition-fast), background-color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-number-input__control + .rp-number-input__control[data-v-3cef367f] {
+.rp-number-input__control + .rp-number-input__control[data-v-eb2db673] {
     border-inline-start: var(--rp-border-width-thin) solid var(--rp-color-control-border);
 }
-.rp-number-input__control[data-v-3cef367f]:hover:not(:disabled) {
+.rp-number-input__control[data-v-eb2db673]:hover:not(:disabled) {
     color: var(--rp-color-control-fg);
     background-color: var(--rp-color-default-hover);
 }
-.rp-number-input__control[data-v-3cef367f]:disabled {
+.rp-number-input__control[data-v-eb2db673]:disabled {
     cursor: not-allowed;
     opacity: var(--rp-opacity-disabled);
 }
-.rp-number-input__control-icon[data-v-3cef367f] {
+.rp-number-input__control-icon[data-v-eb2db673] {
     display: inline-flex;
     align-items: center;
     width: 0.875em;
     height: 0.875em;
     flex-shrink: 0;
 }
-.rp-number-input__control-icon svg[data-v-3cef367f] {
+.rp-number-input__control-icon svg[data-v-eb2db673] {
     width: 100%;
     height: 100%;
 }
-.rp-number-input__control-icon[data-v-3cef367f] >  svg {
+.rp-number-input__control-icon[data-v-eb2db673] >  svg {
     display: block;
     width: 100%;
     height: 100%;