ropav 0.0.12 → 0.1.1

package/dist/index.js

@@ -14,6 +14,7 @@ import { n as color_input_default, t as colorInputParts } 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 { n as useOverlayZIndex } from "./useOverlayZIndex.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
 import { n as useFloatingPosition } from "./useFloatingPosition.js";
 import { r as useTeleportTarget } from "./useTeleportTarget.js";
@@ -31,7 +32,7 @@ import { t as inputParts } from "./input2.js";
 import { t as overlay_default } from "./overlay.js";
 import { n as modal_default, t as modalParts } from "./modal.js";
 import { n as number_input_default, t as numberInputParts } from "./number-input.js";
-import { t as overlayParts } from "./overlay2.js";
+import { n as overlay_layer_provider_default, t as overlayParts } from "./overlay2.js";
 import { n as popoverPlacements, t as popoverParts } from "./popover2.js";
 import { a as progress_default, i as progressSizes, n as progressParts, r as progressRadiuses, t as progressColors } from "./progress.js";
 import { i as radioParts, n as radio_default, r as radioGroupParts, t as radio_group_default } from "./radio.js";
@@ -44,4 +45,4 @@ import { t as teleport_provider_default } from "./teleport-provider.js";
 import { n as textarea_default, t as textareaParts } from "./textarea.js";
 import { a as toastColors, c as toastRadiuses, d as toastViewportParts, f as createToastStore, i as useToast, l as toastTypes, n as toast_viewport_default, o as toastParts, p as toast_default, r as toast_provider_default, s as toastPositions, t as useToastState, u as toastVariants } from "./toast.js";
 import { t as tooltipParts } from "./tooltip2.js";
-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, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, 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, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };
+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, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, 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, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useOverlayZIndex, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };

package/dist/modal.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-modal[data-v-1a627831] {
+.rp-modal[data-v-04a5d994] {
     --_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-1a627831] {
+.rp-modal--size-sm[data-v-04a5d994] {
     --_rp-modal-width: 22rem;
 }
-.rp-modal--size-lg[data-v-1a627831] {
+.rp-modal--size-lg[data-v-04a5d994] {
     --_rp-modal-width: 45rem;
 }
-.rp-modal--size-xl[data-v-1a627831] {
+.rp-modal--size-xl[data-v-04a5d994] {
     --_rp-modal-width: 58rem;
 }
-.rp-modal--size-full[data-v-1a627831] {
+.rp-modal--size-full[data-v-04a5d994] {
     --_rp-modal-width: 100vw;
     --_rp-modal-max-height: 100vh;
     --_rp-modal-radius: var(--rp-radius-none);
     padding: 0;
 }
-.rp-modal__overlay[data-v-1a627831] {
+.rp-modal__overlay[data-v-04a5d994] {
     border-radius: 0;
 }
-.rp-modal__panel[data-v-1a627831] {
+.rp-modal__panel[data-v-04a5d994] {
     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-1a627831] {
+.rp-modal--size-full .rp-modal__panel[data-v-04a5d994] {
     min-height: 100vh;
     border: 0;
 }
-.rp-modal__header[data-v-1a627831] {
+.rp-modal__header[data-v-04a5d994] {
     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-1a627831] {
+.rp-modal__heading[data-v-04a5d994] {
     display: grid;
     gap: var(--rp-spacing-1);
 }
-.rp-modal__title[data-v-1a627831] {
+.rp-modal__title[data-v-04a5d994] {
     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-1a627831] {
+.rp-modal__description[data-v-04a5d994] {
     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-1a627831] {
+.rp-modal__close[data-v-04a5d994] {
     position: absolute;
     top: var(--rp-spacing-3);
     right: var(--rp-spacing-3);
     z-index: 1;
 }
-.rp-modal__body[data-v-1a627831] {
+.rp-modal__body[data-v-04a5d994] {
     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-1a627831] {
+.rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-04a5d994] {
     padding-right: calc(var(--rp-spacing-6) + var(--rp-size-control-sm));
 }
-.rp-modal__footer[data-v-1a627831] {
+.rp-modal__footer[data-v-04a5d994] {
     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-1a627831],
-  .rp-modal-leave-active[data-v-1a627831] {
+.rp-modal-enter-active[data-v-04a5d994],
+  .rp-modal-leave-active[data-v-04a5d994] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-modal-enter-active .rp-modal__panel[data-v-1a627831],
-  .rp-modal-leave-active .rp-modal__panel[data-v-1a627831] {
+.rp-modal-enter-active .rp-modal__panel[data-v-04a5d994],
+  .rp-modal-leave-active .rp-modal__panel[data-v-04a5d994] {
     transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-modal-enter-from[data-v-1a627831],
-  .rp-modal-leave-to[data-v-1a627831] {
+.rp-modal-enter-from[data-v-04a5d994],
+  .rp-modal-leave-to[data-v-04a5d994] {
     opacity: 0;
 }
-.rp-modal-enter-from .rp-modal__panel[data-v-1a627831],
-  .rp-modal-leave-to .rp-modal__panel[data-v-1a627831] {
+.rp-modal-enter-from .rp-modal__panel[data-v-04a5d994],
+  .rp-modal-leave-to .rp-modal__panel[data-v-04a5d994] {
     opacity: 0;
     transform: translateY(var(--rp-spacing-2)) scale(0.98);
 }
 @media (max-width: 480px) {
-.rp-modal[data-v-1a627831] {
+.rp-modal[data-v-04a5d994] {
       padding: var(--rp-spacing-3);
 }
-.rp-modal__header[data-v-1a627831] {
+.rp-modal__header[data-v-04a5d994] {
       padding-left: var(--rp-spacing-4);
 }
-.rp-modal__body[data-v-1a627831] {
+.rp-modal__body[data-v-04a5d994] {
       padding: var(--rp-spacing-4);
 }
-.rp-modal__footer[data-v-1a627831] {
+.rp-modal__footer[data-v-04a5d994] {
       padding: var(--rp-spacing-4);
 }
 }

package/dist/modal.js

@@ -106,8 +106,8 @@ function useModal(props, emit = {}) {
 //#endregion
 //#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<div data-v-1a627831 class=rp-modal__heading>");
-var t2 = template("<div data-v-1a627831>");
+var t1 = template("<div data-v-04a5d994 class=rp-modal__heading>");
+var t2 = template("<div data-v-04a5d994>");
 //#endregion
 //#region src/components/modal/modal.vue
 var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -120,6 +120,7 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: void 0
 		},
+		baseZIndex: {},
 		title: { default: "" },
 		description: { default: "" },
 		ariaLabel: { default: "" },
@@ -196,6 +197,7 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const closeStyles = computed(() => ({ root: props.styles?.close }));
 		return createComponent(unref(dialog_root_default), {
 			open: () => unref(isOpen),
+			"base-z-index": () => __props.baseZIndex,
 			modal: () => __props.modal,
 			"close-on-escape": () => __props.closeOnEscape,
 			"close-on-outside-click": () => __props.closeOnOverlayClick,
@@ -310,7 +312,7 @@ var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			});
 		}, true);
 	}
-}), [["__scopeId", "data-v-1a627831"]]);
+}), [["__scopeId", "data-v-04a5d994"]]);
 //#endregion
 //#region src/components/modal/types.ts
 var modalParts = [

package/dist/overlay2.js

@@ -1,4 +1,19 @@
+import { t as provideOverlayZIndex } from "./useOverlayZIndex.js";
+import { createSlot, defineVaporComponent } from "vue";
+//#endregion
+//#region src/components/overlay/overlay-layer-provider.vue
+var overlay_layer_provider_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpOverlayLayerProvider",
+	__name: "overlay-layer-provider",
+	props: { baseZIndex: {} },
+	setup(__props) {
+		const props = __props;
+		provideOverlayZIndex(() => props.baseZIndex);
+		return createSlot();
+	}
+});
+//#endregion
 //#region src/components/overlay/types.ts
 var overlayParts = ["root"];
 //#endregion
-export { overlayParts as t };
+export { overlay_layer_provider_default as n, overlayParts as t };

package/dist/popover.js

@@ -2,7 +2,7 @@ import './popover.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 useOverlayLayer } from "./useOverlayLayer.js";
+import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
 import { n as useTeleportPositioningKey, r as useTeleportTarget } from "./useTeleportTarget.js";
@@ -70,7 +70,11 @@ function usePopover(props, emitOpenChange) {
 	const layer = useOverlayLayer({
 		active: isVisible,
 		element: contentRef,
-		baseZIndex: 100
+		baseZIndex: useOverlayZIndex({
+			baseZIndex: () => props.baseZIndex,
+			defaultBaseZIndex: 100,
+			aboveParent: false
+		})
 	});
 	const shouldRenderContent = computed(() => !isDisabled.value && (Boolean(props.keepMounted) || isVisible.value));
 	const shouldShowContent = computed(() => !props.keepMounted || isVisible.value);
@@ -96,8 +100,10 @@ function usePopover(props, emitOpenChange) {
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
 		flip: () => props.flip !== false,
+		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
+		autoUpdateOptions: () => props.autoUpdateOptions,
 		restartKey: () => [
 			Boolean(props.teleport),
 			teleportTo.value,
@@ -301,6 +307,7 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	__name: "popover",
 	props: {
 		id: {},
+		baseZIndex: {},
 		contentClass: {},
 		open: {
 			type: Boolean,
@@ -344,11 +351,13 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false

package/dist/toast.css

@@ -132,7 +132,7 @@
 }
 }
 }@layer ropav.components {
-.rp-toast-viewport[data-v-e14bb4e0] {
+.rp-toast-viewport[data-v-480d3e51] {
     --_rp-toast-viewport-shift-x: 0;
     --_rp-toast-viewport-shift-y: calc(var(--rp-spacing-3) * -1);
     position: fixed;
@@ -150,58 +150,58 @@
     list-style: none;
     pointer-events: none;
 }
-.rp-toast-viewport--top-left[data-v-e14bb4e0] {
+.rp-toast-viewport--top-left[data-v-480d3e51] {
     --_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-e14bb4e0] {
+.rp-toast-viewport--top-center[data-v-480d3e51] {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
 }
-.rp-toast-viewport--top-right[data-v-e14bb4e0] {
+.rp-toast-viewport--top-right[data-v-480d3e51] {
     --_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-e14bb4e0] {
+.rp-toast-viewport--bottom-left[data-v-480d3e51] {
     --_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-e14bb4e0] {
+.rp-toast-viewport--bottom-center[data-v-480d3e51] {
     --_rp-toast-viewport-shift-y: var(--rp-spacing-3);
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
 }
-.rp-toast-viewport--bottom-right[data-v-e14bb4e0] {
+.rp-toast-viewport--bottom-right[data-v-480d3e51] {
     --_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-e14bb4e0] {
+.rp-toast-viewport__item[data-v-480d3e51] {
     display: flex;
     width: 100%;
     flex: 0 0 auto;
     pointer-events: auto;
 }
-.rp-toast-viewport__item[data-v-e14bb4e0] .rp-toast {
+.rp-toast-viewport__item[data-v-480d3e51] .rp-toast {
     width: 100%;
 }
-.rp-toast-viewport-item-enter-active[data-v-e14bb4e0],
-  .rp-toast-viewport-item-leave-active[data-v-e14bb4e0] {
+.rp-toast-viewport-item-enter-active[data-v-480d3e51],
+  .rp-toast-viewport-item-leave-active[data-v-480d3e51] {
     will-change: opacity, transform;
 }
-.rp-toast-viewport-item-enter-active[data-v-e14bb4e0] {
+.rp-toast-viewport-item-enter-active[data-v-480d3e51] {
     transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.rp-toast-viewport-item-leave-active[data-v-e14bb4e0] {
+.rp-toast-viewport-item-leave-active[data-v-480d3e51] {
     position: absolute;
     right: var(--rp-spacing-4);
     left: var(--rp-spacing-4);
@@ -209,27 +209,27 @@
     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-e14bb4e0] {
+.rp-toast-viewport--empty .rp-toast-viewport-item-leave-active[data-v-480d3e51] {
     position: relative;
     right: auto;
     left: auto;
     width: 100%;
 }
-.rp-toast-viewport-item-move[data-v-e14bb4e0] {
+.rp-toast-viewport-item-move[data-v-480d3e51] {
     transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.rp-toast-viewport-item-enter-from[data-v-e14bb4e0],
-  .rp-toast-viewport-item-leave-to[data-v-e14bb4e0] {
+.rp-toast-viewport-item-enter-from[data-v-480d3e51],
+  .rp-toast-viewport-item-leave-to[data-v-480d3e51] {
     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-e14bb4e0] {
+.rp-toast-viewport[data-v-480d3e51] {
       scroll-behavior: auto;
 }
-.rp-toast-viewport-item-enter-active[data-v-e14bb4e0],
-    .rp-toast-viewport-item-leave-active[data-v-e14bb4e0],
-    .rp-toast-viewport-item-move[data-v-e14bb4e0] {
+.rp-toast-viewport-item-enter-active[data-v-480d3e51],
+    .rp-toast-viewport-item-leave-active[data-v-480d3e51],
+    .rp-toast-viewport-item-move[data-v-480d3e51] {
       transition: none;
 }
 }

package/dist/toast.js

@@ -4,6 +4,7 @@ import { t as bem } from "./bem.js";
 import { n as useStylesApi } from "./styles-api.js";
 import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
 import { r as useTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, VaporTransition, VaporTransitionGroup, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, toValue, txt, unref, useSlots, watch } from "vue";
 //#region src/components/toast/defaults.ts
@@ -583,7 +584,7 @@ var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
 });
 //#endregion
 //#region src/components/toast/toast-viewport.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<li data-v-e14bb4e0>");
+var t0 = template("<li data-v-480d3e51>");
 //#endregion
 //#region src/components/toast/toast-viewport.vue
 var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -593,6 +594,7 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	props: {
 		position: { default: "top-right" },
 		label: { default: "Notifications" },
+		baseZIndex: {},
 		teleport: {
 			type: Boolean,
 			default: true
@@ -604,6 +606,11 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	setup(__props, { slots: $slots }) {
 		const props = __props;
 		const resolvedTeleportTo = useTeleportTarget(() => props.teleportTo);
+		const zIndex = useOverlayZIndex({
+			baseZIndex: () => props.baseZIndex,
+			defaultBaseZIndex: 1e3,
+			offset: 1
+		});
 		const context = useToastContext("<ToastViewport>");
 		function reverseToasts(toasts) {
 			return toasts.map((_, index) => toasts[toasts.length - index - 1]);
@@ -616,6 +623,7 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				`rp-toast-viewport--${props.position}`,
 				{ "rp-toast-viewport--empty": orderedToasts.value.length === 0 }
 			],
+			style: { zIndex: zIndex.value },
 			"data-position": props.position,
 			"aria-label": props.label
 		}));
@@ -689,7 +697,7 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}, { _: 8 }));
 		}, true);
 	}
-}), [["__scopeId", "data-v-e14bb4e0"]]);
+}), [["__scopeId", "data-v-480d3e51"]]);
 //#endregion
 //#region src/components/toast/useToastState.ts
 function optionValue(value) {

package/dist/tooltip.js

@@ -3,6 +3,7 @@ import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { i as getComponentVariantColorRoles } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
 import { n as useTeleportPositioningKey, r as useTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, VaporTransition, applyVShow, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, onBeforeUnmount, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
@@ -95,6 +96,10 @@ function useTooltip(props, emitOpenChange) {
 	const teleportPositioningKey = useTeleportPositioningKey();
 	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
+	const zIndex = useOverlayZIndex({
+		baseZIndex: () => props.baseZIndex,
+		defaultBaseZIndex: 1e3
+	});
 	const { isOpen, open, closeImmediate } = useDelayedOpen({
 		open: () => props.open,
 		openDelay: () => props.openDelay ?? 300,
@@ -111,8 +116,10 @@ function useTooltip(props, emitOpenChange) {
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
 		flip: () => props.flip !== false,
+		flipOptions: () => props.flipOptions,
 		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
+		autoUpdateOptions: () => props.autoUpdateOptions,
 		restartKey: () => [
 			Boolean(props.teleport),
 			teleportTo.value,
@@ -133,7 +140,8 @@ function useTooltip(props, emitOpenChange) {
 	const contentStyle = computed(() => ({
 		...floating.floatingStyle.value,
 		...resolveTooltipOffsetStyle(props.offset),
-		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast)
+		...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast),
+		zIndex: zIndex.value
 	}));
 	function openTooltip() {
 		open();
@@ -216,6 +224,7 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	__name: "tooltip",
 	props: {
 		id: {},
+		baseZIndex: {},
 		content: { default: "" },
 		color: {},
 		autoContrast: { type: Boolean },
@@ -240,11 +249,13 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false

package/dist/useFloatingPosition.js

@@ -1213,12 +1213,18 @@ function useFloatingPosition(options) {
 	function getFlip() {
 		return toValue(options.flip) !== false;
 	}
+	function getFlipFallbackStrategy() {
+		return toValue(options.flipOptions)?.fallbackStrategy;
+	}
 	function getShift() {
 		return toValue(options.shift) !== false;
 	}
 	function getCollisionPadding() {
 		return toValue(options.collisionPadding) ?? DEFAULT_COLLISION_PADDING;
 	}
+	function getAutoUpdateAnimationFrame() {
+		return toValue(options.autoUpdateOptions)?.animationFrame;
+	}
 	function getHiddenStyle() {
 		return {
 			position: getStrategy(),
@@ -1242,7 +1248,11 @@ function useFloatingPosition(options) {
 	function getMiddleware() {
 		const middleware = [offset(getOffset())];
 		const padding = getCollisionPadding();
-		if (getFlip()) middleware.push(flip({ padding }));
+		const fallbackStrategy = getFlipFallbackStrategy();
+		if (getFlip()) middleware.push(flip({
+			padding,
+			...fallbackStrategy == null ? {} : { fallbackStrategy }
+		}));
 		if (getShift()) middleware.push(shift({ padding }));
 		const arrow$2 = getArrow();
 		if (arrow$2) middleware.push(arrow({
@@ -1285,7 +1295,9 @@ function useFloatingPosition(options) {
 			const reference = getReference();
 			const floating = getFloating();
 			if (currentGeneration !== generation || !reference || !floating || !getOpen()) return;
-			cleanup = autoUpdate(reference, floating, () => void update());
+			const updatePosition = () => void update();
+			const animationFrame = getAutoUpdateAnimationFrame();
+			cleanup = animationFrame == null ? autoUpdate(reference, floating, updatePosition) : autoUpdate(reference, floating, updatePosition, { animationFrame });
 		});
 	}
 	watch([
@@ -1297,8 +1309,10 @@ function useFloatingPosition(options) {
 		getStrategy,
 		getOffset,
 		getFlip,
+		getFlipFallbackStrategy,
 		getShift,
 		getCollisionPadding,
+		getAutoUpdateAnimationFrame,
 		() => toValue(options.restartKey)
 	], start, {
 		flush: "post",

package/dist/{useOverlayLayer.js → useOverlayZIndex.js}

@@ -33,7 +33,7 @@ function syncLayerZIndices(state) {
 	for (const layer of state.layers) {
 		const metadata = layerMetadata.get(layer);
 		if (!metadata) continue;
-		const zIndex = Math.max(metadata.baseZIndex, highestZIndex + 2);
+		const zIndex = Math.max(metadata.baseZIndex.value, highestZIndex + 2);
 		metadata.setZIndex(zIndex);
 		highestZIndex = zIndex;
 	}
@@ -142,7 +142,8 @@ function useOverlayLayer(options) {
 	const branchSet = /* @__PURE__ */ new Set();
 	const focusBranchSet = /* @__PURE__ */ new Set();
 	const insideBranchSet = /* @__PURE__ */ new Set();
-	const zIndex = ref(options.baseZIndex ?? 100);
+	const baseZIndex = computed(() => toValue(options.baseZIndex ?? 100));
+	const zIndex = ref(baseZIndex.value);
 	let registeredDocument = null;
 	let registeredElement = null;
 	let parentBranchCleanup;
@@ -194,7 +195,7 @@ function useOverlayLayer(options) {
 		registerBranch
 	};
 	layerMetadata.set(context, {
-		baseZIndex: options.baseZIndex ?? 100,
+		baseZIndex,
 		parent,
 		setZIndex(value) {
 			zIndex.value = value;
@@ -241,6 +242,10 @@ function useOverlayLayer(options) {
 	watch([modal, preventScroll], () => {
 		if (registeredDocument) syncModalEffects(registeredDocument, getState(registeredDocument));
 	});
+	watch(baseZIndex, (value) => {
+		if (registeredDocument) syncLayerZIndices(getState(registeredDocument));
+		else zIndex.value = value;
+	});
 	onBeforeUnmount(unregister);
 	provide(overlayLayerKey, context);
 	return context;
@@ -258,5 +263,25 @@ function useOverlayLayerBranch(element, options = {}) {
 	onBeforeUnmount(() => cleanup?.());
 	return layer;
 }
+function useParentOverlayLayer() {
+	return inject(overlayLayerKey, null);
+}
+//#endregion
+//#region src/components/overlay/useOverlayZIndex.ts
+var overlayZIndexKey = Symbol("overlay-z-index");
+function provideOverlayZIndex(baseZIndex) {
+	const resolvedBaseZIndex = computed(() => toValue(baseZIndex));
+	provide(overlayZIndexKey, { baseZIndex: resolvedBaseZIndex });
+	return resolvedBaseZIndex;
+}
+function useOverlayZIndex(options = {}) {
+	const provided = inject(overlayZIndexKey, null);
+	const parentLayer = useParentOverlayLayer();
+	return computed(() => {
+		const resolvedZIndex = (toValue(options.baseZIndex) ?? provided?.baseZIndex.value ?? options.defaultBaseZIndex ?? 1e3) + (toValue(options.offset) ?? 0);
+		if (toValue(options.aboveParent) === false || !parentLayer) return resolvedZIndex;
+		return Math.max(resolvedZIndex, parentLayer.zIndex.value + 1);
+	});
+}
 //#endregion
-export { useOverlayLayerBranch as n, useOverlayLayer as t };
+export { useOverlayLayerBranch as i, useOverlayZIndex as n, useOverlayLayer as r, provideOverlayZIndex as t };