@byyuurin/ui 0.0.9 → 0.0.11

package/dist/runtime/components/Checkbox.vue

@@ -1,97 +1,75 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui'
-import type { checkbox } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface CheckboxEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface CheckboxSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
-
-type CheckboxVariants = VariantProps<typeof checkbox>
-
-export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  label?: string
-  description?: string
-  size?: CheckboxVariants['size']
-  /**
-   * The icon displayed when checked.
-   * @default app.icons.check
-   */
-  icon?: string
-  /**
-   * The icon displayed when the checkbox is indeterminate.
-   * @default app.icons.indeterminate
-   */
-  indeterminateIcon?: string
-}
 </script>
 
-<script lang="ts" setup>
-import { reactivePick } from '@vueuse/core'
-import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
-import { computed, useId } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<CheckboxProps>(), {
-  required: false,
-  disabled: false,
-})
-const emit = defineEmits<CheckboxEmits>()
-const slots = defineSlots<CheckboxSlots>()
-
-const innerValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-
-const id = props.id ?? useId()
-
-const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('checkbox', props))
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: value })
-  emit('change', event)
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from "reka-ui";
+import { computed, useId } from "vue";
+import { useFormItem } from "../composables/useFormItem";
+import { useTheme } from "../composables/useTheme";
+const props = defineProps({
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  size: { type: null, required: false },
+  icon: { type: String, required: false },
+  indeterminateIcon: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  name: { type: String, required: false },
+  value: { type: null, required: false },
+  id: { type: String, required: false },
+  defaultValue: { type: [Boolean, String], required: false }
+});
+const emit = defineEmits(["change"]);
+const slots = defineSlots();
+const innerValue = defineModel({ type: [Boolean, String], ...{ default: void 0 } });
+const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
+const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem(props);
+const id = _id.value ?? useId();
+const { theme, generateStyle } = useTheme();
+const style = computed(() => generateStyle("checkbox", {
+  ...props,
+  size: size.value,
+  disabled: disabled.value
+}));
+function onUpdate(value) {
+  const event = new Event("change", { target: value });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
 }
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <div :class="style.container({ class: props.ui?.container })">
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <div :class="style.container({ class: props.ui?.container })" data-part="container">
       <CheckboxRoot
-        :id="id"
-        v-bind="rootProps"
         v-slot="{ modelValue }"
+        v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
         v-model="innerValue"
-        :name="props.name"
-        :disabled="props.disabled"
         :class="style.base({ class: props.ui?.base })"
+        data-part="base"
         @update:model-value="onUpdate"
       >
         <CheckboxIndicator as-child force-mount>
           <span
             v-if="modelValue === 'indeterminate'"
             :class="style.icon({ class: [props.indeterminateIcon || theme.app.icons.indeterminate, props.ui?.icon] })"
+            data-part="icon"
           ></span>
-          <span v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></span>
+          <span v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })" data-part="icon"></span>
         </CheckboxIndicator>
       </CheckboxRoot>
     </div>
-    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })">
+    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })" data-part="label">
         <slot name="label" :label="props.label">{{ props.label }}</slot>
       </Label>
-      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })" data-part="description">
         <slot name="description" :description="props.description">
           {{ props.description }}
         </slot>

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

@@ -0,0 +1,56 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui';
+import type { checkbox } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface CheckboxEmits {
+    change: [payload: Event];
+}
+export interface CheckboxSlots {
+    label?: (props: {
+        label?: string;
+    }) => any;
+    description?: (props: {
+        description?: string;
+    }) => any;
+}
+type CheckboxVariants = VariantProps<typeof checkbox>;
+export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    label?: string;
+    description?: string;
+    size?: CheckboxVariants['size'];
+    /**
+     * The icon displayed when checked.
+     * @default app.icons.check
+     */
+    icon?: string;
+    /**
+     * The icon displayed when the checkbox is indeterminate.
+     * @default app.icons.indeterminate
+     */
+    indeterminateIcon?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
+    modelValue?: boolean | "indeterminate";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (payload: Event) => any;
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps & {
+    modelValue?: boolean | "indeterminate";
+}> & Readonly<{
+    onChange?: ((payload: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    disabled: boolean;
+    required: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Chip.vue

@@ -1,66 +1,49 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { chip } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface ChipSlots {
-  leading?: (props?: {}) => any
-  default?: (props?: {}) => any
-  trailing?: (props?: {}) => any
-}
-
-type ChipVariants = VariantProps<typeof chip>
-
-export interface ChipProps extends ComponentAttrs<typeof chip>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  variant?: ChipVariants['variant']
-  size?: ChipVariants['size']
-  label?: string
-}
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { useButtonGroup } from '../composables/useButtonGroup'
-import { useComponentIcons } from '../composables/useComponentIcons'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<ChipProps>(), {
-  variant: 'solid',
-})
-
-const slots = defineSlots<ChipSlots>()
-
-const { size, orientation } = useButtonGroup(props)
-const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('chip', {
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useButtonGroup } from "../composables/useButtonGroup";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useTheme } from "../composables/useTheme";
+const props = defineProps({
+  as: { type: null, required: false },
+  variant: { type: null, required: false, default: "solid" },
+  size: { type: null, required: false },
+  label: { type: String, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: String, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: String, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: String, required: false }
+});
+const slots = defineSlots();
+const { size, orientation } = useButtonGroup(props);
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props);
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("chip", {
   ...props,
   size: size.value,
-  groupOrientation: orientation.value,
-}))
+  groupOrientation: orientation.value
+}));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })">
+  <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })" data-part="base">
     <slot name="leading">
-      <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
+      <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })" data-part="leading-icon"></span>
     </slot>
 
-    <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
+    <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })" data-part="label">
       <slot>{{ props.label }}</slot>
     </span>
 
     <slot name="trailing">
-      <span v-if="isTrailing && trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
+      <span v-if="isTrailing && trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })" data-part="trailing-icon"></span>
     </slot>
   </Primitive>
 </template>

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

@@ -0,0 +1,30 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons.js';
+import type { chip } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface ChipSlots {
+    leading?: (props?: {}) => any;
+    default?: (props?: {}) => any;
+    trailing?: (props?: {}) => any;
+}
+type ChipVariants = VariantProps<typeof chip>;
+export interface ChipProps extends ComponentAttrs<typeof chip>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    variant?: ChipVariants['variant'];
+    size?: ChipVariants['size'];
+    label?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{}>, {
+    variant: "solid" | "outline" | "soft" | "soft-outline";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Collapsible.vue

@@ -1,35 +1,26 @@
-<script lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
-import type { collapsible } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface CollapsibleEmits extends CollapsibleRootEmits {}
-
-export interface CollapsibleSlots {
-  default?: (props: { open: boolean }) => any
-  content?: (props?: {}) => any
-}
-
-export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
-}
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<CollapsibleProps>(), {
-  unmountOnHide: true,
-})
-const emit = defineEmits<CollapsibleEmits>()
-const slots = defineSlots<CollapsibleSlots>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emit)
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('collapsible', props))
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from "reka-ui";
+import { computed } from "vue";
+import { useTheme } from "../composables/useTheme";
+const props = defineProps({
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  as: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:open"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "disabled", "unmountOnHide"), emit);
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("collapsible", props));
 </script>
 
 <template>
@@ -37,12 +28,13 @@ const style = computed(() => generateStyle('collapsible', props))
     v-slot="{ open }"
     v-bind="rootProps"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    data-part="root"
   >
     <CollapsibleTrigger v-if="slots.default" as-child>
       <slot :open="open"></slot>
     </CollapsibleTrigger>
 
-    <CollapsibleContent :class="style.content({ class: props.ui?.content })">
+    <CollapsibleContent :class="style.content({ class: props.ui?.content })" data-part="content">
       <slot name="content"></slot>
     </CollapsibleContent>
   </CollapsibleRoot>

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

@@ -0,0 +1,26 @@
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import type { collapsible } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface CollapsibleEmits extends CollapsibleRootEmits {
+}
+export interface CollapsibleSlots {
+    default?: (props: {
+        open: boolean;
+    }) => any;
+    content?: (props?: {}) => any;
+}
+export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Drawer.vue

@@ -1,106 +1,51 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
-import type { drawer } from '../theme'
-import type { ButtonProps, ComponentAttrs } from '../types'
+<script>
 
-export interface DrawerEmits extends DialogRootEmits {
-  'after-leave': []
-}
-
-export interface DrawerSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-  header?: (props?: {}) => any
-  title?: (props?: {}) => any
-  description?: (props?: {}) => any
-  close?: (props?: {}) => any
-  body?: (props?: {}) => any
-  footer?: (props?: {}) => any
-}
-
-type DrawerVariants = VariantProps<typeof drawer>
-
-export interface DrawerProps extends ComponentAttrs<typeof drawer>, DialogRootProps {
-  title?: string
-  description?: string
-  /** The content of the drawer. */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
-  /**
-   * Render an overlay behind the drawer.
-   * @default true
-   */
-  overlay?: boolean
-  /** @default true */
-  transition?: boolean
-  /**
-   * The direction of the drawer.
-   * @default "bottom"
-   */
-  direction?: DrawerVariants['direction']
-  /**
-   * Whether to inset the drawer from the edges.
-   */
-  inset?: boolean
-  /**
-   * Render the drawer in a portal.
-   * @default true
-   */
-  portal?: boolean
-  /**
-   * Display a close button to dismiss the drawer.
-   * @default true
-   */
-  close?: ButtonProps | boolean
-  /** @default app.icons.close */
-  closeIcon?: string
-  /**
-   * When `false`, the drawer will not close when clicking outside or pressing escape.
-   * @default true
-   */
-  dismissible?: boolean
-}
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
-import { computed, toRef } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-import Button from './Button.vue'
-
-const props = withDefaults(defineProps<DrawerProps>(), {
-  direction: 'bottom',
-  modal: true,
-  portal: true,
-  overlay: true,
-  transition: true,
-  dismissible: true,
-  close: true,
-})
-const emit = defineEmits<DrawerEmits>()
-const slots = defineSlots<DrawerSlots>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emit)
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from "reka-ui";
+import { computed, toRef } from "vue";
+import { useLocale } from "../composables/useLocale";
+import { useTheme } from "../composables/useTheme";
+import Button from "./Button.vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  content: { type: Object, required: false },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  direction: { type: null, required: false, default: "bottom" },
+  inset: { type: Boolean, required: false },
+  portal: { type: Boolean, required: false, default: true },
+  close: { type: [Object, Boolean], required: false, default: true },
+  closeIcon: { type: String, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  open: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  modal: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["after-leave", "update:open"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "modal"), emit);
 const contentProps = toRef(() => ({
   ...props.content,
-  ...(slots.content || slots.header || (!props.description && !slots.description)) ? { 'aria-describedby': undefined } : {},
-}))
+  ...slots.content || slots.header || !props.description && !slots.description ? { "aria-describedby": void 0 } : {}
+}));
 const contentEvents = computed(() => {
   if (props.dismissible)
-    return {}
-
+    return {};
   return {
-    pointerDownOutside: (e: Event) => e.preventDefault(),
-    interactOutside: (e: Event) => e.preventDefault(),
-    escapeKeyDown: (e: Event) => e.preventDefault(),
-  }
-})
-
-const { t } = useLocale()
-const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('drawer', props))
+    pointerDownOutside: (e) => e.preventDefault(),
+    interactOutside: (e) => e.preventDefault(),
+    escapeKeyDown: (e) => e.preventDefault()
+  };
+});
+const { t } = useLocale();
+const { theme, generateStyle } = useTheme();
+const style = computed(() => generateStyle("drawer", props));
 </script>
 
 <template>
@@ -110,29 +55,32 @@ const style = computed(() => generateStyle('drawer', props))
     </DialogTrigger>
 
     <DialogPortal :disabled="!props.portal">
-      <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
+      <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" data-part="overlay" />
 
       <DialogContent
         :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
         :data-direction="props.direction"
+        data-part="content"
         v-bind="contentProps"
         v-on="contentEvents"
         @after-leave="emit('after-leave')"
       >
-        <VisuallyHidden v-if="slots.content || slots.header || (!props.title && !slots.title)">
+        <VisuallyHidden v-if="slots.content || slots.header || !props.title && !slots.title">
           <DialogTitle />
         </VisuallyHidden>
 
         <slot name="content">
-          <div :class="style.container({ class: props.ui?.container })">
+          <div :class="style.container({ class: props.ui?.container })" data-part="container">
             <div
               v-if="slots.header || props.title || slots.title || props.description || slots.description || props.close || slots.close"
               :class="style.header({ class: props.ui?.header })"
+              data-part="header"
             >
               <slot name="header">
                 <DialogTitle
                   v-if="props.title || slots.title"
                   :class="style.title({ class: props.ui?.title })"
+                  data-part="title"
                 >
                   <slot name="title">
                     {{ props.title }}
@@ -140,13 +88,14 @@ const style = computed(() => generateStyle('drawer', props))
                 </DialogTitle>
 
                 <DialogClose v-if="props.close || slots.close" as-child>
-                  <slot name="close">
+                  <slot name="close" :ui="props.ui">
                     <Button
                       variant="ghost"
                       :icon="props.closeIcon || theme.app.icons.close"
                       v-bind="typeof props.close === 'boolean' ? {} : props.close"
-                      :class="style.close({ class: props.ui?.close })"
                       :aria-label="t('modal.close')"
+                      :class="style.close({ class: props.ui?.close })"
+                      data-part="close"
                     />
                   </slot>
                 </DialogClose>
@@ -154,6 +103,7 @@ const style = computed(() => generateStyle('drawer', props))
                 <DialogDescription
                   v-if="props.description || slots.description"
                   :class="style.description({ class: props.ui?.description })"
+                  data-part="description"
                 >
                   <slot name="description">
                     {{ props.description }}
@@ -162,11 +112,11 @@ const style = computed(() => generateStyle('drawer', props))
               </slot>
             </div>
 
-            <div v-if="slots.body" :class="style.body({ class: props.ui?.body })">
+            <div v-if="slots.body" :class="style.body({ class: props.ui?.body })" data-part="body">
               <slot name="body"></slot>
             </div>
 
-            <div v-if="slots.footer" :class="style.footer({ class: props.ui?.footer })">
+            <div v-if="slots.footer" :class="style.footer({ class: props.ui?.footer })" data-part="footer">
               <slot name="footer"></slot>
             </div>
           </div>