@bitrix24/b24ui-nuxt 2.1.3 → 2.1.5

package/dist/runtime/components/InputMenu.vue

@@ -15,6 +15,7 @@ import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
+import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Badge from "./Badge.vue";
@@ -80,16 +81,12 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
-const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-  estimateSize: {
-    xss: 20,
-    xs: 24,
-    sm: 28,
-    md: 32,
-    lg: 36,
-    xl: 40
-  }[props.size || "md"]
-}));
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(items.value, inputSize.value || "md", props.descriptionKey)
+  });
+});
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: icons.chevronDown })));
@@ -230,6 +227,11 @@ function onRemoveTag(event, modelValue) {
     onUpdate(filteredValue);
   }
 }
+function onCreate(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  emits("create", searchTerm.value);
+}
 function onSelect(e, item) {
   if (!isInputItem(item)) {
     return;
@@ -254,7 +256,7 @@ defineExpose({
       data-slot="item"
       :class="b24ui.item({ addNew: true, class: props.b24ui?.item })"
       :value="searchTerm"
-      @select.prevent="emits('create', searchTerm)"
+      @select="onCreate"
     >
       <span data-slot="itemLabel" :class="b24ui.itemLabel({ addNew: true, class: props.b24ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
@@ -353,7 +355,6 @@ defineExpose({
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
-    @keydown.enter="$event.preventDefault()"
   >
     <B24Badge
       v-if="!multiple && isTag"
@@ -410,7 +411,7 @@ defineExpose({
             :placeholder="placeholder"
             data-slot="tagsInput"
             :class="b24ui.tagsInput({ class: props.b24ui?.tagsInput })"
-            @keydown.enter.prevent
+            @change.stop
           />
         </ComboboxInput>
       </TagsInputRoot>
@@ -426,6 +427,7 @@ defineExpose({
         :required="required"
         @blur="onBlur"
         @focus="onFocus"
+        @change.stop
         @update:model-value="searchTerm = $event"
       />
 

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

@@ -1,4 +1,4 @@
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
+import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/navigation-menu';
 import type { AvatarProps, BadgeProps, IconComponent, LinkProps, PopoverProps, TooltipProps } from '../types';
@@ -75,6 +75,9 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkLeadingHint' | 'linkLeadingBadgeSize' | 'linkLeadingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkHint' | 'childLinkBadgeSize' | 'childLinkBadge' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'popoverWrapper'>;
     [key: string]: any;
 }
+type SingleOrMultipleType = 'single' | 'multiple';
+type Orientation = NavigationMenuRootProps['orientation'];
+type NavigationMenuModelValue<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[];
 /**
  * @memo remove contentOrientation
  * @memo remove highlight
@@ -83,12 +86,37 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
  * @memo remove color
  * @memo remove variant (link) -> use variant.pill
  */
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * Determines whether a "single" or "multiple" items can be selected at a time.
+     *
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue 'multiple'
+     */
+    type?: K;
+    /**
+     * The controlled value of the active item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    modelValue?: NavigationMenuModelValue<K, O>;
+    /**
+     * The default active value of the item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    defaultValue?: NavigationMenuModelValue<K, O>;
     /**
      * The icon displayed to open the menu.
      * @defaultValue icons.chevronDown
@@ -107,7 +135,7 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * The orientation of the menu.
      * @defaultValue 'horizontal'
      */
-    orientation?: NavigationMenuRootProps['orientation'];
+    orientation?: O;
     /**
      * Collapse the navigation menu to only show icons.
      * Only works when `orientation` is `vertical`.
@@ -138,8 +166,15 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
     class?: any;
     b24ui?: NavigationMenu['slots'];
 }
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {
-}
+export type NavigationMenuEmits<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = {
+    /**
+     * Event handler called when the value changes.
+     * - In horizontal orientation: emits `string`
+     * - In vertical orientation with `type="single"`: emits `string | undefined`
+     * - In vertical orientation with `type="multiple"`: emits `string[] | undefined`
+     */
+    'update:modelValue': [value: NavigationMenuModelValue<K, O> | undefined];
+};
 type SlotProps<T extends NavigationMenuItem> = (props: {
     item: T;
     index: number;
@@ -169,14 +204,14 @@ export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = Ar
     active?: boolean;
     b24ui: NavigationMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>>(__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<NavigationMenuProps<T> & {
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__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<NavigationMenuProps<T, K, O> & {
+        "onUpdate:modelValue"?: ((value: NavigationMenuModelValue<K, O> | undefined) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: NavigationMenuSlots<T, NestedItem<T>>;
-    emit: (evt: "update:modelValue", value: string) => void;
+    emit: (evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/NavigationMenu.vue

@@ -21,6 +21,9 @@ import B24Tooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
+  type: { type: null, required: false, default: "multiple" },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   trailingIcon: { type: [Function, Object], required: false },
   externalIcon: { type: [Boolean, Function, Object], required: false, default: true },
   items: { type: null, required: false },
@@ -32,8 +35,6 @@ const props = defineProps({
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
-  modelValue: { type: String, required: false },
-  defaultValue: { type: String, required: false },
   delayDuration: { type: Number, required: false, default: 0 },
   disableClickTrigger: { type: Boolean, required: false },
   disableHoverTrigger: { type: Boolean, required: false },
@@ -41,7 +42,6 @@ const props = defineProps({
   disablePointerLeaveClose: { type: Boolean, required: false },
   unmountOnHide: { type: Boolean, required: false, default: true },
   disabled: { type: Boolean, required: false },
-  type: { type: String, required: false, default: "multiple" },
   collapsible: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["update:modelValue"]);
@@ -49,8 +49,6 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
-  modelValue: props.modelValue,
-  defaultValue: props.defaultValue,
   delayDuration: props.delayDuration,
   skipDelayDuration: props.skipDelayDuration,
   orientation: props.orientation,
@@ -133,7 +131,7 @@ function getAccordionDefaultValue(list, level = 0) {
         </slot>
 
         <span
-          v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
+          v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
           data-slot="linkLabel"
           :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel], active })"
         >
@@ -151,8 +149,10 @@ function getAccordionDefaultValue(list, level = 0) {
 
       <component
         :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'"
-        v-if="(!collapsed || orientation !== 'vertical') && /* (item.badge || item.badge === 0) || */
-(orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])"
+        v-if="
+  /* (item.badge || item.badge === 0) || */
+  orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']
+"
         as="span"
         data-slot="linkTrailing"
         :class="b24ui.linkTrailing({ class: [props.b24ui?.linkTrailing, item.b24ui?.linkTrailing] })"
@@ -421,7 +421,14 @@ function getAccordionDefaultValue(list, level = 0) {
   </DefineItemTemplate>
 
   <NavigationMenuRoot
-    v-bind="{ ...rootProps, ...$attrs }"
+    v-bind="{
+  ...rootProps,
+  ...orientation === 'horizontal' ? {
+    modelValue,
+    defaultValue
+  } : {},
+  ...$attrs
+}"
     :data-collapsed="collapsed"
     data-component="section"
     data-slot="root"
@@ -433,9 +440,10 @@ function getAccordionDefaultValue(list, level = 0) {
       <component
         v-bind="orientation === 'vertical' && !collapsed ? {
   ...accordionProps,
-  defaultValue: getAccordionDefaultValue(list)
+  modelValue,
+  defaultValue: defaultValue ?? getAccordionDefaultValue(list)
 } : {}"
-        :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
+        :is="orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
         as="ul"
         data-slot="list"
         :class="b24ui.list({ class: props.b24ui?.list })"

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

@@ -1,4 +1,4 @@
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
+import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/navigation-menu';
 import type { AvatarProps, BadgeProps, IconComponent, LinkProps, PopoverProps, TooltipProps } from '../types';
@@ -75,6 +75,9 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkLeadingHint' | 'linkLeadingBadgeSize' | 'linkLeadingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkHint' | 'childLinkBadgeSize' | 'childLinkBadge' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'popoverWrapper'>;
     [key: string]: any;
 }
+type SingleOrMultipleType = 'single' | 'multiple';
+type Orientation = NavigationMenuRootProps['orientation'];
+type NavigationMenuModelValue<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[];
 /**
  * @memo remove contentOrientation
  * @memo remove highlight
@@ -83,12 +86,37 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
  * @memo remove color
  * @memo remove variant (link) -> use variant.pill
  */
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'type' | 'collapsible'> {
+export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
+    /**
+     * Determines whether a "single" or "multiple" items can be selected at a time.
+     *
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue 'multiple'
+     */
+    type?: K;
+    /**
+     * The controlled value of the active item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use this when you need to control the state of the items. Can be binded with `v-model`
+     */
+    modelValue?: NavigationMenuModelValue<K, O>;
+    /**
+     * The default active value of the item(s).
+     * - In horizontal orientation: always `string`
+     * - In vertical orientation with `type="single"`: `string`
+     * - In vertical orientation with `type="multiple"`: `string[]`
+     *
+     * Use when you do not need to control the state of the item(s).
+     */
+    defaultValue?: NavigationMenuModelValue<K, O>;
     /**
      * The icon displayed to open the menu.
      * @defaultValue icons.chevronDown
@@ -107,7 +135,7 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * The orientation of the menu.
      * @defaultValue 'horizontal'
      */
-    orientation?: NavigationMenuRootProps['orientation'];
+    orientation?: O;
     /**
      * Collapse the navigation menu to only show icons.
      * Only works when `orientation` is `vertical`.
@@ -138,8 +166,15 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
     class?: any;
     b24ui?: NavigationMenu['slots'];
 }
-export interface NavigationMenuEmits extends NavigationMenuRootEmits {
-}
+export type NavigationMenuEmits<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = {
+    /**
+     * Event handler called when the value changes.
+     * - In horizontal orientation: emits `string`
+     * - In vertical orientation with `type="single"`: emits `string | undefined`
+     * - In vertical orientation with `type="multiple"`: emits `string[] | undefined`
+     */
+    'update:modelValue': [value: NavigationMenuModelValue<K, O> | undefined];
+};
 type SlotProps<T extends NavigationMenuItem> = (props: {
     item: T;
     index: number;
@@ -169,14 +204,14 @@ export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = Ar
     active?: boolean;
     b24ui: NavigationMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>>(__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<NavigationMenuProps<T> & {
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__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<NavigationMenuProps<T, K, O> & {
+        "onUpdate:modelValue"?: ((value: NavigationMenuModelValue<K, O> | undefined) => any) | undefined;
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: NavigationMenuSlots<T, NestedItem<T>>;
-    emit: (evt: "update:modelValue", value: string) => void;
+    emit: (evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/RadioGroup.vue

@@ -111,15 +111,15 @@ 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] })"
+        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
       >
         <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
           <RRadioGroupItem
             :id="item.id"
             :value="item.value"
-            :disabled="item.disabled"
+            :disabled="item.disabled || disabled"
             data-slot="base"
-            :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled })"
+            :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled || disabled })"
           >
             <RadioGroupIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
           </RRadioGroupItem>
@@ -135,7 +135,7 @@ function onUpdate(value) {
             v-if="item.label || !!slots.label"
             :for="item.id"
             data-slot="label"
-            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
+            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label], disabled: item.disabled || disabled })"
           >
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
@@ -144,7 +144,7 @@ function onUpdate(value) {
           <p
             v-if="item.description || !!slots.description"
             data-slot="description"
-            :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })"
+            :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description], disabled: item.disabled || disabled })"
           >
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}

package/dist/runtime/components/SelectMenu.vue

@@ -14,6 +14,7 @@ import { useFormField } from "../composables/useFormField";
 import { useLocale } from "../composables/useLocale";
 import { usePortal } from "../composables/usePortal";
 import { compare, get, getDisplayValue, isArrayOfArray } from "../utils";
+import { getEstimateSize } from "../utils/virtualizer";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Badge from "./Badge.vue";
@@ -77,16 +78,12 @@ const rootProps = useForwardPropsEmits(reactivePick(props, "modelValue", "defaul
 const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => defu(typeof props.arrow === "boolean" ? {} : props.arrow, { width: 20, height: 10 }));
-const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-  estimateSize: {
-    xss: 20,
-    xs: 24,
-    sm: 28,
-    md: 32,
-    lg: 36,
-    xl: 40
-  }[props.size || "md"]
-}));
+const virtualizerProps = toRef(() => {
+  if (!props.virtualize) return false;
+  return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+    estimateSize: getEstimateSize(items.value, props.size || "md", props.descriptionKey)
+  });
+});
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t("selectMenu.search"), type: "text", size: "md" }));
 const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const { orientation, size: fieldGroupSize } = useFieldGroup(props);
