@nvidia-elements/core 2.9.0 → 2.11.0

package/dist/menu/menu.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.examples.js","names":[],"sources":["../../src/menu/menu.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Menu',\n  component: 'nve-menu',\n};\n\n/**\n * @summary Basic menu with simple text items for the default menu structure and styling.\n */\nexport const Default = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.\n * @tags pattern\n */\nexport const Dropdown = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Menu with a selected item showing the visual state for user-selected options.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item selected>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with a current page item showing the visual state for the active/current page in navigation.\n */\nexport const Current = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the `<nve-menu-item>`\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\" style=\"--border-background: var(--nve-ref-color-brand-green-900);\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with disabled items showing unavailable options while maintaining visual context.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item disabled>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with icons to add visual context and improve usability.\n */\nexport const Icons = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with links for navigation functionality within menu structures.\n */\nexport const Links = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.\n */\nexport const Suffix = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><kbd  slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with constrained height showing scrollable behavior when content exceeds container limits.\n * @tags test-case\n */\nexport const Scroll = {\n  render: () => html`\n  <nve-menu style=\"--max-height: 150px\">\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n    <nve-menu-item>item 5</nve-menu-item>\n    <nve-menu-item>item 6</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Use a dropdown menu with search and branded logos for application selection interfaces.\n * @tags pattern\n */\nexport const Complex = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-search rounded>\n      <input type=\"search\" placeholder=\"search tools\" aria-label=\"search apps\" />\n    </nve-search>\n    <nve-menu>\n      <nve-menu-item>\n        <nve-logo color=\"pink-rose\" size=\"sm\">Db</nve-logo> Debugger\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"blue-cobalt\" size=\"sm\">TM</nve-logo> Task Manager\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"yellow-nova\" size=\"sm\">CI</nve-logo> CI Services\n      </nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item>\n        <nve-logo size=\"sm\">NV</nve-logo> All Apps\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Use a navigation drawer to overlay page content for out-of-context navigation.\n * @tags pattern\n */\nexport const VerticalNavigationDrawer = {\n  render: () => html`\n  <nve-page>\n    <nve-page-header slot=\"header\">\n      <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n      <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n    </nve-page-header>\n    <main nve-layout=\"column gap:md pad:md\">\n      <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n    </main>\n    <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n      <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n      </nve-drawer-header>\n      <nve-drawer-content>\n        <nve-menu>\n          <nve-menu-item>item 1</nve-menu-item>\n          <nve-menu-item current=\"page\">item 2</nve-menu-item>\n          <nve-menu-item>item 3</nve-menu-item>\n          <nve-menu-item>item 4</nve-menu-item>\n        </nve-menu>\n      </nve-drawer-content>\n    </nve-drawer>\n  </nve-page>\n  `\n};\n\n/**\n * @summary Use an inline navigation panel to push page content aside when navigation is contextual to the page.\n * @tags pattern\n */\nexport const VerticalNavigationPanel = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" expanded style=\"max-width:280px\">\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use a tooltip on a menu item to provide extra context and warnings.\n * @tags pattern test-case\n */\nexport const ItemTooltip = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n      item 2\n      <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n      <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\">This is a warning tooltip</nve-tooltip>\n    </nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n  </nve-menu>\n  `\n}\n\n/**\n * @summary Menu items with danger status styling for destructive actions like delete or logout operations.\n */\nexport const DangerStatus = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item status=\"danger\">default</nve-menu-item>\n    <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n    <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n    <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n    <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n    <nve-menu-item status=\"danger\">icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon></nve-menu-item>\n  </nve-menu>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"menu.examples.js","names":[],"sources":["../../src/menu/menu.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Menu',\n  component: 'nve-menu'\n};\n\n/**\n * @summary Basic menu with simple text items for the default menu structure and styling.\n */\nexport const Default = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with content slots for icons, dots, and other elements.\n * @tags test-case\n */\nexport const ContentSlots = {\n  render: () => html`\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code <nve-dot slot=\"suffix\" size=\"sm\"></nve-dot></nve-menu-item>\n      <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\"></nve-dot></nve-menu-item>\n      <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI <nve-dot slot=\"suffix\" status=\"success\" size=\"sm\"></nve-dot></nve-menu-item>\n      <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile <nve-dot slot=\"suffix\" status=\"warning\" size=\"sm\"></nve-dot></nve-menu-item>\n      <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access <nve-dot slot=\"suffix\" status=\"danger\" size=\"sm\"></nve-dot></nve-menu-item>\n    </nve-menu>\n  `\n};\n\n/**\n * @summary Dynamically toggle the compact state of a menu.\n * @tags test-case\n */\nexport const Compact = {\n  render: () => html`\n    <nve-switch>\n      <label>Compact</label>\n      <input id=\"compact-switch\" type=\"checkbox\" aria-label=\"compact menu\" checked />\n    </nve-switch>\n    <nve-menu density=\"compact\" id=\"compact-menu\">\n      <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access</nve-menu-item>\n    </nve-menu>\n    <script type=\"module\">\n      document.querySelector('#compact-switch').addEventListener('change', e => {\n        document.querySelector('#compact-menu').density = e.target.checked ? 'compact' : 'default';\n      });  \n    </script>\n  `\n};\n\n/**\n * @summary An explicitly expanded group keeps navigation state controlled by the application without enabling automatic state changes. Use when the application owns expansion state.\n */\nexport const ExpandedNavigation = {\n  render: () => html`\n    <nve-menu-group expanded style=\"--width: 240px\">\n      Resources\n      <nve-menu>\n        <nve-menu-item>Documentation</nve-menu-item>\n        <nve-menu-item>Examples</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n  `\n};\n\n/**\n * @summary A disabled menu-group header preserves its current expanded content while preventing user toggling. Use when group availability depends on application state.\n */\nexport const UnavailableNavigation = {\n  render: () => html`\n    <nve-menu-group expanded disabled style=\"--width: 240px\">\n      Provisioning\n      <nve-menu>\n        <nve-menu-item>Clusters</nve-menu-item>\n        <nve-menu-item>Storage</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n  `\n};\n\n/**\n * @summary Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.\n * @tags pattern\n */\nexport const Dropdown = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Menu with a selected item showing the visual state for user-selected options.\n */\nexport const Selected = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item selected>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with a current page item showing the visual state for the active/current page in navigation.\n */\nexport const Current = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the `<nve-menu-item>`\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item current=\"page\" style=\"--border-background: var(--nve-ref-color-brand-green-900);\">item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with disabled items showing unavailable options while maintaining visual context.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item disabled>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with links for navigation functionality within menu structures.\n */\nexport const Links = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item><nve-icon slot=\"prefix\" name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n    <nve-menu-item><nve-icon slot=\"prefix\" name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n    <nve-menu-item><nve-icon slot=\"prefix\" name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n    <nve-menu-item><nve-icon slot=\"prefix\" name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.\n */\nexport const Suffix = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>Copy<kbd  slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu with constrained height showing scrollable behavior when content exceeds container limits.\n * @tags test-case\n */\nexport const Scroll = {\n  render: () => html`\n  <nve-menu style=\"--max-height: 150px\">\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item>item 2</nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n    <nve-menu-item>item 4</nve-menu-item>\n    <nve-menu-item>item 5</nve-menu-item>\n    <nve-menu-item>item 6</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Use a dropdown menu with search and branded logos for application selection interfaces.\n * @tags pattern\n */\nexport const Complex = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-search rounded>\n      <input type=\"search\" placeholder=\"search tools\" aria-label=\"search apps\" />\n    </nve-search>\n    <nve-menu>\n      <nve-menu-item>\n        <nve-logo color=\"pink-rose\" size=\"sm\">Db</nve-logo> Debugger\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"blue-cobalt\" size=\"sm\">TM</nve-logo> Task Manager\n      </nve-menu-item>\n      <nve-menu-item>\n        <nve-logo color=\"yellow-nova\" size=\"sm\">CI</nve-logo> CI Services\n      </nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item>\n        <nve-logo size=\"sm\">NV</nve-logo> All Apps\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Vertical navigation menu groups with and without icons. For deeply nested navigation use the `nve-tree` component.\n */\nexport const VerticalNavigation = {\n  render: () => html`\n    <div nve-layout=\"row gap:xl\">\n      <nav style=\"width: 175px\">\n        <nve-menu-group behavior-expand expanded>\n          Overview\n          <nve-menu>\n            <nve-menu-item current=\"page\"><nve-icon name=\"home\" slot=\"prefix\"></nve-icon> Getting Started</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"bell\" slot=\"prefix\"></nve-icon> Alerts</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"add\" slot=\"prefix\"></nve-icon> Create New</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n        <nve-menu-group behavior-expand expanded>\n          Data\n          <nve-menu>\n            <nve-menu-item><nve-icon name=\"office-building\" slot=\"prefix\"></nve-icon> Catalog</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"view-as-grid\" slot=\"prefix\"></nve-icon> Dashboards</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"rectangle-stack-horizontal\" slot=\"prefix\"></nve-icon> Volumes</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"layers\" slot=\"prefix\"></nve-icon> Models</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n        <nve-menu-group behavior-expand expanded>\n          Develop\n          <nve-menu>\n            <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Queries</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"doc-checkmark\" slot=\"prefix\"></nve-icon> Notebooks</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"branch\" slot=\"prefix\"></nve-icon> Pipelines</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"beaker\" slot=\"prefix\"></nve-icon> Experiments</nve-menu-item>\n            <nve-menu-item><nve-icon name=\"clock\" slot=\"prefix\"></nve-icon> Runs</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n      </nav>\n\n      <nav style=\"width: 175px\">\n        <nve-menu-group behavior-expand expanded>\n          Overview\n          <nve-menu>\n            <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n            <nve-menu-item>Alerts</nve-menu-item>\n            <nve-menu-item>Create New</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n        <nve-menu-group behavior-expand expanded>\n          Data\n          <nve-menu>\n            <nve-menu-item>Catalog</nve-menu-item>\n            <nve-menu-item>Dashboards</nve-menu-item>\n            <nve-menu-item>Volumes</nve-menu-item>\n            <nve-menu-item>Models</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n        <nve-menu-group behavior-expand expanded>\n          Develop\n          <nve-menu>\n            <nve-menu-item>Queries</nve-menu-item>\n            <nve-menu-item >Notebooks</nve-menu-item>\n            <nve-menu-item>Pipelines</nve-menu-item>\n            <nve-menu-item>Experiments</nve-menu-item>\n            <nve-menu-item>Runs</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n      </nav>\n    </div>\n  `\n};\n\n/**\n * @summary Use a navigation drawer to overlay page content for out-of-context navigation.\n * @tags pattern\n */\nexport const VerticalNavigationDrawer = {\n  render: () => html`\n  <nve-page>\n    <nve-page-header slot=\"header\">\n      <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n      <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n    </nve-page-header>\n    <main nve-layout=\"column gap:md pad:md\">\n      <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n    </main>\n    <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n      <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n      </nve-drawer-header>\n      <nve-drawer-content>\n        <nve-menu-group behavior-expand expanded>\n          Overview\n          <nve-menu>\n            <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n            <nve-menu-item>Alerts</nve-menu-item>\n            <nve-menu-item>Create New</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n        <nve-menu-group behavior-expand expanded>\n          Data\n          <nve-menu>\n            <nve-menu-item>Catalog</nve-menu-item>\n            <nve-menu-item>Dashboards</nve-menu-item>\n            <nve-menu-item>Volumes</nve-menu-item>\n            <nve-menu-item>Models</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n        <nve-menu-group behavior-expand expanded>\n          Develop\n          <nve-menu>\n            <nve-menu-item>Queries</nve-menu-item>\n            <nve-menu-item >Notebooks</nve-menu-item>\n            <nve-menu-item>Pipelines</nve-menu-item>\n            <nve-menu-item>Experiments</nve-menu-item>\n            <nve-menu-item>Runs</nve-menu-item>\n          </nve-menu>\n        </nve-menu-group>\n      </nve-drawer-content>\n    </nve-drawer>\n  </nve-page>\n  `\n};\n\n/**\n * @summary Use an inline navigation panel to push page content aside when navigation is contextual to the page.\n * @tags pattern\n */\nexport const VerticalNavigationPanel = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\" expanded>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu-group behavior-expand expanded>\n        Overview\n        <nve-menu>\n          <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n          <nve-menu-item>Alerts</nve-menu-item>\n          <nve-menu-item>Create New</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n      <nve-menu-group behavior-expand expanded>\n        Data\n        <nve-menu>\n          <nve-menu-item>Catalog</nve-menu-item>\n          <nve-menu-item>Dashboards</nve-menu-item>\n          <nve-menu-item>Volumes</nve-menu-item>\n          <nve-menu-item>Models</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n      <nve-menu-group behavior-expand expanded>\n        Develop\n        <nve-menu>\n          <nve-menu-item>Queries</nve-menu-item>\n          <nve-menu-item >Notebooks</nve-menu-item>\n          <nve-menu-item>Pipelines</nve-menu-item>\n          <nve-menu-item>Experiments</nve-menu-item>\n          <nve-menu-item>Runs</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use a tooltip on a menu item to provide extra context and warnings.\n * @tags pattern test-case\n */\nexport const ItemTooltip = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item>item 1</nve-menu-item>\n    <nve-menu-item popovertarget=\"menu-tooltip\" id=\"menu-item-2\">\n      item 2\n      <nve-icon id=\"menu-anchor\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon>\n      <nve-tooltip anchor=\"menu-anchor\" id=\"menu-tooltip\" style=\"interest-delay-start: 2s\">This is a warning tooltip</nve-tooltip>\n    </nve-menu-item>\n    <nve-menu-item>item 3</nve-menu-item>\n  </nve-menu>\n  `\n};\n\n/**\n * @summary Menu items with danger status styling for destructive actions like delete or logout operations.\n */\nexport const DangerStatus = {\n  render: () => html`\n  <nve-menu>\n    <nve-menu-item status=\"danger\">default</nve-menu-item>\n    <nve-menu-item status=\"danger\" disabled>disabled</nve-menu-item>\n    <nve-menu-item status=\"danger\" selected>selected</nve-menu-item>\n    <nve-menu-item status=\"danger\" current=\"page\">current</nve-menu-item>\n    <nve-menu-item status=\"danger\"><nve-icon name=\"gear\"></nve-icon> icon left</nve-menu-item>\n    <nve-menu-item status=\"danger\">icon right <nve-icon id=\"warning-icon\" size=\"md\" name=\"exclamation-triangle\" style=\"margin-left: auto\"></nve-icon></nve-menu-item>\n  </nve-menu>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/menu/menu.examples.json

