pxd 0.0.28 → 0.0.29

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

@@ -24,7 +24,7 @@ declare var __VLS_6: {
 type __VLS_Slots = {} & {
     tooltip?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "cell-click": (args_0: MouseEvent, args_1: string) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onCell-click"?: (args_0: MouseEvent, args_1: string) => any;

package/dist/components/avatar/index.vue

@@ -39,7 +39,7 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar relative inline-flex items-center justify-center rounded-full border border-background-100 select-none"
+    class="pxd-avatar relative inline-flex size-(--size) items-center justify-center rounded-full border border-background-100 select-none"
     :style="{ '--size': computedSize }"
   >
     <slot>
@@ -60,7 +60,7 @@ defineExpose({
       >
     </slot>
 
-    <div v-if="loading" class="pxd-avatar--loading" />
+    <div v-if="loading" class="pxd-avatar--loading inset-0 backdrop-blur-xs absolute z-1 rounded-inherit" />
 
     <div
       v-if="$slots.icon"
@@ -73,9 +73,6 @@ defineExpose({
 
 <style lang="postcss">
 .pxd-avatar {
-  width: var(--size);
-  height: var(--size);
-
   &::before,
   &::after {
     content: '';
@@ -96,22 +93,14 @@ defineExpose({
   }
 }
 
-.pxd-avatar--loading {
+.pxd-avatar--loading::after {
+  content: '';
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  backdrop-filter: blur(1px);
-  z-index: 1;
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    border-style: solid;
-    border-width: 2px 2px 1px 0;
-    border-color: var(--color-primary) var(--color-primary) transparent transparent;
-  }
+  border-style: solid;
+  border-width: 2px 2px 1px 0;
+  border-color: var(--color-primary) var(--color-primary) transparent transparent;
 }
 
 @keyframes placeholder {

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

@@ -1,5 +1,5 @@
 import type { AvatarGroupProps } from '../../types/components/avatar';
-declare const _default: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
+declare const _default: import("vue").DefineComponent<AvatarGroupProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     max: number;
     options: import("../../types/components/avatar").Options[];
     size: number | string;

package/dist/components/badge/index.vue

@@ -42,7 +42,7 @@ const VARIANTS = {
 const config = useConfigProvider();
 const computedClass = computed(() => {
   const classes = [
-    "pxd-badge px-2.5 font-medium h-6 font-sans gap-1 inline-flex items-center justify-center rounded-full no-underline! motion-safe:transition-all",
+    "pxd-badge px-2.5 font-medium h-6 font-sans gap-1 inline-flex items-center justify-center rounded-full !no-underline motion-safe:transition-all",
     getFallbackValue(props.variant, VARIANTS, "gray"),
     getFallbackValue(props.size, SIZES, config.size),
     props.variant
@@ -69,20 +69,22 @@ const badgeAttrs = computed(() => {
   </component>
 </template>
 
-<style>
-.pxd-badge.pill {
-  box-shadow: 0 0 0 1px var(--color-gray-300);
-}
+<style lang="postcss">
+.pxd-badge {
+  &.pill {
+    box-shadow: 0 0 0 1px var(--color-gray-300);
+  }
 
-.pxd-badge.vue {
-  background: linear-gradient(315deg, #42d392 25%, #647eff);
-}
+  &.vue {
+    background: linear-gradient(315deg, #42d392 25%, #647eff);
+  }
 
-.pxd-badge.trial {
-  background: linear-gradient(135deg, #0070f3, #f81ce5);
-}
+  &.trial {
+    background: linear-gradient(135deg, #0070f3, #f81ce5);
+  }
 
-.pxd-badge.turborepo {
-  background: linear-gradient(135deg, #ff1e56, #0096ff);
+  &.turborepo {
+    background: linear-gradient(135deg, #ff1e56, #0096ff);
+  }
 }
 </style>

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

@@ -37,7 +37,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: keyof typeof VARIANTS;
     as: ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -14,7 +14,7 @@ type __VLS_Slots = {} & {
 } & {
     icon?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: "simple" | "stripe";
     width: number;
     textured: boolean;

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

@@ -5,7 +5,7 @@ declare var __VLS_38: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_38) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/button/index.vue

@@ -43,9 +43,9 @@ const FONT_SIZES = {
 const VARIANTS = {
   simple: "",
   default: "bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active border-input",
-  ghost: "bg-transparent text-foreground hover:bg-gray-alpha-200 active:bg-gray-alpha-300 border-transparent",
+  ghost: "bg-transparent text-foreground hover:bg-background-hover active:bg-background-active border-transparent",
   primary: "bg-primary text-gray-100 hover:bg-primary/80 active:bg-gray-900 border-transparent",
-  error: "bg-red-800 text-white  hover:bg-red-700 active:bg-red-900 border-transparent",
+  error: "bg-red-800 text-white hover:bg-red-700 active:bg-red-900 border-transparent",
   warning: "bg-amber-800 text-black hover:bg-amber-700 active:bg-amber-900 border-transparent",
   success: "bg-green-800 text-white hover:bg-green-700 active:bg-green-900 border-transparent"
 };
@@ -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 cursor-not-allowed text-gray-700 border-gray-300";
+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 config = useConfigProvider();
 const computedDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading));
 const computedClass = computed(() => {

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

@@ -7,7 +7,7 @@ type __VLS_Slots = {} & {
 } & {
     suffix?: (props: typeof __VLS_19) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<ButtonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (args_0: MouseEvent) => any;
     dblclick: (args_0: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{

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

@@ -2,7 +2,7 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1,6 +1,7 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { usePointerGesture } from "../../composables/usePointerGesture";
 import { provideCarouselGroupContext } from "../../contexts/carousel";
 import { getCssUnitValue } from "../../utils/format";
 import { throttle } from "../../utils/throttle";
@@ -24,9 +25,11 @@ const props = defineProps({
 const emits = defineEmits(["change"]);
 const THROTTLE_INTERVALS = 550;
 const TRANSITION_CLASSES = ["transition-transform", "duration-500"];
-let autoPlayTimer;
-const sliderRef = shallowRef();
+let autoPlayRafId = null;
+let autoPlaySession = 0;
+let isPointerEntering = false;
 const carousels = ref([]);
+const sliderRef = shallowRef(null);
 const virtualIndex = shallowRef(props.index);
 const correctIndex = computed(() => {
   const index = virtualIndex.value;
@@ -55,15 +58,14 @@ const onToggleClick = throttle((delta) => {
   if (length === 0) {
     return;
   }
-  onPointerEnter();
   if (props.loop) {
     virtualIndex.value += delta;
     translateItems();
   } else {
     virtualIndex.value = Math.max(0, Math.min(virtualIndex.value + delta, length - 1));
   }
-  nextTick(onPointerLeave);
   emits("change", correctIndex.value);
+  nextTick(onPointerLeave);
 }, THROTTLE_INTERVALS, { edges: ["leading"] });
 function onWheelToggle(ev) {
   if (!props.toggleOnWheel) {
@@ -85,7 +87,10 @@ function resetContainerPosition(resetIndex) {
     containerClassList.add(...TRANSITION_CLASSES);
   }, 0);
 }
-function onTransitionsEnd() {
+function onTransitionsEnd(ev) {
+  if (ev.propertyName !== "transform" || ev.target !== sliderRef.value) {
+    return;
+  }
   if (!props.loop) {
     return;
   }
@@ -95,34 +100,55 @@ function onTransitionsEnd() {
     resetContainerPosition(carousels.value.length - 1);
   }
 }
+function clearAutoPlayTimer() {
+  autoPlaySession++;
+  if (autoPlayRafId != null) {
+    cancelAnimationFrame(autoPlayRafId);
+    autoPlayRafId = null;
+  }
+}
 function setAutoPlayTimer() {
+  const mySession = autoPlaySession;
   const startTime = performance.now();
-  function onAnimationFrame() {
+  const onAnimationFrame = () => {
+    if (mySession !== autoPlaySession || isPointerEntering) {
+      return;
+    }
     const currentTime = performance.now();
     const elapsedTime = currentTime - startTime;
     if (elapsedTime >= props.interval) {
       onToggleClick(1);
-      setAutoPlayTimer();
-    } else {
-      autoPlayTimer = requestAnimationFrame(onAnimationFrame);
+      return;
     }
-  }
-  autoPlayTimer = requestAnimationFrame(onAnimationFrame);
+    autoPlayRafId = requestAnimationFrame(onAnimationFrame);
+  };
+  autoPlayRafId = requestAnimationFrame(onAnimationFrame);
 }
 function onPointerEnter() {
-  cancelAnimationFrame(autoPlayTimer);
+  if (props.pauseOnHover) {
+    isPointerEntering = true;
+    clearAutoPlayTimer();
+  }
 }
 function onPointerLeave() {
+  isPointerEntering = false;
   if (!props.autoplay) {
     return;
   }
+  clearAutoPlayTimer();
   setAutoPlayTimer();
 }
 function onIndicatorClick(ev) {
-  onPointerEnter();
-  const target = ev.target;
-  const targetIndex = Number(target.dataset.index);
-  virtualIndex.value = targetIndex;
+  clearAutoPlayTimer();
+  const targetEl = ev.target.closest("[data-index]");
+  const targetIndex = Number(targetEl?.dataset.index);
+  if (Number.isNaN(targetIndex)) {
+    return;
+  }
+  const deltaIndex = targetIndex - virtualIndex.value;
+  if (deltaIndex !== 0) {
+    onToggleClick(deltaIndex);
+  }
   nextTick(onPointerLeave);
 }
 function registerCarousel(state) {
@@ -131,16 +157,38 @@ function registerCarousel(state) {
 function unregisterCarousel(id) {
   carousels.value = carousels.value.filter(({ uid }) => uid !== id);
 }
+usePointerGesture(sliderRef, {
+  axis: () => props.direction === "horizontal" ? "x" : "y",
+  directionGuard: (d) => {
+    if (props.direction === "horizontal") {
+      return d === "left" || d === "right";
+    }
+    return d === "up" || d === "down";
+  },
+  onRelease(hit, dir, kind) {
+    if (!hit || !dir || kind === "longpress") {
+      return;
+    }
+    if (dir === "left" || dir === "up") {
+      onToggleClick(1);
+    } else if (dir === "right" || dir === "down") {
+      onToggleClick(-1);
+    }
+  }
+});
 provideCarouselGroupContext({
   props,
   carousels,
   registerCarousel,
   unregisterCarousel
 });
-onMounted(() => {
+onMounted(async () => {
   onPointerLeave();
+  await nextTick();
+  translateItems();
 });
 onBeforeUnmount(() => {
+  clearAutoPlayTimer();
   carousels.value = [];
 });
 </script>
@@ -151,7 +199,7 @@ onBeforeUnmount(() => {
     :data-direction="direction"
     :data-indicator-type="indicatorType"
     :data-indicator-position="indicatorPosition"
-    class="pxd-carousel-group group relative w-full touch-manipulation overflow-hidden"
+    class="pxd-carousel-group group relative w-full touch-none overflow-hidden"
     :style="{ height: getCssUnitValue(height) }"
     @pointerenter="onPointerEnter"
     @pointerleave="onPointerLeave"
@@ -160,7 +208,7 @@ onBeforeUnmount(() => {
     <div class="pxd-carousel-group--container size-full">
       <div
         ref="sliderRef"
-        class="pxd-carousel-group--slider translate-z-0 size-full group-hover:will-change-transform group-data-[direction=horizontal]:flex"
+        class="pxd-carousel-group--slider translate-z-0 size-full group-data-[direction=horizontal]:flex"
         :style="computedStyle"
         :class="TRANSITION_CLASSES"
         @transitionend="onTransitionsEnd"
@@ -174,20 +222,22 @@ onBeforeUnmount(() => {
       class="pxd-carousel-group--indicator gap-2 absolute flex w-max items-center group-data-[indicator-position=left]:flex-col group-data-[indicator-position=right]:flex-col"
       @click="onIndicatorClick"
     >
-      <button
-        v-for="(_, i) in carousels.length"
-        :key="i"
-        :data-index="i"
-        class="pxd-carousel-group--indicator-item relative h-(--h) w-(--w) cursor-pointer appearance-none rounded-full bg-gray-alpha-200 self-focus-ring outline-none hover:bg-gray-alpha-400 motion-safe:transition-colors"
-        :class="{ 'bg-primary!': i === correctIndex }"
-      />
+      <slot name="indicator" :current="correctIndex + 1" :total="carousels.length">
+        <button
+          v-for="(_, i) in carousels.length"
+          :key="i"
+          :data-index="i"
+          class="pxd-carousel-group--indicator-item relative h-(--h) w-(--w) cursor-pointer appearance-none rounded-full bg-gray-alpha-200 self-focus-ring outline-none hover:bg-gray-alpha-400 motion-safe:transition-colors"
+          :class="{ '!bg-primary': i === correctIndex }"
+        />
+      </slot>
     </div>
 
     <div v-if="arrow" class="pxd-carousel-group--toggle-buttons gap-2 absolute flex group-data-[indicator-position=left]:flex-col group-data-[indicator-position=right]:flex-col">
       <button
         type="button"
         aria-label="Carousel arrow left"
-        class="pxd-carousel-group--prev-button p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 self-focus-ring outline-none group-data-[direction=vertical]:rotate-90 hover:bg-gray-alpha-200 active:bg-gray-alpha-300 disabled:pointer-events-none motion-safe:transition-colors"
+        class="pxd-carousel-group--prev-button p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 text-foreground-secondary self-focus-ring outline-none group-data-[direction=vertical]:rotate-90 hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
         @click="onToggleClick(-1)"
       >
         <ChevronRightIcon class="rotate-180" />
@@ -196,7 +246,7 @@ onBeforeUnmount(() => {
       <button
         type="button"
         aria-label="Carousel arrow right"
-        class="pxd-carousel-group--next-button p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 self-focus-ring outline-none group-data-[direction=vertical]:rotate-90 hover:bg-gray-alpha-200 active:bg-gray-alpha-300 disabled:pointer-events-none motion-safe:transition-colors"
+        class="pxd-carousel-group--next-button p-1.5 cursor-pointer appearance-none rounded-md bg-gray-alpha-100 text-foreground-secondary self-focus-ring outline-none group-data-[direction=vertical]:rotate-90 hover:bg-background-hover active:bg-background-active disabled:pointer-events-none motion-safe:transition-colors"
         @click="onToggleClick(1)"
       >
         <ChevronRightIcon />

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

@@ -1,9 +1,14 @@
 import type { CarouselGroupProps } from '../../types/components/carousel';
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {
+    current: number;
+    total: number;
+};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
+} & {
+    indicator?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<CarouselGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<CarouselGroupProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (index: number) => any;
 }, string, import("vue").PublicProps, Readonly<CarouselGroupProps> & Readonly<{
     onChange?: (index: number) => any;
@@ -11,7 +16,7 @@ declare const __VLS_component: import("vue").DefineComponent<CarouselGroupProps,
     index: number;
     interval: number;
     height: number | string;
-    direction: "horizontal" | "vertical";
+    direction: import("../../types/shared").ComponentDirection;
     autoplay: boolean;
     loop: boolean;
     arrow: boolean;

package/dist/components/chip/index.vue

@@ -38,7 +38,7 @@ const computedClass = computed(() => {
 </template>
 
 <style>
-.pxd-chip--label:after {
+.pxd-chip--label::after {
   display: block;
   content: attr(data-label);
   transform: scale(0.875);

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

@@ -9,7 +9,7 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: ComponentVariant | "secondary";
     label: ComponentLabel;
     size: number | string;

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

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 } & {
     description?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<ChoiceboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChoiceboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<ChoiceboxProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChoiceboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<ChoiceboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<ChoiceboxGroupProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[]>) => any;
 }, string, import("vue").PublicProps, Readonly<ChoiceboxGroupProps> & Readonly<{
     "onUpdate:modelValue"?: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[]>) => any;

package/dist/components/collapse/index.vue

@@ -64,7 +64,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pxd-collapse border-b will-change-contents">
+  <div class="pxd-collapse group/collapse border-b">
     <h3 class="pxd-collapse--title">
       <button
         class="pxd-collapse--trigger pr-1 group/collapse flex w-full cursor-pointer appearance-none items-center justify-between border-none bg-transparent self-focus-ring outline-none"
@@ -87,7 +87,7 @@ onMounted(() => {
       @before-leave="beforeLeave"
       @leave="leave"
     >
-      <div v-show="isExpanded" class="pxd-collapse--content">
+      <div v-show="isExpanded" class="pxd-collapse--content group-hover/collapse:will-change-[height]">
         <slot />
       </div>
     </Transition>
@@ -101,10 +101,6 @@ onMounted(() => {
   font-weight: var(--font-weight, 600);
 }
 
-.pxd-collapse--content {
-  will-change: height;
-}
-
 .pxd-transition--collapse-enter-active,
 .pxd-transition--collapse-leave-active {
   transition: height var(--default-transition-duration) var(--default-transition-timing-function);

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

@@ -8,7 +8,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_20) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     title: string;
     expand: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -7,7 +7,7 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     multiple: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -7,7 +7,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: import("../../types/shared").ComponentSize;
     as: ComponentAs;
     locale: Record<string, any>;

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

@@ -9,7 +9,7 @@ type __VLS_Slots = {} & {
 } & {
     content?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -21,7 +21,7 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_24) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     open: () => any;
     close: () => any;
     "update:modelValue": (args_0: boolean) => any;

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

@@ -12,7 +12,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -9,7 +9,7 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: ComponentSizeWithXs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;