@bitrix24/b24ui-nuxt 0.2.4 → 0.2.6

package/dist/meta.d.ts

@@ -7431,6 +7431,34 @@ var B24UIMeta = {
             }
           }
         },
+        {
+          "name": "externalIcon",
+          "global": false,
+          "description": "The icon displayed when the item is an external link.\nSet to `false` to hide the external icon.",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "icons.external = `OpenIn50Icon`"
+            }
+          ],
+          "required": false,
+          "type": "boolean | IconComponent | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | IconComponent | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true",
+              "3": {
+                "kind": "event",
+                "type": "(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed | undefined) => void; }, \"expose\">): any",
+                "schema": []
+              }
+            }
+          },
+          "default": "true"
+        },
         {
           "name": "content",
           "global": false,
@@ -12668,6 +12696,28 @@ var B24UIMeta = {
             }
           }
         },
+        {
+          "name": "externalIcon",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "boolean | IconComponent | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | IconComponent | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true",
+              "3": {
+                "kind": "event",
+                "type": "(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed | undefined) => void; }, \"expose\">): any",
+                "schema": []
+              }
+            }
+          }
+        },
         {
           "name": "b24uiOverride",
           "global": false,
@@ -12733,15 +12783,15 @@ var B24UIMeta = {
             }
           ],
           "required": false,
-          "type": "\"start\" | \"end\" | \"center\" | undefined",
+          "type": "\"start\" | \"center\" | \"end\" | undefined",
           "schema": {
             "kind": "enum",
-            "type": "\"start\" | \"end\" | \"center\" | undefined",
+            "type": "\"start\" | \"center\" | \"end\" | undefined",
             "schema": {
               "0": "undefined",
               "1": "\"start\"",
-              "2": "\"end\"",
-              "3": "\"center\""
+              "2": "\"center\"",
+              "3": "\"end\""
             }
           }
         },
@@ -19553,22 +19603,6 @@ var B24UIMeta = {
             }
           }
         },
-        {
-          "name": "b24ui",
-          "global": false,
-          "description": "",
-          "tags": [],
-          "required": false,
-          "type": "Partial<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
-          "schema": {
-            "kind": "enum",
-            "type": "Partial<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
-            "schema": {
-              "0": "undefined",
-              "1": "Partial<{ root: string; base: string; increment: string; decrement: string; tag: string; }>"
-            }
-          }
-        },
         {
           "name": "orientation",
           "global": false,
@@ -21442,6 +21476,22 @@ var B24UIMeta = {
             }
           }
         },
+        {
+          "name": "b24ui",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "PartialString<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "PartialString<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "PartialString<{ root: string; base: string; increment: string; decrement: string; tag: string; }>"
+            }
+          }
+        },
         {
           "name": "disabled",
           "global": false,
@@ -29780,13 +29830,13 @@ var B24UIMeta = {
           "description": "",
           "tags": [],
           "required": false,
-          "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 18 more ...; input: string; }> | undefined",
+          "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 19 more ...; focusScope: string; }> | undefined",
           "schema": {
             "kind": "enum",
-            "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 18 more ...; input: string; }> | undefined",
+            "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 19 more ...; focusScope: string; }> | undefined",
             "schema": {
               "0": "undefined",
-              "1": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 18 more ...; input: string; }>"
+              "1": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 19 more ...; focusScope: string; }>"
             }
           }
         },
@@ -35911,13 +35961,13 @@ var B24UIMeta = {
           "description": "",
           "tags": [],
           "required": false,
-          "type": "Partial<{ root: string; base: string; tag: string; }> | undefined",
+          "type": "PartialString<{ root: string; base: string; tag: string; }> | undefined",
           "schema": {
             "kind": "enum",
-            "type": "Partial<{ root: string; base: string; tag: string; }> | undefined",
+            "type": "PartialString<{ root: string; base: string; tag: string; }> | undefined",
             "schema": {
               "0": "undefined",
-              "1": "Partial<{ root: string; base: string; tag: string; }>"
+              "1": "PartialString<{ root: string; base: string; tag: string; }>"
             }
           }
         }

package/dist/meta.mjs

@@ -7431,6 +7431,34 @@ const B24UIMeta = {
             }
           }
         },
+        {
+          "name": "externalIcon",
+          "global": false,
+          "description": "The icon displayed when the item is an external link.\nSet to `false` to hide the external icon.",
+          "tags": [
+            {
+              "name": "defaultValue",
+              "text": "icons.external = `OpenIn50Icon`"
+            }
+          ],
+          "required": false,
+          "type": "boolean | IconComponent | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | IconComponent | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true",
+              "3": {
+                "kind": "event",
+                "type": "(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed | undefined) => void; }, \"expose\">): any",
+                "schema": []
+              }
+            }
+          },
+          "default": "true"
+        },
         {
           "name": "content",
           "global": false,
@@ -12668,6 +12696,28 @@ const B24UIMeta = {
             }
           }
         },