@@ -218,6 +215,11 @@ function onUpdateOpen(value) {
     clearTimeout(timeoutId);
   }
 }
+function onCreate(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  emits("create", searchTerm.value);
+}
 function onSelect(e, item) {
   if (!isSelectItem(item)) {
     return;
@@ -242,7 +244,7 @@ defineExpose({
       data-slot="item"
       :class="b24ui.item({ addNew: true, class: props.b24ui?.item })"
       :value="searchTerm"
-      @select.prevent="emits('create', searchTerm)"
+      @select="onCreate"
     >
       <span data-slot="itemLabel" :class="b24ui.itemLabel({ addNew: true, class: props.b24ui?.itemLabel })">
         <slot name="create-item-label" :item="searchTerm">
@@ -440,6 +442,7 @@ defineExpose({
                 v-bind="searchInputProps"
                 data-slot="input"
                 :class="b24ui.input({ class: props.b24ui?.input })"
+                @change.stop
               />
             </ComboboxInput>
 

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

@@ -63,10 +63,10 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
          */
         overscan?: number;
         /**
-         * Estimated size (in px) of each item
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
          * @defaultValue 65
          */
-        estimateSize?: number;
+        estimateSize?: number | ((index: number) => number);
     });
     /**
      * The text to display when the table is empty.

package/dist/runtime/components/Table.vue

@@ -225,7 +225,20 @@ const virtualizer = !!props.virtualize && useVirtualizer({
     return rows.value.length;
   },
   getScrollElement: () => rootRef.value?.$el,
-  estimateSize: () => virtualizerProps.value.estimateSize
+  estimateSize: (index) => {
+    const estimate = virtualizerProps.value.estimateSize;
+    return typeof estimate === "function" ? estimate(index) : estimate;
+  }
+});
+const renderedSize = computed(() => {
+  if (!virtualizer) {
+    return 0;
+  }
+  const virtualItems = virtualizer.value.getVirtualItems();
+  if (!virtualItems?.length) {
+    return 0;
+  }
+  return virtualItems.reduce((sum, item) => sum + item.size, 0);
 });
 function valueUpdater(updaterOrValue, ref2) {
   ref2.value = typeof updaterOrValue === "function" ? updaterOrValue(ref2.value) : updaterOrValue;
@@ -406,7 +419,7 @@ defineExpose({
         data-slot="tfoot"
         :class="b24ui.tfoot({ class: [props.b24ui?.tfoot] })"
         :style="virtualizer ? {
-  transform: `translateY(${virtualizer.getTotalSize() - virtualizer.getVirtualItems().length * virtualizerProps.estimateSize}px)`
+  transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)`
 } : void 0"
       >
         <tr data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator] })" />

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

@@ -63,10 +63,10 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
          */
         overscan?: number;
         /**
-         * Estimated size (in px) of each item
+         * Estimated size (in px) of each item, or a function that returns the size for a given index
          * @defaultValue 65
          */
-        estimateSize?: number;
+        estimateSize?: number | ((index: number) => number);
     });
     /**
      * The text to display when the table is empty.

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

@@ -5,15 +5,8 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, 'color'> {
      */
     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<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     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;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -57,7 +57,6 @@ const props = defineProps({
   viewTransition: { type: Boolean, required: false },
   replace: { type: Boolean, required: false }
 });
-defineSlots();
 const { t } = useLocale();
 const colorMode = useColorMode();
 const buttonProps = useForwardProps(reactiveOmit(props, "icon"));
@@ -72,21 +71,17 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly v-if="!colorMode?.forced">
-    <B24Button
-      v-bind="{
+  <B24Button
+    v-bind="{
   ...buttonProps,
-  'icon': props.icon || (isDark ? icons.dark : icons.light),
   'aria-label': isDark ? t('colorMode.switchToLight') : t('colorMode.switchToDark'),
   ...$attrs
 }"
-      @click="isDark = !isDark"
-    />
-
-    <template #fallback>
-      <slot name="fallback">
-        <div class="w-[32px] h-[34px]" />
-      </slot>
+    @click="isDark = !isDark"
+  >
+    <template #leading="{ b24ui }">
+      <Component :is="icons.dark" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" class="hidden dark:inline" />
+      <Component :is="icons.light" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" class="inline dark:hidden" />
     </template>
-  </ClientOnly>
+  </B24Button>
 </template>

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

@@ -5,15 +5,8 @@ export interface ColorModeButtonProps extends Omit<ButtonProps, 'color'> {
      */
     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<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<ColorModeButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorModeButtonProps> & Readonly<{}>, {
     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;
-}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/components/content/ContentSearchButton.vue

@@ -74,7 +74,9 @@ const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} :
 const { t } = useLocale();
 const { open } = useContentSearch();
 const appConfig = useAppConfig();
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.contentSearchButton || {} })());
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.contentSearchButton || {} })({
+  collapsed: props.collapsed
+}));
 </script>
 
 <template>
@@ -85,7 +87,6 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.content
       v-bind="{
   ...buttonProps,
   ...collapsed ? {
-    'label': void 0,
     'aria-label': label || t('contentSearchButton.label')
   } : {
     color: 'air-secondary-no-accent'
@@ -101,7 +102,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.content
         <slot :name="name" v-bind="slotData" />
       </template>
 
-      <template v-if="!collapsed" #trailing="{ b24ui: b24uiProxy }">
+      <template #trailing="{ b24ui: b24uiProxy }">
         <div data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
           <slot name="trailing" :b24ui="b24uiProxy">
             <template v-if="kbds?.length">

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

@@ -0,0 +1,6 @@
+/**
+ * Get estimate size for virtualizers that checks each item individually
+ * NOTE: This requires Reka UI to support functions for estimateSize (https://github.com/unovue/reka-ui/pull/2288)
+ * Until then, we check if ANY item has a description and use that for all items
+ */
+export declare function getEstimateSize(items: any[], size: 'xss' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', descriptionKey?: string): number;