<script>
import theme from "#build/b24ui/navigation-menu";
</script>

<script setup>
import { computed, toRef } from "vue";
import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from "reka-ui";
import { defu } from "defu";
import { reactivePick, createReusableTemplate } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { get, isArrayOfArray } from "../utils";
import { tv } from "../utils/tv";
import { pickLinkProps } from "../utils/link";
import icons from "../dictionary/icons";
import B24LinkBase from "./LinkBase.vue";
import B24Link from "./Link.vue";
import B24Avatar from "./Avatar.vue";
import B24Badge from "./Badge.vue";
import B24Chip from "./Chip.vue";
import B24Popover from "./Popover.vue";
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 },
  orientation: { type: null, required: false, default: "horizontal" },
  collapsed: { type: Boolean, required: false },
  tooltip: { type: [Boolean, Object], required: false },
  popover: { type: [Boolean, Object], required: false },
  content: { type: Object, required: false },
  valueKey: { type: null, required: false, default: "value" },
  labelKey: { type: null, required: false, default: "label" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  delayDuration: { type: Number, required: false, default: 0 },
  disableClickTrigger: { type: Boolean, required: false },
  disableHoverTrigger: { type: Boolean, required: false },
  skipDelayDuration: { type: Number, required: false },
  disablePointerLeaveClose: { type: Boolean, required: false },
  unmountOnHide: { type: Boolean, required: false, default: true },
  disabled: { type: Boolean, required: false },
  collapsible: { type: Boolean, required: false, default: true }
});
const emits = defineEmits(["update:modelValue"]);
const slots = defineSlots();
const props = useComponentProps("navigationMenu", _props);
const appConfig = useAppConfig();
const rootProps = useForwardProps(computed(() => ({
  as: props.as,
  delayDuration: props.delayDuration,
  skipDelayDuration: props.skipDelayDuration,
  orientation: props.orientation,
  disableClickTrigger: props.disableClickTrigger,
  disableHoverTrigger: props.disableHoverTrigger,
  disablePointerLeaveClose: props.disablePointerLeaveClose,
  unmountOnHide: props.unmountOnHide
})), emits);
const accordionProps = useForwardProps(reactivePick(props, "collapsible", "disabled", "type", "unmountOnHide"), emits);
const contentProps = toRef(() => props.content);
const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { ...props.orientation === "vertical" && { delayDuration: 0, content: { side: "right" } } }));
const popoverProps = toRef(() => defu(typeof props.popover === "boolean" ? {} : props.popover, { arrow: true, mode: "hover", content: { side: "right", align: "center", alignOffset: 2 } }));
const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate();
const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
  props: {
    item: Object,
    index: Number,
    level: Number,
    listIndex: Number
  }
});
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.navigationMenu || {} })({
  orientation: props.orientation,
  collapsed: props.collapsed
}));
const lists = computed(
  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
);
const warnedGroupedChildren = /* @__PURE__ */ new WeakSet();
function getChildren(item) {
  const children = item.children;
  if (!children?.length || !isArrayOfArray(children)) {
    return children ?? [];
  }
  if (import.meta.dev && !warnedGroupedChildren.has(item)) {
    warnedGroupedChildren.add(item);
    console.warn(
      `[B24NavigationMenu] \`children\` of "${item.label ?? "(unlabelled item)"}" is an array of arrays. Unlike \`items\`, \`children\` does not support groups \u2014 the nested arrays have been flattened and no separator is drawn. Pass a flat array to silence this.`
    );
  }
  return children.flat().filter((child) => child != null);
}
function getItemValue(item, index, level, listIndex) {
  const prefix = lists.value.length > 1 ? `group-${listIndex}-` : "";
  return get(item, props.valueKey) ?? (level > 0 ? `${prefix}item-${level}-${index}` : `${prefix}item-${index}`);
}
function getAccordionDefaultValue(list, level = 0, listIndex = 0) {
  const indexes = list.reduce((acc, item, index) => {
    if (item.defaultOpen || item.open) {
      acc.push(getItemValue(item, index, level, listIndex));
    }
    return acc;
  }, []);
  return props.type === "single" ? indexes[0] : indexes;
}
function onLinkTrailingClick(e, item) {
  if (!item.children?.length) {
    return;
  }
  if (props.orientation === "horizontal") {
    e.preventDefault();
  } else if (props.orientation === "vertical" && !props.collapsed) {
    e.preventDefault();
    e.stopPropagation();
  }
}
</script>

<template>
  <DefineLinkTemplate v-slot="{ item, active, index }">
    <slot :name="item.slot || 'item'" :item="item" :index="index" :active="active" :b24ui="b24ui">
      <span data-slot="linkLabelWrapper" :class="b24ui.linkLabelWrapper({ class: props.b24ui?.linkLabelWrapper, active })">
        <slot
          :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
          :item="item"
          :active="active"
          :index="index"
          :b24ui="b24ui"
        >
          <template v-if="props.orientation === 'vertical' && item.type !== 'label'">
            <B24Chip
              v-if="item.icon && item.chip"
              :size="item.b24ui?.linkLeadingChipSize || props.b24ui?.linkLeadingChipSize || b24ui.linkLeadingChipSize()"
              inset
              v-bind="typeof item.chip === 'object' ? item.chip : {}"
              data-slot="linkLeadingChip"
            >
              <Component
                :is="item.icon"
                data-slot="linkLeadingIcon"
                :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
              />
            </B24Chip>
            <Component
              :is="item.icon"
              v-else-if="item.icon"
              data-slot="linkLeadingIcon"
              :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
            />
            <B24Avatar
              v-else-if="item.avatar"
              :size="item.b24ui?.linkLeadingAvatarSize || props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
              v-bind="item.avatar"
              data-slot="linkLeadingAvatar"
              :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active, disabled: !!item.disabled })"
            />
          </template>
          <div
            v-if="item.hint && item.type !== 'label' && props.orientation === 'horizontal'"
            data-slot="linkLeadingHint"
            :class="b24ui.linkLeadingHint({ class: [props.b24ui?.linkLeadingHint, item.b24ui?.linkLeadingHint] })"
          >
            {{ item.hint }}
          </div>
          <B24Badge
            v-if="(item.badge || item.badge === 0) && item.type !== 'label'"
            color="air-primary-alert"
            :size="item.b24ui?.linkLeadingBadgeSize || props.b24ui?.linkLeadingBadgeSize || b24ui.linkLeadingBadgeSize()"
            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
            data-slot="linkLeadingBadge"
            :class="b24ui.linkLeadingBadge({ class: [props.b24ui?.linkLeadingBadge, item.b24ui?.linkLeadingBadge] })"
          />
        </slot>

        <span
          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 })"
        >
          <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
            {{ get(item, props.labelKey) }}
          </slot>
        </span>
        <Component
          :is="typeof props.externalIcon !== 'boolean' ? props.externalIcon : icons.external"
          v-if="item.target === '_blank' && props.externalIcon !== false"
          data-slot="linkLabelExternalIcon"
          :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, item.b24ui?.linkLabelExternalIcon], active })"
        />
      </span>

      <component
        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
        v-if="
  /* (item.badge || item.badge === 0) || */
  props.orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || props.orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']
"
        :as="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? 'span' : void 0"
        data-slot="linkTrailing"
        :class="b24ui.linkTrailing({ class: [props.b24ui?.linkTrailing, item.b24ui?.linkTrailing] })"
        @click="(e) => onLinkTrailingClick(e, item)"
      >
        <slot
          :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
          :item="item"
          :active="active"
          :index="index"
          :b24ui="b24ui"
        >
          <Component
            :is="item.trailingIcon || props.trailingIcon || icons.chevronDown"
            v-if="props.orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || props.orientation === 'vertical' && item.children?.length"
            data-slot="linkTrailingIcon"
            :class="b24ui.linkTrailingIcon({ class: [props.b24ui?.linkTrailingIcon, item.b24ui?.linkTrailingIcon], active })"
          />
          <Component
            :is="item.trailingIcon"
            v-else-if="item.trailingIcon"
            data-slot="linkTrailingIcon"
            :class="b24ui.linkTrailingIcon({ class: [props.b24ui?.linkTrailingIcon, item.b24ui?.linkTrailingIcon], active })"
          />
        </slot>
      </component>
    </slot>
  </DefineLinkTemplate>

  <DefineItemTemplate v-slot="{ item, index, level = 0, listIndex = 0 }">
    <component
      :is="props.orientation === 'vertical' && !props.collapsed ? AccordionItem : NavigationMenuItem"
      as="li"
      v-bind="props.orientation === 'vertical' && !props.collapsed ? { disabled: !!item.disabled } : {}"
      :value="getItemValue(item, index, level, listIndex)"
    >
      <div
        v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed"
        data-slot="label"
        :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="props.orientation === 'vertical' && item.children?.length && !props.collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)"
        custom
      >
        <component
          :is="props.orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : props.orientation === 'vertical' && item.children?.length && !props.collapsed && !slotProps.href ? AccordionTrigger : NavigationMenuLink"
          as-child
          :active="active || item.active"
          :disabled="item.disabled"
          @select="item.onSelect"
        >
          <B24Popover
            v-if="props.orientation === 'vertical' && props.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"
              data-slot="link"
              :class="b24ui.link({
  class: [props.b24ui?.link, item.b24ui?.link, item.class],
  active: active || item.active,
  disabled: !!item.disabled,
  level: level > 0
})"
            >
              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
            </B24LinkBase>

            <template #content="{ close }">
              <div data-slot="popoverWrapper" :class="b24ui.popoverWrapper({ class: props.b24ui?.popoverWrapper })">
                <slot
                  :name="item.slot ? `${item.slot}-content` : 'item-content'"
                  :item="item"
                  :active="active || item.active"
                  :index="index"
                  :b24ui="b24ui"
                  :close="close"
                >
                  <ul data-slot="childList" :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
                    <li data-slot="childLabel" :class="b24ui.childLabel({ class: [props.b24ui?.childLabel, item.b24ui?.childLabel] })">
                      {{ get(item, props.labelKey) }}
                    </li>
                    <li
                      v-for="(childItem, childIndex) in getChildren(item)"
                      :key="childIndex"
                      data-slot="childItem"
                      :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"
                            data-slot="childLink"
                            :class="b24ui.childLink({ class: [props.b24ui?.childLink, item.b24ui?.childLink, childItem.class], active: childActive })"
                          >
                            <B24Chip
                              v-if="childItem.icon && childItem.chip"
                              :size="childItem.b24ui?.linkLeadingChipSize || props.b24ui?.linkLeadingChipSize || b24ui.linkLeadingChipSize()"
                              inset
                              v-bind="typeof childItem.chip === 'object' ? childItem.chip : {}"
                              data-slot="linkLeadingChip"
                            >
                              <Component
                                :is="childItem.icon"
                                data-slot="childLinkIcon"
                                :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                              />
                            </B24Chip>
                            <Component
                              :is="childItem.icon"
                              v-else-if="childItem.icon"
                              data-slot="childLinkIcon"
                              :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                            />

                            <div
                              v-if="childItem.hint"
                              data-slot="childLinkHint"
                              :class="b24ui.childLinkHint({ class: [props.b24ui?.childLinkHint, item.b24ui?.childLinkHint] })"
                            >
                              {{ childItem.hint }}
                            </div>

                            <span data-slot="childLinkLabel" :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
                              {{ get(childItem, props.labelKey) }}
                            </span>

                            <Component
                              :is="typeof props.externalIcon === 'boolean' ? icons.external : props.externalIcon"
                              v-if="childItem.target === '_blank' && props.externalIcon !== false"
                              data-slot="childLinkLabelExternalIcon"
                              :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
                            />
                          </B24LinkBase>
                        </NavigationMenuLink>
                      </B24Link>
                    </li>
                  </ul>
                </slot>
              </div>
            </template>
          </B24Popover>
          <B24Tooltip
            v-else-if="props.orientation === 'vertical' && props.collapsed && (!!props.tooltip || !!item.tooltip) || props.orientation === 'horizontal' && !!item.tooltip"
            :text="get(item, props.labelKey)"
            v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }"
          >
            <B24LinkBase
              v-bind="slotProps"
              data-slot="link"
              :class="b24ui.link({
  class: [props.b24ui?.link, item.b24ui?.link, item.class],
  active: active || item.active,
  disabled: !!item.disabled,
  level: level > 0
})"
            >
              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
            </B24LinkBase>
          </B24Tooltip>
          <B24LinkBase
            v-else
            v-bind="slotProps"
            data-slot="link"
            :class="b24ui.link({
  class: [props.b24ui?.link, item.b24ui?.link, item.class],
  active: active || item.active,
  disabled: !!item.disabled,
  level: props.orientation === 'horizontal' || level > 0
})"
          >
            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
          </B24LinkBase>
        </component>

        <NavigationMenuContent
          v-if="props.orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])"
          v-bind="contentProps"
          :data-viewport="item.viewportRtl ? 'rtl' : 'ltr'"
          data-slot="content"
          :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
        >
          <slot
            :name="item.slot ? `${item.slot}-content` : 'item-content'"
            :item="item"
            :active="active || item.active"
            :index="index"
            :b24ui="b24ui"
          >
            <ul data-slot="childList" :class="b24ui.childList({ class: [props.b24ui?.childList, item.b24ui?.childList] })">
              <li
                v-for="(childItem, childIndex) in getChildren(item)"
                :key="childIndex"
                data-slot="childItem"
                :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"
                      data-slot="childLink"
                      :class="b24ui.childLink({ class: [props.b24ui?.childLink, childItem.childLink, childItem.class], active: childActive })"
                    >
                      <B24Chip
                        v-if="childItem.icon && childItem.chip"
                        :size="childItem.b24ui?.linkLeadingChipSize || props.b24ui?.linkLeadingChipSize || b24ui.linkLeadingChipSize()"
                        inset
                        v-bind="typeof childItem.chip === 'object' ? childItem.chip : {}"
                        data-slot="linkLeadingChip"
                      >
                        <Component
                          :is="childItem.icon"
                          data-slot="childLinkIcon"
                          :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                        />
                      </B24Chip>
                      <Component
                        :is="childItem.icon"
                        v-else-if="childItem.icon"
                        data-slot="childLinkIcon"
                        :class="b24ui.childLinkIcon({ class: [props.b24ui?.childLinkIcon, item.b24ui?.childLinkIcon], active: childActive })"
                      />

                      <div
                        v-if="childItem.hint"
                        data-slot="childLinkHint"
                        :class="b24ui.childLinkHint({ class: [props.b24ui?.childLinkHint, item.b24ui?.childLinkHint] })"
                      >
                        {{ childItem.hint }}
                      </div>
                      <div data-slot="childLinkWrapper" :class="b24ui.childLinkWrapper({ class: [props.b24ui?.childLinkWrapper, item.b24ui?.childLinkWrapper] })">
                        <p data-slot="childLinkLabel" :class="b24ui.childLinkLabel({ class: [props.b24ui?.childLinkLabel, item.b24ui?.childLinkLabel], active: childActive })">
                          {{ get(childItem, props.labelKey) }}
                        </p>
                        <B24Badge
                          v-if="childItem.badge !== void 0"
                          color="air-primary-alert"
                          :size="item.b24ui?.childLinkBadgeSize || props.b24ui?.childLinkBadgeSize || b24ui.childLinkBadgeSize()"
                          v-bind="typeof childItem.badge === 'string' || typeof childItem.badge === 'number' ? { label: childItem.badge } : childItem.badge"
                          data-slot="childLinkBadge"
                          :class="b24ui.childLinkBadge({ class: [props.b24ui?.childLinkBadge, item.b24ui?.childLinkBadge] })"
                        />
                      </div>

                      <Component
                        :is="typeof props.externalIcon === 'boolean' ? icons.external : props.externalIcon"
                        v-if="childItem.target === '_blank' && props.externalIcon !== false"
                        data-slot="childLinkLabelExternalIcon"
                        :class="b24ui.childLinkLabelExternalIcon({ class: [props.b24ui?.childLinkLabelExternalIcon, item.b24ui?.childLinkLabelExternalIcon], active: childActive })"
                      />
                    </B24LinkBase>
                  </NavigationMenuLink>
                </B24Link>
              </li>
            </ul>
          </slot>
        </NavigationMenuContent>
      </B24Link>

      <AccordionContent
        v-if="props.orientation === 'vertical' && item.children?.length && !props.collapsed"
        data-slot="content"
        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
      >
        <AccordionRoot
          v-bind="{
  ...accordionProps,
  defaultValue: getAccordionDefaultValue(getChildren(item), level + 1, listIndex)
}"
          as="ul"
          data-slot="childList"
          :class="b24ui.childList({ class: props.b24ui?.childList })"
        >
          <ReuseItemTemplate
            v-for="(childItem, childIndex) in getChildren(item)"
            :key="childIndex"
            :item="childItem"
            :index="childIndex"
            :level="level + 1"
            :list-index="listIndex"
            data-slot="childItem"
            :class="b24ui.childItem({ class: [props.b24ui?.childItem, childItem.b24ui?.childItem] })"
          />
        </AccordionRoot>
      </AccordionContent>
    </component>
  </DefineItemTemplate>

  <NavigationMenuRoot
    v-bind="{
  ...rootProps,
  ...props.orientation === 'horizontal' ? {
    modelValue: props.modelValue,
    defaultValue: props.defaultValue
  } : {},
  ...$attrs
}"
    :data-collapsed="props.collapsed"
    data-component="section"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
  >
    <slot name="list-leading" />

    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
      <component
        v-bind="props.orientation === 'vertical' && !props.collapsed ? {
  ...accordionProps,
  modelValue: props.modelValue,
  defaultValue: props.defaultValue ?? getAccordionDefaultValue(list, 0, listIndex)
} : {}"
        :is="props.orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
        as="ul"
        data-slot="list"
        :class="b24ui.list({ class: props.b24ui?.list })"
      >
        <ReuseItemTemplate
          v-for="(item, index) in list"
          :key="`list-${listIndex}-${index}`"
          :item="item"
          :index="index"
          :list-index="listIndex"
          data-slot="item"
          :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })"
        />
      </component>

      <div v-if="props.orientation === 'vertical' && listIndex < lists.length - 1" data-slot="separator" :class="b24ui.separator({ class: props.b24ui?.separator })" />
    </template>

    <slot name="list-trailing" />

    <div v-if="props.orientation === 'horizontal'" data-slot="viewportWrapper" :class="b24ui.viewportWrapper({ class: props.b24ui?.viewportWrapper })">
      <NavigationMenuViewport data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })" />
    </div>
  </NavigationMenuRoot>
</template>
