arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 19:30:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(NavigationMenu): add tooltip and popover props

Browse Source 
Resolves #4186
This commit is contained in:
Benjamin Canac
2025-05-21 18:39:02 +02:00
parent 0634a756a4
commit f2682fd2ae
9 changed files with 393 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/3.components/input-menu.md
View File

@@ -612,7 +612,7 @@ props:
--- ---
:: ::
### With icons in items ### With icon in items
You can use the `icon` property to display an [Icon](/components/icon) inside the items. You can use the `icon` property to display an [Icon](/components/icon) inside the items.

166
docs/content/3.components/navigation-menu.md
View File

@@ -32,7 +32,7 @@ Use the `items` prop as an array of objects with the following properties:
- `onSelect?(e: Event): void`{lang="ts-type"} - `onSelect?(e: Event): void`{lang="ts-type"}
- `children?: NavigationMenuChildItem[]`{lang="ts-type"} - `children?: NavigationMenuChildItem[]`{lang="ts-type"}
- `class?: any`{lang="ts-type"} - `class?: any`{lang="ts-type"}
- `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"} - `ui?: { linkLeadingAvatarSize?: ClassNameValue, linkLeadingAvatar?: ClassNameValue, linkLeadingIcon?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkTrailing?: ClassNameValue, linkTrailingBadgeSize?: ClassNameValue, linkTrailingBadge?: ClassNameValue, linkTrailingIcon?: ClassNameValue, label?: ClassNameValue, link?: ClassNameValue, content?: ClassNameValue, childList?: ClassNameValue, childLabel?: ClassNameValue, childItem?: ClassNameValue, childLink?: ClassNameValue, childLinkIcon?: ClassNameValue, childLinkWrapper?: ClassNameValue, childLinkLabel?: ClassNameValue, childLinkLabelExternalIcon?: ClassNameValue, childLinkDescription?: ClassNameValue }`{lang="ts-type"}
You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc. You can pass any property from the [Link](/components/link#props) component such as `to`, `target`, etc.
@@ -144,7 +144,7 @@ Each item can take a `children` array of objects with the following properties t
Use the `orientation` prop to change the orientation of the NavigationMenu. Use the `orientation` prop to change the orientation of the NavigationMenu.
::note ::note
When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. When orientation is `vertical`, an [Accordion](/components/accordion) component is used to display each group. You can control the open state of each item using the `open` and `defaultOpen` properties and change the behavior using the [`collapsible`](/components/accordion#collapsible) and [`type`](/components/accordion#multiple) props.
:: ::
::component-code ::component-code
@@ -243,7 +243,11 @@ Groups will be spaced when orientation is `horizontal` and separated when orient
### Collapsed ### Collapsed
Use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example. In `vertical` orientation, use the `collapsed` prop to collapse the NavigationMenu, this can be useful in a sidebar for example.
::note
You can use the [`tooltip`](#with-tooltip-in-items) and [`popover`](#with-popover-in-items) props to display more information on the collapsed items.
::
::component-code ::component-code
--- ---
@@ -256,8 +260,17 @@ external:
- items - items
externalTypes: externalTypes:
- NavigationMenuItem[][] - NavigationMenuItem[][]
items:
tooltip:
- true
- false
popover:
- true
- false
props: props:
collapsed: true collapsed: true
tooltip: false
popover: false
orientation: 'vertical' orientation: 'vertical'
items: items:
- - label: Links - - label: Links
@@ -282,7 +295,6 @@ props:
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.' description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables - label: Composables
icon: i-lucide-database icon: i-lucide-database
open: false
children: children:
- label: defineShortcuts - label: defineShortcuts
icon: i-lucide-file-text icon: i-lucide-file-text
@@ -298,7 +310,6 @@ props:
to: /composables/use-toast to: /composables/use-toast
- label: Components - label: Components
icon: i-lucide-box icon: i-lucide-box
open: false
to: /components to: /components
active: true active: true
children: children:
@@ -878,9 +889,11 @@ You can inspect the DOM to see each item's content being rendered.
## Examples ## Examples
### With tooltips in items :badge{label="New" class="align-text-top"} ### With tooltip in items :badge{label="New" class="align-text-top"}
You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed. When orientation is `vertical` and the menu is `collapsed`, you can set the `tooltip` prop to `true` to display a [Tooltip](/components/tooltip) around items with their label but you can also use the `tooltip` property on each item to override the default tooltip.
You can pass any property from the [Tooltip](/components/tooltip) component globally or on each item.
::component-code ::component-code
--- ---
@@ -893,7 +906,12 @@ external:
- items - items
externalTypes: externalTypes:
- NavigationMenuItem[][] - NavigationMenuItem[][]
items:
tooltip:
- true
- false
props: props:
tooltip: true
collapsed: true collapsed: true
orientation: 'vertical' orientation: 'vertical'
items: items:
@@ -901,39 +919,24 @@ props:
type: 'label' type: 'label'
- label: Guide - label: Guide
icon: i-lucide-book-open icon: i-lucide-book-open
tooltip:
text: 'Guide'
children: children:
- label: Introduction - label: Introduction
description: Fully styled and customizable components for Nuxt. description: Fully styled and customizable components for Nuxt.
icon: i-lucide-house icon: i-lucide-house
tooltip:
text: 'Introduction'
- label: Installation - label: Installation
description: Learn how to install and configure Nuxt UI in your application. description: Learn how to install and configure Nuxt UI in your application.
icon: i-lucide-cloud-download icon: i-lucide-cloud-download
tooltip:
text: 'Installation'
- label: 'Icons' - label: 'Icons'
icon: 'i-lucide-smile' icon: 'i-lucide-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.' description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
tooltip:
text: 'Icons'
- label: 'Colors' - label: 'Colors'
icon: 'i-lucide-swatch-book' icon: 'i-lucide-swatch-book'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.' description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
tooltip:
text: 'Colors'
- label: 'Theme' - label: 'Theme'
icon: 'i-lucide-cog' icon: 'i-lucide-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.' description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
tooltip:
text: 'Theme'
- label: Composables - label: Composables
icon: i-lucide-database icon: i-lucide-database
tooltip:
text: 'Composables'
open: false
children: children:
- label: defineShortcuts - label: defineShortcuts
icon: i-lucide-file-text icon: i-lucide-file-text
@@ -949,11 +952,8 @@ props:
to: /composables/use-toast to: /composables/use-toast
- label: Components - label: Components
icon: i-lucide-box icon: i-lucide-box
tooltip:
text: 'Components'
to: /components to: /components
active: true active: true
open: false
children: children:
- label: Link - label: Link
icon: i-lucide-file-text icon: i-lucide-file-text
@@ -985,17 +985,126 @@ props:
to: https://github.com/nuxt/ui to: https://github.com/nuxt/ui
target: _blank target: _blank
tooltip: tooltip:
text: 'GitHub' text: 'Open on GitHub'
kbds: kbds:
- 3.8k - 3.8k
- label: Help - label: Help
icon: i-lucide-circle-help icon: i-lucide-circle-help
disabled: true disabled: true
tooltip:
text: 'Help'
--- ---
:: ::
### With popover in items :badge{label="Soon" class="align-text-top"}
When orientation is `vertical` and the menu is `collapsed`, you can set the `popover` prop to `true` to display a [Popover](/components/popover) around items with their children but you can also use the `popover` property on each item to override the default popover.
You can pass any property from the [Popover](/components/popover) component globally or on each item.
::component-code
---
collapse: true
ignore:
- items
- orientation
- class
external:
- items
externalTypes:
- NavigationMenuItem[][]
items:
popover:
- true
- false
props:
popover: true
collapsed: true
orientation: 'vertical'
items:
- - label: Links
type: 'label'
- label: Guide
icon: i-lucide-book-open
children:
- label: Introduction
description: Fully styled and customizable components for Nuxt.
icon: i-lucide-house
- label: Installation
description: Learn how to install and configure Nuxt UI in your application.
icon: i-lucide-cloud-download
- label: 'Icons'
icon: 'i-lucide-smile'
description: 'You have nothing to do, @nuxt/icon will handle it automatically.'
- label: 'Colors'
icon: 'i-lucide-swatch-book'
description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
- label: 'Theme'
icon: 'i-lucide-cog'
description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
- label: Composables
icon: i-lucide-database
popover:
mode: 'click'
children:
- label: defineShortcuts
icon: i-lucide-file-text
description: Define shortcuts for your application.
to: /composables/define-shortcuts
- label: useOverlay
icon: i-lucide-file-text
description: Display a modal/slideover within your application.
to: /composables/use-overlay
- label: useToast
icon: i-lucide-file-text
description: Display a toast within your application.
to: /composables/use-toast
- label: Components
icon: i-lucide-box
to: /components
active: true
children:
- label: Link
icon: i-lucide-file-text
description: Use NuxtLink with superpowers.
to: /components/link
- label: Modal
icon: i-lucide-file-text
description: Display a modal within your application.
to: /components/modal
- label: NavigationMenu
icon: i-lucide-file-text
description: Display a list of links.
to: /components/navigation-menu
- label: Pagination
icon: i-lucide-file-text
description: Display a list of pages.
to: /components/pagination
- label: Popover
icon: i-lucide-file-text
description: Display a non-modal dialog that floats around a trigger element.
to: /components/popover
- label: Progress
icon: i-lucide-file-text
description: Show a horizontal bar to indicate task progression.
to: /components/progress
- - label: GitHub
icon: i-simple-icons-github
badge: 3.8k
to: https://github.com/nuxt/ui
target: _blank
tooltip:
text: 'Open on GitHub'
kbds:
- 3.8k
- label: Help
icon: i-lucide-circle-help
disabled: true
---
::
::tip{to="#with-content-slot"}
You can use the `#content` slot to customize the content of the popover in the `vertical` orientation.
::
### Control active item ### Control active item
You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item. You can control the active item by using the `default-value` prop or the `v-model` directive with the index of the item.
@@ -1043,6 +1152,7 @@ Use the `#item-content` slot or the `slot` property (`#{{ item.slot }}-content`)
::component-example ::component-example
--- ---
collapse: true
name: 'navigation-menu-content-slot-example' name: 'navigation-menu-content-slot-example'
--- ---
:: ::

