pukaad-ui-lib 1.282.0 → 1.282.2

package/dist/runtime/components/ui/command/CommandEmpty.vue

@@ -22,25 +22,25 @@ const isRender = computed(() => {
 </script>
 
 <template>
-  <Primitive
-    v-if="isRender"
-    data-slot="command-empty"
-    v-bind="delegatedProps"
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps"
     :class="
   cn(
     'flex flex-col h-[192px] items-center justify-center gap-[8px] ',
     props.class
   )
-"
-  >
-    <slot />
-    <Icon
-      v-if="!$slots.default"
-      name="pukaad:page-not-found"
-      class="h-[64px] w-[74px]"
-    />
-    <div v-if="!$slots.default" class="text-gray font-body-medium">
-      ไม่พบข้อมูล
-    </div>
-  </Primitive>
+"
+  >
+    <slot />
+    <Icon
+      v-if="!$slots.default"
+      name="pukaad:page-not-found"
+      class="h-[64px] w-[74px]"
+    />
+    <div v-if="!$slots.default" class="text-gray font-body-medium">
+      ไม่พบข้อมูล
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/ui/command/CommandGroup.vue

@@ -27,20 +27,20 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ListboxGroup
-    v-bind="delegatedProps"
-    :id="id"
-    data-slot="command-group"
-    :class="cn('text-foreground overflow-hidden p-1', props.class)"
-    :hidden="isRender ? void 0 : true"
-  >
-    <ListboxGroupLabel
-      v-if="heading"
-      data-slot="command-group-heading"
-      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
-    >
-      {{ heading }}
-    </ListboxGroupLabel>
-    <slot />
-  </ListboxGroup>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? void 0 : true"
+  >
+    <ListboxGroupLabel
+      v-if="heading"
+      data-slot="command-group-heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
 </template>

package/dist/runtime/components/ui/command/CommandInput.vue

@@ -20,22 +20,22 @@ const { filterState } = useCommand();
 </script>
 
 <template>
-  <div
-    data-slot="command-input-wrapper"
-    class="flex h-9 items-center gap-2 border-b px-3"
-  >
-    <Icon name="lucide:search" class="h-4 w-4" />
-    <ListboxFilter
-      v-bind="{ ...forwardedProps, ...$attrs }"
-      v-model="filterState.search"
-      data-slot="command-input"
-      auto-focus
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <Icon name="lucide:search" class="h-4 w-4" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
       :class="
   cn(
     'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
     props.class
   )
-"
-    />
-  </div>
+"
+    />
+  </div>
 </template>

package/dist/runtime/components/ui/command/CommandItem.vue

@@ -54,24 +54,24 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ListboxItem
-    v-if="isRender"
-    v-bind="forwarded"
-    :id="id"
-    ref="itemRef"
-    data-slot="command-item"
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
     :class="
   cn(
     'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
     props.class
   )
-"
+"
     @select="
   () => {
     filterState.search = '';
   }
-"
-  >
-    <slot />
-  </ListboxItem>
+"
+  >
+    <slot />
+  </ListboxItem>
 </template>

package/dist/runtime/components/ui/command/CommandList.vue

@@ -12,13 +12,13 @@ const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <ListboxContent
-    data-slot="command-list"
-    v-bind="forwarded"
-    :class="cn('scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
-  >
-    <div role="presentation">
-      <slot />
-    </div>
-  </ListboxContent>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
 </template>

package/dist/runtime/components/ui/command/CommandSeparator.vue

@@ -13,11 +13,11 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <Separator
-    data-slot="command-separator"
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 h-px', props.class)"
-  >
-    <slot />
-  </Separator>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
 </template>

package/dist/runtime/components/ui/command/CommandShortcut.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <span
-    data-slot="command-shortcut"
-    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
-  >
-    <slot />
-  </span>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
 </template>

package/dist/runtime/components/ui/dialog/Dialog.vue

@@ -10,7 +10,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DialogRoot data-slot="dialog" v-bind="forwarded">
-    <slot />
-  </DialogRoot>
+  <DialogRoot data-slot="dialog" v-bind="forwarded">
+    <slot />
+  </DialogRoot>
 </template>

package/dist/runtime/components/ui/dialog/DialogClose.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <DialogClose data-slot="dialog-close" v-bind="props">
-    <slot />
-  </DialogClose>
+  <DialogClose data-slot="dialog-close" v-bind="props">
+    <slot />
+  </DialogClose>
 </template>

package/dist/runtime/components/ui/dialog/DialogContent.d.vue.ts

@@ -14,21 +14,21 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     close: (event: Event) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
     onClose?: ((event: Event) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
     noPadding: boolean;

package/dist/runtime/components/ui/dialog/DialogContent.vue

@@ -1,36 +1,36 @@
 <template>
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="dialog-content"
-      v-bind="forwarded"
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="forwarded"
       :class="
   cn(
     'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg duration-200 sm:max-w-lg',
     props.noPadding ? 'gap-0 overflow-hidden isolate' : 'gap-4 border p-6 shadow-lg',
     props.class
   )
-"
-      @escape-key-down="onOutSideClick"
-      @pointer-down-outside="onOutSideClick"
-    >
-      <Form
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        :class="cn('grid w-full', props.noPadding ? 'gap-0' : 'gap-4')"
-      >
-        <slot :meta="meta" />
-        <DialogClose
-          v-if="!props.disabledCloseBtn"
-          class="absolute top-4 right-4 rounded-xs opacity-70 cursor-pointer transition-opacity hover:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"
-          @click="onClose"
-        >
-          <Icon name="lucide:x" size="24" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </Form>
-    </DialogContent>
-  </DialogPortal>
+"
+      @escape-key-down="onOutSideClick"
+      @pointer-down-outside="onOutSideClick"
+    >
+      <Form
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        :class="cn('grid w-full', props.noPadding ? 'gap-0' : 'gap-4')"
+      >
+        <slot :meta="meta" />
+        <DialogClose
+          v-if="!props.disabledCloseBtn"
+          class="absolute top-4 right-4 rounded-xs opacity-70 cursor-pointer transition-opacity hover:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6"
+          @click="onClose"
+        >
+          <Icon name="lucide:x" size="24" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </Form>
+    </DialogContent>
+  </DialogPortal>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/dialog/DialogContent.vue.d.ts

@@ -14,21 +14,21 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     submit: (event: Event) => any;
     close: (event: Event) => any;
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSubmit?: ((event: Event) => any) | undefined;
     onClose?: ((event: Event) => any) | undefined;
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {
     disabledCloseBtn: boolean;
     noPadding: boolean;

package/dist/runtime/components/ui/dialog/DialogDescription.vue

@@ -12,11 +12,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogDescription
-    data-slot="dialog-description"
-    v-bind="forwardedProps"
-    :class="cn('text-gray font-body-large', props.class)"
-  >
-    <slot />
-  </DialogDescription>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-gray font-body-large', props.class)"
+  >
+    <slot />
+  </DialogDescription>
 </template>

package/dist/runtime/components/ui/dialog/DialogFooter.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="dialog-footer"
+  <div
+    data-slot="dialog-footer"
     :class="
   cn(
     'flex w-full gap-4 [&_.w-full]:flex-1 [&_.w-full]:!w-auto [&_.w-full]:min-w-0',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/dialog/DialogHeader.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="dialog-header"
+  <div
+    data-slot="dialog-header"
     :class="
   cn(
     'flex flex-col gap-2 text-center sm:text-left font-body-large',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/dialog/DialogOverlay.vue

@@ -12,16 +12,16 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <DialogOverlay
-    data-slot="dialog-overlay"
-    v-bind="delegatedProps"
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
     :class="
   cn(
     ' data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
     props.class
   )
-"
-  >
-    <slot />
-  </DialogOverlay>
+"
+  >
+    <slot />
+  </DialogOverlay>
 </template>

package/dist/runtime/components/ui/dialog/DialogScrollContent.d.vue.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/dialog/DialogScrollContent.vue

@@ -21,18 +21,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    >
-      <DialogContent
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
         :class="
   cn(
     'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
     props.class
   )
-"
-        v-bind="forwarded"
+"
+        v-bind="forwarded"
         @pointer-down-outside="
   (event) => {
     const originalEvent = event.detail.originalEvent;
@@ -41,17 +41,17 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       event.preventDefault();
     }
   }
-"
-      >
-        <slot />
-
-        <DialogClose
-          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
-        >
-          <Icon name="lucide:x" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
+"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <Icon name="lucide:x" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
 </template>

package/dist/runtime/components/ui/dialog/DialogScrollContent.vue.d.ts

@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openAutoFocus: (event: Event) => any;
+    closeAutoFocus: (event: Event) => any;
     escapeKeyDown: (event: KeyboardEvent) => any;
     pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
     focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
     interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-    openAutoFocus: (event: Event) => any;
-    closeAutoFocus: (event: Event) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenAutoFocus?: ((event: Event) => any) | undefined;
+    onCloseAutoFocus?: ((event: Event) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
     onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onOpenAutoFocus?: ((event: Event) => any) | undefined;
-    onCloseAutoFocus?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ui/dialog/DialogTitle.vue

@@ -12,11 +12,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogTitle
-    data-slot="dialog-title"
-    v-bind="forwardedProps"
-    :class="cn('text-lg leading-none font-title-large-prominent', props.class)"
-  >
-    <slot />
-  </DialogTitle>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-title-large-prominent', props.class)"
+  >
+    <slot />
+  </DialogTitle>
 </template>

package/dist/runtime/components/ui/dialog/DialogTrigger.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
-    <slot />
-  </DialogTrigger>
+  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenu.vue

@@ -11,10 +11,10 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <DropdownMenuRoot
-    data-slot="dropdown-menu"
-    v-bind="forwarded"
-  >
-    <slot />
-  </DropdownMenuRoot>
+  <DropdownMenuRoot
+    data-slot="dropdown-menu"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DropdownMenuRoot>
 </template>

package/dist/runtime/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -20,19 +20,19 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuCheckboxItem
-    data-slot="dropdown-menu-checkbox-item"
-    v-bind="forwarded"
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
     :class="cn(
   'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
   props.class
-)"
-  >
-    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <CheckIcon class="size-4" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
+)"
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <CheckIcon class="size-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
 </template>