@bitrix24/b24ui-nuxt 0.5.3 → 0.5.4

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.Bh_5o1_9.cjs');
+const templates = require('./shared/b24ui-nuxt.BfU7TRfz.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.BIuy4yic.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CTERD7XY.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Alert.vue

@@ -72,7 +72,7 @@ export interface AlertSlots {
   title(props?: {}): any
   description(props?: {}): any
   actions(props?: {}): any
-  close(props: { b24ui: any }): any
+  close(props: { b24ui: ReturnType<typeof alert> }): any
 }
 </script>
 

package/dist/runtime/components/App.vue

@@ -17,7 +17,7 @@ export default {
 }
 </script>
 
-<script setup lang="ts" generic="T extends Messages = Messages">
+<script setup lang="ts" generic="T extends Messages">
 import { toRef, useId, provide } from 'vue'
 import { ConfigProvider, TooltipProvider, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'

package/dist/runtime/components/Button.vue

@@ -184,7 +184,7 @@ const b24ui = computed(() => tv({
     :type="type"
     :disabled="disabled || isLoading"
     :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
-    v-bind="omit(linkProps, ['type', 'disabled'])"
+    v-bind="omit(linkProps, ['type', 'disabled', 'onClick'])"
     custom
   >
     <B24LinkBase

package/dist/runtime/components/Calendar.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
+import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
+import type { IconComponent, ButtonProps } from '../types'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/calendar'
 import { tv } from '../utils/tv'
-import type { IconComponent } from '../types'
 import type { PartialString } from '../types/utils'
 
 const appConfigCalendar = _appConfig as AppConfig & { b24ui: { calendar: Partial<typeof theme> } }
@@ -15,13 +15,21 @@ const calendar = tv({ extend: tv(theme), ...(appConfigCalendar.b24ui?.calendar |
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true
   ? DateRange
   : M extends true
     ? DateValue[]
     : DateValue
+type CalendarModelValue<R extends boolean = false, M extends boolean = false> = R extends true
+  ? (DateRange | null)
+  : M extends true
+    ? (DateValue[] | undefined)
+    : (DateValue | undefined)
 
-export interface CalendarProps<R extends boolean, M extends boolean> extends Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'> {
+type _CalendarRootProps = Omit<CalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>
+type _RangeCalendarRootProps = Omit<RangeCalendarRootProps, 'as' | 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'locale' | 'calendarLabel' | 'multiple'>
+
+export interface CalendarProps<R extends boolean = false, M extends boolean = false> extends _RangeCalendarRootProps, _CalendarRootProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -33,24 +41,44 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Omi
    * @IconComponent
    */
   nextYearIcon?: IconComponent
+  /**
+   * Configure the next year button.
+   * `{ color: 'link' }`{lang="ts"}
+   */
+  nextYear?: ButtonProps
   /**
    * The icon to use for the next month control.
    * @defaultValue icons.chevronRight
    * @IconComponent
    */
   nextMonthIcon?: IconComponent
+  /**
+   * Configure the next month button.
+   * `{ color: 'link' }`{lang="ts"}
+   */
+  nextMonth?: ButtonProps
   /**
    * The icon to use for the previous year control.
    * @defaultValue icons.chevronDoubleLeft
    * @IconComponent
    */
   prevYearIcon?: IconComponent
+  /**
+   * Configure the prev year button.
+   * `{ color: 'link' }`{lang="ts"}
+   */
+  prevYear?: ButtonProps
   /**
    * The icon to use for the previous month control.
    * @defaultValue icons.chevronLeft
    * @IconComponent
    */
   prevMonthIcon?: IconComponent
+  /**
+   * Configure the prev month button.
+   * `{ color: 'link' }`{lang="ts"}
+   */
+  prevMonth?: ButtonProps
   /**
    * @defaultValue 'primary'
    */
@@ -67,7 +95,7 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Omi
   monthControls?: boolean
   /** Show year controls */
   yearControls?: boolean
-  defaultValue?: CalendarModelValue<R, M>
+  defaultValue?: CalendarDefaultValue<R, M>
   modelValue?: CalendarModelValue<R, M>
   class?: any
   b24ui?: PartialString<typeof calendar.slots>
@@ -84,7 +112,7 @@ export interface CalendarSlots {
 }
 </script>
 
-<script setup lang="ts" generic="R extends boolean = false, M extends boolean = false">
+<script setup lang="ts" generic="R extends boolean, M extends boolean">
 import { computed } from 'vue'
 import { useForwardPropsEmits } from 'reka-ui'
 import { Calendar as SingleCalendar, RangeCalendar } from 'reka-ui/namespaced'
@@ -137,18 +165,18 @@ const btnSize = computed(() => {
   <Calendar.Root
     v-slot="{ weekDays, grid }"
     v-bind="rootProps"
-    :model-value="(modelValue as CalendarModelValue<true & false>)"
-    :default-value="(defaultValue as CalendarModelValue<true & false>)"
+    :model-value="modelValue"
+    :default-value="defaultValue"
     :locale="locale"
     :dir="dir"
     :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
   >
     <Calendar.Header :class="b24ui.header({ class: props.b24ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
-        <B24Button :icon="prevYearIcon" :size="btnSize" color="link" />
+        <B24Button :icon="prevYearIcon" :size="btnSize" color="link" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
-        <B24Button :icon="prevMonthIcon" :size="btnSize" color="link" />
+        <B24Button :icon="prevMonthIcon" :size="btnSize" color="link" v-bind="props.prevMonth" />
       </Calendar.Prev>
       <Calendar.Heading v-slot="{ headingValue }" :class="b24ui.heading({ class: props.b24ui?.heading })">
         <slot name="heading" :value="headingValue">
@@ -156,10 +184,10 @@ const btnSize = computed(() => {
         </slot>
       </Calendar.Heading>
       <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
-        <B24Button :icon="nextMonthIcon" :size="btnSize" color="link" />
+        <B24Button :icon="nextMonthIcon" :size="btnSize" color="link" v-bind="props.nextMonth" />
       </Calendar.Next>
       <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
-        <B24Button :icon="nextYearIcon" :size="btnSize" color="link" />
+        <B24Button :icon="nextYearIcon" :size="btnSize" color="link" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
     <div :class="b24ui.body({ class: props.b24ui?.body })">

package/dist/runtime/components/DescriptionList.vue

@@ -37,9 +37,10 @@ export interface DescriptionListItem {
   actions?: ButtonProps[]
   class?: any
   b24ui?: Partial<typeof descriptionList.slots>
+  [key: string]: any
 }
 
-export interface DescriptionListProps<T> {
+export interface DescriptionListProps<T extends DescriptionListItem = DescriptionListItem> {
   legend?: string
   text?: string
   /**
@@ -61,17 +62,18 @@ export interface DescriptionListProps<T> {
   b24ui?: Partial<typeof descriptionList.slots>
 }
 
-type SlotProps<T> = (props: { item: T, index: number }) => any
+type SlotProps<T extends DescriptionListItem> = (props: { item: T, index: number }) => any
 
-export type DescriptionListSlots<T extends { slot?: string }> = {
+export type DescriptionListSlots<T extends DescriptionListItem = DescriptionListItem> = {
   legend(props?: {}): any
   text(props?: {}): any
   leading: SlotProps<T>
   label: SlotProps<T>
   description: SlotProps<T>
   actions: SlotProps<T>
+  content: SlotProps<T>
   footer(props?: { b24ui: any }): any
-} & DynamicSlots<T, SlotProps<T>>
+} & DynamicSlots<T, undefined, { index: number }>
 </script>
 
 <script setup lang="ts" generic="T extends DescriptionListItem">
@@ -91,6 +93,14 @@ const b24ui = computed(() => descriptionList({
 }))
 
 function normalizeItem(item: any) {
+  if (item === null) {
+    return {
+      label: undefined,
+      description: undefined,
+      orientation: undefined
+    }
+  }
+
   const label = get(item, props.labelKey as string)
   const description = get(item, props.descriptionKey as string)
   const orientation = item?.orientation || 'vertical'
@@ -113,9 +123,7 @@ const normalizedItems = computed(() => {
 </script>
 
 <template>
-  <div
-    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
-  >
+  <div :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
     <h2 v-if="legend || !!slots.legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
       <slot name="legend">
         {{ legend }}
@@ -132,95 +140,101 @@ const normalizedItems = computed(() => {
         v-for="(item, index) in normalizedItems"
         :key="index"
       >
-        <dt
-          :class="b24ui.labelWrapper({
-            class: [
-              props.b24ui?.labelWrapper,
-              item?.b24ui?.labelWrapper
-            ]
-          })"
+        <slot
+          :name="((item.slot || 'content') as keyof DescriptionListSlots<T>)"
+          :item="(item as Extract<T, { slot: string; }>)"
+          :index="index"
         >
-          <slot name="leading" :item="item" :index="index">
-            <Component
-              :is="item.icon"
-              v-if="item.icon"
-              :class="b24ui.icon({
-                class: [
-                  props.b24ui?.icon,
-                  item?.b24ui?.icon
-                ]
-              })"
-            />
-            <B24Avatar
-              v-else-if="item.avatar"
-              :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])"
-              v-bind="item.avatar"
-              :class="b24ui.avatar({
-                class: [
-                  props.b24ui?.avatar,
-                  item?.b24ui?.avatar
-                ]
-              })"
-            />
-          </slot>
-          <span
-            :class="b24ui.label({
+          <dt
+            :class="b24ui.labelWrapper({
               class: [
-                item?.class,
-                props.b24ui?.label,
-                item?.b24ui?.label
+                props.b24ui?.labelWrapper,
+                item?.b24ui?.labelWrapper
               ]
             })"
           >
-            <slot name="label" :item="item" :index="index">
-              {{ item.label }}
-            </slot>
-          </span>
-        </dt>
-        <dd
-          :data-orientation="item.orientation"
-          :class="b24ui.descriptionWrapper({
-            class: [
-              props.b24ui?.descriptionWrapper,
-              item?.b24ui?.descriptionWrapper
-            ],
-            orientation: item.orientation
-          })"
-        >
-          <span
-            :class="b24ui.description({
-              class: [
-                item?.class,
-                props.b24ui?.description,
-                item?.b24ui?.description
-              ],
-              orientation: item.orientation
-            })"
-          >
-            <slot name="description" :item="item" :index="index">
-              {{ item.description }}
+            <slot name="leading" :item="item" :index="index">
+              <Component
+                :is="item.icon"
+                v-if="item.icon"
+                :class="b24ui.icon({
+                  class: [
+                    props.b24ui?.icon,
+                    item?.b24ui?.icon
+                  ]
+                })"
+              />
+              <B24Avatar
+                v-else-if="item.avatar"
+                :size="((props.b24ui?.avatarSize || b24ui.avatarSize()) as AvatarProps['size'])"
+                v-bind="item.avatar"
+                :class="b24ui.avatar({
+                  class: [
+                    props.b24ui?.avatar,
+                    item?.b24ui?.avatar
+                  ]
+                })"
+              />
             </slot>
-          </span>
-          <span
-            v-if="item.actions?.length || !!slots.actions"
-            :class="b24ui.actions({
+            <span
+              :class="b24ui.label({
+                class: [
+                  item?.class,
+                  props.b24ui?.label,
+                  item?.b24ui?.label
+                ]
+              })"
+            >
+              <slot name="label" :item="item" :index="index">
+                {{ item.label }}
+              </slot>
+            </span>
+          </dt>
+          <dd
+            :data-orientation="item.orientation"
+            :class="b24ui.descriptionWrapper({
               class: [
-                props.b24ui?.actions,
-                item?.b24ui?.actions
+                props.b24ui?.descriptionWrapper,
+                item?.b24ui?.descriptionWrapper
               ],
               orientation: item.orientation
             })"
           >
-            <slot name="actions" :item="item" :index="index">
-              <B24Button
-                v-for="(action, indexActions) in item.actions"
-                :key="indexActions"
-                size="xs"
-                v-bind="action"
-              />
-            </slot>
-          </span>
-        </dd>
+            <span
+              :class="b24ui.description({
+                class: [
+                  item?.class,
+                  props.b24ui?.description,
+                  item?.b24ui?.description
+                ],
+                orientation: item.orientation
+              })"
+            >
+              <slot name="description" :item="item" :index="index">
+                {{ item.description }}
+              </slot>
+            </span>
+            <span
+              v-if="item.actions?.length || !!slots.actions"
+              :class="b24ui.actions({
+                class: [
+                  props.b24ui?.actions,
+                  item?.b24ui?.actions
+                ],
+                orientation: item.orientation
+              })"
+            >
+              <slot name="actions" :item="item" :index="index">
+                <B24Button
+                  v-for="(action, indexActions) in item.actions"
+                  :key="indexActions"
+                  size="xs"
+                  v-bind="action"
+                />
+              </slot>
+            </span>
+          </dd>
+        </slot>
       </template>
     </dl>
     <div

package/dist/runtime/components/DropdownMenu.vue

@@ -7,7 +7,14 @@ import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/dropdown-menu'
 import { tv } from '../utils/tv'
 import type { AvatarProps, KbdProps, LinkProps, IconComponent } from '../types'
-import type { DynamicSlots, PartialString, EmitsToProps } from '../types/utils'
+import type {
+  ArrayOrNested,
+  DynamicSlots,
+  MergeTypes,
+  NestedItem,
+  PartialString,
+  EmitsToProps
+} from '../types/utils'
 
 const appConfigDropdownMenu = _appConfig as AppConfig & { b24ui: { dropdownMenu: Partial<typeof theme> } }
 
@@ -37,17 +44,18 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
   checked?: boolean
   open?: boolean
   defaultOpen?: boolean
-  children?: DropdownMenuItem[] | DropdownMenuItem[][]
+  children?: ArrayOrNested<DropdownMenuItem>
   onSelect?(e: Event): void
   onUpdateChecked?(checked: boolean): void
+  [key: string]: any
 }
 
-export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'> {
+export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {
   /**
    * @defaultValue 'md'
    */
   size?: DropdownMenuVariants['size']
-  items?: T[] | T[][]
+  items?: T
   /**
    * The icon displayed when an item is checked.
    * @defaultValue icons.check
@@ -80,7 +88,7 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * The key used to get the label from the item.
    * @defaultValue 'label'
    */
-  labelKey?: string
+  labelKey?: keyof NestedItem<T>
   /**
    * @defaultValue false
    */
@@ -91,19 +99,22 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
 
 export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
 
-type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
+type SlotProps<T extends DropdownMenuItem> = (props: { item: T, active?: boolean, index: number }) => any
 
-export type DropdownMenuSlots<T extends { slot?: string }> = {
+export type DropdownMenuSlots<
+  A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>,
+  T extends NestedItem<A> = NestedItem<A>
+> = {
   'default'(props: { open: boolean }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
+} & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }>
 
 </script>
 
-<script setup lang="ts" generic="T extends DropdownMenuItem">
+<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
 import { computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'reka-ui'
@@ -123,7 +134,7 @@ const slots = defineSlots<DropdownMenuSlots<T>>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as DropdownMenuContentProps)
 const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
-const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuSlots<T>[string]>
+const proxySlots = omit(slots, ['default'])
 
 const b24ui = computed(() => dropdownMenu({
   size: props.size
@@ -143,12 +154,12 @@ const b24ui = computed(() => dropdownMenu({
       v-bind="contentProps"
       :items="items"
       :portal="portal"
-      :label-key="labelKey"
+      :label-key="(labelKey as keyof NestedItem<T>)"
       :checked-icon="checkedIcon"
       :external-icon="externalIcon"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+        <slot :name="(name as keyof DropdownMenuSlots<T>)" v-bind="slotData" />
       </template>
 
       <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />

package/dist/runtime/components/DropdownMenuContent.vue

@@ -4,14 +4,15 @@ import type { DropdownMenuContentProps as RekaDropdownMenuContentProps, Dropdown
 import theme from '#build/b24ui/dropdown-menu'
 import { tv } from '../utils/tv'
 import type { KbdProps, AvatarProps, DropdownMenuItem, DropdownMenuSlots, IconComponent } from '../types'
+import type { ArrayOrNested, NestedItem } from '../types/utils'
 
 const _dropdownMenu = tv(theme)()
 
-interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
-  items?: T[] | T[][]
+interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
+  items?: T
   portal?: boolean
   sub?: boolean
-  labelKey: string
+  labelKey: keyof NestedItem<T>
   /**
    * @IconComponent
    */
@@ -27,17 +28,17 @@ interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps,
 
 interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {}
 
-type DropdownMenuContentSlots<T extends { slot?: string }> = Omit<DropdownMenuSlots<T>, 'default'> & {
+type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
   default(props?: {}): any
 }
 </script>
 
-<script setup lang="ts" generic="T extends DropdownMenuItem">
+<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
 import { computed } from 'vue'
 import { DropdownMenu } from 'reka-ui/namespaced'
 import { useForwardPropsEmits } from 'reka-ui'
 import { reactiveOmit, createReusableTemplate } from '@vueuse/core'
-import { omit, get } from '../utils'
+import { omit, get, isArrayOfArray } from '../utils'
 import { pickLinkProps } from '../utils/link'
 import icons from '../dictionary/icons'
 import B24LinkBase from './LinkBase.vue'
@@ -52,17 +53,23 @@ const emits = defineEmits<DropdownMenuContentEmits>()
 const slots = defineSlots<DropdownMenuContentSlots<T>>()
 
 const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'externalIcon', 'class', 'b24ui', 'b24uiOverride'), emits)
-const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuContentSlots<T>[string]>
+const proxySlots = omit(slots, ['default'])
 
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()
 
-const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0]) ? props.items : [props.items]) as T[][] : [])
+const groups = computed<DropdownMenuItem[][]>(() =>
+  props.items?.length
+    ? isArrayOfArray(props.items)
+      ? props.items
+      : [props.items]
+    : []
+)
 </script>
 
 <template>
   <DefineItemTemplate v-slot="{ item, active, index }">
-    <slot :name="item.slot || 'item'" :item="(item as T)" :index="index">
-      <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="(item as T)" :active="active" :index="index">
+    <slot :name="((item.slot || 'item') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :index="index">
+      <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
         <Component
           :is="icons.loading"
           v-if="item.loading"
@@ -81,8 +88,8 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
         />
       </slot>
 
-      <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="b24ui.itemLabel({ class: b24uiOverride?.itemLabel, active })">
-        <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="(item as T)" :active="active" :index="index">
+      <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuContentSlots<T>]" :class="b24ui.itemLabel({ class: b24uiOverride?.itemLabel, active })">
+        <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
           {{ get(item, props.labelKey as string) }}
         </slot>
         <Component
@@ -93,7 +100,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
       </span>
 
       <span :class="b24ui.itemTrailing({ class: b24uiOverride?.itemTrailing })">
-        <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="(item as T)" :active="active" :index="index">
+        <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
           <Component
             :is="icons.chevronRight"
             v-if="item.children?.length"
@@ -139,7 +146,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               :b24ui="b24ui"
               :b24ui-override="b24uiOverride"
               :portal="portal"
-              :items="item.children"
+              :items="(item.children as T)"
               side="right"
               align="start"
               :align-offset="-4"
@@ -150,7 +157,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
-                <slot :name="name" v-bind="slotData" />
+                <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
               </template>
             </B24DropdownMenuContent>
           </DropdownMenu.Sub>