ropav 0.0.12 → 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

@@ -1,6 +1,6 @@
 import { Component, HTMLAttributes, Ref } from 'vue';
 import { StylesApiProps } from '../../styles-api.js';
-import { FloatingCollisionPadding, FloatingOffset, FloatingOffsetOptions, FloatingPositionProps, FloatingStrategy, FloatingTarget, FloatingVirtualElement, TeleportProps } from '../floating/types.js';
+import { FloatingAutoUpdateOptions, FloatingCollisionPadding, FloatingFlipOptions, FloatingOffset, FloatingOffsetOptions, FloatingPositionProps, FloatingStrategy, FloatingTarget, FloatingVirtualElement, TeleportProps } from '../floating/types.js';
 export declare const dropdownMenuParts: readonly ["root", "trigger", "content", "item", "label", "shortcut", "submenu", "submenuIndicator", "empty"];
 export type DropdownMenuPart = (typeof dropdownMenuParts)[number];
 export type DropdownMenuPlacement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end';
@@ -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;
@@ -177,11 +175,11 @@ export interface DropdownMenuContentPrimitiveProps {
     offset?: DropdownMenuOffset;
     strategy?: FloatingStrategy;
     flip?: boolean;
+    flipOptions?: FloatingFlipOptions;
     shift?: boolean;
     collisionPadding?: FloatingCollisionPadding;
+    autoUpdateOptions?: FloatingAutoUpdateOptions;
     arrow?: boolean;
-    /** @deprecated Use `flip` and `shift` instead. */
-    avoidCollisions?: boolean;
     forceMount?: boolean;
     ignore?: readonly DropdownMenuInteractOutsideTarget[];
     ariaLabel?: string;

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

@@ -33,8 +33,10 @@ export interface DropdownMenuRenderContext {
     getSubmenuPlacement: () => DropdownMenuPlacement;
     getStrategy: () => NonNullable<DropdownMenuProps['strategy']>;
     getFlip: () => boolean;
+    getFlipOptions: () => DropdownMenuProps['flipOptions'];
     getShift: () => boolean;
     getCollisionPadding: () => NonNullable<DropdownMenuProps['collisionPadding']>;
+    getAutoUpdateOptions: () => DropdownMenuProps['autoUpdateOptions'];
 }
 export declare function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId, getSubmenuId, getMenuActiveDescendant, getItemElement, isItemFocused, isSubmenuOpen, activateItem, focusHoveredItem, selectItem, openSubmenu, closeSubmenu, close, }: UseDropdownMenuRenderItemsOptions): {
     renderedItems: import('vue').ComputedRef<DropdownMenuRenderedItem[]>;

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

@@ -1,3 +1,3 @@
 export { useHoverDisclosure } from './useHoverDisclosure.js';
 export { useFloatingPosition } from './useFloatingPosition.js';
-export type { FloatingAlignment, FloatingCollisionPadding, FloatingOffset, FloatingOffsetOptions, FloatingPlacement, FloatingPositionProps, FloatingReference, FloatingSide, FloatingStrategy, FloatingTarget, FloatingVirtualElement, HoverDisclosureContentProps, HoverDisclosureContentTarget, HoverDisclosureInteractionTarget, HoverDisclosureOpenChangeDetails, HoverDisclosureOpenChangeReason, HoverDisclosureOption, HoverDisclosureState, HoverDisclosureTouchBehavior, HoverDisclosureTriggerProps, TeleportProps, TeleportTarget, TeleportTargetValue, UseHoverDisclosureOptions, UseHoverDisclosureReturn, UseFloatingPositionOptions, UseFloatingPositionReturn, } from './types.js';
+export type { FloatingAlignment, FloatingAutoUpdateOptions, FloatingCollisionPadding, FloatingFlipFallbackStrategy, FloatingFlipOptions, FloatingOffset, FloatingOffsetOptions, FloatingPlacement, FloatingPositionProps, FloatingReference, FloatingSide, FloatingStrategy, FloatingTarget, FloatingVirtualElement, HoverDisclosureContentProps, HoverDisclosureContentTarget, HoverDisclosureInteractionTarget, HoverDisclosureOpenChangeDetails, HoverDisclosureOpenChangeReason, HoverDisclosureOption, HoverDisclosureState, HoverDisclosureTouchBehavior, HoverDisclosureTriggerProps, TeleportProps, TeleportTarget, TeleportTargetValue, UseHoverDisclosureOptions, UseHoverDisclosureReturn, UseFloatingPositionOptions, UseFloatingPositionReturn, } from './types.js';

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

@@ -10,6 +10,13 @@ export interface FloatingOffsetOptions {
 }
 export type FloatingOffset = number | FloatingOffsetOptions;
 export type FloatingCollisionPadding = number | Partial<Record<FloatingSide, number>>;
+export type FloatingFlipFallbackStrategy = 'bestFit' | 'initialPlacement';
+export interface FloatingFlipOptions {
+    fallbackStrategy?: FloatingFlipFallbackStrategy;
+}
+export interface FloatingAutoUpdateOptions {
+    animationFrame?: boolean;
+}
 export type FloatingReference = Element | VirtualElement;
 export type FloatingTarget = string | FloatingReference | Ref<FloatingReference | null | undefined>;
 export interface FloatingPositionProps<TPlacement extends FloatingPlacement = FloatingPlacement> extends TeleportProps {
@@ -18,8 +25,10 @@ export interface FloatingPositionProps<TPlacement extends FloatingPlacement = Fl
     strategy?: FloatingStrategy;
     offset?: FloatingOffset;
     flip?: boolean;
+    flipOptions?: FloatingFlipOptions;
     shift?: boolean;
     collisionPadding?: FloatingCollisionPadding;
+    autoUpdateOptions?: FloatingAutoUpdateOptions;
     arrow?: boolean;
 }
 export interface UseFloatingPositionOptions {
@@ -31,8 +40,10 @@ export interface UseFloatingPositionOptions {
     strategy?: MaybeRefOrGetter<FloatingStrategy | undefined>;
     offset?: MaybeRefOrGetter<FloatingOffset | undefined>;
     flip?: MaybeRefOrGetter<boolean | undefined>;
+    flipOptions?: MaybeRefOrGetter<FloatingFlipOptions | undefined>;
     shift?: MaybeRefOrGetter<boolean | undefined>;
     collisionPadding?: MaybeRefOrGetter<FloatingCollisionPadding | undefined>;
+    autoUpdateOptions?: MaybeRefOrGetter<FloatingAutoUpdateOptions | undefined>;
     restartKey?: MaybeRefOrGetter<unknown>;
 }
 export interface UseFloatingPositionReturn {

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,11 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 		placement: () => props.placement ?? defaultPlacement,
 		strategy: () => props.strategy ?? "absolute",
 		offset: () => props.offset,
-		flip: () => props.avoidCollisions !== false && props.flip !== false,
-		shift: () => props.avoidCollisions !== false && props.shift !== false,
+		flip: () => props.flip !== false,
+		flipOptions: () => props.flipOptions,
+		shift: () => props.shift !== false,
 		collisionPadding: () => props.collisionPadding ?? 8,
+		autoUpdateOptions: () => props.autoUpdateOptions,
 		restartKey: teleportPositioningKey
 	});
 	watch(floating.actualPlacement, (value) => {
@@ -584,19 +586,17 @@ var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false
 		},
-		avoidCollisions: {
-			type: Boolean,
-			default: true
-		},
 		forceMount: {
 			type: Boolean,
 			default: false
@@ -1050,6 +1050,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: false
 		},
+		baseZIndex: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1081,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;
@@ -1289,15 +1295,13 @@ var dropdown_menu_sub_content_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
-		avoidCollisions: {
-			type: Boolean,
-			default: true
-		},
+		autoUpdateOptions: {},
 		forceMount: {
 			type: Boolean,
 			default: false
@@ -1599,8 +1603,10 @@ var dropdown_menu_item_row_default = /* @__PURE__ */ defineVaporComponent({
 			strategy: props.context.getStrategy,
 			offset: () => 4,
 			flip: props.context.getFlip,
+			flipOptions: props.context.getFlipOptions,
 			shift: props.context.getShift,
-			collisionPadding: props.context.getCollisionPadding
+			collisionPadding: props.context.getCollisionPadding,
+			autoUpdateOptions: props.context.getAutoUpdateOptions
 		});
 		const submenuProps = computed(() => props.context.getSubmenuProps(props.item, path.value, true));
 		const publicSubmenuProps = computed(() => ({
@@ -2193,8 +2199,10 @@ function useDropdownMenuPortalPosition(options) {
 		strategy: () => options.props.strategy ?? "absolute",
 		offset: () => options.props.offset,
 		flip: () => options.props.flip !== false,
+		flipOptions: () => options.props.flipOptions,
 		shift: () => options.props.shift !== false,
 		collisionPadding: () => options.props.collisionPadding ?? 8,
+		autoUpdateOptions: () => options.props.autoUpdateOptions,
 		restartKey: options.restartKey
 	});
 	return {
@@ -2296,8 +2304,10 @@ function useDropdownMenuRenderItems({ props, actualPlacement, items, getItemId,
 			getSubmenuPlacement: () => actualPlacement.value.endsWith("end") ? "left-start" : "right-start",
 			getStrategy: () => props.strategy ?? "absolute",
 			getFlip: () => props.flip !== false,
+			getFlipOptions: () => props.flipOptions,
 			getShift: () => props.shift !== false,
-			getCollisionPadding: () => props.collisionPadding ?? 8
+			getCollisionPadding: () => props.collisionPadding ?? 8,
+			getAutoUpdateOptions: () => props.autoUpdateOptions
 		},
 		getItemProps,
 		getItemSlotProps
@@ -2354,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 ?? []);
@@ -2367,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);
@@ -2585,6 +2598,7 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 	__name: "dropdown-menu",
 	props: {
 		id: {},
+		baseZIndex: {},
 		items: { default: () => [] },
 		open: {
 			type: Boolean,
@@ -2604,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" },
@@ -2617,11 +2626,13 @@ var dropdown_menu_default = /* @__PURE__ */ defineVaporComponent({
 			type: Boolean,
 			default: true
 		},
+		flipOptions: {},
 		shift: {
 			type: Boolean,
 			default: true
 		},
 		collisionPadding: { default: 8 },
+		autoUpdateOptions: {},
 		arrow: {
 			type: Boolean,
 			default: false