pxd 0.1.2 → 0.1.3

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

@@ -1,5 +1,24 @@
 <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: {
@@ -25,25 +44,6 @@ const dateClasses = createTailwindVariant({
 		disabled: { true: "opacity-35" }
 	}
 });
-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"]);
 function selectDate() {
 	if (props.day.isDisabled) {
 		return;

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

@@ -24,7 +24,10 @@ const props = defineProps({
 	}
 });
 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)));
@@ -32,24 +35,7 @@ const gestureAxis = computed(() => isHorizontal.value ? "horizontal" : "vertical
 const computedStyle = computed(() => {
 	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 = .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);
-}
+const modelValue = useModelValue(props, emits);
 useSwipeGesture(containerRef, {
 	handleSelector: ".pxd-dismiss-container--handle",
 	swipeThreshold: 0,
@@ -83,6 +69,20 @@ useSwipeGesture(containerRef, {
 		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>

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

@@ -1,4 +1,6 @@
 <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",
@@ -9,13 +11,19 @@ const props = defineProps({ text: {
 	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-sm absolute flex items-center justify-center text-foreground-secondary"
+      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" />

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

@@ -33,9 +33,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     }) => any) | undefined;
 }>, {
     size: ComponentSize;
-    placeholder: string;
     disabled: boolean;
     modelValue: string;
+    placeholder: string;
     triggers: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -2,7 +2,7 @@
 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/mention-html.js";
+import { DEFAULT_TRIGGER } from "../../utils/_internal/mention-html.js";
 defineOptions({
 	name: "PMentionEditor",
 	inheritAttrs: false

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

@@ -17,7 +17,7 @@ defineProps({ position: {
     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"
   >

package/dist/components/{steps → _internal}/step-item.d.vue.ts

@@ -1,4 +1,4 @@
-import type { StepsOption, StepsStatus } from './types';
+import type { StepsOption, StepsStatus } from '../steps/types';
 type __VLS_Props = {
     clickable?: boolean;
     index: number;

package/dist/components/{steps → _internal}/step-item.vue

@@ -82,5 +82,5 @@ function onClick() {
 </template>
 
 <style>
-.pxd-steps[data-direction=horizontal] .pxd-steps-item:not(:last-child):after{background-color:var(--color-border);content:"";height:1px;left:calc(50% + var(--steps-indicator-size)/2 + var(--steps-gap));position:absolute;right:calc(-50% + var(--steps-indicator-size)/2 + var(--steps-gap));top:calc(var(--steps-indicator-size)/2)}.pxd-steps[data-direction=horizontal] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child){padding-bottom:var(--steps-gap)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child):after{background-color:var(--color-border);bottom:calc(var(--steps-gap)/2);content:"";left:calc(var(--steps-indicator-size)/2 + var(--spacing));position:absolute;top:calc(var(--steps-indicator-size) + var(--steps-gap)/2);width:1px}.pxd-steps[data-direction=vertical] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}
+.pxd-steps[data-direction=horizontal] .pxd-steps-item:not(:last-child):after{border-bottom:1px solid var(--color-border);content:"";left:calc(50% + var(--steps-indicator-size)/2 + var(--steps-gap));position:absolute;right:calc(-50% + var(--steps-indicator-size)/2 + var(--steps-gap));top:calc(var(--steps-indicator-size)/2)}.pxd-steps[data-direction=horizontal] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child){padding-bottom:var(--steps-gap)}.pxd-steps[data-direction=vertical] .pxd-steps-item:not(:last-child):after{border-left:1px solid var(--color-border);bottom:calc(var(--steps-gap)/2);content:"";left:calc(var(--steps-indicator-size)/2 + var(--spacing));position:absolute;top:calc(var(--steps-indicator-size) + var(--steps-gap)/2)}.pxd-steps[data-direction=vertical] .pxd-steps-item[data-status=finish]:after{background-color:var(--color-primary)}
 </style>

package/dist/components/_internal/tree-node.d.vue.ts

@@ -1,5 +1,5 @@
-import type { ComponentClass, ComponentValue } from '../../types/shared';
-import type { TreeDropPosition, TreeOption } from '../tree/types';
+import type { ComponentClass, ComponentValue } from '../../types/shared/props';
+import type { TreeDropPosition, TreeHighlightPart, TreeOption } from '../tree/types';
 type __VLS_Props = {
     node: TreeOption;
     value: ComponentValue;
@@ -7,18 +7,18 @@ type __VLS_Props = {
     index: number;
     hasChildren: boolean;
     expanded: boolean;
+    loading: boolean;
     checked: boolean;
     indeterminate: boolean;
     active: boolean;
     multiple: boolean;
     disabled: boolean;
+    selectable: boolean;
     setSize: number;
     indent: number;
     id: string;
     highlightQuery: string;
-    showIcon: boolean;
     draggable: boolean;
-    dragHandle: boolean;
     dragging: boolean;
     dropPosition?: TreeDropPosition;
     itemClass?: ComponentClass;
@@ -26,40 +26,40 @@ type __VLS_Props = {
 declare var __VLS_1: {
     node: TreeOption;
     depth: number;
-}, __VLS_8: {
-    node: TreeOption;
-    depth: number;
+    loading: boolean;
     expanded: boolean;
-}, __VLS_25: {
+}, __VLS_23: {
     node: TreeOption;
     depth: number;
     expanded: boolean;
-}, __VLS_37: {
+    hasChildren: boolean;
+}, __VLS_25: {
     node: TreeOption;
     depth: number;
-}, __VLS_39: {
+    parts: TreeHighlightPart[] | undefined;
+    hasChildren: boolean;
+}, __VLS_28: {
     node: TreeOption;
+    hasChildren: boolean;
 };
 type __VLS_Slots = {} & {
-    'node-drag-handle'?: (props: typeof __VLS_1) => any;
-} & {
-    'node-switcher'?: (props: typeof __VLS_8) => any;
+    'node-switcher'?: (props: typeof __VLS_1) => any;
 } & {
-    'node-icon'?: (props: typeof __VLS_25) => any;
+    'node-icon'?: (props: typeof __VLS_23) => any;
 } & {
-    'node-content'?: (props: typeof __VLS_37) => any;
+    'node-content'?: (props: typeof __VLS_25) => any;
 } & {
-    'node-suffix'?: (props: typeof __VLS_39) => any;
+    'node-suffix'?: (props: typeof __VLS_28) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (value: ComponentValue) => any;
-    "row-click": (value: ComponentValue) => any;
-    check: (value: ComponentValue) => any;
+    check: (value: ComponentValue, event: MouseEvent) => any;
+    "row-click": (value: ComponentValue, event: MouseEvent) => any;
     "drag-pointerdown": (value: ComponentValue, event: PointerEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((value: ComponentValue) => any) | undefined;
-    "onRow-click"?: ((value: ComponentValue) => any) | undefined;
-    onCheck?: ((value: ComponentValue) => any) | undefined;
+    onCheck?: ((value: ComponentValue, event: MouseEvent) => any) | undefined;
+    "onRow-click"?: ((value: ComponentValue, event: MouseEvent) => any) | undefined;
     "onDrag-pointerdown"?: ((value: ComponentValue, event: PointerEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/_internal/tree-node.vue

@@ -1,10 +1,8 @@
 <script setup>
 import CheckIcon from "@gdsicon/vue/check";
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import FolderClosedIcon from "@gdsicon/vue/folder-closed";
-import FolderOpenIcon from "@gdsicon/vue/folder-open";
+import LoaderCircleIcon from "@gdsicon/vue/loader-circle";
 import MinusIcon from "@gdsicon/vue/minus";
-import MoreVerticalIcon from "@gdsicon/vue/more-vertical";
 import { computed } from "vue";
 defineOptions({
 	name: "PTreeNode",
@@ -35,6 +33,10 @@ const props = defineProps({
 		type: Boolean,
 		required: true
 	},
+	loading: {
+		type: Boolean,
+		required: true
+	},
 	checked: {
 		type: Boolean,
 		required: true
@@ -55,6 +57,10 @@ const props = defineProps({
 		type: Boolean,
 		required: true
 	},
+	selectable: {
+		type: Boolean,
+		required: true
+	},
 	setSize: {
 		type: Number,
 		required: true
@@ -71,18 +77,10 @@ const props = defineProps({
 		type: String,
 		required: true
 	},
-	showIcon: {
-		type: Boolean,
-		required: true
-	},
 	draggable: {
 		type: Boolean,
 		required: true
 	},
-	dragHandle: {
-		type: Boolean,
-		required: true
-	},
 	dragging: {
 		type: Boolean,
 		required: true
@@ -101,25 +99,20 @@ const props = defineProps({
 	}
 });
 const emits = defineEmits([
-	"row-click",
 	"check",
 	"toggle",
+	"row-click",
 	"drag-pointerdown"
 ]);
-function onPointerdown(event) {
-	// A handle owns the gesture on touch, where a vertical drag is indistinguishable from a scroll.
-	if (!props.draggable || props.dragHandle) {
-		return;
-	}
-	emits("drag-pointerdown", props.value, event);
-}
 const disabled = computed(() => props.disabled || props.node.disabled === true);
+const unavailable = computed(() => disabled.value || !props.selectable);
 const checkboxClass = computed(() => {
 	if (props.checked) {
-		return disabled.value ? "border-gray-500 bg-gray-500" : "border-primary bg-primary";
+		return unavailable.value ? "border-gray-500 bg-gray-500" : "border-primary bg-primary";
 	}
-	return disabled.value ? "border-gray-500 bg-gray-100" : "border-gray-alpha-400 bg-background-100";
+	return unavailable.value ? "border-gray-500 bg-gray-100 cursor-not-allowed" : "border-gray-alpha-400 bg-background-100";
 });
+const indentSize = computed(() => props.depth * props.indent + 8);
 const parts = computed(() => {
 	const query = props.highlightQuery;
 	if (!query) {
@@ -145,6 +138,12 @@ const parts = computed(() => {
 		}
 	].filter((part) => part.text);
 });
+function onPointerdown(event) {
+	if (!props.draggable) {
+		return;
+	}
+	emits("drag-pointerdown", props.value, event);
+}
 </script>
 
 <template>
@@ -163,12 +162,13 @@ const parts = computed(() => {
     :data-drop="dropPosition"
     :aria-level="depth + 1"
     :aria-expanded="hasChildren ? expanded : void 0"
+    :aria-busy="loading || void 0"
     :aria-selected="multiple ? void 0 : checked"
     :aria-checked="multiple ? indeterminate ? 'mixed' : checked : void 0"
     :aria-setsize="setSize"
     :aria-posinset="index + 1"
     :aria-disabled="disabled || void 0"
-    :style="{ paddingInlineStart: depth * indent + 8 + 'px' }"
+    :style="{ paddingInlineStart: indentSize + 'px', '--node-indent': indentSize + 'px' }"
     class="pxd-tree--node group/row min-h-8 py-1 pe-2 gap-1.5 text-sm relative flex w-full max-w-full cursor-pointer items-center rounded-md text-foreground outline-none select-none pointer-fine:hover:bg-gray-100"
     :class="[
   itemClass,
@@ -177,35 +177,33 @@ const parts = computed(() => {
     'z-1 ring-primary data-[active=true]:ring-1': active,
     'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-gray-500': disabled,
     'opacity-40': dragging,
-    'before:inset-x-0 before:h-0.5 before:absolute before:bg-primary': dropPosition === 'before' || dropPosition === 'after',
+    'bg-gray-300 ring-1 ring-primary': dropPosition === 'inside',
+    'before:end-0 before:absolute before:start-(--node-indent) before:border-t-2 before:bg-primary': dropPosition === 'before' || dropPosition === 'after',
     'before:-top-px': dropPosition === 'before',
-    'before:bottom-px': dropPosition === 'after'
+    'before:bottom-0': dropPosition === 'after'
   }
 ]"
     v-bind="$attrs"
-    @click="emits('row-click', value)"
+    @click="emits('row-click', value, $event)"
     @pointerdown="onPointerdown"
     @dragstart.prevent
   >
-    <span
-      v-if="dragHandle"
-      data-tree-drag-handle
-      class="pxd-tree--drag-handle size-4 me-0.5 inline-flex shrink-0 cursor-grab items-center justify-center opacity-0 group-hover/row:opacity-60 group-data-[dragging=true]/row:opacity-60 motion-safe:transition-opacity"
-      @pointerdown.stop="emits('drag-pointerdown', value, $event)"
-    >
-      <slot name="node-drag-handle" :node="node" :depth="depth">
-        <MoreVerticalIcon class="size-3" />
-      </slot>
-    </span>
-
     <span
       v-if="hasChildren"
       data-tree-switcher
       class="pxd-tree--switcher size-4 relative inline-flex shrink-0 items-center justify-center rounded-sm motion-safe:after:transition-colors"
       @click.stop="emits('toggle', value)"
     >
-      <slot name="node-switcher" :node="node" :depth="depth" :expanded="expanded">
+      <slot
+        name="node-switcher"
+        :node="node"
+        :depth="depth"
+        :loading="loading"
+        :expanded="expanded"
+      >
+        <LoaderCircleIcon v-if="loading" class="size-3 motion-safe:animate-spin" />
         <ChevronRightIcon
+          v-else
           class="size-3 motion-safe:transition-transform"
           :class="{ 'rotate-90': expanded }"
         />
@@ -216,9 +214,10 @@ const parts = computed(() => {
     <span
       v-if="multiple"
       aria-hidden="true"
+      :data-selectable="selectable"
       class="pxd-tree--checkbox size-4 p-0.5 inline-flex shrink-0 items-center justify-center overflow-hidden rounded-sm border text-primary-foreground"
       :class="checkboxClass"
-      @click.stop="emits('check', value)"
+      @click.stop="emits('check', value, $event)"
     >
       <CheckIcon v-if="checked" class="size-3" />
       <MinusIcon v-else-if="indeterminate" class="size-3" />
@@ -226,18 +225,27 @@ const parts = computed(() => {
     </span>
 
     <span
-      v-if="showIcon && $slots['node-icon']"
+      v-if="$slots['node-icon']"
       aria-hidden="true"
       class="pxd-tree--icon size-4 inline-flex shrink-0 items-center justify-center"
     >
-      <slot name="node-icon" :node="node" :depth="depth" :expanded="expanded">
-        <FolderOpenIcon v-if="expanded" class="size-4" />
-        <FolderClosedIcon v-else-if="hasChildren" class="size-4" />
-      </slot>
+      <slot
+        name="node-icon"
+        :node="node"
+        :depth="depth"
+        :expanded="expanded"
+        :has-children="hasChildren"
+      />
     </span>
 
     <span class="pxd-tree--content min-w-0 flex-1 truncate">
-      <slot name="node-content" :node="node" :depth="depth">
+      <slot
+        name="node-content"
+        :node="node"
+        :depth="depth"
+        :parts="parts"
+        :has-children="hasChildren"
+      >
         <template v-if="parts">
           <mark
             v-for="(part, partIndex) in parts"
@@ -251,7 +259,7 @@ const parts = computed(() => {
       </slot>
     </span>
 
-    <slot name="node-suffix" :node="node" />
+    <slot name="node-suffix" :node="node" :has-children="hasChildren" />
   </div>
 </template>
 

package/dist/components/active-graph/index.d.vue.ts

@@ -1,9 +1,9 @@
 import type { ActiveGraphProps, ActiveGraphTooltipInfo } from './types';
-declare var __VLS_7: {
+declare var __VLS_11: {
     data: ActiveGraphTooltipInfo;
 };
 type __VLS_Slots = {} & {
-    tooltip?: (props: typeof __VLS_7) => any;
+    tooltip?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ActiveGraphProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: string, args_1: MouseEvent) => any;

package/dist/components/approval-card/index.d.vue.ts

@@ -1,4 +1,4 @@
-import type { ComponentVariant } from '../../types/shared';
+import type { ComponentVariant } from '../../types/shared/props';
 import type { ApprovalCardProps, ApprovalCause, ApprovalResult, ApprovalStatus } from './types';
 declare function approve(reason?: string): void;
 declare function reject(reason?: string): void;

package/dist/components/approval-card/index.vue

@@ -5,6 +5,7 @@ import CrossCircleFillIcon from "@gdsicon/vue/cross-circle-fill";
 import TerminalIcon from "@gdsicon/vue/terminal";
 import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isCompositionKeydown } from "../../utils/event.js";
 import { isTruthyProp, toArray } from "../../utils/format.js";
 import PBadge from "../badge/index.vue";
 import PButton from "../button/index.vue";
@@ -64,16 +65,7 @@ const emits = defineEmits([
 	"approve",
 	"reject"
 ]);
-const configProvider = useConfigProvider();
-const internalStatus = shallowRef("pending");
-const remembered = shallowRef(false);
 let timerId;
-const status = computed(() => props.modelValue ?? internalStatus.value);
-const isPending = computed(() => status.value === "pending");
-const isDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading));
-const computedTitle = computed(() => props.title || configProvider.locale.approval.title);
-const computedStatusLabel = computed(() => configProvider.locale.approval[status.value]);
-const commandList = computed(() => toArray(props.command).filter(Boolean));
 const STATUS_ICON = {
 	pending: TerminalIcon,
 	approved: CheckCircleFillIcon,
@@ -98,9 +90,19 @@ const VARIANT_CLASS = {
 	warning: "border-amber-400 bg-amber-200 text-amber-900",
 	success: "border-green-400 bg-green-200 text-green-900"
 };
+const internalStatus = shallowRef("pending");
+const remembered = shallowRef(false);
+const timerKey = shallowRef(0);
+const status = computed(() => props.modelValue ?? internalStatus.value);
+const isPending = computed(() => status.value === "pending");
+const isDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading));
+const commandList = computed(() => toArray(props.command).filter(Boolean));
 const statusIcon = computed(() => STATUS_ICON[status.value]);
 const statusBadge = computed(() => STATUS_BADGE[status.value]);
 const iconClass = computed(() => isPending.value ? VARIANT_CLASS[props.variant] : STATUS_CLASS[status.value]);
+const configProvider = useConfigProvider();
+const computedTitle = computed(() => props.title || configProvider.locale.approval.title);
+const computedStatusLabel = computed(() => configProvider.locale.approval[status.value]);
 function clearTimer() {
 	if (timerId !== undefined) {
 		clearTimeout(timerId);
@@ -113,6 +115,7 @@ function startTimer() {
 	if (!isPending.value || !timeout) {
 		return;
 	}
+	timerKey.value++;
 	timerId = setTimeout(() => {
 		dismiss("timeout");
 	}, timeout);
@@ -154,10 +157,11 @@ function reset() {
 	emits("update:modelValue", "pending");
 	startTimer();
 }
-function onEscape() {
-	if (!props.closeOnPressEscape) {
+function onEscape(ev) {
+	if (!props.closeOnPressEscape || !isPending.value || isCompositionKeydown(ev)) {
 		return;
 	}
+	ev.preventDefault();
 	dismiss("escape");
 }
 watch(() => [status.value, props.timeout], startTimer, { immediate: true });
@@ -174,25 +178,38 @@ defineExpose({
 <template>
   <div
     data-approval-card
-    class="pxd-approval-card bg-background p-3 gap-2 flex w-full max-w-full flex-col rounded-xl border"
+    class="pxd-approval-card bg-background p-3 gap-2 relative flex w-full max-w-full flex-col overflow-hidden rounded-xl border"
     :data-status="status"
     :data-variant="variant"
     v-bind="$attrs"
     @keydown.esc="onEscape"
   >
+    <div
+      v-if="isPending && timeout"
+      :key="timerKey"
+      aria-hidden="true"
+      class="pxd-approval-card--progress pxd-countdown-progress inset-x-0 top-0 h-0.5 absolute rounded-full bg-current"
+      :style="{ animationDuration: `${timeout}ms` }"
+    />
+
     <div class="pxd-approval-card--header gap-2 flex items-center">
-      <div class="pxd-approval-card--icon p-1.5 shrink-0 rounded-md border" :class="iconClass">
+      <div
+        class="pxd-approval-card--icon size-8 flex shrink-0 items-center justify-center rounded-md border"
+        :class="iconClass"
+      >
         <Component :is="statusIcon" class="size-4" />
       </div>
 
       <div class="min-w-0 flex-1">
-        <div class="pxd-approval-card--title font-medium text-sm truncate text-foreground">
+        <div
+          class="pxd-approval-card--title font-medium text-sm leading-tight truncate text-foreground"
+        >
           {{ computedTitle }}
         </div>
 
         <div
           v-if="description"
-          class="pxd-approval-card--description text-sm truncate text-foreground-secondary"
+          class="pxd-approval-card--description text-sm truncate leading-none text-foreground-secondary"
         >
           {{ description }}
         </div>
@@ -222,11 +239,11 @@ defineExpose({
       </div>
 
       <div class="gap-2 ms-auto flex items-center">
-        <PButton :disabled="isDisabled" @click="reject()">
+        <PButton size="sm" :disabled="isDisabled" @click="reject()">
           {{ configProvider.locale.approval.reject }}
         </PButton>
 
-        <PButton variant="primary" :loading="loading" @click="approve()">
+        <PButton size="sm" variant="primary" :loading="loading" @click="approve()">
           {{ configProvider.locale.approval.approve }}
         </PButton>
       </div>

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentVariant } from '../../types/shared'
+import type { ComponentLabel, ComponentVariant } from '../../types/shared/props'
 
 export type ApprovalStatus = 'pending' | 'approved' | 'rejected' | 'dismissed'
 

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

@@ -9,12 +9,12 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<AvatarProps, {
     getLoadingStatus: typeof getLoadingStatus;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    load: (args_0: Event) => any;
     error: (args_0: Event) => any;
+    load: (args_0: Event) => any;
     loadstart: (args_0: Event) => any;
 }, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{
-    onLoad?: ((args_0: Event) => any) | undefined;
     onError?: ((args_0: Event) => any) | undefined;
+    onLoad?: ((args_0: Event) => any) | undefined;
     onLoadstart?: ((args_0: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;