@bitrix24/b24ui-nuxt 2.1.4 → 2.1.6

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.Bs0V9FLV.mjs';
+import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.DwYJyZL6.mjs';
 import 'node:url';
 import 'scule';
 import 'knitwork';

package/dist/runtime/components/CheckboxGroup.vue

@@ -45,7 +45,8 @@ const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.checkboxGro
   required: props.required,
   orientation: props.orientation,
   color: props.color,
-  variant: props.variant
+  variant: props.variant,
+  disabled: disabled.value
 }));
 function normalizeItem(item) {
   if (item === null) {
@@ -113,7 +114,7 @@ function onUpdate(value) {
         :disabled="item.disabled || disabled"
         :b24ui="{ ...props.b24ui ? omit(props.b24ui, ['root']) : void 0, ...item.b24ui || {} }"
         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 })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>
           <slot :name="name" :item="item" />

package/dist/runtime/components/DashboardSearchButton.vue

@@ -75,7 +75,9 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const { toggleSearch } = useDashboard({ toggleSearch: () => {
 } });
-const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSearchButton || {} })());
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSearchButton || {} })({
+  collapsed: props.collapsed
+}));
 </script>
 
 <template>
@@ -86,7 +88,6 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       v-bind="{
   ...buttonProps,
   ...collapsed ? {
-    'label': void 0,
     'aria-label': label || t('dashboardSearchButton.label')
   } : {
     color: 'air-secondary-no-accent'
@@ -102,7 +103,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
         <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/components/Link.d.vue.ts

@@ -1,6 +1,56 @@
-import type { NuxtLinkProps } from '#app';
+import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
 import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../types/html';
-export interface LinkProps extends Omit<NuxtLinkProps, 'custom'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: RouteLocationRaw;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: NuxtLinkProps['to'];
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
+    /**
+     * A class to apply to links that have been prefetched.
+     */
+    prefetchedClass?: string;
+    /**
+     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+     */
+    prefetch?: boolean;
+    /**
+     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+     */
+    prefetchOn?: 'visibility' | 'interaction' | Partial<{
+        visibility: boolean;
+        interaction: boolean;
+    }>;
+    /**
+     * Escape hatch to disable `prefetch` attribute.
+     */
+    noPrefetch?: boolean;
+    /**
+     * An option to either add or remove trailing slashes in the `href` for this specific link.
+     * Overrides the global `trailingSlash` option if provided.
+     */
+    trailingSlash?: 'append' | 'remove';
+}
+export interface LinkProps extends NuxtLinkProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
      * The element or component this component should render as when not a link.
      * @defaultValue 'button'

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

@@ -1,6 +1,56 @@
-import type { NuxtLinkProps } from '#app';
+import type { RouterLinkProps, RouteLocationRaw } from 'vue-router';
 import type { ButtonHTMLAttributes, AnchorHTMLAttributes } from '../types/html';
-export interface LinkProps extends Omit<NuxtLinkProps, 'custom'>, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: RouteLocationRaw;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: NuxtLinkProps['to'];
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null;
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
+    /**
+     * A class to apply to links that have been prefetched.
+     */
+    prefetchedClass?: string;
+    /**
+     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+     */
+    prefetch?: boolean;
+    /**
+     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+     */
+    prefetchOn?: 'visibility' | 'interaction' | Partial<{
+        visibility: boolean;
+        interaction: boolean;
+    }>;
+    /**
+     * Escape hatch to disable `prefetch` attribute.
+     */
+    noPrefetch?: boolean;
+    /**
+     * An option to either add or remove trailing slashes in the `href` for this specific link.
+     * Overrides the global `trailingSlash` option if provided.
+     */
+    trailingSlash?: 'append' | 'remove';
+}
+export interface LinkProps extends NuxtLinkProps, /** @vue-ignore */ Omit<ButtonHTMLAttributes, 'type' | 'disabled'>, /** @vue-ignore */ Omit<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'type'> {
     /**
      * The element or component this component should render as when not a link.
      * @defaultValue 'button'

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/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/inertia/components/Link.d.vue.ts

@@ -27,6 +27,10 @@ export interface LinkProps extends Partial<Omit<InertiaLinkProps, 'href' | 'onCl
      * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
      */
     rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {}) | null;
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
     /**
      * Value passed to the attribute `aria-current` when the link is exact active.
      *
@@ -61,8 +65,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkPr
     as: any;
     type: "reset" | "submit" | "button";
     active: boolean;
-    activeClass: string;
-    inactiveClass: string;
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
     isAction: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/inertia/components/Link.vue

@@ -11,22 +11,24 @@ import { usePage } from "@inertiajs/vue3";
 import { hasProtocol } from "ufo";
 import { useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
-import B24LinkBase from "./../../components/LinkBase.vue";
+import { mergeClasses } from "../../utils";
+import B24LinkBase from "../../components/LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "button" },
-  activeClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false },
   to: { type: String, required: false },
   href: { type: String, required: false },
   external: { type: Boolean, required: false },
   target: { type: [String, Object, null], required: false },
   rel: { type: [String, Object, null], required: false },
-  ariaCurrentValue: { type: String, required: false },
+  noRel: { type: Boolean, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
   type: { type: null, required: false, default: "button" },
   disabled: { type: Boolean, required: false },
   active: { type: Boolean, required: false, default: void 0 },
   exact: { type: Boolean, required: false },
-  inactiveClass: { type: String, required: false, default: "" },
+  inactiveClass: { type: String, required: false },
   custom: { type: Boolean, required: false },
   isAction: { type: Boolean, required: false, default: false },
   raw: { type: Boolean, required: false },
@@ -61,14 +63,14 @@ const props = defineProps({
 defineSlots();
 const page = usePage();
 const appConfig = useAppConfig();
-const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class", "noRel"));
 const b24ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
     variants: {
       active: {
-        true: props.activeClass,
-        false: props.inactiveClass
+        true: mergeClasses(appConfig.b24ui?.link?.variants?.active?.true, props.activeClass),
+        false: mergeClasses(appConfig.b24ui?.link?.variants?.active?.false, props.inactiveClass)
       }
     }
   }, appConfig.b24ui?.link || {})
@@ -86,6 +88,19 @@ const isExternal = computed(() => {
   }
   return typeof href.value === "string" && hasProtocol(href.value, { acceptRelative: true });
 });
+const hasTarget = computed(() => !!props.target && props.target !== "_self");
+const rel = computed(() => {
+  if (props.noRel) {
+    return null;
+  }
+  if (props.rel !== void 0) {
+    return props.rel || null;
+  }
+  if (isExternal.value || hasTarget.value) {
+    return "noopener noreferrer";
+  }
+  return null;
+});
 const isLinkActive = computed(() => {
   if (props.active !== void 0) {
     return props.active;
@@ -125,6 +140,8 @@ const linkClass = computed(() => {
   type,
   disabled,
   href,
+  rel,
+  target,
   active: isLinkActive,
   isExternal
 }"
@@ -139,6 +156,8 @@ const linkClass = computed(() => {
   type,
   disabled,
   href,
+  rel,
+  target,
   isExternal
 }"
     :class="linkClass"