@bitrix24/b24ui-nuxt 0.4.11 → 0.5.1

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.CltBJi1M.cjs');
+const templates = require('./shared/b24ui-nuxt.ClMXHpMM.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.4.11",
+  "version": "0.5.1",
   "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.CJqO7fYv.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.CBnBA3PE.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/DropdownMenu.vue

@@ -1,13 +1,13 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuArrowProps } from 'reka-ui'
+import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 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 } from '../types/utils'
+import type { DynamicSlots, PartialString, EmitsToProps } from '../types/utils'
 
 const appConfigDropdownMenu = _appConfig as AppConfig & { b24ui: { dropdownMenu: Partial<typeof theme> } }
 
@@ -24,7 +24,7 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
   icon?: IconComponent
   color?: DropdownMenuVariants['color']
   avatar?: AvatarProps
-  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
   kbds?: KbdProps['value'][] | KbdProps[]
   /**
    * The item type.
@@ -65,7 +65,7 @@ export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
    */
-  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false
@@ -147,7 +147,7 @@ const b24ui = computed(() => dropdownMenu({
       :checked-icon="checkedIcon"
       :external-icon="externalIcon"
     >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData: any">
+      <template v-for="(_, name) in proxySlots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
 

package/dist/runtime/components/Form.vue

@@ -12,14 +12,34 @@ const form = tv({ extend: tv(theme), ...(appConfigForm.b24ui?.form || {}) })
 
 export interface FormProps<T extends object> {
   id?: string | number
+  /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
   schema?: FormSchema<T>
+  /** An object representing the current state of the form. */
   state: Partial<T>
+  /**
+   * Custom validation function to validate the form state.
+   * @param state - The current state of the form.
+   * @returns A promise that resolves to an array of FormError objects, or an array of FormError objects directly.
+   */
   validate?: (state: Partial<T>) => Promise<FormError[]> | FormError[]
+  /**
+   * The list of input events that trigger the form validation.
+   * @defaultValue `['blur', 'change', 'input']`
+   */
   validateOn?: FormInputEvents[]
+  /** Disable all inputs inside the form. */
   disabled?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @defaultValue `300`
+   */
   validateOnInputDelay?: number
-  class?: any
+  /**
+   * If true, schema transformations will be applied to the state on submit.
+   * @defaultValue `true`
+   */
   transform?: boolean
+  class?: any
   onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
 }
 

package/dist/runtime/components/FormField.vue

@@ -34,7 +34,12 @@ export interface FormFieldProps {
    * @defaultValue false
    */
   required?: boolean
+  /** If true, validation on input will be active immediately instead of waiting for a blur event. */
   eagerValidation?: boolean
+  /**
+   * Delay in milliseconds before validating the form on input events.
+   * @defaultValue `300`
+   */
   validateOnInputDelay?: number
   class?: any
   b24ui?: Partial<typeof formField.slots>

package/dist/runtime/components/InputMenu.vue

@@ -1,14 +1,14 @@
 <script lang="ts">
 import type { InputHTMLAttributes } from 'vue'
 import type { VariantProps } from 'tailwind-variants'
-import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/input-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps, IconComponent } from '../types'
-import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
+import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey, EmitsToProps } from '../types/utils'
 
 const appConfigInputMenu = _appConfig as AppConfig & { b24ui: { inputMenu: Partial<typeof theme> } }
 
@@ -113,7 +113,7 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
    */
-  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ComboboxContentEmits>>
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false

package/dist/runtime/components/Modal.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
-import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/modal'
 import { tv } from '../utils/tv'
 import type { ButtonProps, IconComponent } from '../types'
+import type { EmitsToProps } from '../types/utils'
 
 const appConfigModal = _appConfig as AppConfig & { b24ui: { modal: Partial<typeof theme> } }
 
@@ -19,7 +20,7 @@ export interface ModalProps extends DialogRootProps {
   /**
    * The content of the modal
    */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
   /**
    * Render an overlay behind the modal.
    * @defaultValue true
@@ -113,18 +114,20 @@ const { t } = useLocale()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
+  const events = {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
+
   if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),
       escapeKeyDown: (e: Event) => e.preventDefault(),
-      closeAutoFocus: (e: Event) => e.preventDefault()
+      ...events
     }
   }
 
-  return {
-    closeAutoFocus: (e: Event) => e.preventDefault()
-  }
+  return events
 })
 
 const b24ui = computed(() => modal({
@@ -175,7 +178,7 @@ const b24ui = computed(() => modal({
                 </DialogDescription>
               </div>
 
-              <DialogClose as-child>
+              <DialogClose v-if="close || !!slots.close" as-child>
                 <slot name="close" :b24ui="b24ui">
                   <B24Button
                     v-if="close"

package/dist/runtime/components/NavigationMenu.vue

@@ -1,13 +1,13 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, CollapsibleRootProps } from 'reka-ui'
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/navigation-menu'
 import { tv } from '../utils/tv'
 import type { AvatarProps, BadgeProps, LinkProps, IconComponent } from '../types'
-import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString } from '../types/utils'
+import type { DynamicSlots, MaybeArrayOfArray, MaybeArrayOfArrayItem, PartialString, EmitsToProps } from '../types/utils'
 
 const appConfigNavigationMenu = _appConfig as AppConfig & { b24ui: { navigationMenu: Partial<typeof theme> } }
 
@@ -93,8 +93,10 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
    * @defaultValue 'primary'
    */
   highlightColor?: NavigationMenuVariants['highlightColor']
-  /** The content of the menu. */
-  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * The content of the menu.
+   */
+  content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>
   /**
    * The orientation of the content.
    * Only works when `orientation` is `horizontal`.
@@ -193,42 +195,33 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
 <template>
   <DefineLinkTemplate 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">
-        <Component
-          :is="item.icon"
-          v-if="item.icon"
-          :class="b24ui.linkLeadingIcon({ class: props.b24ui?.linkLeadingIcon, active, disabled: !!item.disabled })"
-        />
-        <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
-      </slot>
-
-      <span
-        v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
-        :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel })"
-      >
-        <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
-          {{ get(item, props.labelKey as string) }}
+      <span :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
+        <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="(item as T)" :active="active" :index="index">
+          <Component
+            :is="item.icon"
+            v-if="item.icon"
+            :class="b24ui.linkLeadingIcon({ class: props.b24ui?.linkLeadingIcon, active, disabled: !!item.disabled })"
+          />
+          <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
         </slot>
 
-        <Component
-          :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
-          v-if="item.target === '_blank' && externalIcon !== false"
-          :class="b24ui.linkLabelExternalIcon({ class: props.b24ui?.linkLabelExternalIcon, active })"
-        />
-      </span>
+        <span
+          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+          :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel, active })"
+        >
+          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="(item as T)" :active="active" :index="index">
+            {{ get(item, props.labelKey as string) }}
+          </slot>
 
+          <Component
+            :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
+            v-if="item.target === '_blank' && externalIcon !== false"
+            :class="b24ui.linkLabelExternalIcon({ class: props.b24ui?.linkLabelExternalIcon, active })"
+          />
+        </span>
+      </span>
       <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="(item as T)" :active="active" :index="index">
-          <B24Badge
-            v-if="item.badge"
-            color="default"
-            depth="normal"
-            :use-fill="false"
-            :size="((props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
-            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
-            :class="b24ui.linkTrailingBadge({ class: props.b24ui?.linkTrailingBadge })"
-          />
-
           <Component
             :is="item.trailingIcon || trailingIcon || icons.chevronDown"
             v-if="(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])) || (orientation === 'vertical' && item.children?.length)"
@@ -239,6 +232,16 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
             v-else-if="item.trailingIcon"
             :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
           />
+
+          <B24Badge
+            v-if="item.badge"
+            color="danger"
+            depth="dark"
+            :use-fill="true"
+            :size="((props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
+            v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
+            :class="b24ui.linkTrailingBadge({ class: props.b24ui?.linkTrailingBadge })"
+          />
         </slot>
       </span>
     </slot>
@@ -320,7 +323,12 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <NavigationMenuRoot
+    v-bind="rootProps"
+    :data-collapsed="collapsed"
+    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    data-slot="section"
+  >
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="b24ui.list({ class: props.b24ui?.list })">
         <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="b24ui.item({ class: props.b24ui?.item })" />

package/dist/runtime/components/Popover.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
-import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverArrowProps } from 'reka-ui'
+import type { PopoverRootProps, HoverCardRootProps, PopoverRootEmits, PopoverContentProps, PopoverContentEmits, PopoverArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/popover'
 import { tv } from '../utils/tv'
+import type { EmitsToProps } from '../types/utils'
 
 const appConfigPopover = _appConfig as AppConfig & { b24ui: { popover: Partial<typeof theme> } }
 
@@ -19,7 +20,7 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
    * The content of the popover.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
    */
-  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<PopoverContentEmits>>
   /**
    * Display an arrow alongside the popover.
    * @defaultValue false

package/dist/runtime/components/RadioGroup.vue

@@ -161,8 +161,8 @@ function onUpdate(value: any) {
           <RadioGroupItem
             :id="item.id"
             :value="item.value"
-            :disabled="disabled"
-            :class="b24ui.base({ class: props.b24ui?.base })"
+            :disabled="item.disabled"
+            :class="b24ui.base({ class: props.b24ui?.base, disabled: item.disabled })"
           >
             <RadioGroupIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
           </RadioGroupItem>

package/dist/runtime/components/Select.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectArrowProps, AcceptableValue } from 'reka-ui'
+import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectContentEmits, SelectArrowProps, AcceptableValue } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/select'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps, IconComponent } from '../types'
-import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
+import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey, EmitsToProps } from '../types/utils'
 
 const appConfigSelect = _appConfig as AppConfig & { b24ui: { select: Partial<typeof theme> } }
 
@@ -87,7 +87,7 @@ export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends Maybe
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
    */
-  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<SelectContentEmits>>
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false

package/dist/runtime/components/SelectMenu.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxContentEmits, ComboboxArrowProps, AcceptableValue } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/select-menu'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import { tv } from '../utils/tv'
 import type { AvatarProps, ChipProps, InputProps, IconComponent } from '../types'
-import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey } from '../types/utils'
+import type { PartialString, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectModelValueEmits, SelectItemKey, EmitsToProps } from '../types/utils'
 
 const appConfigSelectMenu = _appConfig as AppConfig & { b24ui: { selectMenu: Partial<typeof theme> } }
 
@@ -98,7 +98,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
    * The content of the menu.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
    */
-  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<ComboboxContentEmits>>
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false

package/dist/runtime/components/Slideover.vue

@@ -1,11 +1,12 @@
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'reka-ui'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps, DialogContentEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/slideover'
 import { tv } from '../utils/tv'
 import type { ButtonProps, IconComponent } from '../types'
+import type { EmitsToProps } from '../types/utils'
 
 const appConfigSlideover = _appConfig as AppConfig & { b24ui: { slideover: Partial<typeof theme> } }
 
@@ -19,7 +20,7 @@ export interface SlideoverProps extends DialogRootProps {
   /**
    * The content of the slideover
    */
-  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
   /**
    * Render an overlay behind the slideover.
    * @defaultValue true
@@ -115,18 +116,20 @@ const { t } = useLocale()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
+  const events = {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
+
   if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),
       escapeKeyDown: (e: Event) => e.preventDefault(),
-      closeAutoFocus: (e: Event) => e.preventDefault()
+      ...events
     }
   }
 
-  return {
-    closeAutoFocus: (e: Event) => e.preventDefault()
-  }
+  return events
 })
 
 const b24ui = computed(() => slideover({
@@ -177,7 +180,7 @@ const b24ui = computed(() => slideover({
                 </DialogDescription>
               </div>
 
-              <DialogClose as-child>
+              <DialogClose v-if="close || !!slots.close" as-child>
                 <slot name="close" :b24ui="b24ui">
                   <B24Button
                     v-if="close"

package/dist/runtime/components/Toast.vue

@@ -170,7 +170,7 @@ defineExpose({
         </slot>
       </template>
 
-      <ToastClose as-child>
+      <ToastClose v-if="close || !!slots.close" as-child>
         <slot name="close" :b24ui="b24ui">
           <B24Button
             v-if="close"

package/dist/runtime/components/Tooltip.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
-import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'reka-ui'
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/tooltip'
 import { tv } from '../utils/tv'
 import type { KbdProps } from '../types'
+import type { EmitsToProps } from '../types/utils'
 
 const appConfigTooltip = _appConfig as AppConfig & { b24ui: { tooltip: Partial<typeof theme> } }
 
@@ -19,7 +20,7 @@ export interface TooltipProps extends TooltipRootProps {
    * The content of the tooltip.
    * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
    */
-  content?: Omit<TooltipContentProps, 'as' | 'asChild'>
+  content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>
   /**
    * Display an arrow alongside the tooltip.
    * @defaultValue false

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -22,6 +22,6 @@ export interface UseComponentIconsProps {
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
-    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
 };

package/dist/runtime/index.css

@@ -1 +1 @@
-@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{--b24ui-header-height:calc(var(--spacing)*16);body{@apply antialiased scheme-light dark:scheme-dark}}@layer theme{:host,:root{--spacing:.25rem}}.scrollbar-thin{scrollbar-width:thin}.scrollbar-transparent{scrollbar-color:hsla(0,0%,100%,.21) transparent}.scrollbar-transparent:hover{scrollbar-color:rgba(82,92,105,.36) transparent}.dark .scrollbar-transparent{scrollbar-color:rgba(0,0,0,.21) transparent}.dark .scrollbar-transparent:hover{scrollbar-color:#515a67 transparent}
+@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{--b24ui-header-height:calc(var(--spacing)*16);body{@apply antialiased scheme-light dark:scheme-dark}}@layer theme{:host,:root{--spacing:.25rem}}.scrollbar-thin{scrollbar-width:thin}.scrollbar-transparent{scrollbar-color:transparent transparent;scrollbar-gutter:stable}.scrollbar-transparent:hover{scrollbar-color:rgba(82,92,105,.36) transparent}.dark .scrollbar-transparent{scrollbar-color:rgba(0,0,0,.21) transparent}.dark .scrollbar-transparent:hover{scrollbar-color:#515a67 transparent}

package/dist/runtime/plugins/colors.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @see src/templates.ts -> getTemplates
+ */
 declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/types/form.d.ts

@@ -1,9 +1,7 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec';
 import type { ComputedRef, DeepReadonly, Ref } from 'vue';
-import type { ZodSchema } from 'zod';
 import type { Schema as JoiSchema } from 'joi';
 import type { ObjectSchema as YupObjectSchema } from 'yup';
-import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
 import type { GetObjectField } from './utils';
 import type { Struct as SuperstructSchema } from 'superstruct';
 export interface Form<T extends object> {
@@ -24,7 +22,7 @@ export interface Form<T extends object> {
     touchedFields: DeepReadonly<Set<keyof T>>;
     blurredFields: DeepReadonly<Set<keyof T>>;
 }
-export type FormSchema<T extends object> = ZodSchema | YupObjectSchema<T> | ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any> | JoiSchema<T> | SuperstructSchema<any, any> | StandardSchemaV1;
+export type FormSchema<T extends object> = YupObjectSchema<T> | JoiSchema<T> | SuperstructSchema<any, any> | StandardSchemaV1;
 export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
 export interface FormError<P extends string = string> {
     name?: P;

package/dist/runtime/utils/form.d.ts

@@ -1,17 +1,13 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec';
-import type { ZodSchema } from 'zod';
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi';
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup';
-import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
 import type { Struct } from 'superstruct';
 import type { FormSchema, ValidateReturnSchema } from '../types/form';
 export declare function isYupSchema(schema: any): schema is YupObjectSchema<any>;
 export declare function isYupError(error: any): error is YupError;
 export declare function isSuperStructSchema(schema: any): schema is Struct<any, any>;
-export declare function isZodSchema(schema: any): schema is ZodSchema;
 export declare function isJoiSchema(schema: any): schema is JoiSchema;
 export declare function isJoiError(error: any): error is JoiError;
-export declare function isValibotSchema(schema: any): schema is ValibotSchema | ValibotSchemaAsync | ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>;
 export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
 export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
 export declare function validateSchema<T extends object>(state: T, schema: FormSchema<T>): Promise<ValidateReturnSchema<typeof state>>;