@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

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

@@ -1,3 +1,4 @@
+import type { ComponentPublicInstance } from 'vue';
 import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/pin-input';
@@ -41,6 +42,8 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     autofocus?: boolean;
     autofocusDelay?: number;
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. (Left for backward compatibility.) */
+    fixed?: boolean;
     class?: any;
     b24ui?: PinInput['slots'];
 }
@@ -60,7 +63,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputsRef: import("vue").Ref<any[], any[]>;
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
     slots: {};

package/dist/runtime/components/Popover.vue

@@ -9,6 +9,7 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Popover, HoverCard } from "reka-ui/namespaced";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { usePortal } from "../composables/usePortal";
 import { pointerDownOutside } from "../utils/overlay";
 import { tv } from "../utils/tv";
@@ -30,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["close:prevent", "update:open"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("popover", props);
 const pick = props.mode === "hover" ? reactivePick(props, "defaultOpen", "open", "openDelay", "closeDelay") : reactivePick(props, "defaultOpen", "open", "modal");
 const rootProps = useForwardPropsEmits(pick, emits);
 const portalProps = usePortal(toRef(() => props.portal));
@@ -72,10 +74,10 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
     </Component.Anchor>
 
     <Component.Portal v-bind="portalProps">
-      <Component.Content v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-on="contentEvents">
+      <Component.Content v-bind="contentProps" data-slot="content" :class="b24ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-on="contentEvents">
         <slot name="content" v-bind="close ? { close } : {}" />
 
-        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: props.b24ui?.arrow })" />
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="b24ui.arrow({ class: uiProp?.arrow })" />
       </Component.Content>
     </Component.Portal>
   </Component.Root>

package/dist/runtime/components/Progress.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { Primitive, ProgressRoot, ProgressIndicator, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 const props = defineProps({
@@ -28,6 +29,7 @@ const emits = defineEmits(["update:modelValue", "update:max"]);
 const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("progress", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "getValueLabel", "getValueText", "modelValue"), emits);
 const isIndeterminate = computed(() => rootProps.value.modelValue === null);
 const hasSteps = computed(() => Array.isArray(props.max));
@@ -110,19 +112,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.progres
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!isIndeterminate && (status || !!slots.status)" data-slot="status" :class="b24ui.status({ class: props.b24ui?.status })" :style="statusStyle">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!isIndeterminate && (status || !!slots.status)" data-slot="status" :class="b24ui.status({ class: uiProp?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%
       </slot>
     </div>
 
-    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })" :style="indicatorStyle" />
+    <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="b24ui.base({ class: uiProp?.base })" style="transform: translateZ(0)">
+      <ProgressIndicator data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })" :style="indicatorStyle" />
     </ProgressRoot>
 
-    <div v-if="hasSteps" data-slot="steps" :class="b24ui.steps({ class: props.b24ui?.steps })">
-      <div v-for="(step, index) in max" :key="index" data-slot="step" :class="b24ui.step({ class: props.b24ui?.step, step: stepVariant(index) })">
+    <div v-if="hasSteps" data-slot="steps" :class="b24ui.steps({ class: uiProp?.steps })">
+      <div v-for="(step, index) in max" :key="index" data-slot="step" :class="b24ui.step({ class: uiProp?.step, step: stepVariant(index) })">
         <slot :name="`step-${index}`" :step="step">
           {{ step }}
         </slot>

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

@@ -86,14 +86,14 @@ export default _default;
 declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<RadioGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/RadioGroup.vue