+        {
+          "name": "externalIcon",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "boolean | IconComponent | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "boolean | IconComponent | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "false",
+              "2": "true",
+              "3": {
+                "kind": "event",
+                "type": "(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed | undefined) => void; }, \"expose\">): any",
+                "schema": []
+              }
+            }
+          }
+        },
         {
           "name": "b24uiOverride",
           "global": false,
@@ -12733,15 +12783,15 @@ const B24UIMeta = {
             }
           ],
           "required": false,
-          "type": "\"start\" | \"end\" | \"center\" | undefined",
+          "type": "\"start\" | \"center\" | \"end\" | undefined",
           "schema": {
             "kind": "enum",
-            "type": "\"start\" | \"end\" | \"center\" | undefined",
+            "type": "\"start\" | \"center\" | \"end\" | undefined",
             "schema": {
               "0": "undefined",
               "1": "\"start\"",
-              "2": "\"end\"",
-              "3": "\"center\""
+              "2": "\"center\"",
+              "3": "\"end\""
             }
           }
         },
@@ -19553,22 +19603,6 @@ const B24UIMeta = {
             }
           }
         },
-        {
-          "name": "b24ui",
-          "global": false,
-          "description": "",
-          "tags": [],
-          "required": false,
-          "type": "Partial<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
-          "schema": {
-            "kind": "enum",
-            "type": "Partial<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
-            "schema": {
-              "0": "undefined",
-              "1": "Partial<{ root: string; base: string; increment: string; decrement: string; tag: string; }>"
-            }
-          }
-        },
         {
           "name": "orientation",
           "global": false,
@@ -21442,6 +21476,22 @@ const B24UIMeta = {
             }
           }
         },
+        {
+          "name": "b24ui",
+          "global": false,
+          "description": "",
+          "tags": [],
+          "required": false,
+          "type": "PartialString<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
+          "schema": {
+            "kind": "enum",
+            "type": "PartialString<{ root: string; base: string; increment: string; decrement: string; tag: string; }> | undefined",
+            "schema": {
+              "0": "undefined",
+              "1": "PartialString<{ root: string; base: string; increment: string; decrement: string; tag: string; }>"
+            }
+          }
+        },
         {
           "name": "disabled",
           "global": false,
@@ -29780,13 +29830,13 @@ const B24UIMeta = {
           "description": "",
           "tags": [],
           "required": false,
-          "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 18 more ...; input: string; }> | undefined",
+          "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 19 more ...; focusScope: string; }> | undefined",
           "schema": {
             "kind": "enum",
-            "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 18 more ...; input: string; }> | undefined",
+            "type": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 19 more ...; focusScope: string; }> | undefined",
             "schema": {
               "0": "undefined",
-              "1": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 18 more ...; input: string; }>"
+              "1": "PartialString<{ root: string; base: string; leading: string; leadingIcon: string; leadingAvatar: string; leadingAvatarSize: string; trailing: string; trailingIcon: string; tag: string; value: string; placeholder: string; ... 19 more ...; focusScope: string; }>"
             }
           }
         },
@@ -35911,13 +35961,13 @@ const B24UIMeta = {
           "description": "",
           "tags": [],
           "required": false,
-          "type": "Partial<{ root: string; base: string; tag: string; }> | undefined",
+          "type": "PartialString<{ root: string; base: string; tag: string; }> | undefined",
           "schema": {
             "kind": "enum",
-            "type": "Partial<{ root: string; base: string; tag: string; }> | undefined",
+            "type": "PartialString<{ root: string; base: string; tag: string; }> | undefined",
             "schema": {
               "0": "undefined",
-              "1": "Partial<{ root: string; base: string; tag: string; }>"
+              "1": "PartialString<{ root: string; base: string; tag: string; }>"
             }
           }
         }

package/dist/module.cjs

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

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.13.1"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "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.V9TzyCqH.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CAS1q3My.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/DropdownMenu.vue

@@ -45,6 +45,12 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * @defaultValue icons.check = `CheckIcon`
    */
   checkedIcon?: IconComponent
+  /**
+   * The icon displayed when the item is an external link.
+   * Set to `false` to hide the external icon.
+   * @defaultValue icons.external = `OpenIn50Icon`
+   */
+  externalIcon?: boolean | IconComponent
   /**
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
@@ -94,6 +100,7 @@ import B24DropdownMenuContent from './DropdownMenuContent.vue'
 const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
   portal: true,
   modal: true,
+  externalIcon: true,
   labelKey: 'label'
 })
 const emits = defineEmits<DropdownMenuEmits>()
@@ -124,6 +131,7 @@ const b24ui = computed(() => dropdownMenu({
       :portal="portal"
       :label-key="labelKey"
       :checked-icon="checkedIcon"
+      :external-icon="externalIcon"
     >
       <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
         <slot :name="name" v-bind="slotData" />

package/dist/runtime/components/DropdownMenuContent.vue

@@ -13,6 +13,7 @@ interface DropdownMenuContentProps<T> extends Omit<RekaDropdownMenuContentProps,
   sub?: boolean
   labelKey: string
   checkedIcon?: IconComponent
+  externalIcon?: boolean | IconComponent
   class?: any
   b24ui: typeof _dropdownMenu
   b24uiOverride?: any
@@ -44,7 +45,7 @@ const props = defineProps<DropdownMenuContentProps<T>>()
 const emits = defineEmits<DropdownMenuContentEmits>()
 const slots = defineSlots<DropdownMenuContentSlots<T>>()
 
-const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'class', 'b24ui', 'b24uiOverride'), emits)
+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 [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()
@@ -79,8 +80,8 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
           {{ get(item, props.labelKey as string) }}
         </slot>
         <Component
-          :is="icons.external"
-          v-if="item.target === '_blank'"
+          :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
+          v-if="item.target === '_blank' && externalIcon !== false"
           :class="b24ui.itemLabelExternalIcon({ class: b24uiOverride?.itemLabelExternalIcon, color: item?.color, active })"
         />
       </span>
@@ -139,6 +140,7 @@ const groups = computed(() => props.items?.length ? (Array.isArray(props.items[0
               :side-offset="3"
               :label-key="labelKey"
               :checked-icon="checkedIcon"
+              :external-icon="externalIcon"
               v-bind="item.content"
             >
               <template v-for="(_, name) in proxySlots" #[name]="slotData: any">

package/dist/runtime/components/InputNumber.vue

@@ -6,6 +6,7 @@ import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/input-number'
 import { tv } from '../utils/tv'
 import type { ButtonProps, IconComponent } from '../types'
+import type { PartialString } from '../types/utils'
 
 const appConfigInputNumber = _appConfig as AppConfig & { b24ui: { inputNumber: Partial<typeof theme> } }
 
@@ -35,8 +36,6 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   tagColor?: InputNumberVariants['tagColor']
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
-  class?: any
-  b24ui?: Partial<typeof inputNumber.slots>
   /**
    * The orientation of the input menu.
    * @defaultValue 'horizontal'
@@ -69,6 +68,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * @defaultValue B24App.locale.code
    */
   locale?: string
