@bitrix24/b24ui-nuxt 0.6.8 → 0.7.0

package/dist/runtime/components/NavigationMenu.vue

@@ -4,8 +4,9 @@ import theme from "#build/b24ui/navigation-menu";
 
 <script setup>
 import { computed, toRef } from "vue";
-import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, useForwardPropsEmits } from "reka-ui";
-import { createReusableTemplate } from "@vueuse/core";
+import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { defu } from "defu";
+import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { get, isArrayOfArray } from "../utils";
 import { tv } from "../utils/tv";
@@ -15,7 +16,8 @@ import B24LinkBase from "./LinkBase.vue";
 import B24Link from "./Link.vue";
 import B24Avatar from "./Avatar.vue";
 import B24Badge from "./Badge.vue";
-import B24Collapsible from "./Collapsible.vue";
+import B24Popover from "./Popover.vue";
+import B24Tooltip from "./Tooltip.vue";
 const props = defineProps({
   as: { type: null, required: false },
   trailingIcon: { type: [Function, Object], required: false },
@@ -25,6 +27,8 @@ const props = defineProps({
   variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
   collapsed: { type: Boolean, required: false },
+  tooltip: { type: [Boolean, Object], required: false },
+  popover: { type: [Boolean, Object], required: false },
   highlight: { type: Boolean, required: false },
   highlightColor: { type: null, required: false },
   content: { type: Object, required: false },
@@ -40,7 +44,10 @@ const props = defineProps({
   disableHoverTrigger: { type: Boolean, required: false },
   skipDelayDuration: { type: Number, required: false },
   disablePointerLeaveClose: { type: Boolean, required: false },
-  unmountOnHide: { type: Boolean, required: false, default: true }
+  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"]);
 const slots = defineSlots();
@@ -57,7 +64,10 @@ const rootProps = useForwardPropsEmits(computed(() => ({
   disablePointerLeaveClose: props.disablePointerLeaveClose,
   unmountOnHide: props.unmountOnHide
 })), emits);
+const accordionProps = useForwardPropsEmits(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
 const contentProps = toRef(() => props.content);
+const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
+const popoverProps = toRef(() => defu(typeof props.popover === "boolean" ? {} : props.popover, { mode: "hover", content: { side: "right", align: "start", alignOffset: 2 } }));
 const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
 const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
@@ -75,7 +85,7 @@ const getLabel = (item) => {
 };
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navigationMenu || {} })({
   orientation: props.orientation,
-  contentOrientation: props.contentOrientation,
+  contentOrientation: props.orientation === "vertical" ? void 0 : props.contentOrientation,
   collapsed: props.collapsed,
   color: props.color,
   variant: props.variant,
@@ -85,6 +95,15 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.navigat
 const lists = computed(
   () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
 );
+function getAccordionDefaultValue(list, level = 0) {
+  const indexes = list.reduce((acc, item, index) => {
+    if (item.defaultOpen || item.open) {
+      acc.push(item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`));
+    }
+    return acc;
+  }, []);
+  return props.type === "single" ? indexes[0] : indexes;
+}
 </script>
 
 <template>
@@ -95,14 +114,14 @@ const lists = computed(
           <Component
             :is="item.icon"
             v-if="item.icon"
-            :class="b24ui.linkLeadingIcon({ class: props.b24ui?.linkLeadingIcon, active, disabled: !!item.disabled })"
+            :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
           />
-          <B24Avatar v-else-if="item.avatar" :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: props.b24ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+          <B24Avatar v-else-if="item.avatar" :size="item.b24ui?.linkLeadingAvatarSize || props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
         </slot>
 
         <span
           v-if="(!collapsed || orientation !== 'vertical') && (getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
-          :class="b24ui.linkLabel({ class: props.b24ui?.linkLabel, active })"
+          :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel], active })"
         >
           <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
             {{ getLabel(item) }}
@@ -111,21 +130,27 @@ const lists = computed(
           <Component
             :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
             v-if="item.target === '_blank' && externalIcon !== false"
-            :class="b24ui.linkLabelExternalIcon({ class: props.b24ui?.linkLabelExternalIcon, active })"
+            :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, item.b24ui?.linkLabelExternalIcon], active })"
           />
         </span>
       </span>
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || 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'])" :class="b24ui.linkTrailing({ class: props.b24ui?.linkTrailing })">
+      <component
+        :is="orientation === 'vertical' && item.children?.length && !collapsed ? AccordionTrigger : 'span'"
+        v-if="(!collapsed || orientation !== 'vertical') && (item.badge || 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'])"
+        :class="b24ui.linkTrailing({ class: [props.b24ui?.linkTrailing, item.b24ui?.linkTrailing] })"
+      >
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <Component
             :is="item.trailingIcon || trailingIcon || icons.chevronDown"
             v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length"
-            :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
+            as="span"
+            :class="b24ui.linkTrailingIcon({ class: [props.b24ui?.linkTrailingIcon, item.b24ui?.linkTrailingIcon], active })"
+            @click.stop.prevent
           />
           <Component
             :is="item.trailingIcon"
             v-else-if="item.trailingIcon"
-            :class="b24ui.linkTrailingIcon({ class: props.b24ui?.linkTrailingIcon, active })"
+            :class="b24ui.linkTrailingIcon({ class: [props.b24ui?.linkTrailingIcon, item.b24ui?.linkTrailingIcon], active })"
           />
 
           <B24Badge
@@ -133,36 +158,124 @@ const lists = computed(
             color="danger"
             depth="dark"
             :use-fill="true"
-            :size="props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()"
+            :size="item.b24ui?.linkTrailingBadgeSize || props.b24ui?.linkTrailingBadgeSize || b24ui.linkTrailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="b24ui.linkTrailingBadge({ class: props.b24ui?.linkTrailingBadge })"
+            :class="b24ui.linkTrailingBadge({ class: [props.b24ui?.linkTrailingBadge, item.b24ui?.linkTrailingBadge] })"
           />
         </slot>
-      </span>
+      </component>
     </slot>
   </DefineLinkTemplate>
 
   <DefineItemTemplate v-slot="{ item, index, level }">
     <component
-      :is="orientation === 'vertical' && item.children?.length && !collapsed ? B24Collapsible : NavigationMenuItem"
+      :is="orientation === 'vertical' && !collapsed ? AccordionItem : NavigationMenuItem"
       as="li"
-      :value="item.value || String(index)"
-      :default-open="item.defaultOpen"
-      :unmount-on-hide="orientation === 'vertical' && item.children?.length && !collapsed ? unmountOnHide : void 0"
-      :open="item.open"
+      :value="item.value || ((level || 0) > 0 ? `item-${level}-${index}` : `item-${index}`)"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="b24ui.label({ class: props.b24ui?.label })">
+      <div
+        v-if="orientation === 'vertical' && item.type === 'label' && !collapsed"
+        :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label, item.class] })"
+      >
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <B24Link v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed ? {} : pickLinkProps(item)" custom>
+      <B24Link
+        v-else-if="item.type !== 'label'"
+        v-slot="{ active, ...slotProps }"
+        v-bind="orientation === 'vertical' && item.children?.length && !collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)"
+        custom
+      >
         <component
-          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
+          :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : orientation === 'vertical' && item.children?.length && !collapsed && !slotProps.href ? AccordionTrigger : NavigationMenuLink"
           as-child
           :active="active || item.active"
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <B24LinkBase v-bind="slotProps" :class="b24ui.link({ class: [props.b24ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || (level || 0) > 0 })">
+          <B24Popover
+            v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)"
+            v-bind="{ ...popoverProps, ...typeof item.popover === 'boolean' ? {} : item.popover || {} }"
+            :b24ui="{ content: b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] }) }"
+          >
+            <B24LinkBase
+              v-bind="slotProps"
+              :class="b24ui.link({
+  class: [props.b24ui?.link, item.b24ui?.link, item.class],
+  active: active || item.active,
+  disabled: !!item.disabled,
+  level: (level || 0) > 0
+})"
+            >
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </B24LinkBase>
+
+            <template #content>
+              <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active || item.active" :index="index">
+                <ul :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
+                  <li :class="b24ui.childLabel({ class: [props.b24ui?.childLabel, item.b24ui?.childLabel] })">
+                    {{ getLabel(item) }}
+                  </li>
+                  <li
+                    v-for="(childItem, childIndex) in item.children"
+                    :key="childIndex"
+                    :class="b24ui.childItem({ class: [props.b24ui?.childItem, item.b24ui?.childItem] })"
+                  >
+                    <B24Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+                      <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
+                        <B24LinkBase
+                          v-bind="childSlotProps"
+                          :class="b24ui.childLink({ class: [props.b24ui?.childLink, item.b24ui?.childLink, childItem.class], active: childActive })"
+                        >
+                          <Component
+                            :is="childItem.icon"
+                            v-if="childItem.icon"
+                            :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
+                          />
+
+                          <span :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
+                            {{ getLabel(childItem) }}
+
+                            <Component
+                              :is="typeof externalIcon === 'string' ? externalIcon : icons.external"
+                              v-if="childItem.target === '_blank' && externalIcon !== false"
+                              :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
+                            />
+                          </span>
+                        </B24LinkBase>
+                      </NavigationMenuLink>
+                    </B24Link>
+                  </li>
+                </ul>
+              </slot>
+            </template>
+          </B24Popover>
+          <B24Tooltip
+            v-else-if="orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)"
+            :text="get(item, props.labelKey)"
+            v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }"
+          >
+            <B24LinkBase
+              v-bind="slotProps"
+              :class="b24ui.link({
+  class: [props.b24ui?.link, item.b24ui?.link, item.class],
+  active: active || item.active,
+  disabled: !!item.disabled,
+  level: (level || 0) > 0
+})"
+            >
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </B24LinkBase>
+          </B24Tooltip>
+          <B24LinkBase
+            v-else
+            v-bind="slotProps"
+            :class="b24ui.link({
+  class: [props.b24ui?.link, item.b24ui?.link, item.class],
+  active: active || item.active,
+  disabled: !!item.disabled,
+  level: orientation === 'horizontal' || (level || 0) > 0
+})"
+          >
             <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
           </B24LinkBase>
         </component>
@@ -171,31 +284,42 @@ const lists = computed(
           v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
           v-bind="contentProps"
           :data-viewport="item.viewportRtl ? 'rtl' : 'ltr'"
-          :class="b24ui.content({ class: props.b24ui?.content })"
+          :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
         >
-          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
-            <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="b24ui.childItem({ class: props.b24ui?.childItem })">
-                <B24Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
+          <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active || item.active" :index="index">
+            <ul :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
+              <li
+                v-for="(childItem, childIndex) in item.children"
+                :key="childIndex"
+                :class="b24ui.childItem({ class: [props.b24ui?.childItem, item.b24ui?.childItem] })"
+              >
+                <B24Link
+                  v-slot="{ active: childActive, ...childSlotProps }"
+                  v-bind="pickLinkProps(childItem)"
+                  custom
+                >
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <B24LinkBase v-bind="childSlotProps" :class="b24ui.childLink({ class: [props.b24ui?.childLink, childItem.class], active: childActive })">
+                    <B24LinkBase
+                      v-bind="childSlotProps"
+                      :class="b24ui.childLink({ class: [props.b24ui?.childLink, childItem.childLink, childItem.class], active: childActive })"
+                    >
                       <Component
                         :is="childItem.icon"
                         v-if="childItem.icon"
-                        :class="b24ui.childLinkIcon({ class: props.b24ui?.childLinkIcon, active: childActive })"
+                        :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                       />
 
-                      <div :class="b24ui.childLinkWrapper({ class: props.b24ui?.childLinkWrapper })">
-                        <p :class="b24ui.childLinkLabel({ class: props.b24ui?.childLinkLabel, active: childActive })">
+                      <div :class="b24ui.childLinkWrapper({ class: [props.b24ui?.childLinkWrapper, item.b24ui?.childLinkWrapper] })">
+                        <p :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
                           {{ getLabel(childItem) }}
 
                           <Component
                             :is="typeof externalIcon === 'string' ? externalIcon : icons.external"
                             v-if="childItem.target === '_blank' && externalIcon !== false"
-                            :class="b24ui.childLinkLabelExternalIcon({ class: props.b24ui?.childLinkLabelExternalIcon, active: childActive })"
+                            :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
                           />
                         </p>
-                        <p v-if="childItem.description" :class="b24ui.childLinkDescription({ class: props.b24ui?.childLinkDescription, active: childActive })">
+                        <p v-if="childItem.description" :class="b24ui.childLinkDescription({ class: [props.b24ui?.childLinkDescription, item.b24ui?.childLinkDescription], active: childActive })">
                           {{ childItem.description }}
                         </p>
                       </div>
@@ -208,39 +332,57 @@ const lists = computed(
         </NavigationMenuContent>
       </B24Link>
 
-      <template v-if="orientation === 'vertical' && item.children?.length && !collapsed" #content>
-        <ul :class="b24ui.childList({ class: props.b24ui?.childList })">
+      <AccordionContent
+        v-if="orientation === 'vertical' && item.children?.length && !collapsed"
+        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
+      >
+        <AccordionRoot
+          v-bind="{
+  ...accordionProps,
+  defaultValue: getAccordionDefaultValue(item.children, (level || 0) + 1)
+}"
+          as="ul"
+          :class="b24ui.childList({ class: props.b24ui?.childList })"
+        >
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
             :key="childIndex"
             :item="childItem"
             :index="childIndex"
             :level="(level || 0) + 1"
-            :class="b24ui.childItem({ class: props.b24ui?.childItem })"
+            :class="b24ui.childItem({ class: [props.b24ui?.childItem, childItem.b24ui?.childItem] })"
           />
-        </ul>
-      </template>
+        </AccordionRoot>
+      </AccordionContent>
     </component>
   </DefineItemTemplate>
 
   <NavigationMenuRoot
     v-bind="rootProps"
     :data-collapsed="collapsed"
-    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     data-slot="section"
   >
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
-      <NavigationMenuList :class="b24ui.list({ class: props.b24ui?.list })">
+      <component
+        v-bind="orientation === 'vertical' && !collapsed ? {
+  ...accordionProps,
+  defaultValue: getAccordionDefaultValue(list)
+} : {}"
+        :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
+        as="ul"
+        :class="b24ui.list({ class: props.b24ui?.list })"
+      >
         <ReuseItemTemplate
           v-for="(item, index) in list"
           :key="`list-${listIndex}-${index}`"
           :item="item"
           :index="index"
-          :class="b24ui.item({ class: props.b24ui?.item })"
+          :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })"
         />
-      </NavigationMenuList>
+      </component>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="b24ui.separator({ class: props.b24ui?.separator })" />
     </template>

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

@@ -1,15 +1,15 @@
-import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui';
+import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/navigation-menu';
-import type { AvatarProps, BadgeProps, LinkProps, IconComponent } from '../types';
+import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps, IconComponent } from '../types';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'b24ui'> {
     /** Description is only used when `orientation` is `horizontal`. */
     description?: string;
     [key: string]: any;
 }
-export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
+export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
     label?: string;
     /**
      * @IconComponent
@@ -18,30 +18,49 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.
-     * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
+     * `{ size: 'sm', color: 'danger', depth: 'dark' }`{lang="ts"}
      */
     badge?: string | number | BadgeProps;
+    /**
+     * Display a tooltip on the item when the menu is collapsed with the label of the item.
+     * This has priority over the global `tooltip` prop.
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * Display a popover on the item when the menu is collapsed with the children list.
+     * This has priority over the global `popover` prop.
+     */
+    popover?: boolean | PopoverProps;
     /**
      * @IconComponent
      */
     trailingIcon?: IconComponent;
     /**
      * The type of the item.
-     * The `label` type only works on `vertical` orientation.
+     * The `label` type is only displayed in `vertical` orientation.
+     * The `trigger` type is used to force the item to be collapsible when its a link in `vertical` orientation.
      * @defaultValue 'link'
      */
-    type?: 'label' | 'link';
+    type?: 'label' | 'trigger' | 'link';
     slot?: string;
+    /**
+     * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI.
+     * @defaultValue `item-${index}`
+     */
     value?: string;
     children?: NavigationMenuChildItem[];
     /**
      * With orientation=`horizontal` if `true` it will position the dropdown menu correctly
      */
     viewportRtl?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
     onSelect?(e: Event): void;
+    class?: any;
+    b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
     [key: string]: any;
 }
-export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {
+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'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -80,6 +99,18 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * @defaultValue false
      */
     collapsed?: boolean;
+    /**
+     * Display a tooltip on the items when the menu is collapsed with the label of the item.
+     * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts"}
+     * @defaultValue false
+     */
+    tooltip?: boolean | TooltipProps;
+    /**
+     * Display a popover on the items when the menu is collapsed with the children list.
+     * `{ mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }`{lang="ts"}
+     * @defaultValue false
+     */
+    popover?: boolean | PopoverProps;
     /** Display a line next to the active item. */
     highlight?: boolean;
     /**

package/dist/runtime/components/OverlayProvider.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { computed } from "vue";
 import { useOverlay } from "../composables/useOverlay";
-const { overlays, unMount, close } = useOverlay();
+const { overlays, unmount, close } = useOverlay();
 const mountedOverlays = computed(() => overlays.filter((overlay) => overlay.isMounted));
 const onAfterLeave = (id) => {
   close(id);
-  unMount(id);
+  unmount(id);
 };
 const onClose = (id, value) => {
   close(id, value);

package/dist/runtime/components/Popover.vue

@@ -58,6 +58,10 @@ const Component = computed(() => props.mode === "hover" ? HoverCard : Popover);
       <slot :open="open" />
     </Component.Trigger>
 
+    <Component.Anchor v-if="'Anchor' in Component && !!slots.anchor" as-child>
+      <slot name="anchor" />
+    </Component.Anchor>
+
     <Component.Portal v-bind="portalProps">
       <Component.Content v-bind="contentProps" :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })" v-on="contentEvents">
         <slot name="content" />

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

@@ -41,6 +41,7 @@ export interface PopoverSlots {
         open: boolean;
     }): any;
     content(props?: {}): any;
+    anchor(props?: {}): any;
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
@@ -49,8 +50,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<PopoverPro
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
-    mode: "click" | "hover";
     portal: boolean | string | HTMLElement;
+    mode: "click" | "hover";
     dismissible: boolean;
     openDelay: number;
     closeDelay: number;

package/dist/runtime/components/Progress.vue

@@ -21,13 +21,14 @@ const props = defineProps({
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   getValueLabel: { type: Function, required: false },
+  getValueText: { type: Function, required: false },
   modelValue: { type: [Number, null], required: false, default: null }
 });
 const emits = defineEmits(["update:modelValue", "update:max"]);
 const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "getValueLabel", "modelValue"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "getValueLabel", "getValueText", "modelValue"), emits);
 const isIndeterminate = computed(() => rootProps.value.modelValue === null);
 const hasSteps = computed(() => Array.isArray(props.max));
 const realMax = computed(() => {
@@ -109,7 +110,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.progres
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <div v-if="!isIndeterminate && (status || !!slots.status)" :class="b24ui.status({ class: props.b24ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%

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

@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/progress';
 import type { ComponentConfig } from '../types/utils';
 type Progress = ComponentConfig<typeof theme, AppConfig, 'progress'>;
-export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'modelValue'> {
+export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'getValueText' | 'modelValue'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
@@ -61,8 +61,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ProgressPr
     "onUpdate:max"?: ((value: number) => any) | undefined;
 }>, {
     orientation: Progress["variants"]["orientation"];
-    inverted: boolean;
     modelValue: number | null;
+    inverted: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProgressSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/RadioGroup.vue

@@ -93,7 +93,7 @@ function onUpdate(value) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <fieldset :class="b24ui.fieldset({ class: props.b24ui?.fieldset })" v-bind="ariaAttrs">
@@ -102,25 +102,41 @@ function onUpdate(value) {
           {{ legend }}
         </slot>
       </legend>
-      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="b24ui.item({ class: props.b24ui?.item })">
-        <div :class="b24ui.container({ class: props.b24ui?.container })">
+      <component
+        :is="!variant || variant === 'list' ? 'div' : Label"
+        v-for="item in normalizedItems"
+        :key="item.value"
+        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
+      >
+        <div :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
           <RadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled"
-            :class="b24ui.base({ class: props.b24ui?.base, disabled: item.disabled })"
+            :class="b24ui.base({ class: [props.b24ui?.base, item.b24ui?.base], disabled: item.disabled })"
           >
-            <RadioGroupIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })" />
+            <RadioGroupIndicator :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
           </RadioGroupItem>
         </div>
 
-        <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-          <component :is="variant === 'list' ? Label : 'p'" :class="b24ui.label({ class: props.b24ui?.label })" :for="item.id">
+        <div
+          v-if="item.label || !!slots.label || (item.description || !!slots.description)"
+          :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })"
+        >
+          <component
+            :is="!variant || variant === 'list' ? Label : 'p'"
+            v-if="item.label || !!slots.label"
+            :for="item.id"
+            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
+          >
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
             </slot>
           </component>
-          <p v-if="item.description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+          <p
+            v-if="item.description || !!slots.description"
+            :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })"
+          >
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}
             </slot>

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

@@ -8,7 +8,9 @@ export type RadioGroupItem = {
     label?: string;
     description?: string;
     disabled?: boolean;
-    value?: string;
+    value?: RadioGroupValue;
+    class?: any;
+    b24ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>;
     [key: string]: any;
 } | RadioGroupValue;
 export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> extends Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {