@bitrix24/b24ui-nuxt 2.0.9 → 2.1.1

package/dist/runtime/components/SelectMenu.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/select-menu";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, toRef, toRaw } from "vue";
+import { useTemplateRef, computed, onMounted, toRef, toRaw } from "vue";
 import { Primitive, ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
@@ -174,7 +174,7 @@ const createItem = computed(() => {
   return !filteredItems.value.length;
 });
 const createItemPosition = computed(() => typeof props.createItem === "object" ? props.createItem.position : "bottom");
-const triggerRef = ref(null);
+const triggerRef = useTemplateRef("triggerRef");
 function autoFocus() {
   if (props.autofocus) {
     triggerRef.value?.$el?.focus({
@@ -232,7 +232,7 @@ function isSelectItem(item) {
   return typeof item === "object" && item !== null;
 }
 defineExpose({
-  triggerRef
+  triggerRef: toRef(() => triggerRef.value?.$el)
 });
 </script>
 

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select-menu';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, InputProps, BadgeProps, IconComponent } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type SelectMenu = ComponentConfig<typeof theme, AppConfig, 'selectMenu'>;
@@ -29,7 +30,7 @@ export type SelectMenuItem = SelectMenuValue | {
     b24ui?: Pick<SelectMenu['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
-export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps {
+export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'highlightOnHover'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     id?: string;
     /** The placeholder text when the select is empty. */
     placeholder?: string;
@@ -64,7 +65,7 @@ export interface SelectMenuProps<T extends ArrayOrNested<SelectMenuItem> = Array
      */
     underline?: boolean;
     /**
-     * Rounds the corners of the button
+     * Rounds the corners of the select
      * @defaultValue false
      */
     rounded?: boolean;
@@ -226,11 +227,11 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
     props: __VLS_PrettifyLocal<(SelectMenuProps<T, VK, M> & {
         searchTerm?: string;
     }) & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
-        onCreate?: ((item: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
+        onCreate?: ((item: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
         onHighlight?: ((payload: {
             ref: HTMLElement;
@@ -239,111 +240,11 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectMenuItem>, VK extends
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        triggerRef: import("vue").Ref<({
-            $: import("vue").ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly disabled?: boolean | undefined;
-                readonly asChild?: boolean | undefined;
-                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
-            $refs: {
-                [x: string]: unknown;
-            };
-            $slots: Readonly<{
-                [name: string]: import("vue").Slot<any> | undefined;
-            }>;
-            $root: import("vue").ComponentPublicInstance | null;
-            $parent: import("vue").ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: (event: string, ...args: any[]) => void;
-            $el: any;
-            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof import("vue").nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-        } & Readonly<{
-            as: import("reka-ui").AsTag | import("vue").Component;
-        }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        }) | null, ({
-            $: import("vue").ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly disabled?: boolean | undefined;
-                readonly asChild?: boolean | undefined;
-                readonly as?: (import("reka-ui").AsTag | import("vue").Component) | undefined;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
-            $refs: {
-                [x: string]: unknown;
-            };
-            $slots: Readonly<{
-                [name: string]: import("vue").Slot<any> | undefined;
-            }>;
-            $root: import("vue").ComponentPublicInstance | null;
-            $parent: import("vue").ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: (event: string, ...args: any[]) => void;
-            $el: any;
-            $options: import("vue").ComponentOptionsBase<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-                as: import("reka-ui").AsTag | import("vue").Component;
-            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof import("vue").nextTick;
-            $watch<T_1 extends string | ((...args: any) => any)>(source: T_1, cb: T_1 extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-        } & Readonly<{
-            as: import("reka-ui").AsTag | import("vue").Component;
-        }> & Omit<Readonly<import("reka-ui").ComboboxTriggerProps> & Readonly<{}>, "as"> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
-            $slots: {
-                default?: (props: {}) => any;
-            };
-        }) | null>;
+        triggerRef: Readonly<import("vue").Ref<HTMLButtonElement, HTMLButtonElement>>;
     }>) => void;
     attrs: any;
     slots: SelectMenuSlots<T, VK, M, NestedItem<T>>;
-    emit: (((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "create", item: string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
+    emit: (((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "create", item: string) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void) & ((evt: "highlight", payload: {
         ref: HTMLElement;
         value: GetModelValue<T, VK, M>;
     } | undefined) => void)) & ((evt: "update:searchTerm", value: string) => void);

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

@@ -107,11 +107,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
+    overlay: boolean;
     close: boolean | Partial<ButtonProps>;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
-    overlay: boolean;
     side: Slideover["variants"]["side"];
     overlayBlur: Slideover["variants"]["overlayBlur"];
     dismissible: boolean;

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

@@ -107,11 +107,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Slideo
     "onAfter:enter"?: (() => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
+    overlay: boolean;
     close: boolean | Partial<ButtonProps>;
     transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
-    overlay: boolean;
     side: Slideover["variants"]["side"];
     overlayBlur: Slideover["variants"]["overlayBlur"];
     dismissible: boolean;

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

@@ -2,9 +2,10 @@ import type { SwitchRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/switch';
 import type { IconComponent } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

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

@@ -2,9 +2,10 @@ import type { SwitchRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/switch';
 import type { IconComponent } from '../types';
+import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Switch = ComponentConfig<typeof theme, AppConfig, 'switch'>;
-export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'

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

@@ -1,9 +1,10 @@
-import type { Ref, WatchOptions } from 'vue';
+import type { WatchOptions } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/b24ui/table';
+import type { TableHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -40,7 +41,7 @@ export interface TableOptions<T extends TableData = TableData> extends Omit<Core
     onStateChange?: CoreOptions<T>['onStateChange'];
     renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
 }
-export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ TableHTMLAttributes {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -205,8 +206,8 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        readonly $el: any;
-        tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
+        readonly $el: HTMLElement;
+        tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
         tableApi: import("@tanstack/table-core").Table<T>;
     }>) => void;
     attrs: any;

package/dist/runtime/components/Table.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/table";
 </script>
 
 <script setup>
-import { computed, ref, watch, toRef } from "vue";
+import { ref, computed, useTemplateRef, watch, toRef } from "vue";
 import { Primitive } from "reka-ui";
 import { upperFirst } from "scule";
 import { defu } from "defu";
@@ -134,8 +134,8 @@ const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } })
 const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
 const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
 const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
-const rootRef = ref();
-const tableRef = ref(null);
+const rootRef = useTemplateRef("rootRef");
+const tableRef = useTemplateRef("tableRef");
 const tableApi = useVueTable({
   ...reactiveOmit(props, "as", "data", "columns", "virtualize", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "b24ui"),
   data,
@@ -349,6 +349,7 @@ defineExpose({
   ],
   pinned: !!header.column.getIsPinned()
 })"
+            :style="resolveValue(header.column.columnDef.meta?.style?.th, header)"
           >
             <slot :name="`${header.id}-header`" v-bind="header.getContext()">
               <FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" :props="header.getContext()" />

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

@@ -1,9 +1,10 @@
-import type { Ref, WatchOptions } from 'vue';
+import type { WatchOptions } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
 import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
 import type { VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/b24ui/table';
+import type { TableHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -40,7 +41,7 @@ export interface TableOptions<T extends TableData = TableData> extends Omit<Core
     onStateChange?: CoreOptions<T>['onStateChange'];
     renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
 }
-export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T>, /** @vue-ignore */ TableHTMLAttributes {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -205,8 +206,8 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        readonly $el: any;
-        tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
+        readonly $el: HTMLElement;
+        tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
         tableApi: import("@tanstack/table-core").Table<T>;
     }>) => void;
     attrs: any;

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

@@ -2,11 +2,12 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { BadgeProps } from '../types';
+import type { TextareaHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps {
+export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -36,7 +37,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
      */
     underline?: boolean;
     /**
-     * Rounds the corners of the button
+     * Rounds the corners of the textarea
      * @defaultValue false
      */
     rounded?: boolean;
@@ -60,7 +61,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     b24ui?: Textarea['slots'];
 }
@@ -82,16 +83,16 @@ export interface TextareaSlots {
 }
 declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<TextareaProps<T> & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Textarea.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/textarea";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick, watch } from "vue";
+import { useTemplateRef, computed, onMounted, nextTick, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { useVModel } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -68,7 +68,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textare
   leading: Boolean(isLeading.value || !!props.avatar || !!slots.leading),
   trailing: Boolean(isTrailing.value || !!slots.trailing)
 }));
-const textareaRef = ref(null);
+const textareaRef = useTemplateRef("textareaRef");
 function updateInput(value) {
   if (props.modelModifiers?.trim) {
     value = value?.trim() ?? null;

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

@@ -2,11 +2,12 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { BadgeProps } from '../types';
+import type { TextareaHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { ComponentConfig } from '../types/tv';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps {
+export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -36,7 +37,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
      */
     underline?: boolean;
     /**
-     * Rounds the corners of the button
+     * Rounds the corners of the textarea
      * @defaultValue false
      */
     rounded?: boolean;
@@ -60,7 +61,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     highlight?: boolean;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     class?: any;
     b24ui?: Textarea['slots'];
 }
@@ -82,16 +83,16 @@ export interface TextareaSlots {
 }
 declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<TextareaProps<T> & {
-        onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+        textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", value: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Toast.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/toast";
 </script>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from "vue";
+import { ref, computed, onMounted, nextTick, useTemplateRef } from "vue";
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -42,14 +42,14 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.toast |
   orientation: props.orientation,
   title: !!props.title || !!slots.title
 }));
-const el = ref();
+const rootRef = useTemplateRef("rootRef");
 const height = ref(0);
 onMounted(() => {
-  if (!el.value) {
+  if (!rootRef.value) {
     return;
   }
   nextTick(() => {
-    height.value = el.value?.$el?.getBoundingClientRect()?.height;
+    height.value = rootRef.value?.$el?.getBoundingClientRect()?.height;
   });
 });
 defineExpose({
@@ -59,7 +59,7 @@ defineExpose({
 
 <template>
   <ToastRoot
-    ref="el"
+    ref="rootRef"
     v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"

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

@@ -43,8 +43,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Toaste
     progress: boolean;
     duration: number;
     position: Toaster["variants"]["position"];
-    expand: boolean;
     max: number;
+    expand: boolean;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;

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

@@ -43,8 +43,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Toaste
     progress: boolean;
     duration: number;
     position: Toaster["variants"]["position"];
-    expand: boolean;
     max: number;
+    expand: boolean;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/color-mode/ColorModeAvatar.d.vue.ts

@@ -1,8 +1,8 @@
-import type { AvatarProps } from '@bitrix24/b24ui-nuxt';
-export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+import type { AvatarProps } from '../../types';
+export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeAvatar.vue

@@ -3,15 +3,27 @@
 </script>
 
 <script setup>
+import { useForwardProps } from "reka-ui";
+import { reactiveOmit } from "@vueuse/core";
 import B24Avatar from "../Avatar.vue";
 defineOptions({ inheritAttrs: false });
-defineProps({
+const props = defineProps({
   light: { type: String, required: true },
-  dark: { type: String, required: true }
+  dark: { type: String, required: true },
+  as: { type: null, required: false },
+  alt: { type: String, required: false },
+  icon: { type: [Function, Object], required: false },
+  text: { type: String, required: false },
+  size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
+  class: { type: null, required: false },
+  style: { type: null, required: false },
+  b24ui: { type: null, required: false }
 });
+const avatarProps = useForwardProps(reactiveOmit(props, "light", "dark"));
 </script>
 
 <template>
-  <B24Avatar :src="light" class="dark:hidden" v-bind="$attrs" />
-  <B24Avatar :src="dark" class="hidden dark:block" v-bind="$attrs" />
+  <B24Avatar v-bind="{ ...avatarProps, ...$attrs }" :src="light" class="dark:hidden" />
+  <B24Avatar v-bind="{ ...avatarProps, ...$attrs }" :src="dark" class="hidden dark:block" />
 </template>

package/dist/runtime/components/color-mode/ColorModeAvatar.vue.d.ts

@@ -1,8 +1,8 @@
-import type { AvatarProps } from '@bitrix24/b24ui-nuxt';
-export interface ColorModeAvatarProps extends /** @vue-ignore */ Omit<AvatarProps, 'src'> {
+import type { AvatarProps } from '../../types';
+export interface ColorModeAvatarProps extends Omit<AvatarProps, 'src'> {
     light: string;
     dark: string;
 }
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ColorModeAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/color-mode/ColorModeButton.d.vue.ts

@@ -1,12 +1,12 @@
-import type { ButtonProps } from '@bitrix24/b24ui-nuxt';
-export interface ColorModeButtonProps extends /** @vue-ignore */ Pick<ButtonProps, 'as' | 'size' | 'disabled' | 'b24ui'> {
+import type { ButtonProps } from '../../types';
+export interface ColorModeButtonProps extends Omit<ButtonProps, 'color'> {
     /**
      * @defaultValue 'air-tertiary-no-accent'
      */
     color?: ButtonProps['color'];
 }
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
-    color: ButtonProps["color"];
+    color: "default" | "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     fallback(props?: {}): any;
 }>;