@bitrix24/b24ui-nuxt 0.2.8 → 0.3.0

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.DBz6Z5xw.cjs');
+const templates = require('./shared/b24ui-nuxt.BDw9-NAb.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.8",
+  "version": "0.3.0",
   "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.BJy-SIWG.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.aLj37Bax.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Alert.vue

@@ -38,7 +38,7 @@ export interface AlertProps {
    * @emits 'update:open'
    * @defaultValue false
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
@@ -129,7 +129,7 @@ const b24ui = computed(() => alert({
           size="xs"
           color="link"
           :aria-label="t('alert.close')"
-          v-bind="typeof close === 'object' ? close : undefined"
+          v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
           :class="b24ui.close({ class: props.b24ui?.close })"
           @click="emits('update:open', false)"
         />

package/dist/runtime/components/Avatar.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { AvatarFallbackProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/avatar'
@@ -13,7 +12,7 @@ const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.b24ui?.avatar || {})
 
 type AvatarVariants = VariantProps<typeof avatar>
 
-export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+export interface AvatarProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'span'
@@ -34,18 +33,14 @@ export interface AvatarSlots {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, useAttrs, onMounted } from 'vue'
-import { AvatarRoot, AvatarFallback, useForwardProps } from 'reka-ui'
-import { reactivePick, useImage } from '@vueuse/core'
+import { ref, computed, watch } from 'vue'
+import { Primitive } from 'reka-ui'
 import ImageComponent from '#build/b24ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
-const attrs = useAttrs() as any
-
-const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
 const fallback = computed(() => props.text || (props.alt || '')
   .replace(/[+\-*)(}\][{]/g, '')
@@ -55,8 +50,6 @@ const fallback = computed(() => props.text || (props.alt || '')
   .substring(0, 2)
 )
 
-const imageLoaded = ref(false)
-
 const { size } = useAvatarGroup(props)
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -76,43 +69,37 @@ const sizePx = computed(() => ({
   '3xl': 94
 })[props.size || 'md'])
 
-// Reproduces Reka UI's [AvatarImage](https://reka-ui.com/docs/components/avatar#image) component behavior which cannot be used with NuxtImg component
-onMounted(() => {
-  if (!props.src || (ImageComponent as unknown as string) !== 'img') {
-    return
-  }
-
-  const { then } = useImage({ ...props, ...attrs, src: props.src! })
+const error = ref(false)
 
-  then((img) => {
-    if (img.isReady.value) {
-      imageLoaded.value = true
-    }
-  })
+watch(() => props.src, () => {
+  if (error.value) {
+    error.value = false
+  }
 })
+
+function onError() {
+  error.value = true
+}
 </script>
 
 <template>
-  <AvatarRoot :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
     <component
       :is="ImageComponent"
-      v-if="src"
-      v-show="imageLoaded"
+      v-if="src && !error"
       role="img"
       :src="src"
       :alt="alt"
       :width="sizePx"
       :height="sizePx"
-      v-bind="attrs"
+      v-bind="$attrs"
       :class="b24ui.image({ class: props.b24ui?.image })"
-      @load="imageLoaded = true"
+      @error="onError"
     />
 
-    <AvatarFallback v-if="!imageLoaded" as-child v-bind="{ ...fallbackProps, ...$attrs }">
-      <slot>
-        <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
-      </slot>
-    </AvatarFallback>
-  </AvatarRoot>
+    <slot v-else>
+      <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+      <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+    </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Checkbox.vue

@@ -44,6 +44,8 @@ import { useFormField } from '../composables/useFormField'
 import Minus20Icon from '@bitrix24/b24icons-vue/actions/Minus20Icon'
 import CheckIcon from '@bitrix24/b24icons-vue/main/CheckIcon'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
 const emits = defineEmits<CheckboxEmits>()
@@ -78,7 +80,7 @@ function onUpdate(value: any) {
     <div :class="b24ui.container({ class: props.b24ui?.container })">
       <CheckboxRoot
         :id="id"
-        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"

package/dist/runtime/components/Form.vue

@@ -19,6 +19,7 @@ export interface FormProps<T extends object> {
   disabled?: boolean
   validateOnInputDelay?: number
   class?: any
+  transform?: boolean
   onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
 }
 
@@ -43,7 +44,8 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
   validateOn() {
     return ['input', 'blur', 'change'] as FormInputEvents[]
   },
-  validateOnInputDelay: 300
+  validateOnInputDelay: 300,
+  transform: true
 })
 const emits = defineEmits<FormEmits<T>>()
 defineSlots<FormSlots>()
@@ -192,7 +194,7 @@ async function onSubmitWrapper(payload: Event) {
   const event = payload as FormSubmitEvent<any>
 
   try {
-    event.data = await _validate({ nested: true, transform: true })
+    event.data = await _validate({ nested: true, transform: props.transform })
     await props.onSubmit?.(event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
@@ -205,9 +207,9 @@ async function onSubmitWrapper(payload: Event) {
       children: error.children
     }
     emits('error', errorEvent)
+  } finally {
+    loading.value = false
   }
-
-  loading.value = false
 }
 
 const disabled = computed(() => props.disabled || loading.value)

package/dist/runtime/components/InputMenu.vue

@@ -14,10 +14,13 @@ const appConfigInputMenu = _appConfig as AppConfig & { b24ui: { inputMenu: Parti
 
 const inputMenu = tv({ extend: tv(theme), ...(appConfigInputMenu.b24ui?.inputMenu || {}) })
 
+type InputMenuVariants = VariantProps<typeof inputMenu>
+
 export interface InputMenuItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: InputMenuVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -28,8 +31,6 @@ export interface InputMenuItem {
   onSelect?(e?: Event): void
 }
 
-type InputMenuVariants = VariantProps<typeof inputMenu>
-
 export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
@@ -453,7 +454,7 @@ defineExpose({
 
               <ComboboxItem
                 v-else
-                :class="b24ui.item({ class: props.b24ui?.item })"
+                :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                 :disabled="item.disabled"
                 :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 @select="item.onSelect"
@@ -463,16 +464,16 @@ defineExpose({
                     <Component
                       :is="item.icon"
                       v-if="item.icon"
-                      :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                      :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                     />
-                    <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 })" />
+                    <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, colorItem: item?.color })" />
                     <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 })"
+                      :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                     />
                   </slot>
 
@@ -482,13 +483,13 @@ defineExpose({
                     </slot>
                   </span>
 
-                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                     <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 })"
+                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                       />
                     </ComboboxItemIndicator>
                   </span>

package/dist/runtime/components/Modal.vue

@@ -40,7 +40,7 @@ export interface ModalProps extends DialogRootProps {
    * `{ size: 'xs', color: 'link' }`{lang="ts-type"}
    * @defaultValue true
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
@@ -97,11 +97,14 @@ const contentEvents = computed(() => {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),
-      escapeKeyDown: (e: Event) => e.preventDefault()
+      escapeKeyDown: (e: Event) => e.preventDefault(),
+      closeAutoFocus: (e: Event) => e.preventDefault()
     }
   }
 
-  return {}
+  return {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
 })
 
 const b24ui = computed(() => modal({
@@ -137,17 +140,19 @@ const b24ui = computed(() => modal({
         <slot name="content">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
             <slot name="header">
-              <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
-                <slot name="title">
-                  {{ title }}
-                </slot>
-              </DialogTitle>
-
-              <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
-                <slot name="description">
-                  {{ description }}
-                </slot>
-              </DialogDescription>
+              <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
 
               <DialogClose as-child>
                 <slot name="close" :b24ui="b24ui">
@@ -157,7 +162,7 @@ const b24ui = computed(() => modal({
                     size="xs"
                     color="link"
                     :aria-label="t('modal.close')"
-                    v-bind="typeof close === 'object' ? close : undefined"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
                     :class="b24ui.close({ class: props.b24ui?.close })"
                   />
                 </slot>

package/dist/runtime/components/Select.vue

@@ -13,10 +13,13 @@ const appConfigSelect = _appConfig as AppConfig & { b24ui: { select: Partial<typ
 
 const select = tv({ extend: tv(theme), ...(appConfigSelect.b24ui?.select || {}) })
 
+type SelectVariants = VariantProps<typeof select>
+
 export interface SelectItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: SelectVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -27,8 +30,6 @@ export interface SelectItem {
   disabled?: boolean
 }
 
-type SelectVariants = VariantProps<typeof select>
-
 export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps {
   id?: string
   /** The placeholder text when the select is empty. */
@@ -125,6 +126,8 @@ import icons from '../dictionary/icons'
 import B24Avatar from './Avatar.vue'
 import B24Chip from './Chip.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {
   valueKey: 'value' as never,
   labelKey: 'label' as never,
@@ -214,7 +217,7 @@ function onUpdateOpen(value: boolean) {
       @update:model-value="onUpdate"
       @update:open="onUpdateOpen"
     >
-      <SelectTrigger :id="id" :class="b24ui.base({ class: [props.class, props.b24ui?.base] })" v-bind="ariaAttrs">
+      <SelectTrigger :id="id" :class="b24ui.base({ class: [props.class, props.b24ui?.base] })" v-bind="{ ...$attrs, ...ariaAttrs }">
         <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
           {{ props.tag }}
         </div>
@@ -271,7 +274,7 @@ function onUpdateOpen(value: boolean) {
 
                 <SelectItem
                   v-else
-                  :class="b24ui.item({ class: props.b24ui?.item })"
+                  :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                   :disabled="item.disabled"
                   :value="typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 >
@@ -280,16 +283,16 @@ function onUpdateOpen(value: boolean) {
                       <Component
                         :is="item.icon"
                         v-if="item.icon"
-                        :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                        :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                       />
-                      <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 })" />
+                      <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, colorItem: item?.color })" />
                       <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 })"
+                        :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                       />
                     </slot>
 
@@ -299,13 +302,13 @@ function onUpdateOpen(value: boolean) {
                       </slot>
                     </SelectItemText>
 
-                    <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                    <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                       <slot name="item-trailing" :item="(item as T)" :index="index" />
 
                       <SelectItemIndicator as-child>
                         <Component
                           :is="selectedIcon || icons.check"
-                          :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                          :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                         />
                       </SelectItemIndicator>
                     </span>

package/dist/runtime/components/SelectMenu.vue

@@ -13,10 +13,13 @@ const appConfigSelectMenu = _appConfig as AppConfig & { b24ui: { selectMenu: Par
 
 const selectMenu = tv({ extend: tv(theme), ...(appConfigSelectMenu.b24ui?.selectMenu || {}) })
 
+type SelectMenuVariants = VariantProps<typeof selectMenu>
+
 export interface SelectMenuItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: SelectMenuVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -27,8 +30,6 @@ export interface SelectMenuItem {
   onSelect?(e?: Event): void
 }
 
-type SelectMenuVariants = VariantProps<typeof selectMenu>
-
 export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
   id?: string
   /** The placeholder text when the select is empty. */
@@ -172,6 +173,8 @@ import B24Avatar from './Avatar.vue'
 import B24Chip from './Chip.vue'
 import B24Input from './Input.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
   portal: true,
   searchInput: true,
@@ -341,7 +344,7 @@ function onUpdateOpen(value: boolean) {
     <ComboboxRoot
       :id="id"
       v-slot="{ modelValue, open }"
-      v-bind="{ ...rootProps, ...ariaAttrs }"
+      v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
       ignore-filter
       as-child
       :name="name"
@@ -414,7 +417,7 @@ function onUpdateOpen(value: boolean) {
 
                   <ComboboxItem
                     v-else
-                    :class="b24ui.item({ class: props.b24ui?.item })"
+                    :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                     :disabled="item.disabled"
                     :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                     @select="item.onSelect"
@@ -424,16 +427,16 @@ function onUpdateOpen(value: boolean) {
                         <Component
                           :is="item.icon"
                           v-if="item.icon"
-                          :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                          :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                         />
-                        <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 })" />
+                        <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, colorItem: item?.color })" />
                         <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 })"
+                          :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                         />
                       </slot>
 
@@ -443,13 +446,13 @@ function onUpdateOpen(value: boolean) {
                         </slot>
                       </span>
 
-                      <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                      <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                         <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 })"
+                            :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                           />
                         </ComboboxItemIndicator>
                       </span>

package/dist/runtime/components/Switch.vue

@@ -54,8 +54,11 @@ import { computed, useId } from 'vue'
 import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useFormField } from '../composables/useFormField'
+import { omit } from '../utils'
 import icons from '../dictionary/icons'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
 const emits = defineEmits<SwitchEmits>()
@@ -89,7 +92,7 @@ function onUpdate(value: any) {
     <div :class="b24ui.container({ class: props.b24ui?.container })">
       <SwitchRoot
         :id="id"
-        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...omit({ ...$attrs }, ['data-state']), ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"

package/dist/runtime/components/Toast.vue

@@ -38,7 +38,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
    * @defaultValue true
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
@@ -167,7 +167,7 @@ defineExpose({
             size="xs"
             color="link"
             :aria-label="t('toast.close')"
-            v-bind="typeof close === 'object' ? close : undefined"
+            v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
             :class="b24ui.close({ class: props.b24ui?.close })"
             @click.stop
           />

package/dist/runtime/components/Toaster.vue

@@ -106,7 +106,8 @@ function getOffset(index: number) {
       v-for="(toast, index) of toasts"
       :key="toast.id"
       ref="refs"
-      v-bind="omit(toast, ['id'])"
+      v-bind="omit(toast, ['id', 'close'])"
+      :close="(toast.close as boolean)"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
       :style="{

package/dist/runtime/components/Tooltip.vue

@@ -67,7 +67,7 @@ const b24ui = computed(() => tooltip({
 
 <template>
   <TooltipRoot v-slot="{ open }" v-bind="rootProps">
-    <TooltipTrigger v-if="!!slots.default" as-child :class="props.class">
+    <TooltipTrigger v-if="!!slots.default" v-bind="$attrs" as-child :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>
 

package/dist/runtime/components/prose/TableWrapper.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/table-wrapper'
+import { tv } from '../../utils/tv'
+
+const appConfigTableWrapper = _appConfig as AppConfig & { b24ui: { prose: { tableWrapper: Partial<typeof theme> } } }
+
+const tableWrapper = tv({ extend: tv(theme), ...(appConfigTableWrapper.b24ui?.prose?.tableWrapper || {}) })
+
+type TableWrapperVariants = VariantProps<typeof tableWrapper>
+
+export interface TableWrapperProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: TableWrapperVariants['size']
+  rounded?: boolean
+  zebra?: boolean
+  pinRows?: boolean
+  pinCols?: boolean
+  rowHover?: boolean
+  bordered?: boolean
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof tableWrapper.slots>
+}
+
+export interface TableWrapperSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TableWrapperProps>(), {
+  as: 'div',
+  scrollbarThin: true
+})
+
+const b24ui = computed(() => tableWrapper({
+  size: props.size,
+  rounded: Boolean(props.rounded),
+  zebra: Boolean(props.zebra),
+  pinRows: Boolean(props.pinRows),
+  pinCols: Boolean(props.pinCols),
+  rowHover: Boolean(props.rowHover),
+  bordered: Boolean(props.bordered),
+  scrollbarThin: Boolean(props.scrollbarThin)
+}))
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </Primitive>
+</template>

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{body{@apply antialiased scheme-light dark:scheme-dark}}
+@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased scheme-light dark:scheme-dark}.scrollbar-thin{scrollbar-width:thin}}