ropav 0.0.13 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 daopk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -41,7 +41,7 @@ import { Button } from 'ropav';
 
 Use typed `classNames` and `styles`, documented state attributes, and variables listed in the packaged styles manifest. DOM nesting, internal selectors and undocumented variables are private implementation details.
 
-See the [Public Styles API](./docs/public-styles-api.md) and [public token table](./docs/public-tokens.md). Layered consumers should declare `reset, ropav.tokens, ropav.components, app`; `ropav/legacy-unlayered.css` is the temporary compatibility import for unlayered resets.
+See the [Public Styles API](./docs/public-styles-api.md) and [public token table](./docs/public-tokens.md). Consumers can declare `reset, ropav.tokens, ropav.components, app` to establish their cascade layer order.
 
 For headless Tooltip, HoverCard and custom menu markup, see the
 [public floating API](./docs/public-floating-api.md).

package/dist/card.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-card[data-v-2c467155] {
+.rp-card[data-v-114f8e01] {
     --_rp-card-bg: var(--rp-color-default);
     --_rp-card-border: var(--rp-color-default-border);
     --_rp-card-fg: var(--rp-color-text);
@@ -19,89 +19,89 @@
     border-radius: var(--_rp-card-radius);
     transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-card--layer-base[data-v-2c467155] {
+.rp-card--layer-base[data-v-114f8e01] {
     --_rp-card-bg: var(--rp-color-body);
 }
-.rp-card--layer-surface[data-v-2c467155] {
+.rp-card--layer-surface[data-v-114f8e01] {
     --_rp-card-bg: var(--rp-color-default);
 }
-.rp-card--layer-raised[data-v-2c467155] {
+.rp-card--layer-raised[data-v-114f8e01] {
     --_rp-card-bg: var(--rp-color-default);
 }
-.rp-card--borderless[data-v-2c467155] {
+.rp-card--borderless[data-v-114f8e01] {
     --_rp-card-border: transparent;
 }
-.rp-card--header-bordered .rp-card__header[data-v-2c467155] {
+.rp-card--header-bordered .rp-card__header[data-v-114f8e01] {
     border-bottom: var(--rp-border-width-thin) solid var(--_rp-card-header-border);
 }
-.rp-card--footer-bordered .rp-card__footer[data-v-2c467155] {
+.rp-card--footer-bordered .rp-card__footer[data-v-114f8e01] {
     border-top: var(--rp-border-width-thin) solid var(--_rp-card-footer-border);
 }
-.rp-card--header-compact .rp-card__header[data-v-2c467155] {
+.rp-card--header-compact .rp-card__header[data-v-114f8e01] {
     padding-block-end: calc(var(--_rp-card-padding) / 2);
 }
-.rp-card--header-compact .rp-card__body[data-v-2c467155] {
+.rp-card--header-compact .rp-card__body[data-v-114f8e01] {
     padding-block-start: calc(var(--_rp-card-padding) / 2);
 }
-.rp-card--footer-compact .rp-card__body[data-v-2c467155] {
+.rp-card--footer-compact .rp-card__body[data-v-114f8e01] {
     padding-block-end: calc(var(--_rp-card-padding) / 2);
 }
-.rp-card--footer-compact .rp-card__footer[data-v-2c467155] {
+.rp-card--footer-compact .rp-card__footer[data-v-114f8e01] {
     padding-block-start: calc(var(--_rp-card-padding) / 2);
 }
-.rp-card--padding-none[data-v-2c467155] {
+.rp-card--padding-none[data-v-114f8e01] {
     --_rp-card-padding: var(--rp-spacing-0);
 }
-.rp-card--padding-sm[data-v-2c467155] {
+.rp-card--padding-sm[data-v-114f8e01] {
     --_rp-card-padding: var(--rp-spacing-3);
 }
-.rp-card--padding-md[data-v-2c467155] {
+.rp-card--padding-md[data-v-114f8e01] {
     --_rp-card-padding: var(--rp-spacing-5);
 }
-.rp-card--padding-lg[data-v-2c467155] {
+.rp-card--padding-lg[data-v-114f8e01] {
     --_rp-card-padding: var(--rp-spacing-6);
 }
-.rp-card--radius-none[data-v-2c467155] {
+.rp-card--radius-none[data-v-114f8e01] {
     --_rp-card-radius: var(--rp-radius-none);
 }
-.rp-card--radius-xs[data-v-2c467155] {
+.rp-card--radius-xs[data-v-114f8e01] {
     --_rp-card-radius: var(--rp-radius-xs);
 }
-.rp-card--radius-sm[data-v-2c467155] {
+.rp-card--radius-sm[data-v-114f8e01] {
     --_rp-card-radius: var(--rp-radius-sm);
 }
-.rp-card--radius-md[data-v-2c467155] {
+.rp-card--radius-md[data-v-114f8e01] {
     --_rp-card-radius: var(--rp-radius-md);
 }
-.rp-card--radius-lg[data-v-2c467155] {
+.rp-card--radius-lg[data-v-114f8e01] {
     --_rp-card-radius: var(--rp-radius-lg);
 }
-.rp-card--radius-xl[data-v-2c467155] {
+.rp-card--radius-xl[data-v-114f8e01] {
     --_rp-card-radius: var(--rp-radius-xl);
 }
-.rp-card__header[data-v-2c467155], .rp-card__body[data-v-2c467155], .rp-card__footer[data-v-2c467155] {
+.rp-card__header[data-v-114f8e01], .rp-card__body[data-v-114f8e01], .rp-card__footer[data-v-114f8e01] {
     box-sizing: border-box;
     padding: var(--_rp-card-padding);
 }
-.rp-card__header[data-v-2c467155], .rp-card__footer[data-v-2c467155] {
+.rp-card__header[data-v-114f8e01], .rp-card__footer[data-v-114f8e01] {
     display: grid;
     gap: var(--rp-spacing-1);
 }
-.rp-card__body[data-v-2c467155] {
+.rp-card__body[data-v-114f8e01] {
     flex: 1 1 auto;
     min-width: 0;
     color: var(--rp-color-text);
     font-size: var(--rp-font-size-md);
     line-height: var(--rp-line-height-md);
 }
-.rp-card__title[data-v-2c467155] {
+.rp-card__title[data-v-114f8e01] {
     margin: 0;
     color: var(--rp-color-text);
     font-size: var(--rp-font-size-lg);
     font-weight: var(--rp-font-weight-semibold);
     line-height: var(--rp-line-height-xs);
 }
-.rp-card__description[data-v-2c467155] {
+.rp-card__description[data-v-114f8e01] {
     margin: 0;
     color: var(--rp-color-dimmed);
     font-size: var(--rp-font-size-sm);

package/dist/card.js

@@ -4,10 +4,10 @@ import { n as useStylesApi } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
 //#region src/components/card/card.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-2c467155> ");
-var t1 = template("<p data-v-2c467155> ");
-var t2 = template("<div data-v-2c467155>");
-var t3 = template("<div data-v-2c467155>", 1);
+var t0 = template("<div data-v-114f8e01> ");
+var t1 = template("<p data-v-114f8e01> ");
+var t2 = template("<div data-v-114f8e01>");
+var t3 = template("<div data-v-114f8e01>", 1);
 //#endregion
 //#region src/components/card/card.vue
 var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -32,13 +32,6 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		},
 		title: { default: "" },
 		description: { default: "" },
-		bodyClass: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
 		classNames: {},
 		styles: {}
 	},
@@ -95,10 +88,7 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		setInsertionState(n19, null, 1);
 		createIf(() => hasBody.value, () => {
 			const n14 = t2();
-			renderEffect(() => setDynamicProps(n14, [unref(getPartAttrs)("body", {
-				class: "rp-card__body",
-				compatibilityClass: __props.bodyClass
-			})]));
+			renderEffect(() => setDynamicProps(n14, [unref(getPartAttrs)("body", { class: "rp-card__body" })]));
 			setInsertionState(n14, null, 0);
 			createSlot("default", null, null, 1);
 			return n14;
@@ -113,7 +103,7 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n19;
 	}
-}), [["__scopeId", "data-v-2c467155"]]);
+}), [["__scopeId", "data-v-114f8e01"]]);
 //#endregion
 //#region src/components/card/types.ts
 var cardParts = [

package/dist/components/card/types.d.ts

@@ -1,4 +1,3 @@
-import { HTMLAttributes } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const cardParts: readonly ["root", "header", "title", "description", "body", "footer"];
 export type CardPart = (typeof cardParts)[number];
@@ -14,6 +13,4 @@ export interface CardProps extends StylesApiProps<CardPart> {
     footerBorder?: boolean;
     title?: string;
     description?: string;
-    /** @deprecated Use `classNames.body` instead. */
-    bodyClass?: HTMLAttributes['class'];
 }

package/dist/components/dialog/types.d.ts

@@ -12,6 +12,7 @@ export type DialogFocusTrapOptions = Omit<FocusTrapOptions, 'allowOutsideClick'
 export interface DialogRootProps {
     open?: boolean;
     defaultOpen?: boolean;
+    baseZIndex?: number;
     modal?: boolean;
     closeOnEscape?: boolean;
     closeOnOutsideClick?: boolean;

package/dist/components/dropdown-menu/types.d.ts

@@ -107,6 +107,7 @@ export interface DropdownMenuRenderedItem {
 }
 export interface DropdownMenuProps extends FloatingPositionProps<DropdownMenuPlacement>, StylesApiProps<DropdownMenuPart> {
     id?: string;
+    baseZIndex?: number;
     items?: DropdownMenuItem[];
     open?: boolean;
     disabled?: boolean;
@@ -114,10 +115,6 @@ export interface DropdownMenuProps extends FloatingPositionProps<DropdownMenuPla
     ariaLabel?: string;
     modal?: boolean;
     ignore?: readonly DropdownMenuInteractOutsideTarget[];
-    /** @deprecated Use `teleport` instead. */
-    portal?: boolean;
-    /** @deprecated Use `teleportTo` instead. */
-    portalTo?: string | HTMLElement;
 }
 export type DropdownMenuAs = string | Component;
 export type DropdownMenuCheckedState = boolean | 'indeterminate';
@@ -142,6 +139,7 @@ export interface DropdownMenuRootPrimitiveProps {
     id?: string;
     open?: boolean;
     defaultOpen?: boolean;
+    baseZIndex?: number;
     disabled?: boolean;
     modal?: boolean;
     target?: FloatingTarget | null;
@@ -182,8 +180,6 @@ export interface DropdownMenuContentPrimitiveProps {
     collisionPadding?: FloatingCollisionPadding;
     autoUpdateOptions?: FloatingAutoUpdateOptions;
     arrow?: boolean;
-    /** @deprecated Use `flip` and `shift` instead. */
-    avoidCollisions?: boolean;
     forceMount?: boolean;
     ignore?: readonly DropdownMenuInteractOutsideTarget[];
     ariaLabel?: string;

package/dist/components/modal/types.d.ts

@@ -21,6 +21,7 @@ export interface ModalSlotProps {
 export interface ModalProps extends TeleportProps, StylesApiProps<ModalPart> {
     id?: string;
     open?: boolean;
+    baseZIndex?: number;
     title?: string;
     description?: string;
     ariaLabel?: string;

package/dist/components/overlay/index.d.ts

@@ -1,3 +1,6 @@
 export { default as Overlay } from './overlay.js';
+export { default as OverlayLayerProvider } from './overlay-layer-provider.js';
 export { overlayParts } from './types.js';
+export { useOverlayZIndex } from './useOverlayZIndex.js';
+export type { OverlayLayerProviderProps, UseOverlayZIndexOptions } from './types.js';
 export type { OverlayBlur, OverlayPart, OverlayProps, OverlayZIndex } from './types.js';

package/dist/components/overlay/index.js

@@ -1,3 +1,4 @@
+import { n as useOverlayZIndex } from "../../useOverlayZIndex.js";
 import { t as overlay_default } from "../../overlay.js";
-import { t as overlayParts } from "../../overlay2.js";
-export { overlay_default as Overlay, overlayParts };
+import { n as overlay_layer_provider_default, t as overlayParts } from "../../overlay2.js";
+export { overlay_default as Overlay, overlay_layer_provider_default as OverlayLayerProvider, overlayParts, useOverlayZIndex };

package/dist/components/overlay/overlay-layer-provider.d.ts

@@ -0,0 +1,21 @@
+import { OverlayLayerProviderProps } from './types.js';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<OverlayLayerProviderProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/overlay/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue';
+import { CSSProperties, MaybeRefOrGetter } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
 export declare const overlayParts: readonly ["root"];
 export type OverlayPart = (typeof overlayParts)[number];
@@ -13,3 +13,12 @@ export interface OverlayProps extends StylesApiProps<OverlayPart> {
     interactive?: boolean;
     disabled?: boolean;
 }
+export interface OverlayLayerProviderProps {
+    baseZIndex: number;
+}
+export interface UseOverlayZIndexOptions {
+    baseZIndex?: MaybeRefOrGetter<number | null | undefined>;
+    defaultBaseZIndex?: number;
+    offset?: MaybeRefOrGetter<number>;
+    aboveParent?: MaybeRefOrGetter<boolean>;
+}

package/dist/components/overlay/useOverlayZIndex.d.ts

@@ -0,0 +1,4 @@
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+import { UseOverlayZIndexOptions } from './types.js';
+export declare function provideOverlayZIndex(baseZIndex: MaybeRefOrGetter<number>): ComputedRef<number>;
+export declare function useOverlayZIndex(options?: UseOverlayZIndexOptions): ComputedRef<number>;

package/dist/components/popover/types.d.ts

@@ -37,6 +37,7 @@ export interface PopoverContentSlotProps {
 }
 export interface PopoverProps extends FloatingPositionProps<PopoverPlacement>, StylesApiProps<PopoverPart> {
     id?: string;
+    baseZIndex?: number;
     contentClass?: string;
     open?: boolean;
     disabled?: boolean;

package/dist/components/toast/types.d.ts

@@ -75,6 +75,7 @@ export interface ToastProviderProps extends ToastStoreOptions {
 export interface ToastViewportProps extends TeleportProps, StylesApiProps<ToastViewportPart> {
     position?: ToastPosition;
     label?: string;
+    baseZIndex?: number;
 }
 export interface ToastOptions extends Omit<ToastProps, 'open'> {
     /** Replaces an active toast with the same id and starts a fresh lifecycle. */

package/dist/components/tooltip/types.d.ts

@@ -21,6 +21,7 @@ export interface TooltipSlotProps {
 }
 export interface TooltipProps extends FloatingPositionProps<TooltipPlacement>, StylesApiProps<TooltipPart> {
     id?: string;
+    baseZIndex?: number;
     content?: string;
     color?: TooltipColor;
     autoContrast?: boolean;

package/dist/composables/useOverlayLayer.d.ts

@@ -22,7 +22,7 @@ export interface UseOverlayLayerOptions {
     modal?: MaybeRefOrGetter<boolean>;
     modalEffects?: boolean;
     preventScroll?: MaybeRefOrGetter<boolean>;
-    baseZIndex?: number;
+    baseZIndex?: MaybeRefOrGetter<number>;
 }
 export declare function useOverlayLayer(options: UseOverlayLayerOptions): OverlayLayerContext;
 export declare function useOverlayLayerBranch(element: Ref<HTMLElement | null>, options?: {

package/dist/dialog.js

@@ -1,5 +1,5 @@
 import { t as useRequiredInject } from "./useRequiredInject.js";
-import { n as useOverlayLayerBranch, t as useOverlayLayer } from "./useOverlayLayer.js";
+import { i as useOverlayLayerBranch, n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
 import { t as provideTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, applyVShow, computed, createComponent, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, isRef, mergeProps, nextTick, onBeforeUnmount, provide, ref, setTemplateRefBinding, shallowRef, unref, useAttrs, useId, watch } from "vue";
@@ -298,6 +298,7 @@ var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: false
 		},
+		baseZIndex: {},
 		modal: {
 			type: Boolean,
 			default: true
@@ -343,7 +344,11 @@ var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 			modal,
 			modalEffects: true,
 			preventScroll,
-			baseZIndex: 1e3
+			baseZIndex: useOverlayZIndex({
+				baseZIndex: () => props.baseZIndex,
+				defaultBaseZIndex: 1e3,
+				aboveParent: false
+			})
 		});
 		function setOpen(value) {
 			const previous = isOpen.value;

package/dist/dropdown-menu.js

@@ -2,7 +2,7 @@ import './dropdown-menu.css';
 import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
-import { t as useOverlayLayer } from "./useOverlayLayer.js";
+import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
 import { n as useTeleportPositioningKey, r as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
 import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, markRaw, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
@@ -433,9 +433,9 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 		placement: () => props.placement ?? defaultPlacement,
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
-		flip: () => props.avoidCollisions !== false && props.flip !== false,
+		flip: () => props.flip !== false,
 		flipOptions: () => props.flipOptions,
-		shift: () => props.avoidCollisions !== false && props.shift !== false,
+		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
 		autoUpdateOptions: () => props.autoUpdateOptions,
 		restartKey: teleportPositioningKey
@@ -597,10 +597,6 @@ var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: false
 		},
-		avoidCollisions: {
-			type: Boolean,
-			default: true
-		},
 		forceMount: {
 			type: Boolean,
 			default: false
@@ -1054,6 +1050,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: false
 		},
+		baseZIndex: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1085,10 +1082,15 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 		const contentElement = ref(null);
 		const inside = /* @__PURE__ */ new Set();
 		let returnFocusElement = null;
+		const baseZIndex = useOverlayZIndex({
+			baseZIndex: () => props.baseZIndex,
+			defaultBaseZIndex: 100,
+			aboveParent: false
+		});
 		const layer = useOverlayLayer({
 			active: computed(() => isOpen.value && !disabled.value),
 			element: contentElement,
-			baseZIndex: 100
+			baseZIndex
 		});
 		function setOpen(value) {
 			if (value && disabled.value) return;
@@ -1300,10 +1302,6 @@ var dropdown_menu_sub_content_default = /* @__PURE__ */ defineVaporComponent({
 		},
 		collisionPadding: { default: 8 },
 		autoUpdateOptions: {},
-		avoidCollisions: {
-			type: Boolean,
-			default: true
-		},
 		forceMount: {
 			type: Boolean,
 			default: false
@@ -2366,10 +2364,9 @@ function useDropdownMenu(props, emit = {}) {
 	const generatedId = useId();
 	const menuId = computed(() => props.id ?? `${generatedId}-menu`);
 	const placement = computed(() => props.placement ?? "bottom-start");
-	const requestedTeleportTarget = computed(() => props.portalTo ?? props.teleportTo);
-	const teleportTo = useTeleportTarget(() => requestedTeleportTarget.value);
+	const teleportTo = useTeleportTarget(() => props.teleportTo);
 	const teleportPositioningKey = useTeleportPositioningKey();
-	const shouldTeleport = computed(() => props.portal ?? props.teleport !== false);
+	const shouldTeleport = computed(() => props.teleport !== false);
 	const { isExplicitTarget, reference, resolvedTarget } = useFloatingTarget(() => props.target, rootRef);
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
 	const visibleItems = computed(() => props.items ?? []);
@@ -2379,7 +2376,11 @@ function useDropdownMenu(props, emit = {}) {
 	const layer = useOverlayLayer({
 		active: isVisible,
 		element: menuRef,
-		baseZIndex: 100
+		baseZIndex: useOverlayZIndex({
+			baseZIndex: () => props.baseZIndex,
+			defaultBaseZIndex: 100,
+			aboveParent: false
+		})
 	});
 	const contentHasSubmenu = computed(() => hasNestedItems(visibleItems.value));
 	const isEmpty = computed(() => visibleItems.value.length === 0);
@@ -2597,6 +2598,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 	__name: "dropdown-menu",
 	props: {
 		id: {},
+		baseZIndex: {},
 		items: { default: () => [] },
 		open: {
 			type: Boolean,
@@ -2616,11 +2618,6 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 			default: false
 		},
 		ignore: {},
-		portal: {
-			type: Boolean,
-			default: void 0
-		},
-		portalTo: {},
 		target: {},
 		placement: { default: "bottom-start" },
 		strategy: { default: "absolute" },

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