pxd 0.0.33 → 0.0.35

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

@@ -206,8 +206,8 @@ let tbodyRect;
 const tbodyRef = shallowRef();
 const {
   value: showTooltip,
-  set: setShowTooltip,
-  setImmediate: setShowTooltipImmediate
+  setValue: setShowTooltip,
+  setValueDelay: setShowTooltipDelay
 } = useDelayChange(false, 500);
 const tooltipInfo = shallowRef({});
 const formatTooltipText = computed(() => {
@@ -218,25 +218,25 @@ const formatTooltipText = computed(() => {
   return "";
 });
 function onMouseLeave() {
-  setShowTooltipImmediate(false);
+  setShowTooltip(false);
   tooltipInfo.value = {};
   tbodyRect = null;
 }
 async function onMouseOver(ev) {
   const targetEl = ev.target;
   if (targetEl.tagName !== "TD") {
-    setShowTooltip(false);
+    setShowTooltipDelay(false);
     return;
   }
   const date = targetEl.dataset.date;
   if (!date) {
-    setShowTooltipImmediate(false);
+    setShowTooltip(false);
     return;
   }
   if (!tbodyRect) {
     tbodyRect = tbodyRef.value.getBoundingClientRect();
   }
-  setShowTooltipImmediate(true);
+  setShowTooltip(true);
   const rect = targetEl.getBoundingClientRect();
   let top = rect.top - tbodyRect.top - CELL_SIZE;
   if (props.graphOnly) {
@@ -322,7 +322,7 @@ onBeforeUnmount(() => {
       </tbody>
     </table>
 
-    <Transition name="pxd-transition--fade">
+    <Transition name="pxd-transition--fade" mode="out-in" appear>
       <div
         v-if="showTooltip"
         class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-[13px] text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"

package/dist/components/badge/index.vue

@@ -64,7 +64,7 @@ const badgeAttrs = computed(() => {
 </script>
 
 <template>
-  <component :is="as" :class="computedClass" v-bind="badgeAttrs">
+  <Component :is="as" :class="computedClass" v-bind="badgeAttrs">
     <slot />
   </component>
 </template>

package/dist/components/browser/index.vue

@@ -42,7 +42,7 @@ const { isCopied, copyText } = useCopyClick();
 
           <PButton variant="ghost" size="xs" shape="rounded" class="size-6" icon @click="copyText(address)">
             <Transition name="pxd-transition--fade-scale" mode="out-in">
-              <component :is="isCopied ? CheckIcon : CopyIcon" class="text-sm text-foreground-secondary" />
+              <Component :is="isCopied ? CheckIcon : CopyIcon" class="text-sm text-foreground-secondary" />
             </Transition>
           </PButton>
         </div>

package/dist/components/button/index.vue

@@ -54,7 +54,7 @@ const ALIGNMENTS = {
   center: "justify-center",
   right: "justify-end"
 };
-const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:bg-gray-100 disabled:cursor-not-allowed text-gray-700 border-gray-300";
+const DISABLED_CLASS_NAMES = "is-disabled disabled:bg-gray-100 hover:bg-gray-100 active:bg-gray-100 disabled:cursor-not-allowed disabled:text-gray-700 disabled:border-gray-300";
 const config = useConfigProvider();
 const computedDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading));
 const computedClass = computed(() => {
@@ -89,7 +89,7 @@ function onButtonDblClick(event) {
 </script>
 
 <template>
-  <component
+  <Component
     :is="as"
     role="button"
     :class="computedClass"

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

@@ -29,7 +29,7 @@ let autoPlayRafId = null;
 let autoPlaySession = 0;
 let isPointerEntering = false;
 const carousels = ref([]);
-const sliderRef = shallowRef(null);
+const sliderRef = shallowRef();
 const virtualIndex = shallowRef(props.index);
 const correctIndex = computed(() => {
   const index = virtualIndex.value;

package/dist/components/choicebox/index.vue

@@ -28,7 +28,7 @@ const computedAttrs = computed(() => {
 </script>
 
 <template>
-  <component :is="renderComponent" v-model="choiceboxModelValue" v-bind="computedAttrs">
+  <Component :is="renderComponent" v-model="choiceboxModelValue" v-bind="computedAttrs">
     <div class="gap-1 flex flex-col">
       <span class="pxd-choicebox--label font-medium">
         <slot name="label">

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

@@ -52,7 +52,7 @@ provideChoiceboxGroupModelValue(modelValue);
       </slot>
     </div>
 
-    <component
+    <Component
       :is="renderComponent"
       v-model="modelValue"
       v-bind="computedAttrs"

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

@@ -13,7 +13,7 @@ provideConfigProvider(props);
 </script>
 
 <template>
-  <component :is="as" class="pxd-config-provider">
+  <Component :is="as" class="pxd-config-provider">
     <slot />
   </component>
 </template>

package/dist/components/countdown/index.vue

@@ -21,7 +21,7 @@ const emits = defineEmits(["change", "reset", "finish"]);
 dayjs.extend(durationPlugin);
 dayjs.extend(millisecondTokenPlugin);
 const {
-  clean,
+  stop,
   reset,
   timestamp
 } = useCountdown(props, emits);
@@ -40,7 +40,7 @@ const displayTimes = computed(() => {
   return time;
 });
 onBeforeUnmount(() => {
-  clean();
+  stop();
 });
 defineExpose({
   reset,

package/dist/components/drawer/index.vue

@@ -14,65 +14,50 @@ defineOptions({
   }
 });
 const props = defineProps({
-  size: { type: [Number, String], required: false, default: "30%" },
   title: { type: [String, Number, Array, null], required: false },
   subtitle: { type: [String, Number, Array, null], required: false },
+  size: { type: [Number, String], required: false },
+  pending: { type: Boolean, required: false },
+  position: { type: String, required: false, default: "right" },
   modelValue: { type: Boolean, required: false, default: false },
-  headerStyle: { type: Boolean, required: false, default: false },
-  footerStyle: { type: Boolean, required: false, default: true },
   appendToBody: { type: Boolean, required: false, default: true },
+  headerStylize: { type: Boolean, required: false, default: false },
+  footerStylize: { type: Boolean, required: false, default: true },
+  drawerClass: { type: [String, Array, Object], required: false },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
-  closeOnClickOverlay: { type: Boolean, required: false, default: true },
-  position: { type: String, required: false, default: "right" }
+  closeOnClickOverlay: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["open", "close", "click-outside", "update:modelValue"]);
 const drawerRef = shallowRef();
 const isVisible = useModelValue(props, emits);
 useFocusTrap(drawerRef);
-const ensureCorrectPosition = computed(() => {
+const ensurePosition = computed(() => {
   const { position } = props;
   if (["top", "bottom", "left", "right"].includes(position)) {
     return position;
   }
   return "right";
 });
-const transitionName = computed(() => {
-  return `pxd-transition--drawer-slide-${ensureCorrectPosition.value}`;
-});
-const computedClass = computed(() => {
-  const classes = ["pxd-drawer translate-z-0 fixed z-10 flex flex-col bg-background-100 shadow-border-modal outline-none"];
-  switch (ensureCorrectPosition.value) {
-    case "top":
-      classes.push("top-0", "left-0", "right-0");
-      break;
-    case "right":
-      classes.push("top-0", "right-0", "bottom-0");
-      break;
-    case "bottom":
-      classes.push("bottom-0", "left-0", "right-0");
-      break;
-    case "left":
-      classes.push("top-0", "left-0", "bottom-0");
-      break;
-  }
-  return classes.join(" ");
-});
+const transitionName = computed(() => `pxd-transition--drawer-${ensurePosition.value}`);
 const computedStyle = computed(() => {
-  const style = {};
-  const sizeField = ["left", "right"].includes(ensureCorrectPosition.value) ? "width" : "height";
-  style[sizeField] = getCssUnitValue(props.size);
-  return style;
+  const styles = {};
+  if (props.size) {
+    styles["--size"] = getCssUnitValue(props.size);
+  }
+  return styles;
 });
 function onOverlayClick(ev) {
   emits("click-outside", ev);
-  if (!props.closeOnClickOverlay) {
+  if (!props.closeOnClickOverlay || props.pending) {
     return;
   }
-  closeDrawer();
-}
-function closeDrawer() {
   isVisible.value = false;
-  emits("close");
+}
+function onUpdateModelValue(visible) {
+  if (!visible && props.pending) {
+    return;
+  }
+  isVisible.value = visible;
 }
 watch(() => isVisible.value, (visible) => {
   if (visible) {
@@ -85,24 +70,27 @@ watch(() => isVisible.value, (visible) => {
 
 <template>
   <POverlay
-    v-model="isVisible"
+    :model-value="isVisible"
     :append-to-body="appendToBody"
     :close-on-press-escape="closeOnPressEscape"
+    :update:model-value="onUpdateModelValue"
     @click="onOverlayClick"
   >
-    <Transition :name="transitionName" mode="out-in">
+    <Transition :name="transitionName" mode="out-in" appear>
       <div
         v-if="isVisible"
         ref="drawerRef"
         aria-modal="true"
         role="dialog"
         tabindex="-1"
-        :class="computedClass"
+        class="pxd-drawer translate-z-0 sm:[--w:30vw] sm:[--h:30vw] fixed z-10 flex max-h-full max-w-full flex-col bg-background-100 shadow-border-modal outline-none"
+        :class="drawerClass"
         :style="computedStyle"
+        :data-position="ensurePosition"
       >
         <header
-          class="pxd-drawer--header p-6 sm:py-4 relative shrink-0 empty:py-3"
-          :class="{ 'border-b bg-background-200 dark:bg-background-100': headerStyle }"
+          class="pxd-drawer--header p-6 sm:pb-4 relative shrink-0 empty:py-3"
+          :class="{ 'sm:pt-4 border-b bg-background-200 dark:bg-background-100': headerStylize }"
         >
           <h3 v-if="$slots.title || title" class="text-xl font-semibold tracking-tight">
             <slot name="title">
@@ -119,17 +107,18 @@ watch(() => isVisible.value, (visible) => {
 
         <PScrollable
           v-if="$slots.default"
-          :data-header="headerStyle"
+          :data-header="headerStylize"
           class="pxd-drawer--content group flex-1"
           content-class="group-data-[header=true]:pt-5 px-6 pb-5"
         >
           <slot />
         </PScrollable>
+        <div v-else class="flex-1" />
 
         <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': footerStyle }"
+          :class="{ 'border-t bg-background-200 dark:bg-background-100': footerStylize }"
         >
           <slot name="footer" />
         </footer>
@@ -139,38 +128,70 @@ watch(() => isVisible.value, (visible) => {
 </template>
 
 <style>
-/* 右侧滑入滑出动画 */
-.pxd-transition--drawer-slide-right-enter-active,
-.pxd-transition--drawer-slide-right-leave-active,
-/* 左侧滑入滑出动画 */
-.pxd-transition--drawer-slide-left-enter-active,
-.pxd-transition--drawer-slide-left-leave-active,
-/* 顶部滑入滑出动画 */
-.pxd-transition--drawer-slide-top-enter-active,
-.pxd-transition--drawer-slide-top-leave-active,
-/* 底部滑入滑出动画 */
-.pxd-transition--drawer-slide-bottom-enter-active,
-.pxd-transition--drawer-slide-bottom-leave-active  {
+.pxd-drawer {
+  &[data-position="left"] {
+    left: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  &[data-position="top"] {
+    left: 0;
+    top: 0;
+    right: 0;
+  }
+
+  &[data-position="right"] {
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  &[data-position="bottom"] {
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.pxd-drawer[data-position="left"],
+.pxd-drawer[data-position="right"] {
+  width: var(--size, var(--w, 80vw));
+}
+
+.pxd-drawer[data-position="top"],
+.pxd-drawer[data-position="bottom"] {
+  height: var(--size, var(--h, 80vw));
+}
+
+.pxd-transition--drawer-right-enter-active,
+.pxd-transition--drawer-right-leave-active,
+.pxd-transition--drawer-left-enter-active,
+.pxd-transition--drawer-left-leave-active,
+.pxd-transition--drawer-top-enter-active,
+.pxd-transition--drawer-top-leave-active,
+.pxd-transition--drawer-bottom-enter-active,
+.pxd-transition--drawer-bottom-leave-active  {
   transition: transform var(--default-transition-duration, 0.3s) var(--default-transition-timing-function);
 }
 
-.pxd-transition--drawer-slide-right-leave-to,
-.pxd-transition--drawer-slide-right-enter-from {
+.pxd-transition--drawer-right-leave-to,
+.pxd-transition--drawer-right-enter-from {
   transform: translateX(100%);
 }
 
-.pxd-transition--drawer-slide-left-leave-to,
-.pxd-transition--drawer-slide-left-enter-from {
+.pxd-transition--drawer-left-leave-to,
+.pxd-transition--drawer-left-enter-from {
   transform: translateX(-100%);
 }
 
-.pxd-transition--drawer-slide-top-leave-to,
-.pxd-transition--drawer-slide-top-enter-from {
+.pxd-transition--drawer-top-leave-to,
+.pxd-transition--drawer-top-enter-from {
   transform: translateY(-100%);
 }
 
-.pxd-transition--drawer-slide-bottom-leave-to,
-.pxd-transition--drawer-slide-bottom-enter-from {
+.pxd-transition--drawer-bottom-leave-to,
+.pxd-transition--drawer-bottom-enter-from {
   transform: translateY(100%);
 }
 </style>

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

@@ -1,15 +1,17 @@
-import type { BasePosition, ComponentLabel } from '../../types/shared';
+import type { BasePosition, ComponentClass, ComponentLabel } from '../../types/shared';
 interface Props {
-    size?: number | string;
     title?: ComponentLabel;
     subtitle?: ComponentLabel;
+    size?: number | string;
+    pending?: boolean;
+    position?: BasePosition;
     modelValue?: boolean;
-    headerStyle?: boolean;
-    footerStyle?: boolean;
     appendToBody?: boolean;
+    headerStylize?: boolean;
+    footerStylize?: boolean;
+    drawerClass?: ComponentClass;
     closeOnPressEscape?: boolean;
     closeOnClickOverlay?: boolean;
-    position?: BasePosition;
 }
 declare var __VLS_14: {}, __VLS_16: {}, __VLS_22: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
@@ -33,13 +35,12 @@ declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}
     "onClick-outside"?: (args_0: MouseEvent) => any;
 }>, {
     position: BasePosition;
-    size: number | string;
     modelValue: boolean;
     closeOnPressEscape: boolean;
     appendToBody: boolean;
-    headerStyle: boolean;
-    footerStyle: boolean;
     closeOnClickOverlay: boolean;
+    headerStylize: boolean;
+    footerStylize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/list/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { provideListContext } from "../../contexts/list";
+import { provideListContext, provideListItemIndexContext } from "../../contexts/list";
 import { off, on } from "../../utils/events";
 import { getCssUnitValue } from "../../utils/format";
 import { isServer } from "../../utils/is";
@@ -18,29 +18,24 @@ const props = defineProps({
 const emits = defineEmits(["close", "toggle", "selected"]);
 const ITEM_CLASS = "pxd-list-item";
 const ITEM_SELECTOR = `.${ITEM_CLASS}`;
-const activeIndex = shallowRef(-1);
+const initialIndex = Number.NaN;
+const activeIndex = shallowRef(initialIndex);
+const increaseIndex = shallowRef(0);
 const allItems = shallowRef([]);
 const computedStyle = computed(() => {
   return {
     width: getCssUnitValue(props.width)
   };
 });
-function updateAllItemsIndex() {
-  allItems.value.forEach((item, index) => {
-    item.dataset.index = String(index);
-  });
-}
 function registerListItem(el) {
   if (!allItems.value.includes(el)) {
     allItems.value.push(el);
-    updateAllItemsIndex();
   }
 }
 function unregisterListItem(el) {
   const index = allItems.value.indexOf(el);
-  if (index > -1) {
+  if (index >= 0) {
     allItems.value.splice(index, 1);
-    updateAllItemsIndex();
   }
 }
 function getItemData(index) {
@@ -48,9 +43,10 @@ function getItemData(index) {
   if (!element) {
     return null;
   }
+  const { disabled, type = "default" } = element.dataset;
   return {
-    disabled: element.classList.contains("text-gray-700") || element.hasAttribute("disabled"),
-    type: element.classList.contains("text-red-900") ? "error" : void 0
+    disabled: disabled === "true",
+    type
   };
 }
 function getCorrectIndex(dir, index) {
@@ -70,6 +66,8 @@ function getCorrectIndex(dir, index) {
 }
 const PREV_KEYS = ["ArrowUp", "ArrowLeft"];
 const NEXT_KEYS = ["ArrowDown", "ArrowRight"];
+const FUNCTION_KEYS = ["Enter", "Escape", "Tab"];
+const PREVENT_DEFAULT_KEYS = [...FUNCTION_KEYS, ...PREV_KEYS, ...NEXT_KEYS];
 const THROTTLE_INTERVALS = 255;
 const containerKeydownThrottled = throttle((ev) => {
   const count = allItems.value.length;
@@ -89,10 +87,10 @@ const containerKeydownThrottled = throttle((ev) => {
     return;
   }
   if (PREV_KEYS.includes(key)) {
-    activeIndex.value = activeIndex.value === -1 ? count - 1 : getCorrectIndex("prev", activeIndex.value);
+    activeIndex.value = Object.is(activeIndex.value, initialIndex) ? count - 1 : getCorrectIndex("prev", activeIndex.value);
     emits("toggle", activeIndex.value);
   } else if (NEXT_KEYS.includes(key)) {
-    activeIndex.value = activeIndex.value === -1 ? 0 : getCorrectIndex("next", activeIndex.value);
+    activeIndex.value = Object.is(activeIndex.value, initialIndex) ? 0 : getCorrectIndex("next", activeIndex.value);
     emits("toggle", activeIndex.value);
   }
   if (allItems.value.length <= 0 || activeIndex.value < 0) {
@@ -103,7 +101,10 @@ const containerKeydownThrottled = throttle((ev) => {
   });
 }, THROTTLE_INTERVALS, { edges: ["leading"] });
 function onContainerKeydown(ev) {
-  ev.preventDefault();
+  if (PREVENT_DEFAULT_KEYS.includes(ev.key)) {
+    ev.preventDefault();
+  }
+  ev.stopPropagation();
   containerKeydownThrottled(ev);
 }
 function onPointerOver(ev) {
@@ -119,6 +120,7 @@ function onOptionClick(ev, index) {
   emits("selected", ev, index);
   emits("close");
 }
+provideListItemIndexContext(increaseIndex);
 provideListContext({
   activeIndex,
   onOptionClick,
@@ -132,9 +134,6 @@ onMounted(() => {
   on(document, "keydown", onContainerKeydown);
 });
 onBeforeUnmount(() => {
-  if (isServer) {
-    return;
-  }
   off(document, "keydown", onContainerKeydown);
   allItems.value = [];
 });
@@ -144,10 +143,9 @@ onBeforeUnmount(() => {
   <ul
     role="list"
     tabindex="-1"
-    class="pxd-list"
+    class="pxd-list max-w-full"
     :style="computedStyle"
     @pointerover="onPointerOver"
-    @keydown="onContainerKeydown"
   >
     <PScrollable class="max-h-68" content-class="pr-2">
       <slot>

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

@@ -1,14 +1,15 @@
 <script setup>
-import { computed, onMounted, onUnmounted, shallowRef } from "vue";
-import { useListContext } from "../../contexts/list";
+import { computed, onMounted, onUnmounted, shallowRef, useAttrs } from "vue";
+import { useListContext, useListItemIndexContext } from "../../contexts/list";
 defineOptions({
   name: "PListItem"
 });
 const props = defineProps({
   as: { type: null, required: false, default: "li" },
-  type: { type: String, required: false },
-  label: { type: [String, Number, Array, null], required: false },
-  disabled: { type: Boolean, required: false, default: false }
+  type: { type: null, required: false, default: "default" },
+  label: { type: null, required: false },
+  disabled: { type: null, required: false, default: false },
+  description: { type: null, required: false }
 });
 const emits = defineEmits(["click"]);
 const {
@@ -17,76 +18,56 @@ const {
   registerListItem,
   unregisterListItem
 } = useListContext();
+const listItemIndex = useListItemIndexContext();
+const attrs = useAttrs();
 const itemRef = shallowRef();
-const currentIndex = shallowRef(-1);
+const currentIndex = shallowRef(listItemIndex.value++);
+const itemTypeMap = {
+  error: "text-red-900 data-[selected=true]:bg-red-100",
+  warning: "text-amber-900 data-[selected=true]:bg-amber-100",
+  default: "text-foreground data-[selected=true]:bg-gray-alpha-100"
+};
+const isSelected = computed(() => activeIndex.value === currentIndex.value);
 const computedClass = computed(() => {
-  const classes = [];
-  if (props.type === "error") {
-    classes.push("text-red-900");
-  }
-  if (props.disabled) {
-    classes.push("pointer-events-none text-gray-700");
-  } else {
-    classes.push("cursor-pointer");
+  const classes = ["cursor-pointer data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700", attrs.class];
+  if (props.type) {
+    classes.push(itemTypeMap[props.type]);
   }
   return classes.join(" ");
 });
-function setRef(el) {
-  if (!el) {
-    return;
-  }
-  itemRef.value = el instanceof HTMLElement ? el : el.$el;
-  if (registerListItem) {
-    registerListItem(itemRef.value);
-  }
-  updateCurrentIndex();
-}
-function updateCurrentIndex() {
-  if (itemRef.value && itemRef.value.dataset.index) {
-    currentIndex.value = Number(itemRef.value.dataset.index);
-  }
-}
 function onItemClick(ev) {
   emits("click", ev, currentIndex.value);
   onOptionClick?.(ev, currentIndex.value);
 }
 onMounted(() => {
-  updateCurrentIndex();
-  const observer = new MutationObserver(() => {
-    updateCurrentIndex();
-  });
-  if (itemRef.value) {
-    observer.observe(itemRef.value, {
-      attributes: true,
-      attributeFilter: ["data-index"]
-    });
+  if (registerListItem) {
+    registerListItem(itemRef.value);
   }
-  onUnmounted(() => {
-    observer.disconnect();
-  });
 });
 onUnmounted(() => {
-  if (itemRef.value && unregisterListItem) {
+  if (unregisterListItem) {
     unregisterListItem(itemRef.value);
   }
 });
 </script>
 
 <template>
-  <component
+  <Component
     :is="as"
-    :ref="setRef"
+    ref="itemRef"
     tabindex="-1"
     role="listitem"
+    :data-type="type"
     :data-index="currentIndex"
     :data-disabled="disabled"
-    :data-selected="activeIndex === currentIndex"
-    class="pxd-list-item h-10 px-2 text-sm flex w-full items-center rounded-md outline-none data-[selected=true]:bg-gray-alpha-100 motion-safe:transition-colors"
+    :data-selected="isSelected"
+    class="pxd-list-item h-10 gap-1 px-2 text-sm flex w-full items-center rounded-md outline-none motion-safe:transition-colors"
     :class="computedClass"
     @click="onItemClick"
   >
     <slot>
-      {{ label }}
+      <span class="gap-2 flex items-center">{{ label }}</span>
+      <span v-if="description" class="text-sm text-foreground-secondary">{{ description }}</span>
     </slot>
   </component>
 </template>