@nvidia-elements/core 2.20.1 → 2.20.2

package/dist/logo/logo.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.examples.js","names":[],"sources":["../../src/logo/logo.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/logo/define.js';\n\nexport default {\n  title: 'Elements/Logo',\n  component: 'nve-logo',\n};\n\n/**\n * @summary Default NVIDIA logo with aria-label for accessibility. Use for brand identification in headers, footers, and loading states.\n */\nexport const Default = {\n  render: () => html`\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  `\n};\n\n/**\n * @summary Logo size variants (sm, md, lg) for different contexts. Use smaller sizes for dense layouts like toolbars, larger sizes for prominent brand placement.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\">\n  <nve-logo size=\"sm\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary Custom icons slotted into the logo container. Ideal for product icons, team badges, or custom brand marks within the standard logo shape.\n * @tags test-case\n */\nexport const SlottedIcons = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\">\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose large\" size=\"lg\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose medium\" size=\"md\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose small\" size=\"sm\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary All available logo color options. Use colors to differentiate products, teams, or categories within NVIDIA applications.\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary Logo colors optimized for light theme backgrounds. Ensures proper contrast and visibility when used in light mode interfaces.\n * @tags test-case\n */\nexport const LightTheme = {\n  render: () => html`\n<div nve-theme=\"root light\" nve-layout=\"row gap:xs align:wrap pad:sm\" style=\"background: var(--nve-sys-layer-container-background) !important;\">\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n}\n\n/**\n * @summary Logo colors optimized for dark theme backgrounds. Ensures proper contrast and visibility when used in dark mode interfaces.\n * @tags test-case\n */\nexport const DarkTheme = {\n  render: () => html`\n<div nve-theme=\"root dark\" nve-layout=\"row gap:xs align:wrap pad:sm\">\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"logo.examples.js","names":["logo_examples_default"],"sources":["../../src/logo/logo.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/logo/define.js';\n\nexport default {\n  title: 'Elements/Logo',\n  component: 'nve-logo',\n};\n\n/**\n * @summary Default NVIDIA logo with aria-label for accessibility. Use for brand identification in headers, footers, and loading states.\n */\nexport const Default = {\n  render: () => html`\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  `\n};\n\n/**\n * @summary Logo size variants (sm, md, lg) for different contexts. Use smaller sizes for dense layouts like toolbars, larger sizes for prominent brand placement.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\">\n  <nve-logo size=\"sm\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary Custom icons slotted into the logo container. Ideal for product icons, team badges, or custom brand marks within the standard logo shape.\n * @tags test-case\n */\nexport const SlottedIcons = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\">\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose large\" size=\"lg\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose medium\" size=\"md\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose small\" size=\"sm\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary All available logo color options. Use colors to differentiate products, teams, or categories within NVIDIA applications.\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary Logo colors optimized for light theme backgrounds. Ensures proper contrast and visibility when used in light mode interfaces.\n * @tags test-case\n */\nexport const LightTheme = {\n  render: () => html`\n<div nve-theme=\"root light\" nve-layout=\"row gap:xs align:wrap pad:sm\" style=\"background: var(--nve-sys-layer-container-background) !important;\">\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n}\n\n/**\n * @summary Logo colors optimized for dark theme backgrounds. Ensures proper contrast and visibility when used in dark mode interfaces.\n * @tags test-case\n */\nexport const DarkTheme = {\n  render: () => html`\n<div nve-theme=\"root dark\" nve-layout=\"row gap:xs align:wrap pad:sm\">\n  <nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n}"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/logo/logo.js

@@ -1,6 +1,5 @@
-//#region src/logo/logo.css?inline
+// src/logo/logo.css?inline
 var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--gap: var(--nve-ref-space-xs);--height: var(--nve-ref-size-800);--width: var(--nve-ref-size-800);--font-size: calc(var(--width) / 2);--border-radius: calc(var(--height) * .2);--font-weight: var(--nve-ref-font-weight-bold);width:var(--width);height:var(--height);display:inline-block}@supports not (background: color-mix(in oklab,#000 0%,#fff)){:host([color]) [internal-host]{--background: var(--color);border:1px solid transparent;background-image:linear-gradient(#000c 0 0)!important}}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);color:var(--color);width:var(--width);height:var(--height);border-radius:var(--border-radius);display:inline-flex;place-items:center;place-content:center;line-height:0}::slotted([nve-text]){color:inherit!important}::slotted(nve-icon){--color: var(--state-color);--width: var(--font-size);--height: var(--font-size)}:host([size=\"sm\"]){--width: var(--nve-ref-size-600);--height: var(--nve-ref-size-600)}:host([size=\"lg\"]){--width: calc(var(--nve-ref-size-1000) * 1.55);--height: calc(var(--nve-ref-size-1000) * 1.55)}:host([color]) [internal-host]{background:var(--background)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=logo.js.map

package/dist/logo/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","names":[],"sources":["../../src/logo/logo.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --gap: var(--nve-ref-space-xs);\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2);\n  --border-radius: calc(var(--height) * 0.2);\n  --font-weight: var(--nve-ref-font-weight-bold);\n  width: var(--width);\n  height: var(--height);\n  display: inline-block;\n}\n\n@supports not (background: color-mix(in oklab, #000 0%, #fff)) {\n  :host([color]) [internal-host] {\n    --background: var(--color);\n    border: 1px solid transparent;\n    background-image: linear-gradient(hsl(0 0% 0% / 0.8) 0 0) !important;\n  }\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  color: var(--color);\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  place-items: center;\n  place-content: center;\n  line-height: 0;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--state-color);\n  --width: var(--font-size);\n  --height: var(--font-size);\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='lg']) {\n  --width: calc(var(--nve-ref-size-1000) * 1.55);\n  --height: calc(var(--nve-ref-size-1000) * 1.55);\n}\n\n:host([color]) [internal-host] {\n  background: var(--background);\n}\n"],"mappings":""}
+{"version":3,"file":"logo.js","names":["logo_default"],"sources":["../../src/logo/logo.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --gap: var(--nve-ref-space-xs);\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2);\n  --border-radius: calc(var(--height) * 0.2);\n  --font-weight: var(--nve-ref-font-weight-bold);\n  width: var(--width);\n  height: var(--height);\n  display: inline-block;\n}\n\n@supports not (background: color-mix(in oklab, #000 0%, #fff)) {\n  :host([color]) [internal-host] {\n    --background: var(--color);\n    border: 1px solid transparent;\n    background-image: linear-gradient(hsl(0 0% 0% / 0.8) 0 0) !important;\n  }\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  color: var(--color);\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  place-items: center;\n  place-content: center;\n  line-height: 0;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--state-color);\n  --width: var(--font-size);\n  --height: var(--font-size);\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='lg']) {\n  --width: calc(var(--nve-ref-size-1000) * 1.55);\n  --height: calc(var(--nve-ref-size-1000) * 1.55);\n}\n\n:host([color]) [internal-host] {\n  background: var(--background);\n}\n"],"mappings":""}

package/dist/logo/logo2.js

@@ -1,10 +1,10 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { colorStateStyles as t, useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import i from "./logo.js";
 import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
-//#region src/logo/logo.ts
+// src/logo/logo.ts
 var c = class extends a {
 	static {
 		this.styles = n([i, t]);
@@ -12,7 +12,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-logo",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -29,7 +29,6 @@ r([s({
 	type: String,
 	reflect: !0
 })], c.prototype, "size", void 0);
-//#endregion
 export { c as Logo };
 
 //# sourceMappingURL=logo2.js.map

package/dist/logo/logo2.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo2.js","names":[],"sources":["../../src/logo/logo.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 type { Color, Size } from '@nvidia-elements/core/internal';\nimport { useStyles, colorStateStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './logo.css?inline';\n\n/**\n * @element nve-logo\n * @description A visual indicator for a brand or application.\n * @documentation https://nvidia.github.io/elements/docs/elements/logo/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/logo\n * @slot - Text, an image, or other visual content representing the brand or application.\n * @cssprop --background\n * @cssprop --gap\n * @cssprop --color\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Logo extends LitElement {\n  /**\n   * Visual treatment to represent unique color of an application\n   */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /**\n   * Determines size of logo\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-logo',\n    version: '0.0.0'\n  };\n\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n}\n"],"mappings":";;;;;;;AA0BA,IAAa,IAAb,cAA0B,EAAW;;EAWnB,KAAA,SAAA,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAIA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AA7BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"logo2.js","names":["styles","_decorate","__decorate","logo_default","Logo","LitElement","useStyles","colorStateStyles","attachInternals","property"],"sources":["../../src/logo/logo.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 type { Color, Size } from '@nvidia-elements/core/internal';\nimport { useStyles, colorStateStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './logo.css?inline';\n\n/**\n * @element nve-logo\n * @description A visual indicator for a brand or application.\n * @documentation https://nvidia.github.io/elements/docs/elements/logo/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/logo\n * @slot - Text, an image, or other visual content representing the brand or application.\n * @cssprop --background\n * @cssprop --gap\n * @cssprop --color\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Logo extends LitElement {\n  /**\n   * Visual treatment to represent unique color of an application\n   */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /**\n   * Determines size of logo\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-logo',\n    version: '0.0.0'\n  };\n\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n}\n"],"mappings":";;;;;;;AA0BA,IAAaI,IAAb,cAA0BC,EAAW;;EAWnB,KAAA,SAAAC,EAAU,CAACN,GAAQO,CAAgB,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAIA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AA7BGP,EAAA,CAAAQ,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,SAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAQ,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,QAAA,KAAA,CAAA"}

package/dist/menu/define.js

@@ -3,6 +3,5 @@ import { MenuGroup as t } from "./menu-group2.js";
 import { MenuItem as n } from "./menu-item2.js";
 import { define as r } from "@nvidia-elements/foundations/internal/define";
 r(e), r(t), r(n);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/menu/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/menu/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Menu, MenuGroup, MenuItem } from '@nvidia-elements/core/menu';\n\ndefine(Menu);\ndefine(MenuGroup);\ndefine(MenuItem);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-menu': Menu;\n    'nve-menu-group': MenuGroup;\n    'nve-menu-item': MenuItem;\n  }\n}\n"],"mappings":";;;;AAMA,EAAO,CAAI,GACX,EAAO,CAAS,GAChB,EAAO,CAAQ"}
+{"version":3,"file":"define.js","names":["define","Menu","MenuGroup","MenuItem"],"sources":["../../src/menu/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Menu, MenuGroup, MenuItem } from '@nvidia-elements/core/menu';\n\ndefine(Menu);\ndefine(MenuGroup);\ndefine(MenuItem);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-menu': Menu;\n    'nve-menu-group': MenuGroup;\n    'nve-menu-item': MenuItem;\n  }\n}\n"],"mappings":";;;;AAMAA,EAAOC,CAAI,GACXD,EAAOE,CAAS,GAChBF,EAAOG,CAAQ"}

package/dist/menu/menu-group.js

@@ -1,6 +1,5 @@
-//#region src/menu/menu-group.css?inline
+// src/menu/menu-group.css?inline
 var e = ":host{--background: transparent;--font-size: var(--nve-ref-font-size-100);--padding: var(--nve-ref-size-200);--gap: var(--nve-ref-space-sm);--border-radius: var(--nve-ref-border-radius-xs);--color: var(--nve-sys-interaction-color);--width: 100%;--min-height: var(--nve-ref-size-800);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));display:block;width:var(--width);contain:layout}[internal-host]{display:flex;flex-direction:column;width:100%;gap:var(--nve-ref-space-xxs)}button{appearance:none;padding:var(--padding);color:var(--color);background:var(--background);font-size:var(--font-size);border-radius:var(--border-radius);min-height:var(--min-height);gap:var(--gap);font-weight:var(--nve-ref-font-weight-medium);border:0;width:100%;margin:0;font-family:inherit;line-height:normal;text-align:start;cursor:pointer;outline-offset:calc(-1 * var(--nve-ref-size-50));position:relative;display:flex;align-items:center;background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0)!important;&:hover{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}}button:not([disabled]):focus-visible{outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}slot:not([name]){display:inline-flex;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[part=caret]{flex:none;--color: currentColor}slot[name=menu]{width:100%;display:block}::slotted(nve-menu){--min-width: 0;--width: 100%;--padding: 0 0 0 var(--nve-ref-size-200)}::slotted(nve-icon){--color: currentColor}:host([disabled]){--color: var(--nve-sys-interaction-disabled-color)}:host([disabled]) button{--nve-sys-interaction-state-ratio: 0;cursor:not-allowed;opacity:var(--nve-ref-opacity-500)}:host(:not([disabled]):hover){--color: var(--nve-sys-interaction-selected-color)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=menu-group.js.map

package/dist/menu/menu-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-group.js","names":[],"sources":["../../src/menu/menu-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: transparent;\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: var(--nve-ref-size-200);\n  --gap: var(--nve-ref-space-sm);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --color: var(--nve-sys-interaction-color);\n  --width: 100%;\n  --min-height: var(--nve-ref-size-800);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  display: block;\n  width: var(--width);\n  contain: layout;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--nve-ref-space-xxs);\n}\n\nbutton {\n  appearance: none;\n  padding: var(--padding);\n  color: var(--color);\n  background: var(--background);\n  font-size: var(--font-size);\n  border-radius: var(--border-radius);\n  min-height: var(--min-height);\n  gap: var(--gap);\n  font-weight: var(--nve-ref-font-weight-medium);\n  border: 0;\n  width: 100%;\n  margin: 0;\n  font-family: inherit;\n  line-height: normal;\n  text-align: start;\n  cursor: pointer;\n  outline-offset: calc(-1 * var(--nve-ref-size-50));\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n\n  &:hover {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n}\n\nbutton:not([disabled]):focus-visible {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\nslot:not([name]) {\n  display: inline-flex;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n[part='caret'] {\n  flex: none;\n  --color: currentColor;\n}\n\nslot[name='menu'] {\n  width: 100%;\n  display: block;\n}\n\n::slotted(nve-menu) {\n  --min-width: 0;\n  --width: 100%;\n  --padding: 0 0 0 var(--nve-ref-size-200);\n}\n\n::slotted(nve-icon) {\n  --color: currentColor;\n}\n\n:host([disabled]) {\n  --color: var(--nve-sys-interaction-disabled-color);\n}\n\n:host([disabled]) button {\n  --nve-sys-interaction-state-ratio: 0;\n  cursor: not-allowed;\n  opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:not([disabled]):hover) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n"],"mappings":""}
+{"version":3,"file":"menu-group.js","names":["menu_group_default"],"sources":["../../src/menu/menu-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: transparent;\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: var(--nve-ref-size-200);\n  --gap: var(--nve-ref-space-sm);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --color: var(--nve-sys-interaction-color);\n  --width: 100%;\n  --min-height: var(--nve-ref-size-800);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  display: block;\n  width: var(--width);\n  contain: layout;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--nve-ref-space-xxs);\n}\n\nbutton {\n  appearance: none;\n  padding: var(--padding);\n  color: var(--color);\n  background: var(--background);\n  font-size: var(--font-size);\n  border-radius: var(--border-radius);\n  min-height: var(--min-height);\n  gap: var(--gap);\n  font-weight: var(--nve-ref-font-weight-medium);\n  border: 0;\n  width: 100%;\n  margin: 0;\n  font-family: inherit;\n  line-height: normal;\n  text-align: start;\n  cursor: pointer;\n  outline-offset: calc(-1 * var(--nve-ref-size-50));\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n\n  &:hover {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n}\n\nbutton:not([disabled]):focus-visible {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\nslot:not([name]) {\n  display: inline-flex;\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n[part='caret'] {\n  flex: none;\n  --color: currentColor;\n}\n\nslot[name='menu'] {\n  width: 100%;\n  display: block;\n}\n\n::slotted(nve-menu) {\n  --min-width: 0;\n  --width: 100%;\n  --padding: 0 0 0 var(--nve-ref-size-200);\n}\n\n::slotted(nve-icon) {\n  --color: currentColor;\n}\n\n:host([disabled]) {\n  --color: var(--nve-sys-interaction-disabled-color);\n}\n\n:host([disabled]) button {\n  --nve-sys-interaction-state-ratio: 0;\n  cursor: not-allowed;\n  opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:not([disabled]):hover) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n"],"mappings":""}

package/dist/menu/menu-group2.js

@@ -3,12 +3,12 @@ import { attachInternals as t } from "../internal/utils/a11y.js";
 import { TypeExpandableController as n } from "../internal/controllers/type-expandable.controller.js";
 import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
 import { useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as o } from "../icon/icon2.js";
 import s from "./menu-group.js";
 import { LitElement as c, html as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
-//#region src/menu/menu-group.ts
+// src/menu/menu-group.ts
 var d = class extends c {
 	constructor(...e) {
 		super(...e), this.expanded = !1, this.disabled = !1, this.behaviorExpand = !1, this.#e = new n(this), this.#t = () => {
@@ -21,7 +21,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu-group",
-			version: "2.20.1",
+			version: "2.20.2",
 			children: ["nve-menu"]
 		};
 	}
@@ -47,7 +47,6 @@ a([u({
 	type: Boolean,
 	attribute: "behavior-expand"
 })], d.prototype, "behaviorExpand", void 0), d = a([e(), r()], d);
-//#endregion
 export { d as MenuGroup };
 
 //# sourceMappingURL=menu-group2.js.map

package/dist/menu/menu-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-group2.js","names":[],"sources":["../../src/menu/menu-group.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 {\n  attachInternals,\n  audit,\n  scopedRegistry,\n  TypeExpandableController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './menu-group.css?inline';\n\n/**\n * @element nve-menu-group\n * @description Organizes related menu items under a disclosure header that can show or hide one child menu.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @command --open - Opens the menu group.\n * @command --close - Closes the menu group.\n * @command --toggle - Toggles the menu group.\n * @event open - Dispatched when the user requests that the menu group open.\n * @event close - Dispatched when the user requests that the menu group close.\n * @slot - Label content for the disclosure header.\n * @slot prefix - Non-interactive content before the header label, such as an icon or avatar.\n * @slot suffix - Non-interactive content after the header label, such as a badge or count.\n * @slot menu - One `nve-menu` containing the grouped menu items. Direct menus use this slot automatically in browsers; server-rendered menus must set `slot=\"menu\"` explicitly.\n * @cssprop --background\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --width\n * @cssprop --min-height\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @stable false\n */\n@audit()\n@scopedRegistry()\nexport class MenuGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-menu-group',\n    version: '0.0.0',\n    children: ['nve-menu']\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines whether the child menu is visible. */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /** Prevents user activation of the disclosure header. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Determines whether user activation automatically updates the expanded state. */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #typeExpandableController = new TypeExpandableController(this);\n\n  render() {\n    return html`\n      <div internal-host>\n        <button\n          id=\"trigger\"\n          type=\"button\"\n          aria-expanded=${this.expanded}\n          ?disabled=${this.disabled}\n          aria-controls=\"content\"\n          @click=${this.#toggle}\n        >\n          <slot name=\"prefix\"></slot>\n          <slot></slot>\n          <slot name=\"suffix\"></slot>\n          <nve-icon\n            part=\"caret\"\n            name=\"caret\"\n            direction=${this.expanded ? 'down' : 'right'}\n            size=\"sm\"\n            aria-hidden=\"true\"\n          ></nve-icon>\n        </button>\n        <slot id=\"content\" name=\"menu\" ?hidden=${!this.expanded}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  #toggle = () => {\n    if (!this.disabled) {\n      this.#typeExpandableController.toggle();\n    }\n  };\n}\n"],"mappings":";;;;;;;;;;;AA2CO,IAAM,IAAN,cAAwB,EAAW;;EA4DxB,aA9CuC,KAAA,WAAA,IAGA,KAAA,WAAA,IAGqB,KAAA,iBAAA,IAKhD,KAAA,KAAA,IAAI,EAAyB,IAAI,GAmC7C,KAAA,WAAA;GACd,AAAK,KAAK,YACR,KAAK,GAA0B,OAAO;EAE1C;;;EA/DgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,UAAU;EACvB;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAcA;CAEA,SAAS;EACP,OAAO,CAAI,wEAKW,KAAK,SAAS,eAClB,KAAK,SAAS,oCAEjB,KAAK,GAAQ,sHAQR,KAAK,WAAW,SAAS,QAAQ,6FAKR,CAAC,KAAK,SAAS;CAG9D;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA;AAKF;AAnDG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAtB1D,IAAA,EAAA,CAAA,EAAM,GACN,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"menu-group2.js","names":["styles","_decorate","__decorate","menu_group_default","MenuGroup","LitElement","_args","#typeExpandableController","TypeExpandableController","#toggle","useStyles","Icon","attachInternals","property","audit","scopedRegistry"],"sources":["../../src/menu/menu-group.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 {\n  attachInternals,\n  audit,\n  scopedRegistry,\n  TypeExpandableController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './menu-group.css?inline';\n\n/**\n * @element nve-menu-group\n * @description Organizes related menu items under a disclosure header that can show or hide one child menu.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @command --open - Opens the menu group.\n * @command --close - Closes the menu group.\n * @command --toggle - Toggles the menu group.\n * @event open - Dispatched when the user requests that the menu group open.\n * @event close - Dispatched when the user requests that the menu group close.\n * @slot - Label content for the disclosure header.\n * @slot prefix - Non-interactive content before the header label, such as an icon or avatar.\n * @slot suffix - Non-interactive content after the header label, such as a badge or count.\n * @slot menu - One `nve-menu` containing the grouped menu items. Direct menus use this slot automatically in browsers; server-rendered menus must set `slot=\"menu\"` explicitly.\n * @cssprop --background\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --width\n * @cssprop --min-height\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @stable false\n */\n@audit()\n@scopedRegistry()\nexport class MenuGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-menu-group',\n    version: '0.0.0',\n    children: ['nve-menu']\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines whether the child menu is visible. */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /** Prevents user activation of the disclosure header. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Determines whether user activation automatically updates the expanded state. */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #typeExpandableController = new TypeExpandableController(this);\n\n  render() {\n    return html`\n      <div internal-host>\n        <button\n          id=\"trigger\"\n          type=\"button\"\n          aria-expanded=${this.expanded}\n          ?disabled=${this.disabled}\n          aria-controls=\"content\"\n          @click=${this.#toggle}\n        >\n          <slot name=\"prefix\"></slot>\n          <slot></slot>\n          <slot name=\"suffix\"></slot>\n          <nve-icon\n            part=\"caret\"\n            name=\"caret\"\n            direction=${this.expanded ? 'down' : 'right'}\n            size=\"sm\"\n            aria-hidden=\"true\"\n          ></nve-icon>\n        </button>\n        <slot id=\"content\" name=\"menu\" ?hidden=${!this.expanded}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  #toggle = () => {\n    if (!this.disabled) {\n      this.#typeExpandableController.toggle();\n    }\n  };\n}\n"],"mappings":";;;;;;;;;;;AA2CO,IAAMI,IAAN,cAAwBC,EAAW;;EA4DxB,A,aA9CuC,KAAA,WAAA,IAGA,KAAA,WAAA,IAGqB,KAAA,iBAAA,IAKhD,KAAAE,KAAA,IAAIC,EAAyB,IAAI,GAmC7C,KAAAC,WAAA;GACd,AAAK,KAAK,YACR,KAAKF,GAA0B,OAAO;EAE1C;;;EA/DgB,KAAA,SAAAG,EAAU,CAACV,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,UAAU;EACvB;;;EAE4B,KAAA,qBAAA,GACzBW,EAAK,SAAS,MAAMA,EACvB;;CAcA;CAEA,SAAS;EACP,OAAO,CAAI,wEAKW,KAAK,SAAS,eAClB,KAAK,SAAS,oCAEjB,KAAKF,GAAQ,sHAQR,KAAK,WAAW,SAAS,QAAQ,6FAKR,CAAC,KAAK,SAAS;CAG9D;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBG,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA;AAKF;AAnDGX,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzCH,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzCH,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAAT,EAAA,WAAA,kBAAA,KAAA,CAAA,GAtB1D,IAAAH,EAAA,CAAAa,EAAM,GACNC,EAAe,CAAA,GAAAX,CAAA"}

package/dist/menu/menu-item.js

@@ -1,6 +1,5 @@
-//#region src/menu/menu-item.css?inline
+// src/menu/menu-item.css?inline
 var e = ":host{--border-radius: var(--nve-ref-border-radius-xs);--border-background: var(--nve-sys-accent-secondary-background);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-medium);--color: var(--nve-sys-interaction-color);--padding: var(--nve-ref-size-200);--gap: var(--nve-ref-space-sm);--width: 100%;--min-height: var(--nve-ref-size-800);--line-height: 0;--cursor: pointer;--text-transform: capitalize;--opacity: 1;contain:layout;content-visibility:auto;contain-intrinsic-size:auto var(--min-height, initial)}[internal-host]{--_icon-color: var(--color);padding:var(--padding);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);border-radius:var(--border-radius);gap:var(--gap);width:var(--width);min-width:var(--min-width);min-height:var(--min-height);cursor:var(--cursor);text-transform:var(--text-transform);outline-offset:calc(-1 * var(--nve-ref-size-50));opacity:var(--opacity);position:relative;display:flex;align-items:center;white-space:nowrap;border:0;text-align:left}::slotted(nve-icon){--color: var(--_icon-color)}:host(:hover),:host(:state(selected)){--color: var(--nve-sys-interaction-selected-color)}:host(:state(disabled)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host(:state(disabled)){--opacity: var(--nve-ref-opacity-500);--cursor: not-allowed}:host(:state(current)){contain:none;content-visibility:initial;--color: var(--nve-sys-interaction-selected-color)}:host(:state(current)) [internal-host]{contain:none}:host([status=\"danger\"]){--nve-sys-interaction-state-base: var(--nve-sys-support-danger-muted-color);--nve-sys-interaction-selected-color: var(--nve-sys-support-danger-emphasis-color);--border-background: var(--nve-sys-support-danger-emphasis-color);--color: var(--nve-sys-support-danger-emphasis-color)}:host([status=\"danger\"]:hover) ::slotted(nve-icon){--color: var(--nve-sys-support-danger-emphasis-color) !important}:host(:state(current)) [internal-host]:after{width:var(--nve-ref-border-width-xl);border-radius:var(--border-radius);background:var(--border-background);content:\"\";display:block;position:absolute;top:var(--nve-ref-size-50);bottom:var(--nve-ref-size-50);left:calc(var(--nve-ref-size-200) * -1)}::slotted(nve-icon){--color: inherit !important}::slotted(a){text-decoration:var(--text-decoration)!important;color:var(--color)!important;gap:var(--gap)!important;display:flex!important;align-items:center!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}::slotted(*:not(a,nve-icon)){pointer-events:none}::slotted(nve-icon){cursor:var(--cursor)}::slotted(nve-divider){margin:0 calc(-1 * var(--padding))}::slotted([slot=\"suffix\"]){margin-inline-start:auto}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=menu-item.js.map

package/dist/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":[],"sources":["../../src/menu/menu-item.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --border-background: var(--nve-sys-accent-secondary-background);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --color: var(--nve-sys-interaction-color);\n  --padding: var(--nve-ref-size-200);\n  --gap: var(--nve-ref-space-sm);\n  --width: 100%;\n  --min-height: var(--nve-ref-size-800);\n  --line-height: 0;\n  --cursor: pointer;\n  --text-transform: capitalize;\n  --opacity: 1;\n  contain: layout;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--min-height, initial);\n}\n\n[internal-host] {\n  --_icon-color: var(--color);\n  padding: var(--padding);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  border-radius: var(--border-radius);\n  gap: var(--gap);\n  width: var(--width);\n  min-width: var(--min-width);\n  min-height: var(--min-height);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  outline-offset: calc(-1 * var(--nve-ref-size-50));\n  opacity: var(--opacity);\n  position: relative;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n  text-align: left;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_icon-color);\n}\n\n:host(:hover),\n:host(:state(selected)) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n  --cursor: not-allowed;\n}\n\n:host(:state(current)) {\n  contain: none;\n  content-visibility: initial;\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(current)) [internal-host] {\n  contain: none;\n}\n\n:host([status='danger']) {\n  --nve-sys-interaction-state-base: var(--nve-sys-support-danger-muted-color);\n  --nve-sys-interaction-selected-color: var(--nve-sys-support-danger-emphasis-color);\n  --border-background: var(--nve-sys-support-danger-emphasis-color);\n  --color: var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='danger']:hover) ::slotted(nve-icon) {\n  --color: var(--nve-sys-support-danger-emphasis-color) !important;\n}\n\n:host(:state(current)) [internal-host]::after {\n  width: var(--nve-ref-border-width-xl);\n  border-radius: var(--border-radius);\n  background: var(--border-background);\n  content: '';\n  display: block;\n  position: absolute;\n  top: var(--nve-ref-size-50);\n  bottom: var(--nve-ref-size-50);\n  left: calc(var(--nve-ref-size-200) * -1);\n}\n\n::slotted(nve-icon) {\n  --color: inherit !important;\n}\n\n::slotted(a) {\n  text-decoration: var(--text-decoration) !important;\n  color: var(--color) !important;\n  gap: var(--gap) !important;\n  display: flex !important;\n  align-items: center !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n::slotted(*:not(a, nve-icon)) {\n  pointer-events: none;\n}\n\n::slotted(nve-icon) {\n  cursor: var(--cursor);\n}\n\n::slotted(nve-divider) {\n  margin: 0 calc(-1 * var(--padding));\n}\n\n::slotted([slot='suffix']) {\n  margin-inline-start: auto;\n}\n"],"mappings":""}
+{"version":3,"file":"menu-item.js","names":["menu_item_default"],"sources":["../../src/menu/menu-item.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --border-background: var(--nve-sys-accent-secondary-background);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --color: var(--nve-sys-interaction-color);\n  --padding: var(--nve-ref-size-200);\n  --gap: var(--nve-ref-space-sm);\n  --width: 100%;\n  --min-height: var(--nve-ref-size-800);\n  --line-height: 0;\n  --cursor: pointer;\n  --text-transform: capitalize;\n  --opacity: 1;\n  contain: layout;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--min-height, initial);\n}\n\n[internal-host] {\n  --_icon-color: var(--color);\n  padding: var(--padding);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  border-radius: var(--border-radius);\n  gap: var(--gap);\n  width: var(--width);\n  min-width: var(--min-width);\n  min-height: var(--min-height);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  outline-offset: calc(-1 * var(--nve-ref-size-50));\n  opacity: var(--opacity);\n  position: relative;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n  text-align: left;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_icon-color);\n}\n\n:host(:hover),\n:host(:state(selected)) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n  --cursor: not-allowed;\n}\n\n:host(:state(current)) {\n  contain: none;\n  content-visibility: initial;\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(current)) [internal-host] {\n  contain: none;\n}\n\n:host([status='danger']) {\n  --nve-sys-interaction-state-base: var(--nve-sys-support-danger-muted-color);\n  --nve-sys-interaction-selected-color: var(--nve-sys-support-danger-emphasis-color);\n  --border-background: var(--nve-sys-support-danger-emphasis-color);\n  --color: var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='danger']:hover) ::slotted(nve-icon) {\n  --color: var(--nve-sys-support-danger-emphasis-color) !important;\n}\n\n:host(:state(current)) [internal-host]::after {\n  width: var(--nve-ref-border-width-xl);\n  border-radius: var(--border-radius);\n  background: var(--border-background);\n  content: '';\n  display: block;\n  position: absolute;\n  top: var(--nve-ref-size-50);\n  bottom: var(--nve-ref-size-50);\n  left: calc(var(--nve-ref-size-200) * -1);\n}\n\n::slotted(nve-icon) {\n  --color: inherit !important;\n}\n\n::slotted(a) {\n  text-decoration: var(--text-decoration) !important;\n  color: var(--color) !important;\n  gap: var(--gap) !important;\n  display: flex !important;\n  align-items: center !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n::slotted(*:not(a, nve-icon)) {\n  pointer-events: none;\n}\n\n::slotted(nve-icon) {\n  cursor: var(--cursor);\n}\n\n::slotted(nve-divider) {\n  margin: 0 calc(-1 * var(--padding));\n}\n\n::slotted([slot='suffix']) {\n  margin-inline-start: auto;\n}\n"],"mappings":""}

package/dist/menu/menu-item2.js

@@ -1,11 +1,11 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./menu-item.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
 import { ButtonFormControlMixin as s } from "@nvidia-elements/forms/mixins";
-//#region src/menu/menu-item.ts
+// src/menu/menu-item.ts
 var c = class extends s(i) {
 	static {
 		this.styles = t([r]);
@@ -13,7 +13,7 @@ var c = class extends s(i) {
 	static {
 		this.metadata = {
 			tag: "nve-menu-item",
-			version: "2.20.1",
+			version: "2.20.2",
 			parents: ["nve-menu"]
 		};
 	}
@@ -34,7 +34,6 @@ n([o({
 	type: String,
 	reflect: !0
 })], c.prototype, "status", void 0), c = n([e()], c);
-//#endregion
 export { c as MenuItem };
 
 //# sourceMappingURL=menu-item2.js.map

package/dist/menu/menu-item2.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item2.js","names":[],"sources":["../../src/menu/menu-item.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { useStyles, audit } from '@nvidia-elements/core/internal';\nimport styles from './menu-item.css?inline';\n\n/**\n * @element nve-menu-item\n * @description Represents a selectable option within a menu, providing an interactive button for navigation or actions.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - Label and supporting content for the menu option.\n * @slot prefix - slot for prefix icon\n * @slot suffix - slot for suffix icon\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-background\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --line-height\n * @cssprop --cursor\n * @cssprop --opacity\n * @cssprop --text-transform\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class MenuItem extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  /** Applies danger styling to destructive or high-risk menu actions. */\n  @property({ type: String, reflect: true }) status: 'danger';\n\n  static readonly metadata = {\n    tag: 'nve-menu-item',\n    version: '0.0.0',\n    parents: ['nve-menu']\n  };\n\n  static elementDefinitions = {};\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within part=\"_internal\">\n        <slot name=\"prefix\" part=\"_prefix\"></slot>\n        <slot part=\"_slot\"></slot>\n        <slot name=\"suffix\" part=\"_suffix\"></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'menuitem';\n  }\n}\n"],"mappings":";;;;;;;;AAoCO,IAAM,IAAN,cAAuB,EAAuB,CAAU,CAAC,CAAC;;EAC/C,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAKP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;;EAE4B,KAAA,qBAAA,CAAC;;CAE7B,SAAS;EACP,OAAO,CAAI;CAOb;CAEA,cAAc;EAEZ,AADA,MAAM,GACN,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;AACF;AA7BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAL1C,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"menu-item2.js","names":["styles","_decorate","__decorate","menu_item_default","MenuItem","ButtonFormControlMixin","LitElement","useStyles","property","audit"],"sources":["../../src/menu/menu-item.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { useStyles, audit } from '@nvidia-elements/core/internal';\nimport styles from './menu-item.css?inline';\n\n/**\n * @element nve-menu-item\n * @description Represents a selectable option within a menu, providing an interactive button for navigation or actions.\n * @documentation https://nvidia.github.io/elements/docs/elements/menu/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - Label and supporting content for the menu option.\n * @slot prefix - slot for prefix icon\n * @slot suffix - slot for suffix icon\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-background\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --line-height\n * @cssprop --cursor\n * @cssprop --opacity\n * @cssprop --text-transform\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class MenuItem extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  /** Applies danger styling to destructive or high-risk menu actions. */\n  @property({ type: String, reflect: true }) status: 'danger';\n\n  static readonly metadata = {\n    tag: 'nve-menu-item',\n    version: '0.0.0',\n    parents: ['nve-menu']\n  };\n\n  static elementDefinitions = {};\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within part=\"_internal\">\n        <slot name=\"prefix\" part=\"_prefix\"></slot>\n        <slot part=\"_slot\"></slot>\n        <slot name=\"suffix\" part=\"_suffix\"></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'menuitem';\n  }\n}\n"],"mappings":";;;;;;;;AAoCO,IAAMI,IAAN,cAAuBC,EAAuBC,CAAU,CAAC,CAAC;;EAC/C,KAAA,SAAAC,EAAU,CAACP,CAAM,CAAC;;;EAKP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;;EAE4B,KAAA,qBAAA,CAAC;;CAE7B,SAAS;EACP,OAAO,CAAI;CAOb;CAEA,cAAc;EAEZ,AADA,MAAM,GACN,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;AACF;AA7BGC,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,UAAA,KAAA,CAAA,GAL1C,IAAAH,EAAA,CAAAQ,EAAM,CAAA,GAAAL,CAAA"}

package/dist/menu/menu.examples.js

@@ -1,6 +1,5 @@
-//#region src/menu/menu.examples.ts
+// src/menu/menu.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=menu.examples.js.map

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/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 Use vertical navigation menu groups with optional icons to organize related destinations into collapsible sections. Use the `nve-tree` component for deeply nested navigation.\n * @tags pattern\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"}
+{"version":3,"file":"menu.examples.js","names":["menu_examples_default"],"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 Use vertical navigation menu groups with optional icons to organize related destinations into collapsible sections. Use the `nve-tree` component for deeply nested navigation.\n * @tags pattern\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,IAAAA,IAAS"}

package/dist/menu/menu.global.js

@@ -1,6 +1,5 @@
-//#region src/menu/menu.global.css?inline
+// 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}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 };
 
 //# sourceMappingURL=menu.global.js.map

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\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":""}
+{"version":3,"file":"menu.global.js","names":["menu_global_default"],"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/menu.js

@@ -1,6 +1,5 @@
-//#region src/menu/menu.css?inline
+// src/menu/menu.css?inline
 var e = ":host{--padding: 0;--gap: var(--nve-ref-space-xxs);--width: min-content;--max-width: 100%;--min-width: 170px;--max-height: 100%;width:var(--width);min-width:var(--min-width);contain:layout;content-visibility:auto;contain-intrinsic-size:auto var(--max-height, initial)}[internal-host]{padding:var(--padding);gap:var(--gap);display:flex;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);max-height:var(--max-height);margin:0;overflow-y:auto;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=menu.js.map

package/dist/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../../src/menu/menu.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: 0;\n  --gap: var(--nve-ref-space-xxs);\n  --width: min-content;\n  --max-width: 100%;\n  --min-width: 170px;\n  --max-height: 100%;\n  width: var(--width);\n  min-width: var(--min-width);\n  contain: layout;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--max-height, initial);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  gap: var(--gap);\n  display: flex;\n  flex-direction: column;\n  width: var(--width);\n  min-width: var(--min-width);\n  max-width: var(--max-width);\n  max-height: var(--max-height);\n  margin: 0;\n  overflow-y: auto;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n"],"mappings":""}
+{"version":3,"file":"menu.js","names":["menu_default"],"sources":["../../src/menu/menu.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: 0;\n  --gap: var(--nve-ref-space-xxs);\n  --width: min-content;\n  --max-width: 100%;\n  --min-width: 170px;\n  --max-height: 100%;\n  width: var(--width);\n  min-width: var(--min-width);\n  contain: layout;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--max-height, initial);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  gap: var(--gap);\n  display: flex;\n  flex-direction: column;\n  width: var(--width);\n  min-width: var(--min-width);\n  max-width: var(--max-width);\n  max-height: var(--max-height);\n  margin: 0;\n  overflow-y: auto;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n"],"mappings":""}

package/dist/menu/menu2.js

@@ -3,13 +3,13 @@ import { appendRootNodeStyle as t } from "../internal/utils/dom.js";
 import { keyNavigationList as n } from "../internal/controllers/keynav-list.controller.js";
 import { attachInternals as r } from "../internal/utils/a11y.js";
 import { useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.155.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 { property as u } from "lit/decorators/property.js";
 import { queryAssignedElements as d } from "lit/decorators/query-assigned-elements.js";
-//#region src/menu/menu.ts
+// src/menu/menu.ts
 var f = class extends c {
 	static {
 		this.styles = i([o]);
@@ -17,7 +17,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu",
-			version: "2.20.1",
+			version: "2.20.2",
 			children: ["nve-menu-item", "nve-divider"]
 		};
 	}
@@ -66,7 +66,6 @@ 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 { 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 { 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"}
+{"version":3,"file":"menu2.js","names":["styles","globalStyles","_decorate","__decorate","menu_default","menu_global_default","Menu","LitElement","useStyles","#scrollRAF","container","#handleScroll","attachInternals","appendRootNodeStyle","#assignedMenuSlot","property","queryAssignedElements","audit","keyNavigationList"],"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,IAAMM,IAAN,cAAmBC,EAAW;;EACnB,KAAA,SAAAC,EAAU,CAACR,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;EACpB,AAAI,KAAKS,OAAe,SACxB,KAAKA,KAAa,4BAA4B;GAC5C,KAAKA,KAAa;GAClB,IAAMC,IAAY,KAAK,YAAY,cAA2B,iBAAiB;GAC/E,IAAI,CAACA,GAAW;GAChB,IAAM,EAAE,cAAW,iBAAc,oBAAiBA;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,KAAKC,IAAe,EAAE,SAAS,GAAK,CAAC;CACtE;CAEA,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvBC,EAAoB,MAAMZ,CAAY,GAElC,KAAK,eAAe,cAAc,oBAAoB,CAAC,KAAK,SAC9D,KAAK,OAAO,QACZ,KAAKa,KAAoB;CAE7B;CAEA,uBAAuB;EAKrB,AAJA,MAAM,qBAAqB,GACvB,KAAKA,MAAqB,KAAK,SAAS,WAC1C,KAAK,OAAO,KAEd,KAAKA,KAAoB;CAC3B;AACF;AArEGZ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,WAAA,KAAA,CAAA,GAaxCJ,EAAA,CAAAc,EAAsB,CAAA,GAAAV,EAAA,WAAA,SAAA,KAAA,CAAA,GA7BxB,IAAAJ,EAAA,CAAAe,EAAM,GACNC,EAAwB,CAAA,GAAAZ,CAAA"}

package/dist/month/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Month as r } from "./month2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(r), i(t), i(n), i(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/month/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/month/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Month } from '@nvidia-elements/core/month';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Month);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-month': Month;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAK,GACZ,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Month","Control","ControlGroup","ControlMessage"],"sources":["../../src/month/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Month } from '@nvidia-elements/core/month';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Month);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-month': Month;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAK,GACZD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/month/index.js

@@ -1,2 +1 @@
-import { Month as e } from "./month2.js";
-export { e as Month };
+export { Month } from "./month2.js";

package/dist/month/month.examples.js

@@ -1,6 +1,5 @@
-//#region src/month/month.examples.ts
+// src/month/month.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=month.examples.js.map

package/dist/month/month.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"month.examples.js","names":[],"sources":["../../src/month/month.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/forms/define.js';\nimport '@nvidia-elements/core/month/define.js';\n\nexport default {\n  title: 'Elements/Month',\n  component: 'nve-month',\n};\n\n/**\n * @summary Basic month picker with label and validation message. Use for selecting a month and year in forms, such as expiry dates or report periods.\n */\nexport const Default = {\n  render: () => html`\n<nve-month>\n  <label>label</label>\n  <input type=\"month\" />\n  <nve-control-message>message</nve-control-message>\n</nve-month>\n`\n};\n\n/**\n * @summary Month picker with predefined suggestions via datalist. Ideal for guiding users toward common or expected month selections.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-month>\n  <label>label</label>\n  <input type=\"month\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-04\"></option>\n    <option value=\"2018-05\"></option>\n    <option value=\"2018-06\"></option>\n  </datalist>\n</nve-month>\n  `\n}\n\n/**\n * @summary Vertical layout month inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-month>\n    <label>label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month>\n    <label>disabled</label>\n    <input type=\"month\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month>\n    <label>success</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-month>\n\n  <nve-month>\n    <label>error</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-month>\n</div>`\n};\n\n/**\n * @summary Horizontal layout month inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-month layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"month\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-month>\n\n  <nve-month layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-month>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"month.examples.js","names":["month_examples_default"],"sources":["../../src/month/month.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/forms/define.js';\nimport '@nvidia-elements/core/month/define.js';\n\nexport default {\n  title: 'Elements/Month',\n  component: 'nve-month',\n};\n\n/**\n * @summary Basic month picker with label and validation message. Use for selecting a month and year in forms, such as expiry dates or report periods.\n */\nexport const Default = {\n  render: () => html`\n<nve-month>\n  <label>label</label>\n  <input type=\"month\" />\n  <nve-control-message>message</nve-control-message>\n</nve-month>\n`\n};\n\n/**\n * @summary Month picker with predefined suggestions via datalist. Ideal for guiding users toward common or expected month selections.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-month>\n  <label>label</label>\n  <input type=\"month\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"2018-04\"></option>\n    <option value=\"2018-05\"></option>\n    <option value=\"2018-06\"></option>\n  </datalist>\n</nve-month>\n  `\n}\n\n/**\n * @summary Vertical layout month inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-month>\n    <label>label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month>\n    <label>disabled</label>\n    <input type=\"month\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month>\n    <label>success</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-month>\n\n  <nve-month>\n    <label>error</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-month>\n</div>`\n};\n\n/**\n * @summary Horizontal layout month inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-month layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"month\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-month layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-month>\n\n  <nve-month layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"month\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-month>\n</div>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}