2
docs/content/3.components/select-menu.md
View File

@@ -655,7 +655,7 @@ props:
--- ---
:: ::
### With icons in items ### With icon in items
You can use the `icon` property to display an [Icon](/components/icon) inside the items. You can use the `icon` property to display an [Icon](/components/icon) inside the items.

2
docs/content/3.components/select.md
View File

@@ -607,7 +607,7 @@ props:
--- ---
:: ::
### With icons in items ### With icon in items
You can use the `icon` property to display an [Icon](/components/icon) inside the items. You can use the `icon` property to display an [Icon](/components/icon) inside the items.

29
playground/app/pages/components/navigation-menu.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
import theme from '#build/ui/navigation-menu' import theme from '#build/ui/navigation-menu'
const colors = Object.keys(theme.variants.color) const colors = Object.keys(theme.variants.color)
@@ -13,6 +14,9 @@ const orientation = ref('horizontal' as const)
const contentOrientation = ref('horizontal' as const) const contentOrientation = ref('horizontal' as const)
const highlight = ref(true) const highlight = ref(true)
const collapsed = ref(false) const collapsed = ref(false)
const tooltip = ref(false)
const popover = ref(false)
const arrow = ref(false)
const items = [ const items = [
[{ [{
@@ -22,9 +26,6 @@ const items = [
label: 'Documentation', label: 'Documentation',
icon: 'i-lucide-book-open', icon: 'i-lucide-book-open',
badge: 10, badge: 10,
tooltip: {
text: 'Documentation'
},
children: [{ children: [{
label: 'Introduction', label: 'Introduction',
description: 'Fully styled and customizable components for Nuxt.', description: 'Fully styled and customizable components for Nuxt.',
@@ -48,9 +49,6 @@ const items = [
to: '/components/navigation-menu', to: '/components/navigation-menu',
active: true, active: true,
defaultOpen: true, defaultOpen: true,
tooltip: {
text: 'Components'
},
children: [{ children: [{
label: 'Link', label: 'Link',
icon: 'i-lucide-link', icon: 'i-lucide-link',
@@ -87,19 +85,13 @@ const items = [
label: 'GitHub', label: 'GitHub',
icon: 'i-simple-icons-github', icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui', to: 'https://github.com/nuxt/ui',
target: '_blank', target: '_blank'
tooltip: {
text: 'GitHub'
}
}, { }, {
label: 'Help', label: 'Help',
icon: 'i-lucide-circle-help', icon: 'i-lucide-circle-help',
disabled: true, disabled: true
tooltip: {
text: 'Help'
}
}] }]
] ] satisfies NavigationMenuItem[][]
</script> </script>
<template> <template>
@@ -112,10 +104,15 @@ const items = [
<USwitch v-model="collapsed" label="Collapsed" /> <USwitch v-model="collapsed" label="Collapsed" />
<USwitch v-model="highlight" label="Highlight" /> <USwitch v-model="highlight" label="Highlight" />
<USelect v-model="highlightColor" :items="colors" placeholder="Highlight color" /> <USelect v-model="highlightColor" :items="colors" placeholder="Highlight color" />
<USwitch v-model="tooltip" label="Tooltip" />
<USwitch v-model="popover" label="Popover" />
<USwitch v-model="arrow" label="Arrow" />
</div> </div>
<UNavigationMenu <UNavigationMenu
arrow :arrow="arrow"
:tooltip="tooltip"
:popover="popover"
:collapsed="collapsed" :collapsed="collapsed"
:items="items" :items="items"
:color="color" :color="color"

76
src/runtime/components/NavigationMenu.vue
View File

@@ -3,7 +3,7 @@
import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui' import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
import theme from '#build/ui/navigation-menu' import theme from '#build/ui/navigation-menu'
import type { AvatarProps, BadgeProps, LinkProps, TooltipProps } from '../types' import type { AvatarProps, BadgeProps, LinkProps, PopoverProps, TooltipProps } from '../types'
import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils' import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils'
type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'> type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>
@@ -27,11 +27,15 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
*/ */
badge?: string | number | BadgeProps badge?: string | number | BadgeProps
/** /**
* Display a tooltip on the item. * Display a tooltip on the item when the menu is collapsed with the label of the item.
* Only works when `type` is `link`. * This has priority over the global `tooltip` prop.
* `{ content: { side: 'right' } }`{lang="ts-type"}
*/ */
tooltip?: TooltipProps 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
/** /**
* @IconifyIcon * @IconifyIcon
*/ */
@@ -53,7 +57,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
open?: boolean open?: boolean
onSelect?(e: Event): void onSelect?(e: Event): void
class?: any class?: any
ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'> ui?: 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 [key: string]: any
} }
@@ -96,6 +100,18 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
* @defaultValue false * @defaultValue false
*/ */
collapsed?: boolean 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-type"}
* @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-type"}
* @defaultValue false
*/
popover?: boolean | PopoverProps
/** Display a line next to the active item. */ /** Display a line next to the active item. */
highlight?: boolean highlight?: boolean
/** /**
@@ -146,6 +162,7 @@ export type NavigationMenuSlots<
<script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>"> <script setup lang="ts" generic="T extends ArrayOrNested<NavigationMenuItem>">
import { computed, toRef } from 'vue' import { computed, toRef } from 'vue'
import { NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, useForwardPropsEmits } from 'reka-ui' 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 { reactivePick, createReusableTemplate } from '@vueuse/core'
import { useAppConfig } from '#imports' import { useAppConfig } from '#imports'
import { get, isArrayOfArray } from '../utils' import { get, isArrayOfArray } from '../utils'
@@ -156,6 +173,7 @@ import ULink from './Link.vue'
import UAvatar from './Avatar.vue' import UAvatar from './Avatar.vue'
import UIcon from './Icon.vue' import UIcon from './Icon.vue'
import UBadge from './Badge.vue' import UBadge from './Badge.vue'
import UPopover from './Popover.vue'
import UTooltip from './Tooltip.vue' import UTooltip from './Tooltip.vue'
const props = withDefaults(defineProps<NavigationMenuProps<T>>(), { const props = withDefaults(defineProps<NavigationMenuProps<T>>(), {
@@ -187,6 +205,8 @@ const rootProps = useForwardPropsEmits(computed(() => ({
})), emits) })), emits)
const accordionProps = useForwardPropsEmits(reactivePick(props, 'collapsible', 'disabled', 'type', 'unmountOnHide'), emits) const accordionProps = useForwardPropsEmits(reactivePick(props, 'collapsible', 'disabled', 'type', 'unmountOnHide'), emits)
const contentProps = toRef(() => props.content) const contentProps = toRef(() => props.content)
const tooltipProps = toRef(() => defu(typeof props.tooltip === 'boolean' ? {} : props.tooltip, { delayDuration: 0, content: { side: 'right' } }) as TooltipProps)
const popoverProps = toRef(() => defu(typeof props.popover === 'boolean' ? {} : props.popover, { mode: 'hover', content: { side: 'right', align: 'start', alignOffset: 2 } }) as PopoverProps)
const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>() const [DefineLinkTemplate, ReuseLinkTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, active?: boolean }>()
const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: NavigationMenuItem, index: number, level?: number }>({
@@ -253,7 +273,7 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
<UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" /> <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
</span> </span>
<component :is="orientation === 'vertical' && item.children?.length ? AccordionTrigger : 'span'" v-if="(!collapsed || orientation !== 'vertical') && (item.badge || (orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent> <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') as keyof NavigationMenuSlots<T>])) || (orientation === 'vertical' && item.children?.length) || item.trailingIcon || !!slots[(item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>])" as="span" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })" @click.stop.prevent>
<slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index"> <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
<UBadge <UBadge
v-if="item.badge" v-if="item.badge"
@@ -273,22 +293,52 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
<DefineItemTemplate v-slot="{ item, index, level = 0 }"> <DefineItemTemplate v-slot="{ item, index, level = 0 }">
<component <component
:is="(orientation === 'vertical' && item.children?.length) ? AccordionItem : NavigationMenuItem" :is="(orientation === 'vertical' && !collapsed) ? AccordionItem : NavigationMenuItem"
as="li" as="li"
:value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)" :value="item.value || (level > 0 ? `item-${level}-${index}` : `item-${index}`)"
> >
<div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })"> <div v-if="orientation === 'vertical' && item.type === 'label' && !collapsed" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
<ReuseLinkTemplate :item="item" :index="index" /> <ReuseLinkTemplate :item="item" :index="index" />
</div> </div>
<ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom> <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
<component <component
:is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : ((orientation === 'vertical' && item.children?.length && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)" :is="(orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])) ? NavigationMenuTrigger : ((orientation === 'vertical' && item.children?.length && !collapsed && !(slotProps as any).href) ? AccordionTrigger : NavigationMenuLink)"
as-child as-child
:active="active" :active="active"
:disabled="item.disabled" :disabled="item.disabled"
@select="item.onSelect" @select="item.onSelect"
> >
<UTooltip v-if="!!item.tooltip && orientation === 'vertical' && collapsed" :content="{ side: 'right' }" v-bind="item.tooltip"> <UPopover v-if="orientation === 'vertical' && collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...(typeof item.popover === 'boolean' ? {} : item.popover || {}) }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active, disabled: !!item.disabled, level: level > 0 })">
<ReuseLinkTemplate :item="item" :active="active" :index="index" />
</ULinkBase>
<template #content>
<slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
<ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
<li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })">
{{ get(item, props.labelKey as string) }}
</li>
<li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
<ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
<NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
<ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
<UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
<span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
{{ get(childItem, props.labelKey as string) }}
<UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
</span>
</ULinkBase>
</NavigationMenuLink>
</ULink>
</li>
</ul>
</slot>
</template>
</UPopover>
<UTooltip v-else-if="orientation === 'vertical' && collapsed && (!!props.tooltip || !!item.tooltip)" :text="get(item, props.labelKey as string)" v-bind="{ ...tooltipProps, ...(typeof item.tooltip === 'boolean' ? {} : item.tooltip || {}) }">
<ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active, disabled: !!item.disabled, level: level > 0 })"> <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active, disabled: !!item.disabled, level: level > 0 })">
<ReuseLinkTemplate :item="item" :active="active" :index="index" /> <ReuseLinkTemplate :item="item" :active="active" :index="index" />
</ULinkBase> </ULinkBase>
@@ -346,11 +396,11 @@ function getAccordionDefaultValue(list: NavigationMenuItem[]) {
<template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`"> <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
<component <component
v-bind="orientation === 'vertical' ? { v-bind="orientation === 'vertical' && !collapsed ? {
...accordionProps, ...accordionProps,
defaultValue: getAccordionDefaultValue(list) defaultValue: getAccordionDefaultValue(list)
} : {}" } : {}"
:is="orientation === 'vertical' ? AccordionRoot : NavigationMenuList" :is="orientation === 'vertical' && !collapsed ? AccordionRoot : NavigationMenuList"
as="ul" as="ul"
:class="ui.list({ class: props.ui?.list })" :class="ui.list({ class: props.ui?.list })"
> >

51
src/theme/navigation-menu.ts
View File

@@ -16,14 +16,15 @@ export default (options: Required<ModuleOptions>) => ({
linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200', linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
linkLabel: 'truncate', linkLabel: 'truncate',
linkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed', linkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childList: '', childList: 'isolate',
childLabel: 'text-xs text-highlighted',
childItem: '', childItem: '',
childLink: 'group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start', childLink: 'group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
childLinkWrapper: 'flex flex-col items-start', childLinkWrapper: 'min-w-0',
childLinkIcon: 'size-5 shrink-0', childLinkIcon: 'size-5 shrink-0',
childLinkLabel: 'font-semibold text-sm relative inline-flex', childLinkLabel: 'truncate font-medium',
childLinkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed', childLinkLabelExternalIcon: 'inline-block size-3 align-top text-dimmed',
childLinkDescription: 'text-sm text-muted', childLinkDescription: 'text-muted',
separator: 'px-2 h-px bg-border', separator: 'px-2 h-px bg-border',
viewportWrapper: 'absolute top-full left-0 flex w-full', viewportWrapper: 'absolute top-full left-0 flex w-full',
viewport: 'relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]', viewport: 'relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]',
@@ -35,11 +36,11 @@ export default (options: Required<ModuleOptions>) => ({
color: { color: {
...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
link: `focus-visible:before:ring-${color}`, link: `focus-visible:before:ring-${color}`,
childLink: `focus-visible:outline-${color}` childLink: `focus-visible:before:ring-${color}`
}])), }])),
neutral: { neutral: {
link: 'focus-visible:before:ring-inverted', link: 'focus-visible:before:ring-inverted',
childLink: 'focus-visible:outline-inverted' childLink: 'focus-visible:before:ring-inverted'
} }
}, },
highlightColor: { highlightColor: {
@@ -57,12 +58,14 @@ export default (options: Required<ModuleOptions>) => ({
item: 'py-2', item: 'py-2',
link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0', link: 'px-2.5 py-1.5 before:inset-x-px before:inset-y-0',
childList: 'grid p-2', childList: 'grid p-2',
childLink: 'px-3 py-2 gap-2 before:inset-x-px before:inset-y-0',
content: 'absolute top-0 left-0 w-full' content: 'absolute top-0 left-0 w-full'
}, },
vertical: { vertical: {
root: 'flex-col', root: 'flex-col',
link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0', link: 'flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0',
content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden' childLabel: 'px-1.5 py-0.5',
childLink: 'p-1.5 gap-1.5 before:inset-y-px before:inset-x-0'
} }
}, },
contentOrientation: { contentOrientation: {
@@ -76,13 +79,13 @@ export default (options: Required<ModuleOptions>) => ({
}, },
active: { active: {
true: { true: {
childLink: 'bg-elevated text-highlighted', childLink: 'before:bg-elevated text-highlighted',
childLinkIcon: 'text-default' childLinkIcon: 'text-default'
}, },
false: { false: {
link: 'text-muted', link: 'text-muted',
linkLeadingIcon: 'text-dimmed', linkLeadingIcon: 'text-dimmed',
childLink: ['hover:bg-elevated/50 text-default hover:text-highlighted', options.theme.transitions && 'transition-colors'], childLink: ['hover:before:bg-elevated/50 text-default hover:text-highlighted', options.theme.transitions && 'transition-colors before:transition-colors'],
childLinkIcon: ['text-dimmed group-hover:text-default', options.theme.transitions && 'transition-colors'] childLinkIcon: ['text-dimmed group-hover:text-default', options.theme.transitions && 'transition-colors']
} }
}, },
@@ -114,6 +117,21 @@ export default (options: Required<ModuleOptions>) => ({
childList: 'gap-1', childList: 'gap-1',
content: 'w-60' content: 'w-60'
} }
}, {
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-default',
childItem: 'ps-1.5 -ms-px',
content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
}
}, {
orientation: 'vertical',
collapsed: true,
class: {
link: 'px-1.5',
content: 'shadow-sm rounded-sm min-h-6 p-1'
}
}, { }, {
orientation: 'horizontal', orientation: 'horizontal',
highlight: true, highlight: true,
@@ -241,19 +259,6 @@ export default (options: Required<ModuleOptions>) => ({
class: { class: {
link: 'after:bg-inverted' link: 'after:bg-inverted'
} }
}, {
orientation: 'vertical',
collapsed: false,
class: {
childList: 'ms-5 border-s border-default',
childItem: 'ps-1.5 -ms-px'
}
}, {
orientation: 'vertical',
collapsed: true,
class: {
link: 'px-1.5'
}
}], }],
defaultVariants: { defaultVariants: {
color: 'primary', color: 'primary',

151
test/components/__snapshots__/NavigationMenu-vue.spec.ts.snap
View File

@@ -909,47 +909,44 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = ` exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col"> "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col">
<ul class="isolate min-w-0"> <div style="position: relative;">
<li data-menu-item="" class="min-w-0"> <ul class="isolate min-w-0" data-orientation="vertical">
<div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5"> <li data-menu-item="" class="min-w-0"></li>
<li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> </li>
</div> <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 px-1.5 text-primary before:bg-elevated" data-active="" aria-current="page" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if--> <!--v-if-->
</li> <!--v-if-->
<li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-1" data-reka-collection-item="" data-orientation="vertical"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> </button>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</button> </li>
<!--v-if--> </ul>
<!--v-if--> </div>
</li>
<li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated px-1.5" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-2" data-reka-collection-item="" data-orientation="vertical"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-primary group-data-[state=open]:text-primary" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
<!--v-if-->
</li>
</ul>
<div class="px-2 h-px bg-border"></div> <div class="px-2 h-px bg-border"></div>
<ul class="isolate min-w-0"> <div style="position: relative;">
<li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if-->
<!--v-if-->
</a>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</a> </li>
<!--v-if--> <li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<!--v-if--> <!--v-if-->
</li> <!--v-if-->
<li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed" width="1em" height="1em" viewBox="0 0 16 16"></svg> </button>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</button> </li>
<!--v-if--> </ul>
<!--v-if--> </div>
</li>
</ul>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</nav>" </nav>"
@@ -958,7 +955,7 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
exports[`NavigationMenu > renders with orientation vertical correctly 1`] = ` exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col"> "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col">
<ul class="isolate min-w-0"> <ul class="isolate min-w-0">
<li data-menu-item="" class="min-w-0"> <li data-state="closed" data-orientation="vertical" class="min-w-0">
<div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5"> <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
<!--v-if--><span class="truncate">Links<!--v-if--></span> <!--v-if--><span class="truncate">Links<!--v-if--></span>
<!--v-if--> <!--v-if-->
@@ -982,13 +979,13 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
</ul> </ul>
<div class="px-2 h-px bg-border"></div> <div class="px-2 h-px bg-border"></div>
<ul class="isolate min-w-0"> <ul class="isolate min-w-0">
<li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-dimmed" width="1em" height="1em" viewBox="0 0 16 16"></svg></span> <li data-state="closed" data-orientation="vertical" class="min-w-0"><a href="https://github.com/nuxt/ui" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">GitHub<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="inline-block size-3 align-top text-dimmed" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
<!--v-if--> <!--v-if-->
</a> </a>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</li> </li>
<li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span> <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-dimmed" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="truncate">Help<!--v-if--></span>
<!--v-if--> <!--v-if-->
</button> </button>
<!--v-if--> <!--v-if-->
@@ -1331,89 +1328,89 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
<!--v-if--> <!--v-if-->
<div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden=""> <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden=""> <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2"> <ul class="isolate grid p-2 grid-cols-2 gap-2">
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Introduction <p class="truncate font-medium">Introduction
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Fully styled and customizable components for Nuxt.</p> <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
</div> </div>
</button></li> </button></li>
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Installation <p class="truncate font-medium">Installation
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Learn how to install and configure Nuxt UI in your application.</p> <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
</div> </div>
</button></li> </button></li>
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Theming <p class="truncate font-medium">Theming
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Learn how to customize the look and feel of the components.</p> <p class="text-muted">Learn how to customize the look and feel of the components.</p>
</div> </div>
</button></li> </button></li>
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Shortcuts <p class="truncate font-medium">Shortcuts
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Learn how to display and define keyboard shortcuts in your app.</p> <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
</div> </div>
</button></li> </button></li>
</ul> </ul>
</div> </div>
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden=""> <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2"> <ul class="isolate grid p-2 grid-cols-2 gap-2">
<li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><a href="/components/link" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Link <p class="truncate font-medium">Link
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Use NuxtLink with superpowers.</p> <p class="text-muted">Use NuxtLink with superpowers.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/modal" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><a href="/components/modal" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Modal <p class="truncate font-medium">Modal
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a modal within your application.</p> <p class="text-muted">Display a modal within your application.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/navigation-menu" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><a href="/components/navigation-menu" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">NavigationMenu <p class="truncate font-medium">NavigationMenu
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a list of links.</p> <p class="text-muted">Display a list of links.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/pagination" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><a href="/components/pagination" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Pagination <p class="truncate font-medium">Pagination
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a list of pages.</p> <p class="text-muted">Display a list of pages.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/popover" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><a href="/components/popover" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Popover <p class="truncate font-medium">Popover
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a non-modal dialog that floats around a trigger element.</p> <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/progress" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg> <li class=""><a href="/components/progress" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" width="1em" height="1em" viewBox="0 0 16 16"></svg>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Progress <p class="truncate font-medium">Progress
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Show a horizontal bar to indicate task progression.</p> <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
</div> </div>
</a></li> </a></li>
</ul> </ul>

151
test/components/__snapshots__/NavigationMenu.spec.ts.snap
View File

@@ -909,47 +909,44 @@ exports[`NavigationMenu > renders with neutral variant pill highlight neutral co
exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = ` exports[`NavigationMenu > renders with orientation vertical and collapsed correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col"> "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="true" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col">
<ul class="isolate min-w-0"> <div style="position: relative;">
<li data-menu-item="" class="min-w-0"> <ul class="isolate min-w-0" data-orientation="vertical">
<div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5"> <li data-menu-item="" class="min-w-0"></li>
<li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
<!--v-if--> </li>
</div> <li data-menu-item="" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 px-1.5 text-primary before:bg-elevated" data-active="" aria-current="page" data-reka-collection-item=""><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span>
<!--v-if--> <!--v-if-->
</li> <!--v-if-->
<li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-1" data-reka-collection-item="" data-orientation="vertical"><span class="iconify i-lucide:book-open shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> </button>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</button> </li>
<!--v-if--> </ul>
<!--v-if--> </div>
</li>
<li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-primary before:bg-elevated px-1.5" aria-controls="" aria-expanded="false" data-state="closed" id="reka-accordion-trigger-v-0-0-2" data-reka-collection-item="" data-orientation="vertical"><span class="iconify i-lucide:box shrink-0 size-5 text-primary group-data-[state=open]:text-primary" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
<!--v-if-->
<!--v-if-->
</li>
</ul>
<div class="px-2 h-px bg-border"></div> <div class="px-2 h-px bg-border"></div>
<ul class="isolate min-w-0"> <div style="position: relative;">
<li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors px-1.5" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <ul class="isolate min-w-0" data-orientation="vertical">
<li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted px-1.5 hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</a>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</a> </li>
<!--v-if--> <li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span>
<!--v-if--> <!--v-if-->
</li> <!--v-if-->
<li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75 px-1.5" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span> </button>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</button> </li>
<!--v-if--> </ul>
<!--v-if--> </div>
</li>
</ul>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</nav>" </nav>"
@@ -958,7 +955,7 @@ exports[`NavigationMenu > renders with orientation vertical and collapsed correc
exports[`NavigationMenu > renders with orientation vertical correctly 1`] = ` exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
"<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col"> "<nav aria-label="Main" data-orientation="vertical" dir="ltr" data-reka-navigation-menu="" data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 flex-col">
<ul class="isolate min-w-0"> <ul class="isolate min-w-0">
<li data-menu-item="" class="min-w-0"> <li data-state="closed" data-orientation="vertical" class="min-w-0">
<div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5"> <div class="w-full flex items-center gap-1.5 font-semibold text-xs/5 text-highlighted px-2.5 py-1.5">
<!--v-if--><span class="truncate">Links<!--v-if--></span> <!--v-if--><span class="truncate">Links<!--v-if--></span>
<!--v-if--> <!--v-if-->
@@ -982,13 +979,13 @@ exports[`NavigationMenu > renders with orientation vertical correctly 1`] = `
</ul> </ul>
<div class="px-2 h-px bg-border"></div> <div class="px-2 h-px bg-border"></div>
<ul class="isolate min-w-0"> <ul class="isolate min-w-0">
<li data-menu-item="" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span> <li data-state="closed" data-orientation="vertical" class="min-w-0"><a href="https://github.com/nuxt/ui" rel="noopener noreferrer" target="_blank" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted hover:text-highlighted hover:before:bg-elevated/50 transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-simple-icons:github shrink-0 size-5 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span><span class="truncate">GitHub<span class="iconify i-lucide:arrow-up-right inline-block size-3 align-top text-dimmed" aria-hidden="true"></span></span>
<!--v-if--> <!--v-if-->
</a> </a>
<!--v-if--> <!--v-if-->
<!--v-if--> <!--v-if-->
</li> </li>
<li data-menu-item="" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span> <li data-state="closed" data-orientation="vertical" class="min-w-0"><button type="button" disabled="" class="group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0 text-muted cursor-not-allowed opacity-75" data-reka-collection-item=""><span class="iconify i-lucide:circle-help shrink-0 size-5 text-dimmed" aria-hidden="true"></span><span class="truncate">Help<!--v-if--></span>
<!--v-if--> <!--v-if-->
</button> </button>
<!--v-if--> <!--v-if-->
@@ -1331,89 +1328,89 @@ exports[`NavigationMenu > renders with unmountOnHide correctly 1`] = `
<!--v-if--> <!--v-if-->
<div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden=""> <div class="relative overflow-hidden bg-default shadow-lg rounded-md ring ring-default h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] z-[1]" data-state="closed" data-orientation="horizontal" style="pointer-events: none;" hidden="">
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden=""> <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-1" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-1" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2"> <ul class="isolate grid p-2 grid-cols-2 gap-2">
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:house size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Introduction <p class="truncate font-medium">Introduction
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Fully styled and customizable components for Nuxt.</p> <p class="text-muted">Fully styled and customizable components for Nuxt.</p>
</div> </div>
</button></li> </button></li>
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:cloud-download size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Installation <p class="truncate font-medium">Installation
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Learn how to install and configure Nuxt UI in your application.</p> <p class="text-muted">Learn how to install and configure Nuxt UI in your application.</p>
</div> </div>
</button></li> </button></li>
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:swatch-book size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Theming <p class="truncate font-medium">Theming
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Learn how to customize the look and feel of the components.</p> <p class="text-muted">Learn how to customize the look and feel of the components.</p>
</div> </div>
</button></li> </button></li>
<li class=""><button type="button" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><button type="button" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:monitor size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Shortcuts <p class="truncate font-medium">Shortcuts
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Learn how to display and define keyboard shortcuts in your app.</p> <p class="text-muted">Learn how to display and define keyboard shortcuts in your app.</p>
</div> </div>
</button></li> </button></li>
</ul> </ul>
</div> </div>
<div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden=""> <div data-dismissable-layer="" style="pointer-events: none;" id="reka-navigation-menu-v-0-0-0-content-item-2" aria-labelledby="reka-navigation-menu-v-0-0-0-trigger-item-2" data-state="closed" data-orientation="horizontal" class="absolute top-0 left-0 w-full data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]" hidden="">
<ul class="grid p-2 grid-cols-2 gap-2"> <ul class="isolate grid p-2 grid-cols-2 gap-2">
<li class=""><a href="/components/link" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><a href="/components/link" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Link <p class="truncate font-medium">Link
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Use NuxtLink with superpowers.</p> <p class="text-muted">Use NuxtLink with superpowers.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/modal" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><a href="/components/modal" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Modal <p class="truncate font-medium">Modal
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a modal within your application.</p> <p class="text-muted">Display a modal within your application.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/navigation-menu" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><a href="/components/navigation-menu" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">NavigationMenu <p class="truncate font-medium">NavigationMenu
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a list of links.</p> <p class="text-muted">Display a list of links.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/pagination" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><a href="/components/pagination" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Pagination <p class="truncate font-medium">Pagination
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a list of pages.</p> <p class="text-muted">Display a list of pages.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/popover" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><a href="/components/popover" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Popover <p class="truncate font-medium">Popover
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Display a non-modal dialog that floats around a trigger element.</p> <p class="text-muted">Display a non-modal dialog that floats around a trigger element.</p>
</div> </div>
</a></li> </a></li>
<li class=""><a href="/components/progress" class="group size-full px-3 py-2 rounded-md flex items-start gap-2 text-start focus-visible:outline-primary hover:bg-elevated/50 text-default hover:text-highlighted transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span> <li class=""><a href="/components/progress" class="group relative size-full flex items-start text-start text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary px-3 py-2 gap-2 before:inset-x-px before:inset-y-0 hover:before:bg-elevated/50 text-default hover:text-highlighted transition-colors before:transition-colors" data-reka-collection-item=""><span class="iconify i-lucide:file size-5 shrink-0 text-dimmed group-hover:text-default transition-colors" aria-hidden="true"></span>
<div class="flex flex-col items-start"> <div class="min-w-0">
<p class="font-semibold text-sm relative inline-flex">Progress <p class="truncate font-medium">Progress
<!--v-if--> <!--v-if-->
</p> </p>
<p class="text-sm text-muted">Show a horizontal bar to indicate task progression.</p> <p class="text-muted">Show a horizontal bar to indicate task progression.</p>
</div> </div>
</a></li> </a></li>
</ul> </ul>