pxd 0.0.49 → 0.0.50

package/README.md

@@ -1,5 +1,5 @@
 # PXD
-Realizing (slightly adjusting) the general component library of Vue2&3 based on Geist Design System.
+A universal UI component library for Vue@2.7+ & Vue@3.2+
 
 - [Geist Design System](https://vercel.com/geist/introduction)
 - [Figma(Community)](https://www.figma.com/design/1234567890/PXD-UI?node-id=0-1&t=1234567890-0)
@@ -12,7 +12,7 @@ Realizing (slightly adjusting) the general component library of Vue2&3 based on
 ## Features
 
 - Vue 3 Composition API
-- 100% compatible with Vue2&3
+- 100% compatible with Vue2.7+ & Vue3.2+
 - Complete tree-shaking support
 
 ## Contribution

package/dist/components/_internal/fragment-container.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/_internal/fragment-container.vue

@@ -0,0 +1,11 @@
+<script setup>
+defineOptions({
+  name: "PFragmentContainer"
+});
+</script>
+
+<template>
+  <div class="pxd-fragment-container">
+    <slot />
+  </div>
+</template>

package/dist/components/_internal/fragment-container.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/avatar/index.vue

@@ -39,8 +39,8 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar relative inline-flex size-(--s) items-center justify-center rounded-full border border-background-100 select-none"
-    :style="{ '--s': computedSize }"
+    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 select-none"
+    :style="{ '--avatar-size': computedSize }"
   >
     <slot>
       <img

package/dist/components/book/index.vue

@@ -30,7 +30,7 @@ const computedStyle = computed(() => {
   const { color } = props;
   return {
     ...formattedWidth.value,
-    "--bc": color
+    "--book-background-color": color
   };
 });
 const computedClass = computed(() => {
@@ -49,7 +49,7 @@ const computedClass = computed(() => {
         <div
           v-if="variant === 'stripe'"
           class="translate-z-0 relative flex w-full flex-1 shrink-0 overflow-hidden"
-          style="background-color: var(--bc, var(--color-amber-600))"
+          style="background-color: var(--book-background-color, var(--color-amber-600))"
         >
           <div class="absolute flex w-full flex-col object-cover">
             <slot name="icon" />
@@ -138,7 +138,7 @@ const computedClass = computed(() => {
 }
 
 .pxd-book--cover-simple {
-  background-color: var(--bc, var(--color-gray-200));
+  background-color: var(--book-background-color, var(--color-gray-200));
 }
 
 .pxd-book--textured {

package/dist/components/button/index.vue

@@ -26,7 +26,7 @@ const SIZES = {
   lg: "h-10 px-3.5"
 };
 const ROUNDED = {
-  xs: "rounded-md",
+  xs: "rounded-sm",
   sm: "rounded-md",
   md: "rounded-md",
   lg: "rounded-lg",

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

@@ -13,14 +13,14 @@ declare const __VLS_base: import("vue").DefineComponent<CarouselGroupProps, {},
 }, string, import("vue").PublicProps, Readonly<CarouselGroupProps> & Readonly<{
     onChange?: ((index: number) => any) | undefined;
 }>, {
-    index: number;
     height: number | string;
+    index: number;
+    direction: import("../../types/shared").ComponentDirection;
     loop: boolean;
     arrow: boolean;
     autoplay: boolean;
     interval: number;
     indicator: boolean;
-    direction: import("../../types/shared").ComponentDirection;
     indicatorType: "dot" | "line";
     indicatorPosition: import("../../types/shared").BasePosition;
     pauseOnHover: boolean;

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

@@ -239,7 +239,7 @@ onBeforeUnmount(() => {
           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="pxd-carousel-group--indicator-item relative h-(--carousel-dot-height) w-(--carousel-dot-width) 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>
@@ -270,21 +270,21 @@ onBeforeUnmount(() => {
 <style lang="postcss">
 .pxd-carousel-group {
   &[data-indicator-type="dot"] {
-    --w: 8px;
-    --h: 8px;
+    --carousel-dot-width: 8px;
+    --carousel-dot-height: 8px;
   }
 
   &[data-indicator-type="line"] {
     &[data-indicator-position="top"],
     &[data-indicator-position="bottom"] {
-      --w: 16px;
-      --h: 4px;
+      --carousel-dot-width: 16px;
+      --carousel-dot-height: 4px;
     }
 
     &[data-indicator-position="left"],
     &[data-indicator-position="right"] {
-      --w: 4px;
-      --h: 16px;
+      --carousel-dot-width: 4px;
+      --carousel-dot-height: 16px;
     }
   }
 

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

@@ -13,14 +13,14 @@ declare const __VLS_base: import("vue").DefineComponent<CarouselGroupProps, {},
 }, string, import("vue").PublicProps, Readonly<CarouselGroupProps> & Readonly<{
     onChange?: ((index: number) => any) | undefined;
 }>, {
-    index: number;
     height: number | string;
+    index: number;
+    direction: import("../../types/shared").ComponentDirection;
     loop: boolean;
     arrow: boolean;
     autoplay: boolean;
     interval: number;
     indicator: boolean;
-    direction: import("../../types/shared").ComponentDirection;
     indicatorType: "dot" | "line";
     indicatorPosition: import("../../types/shared").BasePosition;
     pauseOnHover: boolean;

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

@@ -7,8 +7,10 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {
     getCheckedState: typeof getCheckedState;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
 }>, {
     value: import("../../types/shared").ComponentValue;

package/dist/components/checkbox/index.vue

@@ -20,7 +20,7 @@ const props = defineProps({
   modelValue: { type: [String, Number, Boolean, Array], required: false, default: () => [] },
   indeterminate: { type: Boolean, required: false }
 });
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const uniqueId = getUniqueId();
 const modelValue = useModelValue(props, emits);
 const checkboxGroupContext = useCheckboxGroupContext();

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

@@ -7,8 +7,10 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {
     getCheckedState: typeof getCheckedState;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
 }>, {
     value: import("../../types/shared").ComponentValue;

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

@@ -9,11 +9,11 @@ declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {
     isCheckedAll: typeof isCheckedAll;
     isCheckedPartial: typeof isCheckedPartial;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: import("../../types/shared").ComponentValue[]) => any;
     change: (args_0: import("../../types/shared").ComponentValue[]) => any;
+    "update:modelValue": (args_0: import("../../types/shared").ComponentValue[]) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
     onChange?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
 }>, {
     options: import("../../types/shared").ComponentOption[];
     modelValue: import("../../types/shared").ComponentValue[];

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

@@ -9,11 +9,11 @@ declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {
     isCheckedAll: typeof isCheckedAll;
     isCheckedPartial: typeof isCheckedPartial;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (args_0: import("../../types/shared").ComponentValue[]) => any;
     change: (args_0: import("../../types/shared").ComponentValue[]) => any;
+    "update:modelValue": (args_0: import("../../types/shared").ComponentValue[]) => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
-    "onUpdate:modelValue"?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
     onChange?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("../../types/shared").ComponentValue[]) => any) | undefined;
 }>, {
     options: import("../../types/shared").ComponentOption[];
     modelValue: import("../../types/shared").ComponentValue[];

package/dist/components/chip/index.vue

@@ -19,7 +19,7 @@ const computedClass = computed(() => {
   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-(--s)");
+    classes.push("size-(--chip-size)");
   }
   if (!inset) {
     classes.push("translate-x-1/2 -translate-y-1/3");
@@ -33,7 +33,7 @@ const computedClass = computed(() => {
   <div class="pxd-chip relative inline-flex shrink-0">
     <slot />
 
-    <span :data-label="label" :class="computedClass" :style="{ '--s': getCssUnitValue(size) }" />
+    <span :data-label="label" :class="computedClass" :style="{ '--chip-size': getCssUnitValue(size) }" />
   </div>
 </template>
 

package/dist/components/choicebox/index.vue

@@ -22,7 +22,7 @@ const computedAttrs = computed(() => {
     value,
     disabled,
     required,
-    class: "pxd-choicebox justify-between border rounded-md flex-1 p-3 flex-row-reverse hover:bg-background-hover hover:border-gray-500 motion-safe:transition-colors"
+    class: "pxd-choicebox justify-between border rounded-md flex-1 w-full p-3 flex-row-reverse hover:bg-background-hover hover:border-gray-500 motion-safe:transition-colors"
   };
 });
 </script>

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

@@ -1,13 +1,13 @@
 import type { ChoiceboxGroupProps } from '../../types/components/choicebox';
-declare var __VLS_1: {}, __VLS_9: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ChoiceboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<ChoiceboxGroupProps> & Readonly<{
+    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
 }>, {
     disabled: boolean;

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

@@ -3,6 +3,7 @@ import { computed, markRaw, useAttrs } from "vue";
 import { useModelValue } from "../../composables/use-model-value";
 import { provideChoiceboxGroupContext, provideChoiceboxGroupModelValue } from "../../contexts/choicebox";
 import PCheckboxGroup from "../checkbox-group/index.vue";
+import PChoicebox from "../choicebox/index.vue";
 import PRadioGroup from "../radio-group/index.vue";
 defineOptions({
   name: "PChoiceboxGroup",
@@ -20,23 +21,21 @@ const props = defineProps({
   options: { type: Array, required: false },
   modelValue: { type: [String, Number, Boolean, Array], required: false, default: "" }
 });
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(["change", "update:modelValue"]);
 const attrs = useAttrs();
 const modelValue = useModelValue(props, emits);
 const renderComponent = computed(() => markRaw(props.multiple ? PCheckboxGroup : PRadioGroup));
 const computedAttrs = computed(() => {
-  const { disabled, label, multiple, required, options } = props;
+  const { disabled, multiple, required, options } = props;
   const { class: classes, ...rest } = attrs;
   return {
     "role": multiple ? "group" : "radiogroup",
-    "aria-label": label,
     "aria-required": required,
     "aria-multiselectable": multiple,
     "gap": attrs.gap || "3",
     disabled,
     required,
     options,
-    label,
     ...rest
   };
 });
@@ -45,26 +44,19 @@ provideChoiceboxGroupModelValue(modelValue);
 </script>
 
 <template>
-  <div class="pxd-choicebox-group w-full max-w-full">
-    <div v-if="label || $slots.label" class="pxd-form--label">
-      <slot name="label">
-        {{ label }}
-      </slot>
-    </div>
-
-    <Component
-      :is="renderComponent"
-      v-model="modelValue"
-      v-bind="computedAttrs"
-    >
-      <slot>
-        <PChoicebox
-          v-for="option in options"
-          :key="option.value"
-          v-model="modelValue"
-          v-bind="option"
-        />
-      </slot>
-    </Component>
-  </div>
+  <Component
+    :is="renderComponent"
+    v-model="modelValue"
+    class="pxd-choicebox-group w-full"
+    v-bind="computedAttrs"
+  >
+    <slot>
+      <PChoicebox
+        v-for="option in options"
+        :key="option.value"
+        v-model="modelValue"
+        v-bind="option"
+      />
+    </slot>
+  </Component>
 </template>

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

@@ -1,13 +1,13 @@
 import type { ChoiceboxGroupProps } from '../../types/components/choicebox';
-declare var __VLS_1: {}, __VLS_9: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
-} & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ChoiceboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
     "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any;
 }, string, import("vue").PublicProps, Readonly<ChoiceboxGroupProps> & Readonly<{
+    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentValue | import("../../types/shared").ComponentValue[] | undefined>) => any) | undefined;
 }>, {
     disabled: boolean;

package/dist/components/collapse/index.vue

@@ -95,5 +95,5 @@ onMounted(() => {
 </template>
 
 <style>
-.pxd-collapse--trigger{font-size:var(--fs,24px);font-weight:var(--fw,600);padding-block:var(--s,24px)}.pxd-transition--collapse-enter-active,.pxd-transition--collapse-leave-active{transition:height var(--default-transition-duration) var(--default-transition-timing-function)}
+.pxd-collapse--trigger{font-size:var(--collapse-font-size,24px);font-weight:var(--collapse-font-weight,600);padding-block:var(--collapse-padding,24px)}.pxd-transition--collapse-enter-active,.pxd-transition--collapse-leave-active{transition:height var(--default-transition-duration) var(--default-transition-timing-function)}
 </style>

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

@@ -32,9 +32,9 @@ const expandedItems = ref([]);
 const computedStyle = computed(() => {
   const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, config.size);
   return {
-    "--s": padding,
-    "--fs": fontSize,
-    "--fw": fontWeight
+    "--collapse-padding": padding,
+    "--collapse-font-size": fontSize,
+    "--collapse-font-weight": fontWeight
   };
 });
 function toggleItem(id, expanded) {

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

@@ -15,11 +15,13 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
+    change: (args_0: boolean) => any;
     "update:modelValue": (args_0: boolean) => any;
     show: () => any;
     hide: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onSelect?: ((args_0: MouseEvent, args_1: ListOptionSelected) => any) | undefined;
+    onChange?: ((args_0: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;

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

@@ -25,7 +25,7 @@ const props = defineProps({
   closeOnPressEscape: { type: Boolean, required: false, default: true },
   closeOnClickOverlay: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["update:modelValue", "select", "show", "hide"]);
+const emits = defineEmits(["update:modelValue", "select", "change", "show", "hide"]);
 const uniqueId = getUniqueId();
 const config = useConfigProvider();
 const modelValue = useModelValue(props, emits);

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

@@ -15,11 +15,13 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
+    change: (args_0: boolean) => any;
     "update:modelValue": (args_0: boolean) => any;
     show: () => any;
     hide: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onSelect?: ((args_0: MouseEvent, args_1: ListOptionSelected) => any) | undefined;
+    onChange?: ((args_0: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;

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 h-inherit">
     <slot />
   </Component>
 </template>

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

@@ -25,12 +25,12 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {
         ms: any;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    reset: () => any;
     change: (active: boolean) => any;
+    reset: () => any;
     finish: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onReset?: (() => any) | undefined;
     onChange?: ((active: boolean) => any) | undefined;
+    onReset?: (() => any) | undefined;
     onFinish?: (() => any) | undefined;
 }>, {
     format: string;

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

@@ -25,12 +25,12 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {
         ms: any;
     }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    reset: () => any;
     change: (active: boolean) => any;
+    reset: () => any;
     finish: () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onReset?: (() => any) | undefined;
     onChange?: ((active: boolean) => any) | undefined;
+    onReset?: (() => any) | undefined;
     onFinish?: (() => any) | undefined;
 }>, {
     format: string;

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

@@ -28,12 +28,14 @@ type __VLS_Slots = {} & {
     footer?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: boolean) => any;
     "update:modelValue": (args_0: boolean) => any;
     show: () => any;
     hide: () => any;
     "visible-change": (args_0: boolean) => any;
     "outside-click": (args_0: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onChange?: ((args_0: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;

package/dist/components/drawer/index.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   closeOnClickOverlay: { type: Boolean, required: false, default: true },
   initialFocus: { type: [String, Boolean], required: false }
 });
-const emits = defineEmits(["show", "hide", "outside-click", "visible-change", "update:modelValue"]);
+const emits = defineEmits(["show", "hide", "change", "outside-click", "visible-change", "update:modelValue"]);
 const drawerRef = shallowRef();
 const isVisible = useModelValue(props, emits);
 useFocusTrap(drawerRef, {
@@ -47,7 +47,7 @@ const transitionName = computed(() => `pxd-transition--drawer-${ensurePosition.v
 const computedStyle = computed(() => {
   const styles = {};
   if (props.size) {
-    styles["--s"] = getCssUnitValue(props.size);
+    styles["--drawer-size"] = getCssUnitValue(props.size);
   }
   return styles;
 });
@@ -89,7 +89,7 @@ watch(() => isVisible.value, (visible) => {
         aria-modal="true"
         role="dialog"
         tabindex="-1"
-        class="pxd-drawer group/drawer translate-z-0 sm:[--w:30vw] sm:[--h:30vw] pointer-events-auto fixed z-10 flex max-h-full max-w-full flex-col bg-background-100 shadow-border-modal outline-none"
+        class="pxd-drawer group/drawer translate-z-0 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"
@@ -133,5 +133,5 @@ watch(() => isVisible.value, (visible) => {
 </template>
 
 <style>
-.pxd-drawer[data-position=left]{bottom:0;left:0;top:0}.pxd-drawer[data-position=top]{left:0;right:0;top:0}.pxd-drawer[data-position=right]{bottom:0;right:0;top:0}.pxd-drawer[data-position=bottom]{bottom:0;left:0;right:0}.pxd-drawer[data-position=left],.pxd-drawer[data-position=right]{width:var(--s,var(--w,80vw))}.pxd-drawer[data-position=bottom],.pxd-drawer[data-position=top]{height:var(--s,var(--h,80vw))}.pxd-transition--drawer-bottom-enter-active,.pxd-transition--drawer-bottom-leave-active,.pxd-transition--drawer-left-enter-active,.pxd-transition--drawer-left-leave-active,.pxd-transition--drawer-right-enter-active,.pxd-transition--drawer-right-leave-active,.pxd-transition--drawer-top-enter-active,.pxd-transition--drawer-top-leave-active{transition:transform var(--default-transition-duration,.3s) var(--default-transition-timing-function)}.pxd-transition--drawer-right-enter-from,.pxd-transition--drawer-right-leave-to{transform:translateX(100%)}.pxd-transition--drawer-left-enter-from,.pxd-transition--drawer-left-leave-to{transform:translateX(-100%)}.pxd-transition--drawer-top-enter-from,.pxd-transition--drawer-top-leave-to{transform:translateY(-100%)}.pxd-transition--drawer-bottom-enter-from,.pxd-transition--drawer-bottom-leave-to{transform:translateY(100%)}
+.pxd-drawer[data-position=left]{bottom:0;left:0;top:0}.pxd-drawer[data-position=top]{left:0;right:0;top:0}.pxd-drawer[data-position=right]{bottom:0;right:0;top:0}.pxd-drawer[data-position=bottom]{bottom:0;left:0;right:0}.pxd-drawer[data-position=left],.pxd-drawer[data-position=right]{width:var(--drawer-size,var(--drawer-width,80vw))}.pxd-drawer[data-position=bottom],.pxd-drawer[data-position=top]{height:var(--drawer-size,var(--drawer-height,80vw))}.pxd-transition--drawer-bottom-enter-active,.pxd-transition--drawer-bottom-leave-active,.pxd-transition--drawer-left-enter-active,.pxd-transition--drawer-left-leave-active,.pxd-transition--drawer-right-enter-active,.pxd-transition--drawer-right-leave-active,.pxd-transition--drawer-top-enter-active,.pxd-transition--drawer-top-leave-active{transition:transform var(--default-transition-duration,.3s) var(--default-transition-timing-function)}.pxd-transition--drawer-right-enter-from,.pxd-transition--drawer-right-leave-to{transform:translateX(100%)}.pxd-transition--drawer-left-enter-from,.pxd-transition--drawer-left-leave-to{transform:translateX(-100%)}.pxd-transition--drawer-top-enter-from,.pxd-transition--drawer-top-leave-to{transform:translateY(-100%)}.pxd-transition--drawer-bottom-enter-from,.pxd-transition--drawer-bottom-leave-to{transform:translateY(100%)}
 </style>

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

@@ -28,12 +28,14 @@ type __VLS_Slots = {} & {
     footer?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: boolean) => any;
     "update:modelValue": (args_0: boolean) => any;
     show: () => any;
     hide: () => any;
     "visible-change": (args_0: boolean) => any;
     "outside-click": (args_0: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onChange?: ((args_0: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;

package/dist/components/hold-button/index.vue

@@ -41,8 +41,8 @@ const computedStyle = computed(() => {
     _durations = 2e3;
   }
   return {
-    "--ds": `${_durations}ms`,
-    "--mc": maskColor
+    "--hold-button-durations": `${_durations}ms`,
+    "--hold-button-mask-color": maskColor
   };
 });
 function onTriggerVibrate() {
@@ -136,7 +136,7 @@ onBeforeUnmount(() => {
     <template #suffix>
       <slot name="suffix" />
       <div
-        class="pxd-hold-button--overlay pointer-events-none absolute -inset-px rounded-inherit bg-(--mc)"
+        class="pxd-hold-button--overlay pointer-events-none absolute -inset-px rounded-inherit bg-(--hold-button-mask-color)"
         :class="{ finished: status === 'confirmed' }"
         :style="computedStyle"
         @transitionend="onTransitionEnd"
@@ -170,7 +170,7 @@ onBeforeUnmount(() => {
 
   &.effective:not(.is-disabled):active .pxd-hold-button--overlay {
     clip-path: inset(0px);
-    transition: clip-path var(--ds) var(--default-transition-timing-function), opacity var(--default-transition-duration) var(--default-transition-timing-function);
+    transition: clip-path var(--hold-button-durations) var(--default-transition-timing-function), opacity var(--default-transition-duration) var(--default-transition-timing-function);
   }
 }
 </style>

package/dist/components/index.d.ts

@@ -33,6 +33,7 @@ export { default as HoldButton } from './hold-button/index.vue';
 export { default as Input } from './input/index.vue';
 export { default as IntersectionObserver } from './intersection-observer/index.vue';
 export { default as Kbd } from './kbd/index.vue';
+export { default as Label } from './label/index.vue';
 export { default as LinkButton } from './link-button/index.vue';
 export { default as List } from './list/index.vue';
 export { default as ListItem } from './list-item/index.vue';

package/dist/components/index.js

@@ -33,6 +33,7 @@ export { default as HoldButton } from "./hold-button/index.vue";
 export { default as Input } from "./input/index.vue";
 export { default as IntersectionObserver } from "./intersection-observer/index.vue";
 export { default as Kbd } from "./kbd/index.vue";
+export { default as Label } from "./label/index.vue";
 export { default as LinkButton } from "./link-button/index.vue";
 export { default as List } from "./list/index.vue";
 export { default as ListItem } from "./list-item/index.vue";