@adyen/bento-mcp 0.5.0 → 0.5.1

package/dist/assets/components/navigation-menu/navigation-menu.docs.mdx

@@ -0,0 +1,321 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as NavigationMenuStories from './navigation-menu.stories';
+
+<Meta of={NavigationMenuStories} />
+
+# Navigation Menu
+
+The Navigation Menu provides a structured way to organize and navigate through different sections of an application. It
+supports simple lists, collapsible groups, and nested items, making it ideal for complex navigation hierarchies.
+
+<Canvas of={NavigationMenuStories.EverythingBagel} />
+
+## Use Cases
+
+Use a Navigation Menu when:
+
+- You need to organize multiple navigation items in a vertical sidebar
+- Your application has a hierarchical structure with sections and subsections
+- You want to provide quick access to different pages or views within your application
+- You need collapsible groups to reduce visual clutter while maintaining discoverability
+
+### Do not use
+
+Do not use a Navigation Menu:
+
+- For horizontal navigation - use `bento-tabs` or a horizontal navbar instead
+- For secondary navigation within a content area - use `bento-secondary-nav` instead
+- For switching between different views of the same content - use `bento-tabs` instead
+
+**Navigation Menu vs Secondary Nav**: Navigation Menu is designed for primary app-level navigation in sidebars, while
+Secondary Nav is better suited for content-level navigation within pages (e.g., settings sections).
+
+**Navigation Menu vs Tabs**: Tabs are for switching between related content views on the same page, while Navigation
+Menu is for navigating to different pages or major sections of the app.
+
+## Variations
+
+### Simple list
+
+The most basic usage is a flat list of navigation items without any grouping.
+
+<Canvas of={NavigationMenuStories.SimpleList} />
+
+### With groups
+
+Use `bento-navigation-menu-group` to organize items into collapsible sections. This is useful when you have many
+navigation items that can be logically grouped.
+
+<Source
+    dark
+    language="html"
+    code={`<bento-navigation-menu>
+    <bento-navigation-menu-group label="Settings" :is-expanded="true">
+        <template #icon><folder-icon /></template>
+        <bento-navigation-menu-item nested value="general" label="General" />
+        <bento-navigation-menu-item nested value="security" label="Security" />
+    </bento-navigation-menu-group>
+</bento-navigation-menu>`}
+/>
+
+> **Note**: When using items inside a group, set the `nested` prop to `true` on each `bento-navigation-menu-item` to
+> apply proper indentation and styling.
+
+### With header actions
+
+Use the `headerActions` slot to add interactive elements like search or filters to the navigation header.
+
+<Source
+    dark
+    language="html"
+    code={`<bento-navigation-menu label="Pages">
+    <template #headerActions>
+        <bento-button variant="tertiary-with-background">
+            <template #iconLeft><search-icon /></template>
+        </bento-button>
+    </template>
+    <!-- menu items -->
+</bento-navigation-menu>`}
+/>
+
+### With expand/collapse all button
+
+Set `showExpandAllButton` to `true` to display a button that expands or collapses all groups at once. This is helpful
+when you have multiple collapsible groups.
+
+> **Note**: The expand/collapse all button only appears when there is at least one `bento-navigation-menu-group` in the
+> menu.
+
+### Action visibility
+
+By default, content in the `action` slot of a menu item is only visible on hover. Set `alwaysShowActions` to `true` to
+keep the action visible at all times.
+
+## Behavior
+
+### Navigation patterns
+
+> **⚠️ Important**: Every `bento-navigation-menu-item` **must** be rendered as (or wrapped in) a real link. Without a
+> link, the item is not keyboard-accessible, cannot be opened in a new tab, does not expose a URL to screen readers, and
+> fails core navigation accessibility requirements. Use **one** of the two patterns below.
+
+#### 1. Controlled navigation with the `link` prop
+
+Pass a `link` object to `bento-navigation-menu-item` to integrate with routing. The `link` prop accepts the same props
+as `bento-link`, allowing seamless integration with Vue Router or other routing solutions.
+
+<Source
+    dark
+    language="html"
+    code={`<bento-navigation-menu-item
+    value="home"
+    label="Home"
+    :link="{ to: '/home' }"
+>
+    <template #icon><home-icon /></template>
+</bento-navigation-menu-item>`}
+/>
+
+This is the recommended approach as it provides the best accessibility, SEO, and user experience (right-click to open in
+new tab, copy link, etc.) out of the box.
+
+#### 2. Wrapping with a custom link component
+
+If you need full control over the link behavior, wrap the item with any link component (such as `router-link`,
+`bento-link`, or a custom link component). The wrapping element **must** be a real, focusable link.
+
+<Source
+    dark
+    language="html"
+    code={`<router-link to="/profile">
+    <bento-navigation-menu-item
+        value="profile"
+        label="Profile"
+    >
+        <template #icon><profile-icon /></template>
+    </bento-navigation-menu-item>
+</router-link>`}
+/>
+
+> **Note**: When wrapping with a custom link component, `aria-current` is **not** applied automatically by the menu item
+> — you must set `aria-current="page"` on the wrapping element yourself (many routers, like Vue Router, handle this
+> automatically via `router-link-active` / `router-link-exact-active`). `aria-current` is only applied automatically
+> when you use the `link` prop.
+
+#### Tracking navigation with the `update:active-page` event
+
+The `bento-navigation-menu` emits `update:active-page` whenever an item is clicked. This is useful for side effects such
+as analytics tracking, syncing state to a store, or triggering other UI updates — **in addition to** one of the two link
+patterns above.
+
+> **⚠️ Do not** use `update:active-page` as the **only** navigation mechanism. The event does not provide a focusable,
+> keyboard-accessible link — items without a `link` prop or link wrapper are inaccessible to keyboard and screen reader
+> users. Always pair it with one of the patterns above.
+
+### Group expansion state
+
+Groups can be controlled or uncontrolled. To control a group's expansion state, bind to `is-expanded`:
+
+<Source
+    dark
+    language="html"
+    code={`<bento-navigation-menu-group
+    :is-expanded="paymentsExpanded"
+    @update:is-expanded="paymentsExpanded = $event"
+>
+    <!-- items -->
+</bento-navigation-menu-group>`}
+/>
+
+### Semi-collapsed groups
+
+When a group contains the currently active item, collapsing the group will enter a "semi-collapsed" state where only the
+active item remains visible. This provides context about the current location while saving space. The group will close
+fully as soon as a different page is selected.
+
+### Truncated labels
+
+Item and group labels are truncated with an ellipsis when they overflow the available width. In that case, the full
+label is automatically shown in a tooltip on hover and focus, so it remains discoverable without extra configuration.
+When the label fits, no tooltip is rendered.
+
+## Accessibility
+
+The Navigation Menu follows WCAG guidelines for accessible navigation patterns.
+
+### Nav landmark
+
+The component uses the `<nav>` element, which creates a navigation landmark region. This helps screen reader users
+quickly locate and navigate to the primary navigation area of your application.
+
+#### Labeling the landmark
+
+When a page has more than one navigation landmark (for example, a primary sidebar and a secondary nav, breadcrumbs, or a
+footer nav), each landmark needs an accessible name so screen reader users can tell them apart.
+
+- If a `label` prop is provided, the `<nav>` is automatically labeled via `aria-labelledby` pointing to the rendered
+  label — no extra work needed.
+- If no `label` prop is provided, you **should** add an `aria-label` attribute to the component to give the landmark an
+  accessible name:
+
+> **Note**: Omitting both `label` and `aria-label` is only acceptable when the page contains a single navigation
+> landmark. When in doubt, provide one.
+
+### Keyboard interaction
+
+| Keyboard interaction | Action                                                             |
+| -------------------- | ------------------------------------------------------------------ |
+| `Tab`                | Moves focus to the next interactive element (item or group header) |
+| `Shift + Tab`        | Moves focus to the previous interactive element                    |
+| `Space`              | Activates the focused item or toggles the focused group            |
+| `Enter`              | Activates the focused item or toggles the focused group            |
+
+### Roles, states and properties
+
+#### Navigation Menu (container)
+
+| Role  | Attribute                        | Element | Usage                                                                                         |
+| ----- | -------------------------------- | ------- | --------------------------------------------------------------------------------------------- |
+| `nav` |                                  | `nav`   | Identifies the element as a navigation landmark region                                        |
+|       | `aria-labelledby="ID_REFERENCE"` | `nav`   | Applied automatically when `label` is set; points to the rendered label                       |
+|       | `aria-label`                     | `nav`   | Should be provided by the consumer when no `label` is set, to give the landmark a unique name |
+
+#### Navigation Menu Item
+
+| Role   | Attribute             | Element | Usage                                                                           |
+| ------ | --------------------- | ------- | ------------------------------------------------------------------------------- |
+|        | `aria-current="page"` | `a`     | Applied automatically when the item is selected **and** the `link` prop is used |
+| `link` |                       | `a`     | Applied automatically when using the `link` prop (via `bento-link`)             |
+
+> When wrapping the item with a custom link component, set `aria-current="page"` on the wrapping element yourself.
+
+#### Navigation Menu Group
+
+| Role     | Attribute                        | Element  | Usage                                                                        |
+| -------- | -------------------------------- | -------- | ---------------------------------------------------------------------------- |
+| `button` |                                  | `button` | The group header is a button that controls expansion/collapse                |
+|          | `aria-expanded="true"`           | `button` | Indicates the group is expanded and its content is visible                   |
+|          | `aria-expanded="false"`          | `button` | Indicates the group is collapsed and its content is hidden                   |
+|          | `aria-controls="ID_REFERENCE"`   | `button` | Refers to the content region controlled by this button                       |
+| `region` |                                  | `div`    | The expandable content area                                                  |
+|          | `aria-labelledby="ID_REFERENCE"` | `div`    | Refers to the button that controls this region, providing an accessible name |
+
+## Component API
+
+### BentoNavigationMenu
+
+The main container component.
+
+#### Props
+
+| Prop                  | Type      | Default     | Description                                       |
+| --------------------- | --------- | ----------- | ------------------------------------------------- |
+| `label`               | `string`  | `undefined` | Label text for the navigation menu header         |
+| `showExpandAllButton` | `boolean` | `false`     | Whether to show the expand/collapse all button    |
+| `activePage`          | `string`  | `undefined` | The value of the currently active navigation item |
+
+#### Slots
+
+| Slot            | Description                            |
+| --------------- | -------------------------------------- |
+| `default`       | Navigation items and groups            |
+| `headerActions` | Action buttons displayed in the header |
+
+#### Events
+
+| Event                | Payload  | Description                          |
+| -------------------- | -------- | ------------------------------------ |
+| `update:active-page` | `string` | Emitted when the active page changes |
+
+---
+
+### BentoNavigationMenuItem
+
+Individual navigation item component.
+
+#### Props
+
+| Prop                | Type             | Default     | Description                                                                  |
+| ------------------- | ---------------- | ----------- | ---------------------------------------------------------------------------- |
+| `value`             | `string`         | (required)  | Unique identifier for this navigation item                                   |
+| `label`             | `string`         | (required)  | Label text for the item                                                      |
+| `nested`            | `boolean`        | `false`     | Whether the item is nested within a group (affects styling)                  |
+| `link`              | `BentoLinkProps` | `undefined` | Link properties to make the item a navigable link                            |
+| `alwaysShowActions` | `boolean`        | `false`     | Whether the action slot should always be visible (default: visible on hover) |
+
+#### Slots
+
+| Slot     | Description                                                  |
+| -------- | ------------------------------------------------------------ |
+| `icon`   | Icon displayed before the label (not shown for nested items) |
+| `action` | Action element displayed at the end of the item              |
+
+---
+
+### BentoNavigationMenuGroup
+
+Collapsible group container for navigation items.
+
+#### Props
+
+| Prop         | Type      | Default | Description                   |
+| ------------ | --------- | ------- | ----------------------------- |
+| `isExpanded` | `boolean` | `false` | Whether the group is expanded |
+| `label`      | `string`  | —       | Label text for the group      |
+
+#### Slots
+
+| Slot      | Description                     |
+| --------- | ------------------------------- |
+| `icon`    | Icon displayed before the label |
+| `default` | Nested navigation items         |
+
+#### Events
+
+| Event                | Payload   | Description                       |
+| -------------------- | --------- | --------------------------------- |
+| `update:is-expanded` | `boolean` | Emitted when the group is toggled |
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/IXcB6elA29Qy6waH5afmO9/WIP-navigation?node-id=748-8290&m=dev)

package/dist/assets/components/navigation-menu/navigation-menu.stories.ts

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoNavigationMenu from './navigation-menu.vue'; import BentoNavigationMenuItem from './components/navigation-menu-item/navigation-menu-item.vue'; import BentoNavigationMenuGroup from './components/navigation-menu-group/navigation-menu-group.vue'; import { BentoButton } from '@/components/button'; import { BentoLink } from '@/components/link'; import type { Meta, StoryObj } from '@storybook/vue'; import StarIcon from '@adyen/ui-assets-icons-16/vue/star'; import StarFilledIcon from '@adyen/ui-assets-icons-16/vue/star-filled'; import SearchIcon from '@adyen/ui-assets-icons-16/vue/search'; import NavHomeIcon from '@adyen/ui-assets-icons-16/vue/nav-home'; import NavPaymentsIcon from '@adyen/ui-assets-icons-16/vue/nav-payments'; import NavReportsIcon from '@adyen/ui-assets-icons-16/vue/nav-reports'; import NavSettingsIcon from '@adyen/ui-assets-icons-16/vue/nav-settings'; import NavAccountHoldersIcon from '@adyen/ui-assets-icons-16/vue/nav-account-holders'; import { isVue2 } from 'vue-demi'; import NavigationMenuEverythingBagelExample from './__tests__/navigation-menu-everything-bagel-example.vue?raw'; import NavigationMenuSimpleListExample from './__tests__/navigation-menu-simple-list-example.vue?raw'; export default { title: 'Navigation Menu', component: BentoNavigationMenu, argTypes: { default: { control: false, table: { type: { summary: 'Navigation items and groups' }, }, }, headerActions: { control: false, table: { type: { summary: 'Action buttons' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoNavigationMenu>; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup, BentoButton, BentoLink, StarIcon, StarFilledIcon, SearchIcon, NavHomeIcon, NavPaymentsIcon, NavReportsIcon, NavSettingsIcon, NavAccountHoldersIcon, }, props: Object.keys(argTypes), setup(props) { const activePage = ref('home'); const paymentsExpanded = ref(true); const favorites = ref({}); const toggleFavorite = (value: string) => { favorites.value = { ...favorites.value, [value]: !favorites.value[value] }; }; return { activePage, paymentsExpanded, favorites, toggleFavorite, args: isVue2 ? props : _args, }; }, template: ` <div style="width: 248px;"> <bento-navigation-menu v-bind="args" :active-page="activePage" @update:active-page="activePage = $event"> <template #headerActions> <bento-button variant="tertiary-with-background"> <template #iconLeft> <search-icon /> </template> </bento-button> </template> <bento-navigation-menu-item value="home" label="Home" :link="{ to: '#home', isNotRouting: true }" > <template #icon> <nav-home-icon /> </template> </bento-navigation-menu-item> <bento-navigation-menu-group label="Payments" :is-expanded="paymentsExpanded" @update:is-expanded="paymentsExpanded = $event" > <template #icon> <nav-payments-icon /> </template> <bento-navigation-menu-item nested value="payments" label="Payments" :link="{ to: '#payments', isNotRouting: true }" :always-show-actions="!!favorites.payments || activePage === 'payments'" > <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('payments')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.payments" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> <bento-navigation-menu-item nested value="preauth" label="Pre-authorized" :link="{ to: '#preauth', isNotRouting: true }" :always-show-actions="!!favorites.preauth || activePage === 'preauth'" > <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('preauth')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.preauth" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> <bento-navigation-menu-item nested value="links" label="Payment links" :link="{ to: '#links', isNotRouting: true }" :always-show-actions="!!favorites.links || activePage === 'links'" > <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('links')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.links" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> <bento-navigation-menu-item nested value="methods" label="Payment methods" :link="{ to: '#methods', isNotRouting: true }" :always-show-actions="!!favorites.methods || activePage === 'methods'" > <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('methods')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.methods" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> </bento-navigation-menu-group> <bento-navigation-menu-group label="Reports" > <template #icon> <nav-reports-icon /> </template> <bento-navigation-menu-item nested value="analytics" label="Analytics" :link="{ to: '#analytics', isNotRouting: true }" :always-show-actions="!!favorites.analytics || activePage === 'analytics'" > <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('analytics')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.analytics" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> <bento-navigation-menu-item nested value="transactions" label="Transactions" :link="{ to: '#transactions', isNotRouting: true }" :always-show-actions="!!favorites.transactions || activePage === 'transactions'" > <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('transactions')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.transactions" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> </bento-navigation-menu-group> <bento-navigation-menu-item value="settings" label="Settings" :link="{ to: '#settings', isNotRouting: true }" :always-show-actions="!!favorites.settings || activePage === 'settings'" > <template #icon> <nav-settings-icon /> </template> <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('settings')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.settings" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> <bento-link to="#profile" is-not-routing disable-typography> <bento-navigation-menu-item value="profile" label="Profile" :always-show-actions="!!favorites.profile || activePage === 'profile'" > <template #icon> <nav-account-holders-icon /> </template> <template #action> <bento-button variant="tertiary" @click.stop.prevent="toggleFavorite('profile')" > <template #iconLeft> <star-filled-icon style="color: var(--b-color-decorative-green);" v-if="favorites.profile" /> <star-icon v-else /> </template> </bento-button> </template> </bento-navigation-menu-item> </bento-link> </bento-navigation-menu> </div> `, }), args: { label: 'Pages', showExpandAllButton: true, }, parameters: storybookDocsParameter(NavigationMenuEverythingBagelExample), }; export const SimpleList: Story = { render: (_args, { argTypes }) => ({ components: { BentoNavigationMenu, BentoNavigationMenuItem, StarIcon, }, props: Object.keys(argTypes), setup(props) { const activePage = ref('home'); return { activePage, args: isVue2 ? props : _args }; }, template: ` <div style="width: 248px;"> <bento-navigation-menu v-bind="args" :active-page="activePage" @update:active-page="activePage = $event"> <bento-navigation-menu-item value="home" label="Home" /> <bento-navigation-menu-item value="analytics" label="Analytics" /> <bento-navigation-menu-item value="settings" label="Settings" /> <bento-navigation-menu-item value="profile" label="Profile" /> </bento-navigation-menu> </div> `, }), args: { label: 'Pages', }, parameters: storybookDocsParameter(NavigationMenuSimpleListExample), }; 

package/dist/assets/components/navigation-menu/navigation-menu.types.ts

@@ -0,0 +1 @@
+import { type Ref } from 'vue'; export interface BentoNavigationMenuProps { /** * Label text for the navigation menu header */ label?: string; /** * Whether to show the expand/collapse all button */ showExpandAllButton?: boolean; /** * The value of the currently active navigation item */ activePage?: string; } /** * @private */ export interface BentoNavigationMenuGroupRegistration { id: string; setOpen: (open: boolean) => void; getIsOpen: () => boolean; } /** * @private */ export interface BentoNavigationMenuState { registerGroup: (groupId: string, setOpen: (open: boolean) => void, getIsOpen: () => boolean) => void; unregisterGroup: (groupId: string) => void; activePage: Ref<string | undefined>; updateActivePage: (value: string) => void; } 

package/dist/assets/components/navigation-menu/navigation-menu.vue

@@ -0,0 +1 @@
+<template> <nav class="b-navigation-menu" :aria-labelledby="label ? titleId : undefined"> <div v-if="showHeader" class="b-navigation-menu__header"> <bento-typography v-if="label" :id="titleId" el="p" variant="caption" stronger class="b-navigation-menu__title" > {{ label }} </bento-typography> <div class="b-navigation-menu__actions-container"> <div v-if="hasSlot('headerActions')" class="b-navigation-menu__actions"> <slot name="headerActions" /> </div> <bento-button v-if="computedShowExpandAll" v-bento-tooltip-directive="expandButtonLabel" variant="tertiary-with-background" :aria-label="expandButtonLabel" @click="toggleAllGroups" > <template #iconLeft> <menu-collapse-icon v-if="allExpanded" /> <menu-expand-icon v-else /> </template> </bento-button> </div> </div> <ul class="b-navigation-menu__content"> <slot /> </ul> </nav> </template> <script setup lang="ts"> import { computed, provide, ref, toRef, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoButton } from '@/components/button'; import MenuCollapseIcon from '@adyen/ui-assets-icons-16/vue/menu-collapse'; import MenuExpandIcon from '@adyen/ui-assets-icons-16/vue/menu-expand'; import { useHasSlot } from '@/composables'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import type { BentoNavigationMenuGroupRegistration, BentoNavigationMenuProps, BentoNavigationMenuState, } from './navigation-menu.types'; import { NAVIGATION_MENU_STATE_INJECTION_KEY } from './navigation-menu.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoNavigationMenuProps>(), { label: undefined, showExpandAllButton: false, activePage: undefined, }); const emit = defineEmits<{ /** * Emits update event when active page is changed */ (e: 'update:active-page', value: string): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const titleId = generateUid('navigation-menu-title'); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const groups = ref<Array<BentoNavigationMenuGroupRegistration>>([]); const registerGroup = (groupId: string, setOpen: (open: boolean) => void, getIsOpen: () => boolean) => { groups.value.push({ id: groupId, setOpen, getIsOpen }); }; const unregisterGroup = (groupId: string) => { groups.value = groups.value.filter(g => g.id !== groupId); }; const allExpanded = computed(() => groups.value.length > 0 && groups.value.every(group => group.getIsOpen())); const computedShowExpandAll = computed(() => groups.value.length > 0 && props.showExpandAllButton); const showHeader = computed(() => props.label || hasSlot('headerActions') || computedShowExpandAll.value); const expandButtonLabel = computed(() => (allExpanded.value ? t('hideAllPages') : t('showAllPages'))); const toggleAllGroups = () => { const shouldExpand = !allExpanded.value; groups.value.forEach(({ setOpen }) => setOpen(shouldExpand)); }; const updateActivePage = (value: string) => { emit('update:active-page', value); }; provide<BentoNavigationMenuState>(NAVIGATION_MENU_STATE_INJECTION_KEY, { registerGroup, unregisterGroup, activePage: toRef(props, 'activePage'), updateActivePage, }); </script> <script lang="ts"> /** * Navigation menu container component with optional header and action buttons. * * @usage * import { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup }, * template: ` * <bento-navigation-menu label="Pages" active-page="home"> * <template #headerActions> * <button>Search</button> * </template> * <bento-navigation-menu-item value="home" label="Home"> * <template #icon><home-icon /></template> * </bento-navigation-menu-item> * <bento-navigation-menu-group label="Settings"> * <template #icon><folder-icon /></template> * <bento-navigation-menu-item nested value="general" label="General" /> * </bento-navigation-menu-group> * </bento-navigation-menu> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./navigation-menu.scss" /> 

package/dist/assets/components.json

@@ -30,6 +30,7 @@
   "date-range-picker",
   "divider",
   "draggable-handle",
+  "drawer",
   "dropdown",
   "dropdown-avatar",
   "dropdown-country",
@@ -64,6 +65,9 @@
   "modal-fullscreen",
   "modal-fullscreen-page",
   "modal-page",
+  "navigation-menu",
+  "navigation-menu-group",
+  "navigation-menu-item",
   "pagination",
   "payment-method",
   "popover",

package/dist/assets/index.ts

@@ -1 +1 @@
-import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/anchor-scroller'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; // TODO: Re-introduce when `bento-draggable` is ready export * from './components/draggable/components/draggable-handle'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/input-time'; export * from './components/inspector'; export * from './components/layout'; export * from './components/list'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install'; 
+import BentoVue from './install'; export * from './components/accordion'; export * from './components/action-bar'; export * from './components/ai-tag'; export * from './components/alert'; export * from './components/anchor-scroller'; export * from './components/avatar'; export * from './components/button'; export * from './components/dashed-underline'; export * from './components/data-grid'; export * from './components/card'; export * from './components/date-picker'; export * from './components/date-range-picker'; // TODO: Re-introduce when `bento-draggable` is ready export * from './components/draggable/components/draggable-handle'; export * from './components/drawer'; export * from './components/dropdown'; export * from './components/checkbox'; export * from './components/chip'; export * from './components/click-outside'; export * from './components/code-snippet'; export * from './components/country'; export * from './components/currency'; export * from './components/date'; export * from './components/divider'; export * from './components/empty-state'; export * from './components/file-uploader'; export * from './components/filter-bar'; export * from './components/form-layout'; export * from './components/header-with-views'; export * from './components/image'; export * from './components/info-icon'; export * from './components/input-field'; export * from './components/input-field-password'; export * from './components/input-field-phone-number'; export * from './components/input-time'; export * from './components/inspector'; export * from './components/layout'; export * from './components/list'; export * from './components/loading-indicator'; export * from './components/link'; export * from './components/menu'; export * from './components/modal'; export * from './components/modal-fullscreen'; export * from './components/navigation-menu'; export * from './components/header'; export * from './components/pagination'; export * from './components/payment-method'; export * from './components/popover'; export * from './components/promo-banner'; export * from './components/radio-group'; export * from './components/rich-text-editor'; export * from './components/search-bar'; export * from './components/secondary-nav'; export * from './components/selection-card'; export * from './components/segmented-control'; export * from './components/sidepanel'; export * from './components/status'; export * from './components/stepper'; export * from './components/structured-list'; export * from './components/summary-grid'; export * from './components/tabs'; export * from './components/tag'; export * from './components/textarea'; export * from './components/timeline'; export * from './components/toast'; export * from './components/toggle'; export * from './components/tutorial'; export * from './components/typography'; // Export Composables export * from './composables/use-bento-base-filter'; export * from './composables/use-bento-currency'; export * from './composables/use-bento-theme'; export * from './composables/use-bento-toast-controller'; export * from './composables/use-click-outside'; export * from './composables/use-form-validate'; // Export Templates export * from './templates/dashboard-template'; export * from './templates/data-grid-template'; // Export Types export * from './types'; // Export Directives export * from './directives'; // AdlVue Plugin export default BentoVue; export { BentoTheme } from './install';