pxd 0.0.26 → 0.0.28

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

@@ -270,9 +270,9 @@ onBeforeUnmount(() => {
           <th
             v-for="(col, i) in tableHeadList"
             :key="col + i"
-            class="relative font-normal text-foreground-secondary"
+            class="font-normal relative text-foreground-secondary"
           >
-            <span class="absolute -top-1 left-0 whitespace-nowrap">{{ col }}</span>
+            <span class="-top-1 left-0 absolute whitespace-nowrap">{{ col }}</span>
           </th>
         </tr>
       </thead>
@@ -284,8 +284,8 @@ onBeforeUnmount(() => {
         @pointerover.capture="onMouseOver"
       >
         <tr v-for="(row, i) of tableBodyList" :key="i" class="h-3">
-          <td class="pxd-active-graph--label relative leading-none text-foreground-secondary overflow-hidden">
-            <span class="absolute top-0 right-1">
+          <td class="pxd-active-graph--label relative overflow-hidden leading-none text-foreground-secondary">
+            <span class="top-0 right-1 absolute">
               {{ row.headerText }}
             </span>
           </td>
@@ -301,10 +301,10 @@ onBeforeUnmount(() => {
         </tr>
 
         <template v-if="props.legend">
-          <tr class="pxd-active-graph--placeholder pointer-events-none h-0.5" />
+          <tr class="pxd-active-graph--placeholder h-0.5 pointer-events-none" />
           <tr class="pxd-active-graph--legend pointer-events-none">
-            <td class="relative h-3 text-foreground-secondary">
-              <span class="absolute top-1/2 right-1 -translate-y-1/2">{{ config.locale.compare.less }}</span>
+            <td class="h-3 relative text-foreground-secondary">
+              <span class="right-1 absolute top-1/2 -translate-y-1/2">{{ config.locale.compare.less }}</span>
             </td>
 
             <td
@@ -314,7 +314,7 @@ onBeforeUnmount(() => {
               :style="`background-color: ${color}`"
             />
 
-            <td class="relative h-3 text-foreground-secondary w-3">
+            <td class="h-3 w-3 relative text-foreground-secondary">
               <span class="absolute top-1/2 left-px -translate-y-1/2">{{ config.locale.compare.more }}</span>
             </td>
           </tr>
@@ -325,7 +325,7 @@ onBeforeUnmount(() => {
     <Transition name="pxd-transition--fade">
       <div
         v-if="showTooltip"
-        class="pxd-active-graph--tooltip left-0 top-0 bg-gray-1000 pointer-events-none text-gray-100 absolute z-10 px-2 py-1 text-[13px] rounded-sm w-max duration-50 will-change-transform motion-safe:transition-transform"
+        class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-10 w-max rounded-sm bg-gray-1000 text-[13px] text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
         :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
       >
         <slot name="tooltip" :data="tooltipInfo">

package/dist/components/avatar/index.vue

@@ -39,7 +39,7 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar inline-flex items-center justify-center relative rounded-full border border-background select-none"
+    class="pxd-avatar relative inline-flex items-center justify-center rounded-full border border-background-100 select-none"
     :style="{ '--size': computedSize }"
   >
     <slot>
@@ -52,7 +52,7 @@ defineExpose({
         aria-hidden="true"
         fetchpriority="low"
         crossorigin="anonymous"
-        class="relative block rounded-inherit overflow-hidden w-full h-full"
+        class="relative block size-full overflow-hidden rounded-inherit"
         @load="onLoadSuccess"
         @loadstart="onLoadStart"
         @abort="onLoadError"
@@ -64,7 +64,7 @@ defineExpose({
 
     <div
       v-if="$slots.icon"
-      class="absolute -bottom-1 -left-1 z-10 w-1/2 h-1/2 flex items-center rounded-full border border-background bg-background overflow-hidden"
+      class="-bottom-1 -left-1 absolute z-10 flex size-1/2 items-center overflow-hidden rounded-full border border-background-100 bg-background-100"
     >
       <slot name="icon" />
     </div>
@@ -126,7 +126,7 @@ defineExpose({
 
 @media (prefers-reduced-motion: no-preference) {
   .pxd-avatar::before {
-    animation: placeholder 8s ease-in-out infinite;
+    animation: placeholder 8s var(--default-transition-timing-function) infinite;
   }
 
   .pxd-avatar--loading::after {

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

@@ -27,10 +27,10 @@ provideAvatarGroupContext(props);
       :src="option.src"
       :alt="option.alt"
       :loading="option.loading"
-      class="[&:nth-child(n+2)]:-ml-3"
+      class="[&:nth-child(n+2)]:-ml-3 hover:z-10"
     />
 
-    <PAvatar v-if="slicedOptions.length < options.length" class="text-xs bg-gray-1000 text-gray-100 -ml-3">
+    <PAvatar v-if="slicedOptions.length < options.length" class="text-xs -ml-3 bg-gray-1000 text-gray-100">
       +{{ options.length - slicedOptions.length }}
     </PAvatar>
   </div>

package/dist/components/badge/index.vue

@@ -17,7 +17,7 @@ const SIZES = {
   lg: "px-3 h-7.5 text-sm"
 };
 const VARIANTS = {
-  "pill": "bg-background",
+  "pill": "bg-background-100",
   "gray": "bg-gray-600 text-white",
   "blue": "bg-blue-700 text-gray-100 dark:text-gray-1000",
   "purple": "bg-purple-700 text-gray-100 dark:text-gray-1000",
@@ -42,7 +42,7 @@ const VARIANTS = {
 const config = useConfigProvider();
 const computedClass = computed(() => {
   const classes = [
-    "pxd-badge inline-flex items-center justify-center px-2.5 font-medium h-6 rounded-full font-sans gap-1 !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

package/dist/components/book/index.vue

@@ -38,7 +38,7 @@ const computedStyle = computed(() => {
   };
 });
 const computedClass = computed(() => {
-  const classes = ["pxd-book--container w-fit relative transform-3d duration-300 motion-safe:transition-transform"];
+  const classes = ["pxd-book--container relative w-fit duration-300 transform-3d motion-safe:transition-transform"];
   classes.push(
     ...Object.keys(formattedWidth.value).map((bp) => presetWidthClasses[bp])
   );
@@ -49,27 +49,27 @@ const computedClass = computed(() => {
 <template>
   <div class="pxd-book inline-flex w-fit">
     <div :class="computedClass" :style="computedStyle">
-      <div class="pxd-book--content absolute w-full min-w-full flex flex-col h-full overflow-hidden translate-z-0 bg-background-secondary">
+      <div class="pxd-book--content translate-z-0 absolute flex size-full min-w-full flex-col overflow-hidden bg-background-200">
         <div
           v-if="variant === 'stripe'"
-          class="flex w-full relative flex-1 overflow-hidden translate-z-0"
+          class="translate-z-0 relative flex w-full flex-1 overflow-hidden"
           style="background-color: var(--book-color, var(--color-amber-600))"
         >
-          <div class="absolute flex flex-col w-full object-cover">
+          <div class="absolute flex w-full flex-col object-cover">
             <slot name="icon" />
           </div>
 
-          <div aria-hidden="true" class="pxd-book--spine absolute left-0 h-full mix-blend-overlay" />
+          <div aria-hidden="true" class="pxd-book--spine left-0 absolute h-full mix-blend-overlay" />
         </div>
 
         <div
           :class="{ 'pxd-book--cover-simple': variant === 'simple' }"
-          class="flex w-full relative flex-1 overflow-hidden translate-z-0"
+          class="translate-z-0 relative flex w-full flex-1 overflow-hidden"
         >
           <div aria-hidden="true" class="pxd-book--spine h-full opacity-20" />
 
-          <div class="pxd-book--content-inner flex flex-col w-full">
-            <span class="pxd-book--title font-semibold text-balance break-all pr-2">
+          <div class="pxd-book--content-inner flex w-full flex-col">
+            <span class="pxd-book--title font-semibold pr-2 text-balance break-all">
               <slot name="title">
                 {{ title }}
               </slot>
@@ -83,11 +83,11 @@ const computedClass = computed(() => {
           </div>
         </div>
 
-        <div v-if="textured" class="pxd-book--textured absolute inset-0 opacity-50 pointer-events-none bg-cover" />
+        <div v-if="textured" class="pxd-book--textured inset-0 pointer-events-none absolute bg-cover opacity-50" />
       </div>
 
       <div aria-hidden="true" class="pxd-book--pages absolute" />
-      <div aria-hidden="true" class="pxd-book--back absolute left-0 w-full h-full bg-gray-200" />
+      <div aria-hidden="true" class="pxd-book--back left-0 absolute size-full bg-gray-200" />
     </div>
   </div>
 </template>

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

@@ -2,7 +2,7 @@ import type { ComponentLabel, ResponsiveValue } from '../../types/shared';
 interface Props {
     color?: string;
     title?: ComponentLabel;
-    width?: number | string | ResponsiveValue<number>;
+    width?: ResponsiveValue<number | string>;
     variant?: 'simple' | 'stripe';
     textured?: boolean;
 }

package/dist/components/browser/index.vue

@@ -14,27 +14,27 @@ const { renderAs, onCopyClick } = useCopyClick();
 </script>
 
 <template>
-  <div class="pxd-browser shadow-border-small rounded-md overflow-hidden bg-background-secondary">
-    <div class="bg-background py-2.5 px-5 flex justify-between gap-4 md:gap-6">
-      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px]">
-        <div class="flex items-center gap-2">
+  <div class="pxd-browser overflow-hidden rounded-md bg-background-200 shadow-border-small">
+    <div class="py-2.5 px-5 gap-4 md:gap-6 flex justify-between bg-background-100">
+      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 items-center justify-center max-md:first:flex-none first:justify-start last:justify-end">
+        <div class="gap-2 flex items-center">
           <div class="w-3 h-3 rounded-full bg-[#FE5F57]" />
           <div class="w-3 h-3 rounded-full bg-[#FEBB2E]" />
           <div class="w-3 h-3 rounded-full bg-[#26C941]" />
         </div>
 
-        <div class="flex items-center gap-4 max-md:hidden text-sm text-gray-900">
+        <div class="gap-4 text-sm flex items-center text-gray-900 max-md:hidden">
           <ArrowLeftIcon />
           <ArrowLeftIcon class="rotate-180" />
           <RefreshClockwiseIcon />
         </div>
       </div>
 
-      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px]">
-        <div class="lg:max-w-xs bg-background-secondary border border-gray-400 w-full rounded-full pl-2.5 pr-1 py-1 flex items-center justify-between">
-          <LockClosedIcon class="text-gray-900 text-sm" />
+      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 items-center justify-center max-md:first:flex-none first:justify-start last:justify-end">
+        <div class="lg:max-w-xs pl-2.5 pr-1 py-1 flex w-full items-center justify-between rounded-full border border-gray-400 bg-background-200">
+          <LockClosedIcon class="text-sm text-gray-900" />
 
-          <div class="pl-1.5 text-[13px] text-gray-1000 truncate flex-1 min-w-0 text-center truncate">
+          <div class="pl-1.5 min-w-0 flex-1 truncate text-center text-[13px] text-gray-1000">
             {{ address }}
           </div>
 
@@ -46,7 +46,7 @@ const { renderAs, onCopyClick } = useCopyClick();
         </div>
       </div>
 
-      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px] max-lg:hidden" />
+      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 items-center justify-center max-md:first:flex-none max-lg:hidden first:justify-start last:justify-end" />
     </div>
 
     <slot />

package/dist/components/button/index.vue

@@ -42,7 +42,7 @@ const FONT_SIZES = {
 };
 const VARIANTS = {
   simple: "",
-  default: "bg-background text-foreground hover:bg-background-hover active:bg-background-active border-input",
+  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",
   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",
@@ -56,16 +56,16 @@ const ALIGNMENTS = {
 };
 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 config = useConfigProvider();
-const computedDisabled = computed(() => props.disabled || props.loading);
+const computedDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading));
 const computedClass = computed(() => {
-  const classes = ["pxd-button cursor-pointer select-none shrink-0 items-center motion-safe:transition-all", ALIGNMENTS[props.align]];
+  const classes = ["pxd-button shrink-0 cursor-pointer items-center select-none motion-safe:transition-all", ALIGNMENTS[props.align]];
   const { variant, block, shape, icon } = props;
   classes.push(
     isTruthyProp(block) ? "flex w-full" : "inline-flex",
     getFallbackValue(props.size, FONT_SIZES, config.size),
     shape ? ROUNDED[shape] : getFallbackValue(props.size, ROUNDED, config.size)
   );
-  if (icon) {
+  if (isTruthyProp(icon)) {
     classes.push("aspect-square !p-0");
   }
   if (variant !== "simple") {

package/dist/components/carousel/index.vue

@@ -37,7 +37,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="pxd-carousel w-full h-full shrink-0" :style="{ transform: transformStyle }">
+  <div class="pxd-carousel size-full shrink-0" :style="{ transform: transformStyle }">
     <slot />
   </div>
 </template>

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

@@ -1,9 +1,9 @@
 <script setup>
 import ChevronRightIcon from "@gdsicon/vue/chevron-right";
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 import { provideCarouselGroupContext } from "../../contexts/carousel";
-import { throttle } from "../../utils/fn";
 import { getCssUnitValue } from "../../utils/format";
+import { throttle } from "../../utils/throttle";
 defineOptions({
   name: "PCarouselGroup"
 });
@@ -25,7 +25,7 @@ const emits = defineEmits(["change"]);
 const THROTTLE_INTERVALS = 550;
 const TRANSITION_CLASSES = ["transition-transform", "duration-500"];
 let autoPlayTimer;
-const containerRef = shallowRef();
+const sliderRef = shallowRef();
 const carousels = ref([]);
 const virtualIndex = shallowRef(props.index);
 const correctIndex = computed(() => {
@@ -55,14 +55,16 @@ 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);
-}, THROTTLE_INTERVALS, { leading: true, trailing: false });
+}, THROTTLE_INTERVALS, { edges: ["leading"] });
 function onWheelToggle(ev) {
   if (!props.toggleOnWheel) {
     return;
@@ -75,7 +77,7 @@ function onWheelToggle(ev) {
   }
 }
 function resetContainerPosition(resetIndex) {
-  const containerClassList = containerRef.value.classList;
+  const containerClassList = sliderRef.value.classList;
   containerClassList.remove(...TRANSITION_CLASSES);
   virtualIndex.value = resetIndex;
   translateItems();
@@ -117,9 +119,11 @@ function onPointerLeave() {
   setAutoPlayTimer();
 }
 function onIndicatorClick(ev) {
+  onPointerEnter();
   const target = ev.target;
   const targetIndex = Number(target.dataset.index);
   virtualIndex.value = targetIndex;
+  nextTick(onPointerLeave);
 }
 function registerCarousel(state) {
   carousels.value.push(state);
@@ -147,41 +151,43 @@ onBeforeUnmount(() => {
     :data-direction="direction"
     :data-indicator-type="indicatorType"
     :data-indicator-position="indicatorPosition"
-    class="pxd-carousel-group group w-full relative overflow-hidden touch-manipulation"
+    class="pxd-carousel-group group relative w-full touch-manipulation overflow-hidden"
     :style="{ height: getCssUnitValue(height) }"
     @pointerenter="onPointerEnter"
     @pointerleave="onPointerLeave"
     @wheel="onWheelToggle"
   >
-    <div
-      ref="containerRef"
-      class="pxd-carousel-group--container w-full h-full translate-z-0 group-data-[direction=horizontal]:flex group-hover:will-change-transform"
-      :style="computedStyle"
-      :class="TRANSITION_CLASSES"
-      @transitionend="onTransitionsEnd"
-    >
-      <slot />
+    <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"
+        :style="computedStyle"
+        :class="TRANSITION_CLASSES"
+        @transitionend="onTransitionsEnd"
+      >
+        <slot />
+      </div>
     </div>
 
     <div
       v-if="indicator"
-      class="pxd-carousel-group--indicator absolute w-max flex items-center gap-2 group-data-[indicator-position=left]:flex-col group-data-[indicator-position=right]:flex-col"
+      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 w-(--w) h-(--h) self-focus-ring relative rounded-full appearance-none cursor-pointer outline-none bg-gray-alpha-200 motion-safe:transition-colors hover:bg-gray-alpha-400"
-        :class="{ '!bg-primary': i === correctIndex }"
+        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 }"
       />
     </div>
 
-    <div v-if="arrow" class="pxd-carousel-group--toggle-buttons flex gap-2 absolute group-data-[indicator-position=left]:flex-col group-data-[indicator-position=right]:flex-col">
+    <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 outline-none self-focus-ring group-data-[direction=vertical]:rotate-90 appearance-none p-1.5 rounded-md bg-gray-alpha-200 cursor-pointer disabled:pointer-events-none hover:bg-gray-alpha-100 hover:bg-gray-alpha-200 active:bg-gray-alpha-400 motion-safe:transition-colors"
+        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"
         @click="onToggleClick(-1)"
       >
         <ChevronRightIcon class="rotate-180" />
@@ -190,7 +196,7 @@ onBeforeUnmount(() => {
       <button
         type="button"
         aria-label="Carousel arrow right"
-        class="pxd-carousel-group--next-button outline-none self-focus-ring group-data-[direction=vertical]:rotate-90 appearance-none p-1.5 rounded-md bg-gray-alpha-200 cursor-pointer disabled:pointer-events-none hover:bg-gray-alpha-100 hover:bg-gray-alpha-200 active:bg-gray-alpha-400 motion-safe:transition-colors outline-none"
+        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"
         @click="onToggleClick(1)"
       >
         <ChevronRightIcon />

package/dist/components/checkbox/index.vue

@@ -37,8 +37,8 @@ const computedDisabled = computed(() => props.disabled || checkboxGroupContext?.
 const computedRequired = computed(() => props.required || checkboxGroupContext?.required);
 const computedClass = computed(() => {
   const classes = [
-    "pxd-checkbox--inner size-4 shrink-0 inline-flex items-center justify-center peer-focus-ring",
-    "rounded-sm border overflow-hidden transform-gpu motion-safe:transition-colors"
+    "pxd-checkbox--inner size-4 inline-flex shrink-0 items-center justify-center peer-focus-ring",
+    "transform-gpu overflow-hidden rounded-sm border motion-safe:transition-colors"
   ];
   if (isChecked.value) {
     classes.push(
@@ -46,7 +46,7 @@ const computedClass = computed(() => {
     );
   } else {
     classes.push(
-      computedDisabled.value ? "bg-gray-100 border-gray-500" : "bg-background border-gray-alpha-400 group-hover/checkbox:bg-gray-200"
+      computedDisabled.value ? "bg-gray-100 border-gray-500" : "bg-background-100 border-gray-alpha-400 group-hover/checkbox:bg-gray-200"
     );
   }
   return classes.join(" ");
@@ -75,8 +75,9 @@ defineExpose({
 
 <template>
   <label
+    role="checkbox"
     :aria-checked="isChecked"
-    class="pxd-checkbox inline-flex items-center group/checkbox gap-2"
+    class="pxd-checkbox group/checkbox gap-2 inline-flex items-center"
     :class="{ 'is-disabled cursor-not-allowed text-gray-500': computedDisabled }"
     :for="uniqueId"
   >
@@ -84,7 +85,7 @@ defineExpose({
       :id="uniqueId"
       :value="value"
       type="checkbox"
-      class="smallest peer"
+      class="peer smallest"
       :checked="isChecked"
       :required="computedRequired"
       :disabled="computedDisabled"
@@ -97,7 +98,7 @@ defineExpose({
       <span v-else class="size-3" />
     </span>
 
-    <span class="flex-1 text-sm empty:hidden">
+    <span class="text-sm flex-1 empty:hidden">
       <slot>
         {{ label }}
       </slot>

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

@@ -37,7 +37,7 @@ defineExpose({
 </script>
 
 <template>
-  <PStack class="pxd-checkbox-group" v-bind="$attrs">
+  <PStack class="pxd-checkbox-group" role="group" aria-label="Checkbox Group" v-bind="$attrs">
     <slot>
       <PCheckbox
         v-for="option in options"

package/dist/components/chip/index.vue

@@ -9,14 +9,14 @@ const props = defineProps({
   variant: { type: String, required: false, default: "primary" }
 });
 const variantPresets = {
-  primary: "bg-primary text-background",
-  error: "bg-red-700 text-background dark:text-gray-1000",
+  primary: "bg-primary text-background-100",
+  error: "bg-red-700 text-background-100 dark:text-gray-1000",
   warning: "bg-amber-700 text-gray-1000 dark:text-gray-100",
-  success: "bg-green-700 text-background dark:text-gray-1000",
-  secondary: "bg-gray-700 text-background dark:text-gray-1000"
+  success: "bg-green-700 text-background-100 dark:text-gray-1000",
+  secondary: "bg-gray-700 text-background-100 dark:text-gray-1000"
 };
 const computedClass = computed(() => {
-  const classes = ["pxd-chip--label absolute border rounded-full border-background text-xs top-0 right-0 motion-safe:transition-all"];
+  const classes = ["pxd-chip--label text-xs top-0 right-0 absolute rounded-full border border-background-100 motion-safe:transition-all"];
   const { variant, inset, label } = props;
   if (!label) {
     classes.push("size-(--size)");
@@ -30,7 +30,7 @@ const computedClass = computed(() => {
 </script>
 
 <template>
-  <div class="pxd-chip inline-flex relative shrink-0">
+  <div class="pxd-chip relative inline-flex shrink-0">
     <slot />
 
     <span :data-label="label" :class="computedClass" :style="{ '--size': getCssUnitValue(size) }" />

package/dist/components/choicebox/index.vue

@@ -29,7 +29,7 @@ const computedAttrs = computed(() => {
 
 <template>
   <component :is="renderComponent" v-model="choiceboxModelValue" v-bind="computedAttrs">
-    <div class="flex flex-col gap-1">
+    <div class="gap-1 flex flex-col">
       <span class="pxd-choicebox--label font-medium">
         <slot name="label">
           {{ label }}
@@ -56,7 +56,7 @@ const computedAttrs = computed(() => {
 }
 
 .pxd-choicebox.is-disabled {
-  background-color: var(--color-background);
+  background-color: var(--color-background-100);
   border-color: var(--color-border);
 
   .pxd-choicebox--label,

package/dist/components/collapse/index.vue

@@ -67,7 +67,7 @@ onMounted(() => {
   <div class="pxd-collapse border-b will-change-contents">
     <h3 class="pxd-collapse--title">
       <button
-        class="pxd-collapse--trigger flex items-center justify-between w-full pr-1 appearance-none group/collapse cursor-pointer outline-none border-none bg-transparent self-focus-ring"
+        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"
         :data-state="isExpanded ? 'open' : 'closed'"
         @click="onTriggerClick"
       >
@@ -75,7 +75,7 @@ onMounted(() => {
           {{ title }}
         </slot>
 
-        <ChevronDownIcon class="shrink-0 size-4 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform" />
+        <ChevronDownIcon class="size-4 shrink-0 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform" />
       </button>
     </h3>
 

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

@@ -1,6 +1,6 @@
 <script setup>
 import { provideConfigProvider } from "../../composables/useConfigProviderContext";
-import enUS from "../../locales/en-US";
+import enUS from "../../locales/en-us";
 defineOptions({
   name: "PConfigProvider"
 });

package/dist/components/countdown/index.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+import { useCountdown } from "../../composables/useCountdown";
+defineOptions({
+  name: "PCountDown"
+});
+const props = defineProps({
+  format: { type: String, required: false, default: "hh:mm:ss.ms" },
+  active: { type: Boolean, required: false, default: false },
+  endTime: { type: Number, required: false, default: 0 },
+  autoReset: { type: Boolean, required: false, default: true },
+  durations: { type: Number, required: false, default: 0 },
+  precision: { type: Number, required: false, default: 0 },
+  millisecond: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["change", "reset", "finish"]);
+const {
+  reset,
+  times
+} = useCountdown(props, emits);
+const displayTimes = computed(() => {
+  const { format, precision } = props;
+  let result = format;
+  result = result.replace(/\.ms/, precision ? `.${times.value.ms}` : "");
+  return result.replace(/dd/, times.value.dd).replace(/hh/, times.value.hh).replace(/mm/, times.value.mm).replace(/ss/, times.value.ss);
+});
+defineExpose({
+  reset,
+  times
+});
+</script>
+
+<template>
+  <div class="pxd-countdown flex items-center justify-center leading-none tabular-nums">
+    <slot :times="times">
+      {{ displayTimes }}
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,49 @@
+import type { Options } from '../../composables/useCountdown';
+interface Props extends Options {
+    format?: string;
+}
+declare var __VLS_1: {
+    times: {
+        dd: string;
+        hh: string;
+        mm: string;
+        ss: string;
+        ms: string;
+    };
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {
+    reset: () => void;
+    times: import("vue").ComputedRef<{
+        dd: string;
+        hh: string;
+        mm: string;
+        ss: string;
+        ms: string;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    finish: () => any;
+    change: (active: boolean) => any;
+    reset: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onFinish?: () => any;
+    onChange?: (active: boolean) => any;
+    onReset?: () => any;
+}>, {
+    endTime: number;
+    active: boolean;
+    format: string;
+    millisecond: boolean;
+    durations: number;
+    autoReset: boolean;
+    precision: number;
+}, {}, {}, {}, 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 & {
+    new (): {
+        $slots: S;
+    };
+};