@@ -11,6 +11,46 @@
       "composition": false,
       "tags": []
     },
+    {
+      "id": "menu-content-slots",
+      "name": "ContentSlots",
+      "template": "<nve-menu>\n  <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code <nve-dot slot=\"suffix\" size=\"sm\"></nve-dot></nve-menu-item>\n  <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\"></nve-dot></nve-menu-item>\n  <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI <nve-dot slot=\"suffix\" status=\"success\" size=\"sm\"></nve-dot></nve-menu-item>\n  <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile <nve-dot slot=\"suffix\" status=\"warning\" size=\"sm\"></nve-dot></nve-menu-item>\n  <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access <nve-dot slot=\"suffix\" status=\"danger\" size=\"sm\"></nve-dot></nve-menu-item>\n</nve-menu>\n",
+      "summary": "Menu items with content slots for icons, dots, and other elements.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "menu-compact",
+      "name": "Compact",
+      "template": "<nve-switch>\n  <label>Compact</label>\n  <input id=\"compact-switch\" type=\"checkbox\" aria-label=\"compact menu\" checked />\n</nve-switch>\n<nve-menu density=\"compact\" id=\"compact-menu\">\n  <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Code</nve-menu-item>\n  <nve-menu-item><nve-icon name=\"checklist\" slot=\"prefix\"></nve-icon> Lint</nve-menu-item>\n  <nve-menu-item><nve-icon name=\"terminal\" slot=\"prefix\"></nve-icon> CLI</nve-menu-item>\n  <nve-menu-item><nve-icon name=\"person\" slot=\"prefix\"></nve-icon> Profile</nve-menu-item>\n  <nve-menu-item><nve-icon name=\"key\" slot=\"prefix\"></nve-icon> Access</nve-menu-item>\n</nve-menu>\n<script type=\"module\">\n  document.querySelector(\"#compact-switch\").addEventListener(\"change\", (e) => {\n    document.querySelector(\"#compact-menu\").density = e.target.checked ? \"compact\" : \"default\";\n  });\n</script>\n",
+      "summary": "Dynamically toggle the compact state of a menu.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "menu-expanded-navigation",
+      "name": "ExpandedNavigation",
+      "template": "<nve-menu-group expanded style=\"--width: 240px\">\n  Resources\n  <nve-menu>\n    <nve-menu-item>Documentation</nve-menu-item>\n    <nve-menu-item>Examples</nve-menu-item>\n  </nve-menu>\n</nve-menu-group>\n",
+      "summary": "An explicitly expanded group keeps navigation state controlled by the application without enabling automatic state changes. Use when the application owns expansion state.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "menu-unavailable-navigation",
+      "name": "UnavailableNavigation",
+      "template": "<nve-menu-group expanded disabled style=\"--width: 240px\">\n  Provisioning\n  <nve-menu>\n    <nve-menu-item>Clusters</nve-menu-item>\n    <nve-menu-item>Storage</nve-menu-item>\n  </nve-menu>\n</nve-menu-group>\n",
+      "summary": "A disabled menu-group header preserves its current expanded content while preventing user toggling. Use when group availability depends on application state.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
     {
       "id": "menu-dropdown",
       "name": "Dropdown",
@@ -62,19 +102,10 @@
         "test-case"
       ]
     },
