@byyuurin/ui 0.2.0 → 0.3.0

package/dist/runtime/components/Card.vue

@@ -24,45 +24,45 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <slot name="content">
-      <div
-        v-if="slots.header || props.title || slots.title || props.description || slots.description"
-        :class="ui.header({ class: props.ui?.header })"
-        data-part="header"
-      >
-        <slot name="header">
-          <Primitive
-            v-if="props.title || slots.title"
-            :as="!!slots.title ? void 0 : 'h2'"
-            :class="ui.title({ class: props.ui?.title })"
-            data-part="title"
-          >
-            <slot name="title">
-              {{ props.title }}
-            </slot>
-          </Primitive>
-          <Primitive
-            v-if="props.description || slots.description"
-            :as="!!slots.description ? void 0 : 'p'"
-            :as-child="!!slots.description"
-            :class="ui.description({ class: props.ui?.description })"
-            data-part="description"
-          >
-            <slot name="description">
-              {{ props.description }}
-            </slot>
-          </Primitive>
-        </slot>
-      </div>
-
-      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
-        <slot></slot>
-      </div>
-
-      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
-        <slot name="footer"></slot>
-      </div>
-    </slot>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <slot name="content">
+      <div
+        v-if="slots.header || props.title || slots.title || props.description || slots.description"
+        :class="ui.header({ class: props.ui?.header })"
+        data-part="header"
+      >
+        <slot name="header">
+          <Primitive
+            v-if="props.title || slots.title"
+            :as="!!slots.title ? void 0 : 'h2'"
+            :class="ui.title({ class: props.ui?.title })"
+            data-part="title"
+          >
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </Primitive>
+          <Primitive
+            v-if="props.description || slots.description"
+            :as="!!slots.description ? void 0 : 'p'"
+            :as-child="!!slots.description"
+            :class="ui.description({ class: props.ui?.description })"
+            data-part="description"
+          >
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </Primitive>
+        </slot>
+      </div>
+
+      <div v-if="!!slots.default" :class="ui.body({ class: props.ui?.body })" data-part="body">
+        <slot></slot>
+      </div>
+
+      <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })" data-part="footer">
+        <slot name="footer"></slot>
+      </div>
+    </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Card.vue.d.ts

@@ -24,9 +24,9 @@ export interface CardSlots {
     description: StaticSlot;
     footer: StaticSlot;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Carousel.vue

@@ -189,70 +189,70 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    role="region"
-    tabindex="0"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    aria-roledescription="carousel"
-    :data-orientation="props.orientation"
-    data-part="root"
-    @keydown="onKeyDown"
-  >
-    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
-      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-        <div
-          v-for="(item, index) in props.items"
-          :key="index"
-          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
-          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
-          data-part="item"
-        >
-          <slot :item="item" :index="index"></slot>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="props.arrows || props.dots" :class="ui.controls({ class: props.ui?.controls })" data-part="controls">
-      <div v-if="props.arrows" :class="ui.arrows({ class: props.ui?.arrows })" data-part="arrows">
-        <Button
-          :disabled="!canScrollPrev"
-          :icon="prevIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.prev')"
-          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
-          :class="ui.prev({ class: props.ui?.prev })"
-          data-part="prev"
-          @click="scrollPrev"
-        />
-        <Button
-          :disabled="!canScrollNext"
-          :icon="nextIcon"
-          color="neutral"
-          variant="outline"
-          :aria-label="t('carousel.next')"
-          v-bind="typeof props.next === 'object' ? props.next : void 0"
-          :class="ui.next({ class: props.ui?.next })"
-          data-part="next"
-          @click="scrollNext"
-        />
-      </div>
-
-      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })" data-part="dots">
-        <template v-for="(_, index) in scrollSnaps" :key="index">
-          <button
-            type="button"
-            role="tab"
-            :aria-label="t('carousel.goto', { page: index + 1 })"
-            :aria-selected="selectedIndex === index"
-            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
-            data-part="dot"
-            :data-state="selectedIndex === index ? 'active' : void 0"
-            @click="scrollTo(index)"
-          ></button>
-        </template>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    role="region"
+    tabindex="0"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    aria-roledescription="carousel"
+    :data-orientation="props.orientation"
+    data-part="root"
+    @keydown="onKeyDown"
+  >
+    <div ref="emblaRef" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+      <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+        <div
+          v-for="(item, index) in props.items"
+          :key="index"
+          v-bind="props.dots ? { role: 'tabpanel' } : { 'role': 'group', 'aria-roledescription': 'slide' }"
+          :class="ui.item({ class: [props.ui?.item, ...isCarouselItem(item) ? [item.ui?.item, item.class] : []] })"
+          data-part="item"
+        >
+          <slot :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="props.arrows || props.dots" :class="ui.controls({ class: props.ui?.controls })" data-part="controls">
+      <div v-if="props.arrows" :class="ui.arrows({ class: props.ui?.arrows })" data-part="arrows">
+        <Button
+          :disabled="!canScrollPrev"
+          :icon="prevIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.prev')"
+          v-bind="typeof props.prev === 'object' ? props.prev : void 0"
+          :class="ui.prev({ class: props.ui?.prev })"
+          data-part="prev"
+          @click="scrollPrev"
+        />
+        <Button
+          :disabled="!canScrollNext"
+          :icon="nextIcon"
+          color="neutral"
+          variant="outline"
+          :aria-label="t('carousel.next')"
+          v-bind="typeof props.next === 'object' ? props.next : void 0"
+          :class="ui.next({ class: props.ui?.next })"
+          data-part="next"
+          @click="scrollNext"
+        />
+      </div>
+
+      <div v-if="props.dots" role="tablist" :aria-label="t('carousel.dots')" :class="ui.dots({ class: props.ui?.dots })" data-part="dots">
+        <template v-for="(_, index) in scrollSnaps" :key="index">
+          <button
+            type="button"
+            role="tab"
+            :aria-label="t('carousel.goto', { page: index + 1 })"
+            :aria-selected="selectedIndex === index"
+            :class="ui.dot({ class: props.ui?.dot, active: selectedIndex === index })"
+            data-part="dot"
+            :data-state="selectedIndex === index ? 'active' : void 0"
+            @click="scrollTo(index)"
+          ></button>
+        </template>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Carousel.vue.d.ts

