pxd 0.0.64 → 0.1.3

package/README.md

@@ -1,22 +1,33 @@
 # PXD
 
-A Vue 2.7 & 3.2 universal component library. Built-in light/dark theme. PC & mobile ready. Animation-free mode supported.
+A universal UI component library: one codebase for Vue 2.7+ & Vue 3.2+. Built-in light/dark theme, PC & mobile ready, animation-free mode supported.
 
-[简体中文](README-CN.md) | [Online Preview](https://pxd-ui.netlify.app/)
+[简体中文](README-CN.md) | [Online Preview](https://pxd.libondev.cn/)
 
 
 > [!WARNING]
 > The project is under active development and is not ready for production.
 
+## Requirements
+
+| Vue version | Extra setup |
+| --- | --- |
+| 2.7.x | `unplugin-vue-define-options@1.5.5+` |
+| 3.2.x | `unplugin-vue-define-options@3.1.2+` |
+| >=3.3 | None |
+
+Components declare their options through `defineOptions()`, a macro that only landed in Vue 3.3, so Vue 2.7 and Vue 3.2 need the transform plugin. See [Installation](https://pxd.libondev.cn/guide/installation) for the setup.
+
 ## Features
 
-- Universal: One codebase for Vue 2.7+ and Vue 3.2+
-- Responsive: Seamlessly works on both PC and mobile devices
-- Built-in light & dark theme, no extra configuration needed
-- Motion-safe: Supports fully disabling all animations
-- Written in TypeScript with full type definitions
-- Vue 3 Composition API with `<script setup>`
-- Complete tree-shaking support
+- Universal: One codebase for Vue 2.7+ and Vue 3.2+, no `vue-demi` and no duplicated source
+- Theming: Light & dark themes as plain CSS variables, switching is a single class toggle
+- Motion-safe: Turn off every animation with `--duration: 0`, or follow `prefers-reduced-motion`
+- Responsive: Popovers become bottom sheets on small screens, with a built-in swipe gesture engine
+- AI-ready: Bubble, Reasoning, ToolCall, Mention, CommandMenu and StickToBottom for chat UIs
+- Lean: Only 7 runtime dependencies, ESM-only, full tree-shaking
+- Accessible: Focus trap with nested-dialog coordination, keyboard navigation and ARIA roles
+- TypeScript: Full type definitions, resolver for auto imports and Volar global component types
 - Inspired by the [Geist Design System](https://vercel.com/geist/introduction)
 
 ## Contribution
@@ -53,7 +64,7 @@ pnpm build
 
 ### Component Naming Rules
 
-- Components that can be used independently do not need to add -group/-item suffix, such as: `Checkbox`, `Radio`, `Toggle`, `ToggleButton`
+- Components that can be used independently do not need to add -group/-item suffix, such as: `Checkbox`, `Avatar`, `Toggle`, `ToggleButton`
 - Components that are used to manage a group of sub-components need to add -group suffix, such as: `CheckboxGroup`, `RadioGroup`, `ToggleGroup`, `ToggleButtonGroup`
 - Components that can only be used as a sub-component of another component need to add -item suffix, such as: `ListItem`, `GridItem`, `MessageItem`
 

package/dist/components/_internal/calendar-day.d.vue.ts

@@ -0,0 +1,33 @@
+import type { CalendarDay } from '../calendar/types';
+type __VLS_Props = {
+    day: CalendarDay;
+    selected: boolean;
+    compact: boolean;
+};
+declare var __VLS_1: {
+    isSelected: boolean;
+    key: string;
+    timestamp: number;
+    year: number;
+    month: number;
+    date: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (day: CalendarDay) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((day: CalendarDay) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/_internal/calendar-day.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { createTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+defineOptions({
+	name: "PCalendarDay",
+	inheritAttrs: false
+});
+const props = defineProps({
+	day: {
+		type: Object,
+		required: true
+	},
+	selected: {
+		type: Boolean,
+		required: true
+	},
+	compact: {
+		type: Boolean,
+		required: true
+	}
+});
+const emits = defineEmits(["change"]);
+const cellClasses = createTailwindVariant({
+	base: "pxd-calendar--grid-cell shrink-0 self-focus-ring outline-none motion-safe:transition-colors",
+	variants: {
+		compact: {
+			true: "min-h-8 sm:text-sm flex aspect-square items-center justify-center justify-self-center rounded-md",
+			false: "min-h-14 p-2 border-r border-b text-left"
+		},
+		selected: {
+			true: "bg-primary text-primary-foreground",
+			false: "hover:bg-background-hover active:bg-background-active"
+		},
+		disabled: {
+			true: "cursor-not-allowed",
+			false: "cursor-pointer"
+		}
+	}
+});
+const dateClasses = createTailwindVariant({
+	base: "min-w-8 min-h-8 inline-flex items-center justify-center rounded-md",
+	variants: {
+		today: { true: "bg-background-active" },
+		outsideMonth: { true: "text-foreground-secondary opacity-60" },
+		disabled: { true: "opacity-35" }
+	}
+});
+function selectDate() {
+	if (props.day.isDisabled) {
+		return;
+	}
+	emits("change", props.day);
+}
+</script>
+
+<template>
+  <button
+    data-calendar-day
+    type="button"
+    role="gridcell"
+    :class="
+  cellClasses({
+    compact,
+    selected,
+    disabled: day.isDisabled
+  })
+"
+    :aria-current="day.isToday ? 'date' : void 0"
+    :aria-selected="selected"
+    :disabled="day.isDisabled"
+    v-bind="$attrs"
+    @click="selectDate"
+  >
+    <span
+      :class="
+  dateClasses({
+    today: day.isToday && !selected,
+    outsideMonth: !day.isCurrentMonth && !selected,
+    disabled: day.isDisabled
+  })
+"
+    >
+      <slot v-bind="day" :is-selected="selected">{{ day.date }}</slot>
+    </span>
+  </button>
+</template>

package/dist/components/_internal/dismiss-container.d.vue.ts

@@ -1,4 +1,4 @@
-import type { ComponentPosition } from '../../types/shared';
+import type { ComponentPosition } from '../../types/shared/props';
 interface Props {
     disabled?: boolean;
     position?: ComponentPosition;

package/dist/components/_internal/dismiss-container.vue

@@ -1,83 +1,93 @@
 <script setup>
 import { shallowRef, computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useSwipeGesture } from "../../composables/use-swipe-gesture";
-import { caf, raf } from "../../utils/event";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useSwipeGesture } from "../../composables/_internal/use-swipe-gesture.js";
+import { caf, raf } from "../../utils/event.js";
 defineOptions({
-  name: "PDismissContainer",
-  inheritAttrs: false
+	name: "PDismissContainer",
+	inheritAttrs: false
 });
 const props = defineProps({
-  disabled: { type: Boolean, required: false, default: false },
-  position: { type: null, required: false, default: "bottom" },
-  modelValue: { type: Boolean, required: false }
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	position: {
+		type: null,
+		required: false,
+		default: "bottom"
+	},
+	modelValue: {
+		type: Boolean,
+		required: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const modelValue = useModelValue(props, emits);
+const dampingFactor = 9;
+let maxSwipedDamped = 0;
+let hasDraggedInDismissDirection = false;
+let releaseAnimationId = 0;
 const containerRef = shallowRef();
 const gestureMoveOffset = shallowRef(0);
 const isHorizontal = computed(() => ["left", "right"].find((d) => props.position.startsWith(d)));
-const gestureDirection = computed(() => isHorizontal.value ? "horizontal" : "vertical");
+const gestureAxis = computed(() => isHorizontal.value ? "horizontal" : "vertical");
 const computedStyle = computed(() => {
-  return {
-    transform: gestureMoveOffset.value ? `translate${isHorizontal.value ? "X" : "Y"}(${gestureMoveOffset.value}px) !important` : ""
-  };
+	return { transform: gestureMoveOffset.value ? `translate${isHorizontal.value ? "X" : "Y"}(${gestureMoveOffset.value}px) !important` : "" };
 });
-const dampingFactor = 9;
-let maxSwipedDamped = 0;
-let hasDraggedInDismissDirection = false;
-let releaseAnimationId = 0;
-function animateRelease(from, decayRate = 0.88) {
-  caf(releaseAnimationId);
-  const step = () => {
-    const next = from * decayRate;
-    if (Math.abs(next) < 0.5) {
-      gestureMoveOffset.value = 0;
-      return;
-    }
-    from = next;
-    gestureMoveOffset.value = from;
-    releaseAnimationId = raf(step);
-  };
-  releaseAnimationId = raf(step);
-}
+const modelValue = useModelValue(props, emits);
 useSwipeGesture(containerRef, {
-  handleSelector: ".pxd-dismiss-container--handle",
-  swipeThreshold: 0,
-  disabled: () => props.disabled,
-  direction: gestureDirection,
-  onPress: ({ size }) => {
-    caf(releaseAnimationId);
-    maxSwipedDamped = size / dampingFactor;
-    hasDraggedInDismissDirection = false;
-    gestureMoveOffset.value = 0;
-  },
-  onFollow: ({ displacement }) => {
-    const pos = props.position;
-    const dismissDirection = pos.startsWith("bottom") || pos.startsWith("right");
-    const isDismissDirection = dismissDirection ? displacement > 0 : displacement < 0;
-    if (isDismissDirection) {
-      hasDraggedInDismissDirection = true;
-      gestureMoveOffset.value = displacement;
-    } else if (hasDraggedInDismissDirection) {
-      const rubberBand = maxSwipedDamped * Math.sign(displacement);
-      const damping = 1 - Math.exp(-Math.abs(displacement) / maxSwipedDamped);
-      gestureMoveOffset.value = rubberBand * damping;
-    }
-  },
-  onRelease: async ({ swiped, direction }) => {
-    if (swiped && direction === props.position) {
-      modelValue.value = false;
-      gestureMoveOffset.value = 0;
-      return;
-    }
-    animateRelease(gestureMoveOffset.value);
-  }
+	handleSelector: ".pxd-dismiss-container--handle",
+	swipeThreshold: 0,
+	disabled: () => props.disabled,
+	axis: gestureAxis,
+	onPress: ({ size }) => {
+		caf(releaseAnimationId);
+		maxSwipedDamped = size / dampingFactor;
+		hasDraggedInDismissDirection = false;
+		gestureMoveOffset.value = 0;
+	},
+	onFollow: ({ displacement }) => {
+		const pos = props.position;
+		const dismissDirection = pos.startsWith("bottom") || pos.startsWith("right");
+		const isDismissDirection = dismissDirection ? displacement > 0 : displacement < 0;
+		if (isDismissDirection) {
+			hasDraggedInDismissDirection = true;
+			gestureMoveOffset.value = displacement;
+		} else if (hasDraggedInDismissDirection) {
+			const rubberBand = maxSwipedDamped * Math.sign(displacement);
+			const damping = 1 - Math.exp(-Math.abs(displacement) / maxSwipedDamped);
+			gestureMoveOffset.value = rubberBand * damping;
+		}
+	},
+	onRelease: async ({ swiped, direction }) => {
+		if (swiped && direction === props.position) {
+			modelValue.value = false;
+			gestureMoveOffset.value = 0;
+			return;
+		}
+		animateRelease(gestureMoveOffset.value);
+	}
 });
+function animateRelease(from, decayRate = .88) {
+	caf(releaseAnimationId);
+	const step = () => {
+		const next = from * decayRate;
+		if (Math.abs(next) < .5) {
+			gestureMoveOffset.value = 0;
+			return;
+		}
+		from = next;
+		gestureMoveOffset.value = from;
+		releaseAnimationId = raf(step);
+	};
+	releaseAnimationId = raf(step);
+}
 </script>
 
 <template>
   <div
+    data-dismiss-container
     ref="containerRef"
     class="pxd-dismiss-container relative"
     :data-disabled="disabled"
@@ -94,69 +104,6 @@ useSwipeGesture(containerRef, {
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-dismiss-container {
-  --dismiss-handle-x: 3rem;
-  --dismiss-handle-y: 0.4rem;
-
-  &::after {
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background: #fff;
-    z-index: -1;
-  }
-
-  &[data-position^='top'][data-disabled='false'] {
-    padding-bottom: 1rem;
-
-    &::after {
-      top: -50%;
-    }
-  }
-  &[data-position^='bottom'][data-disabled='false'] {
-    padding-top: 1rem;
-
-    &::after {
-      bottom: -50%;
-    }
-  }
-  &[data-position^='left'][data-disabled='false'] {
-    padding-right: 1rem;
-
-    &::after {
-      left: -50%;
-    }
-  }
-  &[data-position^='right'][data-disabled='false'] {
-    padding-left: 1rem;
-
-    &::after {
-      right: -50%;
-    }
-  }
-
-  &[data-position^='top'],
-  &[data-position^='bottom'] {
-    .pxd-dismiss-container--handle {
-      left: 50%;
-      top: 0.3rem;
-      transform: translateX(-50%);
-      width: var(--dismiss-handle-x);
-      height: var(--dismiss-handle-y);
-    }
-  }
-
-  &[data-position^='left'],
-  &[data-position^='right'] {
-    .pxd-dismiss-container--handle {
-      left: 0.3rem;
-      top: 50%;
-      transform: translateY(-50%);
-      width: var(--dismiss-handle-y);
-      height: var(--dismiss-handle-x);
-    }
-  }
-}
+<style>
+.pxd-dismiss-container{--dismiss-handle-x:3rem;--dismiss-handle-y:0.4rem}.pxd-dismiss-container:after{background:#fff;content:"";height:100%;position:absolute;width:100%;z-index:-1}.pxd-dismiss-container[data-position^=top][data-disabled=false]{padding-bottom:1rem}.pxd-dismiss-container[data-position^=top][data-disabled=false]:after{top:-50%}.pxd-dismiss-container[data-position^=bottom][data-disabled=false]{padding-top:1rem}.pxd-dismiss-container[data-position^=bottom][data-disabled=false]:after{bottom:-50%}.pxd-dismiss-container[data-position^=left][data-disabled=false]{padding-right:1rem}.pxd-dismiss-container[data-position^=left][data-disabled=false]:after{left:-50%}.pxd-dismiss-container[data-position^=right][data-disabled=false]{padding-left:1rem}.pxd-dismiss-container[data-position^=right][data-disabled=false]:after{right:-50%}.pxd-dismiss-container[data-position^=bottom] .pxd-dismiss-container--handle,.pxd-dismiss-container[data-position^=top] .pxd-dismiss-container--handle{height:var(--dismiss-handle-y);left:50%;top:.3rem;transform:translateX(-50%);width:var(--dismiss-handle-x)}.pxd-dismiss-container[data-position^=left] .pxd-dismiss-container--handle,.pxd-dismiss-container[data-position^=right] .pxd-dismiss-container--handle{height:var(--dismiss-handle-x);left:.3rem;top:50%;transform:translateY(-50%);width:var(--dismiss-handle-y)}
 </style>

package/dist/components/_internal/fragment-container.vue

@@ -1,12 +1,12 @@
 <script setup>
 defineOptions({
-  name: "PFragmentContainer",
-  inheritAttrs: false
+	name: "PFragmentContainer",
+	inheritAttrs: false
 });
 </script>
 
 <template>
-  <div class="pxd-fragment-container" v-bind="$attrs">
+  <div data-fragment-container class="pxd-fragment-container" v-bind="$attrs">
     <slot />
   </div>
 </template>

package/dist/components/_internal/loading-mask.d.vue.ts

@@ -0,0 +1,8 @@
+interface LoadingMaskProps {
+    text?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<LoadingMaskProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoadingMaskProps> & Readonly<{}>, {
+    text: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/_internal/loading-mask.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useLockScroll } from "../../composables/_internal/use-lock-scroll.js";
+import PSpinner from "../spinner/index.vue";
+defineOptions({
+	name: "PLoadingMask",
+	inheritAttrs: false
+});
+const props = defineProps({ text: {
+	type: String,
+	required: false,
+	default: "Loading..."
+} });
+const maskRef = shallowRef();
+const { lockScroll, unlockScroll } = useLockScroll(() => maskRef.value?.parentElement);
+onMounted(lockScroll);
+onBeforeUnmount(unlockScroll);
+</script>
+
+<template>
+  <Transition name="pxd-transition--fade" mode="out-in" appear>
+    <div
+      ref="maskRef"
+      aria-hidden="true"
+      data-loading-mask
+      class="pxd-loading-mask inset-0 gap-2 backdrop-blur-md absolute flex items-center justify-center text-foreground-secondary"
+      v-bind="$attrs"
+    >
+      <PSpinner class="text-base" />
+      <span class="text-sm">{{ text }}</span>
+    </div>
+  </Transition>
+</template>

package/dist/components/_internal/mention-editor.d.vue.ts

@@ -0,0 +1,42 @@
+import type { ComponentSize } from '../../types/shared/props';
+type __VLS_Props = {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: ComponentSize;
+    triggers?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    insertMention: (key: string, label: string) => boolean;
+    restoreCaret: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: string) => any;
+    "update:modelValue": (args_0: string) => any;
+    submit: (args_0: string) => any;
+    trigger: (args_0: string) => any;
+    "mention-click": (args_0: {
+        key: string;
+        label: string;
+        trigger: string;
+        event: MouseEvent;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((args_0: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+    onSubmit?: ((args_0: string) => any) | undefined;
+    onTrigger?: ((args_0: string) => any) | undefined;
+    "onMention-click"?: ((args_0: {
+        key: string;
+        label: string;
+        trigger: string;
+        event: MouseEvent;
+    }) => any) | undefined;
+}>, {
+    size: ComponentSize;
+    disabled: boolean;
+    modelValue: string;
+    placeholder: string;
+    triggers: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/_internal/mention-editor.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed, onMounted, shallowRef } from "vue";
+import { useMentionEditor } from "../../composables/_internal/use-mention-editor.js";
+import { BASIC_MIN_HEIGHTS } from "../../constants/size.js";
+import { DEFAULT_TRIGGER } from "../../utils/_internal/mention-html.js";
+defineOptions({
+	name: "PMentionEditor",
+	inheritAttrs: false
+});
+const props = defineProps({
+	modelValue: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	placeholder: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	size: {
+		type: String,
+		required: false,
+		default: "md"
+	},
+	triggers: {
+		type: Array,
+		required: false,
+		default: () => [DEFAULT_TRIGGER]
+	}
+});
+const emits = defineEmits([
+	"trigger",
+	"change",
+	"submit",
+	"update:modelValue",
+	"mention-click"
+]);
+const editorRef = shallowRef();
+const inputHeightClasses = computed(() => {
+	return {
+		sm: `${BASIC_MIN_HEIGHTS.sm} py-1`,
+		md: `${BASIC_MIN_HEIGHTS.md} py-[.46875rem]`,
+		lg: `${BASIC_MIN_HEIGHTS.lg} py-2.75`
+	};
+});
+const { isEmpty, isComposing, insertMention, restoreCaret, onBeforeInput, onInput, onKeydown, onPaste, onClick, onCopyOrCut, onCompositionStart, onCompositionEnd, mount } = useMentionEditor({
+	editorRef,
+	getModelValue: () => props.modelValue ?? "",
+	getTriggers: () => props.triggers,
+	isDisabled: () => props.disabled,
+	onUpdate: (html) => {
+		emits("update:modelValue", html);
+		emits("change", html);
+	},
+	onSubmit: (html) => emits("submit", html),
+	onTrigger: (trigger) => emits("trigger", trigger),
+	onMentionClick: (payload) => emits("mention-click", payload)
+});
+onMounted(() => {
+	mount();
+});
+defineExpose({
+	insertMention,
+	restoreCaret
+});
+</script>
+
+<template>
+  <div
+    data-mention-editor
+    class="pxd-mention relative w-full max-w-full rounded-md bg-background-100"
+    v-bind="$attrs"
+  >
+    <span
+      v-if="isEmpty && !isComposing && placeholder"
+      class="pxd-mention-editor--placeholder text-sm inset-0 px-3 py-2 pointer-events-none absolute text-gray-600 select-none"
+      aria-hidden="true"
+    >
+      {{ placeholder }}
+    </span>
+
+    <div
+      ref="editorRef"
+      class="pxd-mention-editor pxd-input--border px-3 text-sm relative w-full max-w-full appearance-none rounded-inherit bg-transparent font-inherit break-all text-foreground outline-none motion-safe:transition-appearance"
+      :class="inputHeightClasses[size]"
+      role="textbox"
+      aria-multiline="true"
+      :contenteditable="disabled ? 'false' : 'true'"
+      :data-empty="isEmpty"
+      :data-disabled="disabled"
+      :aria-placeholder="placeholder"
+      :aria-disabled="disabled"
+      @beforeinput="onBeforeInput"
+      @input="onInput"
+      @keydown="onKeydown"
+      @paste="onPaste"
+      @click="onClick"
+      @copy="onCopyOrCut"
+      @cut="onCopyOrCut"
+      @compositionstart="onCompositionStart"
+      @compositionend="onCompositionEnd"
+    />
+  </div>
+</template>
+
+<style>
+.pxd-mention-editor[data-disabled=true]{color:var(--color-gray-700);cursor:not-allowed}.pxd-mention--chip{color:var(--color-blue-900);cursor:pointer;display:inline;margin-inline-end:.25rem}.pxd-mention--chip:hover{background:var(--color-blue-200)}
+</style>

package/dist/components/_internal/popover-arrow.d.vue.ts

@@ -1,4 +1,4 @@
-import type { ComponentPosition } from '../../types/shared';
+import type { ComponentPosition } from '../../types/shared/props';
 interface Props {
     position?: ComponentPosition;
 }

package/dist/components/_internal/popover-arrow.vue

@@ -1,20 +1,23 @@
 <script setup>
 defineOptions({
-  name: "PPopoverArrow",
-  inheritAttrs: false
-});
-defineProps({
-  position: { type: null, required: false, default: "bottom" }
+	name: "PPopoverArrow",
+	inheritAttrs: false
 });
+defineProps({ position: {
+	type: null,
+	required: false,
+	default: "bottom"
+} });
 </script>
 
 <template>
   <svg
+    data-popover-arrow
     width="14"
     height="7"
     viewBox="0 0 14 7"
     xmlns="http://www.w3.org/2000/svg"
-    class="pxd-popover-arrow"
+    class="pxd-popover-arrow motion-safe:transition-[fill]"
     :data-position="position"
     v-bind="$attrs"
   >