pxd 0.0.55 → 0.0.60

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

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, nextTick, shallowRef } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { nextTick, shallowRef } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { useDeferredValue } from "../../composables/use-deferred-value";
 import { PRESET_MEDIA_QUERIES, useMediaQuery } from "../../composables/use-media-query";
 import { useModelValue } from "../../composables/use-model-value";
@@ -30,7 +30,6 @@ const uniqueId = getUniqueId();
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
 const isDesktop = useMediaQuery(PRESET_MEDIA_QUERIES.SM_UP);
-const modalInitialFocus = computed(() => isDesktop.value ? `#${uniqueId}` : false);
 const listRef = shallowRef();
 const isEmptyResult = shallowRef(false);
 const { value: filterKeyword, deferred: deferredFilterKeyword } = useDeferredValue("", {
@@ -40,7 +39,7 @@ const { value: filterKeyword, deferred: deferredFilterKeyword } = useDeferredVal
     }
     await nextTick();
     listRef.value.updateListItem();
-    listRef.value.setActiveValueToFirst();
+    listRef.value.setFirstAsActive();
     isEmptyResult.value = listRef.value.isNoVisibleItem();
   }
 });
@@ -70,9 +69,10 @@ provideListFilterValue(deferredFilterKeyword);
     class="pxd-command-menu max-sm:dvh-80"
     content-class="!p-0 overflow-hidden"
     wrapper-class="sm:top-1/8 sm:translate-y-0"
-    :initial-focus="modalInitialFocus"
+    :auto-focus-element="isDesktop"
     :close-on-press-escape="closeOnPressEscape"
     :close-on-click-overlay="closeOnClickOverlay"
+    v-bind="$attrs"
     @show="showModal"
     @hide="hideModal"
   >
@@ -113,8 +113,7 @@ provideListFilterValue(deferredFilterKeyword);
       ref="listRef"
       :loop="false"
       class="sm:max-h-110 h-full"
-      :item-transition="false"
-      :key-listener="modelValue"
+      :toggle-on-key-press="modelValue"
       @select="onListItemSelect"
     >
       <slot />

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