@@ -7,6 +7,7 @@ import { computed, useId } from "vue";
 import { RadioGroupRoot, RadioGroupItem as RRadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -34,6 +35,7 @@ const props = defineProps({
 const emits = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("radioGroup", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "loop", "required"), emits);
 const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField(props, { bind: false });
 const id = _id.value ?? useId();
@@ -96,11 +98,11 @@ function onUpdate(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: props.b24ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
+    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: uiProp?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: uiProp?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
@@ -111,31 +113,31 @@ function onUpdate(value) {
         v-for="item in normalizedItems"
         :key="item.value"
         data-slot="item"
-        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
+        :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
       >
-        <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
+        <div data-slot="container" :class="b24ui.container({ class: [uiProp?.container, item.b24ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled || disabled"
             data-slot="base"
-            :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled || disabled })"
+            :class="b24ui.base({ class: [uiProp?.base, item.b24ui?.base], disabled: item.disabled || disabled })"
           >
-            <RadioGroupIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
+            <RadioGroupIndicator data-slot="indicator" :class="b24ui.indicator({ class: [uiProp?.indicator, item.b24ui?.indicator] })" />
           </RRadioGroupItem>
         </div>
 
         <div
           v-if="item.label || !!slots.label || (item.description || !!slots.description)"
           data-slot="wrapper"
-          :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })"
+          :class="b24ui.wrapper({ class: [uiProp?.wrapper, item.b24ui?.wrapper] })"
         >
           <component
             :is="!variant || variant === 'list' ? Label : 'p'"
             v-if="item.label || !!slots.label"
             :for="item.id"
             data-slot="label"
-            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label], disabled: item.disabled || disabled })"
+            :class="b24ui.label({ class: [uiProp?.label, item.b24ui?.label], disabled: item.disabled || disabled })"
           >
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
@@ -144,7 +146,7 @@ function onUpdate(value) {
           <p
             v-if="item.description || !!slots.description"
             data-slot="description"
-            :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description], disabled: item.disabled || disabled })"
+            :class="b24ui.description({ class: [uiProp?.description, item.b24ui?.description], disabled: item.disabled || disabled })"
           >
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}

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

@@ -86,14 +86,14 @@ export default _default;
 declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<RadioGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: RadioGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Range.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { SliderRoot, SliderRange, SliderTrack, SliderThumb, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import B24Tooltip from "./Tooltip.vue";
@@ -30,6 +31,7 @@ const props = defineProps({
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: null });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("range", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "orientation", "min", "max", "step", "minStepsBetweenThumbs", "inverted"), emits);
 const { id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const defaultRangeValue = computed(() => {
@@ -71,13 +73,13 @@ function onChange(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :default-value="defaultRangeValue"
     @update:model-value="emitFormInput()"
     @value-commit="onChange"
   >
-    <SliderTrack data-slot="track" :class="b24ui.track({ class: props.b24ui?.track })">
-      <SliderRange data-slot="range" :class="b24ui.range({ class: props.b24ui?.range })" />
+    <SliderTrack data-slot="track" :class="b24ui.track({ class: uiProp?.track })">
+      <SliderRange data-slot="range" :class="b24ui.range({ class: uiProp?.range })" />
     </SliderTrack>
 
     <template v-for="thumb in thumbs" :key="thumb">
@@ -87,9 +89,9 @@ function onChange(value) {
         disable-closing-trigger
         v-bind="typeof tooltip === 'object' ? tooltip : {}"
       >
-        <SliderThumb data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+        <SliderThumb data-slot="thumb" :class="b24ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
       </B24Tooltip>
-      <SliderThumb v-else data-slot="thumb" :class="b24ui.thumb({ class: props.b24ui?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
+      <SliderThumb v-else data-slot="thumb" :class="b24ui.thumb({ class: uiProp?.thumb })" :aria-label="thumbs === 1 ? 'Thumb' : `Thumb ${thumb} of ${thumbs}`" />
     </template>
   </SliderRoot>
 </template>

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

@@ -20,6 +20,13 @@ export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOpt
      * @defaultValue undefined
      */
     lanes?: number;
+    /**
+     * Skip per-item DOM measurement for uniform-height items.
+     * When `true`, uses `estimateSize` only — significantly improving performance for uniform items.
+     * When `false` (default), measures each item for variable-height layouts (e.g., masonry).
+     * @defaultValue false
+     */
+    skipMeasurement?: boolean;
 }
 export type ScrollAreaItem = any;
 export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {

package/dist/runtime/components/ScrollArea.vue

@@ -3,11 +3,12 @@ import theme from "#build/b24ui/scroll-area";
 </script>
 
 <script setup>
-import { computed, toRef, useTemplateRef, watch } from "vue";
+import { computed, onMounted, onUnmounted, toRef, useTemplateRef, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 import { useLocale } from "../composables/useLocale";
 const props = defineProps({
@@ -22,6 +23,7 @@ defineSlots();
 const emits = defineEmits(["scroll"]);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("scrollArea", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.scrollArea || {} })({
   orientation: props.orientation
 }));
@@ -44,6 +46,9 @@ const lanes = computed(() => {
   const value = virtualizerProps.value.lanes;
   return typeof value === "number" ? value : void 0;
 });
+const skipMeasurement = computed(() => {
+  return typeof props.virtualize === "object" && props.virtualize.skipMeasurement === true;
+});
 const virtualizer = !!props.virtualize && useVirtualizer({
   ...virtualizerProps.value,
   get overscan() {
@@ -101,13 +106,32 @@ function getVirtualItemStyle(virtualItem) {
     transform: isHorizontal.value ? `translateX(${isRtl.value ? -virtualItem.start : virtualItem.start}px)` : `translateY(${virtualItem.start}px)`
   };
 }
-watch(lanes, () => {
+let resizeObserver = null;
+let rafId = null;
+onMounted(() => {
   if (virtualizer) {
-    virtualizer.value.measure();
+    const el = rootRef.value?.$el;
+    if (el) {
+      resizeObserver = new ResizeObserver(() => {
+        if (rafId !== null) return;
+        rafId = requestAnimationFrame(() => {
+          rafId = null;
+          virtualizer.value.measure();
+        });
+      });
+      resizeObserver.observe(el);
+    }
+  }
+});
+onUnmounted(() => {
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
   }
-}, { flush: "sync" });
+  resizeObserver?.disconnect();
+});
 function measureElement(el) {
-  if (el && virtualizer) {
+  if (el && virtualizer && !skipMeasurement.value) {
     const element = el instanceof Element ? el : el.$el;
     virtualizer.value.measureElement(element);
   }
@@ -139,12 +163,12 @@ defineExpose({
     :as="as"
     data-slot="root"
     :data-orientation="orientation"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
     <template v-if="virtualizer">
       <div
         data-slot="viewport"
-        :class="b24ui.viewport({ class: props.b24ui?.viewport })"
+        :class="b24ui.viewport({ class: uiProp?.viewport })"
         :style="virtualViewportStyle"
       >
         <div
@@ -153,7 +177,7 @@ defineExpose({
           :ref="measureElement"
           :data-index="virtualItem.index"
           data-slot="item"
-          :class="b24ui.item({ class: props.b24ui?.item })"
+          :class="b24ui.item({ class: uiProp?.item })"
           :style="getVirtualItemStyle(virtualItem)"
         >
           <slot
@@ -166,13 +190,13 @@ defineExpose({
     </template>
 
     <template v-else>
-      <div data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+      <div data-slot="viewport" :class="b24ui.viewport({ class: uiProp?.viewport })">
         <template v-if="items?.length">
           <div
             v-for="(item, index) in items"
             :key="getItemKey(item, index)"
             data-slot="item"
-            :class="b24ui.item({ class: props.b24ui?.item })"
+            :class="b24ui.item({ class: uiProp?.item })"
           >
             <slot :item="item" :index="index" />
           </div>

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

@@ -20,6 +20,13 @@ export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOpt
      * @defaultValue undefined
      */
     lanes?: number;
+    /**
+     * Skip per-item DOM measurement for uniform-height items.
+     * When `true`, uses `estimateSize` only — significantly improving performance for uniform items.
+     * When `false` (default), measures each item for variable-height layouts (e.g., masonry).
+     * @defaultValue false
+     */
+    skipMeasurement?: boolean;
 }
 export type ScrollAreaItem = any;
 export interface ScrollAreaProps<T extends ScrollAreaItem = ScrollAreaItem> {

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

@@ -3,9 +3,9 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { AvatarProps, ChipProps, BadgeProps, IconComponent } from '../types';
-import type { ModelModifiers } from '../types/input';
+import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
-import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps } from '../types/utils';
+import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Select = ComponentConfig<typeof theme, AppConfig, 'select'>;
 export type SelectValue = AcceptableValue;
@@ -32,7 +32,10 @@ export type SelectItem = SelectValue | {
     b24ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 };
-export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
+type ExcludeItem = {
+    type: 'label' | 'separator';
+};
+export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = 'value', M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled' | 'name'> {
     id?: string;
     /** The placeholder text when the select is empty. */
     placeholder?: string;
@@ -113,10 +116,10 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     descriptionKey?: GetItemKeys<T>;
     items?: T;
     /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
-    defaultValue?: GetModelValue<T, VK, M>;
+    defaultValue?: ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>;
     /** The controlled value of the Select. Can be bind as `v-model`. */
-    modelValue?: GetModelValue<T, VK, M>;
-    modelModifiers?: Omit<ModelModifiers<GetModelValue<T, VK, M>>, 'lazy'>;
+    modelValue?: ApplyModifiers<GetModelValue<T, VK, M, ExcludeItem>, Mod>;
+    modelModifiers?: Mod;
     /** Whether multiple options can be selected or not. */
     multiple?: M & boolean;
     /** Highlight the ring color like a focus state. */
@@ -126,29 +129,30 @@ export interface SelectProps<T extends ArrayOrNested<SelectItem> = ArrayOrNested
     class?: any;
     b24ui?: Select['slots'];
 }
-export type SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined, M extends boolean> = Omit<SelectRootEmits, 'update:modelValue'> & {
-    change: [event: Event];
-    blur: [event: FocusEvent];
-    focus: [event: FocusEvent];
-} & GetModelValueEmits<A, VK, M>;
+export interface SelectEmits<A extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined, M extends boolean, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>> extends Omit<SelectRootEmits, 'update:modelValue'> {
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
+    'update:modelValue': [value: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>];
+}
 type SlotProps<T extends SelectItem> = (props: {
     item: T;
     index: number;
     b24ui: Select['b24ui'];
 }) => any;
-export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, T extends NestedItem<A> = NestedItem<A>> {
+export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested<SelectItem>, VK extends GetItemKeys<A> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, T extends NestedItem<A> = NestedItem<A>> {
     'leading'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+        modelValue?: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>;
         open: boolean;
         b24ui: Select['b24ui'];
     }): any;
     'default'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+        modelValue?: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>;
         open: boolean;
         b24ui: Select['b24ui'];
     }): any;
     'trailing'(props: {
-        modelValue?: GetModelValue<A, VK, M>;
+        modelValue?: ApplyModifiers<GetModelValue<A, VK, M, ExcludeItem>, Mod>;
         open: boolean;
         b24ui: Select['b24ui'];
     }): any;
@@ -168,13 +172,33 @@ export interface SelectSlots<A extends ArrayOrNested<SelectItem> = ArrayOrNested
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<T, VK, M> & {
+declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends GetItemKeys<T> = "value", M extends boolean = false, Mod extends Omit<ModelModifiers, "lazy"> = Omit<ModelModifiers, "lazy">>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<T, VK, M, Mod> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
         onChange?: ((event: Event) => any) | undefined;
         onFocus?: ((event: FocusEvent) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: GetModelValue<T, VK, M>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Mod extends {
+            number: true;
+        } ? (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+            optional: true;
+        } ? (Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+            nullable: true;
+        } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -183,8 +207,28 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends Get
         viewportRef: Readonly<import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>>;
     }>) => void;
     attrs: any;
-    slots: SelectSlots<T, VK, M, NestedItem<T>>;
-    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: GetModelValue<T, VK, M>) => void);
+    slots: SelectSlots<T, VK, M, Mod, NestedItem<T>>;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:modelValue", value: Mod extends {
+        number: true;
+    } ? (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) extends infer T_1 ? T_1 extends (Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) ? T_1 extends string ? number | T_1 : T_1 : never : never : Mod extends {
+        optional: true;
+    } ? (Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) | undefined : Mod extends {
+        nullable: true;
+    } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };