ropav 0.0.13 → 0.1.2

package/dist/switch.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-switch[data-v-d966892e] {
+.rp-switch[data-v-81b33803] {
     --_rp-switch-color: var(--rp-color-control-selected-bg);
     --_rp-switch-font-size: var(--rp-font-size-md);
     --_rp-switch-default-track-width: 46px;
@@ -26,15 +26,15 @@
     font-family: var(--rp-font-family);
     user-select: none;
 }
-.rp-switch--disabled[data-v-d966892e] {
+.rp-switch--disabled[data-v-81b33803] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-switch[data-v-d966892e] {
+.rp-switch[data-v-81b33803] {
     gap: var(--rp-spacing-2);
     font-size: var(--_rp-switch-font-size);
 }
-.rp-switch__native[data-v-d966892e] {
+.rp-switch__native[data-v-81b33803] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -46,11 +46,11 @@
     border-width: 0;
     pointer-events: none;
 }
-.rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-switch__track[data-v-d966892e] {
+.rp-switch__track[data-v-81b33803] {
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -61,17 +61,17 @@
     border-radius: var(--rp-radius-full);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__track[data-v-d966892e] {
+.rp-switch--checked .rp-switch__track[data-v-81b33803] {
     background-color: var(--_rp-switch-color);
 }
-.rp-switch--invalid .rp-switch__track[data-v-d966892e] {
+.rp-switch--invalid .rp-switch__track[data-v-81b33803] {
     outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
     outline-offset: var(--_rp-switch-thumb-offset);
 }
-.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-81b33803] {
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
 }
-.rp-switch__thumb[data-v-d966892e] {
+.rp-switch__thumb[data-v-81b33803] {
     position: absolute;
     left: var(--_rp-switch-thumb-offset);
     width: var(--_rp-switch-thumb-size);
@@ -81,38 +81,38 @@
     box-shadow: var(--rp-shadow-sm);
     transition: transform var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__thumb[data-v-d966892e] {
+.rp-switch--checked .rp-switch__thumb[data-v-81b33803] {
     transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
 }
-.rp-switch__label[data-v-d966892e] {
+.rp-switch__label[data-v-81b33803] {
     line-height: var(--rp-line-height-md);
     color: var(--rp-color-text);
 }
-.rp-switch--size-xs[data-v-d966892e] {
+.rp-switch--size-xs[data-v-81b33803] {
     --_rp-switch-default-track-width: 32px;
     --_rp-switch-default-track-height: 16px;
     --_rp-switch-default-thumb-size: 12px;
     --_rp-switch-font-size: var(--rp-font-size-xs);
 }
-.rp-switch--size-sm[data-v-d966892e] {
+.rp-switch--size-sm[data-v-81b33803] {
     --_rp-switch-default-track-width: 38px;
     --_rp-switch-default-track-height: 20px;
     --_rp-switch-default-thumb-size: 14px;
     --_rp-switch-font-size: var(--rp-font-size-sm);
 }
-.rp-switch--size-md[data-v-d966892e] {
+.rp-switch--size-md[data-v-81b33803] {
     --_rp-switch-default-track-width: 46px;
     --_rp-switch-default-track-height: 24px;
     --_rp-switch-default-thumb-size: 18px;
     --_rp-switch-font-size: var(--rp-font-size-md);
 }
-.rp-switch--size-lg[data-v-d966892e] {
+.rp-switch--size-lg[data-v-81b33803] {
     --_rp-switch-default-track-width: 56px;
     --_rp-switch-default-track-height: 30px;
     --_rp-switch-default-thumb-size: 22px;
     --_rp-switch-font-size: var(--rp-font-size-lg);
 }
-.rp-switch--size-xl[data-v-d966892e] {
+.rp-switch--size-xl[data-v-81b33803] {
     --_rp-switch-default-track-width: 72px;
     --_rp-switch-default-track-height: 36px;
     --_rp-switch-default-thumb-size: 28px;

package/dist/switch.js

@@ -5,7 +5,7 @@ import { n as getComponentColorValue } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, next, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, next, nextTick, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
 function getSwitchColorStyle(color) {
 	const colorValue = getComponentColorValue(color);
@@ -23,7 +23,11 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
 	}));
 	const rootStyle = computed(() => getSwitchColorStyle(props.color));
 	function onChange(e) {
-		emitUpdate(e.target.checked);
+		const input = e.target;
+		emitUpdate(input.checked);
+		nextTick(() => {
+			input.checked = getValue();
+		});
 	}
 	function focus(options) {
 		inputRef.value?.focus(options);
@@ -39,8 +43,8 @@ function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-d966892e>");
-var t1 = template("<label data-v-d966892e><input data-v-d966892e><span data-v-d966892e><span data-v-d966892e></span></span>", 1);
+var t0 = template("<span data-v-81b33803>");
+var t1 = template("<label data-v-81b33803><input data-v-81b33803><span data-v-81b33803><span data-v-81b33803></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -113,6 +117,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				}),
 				"data-disabled": presence(control.disabled),
 				"data-invalid": presence(control.invalid),
+				"data-state": controllable.value.value ? "checked" : "unchecked",
 				onChange(event) {
 					onChange(event);
 					attrs.onChange?.(event);
@@ -165,7 +170,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n7;
 	}
-}), [["__scopeId", "data-v-d966892e"]]);
+}), [["__scopeId", "data-v-81b33803"]]);
 //#endregion
 //#region src/components/switch/types.ts
 var switchParts = [

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 },
@@ -310,10 +317,7 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			to: () => unref(teleportTo),
 			disabled: () => !__props.teleport
 		}, () => {
-			return createComponent(VaporTransition, {
-				name: "rp-tooltip-content",
-				persisted: ""
-			}, extend(() => {
+			return createComponent(VaporTransition, { name: "rp-tooltip-content" }, extend(() => {
 				return createIf(() => unref(shouldRenderContent), () => {
 					const n11 = t2();
 					renderEffect(() => setDynamicProps(n11, [

package/dist/unplugin-icons.d.ts

@@ -0,0 +1,5 @@
+export interface VaporIconCompiler {
+    compiler(svg: string, collection: string, icon: string): string;
+}
+/** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
+export declare function vaporIconCompiler(): VaporIconCompiler;

package/dist/unplugin-icons.js

@@ -0,0 +1,40 @@
+import { compile } from "@vue/compiler-vapor";
+//#region src/unplugin-icons.ts
+var randomIdHelper = "const __randId = () => Math.random().toString(36).substr(2, 10);";
+function handleSVGId(svg) {
+	if (!/="url\(#/.test(svg)) return {
+		svg,
+		injectScripts: ""
+	};
+	const idMap = {};
+	return {
+		svg: svg.replace(/\b([\w-]+)="url\(#(.+?)\)"/g, (_, attr, id) => {
+			idMap[id] = `'${id}':'uicons-'+__randId()`;
+			return `:${attr}="'url(#'+idMap['${id}']+')'"`;
+		}).replace(/\bid="(.+?)"/g, (full, id) => {
+			if (idMap[id]) return `:id="idMap['${id}']"`;
+			return full;
+		}),
+		injectScripts: `${randomIdHelper}const idMap = {${Object.values(idMap).join(",")}};`
+	};
+}
+/** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
+function vaporIconCompiler() {
+	return { compiler(svg, collection, icon) {
+		const name = `${collection}-${icon}`;
+		const { injectScripts, svg: handled } = handleSVGId(svg);
+		let { code } = compile(handled, {
+			filename: `${name}.vue`,
+			prefixIdentifiers: true
+		});
+		code = code.replace(/^export /gm, "");
+		const setup = injectScripts ? `,\n    setup() {${injectScripts};return { idMap }}` : "";
+		return `${code}
+import { defineVaporComponent, markRaw } from 'vue';
+
+export default markRaw(defineVaporComponent({ name: ${JSON.stringify(name)}, render${setup} }))
+/* vite-plugin-components disabled */`;
+	} };
+}
+//#endregion
+export { vaporIconCompiler };

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 is a compatibility stage because this escape hatch also carries 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.
@@ -64,7 +64,8 @@ Only independently useful semantic elements are public parts. Conditional parts
 | Radio                                    | `root`, `input`, `indicator`, `label`                                                                                                       |
 | RadioGroup                               | `root`                                                                                                                                      |
 | Select                                   | `root`, `trigger`, `value`, `indicator`, `clear`, `content`, `option`, `empty`                                                              |
-| Slider, RangeSlider                      | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
+| Slider                                   | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
+| RangeSlider                              | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip`                                                |
 | Switch                                   | `root`, `input`, `track`, `thumb`, `label`                                                                                                  |
 | Tabs, TabsList, TabsTrigger, TabsContent | `root` on each component                                                                                                                    |
 | Textarea                                 | `root`, `input`                                                                                                                             |
@@ -90,6 +91,8 @@ Boolean states use presence semantics: the attribute value is empty when true an
 - `data-selected`: Select options and ColorPicker swatches.
 - `data-highlighted`: Select options and DropdownMenu items.
 - `data-filled`: Slider and RangeSlider marks.
+- `data-track-hovered` and `data-dragging`: Slider track pointer interaction.
+- `data-thumb-visibility="always|interaction|hidden"`: Slider thumb visibility behavior.
 - `data-submenu`: DropdownMenu items that own children.
 - `data-orientation="horizontal|vertical"`: Accordion, ButtonGroup, RadioGroup, Slider, RangeSlider, Tabs and TabsList.
 - `data-placement`: the final placement after collision handling; twelve placements for Popover and DropdownMenu, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.
@@ -120,8 +123,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 +131,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.