+  class?: any
+  b24ui?: PartialString<typeof inputNumber.slots>
 }
 
 export interface InputNumberEmits {

package/dist/runtime/components/SelectMenu.vue

@@ -155,6 +155,7 @@ import {
   ComboboxSeparator,
   ComboboxItem,
   ComboboxItemIndicator,
+  FocusScope,
   useForwardPropsEmits,
   useFilter,
   Primitive
@@ -286,7 +287,7 @@ function onUpdate(value: any) {
 }
 
 function onUpdateOpen(value: boolean) {
-  let timeoutId
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
 
   if (!value) {
     const event = new FocusEvent('blur')
@@ -307,7 +308,9 @@ function onUpdateOpen(value: boolean) {
     const event = new FocusEvent('focus')
     emits('focus', event)
     emitFormFocus()
-    clearTimeout(timeoutId)
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
   }
 }
 </script>
@@ -387,76 +390,77 @@ function onUpdateOpen(value: boolean) {
 
       <ComboboxPortal :disabled="!portal">
         <ComboboxContent :class="b24ui.content({ class: props.b24ui?.content })" v-bind="contentProps">
-          <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
-            <B24Input no-border autofocus autocomplete="off" v-bind="searchInputProps" :class="b24ui.input({ class: props.b24ui?.input })" />
-          </ComboboxInput>
-
-          <ComboboxEmpty :class="b24ui.empty({ class: props.b24ui?.empty })">
-            <slot name="empty" :search-term="searchTerm">
-              {{ searchTerm ? t('selectMenu.noMatch', { searchTerm }) : t('selectMenu.noData') }}
-            </slot>
-          </ComboboxEmpty>
-
-          <ComboboxViewport :class="b24ui.viewport({ class: props.b24ui?.viewport })">
-            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
-
-            <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: props.b24ui?.group })">
-              <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-                <ComboboxLabel v-if="item?.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
-                  {{ get(item, props.labelKey as string) }}
-                </ComboboxLabel>
-
-                <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="b24ui.separator({ class: props.b24ui?.separator })" />
-
-                <ComboboxItem
-                  v-else
-                  :class="b24ui.item({ class: props.b24ui?.item })"
-                  :disabled="item.disabled"
-                  :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
-                  @select="item.onSelect"
-                >
-                  <slot name="item" :item="(item as T)" :index="index">
-                    <slot name="item-leading" :item="(item as T)" :index="index">
-                      <Component
-                        :is="item.icon"
-                        v-if="item.icon"
-                        :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
-                      />
-                      <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
-                      <B24Chip
-                        v-else-if="item.chip"
-                        :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
-                        inset
-                        standalone
-                        v-bind="item.chip"
-                        :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
-                      />
-                    </slot>
-
-                    <span :class="b24ui.itemLabel({ class: props.b24ui?.itemLabel })">
-                      <slot name="item-label" :item="(item as T)" :index="index">
-                        {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
-                      </slot>
-                    </span>
-
-                    <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
-                      <slot name="item-trailing" :item="(item as T)" :index="index" />
-
-                      <ComboboxItemIndicator as-child>
+          <FocusScope trapped :class="b24ui.focusScope({ class: props.b24ui?.focusScope })">
+            <ComboboxInput v-if="!!searchInput" v-model="searchTerm" :display-value="() => searchTerm" as-child>
+              <B24Input no-border autofocus autocomplete="off" v-bind="searchInputProps" :class="b24ui.input({ class: props.b24ui?.input })" />
+            </ComboboxInput>
+
+            <ComboboxEmpty :class="b24ui.empty({ class: props.b24ui?.empty })">
+              <slot name="empty" :search-term="searchTerm">
+                {{ searchTerm ? t('selectMenu.noMatch', { searchTerm }) : t('selectMenu.noData') }}
+              </slot>
+            </ComboboxEmpty>
+
+            <ComboboxViewport :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'top'" />
+
+              <ComboboxGroup v-for="(group, groupIndex) in filteredGroups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: props.b24ui?.group })">
+                <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+                  <ComboboxLabel v-if="item?.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
+                    {{ get(item, props.labelKey as string) }}
+                  </ComboboxLabel>
+
+                  <ComboboxSeparator v-else-if="item?.type === 'separator'" :class="b24ui.separator({ class: props.b24ui?.separator })" />
+
+                  <ComboboxItem
+                    v-else
+                    :class="b24ui.item({ class: props.b24ui?.item })"
+                    :disabled="item.disabled"
+                    :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
+                    @select="item.onSelect"
+                  >
+                    <slot name="item" :item="(item as T)" :index="index">
+                      <slot name="item-leading" :item="(item as T)" :index="index">
                         <Component
-                          :is="selectedIcon || icons.check"
-                          :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                          :is="item.icon"
+                          v-if="item.icon"
+                          :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                        />
+                        <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                        <B24Chip
+                          v-else-if="item.chip"
+                          :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
+                          inset
+                          standalone
+                          v-bind="item.chip"
+                          :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
                         />
-                      </ComboboxItemIndicator>
-                    </span>
-                  </slot>
-                </ComboboxItem>
-              </template>
-            </ComboboxGroup>
+                      </slot>
 
-            <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
-          </ComboboxViewport>
+                      <span :class="b24ui.itemLabel({ class: props.b24ui?.itemLabel })">
+                        <slot name="item-label" :item="(item as T)" :index="index">
+                          {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
+                        </slot>
+                      </span>
+
+                      <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                        <slot name="item-trailing" :item="(item as T)" :index="index" />
+
+                        <ComboboxItemIndicator as-child>
+                          <Component
+                            :is="selectedIcon || icons.check"
+                            :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                          />
+                        </ComboboxItemIndicator>
+                      </span>
+                    </slot>
+                  </ComboboxItem>
+                </template>
+              </ComboboxGroup>
 
+              <ReuseCreateItemTemplate v-if="createItem && createItemPosition === 'bottom'" />
+            </ComboboxViewport>
+          </FocusScope>
           <ComboboxArrow v-if="!!arrow" v-bind="arrowProps" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
         </ComboboxContent>
       </ComboboxPortal>

package/dist/runtime/components/Textarea.vue

@@ -4,6 +4,7 @@ import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/textarea'
 import { tv } from '../utils/tv'
+import type { PartialString } from '../types/utils'
 
 const appConfigTextarea = _appConfig as AppConfig & { b24ui: { textarea: Partial<typeof theme> } }
 
@@ -42,7 +43,7 @@ export interface TextareaProps {
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
   class?: any
-  b24ui?: Partial<typeof textarea.slots>
+  b24ui?: PartialString<typeof textarea.slots>
 }
 
 export interface TextareaEmits {