pxd 0.0.60 → 0.0.62

package/dist/components/carousel-item/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { onBeforeUnmount, onMounted, computed, shallowRef } from "vue";
 import { useCarouselContext } from "../../contexts/carousel";
 import { getUniqueId } from "../../utils/uid";
 defineOptions({
@@ -7,30 +7,35 @@ defineOptions({
   inheritAttrs: false
 });
 const uniqueId = getUniqueId();
-const transformStyle = shallowRef("");
+const itemIndex = shallowRef(0);
 const carouselContext = useCarouselContext();
-function resetPosition() {
-  transformStyle.value = "";
-}
-function getTranslateStyle(translate) {
-  const isHorizontal = carouselContext.props.direction === "horizontal";
-  return `translate${isHorizontal ? "X" : "Y"}(${translate}%)`;
-}
-function translateItem(index, activeIndex) {
-  const maxLength = carouselContext.carousels.value.length;
+const transformStyle = computed(() => {
+  if (!carouselContext.props.loop) {
+    return "";
+  }
+  const { carousels, virtualIndex } = carouselContext;
+  const maxLength = carousels.value.length;
   const lastIndex = maxLength - 1;
-  if (index === 0 && activeIndex === maxLength) {
-    transformStyle.value = getTranslateStyle(maxLength * 100);
-  } else if (index === lastIndex && activeIndex <= 0) {
-    transformStyle.value = getTranslateStyle(-maxLength * 100);
+  const activeIndex = virtualIndex.value;
+  if (itemIndex.value === 0 && activeIndex >= lastIndex) {
+    return getTranslateValue(maxLength * 100);
+  } else if (itemIndex.value === lastIndex && activeIndex <= 0) {
+    return getTranslateValue(-maxLength * 100);
   } else {
-    resetPosition();
+    return "";
   }
+});
+function updateItemIndex(index) {
+  itemIndex.value = index;
+}
+function getTranslateValue(translate) {
+  const isHorizontal = carouselContext.props.direction === "horizontal";
+  return `translate${isHorizontal ? "X" : "Y"}(${translate}%)`;
 }
 onMounted(() => {
   carouselContext?.registerCarousel({
     uid: uniqueId,
-    translateItem
+    updateItemIndex
   });
 });
 onBeforeUnmount(() => {

package/dist/components/checkbox/index.vue

@@ -1,11 +1,11 @@
 <script setup>
 import CheckIcon from "@gdsicon/vue/check";
 import MinusIcon from "@gdsicon/vue/minus";
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
 import { useCheckboxGroupContext } from "../../contexts/checkbox";
 import { getUniqueId } from "../../utils/uid";
-import { tv } from "tailwind-variants";
 defineOptions({
   name: "PCheckbox",
   inheritAttrs: false,
@@ -24,10 +24,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const checkboxVariant = tv({
-  base: "pxd-checkbox--inner size-4 p-0.5 inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden border peer-focus-ring motion-safe:transition-colors",
+  base: "pxd-checkbox--inner size-4 p-0.5 pointer-events-none inline-flex shrink-0 transform-gpu items-center justify-center overflow-hidden border peer-focus-ring motion-safe:transition-colors",
   variants: {
     checked: {
-      true: "",
+      true: "text-gray-100",
       false: ""
     },
     disabled: {
@@ -121,12 +121,12 @@ function onInputChange(event) {
     />
 
     <span aria-hidden="true" :class="computedClasses">
-      <CheckIcon v-if="isChecked" class="size-3 pointer-events-none text-gray-100" />
-      <MinusIcon v-else-if="indeterminate" class="size-3 pointer-events-none" />
-      <span v-else class="size-3 pointer-events-none" />
+      <CheckIcon v-if="isChecked" class="size-3" />
+      <MinusIcon v-else-if="indeterminate" class="size-3" />
+      <span v-else class="size-3" />
     </span>
 
-    <span class="text-sm flex-1 shrink-0 empty:hidden">
+    <span class="text-sm flex-1 shrink-0 leading-none empty:hidden">
       <slot>
         {{ label }}
       </slot>

package/dist/components/checkbox-group/index.d.vue.ts

@@ -10,8 +10,8 @@ declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {},
     onChange?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
 }>, {
-    options: import("../../types/shared").ComponentOption[];
     modelValue: import("../../types/shared").ComponentValue[];
+    options: import("../../types/shared").ComponentOption[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -3,11 +3,7 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{}>, {
-    label: import("../../types/shared").ComponentLabel;
-    size: number | string;
-    variant: import("../../types/shared").ComponentVariant | "secondary";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{}>, {}, {}, {}, {}, 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;

package/dist/components/chip/index.vue

@@ -1,19 +1,19 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { computed } from "vue";
 import { getCssUnitValue, isTruthyProp } from "../../utils/format";
-import { tv } from "tailwind-variants";
 defineOptions({
   name: "PChip",
   inheritAttrs: false
 });
 const props = defineProps({
-  size: { type: [Number, String], required: false, default: 10 },
+  size: { type: [Number, String], required: false },
   inset: { type: Boolean, required: false },
-  label: { type: [String, Number, Array, null], required: false, default: "" },
-  variant: { type: String, required: false, default: "primary" }
+  label: { type: [String, Number, Array, null], required: false },
+  variant: { type: String, required: false }
 });
 const chipVariant = tv({
-  base: "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all",
+  base: "pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-appearance",
   variants: {
     variant: {
       primary: "bg-primary text-background-100",

package/dist/components/choicebox/index.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { computed, markRaw } from "vue";
+import { provideChoiceboxContext } from "../../contexts/choicebox";
 import PCheckboxGroup from "../checkbox-group/index.vue";
 import PChoiceboxItem from "../choicebox-item/index.vue";
 import PRadioGroup from "../radio-group/index.vue";
-import { provideChoiceboxContext } from "../../contexts/choicebox";
 defineOptions({
   name: "PChoicebox",
   inheritAttrs: false,

package/dist/components/collapse-group/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, ref } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
 import { provideCollapseGroupContext } from "../../contexts/collapse";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { getFallbackValue } from "../../utils/get";
 defineOptions({
   name: "PCollapseGroup",

package/dist/components/color-selector/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { ColorSelectorProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<ColorSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: string) => any;
+    "update:modelValue": (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<ColorSelectorProps> & Readonly<{
+    onChange?: ((args_0: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
+}>, {
+    colors: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/color-selector/index.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { tv } from "tailwind-variants";
+import { computed } from "vue";
+import { useModelValue } from "../../composables/use-model-value";
+import { useConfigProvider } from "../../contexts/config-provider";
+import { getUniqueId } from "../../utils/uid";
+defineOptions({
+  name: "PColorSelector",
+  inheritAttrs: false,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  }
+});
+const props = defineProps({
+  size: { type: String, required: false },
+  colors: { type: Array, required: false, default: () => ["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"] },
+  modelValue: { type: String, required: false }
+});
+const emits = defineEmits(["change", "update:modelValue"]);
+const uniqueName = getUniqueId("color-selector");
+const colorSelectorVariants = tv({
+  base: "pxd-color-selector--item size-5 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-current self-focus-ring checked:border-current active:scale-85 motion-safe:transition-appearance",
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6"
+    }
+  }
+});
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits);
+const computedClasses = computed(
+  () => colorSelectorVariants({
+    size: props.size || configProvider.size
+  })
+);
+function isActive(color) {
+  return modelValue.value === color;
+}
+</script>
+
+<template>
+  <div role="tabpanel" class="pxd-color-selector gap-2 flex" v-bind="$attrs">
+    <template v-for="color in colors" :key="color">
+      <input
+        type="radio"
+        :name="uniqueName"
+        :value="color"
+        :style="{ color }"
+        :class="computedClasses"
+        :aria-selected="isActive(color)"
+        :checked="isActive(color)"
+        :tabindex="isActive(color) ? 0 : -1"
+        @change="modelValue = color"
+      />
+    </template>
+  </div>
+</template>
+
+<style>
+.pxd-color-selector--item:checked{box-shadow:inset 0 0 0 2px var(--color-background-100)}
+</style>

package/dist/components/color-selector/types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentSize } from '../../types/shared/props'
+
+export interface ColorSelectorProps {
+  size?: ComponentSize
+  colors?: string[]
+  modelValue?: string
+}
+
+export interface ColorSelectorEmits {
+  change: [NonNullable<ColorSelectorProps['modelValue']>]
+  'update:modelValue': [NonNullable<ColorSelectorProps['modelValue']>]
+}

package/dist/components/command-menu/index.d.vue.ts

@@ -1,26 +1,26 @@
 import type { ListOptionSelected } from '../list/types';
 import type { CommandMenuProps } from './types';
-declare var __VLS_30: {}, __VLS_32: {};
+declare var __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_30) => any;
+    default?: (props: typeof __VLS_20) => any;
 } & {
-    footer?: (props: typeof __VLS_32) => any;
+    footer?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CommandMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
     change: (args_0: boolean) => any;
     "update:modelValue": (args_0: boolean) => any;
+    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
     show: () => any;
     hide: () => any;
 }, string, import("vue").PublicProps, Readonly<CommandMenuProps> & Readonly<{
-    onSelect?: ((args_0: MouseEvent, args_1: ListOptionSelected) => any) | undefined;
     onChange?: ((args_0: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
 }>, {
-    placeholder: string;
     modelValue: boolean;
+    placeholder: string;
     closeOnPressEscape: boolean;
     closeOnClickOverlay: boolean;
     closeOnSelectItem: boolean;

package/dist/components/command-menu/index.vue

@@ -1,12 +1,11 @@
 <script setup>
-import { nextTick, shallowRef } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { useDeferredValue } from "../../composables/use-deferred-value";
+import { computed, shallowRef } from "vue";
+import { useListFilter } from "../../composables/use-list-filter";
 import { PRESET_MEDIA_QUERIES, useMediaQuery } from "../../composables/use-media-query";
 import { useModelValue } from "../../composables/use-model-value";
-import { provideListFilterValue } from "../../contexts/list";
+import { useConfigProvider } from "../../contexts/config-provider";
+import { provideListFilterContext } from "../../contexts/list";
 import { getUniqueId } from "../../utils/uid";
-import PButton from "../button/index.vue";
 import PList from "../list/index.vue";
 import PModal from "../modal/index.vue";
 defineOptions({
@@ -29,20 +28,10 @@ const emits = defineEmits(["update:modelValue", "select", "change", "show", "hid
 const uniqueId = getUniqueId();
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
-const isDesktop = useMediaQuery(PRESET_MEDIA_QUERIES.SM_UP);
-const listRef = shallowRef();
-const isEmptyResult = shallowRef(false);
-const { value: filterKeyword, deferred: deferredFilterKeyword } = useDeferredValue("", {
-  async valueChange(v) {
-    if (!v) {
-      return;
-    }
-    await nextTick();
-    listRef.value.updateListItem();
-    listRef.value.setFirstAsActive();
-    isEmptyResult.value = listRef.value.isNoVisibleItem();
-  }
-});
+const filterKeyword = shallowRef("");
+const filterContext = useListFilter({ keyword: filterKeyword });
+const isSmallScreen = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
+const isEmptyResult = computed(() => filterKeyword.value && filterContext.visibleCount.value === 0);
 function hideModal() {
   filterKeyword.value = "";
   emits("hide");
@@ -53,23 +42,23 @@ function showModal() {
 function closeModal() {
   modelValue.value = false;
 }
-function onListItemSelect(ev, item) {
-  emits("select", ev, item);
+function onListItemSelect(item, ev) {
+  emits("select", item, ev);
   if (props.closeOnSelectItem) {
     closeModal();
   }
 }
-provideListFilterValue(deferredFilterKeyword);
+provideListFilterContext(filterContext);
 </script>
 
 <template>
   <PModal
     v-model="modelValue"
     width="640px"
-    class="pxd-command-menu max-sm:dvh-80"
+    class="pxd-command-menu max-sm:h-full"
     content-class="!p-0 overflow-hidden"
     wrapper-class="sm:top-1/8 sm:translate-y-0"
-    :auto-focus-element="isDesktop"
+    :auto-focus-element="!isSmallScreen"
     :close-on-press-escape="closeOnPressEscape"
     :close-on-click-overlay="closeOnClickOverlay"
     v-bind="$attrs"
@@ -98,29 +87,31 @@ provideListFilterValue(deferredFilterKeyword);
           class="h-7 flex-1 shrink-0 appearance-none border-none bg-transparent font-inherit text-foreground outline-none"
         />
 
-        <PButton
-          v-if="closeOnPressEscape"
-          size="xs"
-          class="px-0! text-xs shrink-0"
+        <button
+          type="button"
+          class="px-1.5 h-5 text-xs shrink-0 cursor-pointer appearance-none rounded-sm border bg-background-100 self-focus-ring hover:bg-background-hover active:bg-background-active motion-safe:transition-colors"
           @click="closeModal"
         >
           Esc
-        </PButton>
+        </button>
       </label>
     </template>
 
     <PList
-      ref="listRef"
       :loop="false"
       class="sm:max-h-110 h-full"
+      :default-active-index="0"
       :toggle-on-key-press="modelValue"
       @select="onListItemSelect"
     >
       <slot />
 
-      <p v-if="isEmptyResult" class="py-7.5 text-sm text-center text-foreground-secondary">
-        {{ configProvider.locale.empty.search }}
-        <span class="text-foreground">"{{ filterKeyword }}"</span>
+      <p
+        v-if="filterKeyword && isEmptyResult"
+        class="py-7.5 text-sm text-center text-foreground-secondary"
+      >
+        {{ configProvider.locale.results.searchText }}
+        <span class="whitespace-pre text-foreground">"{{ filterKeyword }}"</span>
       </p>
     </PList>
 

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

@@ -11,7 +11,7 @@ export interface CommandMenuProps {
 
 export interface CommandMenuEmits {
   'update:modelValue': [boolean]
-  select: [MouseEvent, ListOptionSelected]
+  select: [ListOptionSelected, MouseEvent]
   change: [boolean]
   show: []
   hide: []

package/dist/components/command-menu-group/index.vue

@@ -1,19 +1,28 @@
 <script setup>
+import { computed } from "vue";
+import { provideListFilterGroupId, useListFilterContext } from "../../contexts/list";
+import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PCommandMenuGroup",
   inheritAttrs: false
 });
 defineProps({
-  label: { type: [String, Number, Array, null], required: false }
+  label: { type: [String, Number, Array, null], required: true }
 });
+const groupId = getUniqueId("list-group");
+const listFilterContext = useListFilterContext(null);
+const isHidden = computed(() => {
+  if (!listFilterContext || !listFilterContext.searchValue.value.trim()) {
+    return false;
+  }
+  return !listFilterContext.isGroupVisible(groupId);
+});
+provideListFilterGroupId(groupId);
 </script>
 
 <template>
-  <div class="pxd-command-menu-group" role="presentation" v-bind="$attrs">
-    <div
-      aria-hidden="true"
-      class="h-10 px-2 flex items-center text-13px text-foreground-secondary only:hidden empty:hidden"
-    >
+  <div class="pxd-command-menu-group" role="presentation" :hidden="isHidden" v-bind="$attrs">
+    <div aria-hidden="true" class="h-10 px-2 flex items-center text-13 text-gray-900">
       {{ label }}
     </div>
 

package/dist/components/command-menu-group/types.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentLabel } from '../../types/shared'
 
 export interface CommandMenuGroupProps {
-  label?: ComponentLabel
+  label: ComponentLabel
 }

package/dist/components/config-provider/index.d.vue.ts

@@ -1,5 +1,5 @@
-import type { ConfigProviderProps } from './types';
 import type { ComponentAs } from '../../types/shared';
+import type { ConfigProviderProps } from './types';
 interface Props extends ConfigProviderProps {
     as?: ComponentAs;
 }

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

@@ -2,11 +2,11 @@ import type { CountdownProps } from './types';
 declare var __VLS_1: {
     active: boolean;
     times: {
-        dd: any;
-        hh: any;
-        mm: any;
-        ss: any;
-        ms: any;
+        dd: string;
+        hh: string;
+        mm: string;
+        ss: string;
+        ms: string;
     };
 };
 type __VLS_Slots = {} & {
@@ -15,11 +15,11 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<CountdownProps, {
     reset: () => void;
     times: import("vue").ComputedRef<{
-        dd: any;
-        hh: any;
-        mm: any;
-        ss: any;
-        ms: any;
+        dd: string;
+        hh: string;
+        mm: string;
+        ss: string;
+        ms: string;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (active: boolean) => any;
@@ -31,12 +31,12 @@ declare const __VLS_base: import("vue").DefineComponent<CountdownProps, {
     onFinish?: (() => any) | undefined;
 }>, {
     format: string;
+    millisecond: boolean;
     endTime: number;
     durations: number;
     active: boolean;
     autoReset: boolean;
     precision: number;
-    millisecond: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -13,27 +13,27 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: boolean) => any;
-    "update:modelValue": (args_0: boolean) => any;
+    "update:modelValue": (visible: boolean) => any;
     show: () => any;
     hide: () => any;
-    "visible-change": (args_0: boolean) => any;
-    "outside-click": (args_0: MouseEvent) => any;
+    "outside-click": (args_0: PointerEvent) => any;
+    "visible-change": (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
     onChange?: ((args_0: boolean) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((visible: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
-    "onVisible-change"?: ((args_0: boolean) => any) | undefined;
-    "onOutside-click"?: ((args_0: MouseEvent) => any) | undefined;
+    "onOutside-click"?: ((args_0: PointerEvent) => any) | undefined;
+    "onVisible-change"?: ((visible: boolean) => any) | undefined;
 }>, {
     modelValue: boolean;
-    closeOnPressEscape: boolean;
+    position: import("../../types/shared").BasePosition;
     autoFocusElement: string | boolean;
     appendToBody: boolean;
+    closeOnPressEscape: boolean;
     closeOnClickOverlay: boolean;
     defaultHeaderStyle: boolean;
     defaultFooterStyle: boolean;
-    position: import("../../types/shared").BasePosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/drawer/index.vue

@@ -13,6 +13,7 @@ defineOptions({
   }
 });
 const props = defineProps({
+  zIndex: { type: Number, required: false },
   title: { type: [String, Number, Array, null], required: false },
   subtitle: { type: [String, Number, Array, null], required: false },
   size: { type: [Number, String], required: false },
@@ -43,13 +44,10 @@ const defaultStyles = computed(() => ({
   footerClass: props.defaultFooterStyle ? "border-t pt-4 bg-background-200 dark:bg-background-100" : ""
 }));
 const transitionName = computed(() => `pxd-transition--drawer-${ensurePosition.value}`);
-const computedStyle = computed(() => {
-  const styles = {};
-  if (props.size) {
-    styles["--drawer-size"] = getCssUnitValue(props.size);
-  }
-  return styles;
-});
+const computedStyle = computed(() => ({
+  "--modal-index": props.zIndex,
+  "--drawer-size": getCssUnitValue(props.size)
+}));
 const focusTrapOptions = computed(() => ({
   autoFocusElement: props.autoFocusElement,
   escapeDeactivates: props.closeOnPressEscape,
@@ -90,7 +88,12 @@ watch(
     @escape="closeOverlayIfNeed"
     @click="onOverlayClick"
   >
-    <Transition :name="transitionName" mode="out-in" appear>
+    <Transition
+      appear
+      mode="out-in"
+      :name="transitionName"
+      class="default-transition-duration default-transition-timing-function"
+    >
       <div
         v-if="isVisible"
         ref="drawerRef"
@@ -98,7 +101,7 @@ watch(
         tabindex="-1"
         aria-modal="true"
         :aria-expanded="isVisible"
-        class="pxd-drawer group/drawer translate-z-0 sm:[--drawer-width:30vw] sm:[--drawer-height:30vw] pointer-events-auto fixed z-10 flex max-h-full max-w-full flex-col bg-background-100 shadow-border-modal outline-none"
+        class="pxd-drawer group/drawer translate-z-0 pointer-events-auto fixed z-(--modal-index) flex max-h-full max-w-full flex-col bg-background-100 shadow-border-modal outline-none"
         :class="wrapperClass"
         :style="computedStyle"
         :data-position="ensurePosition"
@@ -146,5 +149,5 @@ watch(
 </template>
 
 <style>
-.pxd-drawer[data-position=left]{bottom:0;left:0;top:0}.pxd-drawer[data-position=top]{left:0;right:0;top:0}.pxd-drawer[data-position=right]{bottom:0;right:0;top:0}.pxd-drawer[data-position=bottom]{bottom:0;left:0;right:0}.pxd-drawer[data-position=left],.pxd-drawer[data-position=right]{width:var(--drawer-size,var(--drawer-width,80vw))}.pxd-drawer[data-position=bottom],.pxd-drawer[data-position=top]{height:var(--drawer-size,var(--drawer-height,80vw))}.pxd-transition--drawer-bottom-enter-active,.pxd-transition--drawer-bottom-leave-active,.pxd-transition--drawer-left-enter-active,.pxd-transition--drawer-left-leave-active,.pxd-transition--drawer-right-enter-active,.pxd-transition--drawer-right-leave-active,.pxd-transition--drawer-top-enter-active,.pxd-transition--drawer-top-leave-active{transition-property:transform}.pxd-transition--drawer-right-enter-from,.pxd-transition--drawer-right-leave-to{transform:translateX(100%)}.pxd-transition--drawer-left-enter-from,.pxd-transition--drawer-left-leave-to{transform:translateX(-100%)}.pxd-transition--drawer-top-enter-from,.pxd-transition--drawer-top-leave-to{transform:translateY(-100%)}.pxd-transition--drawer-bottom-enter-from,.pxd-transition--drawer-bottom-leave-to{transform:translateY(100%)}
+.pxd-drawer[data-position=left]{bottom:0;left:0;top:0}.pxd-drawer[data-position=top]{left:0;right:0;top:0}.pxd-drawer[data-position=right]{bottom:0;right:0;top:0}.pxd-drawer[data-position=bottom]{bottom:0;left:0;right:0}.pxd-drawer[data-position=left],.pxd-drawer[data-position=right]{width:var(--drawer-size,30vw)}.pxd-drawer[data-position=bottom],.pxd-drawer[data-position=top]{height:var(--drawer-size,30vh)}.pxd-transition--drawer-bottom-enter-active,.pxd-transition--drawer-bottom-leave-active,.pxd-transition--drawer-left-enter-active,.pxd-transition--drawer-left-leave-active,.pxd-transition--drawer-right-enter-active,.pxd-transition--drawer-right-leave-active,.pxd-transition--drawer-top-enter-active,.pxd-transition--drawer-top-leave-active{transition-property:transform}.pxd-transition--drawer-right-enter-from,.pxd-transition--drawer-right-leave-to{transform:translateX(100%)}.pxd-transition--drawer-left-enter-from,.pxd-transition--drawer-left-leave-to{transform:translateX(-100%)}.pxd-transition--drawer-top-enter-from,.pxd-transition--drawer-top-leave-to{transform:translateY(-100%)}.pxd-transition--drawer-bottom-enter-from,.pxd-transition--drawer-bottom-leave-to{transform:translateY(100%)}
 </style>

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

@@ -1,6 +1,7 @@
 import type { BasePosition, ComponentClass, ComponentLabel } from '../../types/shared'
 
 export interface DrawerProps {
+  zIndex?: number
   title?: ComponentLabel
   subtitle?: ComponentLabel
   size?: number | string
@@ -21,7 +22,7 @@ export interface DrawerEmits {
   show: []
   hide: []
   change: [boolean]
-  'outside-click': [MouseEvent]
-  'visible-change': [boolean]
-  'update:modelValue': [boolean]
+  'outside-click': [PointerEvent]
+  'visible-change': [visible: boolean]
+  'update:modelValue': [visible: boolean]
 }

package/dist/components/ellipsis-text/index.d.vue.ts

@@ -1,5 +1,8 @@
 import type { EllipsisTextProps } from './types';
-declare const __VLS_export: import("vue").DefineComponent<EllipsisTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<EllipsisTextProps, {
+    isExpanded: import("vue").ShallowRef<boolean, boolean>;
+    isOverflow: import("vue").ShallowRef<boolean, boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (expanded: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<EllipsisTextProps> & Readonly<{
     onToggle?: ((expanded: boolean) => any) | undefined;