pxd 0.1.2 → 0.1.3

package/dist/components/number-input/index.vue

@@ -4,7 +4,7 @@ import PlusIcon from "@gdsicon/vue/plus";
 import { computed, reactive, shallowRef, watch } from "vue";
 import { useModelValue } from "../../composables/_internal/use-model-value.js";
 import { useRepeatAction } from "../../composables/use-repeat-action.js";
-import { NOOP } from "../../utils/event.js";
+import { NOOP, isCompositionKeydown } from "../../utils/event.js";
 import { toNumber } from "../../utils/format.js";
 import { isNil, isNumber, isUndefined } from "../../utils/is.js";
 import PInput from "../input/index.vue";
@@ -53,11 +53,6 @@ const props = defineProps({
 		type: Boolean,
 		required: false
 	},
-	thousandsSeparator: {
-		type: String,
-		required: false,
-		default: ","
-	},
 	scientific: {
 		type: Boolean,
 		required: false,
@@ -71,6 +66,16 @@ const props = defineProps({
 	modelValue: {
 		type: [Number, null],
 		required: false
+	},
+	controlsPosition: {
+		type: String,
+		required: false,
+		default: "sides"
+	},
+	thousandsSeparator: {
+		type: String,
+		required: false,
+		default: ","
 	}
 });
 const emits = defineEmits([
@@ -79,7 +84,6 @@ const emits = defineEmits([
 	"change",
 	"update:modelValue"
 ]);
-const modelValue = useModelValue(props, emits, { withChange: false });
 const REGEXPS = {
 	"remove-leading-zeros": /^(-?)0+(?=\d)/,
 	"thousands-separator": /\B(?=(\d{3})+(?!\d))/g
@@ -89,13 +93,6 @@ const inputData = reactive({
 	currentValue: props.modelValue,
 	userInput: null
 });
-function formatWithThousands(value) {
-	const str = String(value);
-	const dotIndex = str.indexOf(".");
-	const intPart = dotIndex === -1 ? str : str.slice(0, dotIndex);
-	const decPart = dotIndex === -1 ? "" : str.slice(dotIndex);
-	return intPart.replace(REGEXPS["thousands-separator"], props.thousandsSeparator) + decPart;
-}
 const inputValue = computed(() => {
 	if (inputData.userInput !== null) {
 		return inputData.userInput;
@@ -130,6 +127,7 @@ const valuePrecision = computed(() => {
 	}
 	return stringValue.length - decimalIndex - 1;
 });
+const modelValue = useModelValue(props, emits, { withChange: false });
 const { start: startDecrease, stop: stopDecrease } = useRepeatAction({
 	disabled: decreaseDisabled,
 	action: decreaseValue
@@ -138,6 +136,13 @@ const { start: startIncrease, stop: stopIncrease } = useRepeatAction({
 	disabled: increaseDisabled,
 	action: increaseValue
 });
+function formatWithThousands(value) {
+	const str = String(value);
+	const dotIndex = str.indexOf(".");
+	const intPart = dotIndex === -1 ? str : str.slice(0, dotIndex);
+	const decPart = dotIndex === -1 ? "" : str.slice(dotIndex);
+	return intPart.replace(REGEXPS["thousands-separator"], props.thousandsSeparator) + decPart;
+}
 function toPrecision(value) {
 	if (!value) {
 		return value;
@@ -180,6 +185,9 @@ function decreaseValue() {
 	modelValue.value = clampToRange(value ?? 0);
 }
 function onInputKeydown(ev) {
+	if (isCompositionKeydown(ev)) {
+		return;
+	}
 	const key = ev.key;
 	if (!props.scientific && ["e", "E"].includes(key)) {
 		ev.preventDefault();
@@ -257,7 +265,7 @@ watch(() => props.modelValue, (newVal, oldVal) => {
   >
     <template #prefix>
       <button
-        v-if="controls"
+        v-if="controls && controlsPosition !== 'right'"
         tabindex="-1"
         class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-l-inherit border-r font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
         :disabled="decreaseDisabled"
@@ -277,8 +285,41 @@ watch(() => props.modelValue, (newVal, oldVal) => {
     <template #suffix>
       <slot name="suffix" />
 
+      <div
+        v-if="controls && controlsPosition === 'right'"
+        class="flex aspect-square h-full flex-col rounded-r-inherit border-l"
+      >
+        <button
+          tabindex="-1"
+          class="flex h-1/2 w-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-tr-inherit border-b font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+          :disabled="increaseDisabled"
+          @pointerdown="startIncrease"
+          @pointercancel="stopIncrease"
+          @pointerup="stopIncrease"
+          @contextmenu.prevent="NOOP"
+        >
+          <slot name="plusIcon">
+            <PlusIcon class="size-2 pointer-events-none" />
+          </slot>
+        </button>
+
+        <button
+          tabindex="-1"
+          class="flex h-1/2 w-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-br-inherit font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+          :disabled="decreaseDisabled"
+          @pointerdown="startDecrease"
+          @pointercancel="stopDecrease"
+          @pointerup="stopDecrease"
+          @contextmenu.prevent="NOOP"
+        >
+          <slot name="minusIcon">
+            <MinusIcon class="size-2 pointer-events-none" />
+          </slot>
+        </button>
+      </div>
+
       <button
-        v-if="controls"
+        v-else-if="controls"
         tabindex="-1"
         class="flex aspect-square h-full cursor-pointer touch-manipulation appearance-none items-center justify-center rounded-r-inherit border-l font-inherit text-foreground outline-none enabled:hover:bg-background-hover enabled:hover:text-gray-1000 enabled:active:bg-background-active disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
         :disabled="increaseDisabled"

package/dist/components/number-input/types.d.ts

@@ -7,10 +7,11 @@ export interface NumberInputProps {
   controls?: boolean
   precision?: number
   thousands?: boolean
-  thousandsSeparator?: string
   scientific?: boolean
   clearValue?: number | null
   modelValue?: number | null
+  controlsPosition?: 'sides' | 'right'
+  thousandsSeparator?: string
 }
 
 export interface NumberInputEmits {

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

@@ -1,7 +1,7 @@
 import type { OverlayProps } from './types';
-declare var __VLS_14: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<OverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (args_0: boolean) => any;
@@ -14,7 +14,6 @@ declare const __VLS_base: import("vue").DefineComponent<OverlayProps, {}, {}, {}
 }>, {
     modelValue: boolean;
     closeOnPressEscape: boolean;
-    appendToBody: boolean;
     lockScrollOnVisible: boolean;
     showOverlay: boolean;
     closeOnClickOverlay: boolean;

package/dist/components/overlay/index.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
+import { computed, watch } from "vue";
 import { useLockScroll } from "../../composables/_internal/use-lock-scroll.js";
 import { useOverlayManager } from "../../composables/_internal/use-overlay-manager.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
-import { getElement } from "../../utils/dom.js";
 import { NOOP } from "../../utils/event.js";
 import { isServer } from "../../utils/is.js";
 import PTeleport from "../teleport/index.vue";
@@ -34,15 +33,6 @@ const props = defineProps({
 		required: false,
 		default: true
 	},
-	appendToBody: {
-		type: Boolean,
-		required: false,
-		default: true
-	},
-	shownElement: {
-		type: [String, Object],
-		required: false
-	},
 	closeOnPressEscape: {
 		type: Boolean,
 		required: false,
@@ -64,72 +54,35 @@ const emits = defineEmits([
 	"escape",
 	"update:modelValue"
 ]);
+const computedStyle = computed(() => ({ "--overlay-index": props.zIndex }));
 const configProvider = useConfigProvider();
-const clipPath = shallowRef("");
-const computedStyle = computed(() => ({
-	"--overlay-index": props.zIndex,
-	"clip-path": clipPath.value
-}));
-let cacheShownElement = null;
-const { lockScroll, unlockScroll } = useLockScroll();
+const { lockScroll, unlockScroll } = useLockScroll(() => document.body, { walkAncestors: true });
 const { registerOverlay, unregisterOverlay } = useOverlayManager({
 	enabled: () => props.modelValue,
 	lockScrollOnVisible: () => props.lockScrollOnVisible,
 	lockScroll,
 	unlockScroll,
+	zIndex: () => props.zIndex,
 	onPressEscape: (ev) => {
 		if (!props.closeOnPressEscape) {
-			return;
+			return false;
 		}
 		emits("escape", ev);
-		emits("update:modelValue", false);
+		if (!ev.defaultPrevented) {
+			emits("update:modelValue", false);
+		}
+		return true;
 	}
 });
-function getShownElementClipPath(el) {
-	const { top, left, right, bottom } = el.getBoundingClientRect();
-	clipPath.value = `polygon(
-    0% 0%,
-    0% 100%,
-    ${left}px 100%,
-    ${left}px ${top}px,
-    ${right}px ${top}px,
-    ${right}px ${bottom}px,
-    ${left}px ${bottom}px,
-    ${left}px 100%,
-    100% 100%,
-    100% 0%
-  )`;
-}
-async function getShownElementIfNeed() {
-	const { shownElement, modelValue } = props;
-	if (!modelValue || !shownElement) {
-		toggleShownElementClasses();
-		clipPath.value = "";
-		return;
-	}
-	await nextTick();
-	const el = getElement(shownElement);
-	if (!el) {
-		return;
-	}
-	cacheShownElement = el;
-	getShownElementClipPath(el);
-	toggleShownElementClasses(true);
-}
-function toggleShownElementClasses(force = false) {
-	cacheShownElement?.classList.toggle("pointer-events-auto!", force);
-}
 function onOverlayVisibleChange(visible) {
 	if (isServer()) {
 		return;
 	}
 	if (visible) {
 		registerOverlay();
-		getShownElementIfNeed();
 		return;
 	}
 	unregisterOverlay();
-	toggleShownElementClasses();
 }
 function onOverlayClick(ev) {
 	emits("click", ev);
@@ -139,15 +92,10 @@ function onOverlayClick(ev) {
 	emits("update:modelValue", false);
 }
 watch(() => props.modelValue, onOverlayVisibleChange, { immediate: true });
-watch(() => props.shownElement, getShownElementIfNeed);
-onBeforeUnmount(() => {
-	toggleShownElementClasses();
-	cacheShownElement = null;
-});
 </script>
 
 <template>
-  <PTeleport :disabled="!appendToBody">
+  <PTeleport>
     <Transition name="pxd-transition--fade" mode="out-in" appear>
       <div
         data-overlay

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

@@ -3,8 +3,6 @@ export interface OverlayProps {
   variant?: 'default' | 'blurred' | 'transparent'
   modelValue?: boolean
   showOverlay?: boolean
-  appendToBody?: boolean
-  shownElement?: string | object
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
   lockScrollOnVisible?: boolean

package/dist/components/page-number/index.vue

@@ -3,6 +3,7 @@ import ChevronRightIcon from "@gdsicon/vue/chevron-right";
 import { computed, ref, watch } from "vue";
 import { BASIC_HEIGHTS } from "../../constants/size.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isCompositionKeydown } from "../../utils/event.js";
 import PSelect from "../select/index.vue";
 defineOptions({
 	name: "PPageNumber",
@@ -58,27 +59,10 @@ const props = defineProps({
 		]
 	}
 });
-const mappedPageSizeOptions = computed(() => {
-	const label = configProvider.locale.pagination.perPage;
-	return props.pageSizeOptions.map((size) => ({
-		label: String(size) + label,
-		value: size
-	}));
-});
 const emits = defineEmits(["update:pageSize", "update:modelValue"]);
-const configProvider = useConfigProvider();
 const pageInput = ref(String(props.modelValue));
 const internalPageSize = ref(props.pageSize);
 const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)));
-const pagesBtnSize = computed(() => {
-	const inheritSize = props.size || configProvider.size;
-	return {
-		sm: "xs",
-		md: "sm",
-		lg: "md"
-	}[inheritSize];
-});
-const pageItemSizeClass = computed(() => BASIC_HEIGHTS[pagesBtnSize.value]);
 const pageItems = computed(() => {
 	if (pageCount.value <= 7) {
 		return Array.from({ length: pageCount.value }, (_, index) => index + 1);
@@ -115,6 +99,23 @@ const pageItems = computed(() => {
 		pageCount.value
 	];
 });
+const configProvider = useConfigProvider();
+const mappedPageSizeOptions = computed(() => {
+	const label = configProvider.locale.pagination.perPage;
+	return props.pageSizeOptions.map((size) => ({
+		label: String(size) + label,
+		value: size
+	}));
+});
+const pagesBtnSize = computed(() => {
+	const inheritSize = props.size || configProvider.size;
+	return {
+		sm: "xs",
+		md: "sm",
+		lg: "md"
+	}[inheritSize];
+});
+const pageItemSizeClass = computed(() => BASIC_HEIGHTS[pagesBtnSize.value]);
 function setPage(page) {
 	if (!props.disabled && page !== props.modelValue) {
 		emits("update:modelValue", page);
@@ -131,7 +132,7 @@ function submitPageInput() {
 	setPage(nextPage);
 }
 function onPageInputKeydown(event) {
-	if (event.key === "Enter") {
+	if (event.key === "Enter" && !isCompositionKeydown(event)) {
 		submitPageInput();
 	}
 }
@@ -193,17 +194,6 @@ watch(() => props.pageSize, (value) => {
       </button>
     </template>
 
-    <button
-      type="button"
-      class="pxd-page-number--next inline-flex aspect-square items-center justify-center rounded-md border border-transparent self-focus-ring outline-none enabled:cursor-pointer enabled:hover:bg-background-hover enabled:hover:text-foreground enabled:active:bg-background-active disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
-      :class="pageItemSizeClass"
-      :disabled="disabled || modelValue >= pageCount"
-      :aria-label="configProvider.locale.pagination.next"
-      @click="setPage(modelValue + 1)"
-    >
-      <ChevronRightIcon class="size-4" aria-hidden="true" />
-    </button>
-
     <PSelect
       v-if="showPageSize"
       v-model="internalPageSize"
@@ -228,5 +218,16 @@ watch(() => props.pageSize, (value) => {
       @blur="submitPageInput"
       @keydown="onPageInputKeydown"
     />
+
+    <button
+      type="button"
+      class="pxd-page-number--next inline-flex aspect-square items-center justify-center rounded-md border border-transparent self-focus-ring outline-none enabled:cursor-pointer enabled:hover:bg-background-hover enabled:hover:text-foreground enabled:active:bg-background-active disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700 motion-safe:transition-colors"
+      :class="pageItemSizeClass"
+      :disabled="disabled || modelValue >= pageCount"
+      :aria-label="configProvider.locale.pagination.next"
+      @click="setPage(modelValue + 1)"
+    >
+      <ChevronRightIcon class="size-4" aria-hidden="true" />
+    </button>
   </nav>
 </template>

package/dist/components/page-number/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentOption } from '../../types/shared'
+import type { ComponentSize, ComponentOption } from '../../types/shared/props'
 
 export interface PageNumberProps {
   /** page */

package/dist/components/pin-input/index.d.vue.ts

@@ -13,8 +13,8 @@ declare const __VLS_export: import("vue").DefineComponent<PinInputProps, {
 }>, {
     length: number;
     type: "numeric" | "alphabetic" | "alphanumeric" | "numeric-password" | "alphabetic-password" | "alphanumeric-password";
-    placeholder: string;
     modelValue: string;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/pin-input/index.vue

@@ -53,10 +53,10 @@ const props = defineProps({
 	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const configProvider = useConfigProvider();
+const NUMERIC_REGEX = /^\d+$/;
+const ALPHABETIC_REGEX = /^[a-z]+$/i;
+const ALPHANUMERIC_REGEX = /^[0-9a-z]+$/i;
 const inputsRef = shallowRef([]);
-const modelValue = useModelValue(props, emits);
-let localValue = modelValue.value;
 const computedInputType = computed(() => {
 	const { type } = props;
 	if (type.includes("password")) {
@@ -69,6 +69,9 @@ const computedInputType = computed(() => {
 const computedInputMode = computed(() => {
 	return props.type.includes("numeric") ? "numeric" : "text";
 });
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits);
+let localValue = modelValue.value;
 const { classes } = useTailwindVariant({
 	base: "pxd-input--border rounded-md motion-safe:transition-appearance",
 	variants: {
@@ -152,9 +155,6 @@ function onCompositionEnd(ev) {
 	}
 	setInputValue("", index);
 }
-const NUMERIC_REGEX = /^\d+$/;
-const ALPHABETIC_REGEX = /^[a-z]+$/i;
-const ALPHANUMERIC_REGEX = /^[0-9a-z]+$/i;
 function validateInputValue(value) {
 	if (!value) {
 		return false;

package/dist/components/pin-input/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSizeWithXs } from '../../types/shared'
+import type { ComponentSizeWithXs } from '../../types/shared/props'
 
 export interface PinInputProps {
   size?: ComponentSizeWithXs

package/dist/components/popover/index.vue

@@ -6,7 +6,7 @@ import { useDelayDestroy } from "../../composables/use-delay-destroy.js";
 import { useOutsideClick } from "../../composables/use-outside-click.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
 import { throttleByRaf } from "../../utils/event.js";
-import { getCssUnitValue, toArray } from "../../utils/format.js";
+import { getCssUnitValue, isTruthyProp, toArray } from "../../utils/format.js";
 import PPopoverArrow from "../_internal/popover-arrow.vue";
 import POverlay from "../overlay/index.vue";
 defineOptions({
@@ -113,6 +113,10 @@ const props = defineProps({
 		type: [Object, String],
 		required: false
 	},
+	ariaLabelledby: {
+		type: String,
+		required: false
+	},
 	toggleOnTrigger: {
 		type: Boolean,
 		required: false,
@@ -138,6 +142,11 @@ const props = defineProps({
 		required: false,
 		default: true
 	},
+	closeOnOutsideClick: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
 	lockScrollOnVisible: {
 		type: Boolean,
 		required: false
@@ -162,6 +171,7 @@ let showPopoverTimer;
 let hidePopoverTimer;
 let triggerElementsCache = null;
 let cleanupAutoUpdate = null;
+const throttledUpdatePosition = throttleByRaf(updatePosition);
 const arrowRef = shallowRef(null);
 const triggerRef = shallowRef(null);
 const wrapperRef = shallowRef(null);
@@ -169,7 +179,6 @@ const activeTriggerRef = shallowRef(null);
 const activeTriggerIndex = shallowRef(-1);
 const hasMultipleTriggers = shallowRef(false);
 const pointerPosition = shallowRef(null);
-const localPosition = shallowRef(props.position);
 const pointReference = { getBoundingClientRect() {
 	const { x = 0, y = 0 } = pointerPosition.value ?? {};
 	return {
@@ -184,7 +193,9 @@ const pointReference = { getBoundingClientRect() {
 		toJSON: () => ({})
 	};
 } };
+const localPosition = shallowRef(props.position);
 const triggerMethods = computed(() => toArray(props.trigger));
+const isManual = computed(() => triggerMethods.value.includes("manual"));
 const transitionType = computed(() => props.adaptive ? "fade-slide" : "fade-scale");
 const popoverMaxWidth = computed(() => getCssUnitValue(props.maxWidth));
 const wrapperStyle = computed(() => ({
@@ -193,9 +204,17 @@ const wrapperStyle = computed(() => ({
 	"--popover-arrow-color": props.arrowColor,
 	"--popover-max-width": popoverMaxWidth.value
 }));
-const configProvider = useConfigProvider();
-const allowOutsideClick = computed(() => !triggerMethods.value.includes("manual"));
-const focusTrapContainer = computed(() => isVisible.value ? wrapperRef.value : null);
+// Hover popovers must not steal focus. Click-triggered popovers keep the trap for Tab
+// containment, but only auto-focus when the caller asked for it.
+const shouldTrapFocus = computed(() => isTruthyProp(props.autoFocusElement) || triggerMethods.value.includes("click"));
+const focusTrapContainer = computed(() => isVisible.value && shouldTrapFocus.value ? wrapperRef.value : null);
+const overlayZIndex = computed(() => {
+	if (props.zIndex === undefined || props.zIndex === "") {
+		return undefined;
+	}
+	const value = Number(props.zIndex);
+	return Number.isFinite(value) ? value : undefined;
+});
 const triggerPointerMoveFn = computed(() => props.alignPoint ? onTriggerPointerMove : undefined);
 const computePositionMiddleware = computed(() => {
 	return [
@@ -206,10 +225,11 @@ const computePositionMiddleware = computed(() => {
 		props.closeOnInvisible && hide({ strategy: "referenceHidden" })
 	];
 });
+const configProvider = useConfigProvider();
 const { render: isRender, visible: isVisible, show: showPopover, hide: hidePopover } = useDelayDestroy(props.modelValue, {
 	delay: () => props.destroyDelay,
 	visibleChange(v) {
-		if (!allowOutsideClick.value) {
+		if (isManual.value) {
 			return;
 		}
 		emits("visible-change", v);
@@ -222,18 +242,22 @@ const { render: isRender, visible: isVisible, show: showPopover, hide: hidePopov
 		}
 	}
 });
-useFocusTrap(focusTrapContainer, () => ({
-	autoFocusElement: props.autoFocusElement,
-	returnFocusOnDeactivate: props.returnFocusOnDeactivate
-}));
+useFocusTrap(focusTrapContainer, () => {
+	const options = {
+		autoFocusElement: props.autoFocusElement,
+		returnFocusOnDeactivate: props.returnFocusOnDeactivate
+	};
+	return isTruthyProp(props.autoFocusElement) ? options : {
+		...options,
+		initialFocus: false
+	};
+});
 useOutsideClick(wrapperRef, {
 	allowList: [triggerRef, wrapperRef],
-	enabled: () => {
-		return isVisible.value && allowOutsideClick.value;
-	},
+	enabled: () => isVisible.value,
 	onTrigger: (ev) => {
 		emits("outside-click", ev);
-		if (allowOutsideClick.value) {
+		if (!isManual.value && props.closeOnOutsideClick) {
 			handlePopoverHide();
 		}
 	}
@@ -361,7 +385,7 @@ async function updatePosition() {
 		middleware: computePositionMiddleware.value
 	});
 	localPosition.value = placement;
-	if (middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped) {
+	if (!isManual.value && (middlewareData.hide?.referenceHidden || middlewareData.hide?.escaped)) {
 		handlePopoverHide(true);
 		return;
 	}
@@ -378,7 +402,6 @@ async function updatePosition() {
 		});
 	}
 }
-const throttledUpdatePosition = throttleByRaf(updatePosition);
 async function handlePopoverShow() {
 	if (showPopoverTimer || props.disabled) {
 		return;
@@ -399,7 +422,9 @@ async function handlePopoverShow() {
 }
 function handlePopoverEscape(ev) {
 	emits("escape", ev);
-	handlePopoverHide();
+	if (!isManual.value) {
+		handlePopoverHide();
+	}
 }
 async function handlePopoverHide(immediate = false) {
 	if (hidePopoverTimer) {
@@ -577,6 +602,7 @@ defineExpose({
 
     <POverlay
       :model-value="isVisible"
+      :z-index="overlayZIndex"
       :show-overlay="adaptive"
       :close-on-press-escape="closeOnPressEscape"
       :lock-scroll-on-visible="lockScrollOnVisible"
@@ -586,14 +612,16 @@ defineExpose({
         v-if="isRender"
         ref="wrapperRef"
         tabindex="-1"
+        role="dialog"
+        aria-modal="true"
         :data-visible="isVisible"
         :data-adaptive="adaptive"
         :data-position="localPosition"
         :data-interactive="interactive"
-        :data-multiple-triggers="hasMultipleTriggers"
         :class="wrapperClass"
         :style="wrapperStyle"
-        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute -top-full -left-full isolate z-(--popover-index) flex max-h-full max-w-full will-change-transform outline-none data-[interactive=false]:pointer-events-none data-[multiple-triggers=true]:transition-[left,top] data-[visible=false]:pointer-events-none data-[visible=false]:transition-none! motion-reduce:data-[visible=false]:hidden"
+        :aria-labelledby="ariaLabelledby"
+        class="pxd-popover--wrapper sm:max-w-(--popover-max-width) absolute -top-full -left-full isolate z-(--popover-index) flex max-h-full max-w-full will-change-transform outline-none data-[interactive=false]:pointer-events-none data-[visible=false]:pointer-events-none data-[visible=false]:transition-none! motion-reduce:data-[visible=false]:hidden"
         @keydown="onWrapperKeydown"
         @pointerenter="onWrapperPointerEnter"
         @pointerleave="onWrapperPointerLeave"
@@ -619,7 +647,7 @@ defineExpose({
           <div
             v-if="showArrow"
             ref="arrowRef"
-            class="pxd-popover--arrow pointer-events-none absolute z-1 will-change-[left,top]"
+            class="pxd-popover--arrow pointer-events-none absolute z-1"
           >
             <PPopoverArrow
               fill="var(--popover-arrow-color,transparent)"
@@ -634,5 +662,5 @@ defineExpose({
 </template>
 
 <style>
-.pxd-popover--wrapper{--popover-padding:calc(var(--popover-offset, 8)*1px)}.pxd-popover--wrapper .pxd-popover--content.variant-invert+.pxd-popover--arrow{--popover-arrow-border:var(--color-gray-300)}.pxd-popover--wrapper[data-position^=top][data-adaptive=false]{padding-bottom:var(--popover-padding)}.pxd-popover--wrapper[data-position^=top] .pxd-popover--arrow{bottom:-6px}.pxd-popover--wrapper[data-position^=bottom][data-adaptive=false]{padding-top:var(--popover-padding)}.pxd-popover--wrapper[data-position^=bottom] .pxd-popover--arrow{top:-6px}.pxd-popover--wrapper[data-position^=left][data-adaptive=false]{padding-right:var(--popover-padding)}.pxd-popover--wrapper[data-position^=left] .pxd-popover--arrow{right:-6px}.pxd-popover--wrapper[data-position^=right][data-adaptive=false]{padding-left:var(--popover-padding)}.pxd-popover--wrapper[data-position^=right] .pxd-popover--arrow{left:-6px}.pxd-popover--container{max-height:min(800px,80vh);max-height:min(800px,80dvh);transition-property:opacity,transform}[data-visible=true] .pxd-popover--container{opacity:1;pointer-events:auto}[data-visible=false] .pxd-popover--container[data-transition-type=fade-scale]{opacity:0;transform:scale(var(--popover-scale));transition-duration:var(--faster-transition-duration)}[data-visible=false] .pxd-popover--container[data-transition-type=fade-slide]{transform:translateY(100%);transition-duration:var(--faster-transition-duration)}[data-position=top] .pxd-popover--container{transform-origin:center bottom}[data-position=top-start] .pxd-popover--container{transform-origin:left bottom}[data-position=top-end] .pxd-popover--container{transform-origin:right bottom}[data-position=bottom] .pxd-popover--container{transform-origin:center top}[data-position=bottom-start] .pxd-popover--container{transform-origin:left top}[data-position=bottom-end] .pxd-popover--container{transform-origin:right top}[data-position=left] .pxd-popover--container{transform-origin:right center}[data-position=left-start] .pxd-popover--container{transform-origin:right top}[data-position=left-end] .pxd-popover--container{transform-origin:right bottom}[data-position=right] .pxd-popover--container{transform-origin:left center}[data-position=right-start] .pxd-popover--container{transform-origin:left top}[data-position=right-end] .pxd-popover--container{transform-origin:left bottom}
+.pxd-popover--wrapper{--popover-padding:calc(var(--popover-offset, 8)*1px);--popover-origin:center}.pxd-popover--wrapper[data-position=top]{--popover-origin:center bottom}.pxd-popover--wrapper[data-position=top-start]{--popover-origin:left bottom}.pxd-popover--wrapper[data-position=top-end]{--popover-origin:right bottom}.pxd-popover--wrapper[data-position=bottom]{--popover-origin:center top}.pxd-popover--wrapper[data-position=bottom-start]{--popover-origin:left top}.pxd-popover--wrapper[data-position=bottom-end]{--popover-origin:right top}.pxd-popover--wrapper[data-position=left]{--popover-origin:right center}.pxd-popover--wrapper[data-position=left-start]{--popover-origin:right top}.pxd-popover--wrapper[data-position=left-end]{--popover-origin:right bottom}.pxd-popover--wrapper[data-position=right]{--popover-origin:left center}.pxd-popover--wrapper[data-position=right-start]{--popover-origin:left top}.pxd-popover--wrapper[data-position=right-end]{--popover-origin:left bottom}.pxd-popover--wrapper[data-position^=top][data-adaptive=false]{padding-bottom:var(--popover-padding)}.pxd-popover--wrapper[data-position^=top] .pxd-popover--arrow{bottom:-6px}.pxd-popover--wrapper[data-position^=bottom][data-adaptive=false]{padding-top:var(--popover-padding)}.pxd-popover--wrapper[data-position^=bottom] .pxd-popover--arrow{top:-6px}.pxd-popover--wrapper[data-position^=left][data-adaptive=false]{padding-right:var(--popover-padding)}.pxd-popover--wrapper[data-position^=left] .pxd-popover--arrow{right:-6px}.pxd-popover--wrapper[data-position^=right][data-adaptive=false]{padding-left:var(--popover-padding)}.pxd-popover--wrapper[data-position^=right] .pxd-popover--arrow{left:-6px}.pxd-popover--wrapper .pxd-popover--content.variant-invert+.pxd-popover--arrow{--popover-arrow-border:var(--color-gray-300)}.pxd-popover--wrapper .pxd-popover--container{max-height:min(800px,80vh);max-height:min(800px,80dvh);transform-origin:var(--popover-origin);transition-property:opacity,transform}.pxd-popover--wrapper[data-visible=true] .pxd-popover--container{opacity:1;pointer-events:auto}.pxd-popover--wrapper[data-visible=false] .pxd-popover--container[data-transition-type=fade-scale]{opacity:0;transform:scale(var(--popover-scale));transition-duration:var(--faster-transition-duration)}.pxd-popover--wrapper[data-visible=false] .pxd-popover--container[data-transition-type=fade-slide]{transform:translateY(100%);transition-duration:var(--faster-transition-duration)}
 </style>