@eslamdevui/ui 4.1.1-rc.2 → 4.3.0

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

@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/command-palette';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps } from '../types';
+import type { AvatarProps, ButtonProps, ChipProps, KbdProps, InputProps, LinkProps, IconProps, LinkPropsKeys } from '../types';
 import type { GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type CommandPalette = ComponentConfig<typeof theme, AppConfig, 'commandPalette'>;
@@ -98,7 +98,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @emits 'update:open'
      * @defaultValue false
      */
-    close?: boolean | Partial<ButtonProps>;
+    close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the close button.
      * @defaultValue appConfig.ui.icons.close
@@ -110,7 +110,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
      * @defaultValue true
      */
-    back?: boolean | ButtonProps;
+    back?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The icon displayed in the back button.
      * @defaultValue appConfig.ui.icons.arrowLeft
@@ -194,13 +194,17 @@ export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPalett
     'item-description': SlotProps<T>;
     'item-trailing': SlotProps<T>;
 } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
-declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__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<{
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__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: __VLS_PrettifyLocal<(CommandPaletteProps<G, T> & {
         searchTerm?: string;
     }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: T) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;
-    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps;
+    } | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void) & ((evt: "update:searchTerm", value: string) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CommandPaletteSlots<G, T>;
@@ -211,8 +215,8 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
 }>) => 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/Container.d.vue.ts

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

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

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

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

@@ -105,8 +105,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
         index: number;
     }) => any;
     'item-trailing': SlotProps<T>;
-    'content-top': (props?: {}) => any;
-    'content-bottom': (props?: {}) => any;
+    'content-top': (props: {
+        sub: boolean;
+    }) => any;
+    'content-bottom': (props: {
+        sub: boolean;
+    }) => any;
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active?: boolean;
     index: number;
@@ -115,8 +119,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
     index: number;
     ui: ContextMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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: __VLS_PrettifyLocal<ContextMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ContextMenuSlots<T, NestedItem<T>>;
@@ -124,8 +132,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/ContextMenu.vue

@@ -13,9 +13,9 @@ import UContextMenuContent from "./ContextMenuContent.vue";
 const props = defineProps({
   size: { type: null, required: false },
   items: { type: null, required: false },
-  checkedIcon: { type: [String, Object], required: false },
-  loadingIcon: { type: [String, Object], required: false },
-  externalIcon: { type: [Boolean, String, Object], required: false, default: true },
+  checkedIcon: { type: null, required: false },
+  loadingIcon: { type: null, required: false },
+  externalIcon: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   content: { type: Object, required: false },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   labelKey: { type: null, required: false, default: "label" },

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

@@ -105,8 +105,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
         index: number;
     }) => any;
     'item-trailing': SlotProps<T>;
-    'content-top': (props?: {}) => any;
-    'content-bottom': (props?: {}) => any;
+    'content-top': (props: {
+        sub: boolean;
+    }) => any;
+    'content-bottom': (props: {
+        sub: boolean;
+    }) => any;
 } & DynamicSlots<MergeTypes<T>, 'label' | 'description', {
     active?: boolean;
     index: number;
@@ -115,8 +119,12 @@ export type ContextMenuSlots<A extends ArrayOrNested<ContextMenuItem> = ArrayOrN
     index: number;
     ui: ContextMenu['ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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: __VLS_PrettifyLocal<ContextMenuProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:open", payload: boolean) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ContextMenuSlots<T, NestedItem<T>>;
@@ -124,8 +132,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/ContextMenuContent.d.vue.ts

@@ -28,8 +28,12 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     ui: ContextMenu['ui'];
     uiOverride?: ContextMenu['slots'];
 }
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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: __VLS_PrettifyLocal<ContextMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ContextMenuSlots<T>;
@@ -37,8 +41,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/ContextMenuContent.vue

@@ -24,9 +24,9 @@ const props = defineProps({
   sub: { type: Boolean, required: false },
   labelKey: { type: null, required: true },
   descriptionKey: { type: null, required: true },
-  checkedIcon: { type: [String, Object], required: false },
-  loadingIcon: { type: [String, Object], required: false },
-  externalIcon: { type: [Boolean, String, Object], required: false },
+  checkedIcon: { type: null, required: false },
+  loadingIcon: { type: null, required: false },
+  externalIcon: { type: [Boolean, String], required: false, skipCheck: true },
   class: { type: null, required: false },
   ui: { type: null, required: true },
   uiOverride: { type: null, required: false },
@@ -62,59 +62,60 @@ const groups = computed(
   <DefineItemTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="item" :index="index" :ui="ui">
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index" :ui="ui">
-        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
-        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
+        <UIcon v-if="item.loading" :name="loadingIcon || appConfig.ui.icons.loading" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, loading: true })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ class: [uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item?.color, active })" />
+        <UAvatar v-else-if="item.avatar" :size="item.ui?.itemLeadingAvatarSize || uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" data-slot="itemLeadingAvatar" :class="ui.itemLeadingAvatar({ class: [uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })" />
       </slot>
 
-      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description'])" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
-        <span :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
+      <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'] || (get(item, props.descriptionKey) || !!slots[item.slot ? `${item.slot}-description` : 'item-description'])" data-slot="itemWrapper" :class="ui.itemWrapper({ class: [uiOverride?.itemWrapper, item.ui?.itemWrapper] })">
+        <span data-slot="itemLabel" :class="ui.itemLabel({ class: [uiOverride?.itemLabel, item.ui?.itemLabel], active })">
           <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
             {{ get(item, props.labelKey) }}
           </slot>
 
-          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
+          <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" data-slot="itemLabelExternalIcon" :class="ui.itemLabelExternalIcon({ class: [uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item?.color, active })" />
         </span>
 
-        <span v-if="get(item, props.descriptionKey)" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
+        <span v-if="get(item, props.descriptionKey)" data-slot="itemDescription" :class="ui.itemDescription({ class: [uiOverride?.itemDescription, item.ui?.itemDescription] })">
           <slot :name="item.slot ? `${item.slot}-description` : 'item-description'" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey) }}
           </slot>
         </span>
       </span>
 
-      <span :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
+      <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [uiOverride?.itemTrailing, item.ui?.itemTrailing] })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index" :ui="ui">
-          <UIcon v-if="item.children?.length" :name="childrenIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
-          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
+          <UIcon v-if="item.children?.length" :name="childrenIcon" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color, active })" />
+          <span v-else-if="item.kbds?.length" data-slot="itemTrailingKbds" :class="ui.itemTrailingKbds({ class: [uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })">
             <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.ui?.itemTrailingKbdsSize || uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
         <ContextMenu.ItemIndicator as-child>
-          <UIcon :name="checkedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
+          <UIcon :name="checkedIcon || appConfig.ui.icons.check" data-slot="itemTrailingIcon" :class="ui.itemTrailingIcon({ class: [uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item?.color })" />
         </ContextMenu.ItemIndicator>
       </span>
     </slot>
   </DefineItemTemplate>
 
   <ContextMenu.Portal v-bind="portalProps">
-    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
-      <slot name="content-top" />
+    <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" data-slot="content" :class="ui.content({ class: [uiOverride?.content, props.class] })" v-bind="contentProps">
+      <slot name="content-top" :sub="sub ?? false" />
 
-      <div role="presentation" :class="ui.viewport({ class: uiOverride?.viewport })">
-        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
+      <div role="presentation" data-slot="viewport" :class="ui.viewport({ class: uiOverride?.viewport })">
+        <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" data-slot="group" :class="ui.group({ class: uiOverride?.group })">
           <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-            <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
+            <ContextMenu.Label v-if="item.type === 'label'" data-slot="label" :class="ui.label({ class: [uiOverride?.label, item.ui?.label, item.class] })">
               <ReuseItemTemplate :item="item" :index="index" />
             </ContextMenu.Label>
-            <ContextMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
+            <ContextMenu.Separator v-else-if="item.type === 'separator'" data-slot="separator" :class="ui.separator({ class: [uiOverride?.separator, item.ui?.separator, item.class] })" />
             <ContextMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
               <ContextMenu.SubTrigger
                 as="button"
                 type="button"
                 :disabled="item.disabled"
                 :text-value="get(item, props.labelKey)"
+                data-slot="item"
                 :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               >
                 <ReuseItemTemplate :item="item" :index="index" />
@@ -145,6 +146,7 @@ const groups = computed(
               :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="get(item, props.labelKey)"
+              data-slot="item"
               :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], color: item?.color })"
               @update:model-value="item.onUpdateChecked"
               @select="item.onSelect"
@@ -159,7 +161,7 @@ const groups = computed(
               @select="item.onSelect"
             >
               <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-                <ULinkBase v-bind="slotProps" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
+                <ULinkBase v-bind="slotProps" data-slot="item" :class="ui.item({ class: [uiOverride?.item, item.ui?.item, item.class], active, color: item?.color })">
                   <ReuseItemTemplate :item="item" :active="active" :index="index" />
                 </ULinkBase>
               </ULink>
@@ -170,7 +172,7 @@ const groups = computed(
 
       <slot />
 
-      <slot name="content-bottom" />
+      <slot name="content-bottom" :sub="sub ?? false" />
     </component>
   </ContextMenu.Portal>
 </template>

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

@@ -28,8 +28,12 @@ interface ContextMenuContentProps<T extends ArrayOrNested<ContextMenuItem>> exte
     ui: ContextMenu['ui'];
     uiOverride?: ContextMenu['slots'];
 }
-declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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<ContextMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__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: __VLS_PrettifyLocal<ContextMenuContentProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: ContextMenuSlots<T>;
@@ -37,8 +41,8 @@ declare const __VLS_export: <T extends ArrayOrNested<ContextMenuItem>>(__VLS_pro
 }>) => 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/DashboardGroup.d.vue.ts

@@ -10,14 +10,14 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
 export interface DashboardGroupSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
     storage: "cookie" | "local";
     storageKey: string;
     persistent: boolean;
     unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -10,14 +10,14 @@ export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' |
 export interface DashboardGroupSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
     storage: "cookie" | "local";
     storageKey: string;
     persistent: boolean;
     unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-navbar';
 import type { DashboardContext } from '../utils/dashboard';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
 export interface DashboardNavbarProps {
@@ -21,7 +21,7 @@ export interface DashboardNavbarProps {
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
-    toggle?: boolean | Partial<ButtonProps>;
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The side to render the toggle button on.
      * @defaultValue 'left'
@@ -46,12 +46,12 @@ export interface DashboardNavbarSlots {
         ui: DashboardNavbar['ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
-    toggle: boolean | Partial<ButtonProps>;
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
     toggleSide: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardNavbar.vue

@@ -14,7 +14,7 @@ import UIcon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
-  icon: { type: [String, Object], required: false },
+  icon: { type: null, required: false },
   title: { type: String, required: false },
   toggle: { type: [Boolean, Object], required: false, default: true },
   toggleSide: { type: String, required: false, default: "left" },
@@ -35,21 +35,22 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
         v-if="toggle"
         v-bind="typeof toggle === 'object' ? toggle : {}"
         :side="toggleSide"
+        data-slot="toggle"
         :class="ui.toggle({ class: props.ui?.toggle, toggleSide })"
       />
     </slot>
   </DefineToggleTemplate>
 
-  <Primitive :as="as" v-bind="$attrs" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.left({ class: props.ui?.left })">
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="left" :class="ui.left({ class: props.ui?.left })">
       <ReuseToggleTemplate v-if="toggleSide === 'left'" />
 
       <slot name="left" v-bind="dashboardContext">
         <slot name="leading" v-bind="{ ...dashboardContext, ui }">
-          <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
+          <UIcon v-if="icon" :name="icon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
         </slot>
 
-        <h1 :class="ui.title({ class: props.ui?.title })">
+        <h1 data-slot="title" :class="ui.title({ class: props.ui?.title })">
           <slot name="title">
             {{ title }}
           </slot>
@@ -59,11 +60,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardNavb
       </slot>
     </div>
 
-    <div v-if="!!slots.default" :class="ui.center({ class: props.ui?.center })">
+    <div v-if="!!slots.default" data-slot="center" :class="ui.center({ class: props.ui?.center })">
       <slot v-bind="dashboardContext" />
     </div>
 
-    <div :class="ui.right({ class: props.ui?.right })">
+    <div data-slot="right" :class="ui.right({ class: props.ui?.right })">
       <slot name="right" v-bind="dashboardContext" />
 
       <ReuseToggleTemplate v-if="toggleSide === 'right'" />

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/dashboard-navbar';
 import type { DashboardContext } from '../utils/dashboard';
-import type { ButtonProps, IconProps } from '../types';
+import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
 export interface DashboardNavbarProps {
@@ -21,7 +21,7 @@ export interface DashboardNavbarProps {
      * `{ color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      * @defaultValue true
      */
-    toggle?: boolean | Partial<ButtonProps>;
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
     /**
      * The side to render the toggle button on.
      * @defaultValue 'left'
@@ -46,12 +46,12 @@ export interface DashboardNavbarSlots {
         ui: DashboardNavbar['ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
-    toggle: boolean | Partial<ButtonProps>;
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
     toggleSide: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -18,12 +18,12 @@ export interface DashboardPanelSlots {
         onDoubleClick: (e: MouseEvent) => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
     minSize: number;
     resizable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/DashboardPanel.vue

@@ -35,13 +35,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPane
     ref="el"
     v-bind="$attrs"
     :data-dragging="isDragging"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
   >
     <slot>
       <slot name="header" />
 
-      <div :class="ui.body({ class: props.ui?.body })">
+      <div data-slot="body" :class="ui.body({ class: props.ui?.body })">
         <slot name="body" />
       </div>
 
@@ -53,6 +54,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dashboardPane
     <UDashboardResizeHandle
       v-if="resizable"
       :aria-controls="id"
+      data-slot="handle"
       :class="ui.handle({ class: props.ui?.handle })"
       @mousedown="onMouseDown"
       @touchstart="onTouchStart"

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

@@ -18,12 +18,12 @@ export interface DashboardPanelSlots {
         onDoubleClick: (e: MouseEvent) => void;
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
     minSize: number;
     resizable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

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

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

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