@@ -1,4 +1,3 @@
-import type { ComponentLabel } from '../../types/shared'
 import type { ListOptionSelected } from '../list/types'
 
 export interface CommandMenuProps {
@@ -17,7 +16,3 @@ export interface CommandMenuEmits {
   show: []
   hide: []
 }
-
-export interface CommandMenuGroupProps {
-  label?: ComponentLabel
-}

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

@@ -1,4 +1,4 @@
-import type { CommandMenuGroupProps } from '../command-menu/types';
+import type { CommandMenuGroupProps } from './types';
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -1,6 +1,7 @@
 <script setup>
 defineOptions({
-  name: "PCommandMenuGroup"
+  name: "PCommandMenuGroup",
+  inheritAttrs: false
 });
 defineProps({
   label: { type: [String, Number, Array, null], required: false }
@@ -8,7 +9,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="pxd-command-menu-group" role="presentation">
+  <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"

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

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

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

@@ -3,9 +3,9 @@ import type { ComponentAs } from '../../types/shared';
 interface Props extends ConfigProviderProps {
     as?: ComponentAs;
 }
-declare var __VLS_8: {};
+declare var __VLS_10: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: import("../../types/shared").ComponentSize;

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

@@ -1,11 +1,13 @@
 <script setup>
-import { provideConfigProvider } from "../../composables/use-config-provider-context";
+import { provideConfigProvider } from "../../contexts/config-provider";
 import enUS from "../../locales/en-us";
+import { NOOP } from "../../utils/event";
 defineOptions({
-  name: "PConfigProvider"
+  name: "PConfigProvider",
+  inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "div" },
+  as: { type: [String, Object], required: false, default: "div" },
   size: { type: String, required: false, default: "md" },
   locale: { type: Object, required: false, default: () => enUS },
   popoverShowTransition: { type: Boolean, required: false, default: true }
@@ -14,7 +16,7 @@ provideConfigProvider(props);
 </script>
 
 <template>
-  <Component :is="as" class="pxd-config-provider h-inherit">
+  <Component :is="as" class="pxd-config-provider h-inherit" @touchstart="NOOP" v-bind="$attrs">
     <slot />
   </Component>
 </template>

package/dist/components/countdown/index.vue

@@ -3,7 +3,8 @@ import { computed, onBeforeUnmount } from "vue";
 import { useCountdown } from "../../composables/use-countdown";
 import { dayjs, dayjsDurationPlugin, dayjsMillisecondTokenPlugin } from "../../utils/date";
 defineOptions({
-  name: "PCountDown"
+  name: "PCountDown",
+  inheritAttrs: false
 });
 const props = defineProps({
   format: { type: String, required: false, default: "HH:mm:ss" },
@@ -45,7 +46,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="pxd-countdown relative w-max max-w-full leading-none tabular-nums">
+  <div class="pxd-countdown relative w-max max-w-full leading-none tabular-nums" v-bind="$attrs">
     <slot :active="active" :times="times">
       {{ displayTimes }}
     </slot>

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

@@ -1,6 +1,6 @@
-import type { UseCountdownOptions } from '../../composables/use-countdown'
+import type { CountdownOptions } from '../../composables/use-countdown'
 
-export interface CountdownProps extends UseCountdownOptions {
+export interface CountdownProps extends CountdownOptions {
   format?: string
 }
 

package/dist/components/dash-line/index.vue

@@ -2,7 +2,8 @@
 import { computed } from "vue";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
-  name: "PDashLine"
+  name: "PDashLine",
+  inheritAttrs: false
 });
 const props = defineProps({
   position: { type: [String, Array], required: false, default: () => ["top"] },
@@ -22,6 +23,7 @@ const computedStyle = computed(() => ({
 <template>
   <div
     class="pxd-dash-line relative max-w-full min-w-full"
+    v-bind="$attrs"
     :data-position="position"
     :style="computedStyle"
   />

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

@@ -3,7 +3,7 @@ declare var __VLS_1: {}, __VLS_14: {};
 type __VLS_Slots = {} & {
     title?: (props: typeof __VLS_1) => any;
 } & {
-    content?: (props: typeof __VLS_14) => any;
+    description?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DescriptionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DescriptionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/description/index.vue

@@ -2,17 +2,18 @@
 import InformationIcon from "@gdsicon/vue/information-fill-small";
 import PTooltip from "../tooltip/index.vue";
 defineOptions({
-  name: "PDescription"
+  name: "PDescription",
+  inheritAttrs: false
 });
 defineProps({
   title: { type: String, required: false },
-  content: { type: String, required: false },
-  tooltip: { type: String, required: false }
+  tooltip: { type: String, required: false },
+  description: { type: String, required: false }
 });
 </script>
 
 <template>
-  <dl class="pxd-description">
+  <dl class="pxd-description" v-bind="$attrs">
     <dt
       class="pxd-description--title gap-1 text-sm mb-2 min-h-3.5 flex items-center leading-none text-nowrap text-foreground-secondary capitalize"
     >
@@ -24,9 +25,9 @@ defineProps({
         <InformationIcon class="text-base scale-125" />
       </PTooltip>
     </dt>
-    <dd class="pxd-description--content text-sm font-medium leading-4 text-foreground">
-      <slot name="content">
-        {{ content }}
+    <dd class="pxd-description--description text-sm font-medium leading-4 text-foreground">
+      <slot name="description">
+        {{ description }}
       </slot>
     </dd>
   </dl>

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

@@ -1,5 +1,5 @@
 export interface DescriptionProps {
   title?: string
-  content?: string
   tooltip?: string
+  description?: string
 }

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

@@ -28,10 +28,11 @@ declare const __VLS_base: import("vue").DefineComponent<DrawerProps, {}, {}, {},
 }>, {
     modelValue: boolean;
     closeOnPressEscape: boolean;
+    autoFocusElement: string | boolean;
     appendToBody: boolean;
     closeOnClickOverlay: boolean;
-    headerStylize: boolean;
-    footerStylize: 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>;

package/dist/components/drawer/index.vue

@@ -20,22 +20,17 @@ const props = defineProps({
   position: { type: String, required: false, default: "right" },
   modelValue: { type: Boolean, required: false, default: false },
   appendToBody: { type: Boolean, required: false, default: true },
-  headerStylize: { type: Boolean, required: false, default: false },
-  footerStylize: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
+  autoFocusElement: { type: [String, Boolean], required: false, default: false },
+  defaultHeaderStyle: { type: Boolean, required: false, default: false },
+  defaultFooterStyle: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
-  closeOnClickOverlay: { type: Boolean, required: false, default: true },
-  initialFocus: { type: [String, Boolean], required: false }
+  closeOnClickOverlay: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["show", "hide", "change", "outside-click", "visible-change", "update:modelValue"]);
 const drawerRef = shallowRef();
 const isVisible = useModelValue(props, emits);
-useFocusTrap(drawerRef, {
-  initialFocus: props.initialFocus,
-  escapeDeactivates: props.closeOnPressEscape,
-  clickOutsideDeactivates: props.closeOnClickOverlay
-});
 const ensurePosition = computed(() => {
   const { position } = props;
   if (["top", "bottom", "left", "right"].includes(position)) {
@@ -43,6 +38,10 @@ const ensurePosition = computed(() => {
   }
   return "right";
 });
+const defaultStyles = computed(() => ({
+  headerClass: props.defaultHeaderStyle ? "pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100" : "",
+  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 = {};
@@ -51,6 +50,12 @@ const computedStyle = computed(() => {
   }
   return styles;
 });
+const focusTrapOptions = computed(() => ({
+  autoFocusElement: props.autoFocusElement,
+  escapeDeactivates: props.closeOnPressEscape,
+  clickOutsideDeactivates: props.closeOnClickOverlay
+}));
+useFocusTrap(drawerRef, focusTrapOptions);
 function closeOverlayIfNeed() {
   if (isTruthyProp(props.loading)) {
     return;
@@ -89,19 +94,19 @@ watch(
       <div
         v-if="isVisible"
         ref="drawerRef"
-        aria-modal="true"
         role="dialog"
         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="wrapperClass"
         :style="computedStyle"
         :data-position="ensurePosition"
+        v-bind="$attrs"
       >
         <header
           class="pxd-drawer--header px-6 pt-4 sm:pt-6 empty:py-3 relative shrink-0"
-          :class="{
-  'pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100': headerStylize
-}"
+          :class="defaultStyles.headerClass"
         >
           <slot name="header">
             <h3
@@ -130,8 +135,8 @@ watch(
 
         <footer
           v-if="$slots.footer"
-          class="pxd-drawer--footer p-4 gap-2 relative flex shrink-0 items-center justify-between"
-          :class="{ 'border-t bg-background-200 dark:bg-background-100': footerStylize }"
+          class="pxd-drawer--footer px-4 pb-4 gap-2 relative flex shrink-0 items-center justify-between"
+          :class="defaultStyles.footerClass"
         >
           <slot name="footer" />
         </footer>

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

@@ -8,13 +8,13 @@ export interface DrawerProps {
   position?: BasePosition
   modelValue?: boolean
   appendToBody?: boolean
-  headerStylize?: boolean
-  footerStylize?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
+  autoFocusElement?: string | boolean
+  defaultHeaderStyle?: boolean
+  defaultFooterStyle?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
-  initialFocus?: string | false
 }
 
 export interface DrawerEmits {

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

@@ -0,0 +1,14 @@
+import type { EllipsisTextProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<EllipsisTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (expanded: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<EllipsisTextProps> & Readonly<{
+    onToggle?: ((expanded: boolean) => any) | undefined;
+}>, {
+    position: "start" | "middle" | "end";
+    dots: string;
+    rows: number;
+    moreText: string;
+    lessText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,242 @@
+<script setup>
+import { shallowRef, computed, nextTick, watch } from "vue";
+import { useResizeObserver } from "../../composables/use-browser-observer";
+import { isServer } from "../../utils/is";
+import { getStyle } from "../../utils/dom";
+import { twMerge } from "tailwind-merge";
+defineOptions({
+  name: "PEllipsisText",
+  inheritAttrs: false
+});
+const props = defineProps({
+  text: { type: String, required: true },
+  dots: { type: String, required: false, default: "..." },
+  rows: { type: Number, required: false, default: 1 },
+  action: { type: Boolean, required: false },
+  position: { type: String, required: false, default: "end" },
+  moreText: { type: String, required: false, default: "Expand" },
+  lessText: { type: String, required: false, default: "Collapse" },
+  actionClass: { type: String, required: false }
+});
+const emits = defineEmits(["toggle"]);
+const isExpanded = shallowRef(false);
+const isTruncated = shallowRef(false);
+const ellipsisText = shallowRef(props.text);
+const containerRef = shallowRef();
+const textRef = shallowRef();
+const actionRef = shallowRef();
+const maxRows = computed(() => {
+  const rows = Number(props.rows ?? 1);
+  return Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : 1;
+});
+const computedActionClass = computed(() => {
+  return twMerge(
+    "pxd-ellipsis-text--action cursor-pointer whitespace-nowrap text-blue-900",
+    props.actionClass
+  );
+});
+const displayText = computed(() => {
+  if (isExpanded.value) {
+    return {
+      content: props.text,
+      action: props.lessText
+    };
+  }
+  return {
+    content: ellipsisText.value,
+    action: props.moreText
+  };
+});
+function toggleAction() {
+  if (!props.action) {
+    return;
+  }
+  isExpanded.value = !isExpanded.value;
+  emits("toggle", isExpanded.value);
+  updateEllipsis();
+}
+const TEXT_STYLE_KEYS = [
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontVariant",
+  "letterSpacing",
+  "lineHeight",
+  "textTransform",
+  "textRendering",
+  "wordSpacing"
+];
+function parseSize(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function getLineHeightPx(style) {
+  const lineHeight = style.lineHeight;
+  const fontSize = parseSize(style.fontSize);
+  if (!lineHeight || lineHeight === "normal") {
+    return fontSize > 0 ? fontSize * 1.2 : 19.2;
+  }
+  const parsed = parseSize(lineHeight);
+  if (parsed <= 0) {
+    return fontSize > 0 ? fontSize * 1.2 : 19.2;
+  }
+  return parsed;
+}
+function applyTextStyles(style, target) {
+  TEXT_STYLE_KEYS.forEach((key) => {
+    target.style.setProperty(
+      key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`),
+      style[key]
+    );
+  });
+  target.style.display = "inline";
+  target.style.whiteSpace = "pre-wrap";
+  target.style.wordBreak = "break-word";
+}
+function buildCandidate(chars, keep, dots, position) {
+  if (keep <= 0) {
+    return dots;
+  }
+  if (position === "start") {
+    return `${dots}${chars.slice(chars.length - keep).join("")}`;
+  }
+  if (position === "middle") {
+    const headLen = Math.ceil(keep / 2);
+    const tailLen = keep - headLen;
+    const head = chars.slice(0, headLen).join("");
+    const tail = chars.slice(chars.length - tailLen).join("");
+    return `${head}${dots}${tail}`;
+  }
+  return `${chars.slice(0, keep).join("")}${dots}`;
+}
+function createMeasureElements(parent) {
+  const mc = document.createElement("span");
+  const mt = document.createElement("span");
+  const ma = document.createElement("span");
+  mc.append(mt, ma);
+  mc.style.position = "absolute";
+  mc.style.visibility = "hidden";
+  mc.style.pointerEvents = "none";
+  mc.style.zIndex = "-1";
+  mc.style.left = "0";
+  mc.style.top = "0";
+  mc.style.overflow = "visible";
+  mc.style.whiteSpace = "pre-wrap";
+  mc.style.wordBreak = "break-word";
+  mc.style.display = "block";
+  mc.style.boxSizing = "border-box";
+  parent.appendChild(mc);
+  return { container: mc, text: mt, action: ma };
+}
+function syncMeasureStyles(elements, container, textEl, actionEl) {
+  const containerStyle = getStyle(container);
+  const paddingLeft = parseSize(containerStyle.paddingLeft);
+  const paddingRight = parseSize(containerStyle.paddingRight);
+  const availableWidth = Math.max(0, container.clientWidth - paddingLeft - paddingRight);
+  elements.container.style.width = `${availableWidth}px`;
+  const textStyle = getStyle(textEl ?? container);
+  applyTextStyles(textStyle, elements.text);
+  const actionStyle = actionEl ? getStyle(actionEl) : textStyle;
+  applyTextStyles(actionStyle, elements.action);
+}
+function fits(elements, text, actionText, maxHeight) {
+  elements.text.textContent = text;
+  if (actionText) {
+    elements.action.textContent = actionText;
+    elements.action.style.display = "inline";
+  } else {
+    elements.action.textContent = "";
+    elements.action.style.display = "none";
+  }
+  const height = elements.container.getBoundingClientRect().height;
+  return height <= maxHeight + 0.5;
+}
+async function updateEllipsis() {
+  if (isServer()) {
+    return;
+  }
+  const container = containerRef.value;
+  if (!container || !container.isConnected) {
+    return;
+  }
+  await nextTick();
+  const sourceText = props.text ?? "";
+  if (container.clientWidth <= 0) {
+    ellipsisText.value = sourceText;
+    isTruncated.value = false;
+    return;
+  }
+  if (isExpanded.value || !sourceText) {
+    ellipsisText.value = sourceText;
+    return;
+  }
+  const style = getStyle(textRef.value ?? container);
+  const lineHeight = getLineHeightPx(style);
+  const maxHeight = lineHeight * maxRows.value;
+  if (maxHeight <= 0) {
+    ellipsisText.value = sourceText;
+    isTruncated.value = false;
+    return;
+  }
+  const elements = createMeasureElements(container);
+  try {
+    syncMeasureStyles(elements, container, textRef.value, actionRef.value);
+    if (fits(elements, sourceText, "", maxHeight)) {
+      ellipsisText.value = sourceText;
+      isTruncated.value = false;
+      return;
+    }
+    isTruncated.value = true;
+    const actionText = props.action ? props.moreText : "";
+    const chars = [...sourceText];
+    const dots = props.dots ?? "";
+    let low = 0;
+    let high = chars.length;
+    let best = "";
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      const candidate = buildCandidate(chars, mid, dots, props.position);
+      if (fits(elements, candidate, actionText, maxHeight)) {
+        best = candidate;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+    ellipsisText.value = best || dots;
+  } finally {
+    elements.container.remove();
+  }
+}
+watch(
+  () => props,
+  () => {
+    if (!props.action && isExpanded.value) {
+      isExpanded.value = false;
+    }
+    updateEllipsis();
+  },
+  {
+    immediate: true,
+    flush: "post",
+    deep: true
+  }
+);
+useResizeObserver(containerRef, updateEllipsis);
+</script>
+
+<template>
+  <div class="pxd-ellipsis-text" ref="containerRef" v-bind="$attrs">
+    <span ref="textRef" class="pxd-ellipsis-text--text">{{ displayText.content }}</span>
+
+    <span
+      v-if="action && (isTruncated || isExpanded)"
+      ref="actionRef"
+      :class="computedActionClass"
+      @click="toggleAction"
+    >
+      {{ displayText.action }}
+    </span>
+  </div>
+</template>

package/dist/components/ellipsis-text/types.d.ts

@@ -0,0 +1,14 @@
+export interface EllipsisTextProps {
+  text: string
+  dots?: string
+  rows?: number
+  action?: boolean
+  position?: 'start' | 'middle' | 'end'
+  moreText?: string
+  lessText?: string
+  actionClass?: string
+}
+
+export interface EllipsisTextEmits {
+  toggle: [expanded: boolean]
+}

package/dist/components/empty-state/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 defineOptions({
-  name: "PEmptyState"
+  name: "PEmptyState",
+  inheritAttrs: false
 });
 defineProps({
   title: { type: String, required: false },
@@ -9,7 +10,10 @@ defineProps({
 </script>
 
 <template>
-  <div class="pxd-empty-state py-12 px-18 w-full rounded-lg border bg-background-100">
+  <div
+    class="pxd-empty-state py-12 px-18 w-full rounded-lg border bg-background-100"
+    v-bind="$attrs"
+  >
     <div class="max-w-sm space-y-6 mx-auto flex flex-col">
       <template v-if="$slots.icon">
         <div

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

@@ -3,9 +3,7 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
-    size: import("../../types/shared").ComponentSizeWithXs;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & 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;