-    {
-      "id": "menu-icons",
-      "name": "Icons",
-      "template": "<nve-menu>\n  <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n  <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n  <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n  <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n</nve-menu>\n",
-      "summary": "Menu items with icons to add visual context and improve usability.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
     {
       "id": "menu-links",
       "name": "Links",
-      "template": "<nve-menu>\n  <nve-menu-item><nve-icon name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n  <nve-menu-item><nve-icon name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n  <nve-menu-item><nve-icon name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n  <nve-menu-item><nve-icon name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n</nve-menu>\n",
+      "template": "<nve-menu>\n  <nve-menu-item><nve-icon slot=\"prefix\" name=\"person\"></nve-icon><a href=\"#\">profile</a></nve-menu-item>\n  <nve-menu-item><nve-icon slot=\"prefix\" name=\"gear\"></nve-icon> <a href=\"#\">settings</a></nve-menu-item>\n  <nve-menu-item><nve-icon slot=\"prefix\" name=\"star\"></nve-icon> <a href=\"#\">favorites</a></nve-menu-item>\n  <nve-menu-item><nve-icon slot=\"prefix\" name=\"logout\"></nve-icon> <a href=\"#\">logout</a></nve-menu-item>\n</nve-menu>\n",
       "summary": "Menu items with links for navigation functionality within menu structures.",
       "description": "",
       "composition": false,
@@ -83,7 +114,7 @@
     {
       "id": "menu-suffix",
       "name": "Suffix",
-      "template": "<nve-menu>\n  <nve-menu-item><kbd slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n</nve-menu>\n",
+      "template": "<nve-menu>\n  <nve-menu-item>Copy<kbd slot=\"suffix\" nve-text=\"code flat\">CMD + C</kbd></nve-menu-item>\n</nve-menu>\n",
       "summary": "Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.",
       "description": "",
       "composition": false,
@@ -111,10 +142,19 @@
         "pattern"
       ]
     },
+    {
+      "id": "menu-vertical-navigation",
+      "name": "VerticalNavigation",
+      "template": "<div nve-layout=\"row gap:xl\">\n  <nav style=\"width: 175px\">\n    <nve-menu-group behavior-expand expanded>\n      Overview\n      <nve-menu>\n        <nve-menu-item current=\"page\"><nve-icon name=\"home\" slot=\"prefix\"></nve-icon> Getting Started</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"bell\" slot=\"prefix\"></nve-icon> Alerts</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"add\" slot=\"prefix\"></nve-icon> Create New</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n    <nve-menu-group behavior-expand expanded>\n      Data\n      <nve-menu>\n        <nve-menu-item><nve-icon name=\"office-building\" slot=\"prefix\"></nve-icon> Catalog</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"view-as-grid\" slot=\"prefix\"></nve-icon> Dashboards</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"rectangle-stack-horizontal\" slot=\"prefix\"></nve-icon> Volumes</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"layers\" slot=\"prefix\"></nve-icon> Models</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n    <nve-menu-group behavior-expand expanded>\n      Develop\n      <nve-menu>\n        <nve-menu-item><nve-icon name=\"code\" slot=\"prefix\"></nve-icon> Queries</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"doc-checkmark\" slot=\"prefix\"></nve-icon> Notebooks</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"branch\" slot=\"prefix\"></nve-icon> Pipelines</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"beaker\" slot=\"prefix\"></nve-icon> Experiments</nve-menu-item>\n        <nve-menu-item><nve-icon name=\"clock\" slot=\"prefix\"></nve-icon> Runs</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n  </nav>\n  <nav style=\"width: 175px\">\n    <nve-menu-group behavior-expand expanded>\n      Overview\n      <nve-menu>\n        <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n        <nve-menu-item>Alerts</nve-menu-item>\n        <nve-menu-item>Create New</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n    <nve-menu-group behavior-expand expanded>\n      Data\n      <nve-menu>\n        <nve-menu-item>Catalog</nve-menu-item>\n        <nve-menu-item>Dashboards</nve-menu-item>\n        <nve-menu-item>Volumes</nve-menu-item>\n        <nve-menu-item>Models</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n    <nve-menu-group behavior-expand expanded>\n      Develop\n      <nve-menu>\n        <nve-menu-item>Queries</nve-menu-item>\n        <nve-menu-item>Notebooks</nve-menu-item>\n        <nve-menu-item>Pipelines</nve-menu-item>\n        <nve-menu-item>Experiments</nve-menu-item>\n        <nve-menu-item>Runs</nve-menu-item>\n      </nve-menu>\n    </nve-menu-group>\n  </nav>\n</div>\n",
+      "summary": "Vertical navigation menu groups with and without icons. For deeply nested navigation use the `nve-tree` component.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
     {
       "id": "menu-vertical-navigation-drawer",
       "name": "VerticalNavigationDrawer",
-      "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <main nve-layout=\"column gap:md pad:md\">\n    <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n  </main>\n  <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-drawer-content>\n  </nve-drawer>\n</nve-page>\n",
+      "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <main nve-layout=\"column gap:md pad:md\">\n    <nve-button popovertarget=\"menu-drawer\">toggle drawer</nve-button>\n  </main>\n  <nve-drawer position=\"right\" size=\"sm\" modal closable id=\"menu-drawer\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <nve-menu-group behavior-expand expanded>\n        Overview\n        <nve-menu>\n          <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n          <nve-menu-item>Alerts</nve-menu-item>\n          <nve-menu-item>Create New</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n      <nve-menu-group behavior-expand expanded>\n        Data\n        <nve-menu>\n          <nve-menu-item>Catalog</nve-menu-item>\n          <nve-menu-item>Dashboards</nve-menu-item>\n          <nve-menu-item>Volumes</nve-menu-item>\n          <nve-menu-item>Models</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n      <nve-menu-group behavior-expand expanded>\n        Develop\n        <nve-menu>\n          <nve-menu-item>Queries</nve-menu-item>\n          <nve-menu-item>Notebooks</nve-menu-item>\n          <nve-menu-item>Pipelines</nve-menu-item>\n          <nve-menu-item>Experiments</nve-menu-item>\n          <nve-menu-item>Runs</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n    </nve-drawer-content>\n  </nve-drawer>\n</nve-page>\n",
       "summary": "Use a navigation drawer to overlay page content for out-of-context navigation.",
       "description": "",
       "composition": true,
@@ -125,7 +165,7 @@
     {
       "id": "menu-vertical-navigation-panel",
       "name": "VerticalNavigationPanel",
-      "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" expanded style=\"max-width: 280px\">\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu>\n        <nve-menu-item>item 1</nve-menu-item>\n        <nve-menu-item current=\"page\">item 2</nve-menu-item>\n        <nve-menu-item>item 3</nve-menu-item>\n        <nve-menu-item>item 4</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n",
+      "template": "<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\" expanded>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading\">Drawer</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu-group behavior-expand expanded>\n        Overview\n        <nve-menu>\n          <nve-menu-item current=\"page\">Getting Started</nve-menu-item>\n          <nve-menu-item>Alerts</nve-menu-item>\n          <nve-menu-item>Create New</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n      <nve-menu-group behavior-expand expanded>\n        Data\n        <nve-menu>\n          <nve-menu-item>Catalog</nve-menu-item>\n          <nve-menu-item>Dashboards</nve-menu-item>\n          <nve-menu-item>Volumes</nve-menu-item>\n          <nve-menu-item>Models</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n      <nve-menu-group behavior-expand expanded>\n        Develop\n        <nve-menu>\n          <nve-menu-item>Queries</nve-menu-item>\n          <nve-menu-item>Notebooks</nve-menu-item>\n          <nve-menu-item>Pipelines</nve-menu-item>\n          <nve-menu-item>Experiments</nve-menu-item>\n          <nve-menu-item>Runs</nve-menu-item>\n        </nve-menu>\n      </nve-menu-group>\n    </nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:md pad:md\">\n    <p nve-text=\"body\">Content</p>\n  </main>\n</nve-page>\n",
       "summary": "Use an inline navigation panel to push page content aside when navigation is contextual to the page.",
       "description": "",
       "composition": true,

package/dist/menu/menu.global.js

@@ -1,5 +1,5 @@
 //#region src/menu/menu.global.css?inline
-var e = "nve-menu:has(nve-menu-item:state(current)){--padding: 0 0 0 var(--nve-ref-size-200)}nve-menu:has(nve-tooltip),nve-menu:has(nve-tooltip) nve-menu-item{content-visibility:initial}";
+var e = "nve-menu:has(nve-menu-item:state(current)){--padding: 0 0 0 var(--nve-ref-size-200)}nve-menu:has(nve-tooltip),nve-menu:has(nve-tooltip) nve-menu-item{content-visibility:initial}nve-menu[density=compact]{--min-width: 0;nve-menu-item{--gap: 0;width:fit-content}nve-menu-item::part(_slot),nve-menu-item::part(_suffix){display:none!important}}";
 //#endregion
 export { e as default };
 

package/dist/menu/menu.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.global.js","names":[],"sources":["../../src/menu/menu.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-menu:has(nve-menu-item:state(current)) {\n  --padding: 0 0 0 var(--nve-ref-size-200);\n}\n\nnve-menu:has(nve-tooltip),\nnve-menu:has(nve-tooltip) nve-menu-item {\n  content-visibility: initial;\n}\n"],"mappings":""}
+{"version":3,"file":"menu.global.js","names":[],"sources":["../../src/menu/menu.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-menu:has(nve-menu-item:state(current)) {\n  --padding: 0 0 0 var(--nve-ref-size-200);\n}\n\nnve-menu:has(nve-tooltip),\nnve-menu:has(nve-tooltip) nve-menu-item {\n  content-visibility: initial;\n}\n\nnve-menu[density='compact'] {\n  --min-width: 0;\n\n  nve-menu-item {\n    --gap: 0;\n    width: fit-content;\n  }\n\n  nve-menu-item::part(_slot),\n  nve-menu-item::part(_suffix) {\n    display: none !important;\n  }\n}\n"],"mappings":""}

package/dist/menu/menu2.js

@@ -7,16 +7,17 @@ import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js
 import o from "./menu.js";
 import s from "./menu.global.js";
 import { LitElement as c, html as l } from "lit";
-import { queryAssignedElements as u } from "lit/decorators/query-assigned-elements.js";
+import { property as u } from "lit/decorators/property.js";
+import { queryAssignedElements as d } from "lit/decorators/query-assigned-elements.js";
 //#region src/menu/menu.ts
-var d = class extends c {
+var f = class extends c {
 	static {
 		this.styles = i([o]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-menu",
-			version: "2.9.0",
+			version: "2.11.0",
 			children: ["nve-menu-item", "nve-divider"]
 		};
 	}
@@ -30,7 +31,8 @@ var d = class extends c {
 		};
 	}
 	#e = null;
-	#t = () => {
+	#t = !1;
+	#n = () => {
 		this.#e === null && (this.#e = requestAnimationFrame(() => {
 			this.#e = null;
 			let e = this.shadowRoot?.querySelector("[internal-host]");
@@ -51,14 +53,20 @@ var d = class extends c {
 		return l`<div internal-host><slot></slot></div>`;
 	}
 	async firstUpdated() {
-		await this.updateComplete, this.shadowRoot?.querySelector("[internal-host]")?.addEventListener("scroll", this.#t, { passive: !0 });
+		await this.updateComplete, this.shadowRoot?.querySelector("[internal-host]")?.addEventListener("scroll", this.#n, { passive: !0 });
 	}
 	connectedCallback() {
-		super.connectedCallback(), r(this), this._internals.role = "menu", t(this, s);
+		super.connectedCallback(), r(this), this._internals.role = "menu", t(this, s), this.parentElement?.localName === "nve-menu-group" && !this.slot && (this.slot = "menu", this.#t = !0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#t && this.slot === "menu" && (this.slot = ""), this.#t = !1;
 	}
 };
-a([u()], d.prototype, "items", void 0), d = a([e(), n()], d);
+a([u({
+	type: String,
+	reflect: !0
+})], f.prototype, "density", void 0), a([d()], f.prototype, "items", void 0), f = a([e(), n()], f);
 //#endregion
-export { d as Menu };
+export { f as Menu };
 
 //# sourceMappingURL=menu2.js.map

package/dist/menu/menu2.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu2.js","names":[],"sources":["../../src/menu/menu.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  useStyles,\n  attachInternals,\n  keyNavigationList,\n  appendRootNodeStyle,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { MenuItem } from './menu-item.js';\nimport styles from './menu.css?inline';\nimport globalStyles from './menu.global.css?inline';\n\n/**\n * @element nve-menu\n * @description A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - default slot for `nve-menu-item`\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --max-height\n * @event scroll - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\n@keyNavigationList<Menu>()\nexport class Menu extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-menu',\n    version: '0.0.0',\n    children: ['nve-menu-item', 'nve-divider']\n  };\n\n  static elementDefinitions = {};\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      layout: 'vertical',\n      items: this.items\n    };\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements() private items!: MenuItem[];\n\n  #scrollRAF: number | null = null;\n\n  #handleScroll = () => {\n    if (this.#scrollRAF !== null) return;\n    this.#scrollRAF = requestAnimationFrame(() => {\n      this.#scrollRAF = null;\n      const container = this.shadowRoot?.querySelector<HTMLElement>('[internal-host]');\n      if (!container) return;\n      const { scrollTop, scrollHeight, clientHeight } = container;\n      this.dispatchEvent(\n        new CustomEvent('scroll', {\n          bubbles: true,\n          composed: true,\n          detail: { scrollTop, scrollHeight, clientHeight }\n        })\n      );\n    });\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    await this.updateComplete;\n    this.shadowRoot\n      ?.querySelector('[internal-host]')\n      ?.addEventListener('scroll', this.#handleScroll, { passive: true });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'menu';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;AAmCO,IAAM,IAAN,cAAmB,EAAW;;EACnB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,iBAAiB,aAAa;EAC3C;;;EAE4B,KAAA,qBAAA,CAAC;;CAG7B,IAAI,mBAAqC;EACvC,OAAO;GACL,QAAQ;GACR,OAAO,KAAK;EACd;CACF;CAOA,KAA4B;CAE5B,WAAsB;EAChB,KAAK,OAAe,SACxB,KAAK,KAAa,4BAA4B;GAC5C,KAAK,KAAa;GAClB,IAAM,IAAY,KAAK,YAAY,cAA2B,iBAAiB;GAC/E,IAAI,CAAC,GAAW;GAChB,IAAM,EAAE,cAAW,iBAAc,oBAAiB;GAClD,KAAK,cACH,IAAI,YAAY,UAAU;IACxB,SAAS;IACT,UAAU;IACV,QAAQ;KAAE;KAAW;KAAc;IAAa;GAClD,CAAC,CACH;EACF,CAAC;CACH;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,MAAM,eAAe;EAEnB,AADA,MAAM,KAAK,gBACX,KAAK,YACD,cAAc,iBAAiB,CAAC,EAChC,iBAAiB,UAAU,KAAK,IAAe,EAAE,SAAS,GAAK,CAAC;CACtE;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,EAAoB,MAAM,CAAY;CACxC;AACF;AA1CG,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAxBxB,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"menu2.js","names":[],"sources":["../../src/menu/menu.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { Density, KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  useStyles,\n  attachInternals,\n  keyNavigationList,\n  appendRootNodeStyle,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { MenuItem } from './menu-item.js';\nimport styles from './menu.css?inline';\nimport globalStyles from './menu.global.css?inline';\n\n/**\n * @element nve-menu\n * @description A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - default slot for `nve-menu-item`\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --min-width\n * @cssprop --max-height\n * @event scroll - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\n@keyNavigationList<Menu>()\nexport class Menu extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-menu',\n    version: '0.0.0',\n    children: ['nve-menu-item', 'nve-divider']\n  };\n\n  static elementDefinitions = {};\n\n  /**\n   * Determines if the menu is in a compact layout. This hides all menu item content except the prefix icon slot.\n   */\n  @property({ type: String, reflect: true }) density?: Density;\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      layout: 'vertical',\n      items: this.items\n    };\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements() private items!: MenuItem[];\n\n  #scrollRAF: number | null = null;\n  #assignedMenuSlot = false;\n\n  #handleScroll = () => {\n    if (this.#scrollRAF !== null) return;\n    this.#scrollRAF = requestAnimationFrame(() => {\n      this.#scrollRAF = null;\n      const container = this.shadowRoot?.querySelector<HTMLElement>('[internal-host]');\n      if (!container) return;\n      const { scrollTop, scrollHeight, clientHeight } = container;\n      this.dispatchEvent(\n        new CustomEvent('scroll', {\n          bubbles: true,\n          composed: true,\n          detail: { scrollTop, scrollHeight, clientHeight }\n        })\n      );\n    });\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    await this.updateComplete;\n    this.shadowRoot\n      ?.querySelector('[internal-host]')\n      ?.addEventListener('scroll', this.#handleScroll, { passive: true });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'menu';\n    appendRootNodeStyle(this, globalStyles);\n\n    if (this.parentElement?.localName === 'nve-menu-group' && !this.slot) {\n      this.slot = 'menu';\n      this.#assignedMenuSlot = true;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.#assignedMenuSlot && this.slot === 'menu') {\n      this.slot = '';\n    }\n    this.#assignedMenuSlot = false;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAoCO,IAAM,IAAN,cAAmB,EAAW;;EACnB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,iBAAiB,aAAa;EAC3C;;;EAE4B,KAAA,qBAAA,CAAC;;CAQ7B,IAAI,mBAAqC;EACvC,OAAO;GACL,QAAQ;GACR,OAAO,KAAK;EACd;CACF;CAOA,KAA4B;CAC5B,KAAoB;CAEpB,WAAsB;EAChB,KAAK,OAAe,SACxB,KAAK,KAAa,4BAA4B;GAC5C,KAAK,KAAa;GAClB,IAAM,IAAY,KAAK,YAAY,cAA2B,iBAAiB;GAC/E,IAAI,CAAC,GAAW;GAChB,IAAM,EAAE,cAAW,iBAAc,oBAAiB;GAClD,KAAK,cACH,IAAI,YAAY,UAAU;IACxB,SAAS;IACT,UAAU;IACV,QAAQ;KAAE;KAAW;KAAc;IAAa;GAClD,CAAC,CACH;EACF,CAAC;CACH;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,MAAM,eAAe;EAEnB,AADA,MAAM,KAAK,gBACX,KAAK,YACD,cAAc,iBAAiB,CAAC,EAChC,iBAAiB,UAAU,KAAK,IAAe,EAAE,SAAS,GAAK,CAAC;CACtE;CAEA,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,EAAoB,MAAM,CAAY,GAElC,KAAK,eAAe,cAAc,oBAAoB,CAAC,KAAK,SAC9D,KAAK,OAAO,QACZ,KAAK,KAAoB;CAE7B;CAEA,uBAAuB;EAKrB,AAJA,MAAM,qBAAqB,GACvB,KAAK,MAAqB,KAAK,SAAS,WAC1C,KAAK,OAAO,KAEd,KAAK,KAAoB;CAC3B;AACF;AArEG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAaxC,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GA7BxB,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}

package/dist/month/month.d.ts

@@ -31,5 +31,5 @@ export declare class Month extends Control implements ContainerElement {
     static elementDefinitions: {
         [IconButton.metadata.tag]: typeof IconButton;
     };
-    protected get suffixContent(): import("lit").TemplateResult<1>;
+    protected get suffixContent(): import("lit-html").TemplateResult<1>;
 }

package/dist/month/month2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-month",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/notification/notification-group.d.ts

@@ -35,5 +35,5 @@ export declare class NotificationGroup extends LitElement {
         version: string;
         children: string[];
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/notification/notification-group2.js

@@ -20,7 +20,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-notification-group",
-			version: "2.9.0",
+			version: "2.11.0",
 			children: ["nve-notification"]
 		};
 	}

package/dist/notification/notification.d.ts

@@ -101,7 +101,7 @@ export declare class Notification extends LitElement {
         [Icon.metadata.tag]: typeof Icon;
         [IconButton.metadata.tag]: typeof IconButton;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(props: PropertyValues<this>): Promise<void>;

package/dist/notification/notification2.js

@@ -34,7 +34,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-notification",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/page/page-panel/page-panel-content.d.ts

@@ -18,5 +18,5 @@ export declare class PagePanelContent extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/page/page-panel/page-panel-content2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-content",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel-footer.d.ts

@@ -21,5 +21,5 @@ export declare class PagePanelFooter extends LitElement {
     };
     /** @private */
     slot: string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/page/page-panel/page-panel-footer2.js

@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-footer",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel-header.d.ts

@@ -20,5 +20,5 @@ export declare class PagePanelHeader extends LitElement {
     };
     /** @private */
     slot: string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/page/page-panel/page-panel-header2.js

@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-header",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel.d.ts

@@ -47,6 +47,6 @@ export declare class PagePanel extends LitElement {
     constructor();
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/page/page-panel/page-panel2.js

@@ -18,7 +18,7 @@ var f = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel",
-			version: "2.9.0",
+			version: "2.11.0",
 			parents: ["nve-page"]
 		};
 	}

package/dist/page/page.d.ts

@@ -40,6 +40,6 @@ export declare class Page extends LitElement {
     documentScroll: boolean;
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/page/page2.js

@@ -16,7 +16,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-page",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/page-header/page-header.d.ts

@@ -23,7 +23,7 @@ export declare class PageHeader extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     /** @private */
     _internals: ElementInternals;
     connectedCallback(): void;

package/dist/page-header/page-header2.js

@@ -12,7 +12,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-page-header",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/page-loader/page-loader.d.ts

@@ -35,5 +35,5 @@ export declare class PageLoader extends LitElement {
     };
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/page-loader/page-loader2.js

@@ -18,7 +18,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-page-loader",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/pagination/pagination.d.ts

@@ -74,7 +74,7 @@ export declare class Pagination extends Pagination_base {
     };
     /** @private */
     get keynavListConfig(): KeynavListConfig;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     constructor();
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;

package/dist/pagination/pagination2.js

@@ -21,7 +21,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-pagination",
-			version: "2.9.0",
+			version: "2.11.0",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/panel/panel.d.ts

@@ -21,7 +21,7 @@ export declare class PanelHeader extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }
 /**
@@ -41,7 +41,7 @@ export declare class PanelContent extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 /**
  * @element nve-panel-footer
@@ -62,7 +62,7 @@ export declare class PanelFooter extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }
 /**
@@ -119,6 +119,6 @@ export declare class Panel extends LitElement {
     i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
         __set: boolean;
     }>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/panel/panel2.js

@@ -21,7 +21,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-header",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-content",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {
@@ -50,7 +50,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-footer",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {
@@ -69,7 +69,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/password/password.d.ts

@@ -33,5 +33,5 @@ export declare class Password extends Control implements ContainerElement {
     static elementDefinitions: {
         [IconButton.metadata.tag]: typeof IconButton;
     };
-    protected get suffixContent(): import("lit").TemplateResult<1>;
+    protected get suffixContent(): import("lit-html").TemplateResult<1>;
 }

package/dist/password/password2.js

@@ -23,7 +23,7 @@ var u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-password",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {