ropav 0.0.13 → 0.1.1

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);
@@ -303,6 +307,7 @@ var popover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	__name: "popover",
 	props: {
 		id: {},
+		baseZIndex: {},
 		contentClass: {},
 		open: {
 			type: Boolean,

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,
@@ -135,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();
@@ -218,6 +224,7 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	__name: "tooltip",
 	props: {
 		id: {},
+		baseZIndex: {},
 		content: { default: "" },
 		color: {},
 		autoContrast: { type: Boolean },

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 };

package/docs/public-overlay-layer-api.md

@@ -0,0 +1,65 @@
+# Overlay layer z-index API
+
+`OverlayLayerProvider` sets a shared z-index floor for Ropav portal surfaces in a Vue subtree.
+Component props take precedence over the nearest provider, and components outside a provider keep
+their existing defaults.
+
+```vue
+<template>
+  <OverlayLayerProvider :base-z-index="5000">
+    <AppShell />
+  </OverlayLayerProvider>
+</template>
+
+<script setup lang="ts">
+import { OverlayLayerProvider } from 'ropav/overlay';
+</script>
+```
+
+The provider follows the logical Vue component tree, including content rendered through
+`Teleport`. Providers can be nested to create a higher or lower floor for one subtree.
+
+## Component overrides
+
+`DialogRoot`, `Modal`, `Popover`, `DropdownMenu`, `DropdownMenuRoot`, `Tooltip` and `ToastViewport`
+accept `baseZIndex`. The resolution order is:
+
+1. The component's `baseZIndex` prop.
+2. The nearest `OverlayLayerProvider`.
+3. The component's legacy default.
+
+Dialog, Popover and Dropdown layers may end up above the resolved floor because active managed
+layers are ordered in two-unit steps. The unused plane immediately below a Dialog content layer is
+reserved for its overlay. A top-level Tooltip uses the resolved floor, while a Tooltip nested in a
+managed layer uses at least `parentZIndex + 1`. `ToastViewport` applies an offset of `1`.
+
+Without a provider or local override, Dropdown and Popover start at `100`, Dialog and Tooltip start
+at `1000`, and ToastViewport uses `1001`.
+
+## Custom portal surfaces
+
+`useOverlayZIndex()` lets custom portal content resolve the same policy without joining Ropav's
+focus, inert, dismissal or active-layer management.
+
+```vue
+<script setup lang="ts">
+import { useOverlayZIndex } from 'ropav/overlay';
+
+const props = defineProps<{ baseZIndex?: number }>();
+const zIndex = useOverlayZIndex({
+  baseZIndex: () => props.baseZIndex,
+  defaultBaseZIndex: 1000,
+  offset: 1,
+});
+</script>
+```
+
+| Option              | Default | Description                                                         |
+| ------------------- | ------- | ------------------------------------------------------------------- |
+| `baseZIndex`        | —       | Local value, ref or getter that overrides the provider.             |
+| `defaultBaseZIndex` | `1000`  | Fallback used when neither a local value nor provider is available. |
+| `offset`            | `0`     | Value, ref or getter added to the resolved base.                    |
+| `aboveParent`       | `true`  | Ensures the result is at least one plane above a parent layer.      |
+
+Set `aboveParent: false` when the custom surface only needs the resolved floor. The returned
+`ComputedRef<number>` updates when the local value, provider or parent layer changes.

package/docs/public-styles-api.md

@@ -26,7 +26,7 @@ Ropav does not expose a `vars` prop. Public CSS variables are set through CSS, t
 
 - Classes merge as internal classes, compatibility classes, `classNames`, then root `class` attributes.
 - Styles merge as internal styles, compatibility styles, `styles`, then root `style` attributes. Later stages win a duplicate property.
-- `Card.bodyClass`, `inputAttrs` styling and `thumbStyle` are compatibility stages. `Card.bodyClass` is deprecated; the other escape hatches remain because they also carry non-styling behavior.
+- `inputAttrs` styling and `thumbStyle` are compatibility stages because these escape hatches also carry non-styling behavior.
 - Attributes and native listeners are forwarded exactly once to the public root host. Internal native handlers run before consumer handlers.
 - Declared component events remain component events. Component-owned roles, ARIA and behavioral attributes remain authoritative.
 - Composite components do not copy root attributes into their child components. Teleported roots receive attributes on the rendered host, not on the virtual teleport node.
@@ -120,8 +120,6 @@ The layered stylesheet declares `ropav.tokens` before `ropav.components`. A laye
 
 Place global resets in `reset` and application overrides in `app`. Import order does not change precedence once the order is declared. Unlayered application rules still outrank named Ropav layers.
 
-Layer adoption changes cascade precedence. Consumers whose reset cannot yet be layered can temporarily import `ropav/legacy-unlayered.css` after that reset. The aggregate fallback is deprecated from its introduction and is intended only as a migration aid.
-
 ## Compatibility
 
 - Typed parts, state attributes, manifest entries, geometry variables and cascade layers form the current Public Styles API.
@@ -130,5 +128,3 @@ Layer adoption changes cascade precedence. Consumers whose reset cannot yet be l
 - `tokens:check` compares the current manifest with the latest reachable `v*` release tag that contains one. Until the first such release, it uses the immutable manifest from the initial Public Styles API commit (`f16e826`). Released variables cannot be removed, renamed or changed semantically; adding a variable requires incrementing the manifest's `contractVersion`.
 - Release tags must be available in the Git checkout that runs the check. `PUBLIC_STYLES_BASELINE_REF` can explicitly pin a commit or tag that contains a manifest.
 - Internal DOM, selectors and undocumented variables are outside the public contract.
-- `Card.bodyClass` is a deprecated compatibility escape hatch; prefer `classNames.body`.
-- The legacy unlayered stylesheet is a temporary migration fallback for consumers that cannot yet adopt cascade layers.