@@ -8,7 +8,7 @@ import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
 import type { PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/carousel';
-import type { ButtonProps, ComponentBaseProps, ComponentUIProps } from '../types';
+import type { ButtonProps, ComponentBaseProps, ComponentUIProps, LinkPropsKeys } from '../types';
 import type { AcceptableValue, StaticSlot } from '../types/utils';
 export type CarouselValue = AcceptableValue;
 export type CarouselItem = AcceptableValue | {
@@ -27,7 +27,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Co
      * Configure the prev button when arrows are enabled.
      * @default { size: 'md', variant: 'link' }
      */
-    prev?: ButtonProps;
+    prev?: Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the prev button.
      * @default app.icons.chevronLeft
@@ -37,7 +37,7 @@ export interface CarouselProps<T extends CarouselItem = CarouselItem> extends Co
      * Configure the next button when arrows are enabled.
      * @default { size: 'md', variant: 'link' }
      */
-    next?: ButtonProps;
+    next?: Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the next button.
      * @default app.icons.chevronRight
@@ -104,10 +104,14 @@ export interface CarouselSlots<T extends CarouselItem = CarouselItem> {
         index: number;
     }>;
 }
-declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<CarouselProps<T> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CarouselProps<T> & {
         onSelect?: ((selectedIndex: number) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         emblaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         emblaApi: import("vue").Ref<EmblaCarouselType | undefined, EmblaCarouselType | undefined>;
@@ -118,8 +122,8 @@ declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Aw
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Checkbox.vue

@@ -55,50 +55,50 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
-      <CheckboxRoot
-        v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
-        v-model="modelValue"
-        :class="ui.base({ class: props.ui?.base })"
-        data-part="base"
-        @update:model-value="onUpdate"
-      >
-        <template #default="{ modelValue }">
-          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
-            <Icon
-              v-if="modelValue === 'indeterminate'"
-              :name="props.indeterminateIcon || appConfig.ui.icons.minus"
-              :class="ui.icon({ class: props.ui?.icon })"
-              data-part="icon"
-            />
-            <Icon
-              v-else
-              :name="props.icon || appConfig.ui.icons.check"
-              :class="ui.icon({ class: props.ui?.icon })"
-              data-part="icon"
-            />
-          </CheckboxIndicator>
-        </template>
-      </CheckboxRoot>
-    </div>
-    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <component
-        :is="!props.variant || props.variant === 'list' ? Label : 'p'"
-        v-if="props.label || !!slots.label"
-        :for="id"
-        :class="ui.label({ class: props.ui?.label })"
-        data-part="label"
-      >
-        <slot name="label" :label="props.label">
-          {{ props.label }}
-        </slot>
-      </component>
-      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
+  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
+      <CheckboxRoot
+        v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
+        v-model="modelValue"
+        :class="ui.base({ class: props.ui?.base })"
+        data-part="base"
+        @update:model-value="onUpdate"
+      >
+        <template #default="{ modelValue }">
+          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
+            <Icon
+              v-if="modelValue === 'indeterminate'"
+              :name="props.indeterminateIcon || appConfig.ui.icons.minus"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+            <Icon
+              v-else
+              :name="props.icon || appConfig.ui.icons.check"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+          </CheckboxIndicator>
+        </template>
+      </CheckboxRoot>
+    </div>
+    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <component
+        :is="!props.variant || props.variant === 'list' ? Label : 'p'"
+        v-if="props.label || !!slots.label"
+        :for="id"
+        :class="ui.label({ class: props.ui?.label })"
+        data-part="label"
+      >
+        <slot name="label" :label="props.label">
+          {{ props.label }}
+        </slot>
+      </component>
+      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Checkbox.vue.d.ts

@@ -2,9 +2,10 @@ import type { VariantProps } from '@byyuurin/ui-kit';
 import type { CheckboxRootEmits, CheckboxRootProps, PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/checkbox';
 import type { ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { StaticSlot } from '../types/utils';
 type ThemeVariants = VariantProps<typeof theme>;
-export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'value' | 'name'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -44,6 +45,8 @@ export interface CheckboxSlots {
         description?: string;
     }>;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (event: Event) => any;
     "update:modelValue": (value: boolean | "indeterminate") => any;
@@ -54,8 +57,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Checkb
     disabled: boolean;
     required: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/CheckboxGroup.vue

@@ -99,33 +99,33 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <CheckboxGroupRoot
-    v-bind="{ ...rootProps, id, name, disabled }"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-    @update:model-value="onUpdate"
-  >
-    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
-      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
-        <slot name="legend">
-          {{ props.legend }}
-        </slot>
-      </legend>
-
-      <Checkbox
-        v-for="item in normalizedItems"
-        :key="item.id"
-        v-bind="{ ...item, ...checkboxProps, color, size, name }"
-        :variant="props.variant"
-        :disabled="item.disabled || disabled"
-        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
-        :class="ui.item({ disabled: item.disabled || disabled, class: [props.ui?.item, item.ui?.item, item.class] })"
-        data-part="item"
-      >
-        <template v-for="(_, name) in getProxySlots()" #[name]>
-          <slot :name="name" :item="item"></slot>
-        </template>
-      </Checkbox>
-    </fieldset>
-  </CheckboxGroupRoot>
+  <CheckboxGroupRoot
+    v-bind="{ ...rootProps, id, name, disabled }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
+      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </legend>
+
+      <Checkbox
+        v-for="item in normalizedItems"
+        :key="item.id"
+        v-bind="{ ...item, ...checkboxProps, color, size, name }"
+        :variant="props.variant"
+        :disabled="item.disabled || disabled"
+        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
+        :class="ui.item({ disabled: item.disabled || disabled, class: [props.ui?.item, item.ui?.item, item.class] })"
+        data-part="item"
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]>
+          <slot :name="name" :item="item"></slot>
+        </template>
+      </Checkbox>
+    </fieldset>
+  </CheckboxGroupRoot>
 </template>

package/dist/runtime/components/CheckboxGroup.vue.d.ts

@@ -70,11 +70,15 @@ export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGrou
         };
     }>;
 }
-declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<CheckboxGroupItem[]>;
@@ -82,8 +86,8 @@ declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKe
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Chip.vue

@@ -34,19 +34,19 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <Primitive
-    :as="props.as"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-  >
-    <Slot v-bind="$attrs">
-      <slot></slot>
-    </Slot>
-
-    <span v-if="show" :class="ui.base({ class: props.ui?.base })" data-part="base">
-      <slot name="content">
-        {{ props.text }}
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive
+    :as="props.as"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+  >
+    <Slot v-bind="$attrs">
+      <slot></slot>
+    </Slot>
+
+    <span v-if="show" :class="ui.base({ class: props.ui?.base })" data-part="base">
+      <slot name="content">
+        {{ props.text }}
+      </slot>
+    </span>
+  </Primitive>
 </template>

package/dist/runtime/components/Chip.vue.d.ts

@@ -32,6 +32,8 @@ export interface ChipSlots {
     default: StaticSlot;
     content: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:show": (show: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
@@ -39,8 +41,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipPr
 }>, {
     show: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Collapsible.vue

@@ -28,20 +28,20 @@ const ui = computed(() => {
 </script>
 
 <template>
-  <CollapsibleRoot
-    v-slot="{ open }"
-    v-bind="rootProps"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    data-part="root"
-  >
-    <CollapsibleTrigger v-if="!!slots.default" as-child>
-      <slot :open="open"></slot>
-    </CollapsibleTrigger>
-
-    <CollapsibleContent :class="ui.content({ class: props.ui?.content })" data-part="content">
-      <slot name="content"></slot>
-    </CollapsibleContent>
-  </CollapsibleRoot>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="rootProps"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+  >
+    <CollapsibleTrigger v-if="!!slots.default" as-child>
+      <slot :open="open"></slot>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent :class="ui.content({ class: props.ui?.content })" data-part="content">
+      <slot name="content"></slot>
+    </CollapsibleContent>
+  </CollapsibleRoot>
 </template>
 
 <style>

package/dist/runtime/components/Collapsible.vue.d.ts

@@ -18,6 +18,8 @@ export interface CollapsibleSlots {
     }>;
     content: StaticSlot;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
@@ -25,8 +27,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Collap
 }>, {
     unmountOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;