@nvidia-elements/core 0.0.5 → 0.0.7

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

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

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

@@ -23,7 +23,7 @@ var h = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel",
-			version: "0.0.5",
+			version: "0.0.7",
 			parents: ["nve-page"]
 		};
 	}

package/dist/page/page2.js

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

package/dist/page-header/page-header.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.examples.js","names":[],"sources":["../../src/page-header/page-header.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/page-header/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Page Header',\n  component: 'nve-page-header',\n};\n\n/**\n * @summary Basic page header with logo, navigation links, and user actions in a standard layout structure.\n */\nexport const Default = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.\n */\nexport const DropdownMenu = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\">EL</nve-icon-button>\n</nve-page-header>\n<nve-dropdown position=\"bottom\" id=\"page-header-dropdown\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> Menu Item</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n  `\n  }\n};\n\n/**\n * @summary Use a Icon Button to represent collapsible top-level navigation, optimal for mobile or constrained viewport sizes.\n */\nexport const MenuButton = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.\n */\nexport const AppLogo = {\n  render: () => html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"yellow-nova\">AV</nve-logo>\n  <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  <nve-button container=\"flat\" selected><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n  `\n};\n\n/**\n * @summary Page header with primary navigation positioned after the logo and branding area.\n */\nexport const PrefixNavigation = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header with navigation centered in the available space for balanced visual hierarchy.\n */\nexport const CenterNavigation = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <div nve-layout=\"row align:center gap:xxs full\">\n    <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  </div>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header with all navigation positioned at the end for common and persistent user actions between page navigation.\n */\nexport const SuffixNavigation = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header with integrated search functionality for content discovery within the application.\n */\nexport const Search = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-search slot=\"suffix\" rounded style=\"width: 220px\">\n    <input type=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header displaying user information and avatar for personalized application experiences.\n */\nexport const UserDetail = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">GH</nve-icon-button>\n  <div slot=\"suffix\" nve-layout=\"column gap:md\">\n    <p nve-text=\"label sm trim:none\">Grace Hopper</p>\n    <p nve-text=\"body sm muted trim:none nowrap\">infra-0087ef65-19e80</p>\n  </div>\n</nve-page-header>\n  `\n  }\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"page-header.examples.js","names":[],"sources":["../../src/page-header/page-header.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/page-header/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Page Header',\n  component: 'nve-page-header',\n};\n\n/**\n * @summary Basic page header with logo, navigation links, and user actions in a standard layout structure.\n */\nexport const Default = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.\n */\nexport const DropdownMenu = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\">EL</nve-icon-button>\n</nve-page-header>\n<nve-dropdown position=\"bottom\" id=\"page-header-dropdown\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> Menu Item</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n  `\n  }\n};\n\n/**\n * @summary Use a Icon Button to represent collapsible top-level navigation, optimal for mobile or constrained viewport sizes.\n */\nexport const MenuButton = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.\n */\nexport const AppLogo = {\n  render: () => html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"yellow-nova\">AV</nve-logo>\n  <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  <nve-button container=\"flat\" selected><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n  `\n};\n\n/**\n * @summary Page header with primary navigation positioned after the logo and branding area.\n */\nexport const PrefixNavigation = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header with navigation centered in the available space for balanced visual hierarchy.\n */\nexport const CenterNavigation = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <div nve-layout=\"row align:center gap:xxs full\">\n    <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  </div>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header with all navigation positioned at the end for common and persistent user actions between page navigation.\n */\nexport const SuffixNavigation = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header with integrated search functionality for content discovery within the application.\n */\nexport const Search = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-search slot=\"suffix\" rounded style=\"width: 220px\">\n    <input type=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n</nve-page-header>\n  `\n  }\n};\n\n/**\n * @summary Page header displaying user information and avatar for personalized application experiences.\n */\nexport const UserDetail = {\n  render: () => {\n    return html`\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">GH</nve-icon-button>\n  <div slot=\"suffix\" nve-layout=\"column gap:md\">\n    <p nve-text=\"label sm trim:none\">Grace Hopper</p>\n    <p nve-text=\"body sm muted trim:none nowrap\">infra-0087ef65-19e80</p>\n  </div>\n</nve-page-header>\n  `\n  }\n};"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/page-header/page-header.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "core-page-header_default",
       "name": "Default",
-      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
+      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
       "summary": "Basic page header with logo, navigation links, and user actions in a standard layout structure.",
       "description": "",
       "composition": true,
@@ -14,7 +14,7 @@
     {
       "id": "core-page-header_dropdown-menu",
       "name": "DropdownMenu",
-      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\"\n    >EL</nve-icon-button\n  >\n</nve-page-header>\n<nve-dropdown position=\"bottom\" id=\"page-header-dropdown\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> Menu Item</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
+      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\" popovertarget=\"page-header-dropdown\"\n    >EL</nve-icon-button\n  >\n</nve-page-header>\n<nve-dropdown position=\"bottom\" id=\"page-header-dropdown\">\n  <nve-menu>\n    <nve-menu-item><nve-icon name=\"person\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"gear\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-menu-item><nve-icon name=\"star\"></nve-icon> Menu Item</nve-menu-item>\n    <nve-divider></nve-divider>\n    <nve-menu-item><nve-icon name=\"logout\"></nve-icon> Menu Item</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
       "summary": "Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.",
       "description": "",
       "composition": true,
@@ -23,7 +23,7 @@
     {
       "id": "core-page-header_menu-button",
       "name": "MenuButton",
-      "template": "<nve-page-header>\n  <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
+      "template": "<nve-page-header>\n  <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n",
       "summary": "Use a Icon Button to represent collapsible top-level navigation, optimal for mobile or constrained viewport sizes.",
       "description": "",
       "composition": true,
@@ -41,7 +41,7 @@
     {
       "id": "core-page-header_prefix-navigation",
       "name": "PrefixNavigation",
-      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
+      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with primary navigation positioned after the logo and branding area.",
       "description": "",
       "composition": true,
@@ -50,7 +50,7 @@
     {
       "id": "core-page-header_center-navigation",
       "name": "CenterNavigation",
-      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <div nve-layout=\"row align:center gap:xxs full\">\n    <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  </div>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
+      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <div nve-layout=\"row align:center gap:xxs full\">\n    <nve-button container=\"flat\"><a href=\"#\">Features</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n    <nve-button container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  </div>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with navigation centered in the available space for balanced visual hierarchy.",
       "description": "",
       "composition": true,
@@ -59,7 +59,7 @@
     {
       "id": "core-page-header_suffix-navigation",
       "name": "SuffixNavigation",
-      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
+      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Features</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Guide</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Docs</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Teams</a></nve-button>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n  <nve-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\"><a href=\"#\">Start Building</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with all navigation positioned at the end for common and persistent user actions between page navigation.",
       "description": "",
       "composition": true,
@@ -68,7 +68,7 @@
     {
       "id": "core-page-header_search",
       "name": "Search",
-      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-search slot=\"suffix\" rounded style=\"width: 220px\">\n    <input type=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n</nve-page-header>\n",
+      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-search slot=\"suffix\" rounded style=\"width: 220px\">\n    <input type=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button slot=\"suffix\" container=\"flat\"><a href=\"#\">Login</a></nve-button>\n</nve-page-header>\n",
       "summary": "Page header with integrated search functionality for content discovery within the application.",
       "description": "",
       "composition": true,
@@ -77,7 +77,7 @@
     {
       "id": "core-page-header_user-detail",
       "name": "UserDetail",
-      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">GH</nve-icon-button>\n  <div slot=\"suffix\" nve-layout=\"column gap:md\">\n    <p nve-text=\"label sm trim:none\">Grace Hopper</p>\n    <p nve-text=\"body sm muted trim:none nowrap\">infra-0087ef65-19e80</p>\n  </div>\n</nve-page-header>\n",
+      "template": "<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">GH</nve-icon-button>\n  <div slot=\"suffix\" nve-layout=\"column gap:md\">\n    <p nve-text=\"label sm trim:none\">Grace Hopper</p>\n    <p nve-text=\"body sm muted trim:none nowrap\">infra-0087ef65-19e80</p>\n  </div>\n</nve-page-header>\n",
       "summary": "Page header displaying user information and avatar for personalized application experiences.",
       "description": "",
       "composition": true,

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

@@ -1,5 +1,5 @@
 //#region src/page-header/page-header.css?inline
-var e = ":host{--background: var(--nve-sys-layer-shell-background);--padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--margin-inline: var(--nve-ref-space-lg);contain:initial;height:48px;width:100%}[internal-host]{background:var(--background);padding:var(--padding);border-bottom:var(--border-bottom);display:flex;flex-direction:row;place-items:center flex-start;justify-content:space-between;line-height:0;height:100%}slot{display:flex;flex-direction:row;place-items:center flex-start;margin:0;min-height:0}slot:not([name]){width:100%;margin-inline:var(--margin-inline)}::slotted(h1[slot=\"prefix\"]),::slotted(h2[slot=\"prefix\"]),::slotted(a[slot=\"prefix\"]){font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-semibold)!important;color:var(--nve-sys-text-muted-color)!important;margin:0!important;text-wrap:nowrap!important;text-decoration:none!important}::slotted(h1[slot=\"prefix\"]):before,::slotted(h2[slot=\"prefix\"]):before,::slotted(a[slot=\"prefix\"]):before,::slotted(h1[slot=\"prefix\"]):after,::slotted(h2[slot=\"prefix\"]):after,::slotted(a[slot=\"prefix\"]):after{display:none!important}[internal-host]{--gap: var(--nve-ref-space-xxs)}slot{gap:var(--gap)}::slotted([slot=\"prefix\"]:not([container=\"flat\"])){margin-inline-end:var(--gap)!important}::slotted([slot=\"suffix\"]:not([container=\"flat\"])){margin-inline-start:var(--gap)!important}::slotted(nve-icon-button[interaction][slot=\"suffix\"]:last-child){margin-inline-start:var(--nve-ref-space-md)!important}";
+var e = ":host{--background: var(--nve-sys-layer-shell-background);--padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--margin-inline: var(--nve-ref-space-lg);contain:initial;height:48px;width:100%}[internal-host]{background:var(--background);padding:var(--padding);border-bottom:var(--border-bottom);display:flex;flex-direction:row;place-items:center flex-start;justify-content:space-between;line-height:0;height:100%}slot{display:flex;flex-direction:row;place-items:center flex-start;margin:0;min-height:0}slot:not([name]){width:100%;margin-inline:var(--margin-inline)}::slotted(h1[slot=\"prefix\"]),::slotted(h2[slot=\"prefix\"]),::slotted(a[slot=\"prefix\"]){font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-semibold)!important;color:var(--nve-sys-text-muted-color)!important;margin:0!important;text-wrap:nowrap!important;text-decoration:none!important}::slotted(h1[slot=\"prefix\"]):before,::slotted(h2[slot=\"prefix\"]):before,::slotted(a[slot=\"prefix\"]):before,::slotted(h1[slot=\"prefix\"]):after,::slotted(h2[slot=\"prefix\"]):after,::slotted(a[slot=\"prefix\"]):after{display:none!important}::slotted(a),::slotted(span){text-wrap:nowrap!important}[internal-host]{--gap: var(--nve-ref-space-xxs)}slot{gap:var(--gap)}::slotted([slot=\"prefix\"]:not([container=\"flat\"])){margin-inline-end:var(--gap)!important}::slotted([slot=\"suffix\"]:not([container=\"flat\"])){margin-inline-start:var(--gap)!important}::slotted(nve-icon-button[interaction][slot=\"suffix\"]:last-child){margin-inline-start:var(--nve-ref-space-md)!important}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":[],"sources":["../../src/page-header/page-header.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(--nve-sys-layer-shell-background);\n  --padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --margin-inline: var(--nve-ref-space-lg);\n  contain: initial;\n  height: 48px;\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  display: flex;\n  flex-direction: row;\n  place-items: center flex-start;\n  justify-content: space-between;\n  line-height: 0;\n  height: 100%;\n}\n\nslot {\n  display: flex;\n  flex-direction: row;\n  place-items: center flex-start;\n  margin: 0;\n  min-height: 0;\n}\n\nslot:not([name]) {\n  width: 100%;\n  margin-inline: var(--margin-inline);\n}\n\n::slotted(h1[slot='prefix']),\n::slotted(h2[slot='prefix']),\n::slotted(a[slot='prefix']) {\n  font-size: var(--nve-ref-font-size-200) !important;\n  font-weight: var(--nve-ref-font-weight-semibold) !important;\n  color: var(--nve-sys-text-muted-color) !important;\n  margin: 0 !important;\n  text-wrap: nowrap !important;\n  text-decoration: none !important;\n}\n\n::slotted(h1[slot='prefix'])::before,\n::slotted(h2[slot='prefix'])::before,\n::slotted(a[slot='prefix'])::before,\n::slotted(h1[slot='prefix'])::after,\n::slotted(h2[slot='prefix'])::after,\n::slotted(a[slot='prefix'])::after {\n  display: none !important;\n}\n\n/* gap spacing, not API exposed yet as this is still stabilizing */\n[internal-host] {\n  --gap: var(--nve-ref-space-xxs);\n}\n\nslot {\n  gap: var(--gap);\n}\n\n::slotted([slot='prefix']:not([container='flat'])) {\n  margin-inline-end: var(--gap) !important;\n}\n\n::slotted([slot='suffix']:not([container='flat'])) {\n  margin-inline-start: var(--gap) !important;\n}\n\n::slotted(nve-icon-button[interaction][slot='suffix']:last-child) {\n  margin-inline-start: var(--nve-ref-space-md) !important;\n}\n"],"mappings":""}
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/page-header/page-header.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(--nve-sys-layer-shell-background);\n  --padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --margin-inline: var(--nve-ref-space-lg);\n  contain: initial;\n  height: 48px;\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  display: flex;\n  flex-direction: row;\n  place-items: center flex-start;\n  justify-content: space-between;\n  line-height: 0;\n  height: 100%;\n}\n\nslot {\n  display: flex;\n  flex-direction: row;\n  place-items: center flex-start;\n  margin: 0;\n  min-height: 0;\n}\n\nslot:not([name]) {\n  width: 100%;\n  margin-inline: var(--margin-inline);\n}\n\n::slotted(h1[slot='prefix']),\n::slotted(h2[slot='prefix']),\n::slotted(a[slot='prefix']) {\n  font-size: var(--nve-ref-font-size-200) !important;\n  font-weight: var(--nve-ref-font-weight-semibold) !important;\n  color: var(--nve-sys-text-muted-color) !important;\n  margin: 0 !important;\n  text-wrap: nowrap !important;\n  text-decoration: none !important;\n}\n\n::slotted(h1[slot='prefix'])::before,\n::slotted(h2[slot='prefix'])::before,\n::slotted(a[slot='prefix'])::before,\n::slotted(h1[slot='prefix'])::after,\n::slotted(h2[slot='prefix'])::after,\n::slotted(a[slot='prefix'])::after {\n  display: none !important;\n}\n\n::slotted(a),\n::slotted(span) {\n  text-wrap: nowrap !important;\n}\n\n/* gap spacing, not API exposed yet as this is still stabilizing */\n[internal-host] {\n  --gap: var(--nve-ref-space-xxs);\n}\n\nslot {\n  gap: var(--gap);\n}\n\n::slotted([slot='prefix']:not([container='flat'])) {\n  margin-inline-end: var(--gap) !important;\n}\n\n::slotted([slot='suffix']:not([container='flat'])) {\n  margin-inline-start: var(--gap) !important;\n}\n\n::slotted(nve-icon-button[interaction][slot='suffix']:last-child) {\n  margin-inline-start: var(--nve-ref-space-md) !important;\n}\n"],"mappings":""}

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

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-page-header",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {

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

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

package/dist/pagination/pagination.d.ts

@@ -30,6 +30,8 @@ declare const Pagination_base: {
         readonly _validators: import('@nvidia-elements/forms').Validator[];
         readonly _internals: ElementInternals;
         connectedCallback(): void;
+        disconnectedCallback(): void;
+        _stopInternalPropagation: (event: Event) => void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         _handleAttributeChange(name: string, newValue: string): void;
         formResetCallback(): void;
@@ -398,7 +400,6 @@ declare const Pagination_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
-        disconnectedCallback?(): void;
         requestUpdate?(name?: string, oldValue?: unknown): void;
     };
     formAssociated: boolean;

package/dist/pagination/pagination2.js

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

package/dist/panel/panel2.js

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

package/dist/password/password2.js

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

package/dist/preferences-input/preferences-input.d.ts

@@ -40,6 +40,8 @@ declare const PreferencesInput_base: {
         readonly _validators: import('@nvidia-elements/forms').Validator[];
         readonly _internals: ElementInternals;
         connectedCallback(): void;
+        disconnectedCallback(): void;
+        _stopInternalPropagation: (event: Event) => void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         _handleAttributeChange(name: string, newValue: string): void;
         formResetCallback(): void;
@@ -408,7 +410,6 @@ declare const PreferencesInput_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
-        disconnectedCallback?(): void;
         requestUpdate?(name?: string, oldValue?: unknown): void;
     };
     formAssociated: boolean;

package/dist/preferences-input/preferences-input2.js

@@ -43,7 +43,7 @@ var x = class extends g(d) {
 	static {
 		this.metadata = {
 			tag: "nve-preferences-input",
-			version: "0.0.5",
+			version: "0.0.7",
 			valueSchema: {
 				type: "object",
 				properties: {

package/dist/progress-bar/progress-bar2.js

@@ -16,7 +16,7 @@ var c = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-progress-bar",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {

package/dist/progress-ring/progress-ring2.js

@@ -20,7 +20,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-progress-ring",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/progressive-filter-chip/progressive-filter-chip2.js

@@ -23,7 +23,7 @@ var b = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-progressive-filter-chip",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/pulse/pulse2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-pulse",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/radio/radio-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio-group",
-			version: "0.0.5",
+			version: "0.0.7",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/radio/radio2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio",
-			version: "0.0.5",
+			version: "0.0.7",
 			children: [
 				"label",
 				"input",

package/dist/range/range2.js

@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	connectedCallback() {

package/dist/resize-handle/resize-handle.d.ts

@@ -27,6 +27,8 @@ declare const ResizeHandle_base: {
         readonly _validators: import('@nvidia-elements/forms').Validator[];
         readonly _internals: ElementInternals;
         connectedCallback(): void;
+        disconnectedCallback(): void;
+        _stopInternalPropagation: (event: Event) => void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         _handleAttributeChange(name: string, newValue: string): void;
         formResetCallback(): void;
@@ -395,7 +397,6 @@ declare const ResizeHandle_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
-        disconnectedCallback?(): void;
         requestUpdate?(name?: string, oldValue?: unknown): void;
     };
     formAssociated: boolean;

package/dist/resize-handle/resize-handle2.js

@@ -18,7 +18,7 @@ var u = class extends l(a) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "0.0.5",
+			version: "0.0.7",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/search/search2.js

@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/select/select2.js

@@ -26,7 +26,7 @@ var b = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/skeleton/skeleton2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-skeleton",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {

package/dist/sort-button/sort-button.d.ts

@@ -36,4 +36,5 @@ export declare class SortButton extends BaseButton {
     render(): import('lit-html').TemplateResult<1>;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/dist/sort-button/sort-button2.js

@@ -19,7 +19,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {
@@ -33,17 +33,21 @@ var l = {
 		super(), this.sort = "none", this.i18n = this.#e.i18n, this.type = "button";
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._internals.role = "spinbutton", this.addEventListener("click", () => {
-			this._internals.ariaLabel = `${this.#e.i18n.sort} ${l[this.sort]}`, this.dispatchEvent(new CustomEvent("sort", {
-				detail: {
-					value: this.sort,
-					next: l[this.sort]
-				},
-				bubbles: !0,
-				composed: !0
-			}));
-		});
+		super.connectedCallback(), this._internals.role = "spinbutton", this.addEventListener("click", this.#t);
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.#t);
+	}
+	#t = () => {
+		this._internals.ariaLabel = `${this.#e.i18n.sort} ${l[this.sort]}`, this.dispatchEvent(new CustomEvent("sort", {
+			detail: {
+				value: this.sort,
+				next: l[this.sort]
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	};
 };
 e([c({
 	type: String,

package/dist/sort-button/sort-button2.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-button2.js","names":["#i18nController"],"sources":["../../src/sort-button/sort-button.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 { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, BaseButton, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends BaseButton {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-sort-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * The current sort value, can be ascending, descending, or none.\n   */\n  @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'spinbutton';\n\n    this.addEventListener('click', () => {\n      this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n      this.dispatchEvent(\n        new CustomEvent('sort', {\n          detail: { value: this.sort, next: nextSort[this.sort] },\n          bubbles: true,\n          composed: true\n        })\n      );\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;AASA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;CACb,EAgBM,IAAA,cAAyB,EAAW;;gBACzB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAOD,KAAwC,IAAI,EAAqB,KAAK;CAOtE,SAAS;AACP,SAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;;CAKtG,cAAc;AAEZ,EADA,OAAO,cAlB8E,oBAOpD,MAAA,EAAqB,MAYtD,KAAK,OAAO;;CAGd,oBAAoB;AAIlB,EAHA,MAAM,mBAAmB,EACzB,KAAK,WAAW,OAAO,cAEvB,KAAK,iBAAiB,eAAe;AAEnC,GADA,KAAK,WAAW,YAAY,GAAG,MAAA,EAAqB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;IACtB,QAAQ;KAAE,OAAO,KAAK;KAAM,MAAM,EAAS,KAAK;KAAO;IACvD,SAAS;IACT,UAAU;IACX,CAAC,CACH;IACD;;;GAnCH,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAOzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAvB5B,GAAgB,CAAA,EAAA,EAAA"}
+{"version":3,"file":"sort-button2.js","names":["#i18nController","#onClick"],"sources":["../../src/sort-button/sort-button.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 { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { useStyles, BaseButton, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport styles from './sort-button.css?inline';\n\nconst nextSort = {\n  none: 'ascending',\n  ascending: 'descending',\n  descending: 'none'\n};\n\n/**\n * @element nve-sort-button\n * @description A sort button is a control that enables users to sort a list of items in ascending or descending order.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/sort-button\n * @event sort - Dispatched on sort button click, returns the current sort value and the next sort value.\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-radius\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n */\n@scopedRegistry()\nexport class SortButton extends BaseButton {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-sort-button',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * The current sort value, can be ascending, descending, or none.\n   */\n  @property({ type: String, reflect: true }) sort: 'ascending' | 'descending' | 'none' = 'none';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <nve-icon part=\"icon\" .name=${this.sort === 'descending' ? 'sort-descending' : 'sort-ascending'} aria-hidden=\"true\"></nve-icon>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'spinbutton';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = () => {\n    this._internals.ariaLabel = `${this.#i18nController.i18n.sort} ${nextSort[this.sort]}`;\n    this.dispatchEvent(\n      new CustomEvent('sort', {\n        detail: { value: this.sort, next: nextSort[this.sort] },\n        bubbles: true,\n        composed: true\n      })\n    );\n  };\n}\n"],"mappings":";;;;;;;;;;AASA,IAAM,IAAW;CACf,MAAM;CACN,WAAW;CACX,YAAY;CACb,EAgBM,IAAA,cAAyB,EAAW;;gBACzB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAOD,KAAwC,IAAI,EAAqB,KAAK;CAOtE,SAAS;AACP,SAAO,CAAI,gEAEuB,KAAK,SAAS,eAAe,oBAAoB,iBAAiB;;CAKtG,cAAc;AAEZ,EADA,OAAO,cAlB8E,oBAOpD,MAAA,EAAqB,MAYtD,KAAK,OAAO;;CAGd,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,KAAK,WAAW,OAAO,cACvB,KAAK,iBAAiB,SAAS,MAAA,EAAc;;CAG/C,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,SAAS,MAAA,EAAc;;CAGlD,WAAiB;AAEf,EADA,KAAK,WAAW,YAAY,GAAG,MAAA,EAAqB,KAAK,KAAK,GAAG,EAAS,KAAK,SAC/E,KAAK,cACH,IAAI,YAAY,QAAQ;GACtB,QAAQ;IAAE,OAAO,KAAK;IAAM,MAAM,EAAS,KAAK;IAAO;GACvD,SAAS;GACT,UAAU;GACX,CAAC,CACH;;;GAzCF,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAOzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAvB5B,GAAgB,CAAA,EAAA,EAAA"}

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	render() {

package/dist/star-rating/star-rating2.js

@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "0.0.5"
+			version: "0.0.7"
 		};
 	}
 	static {

package/dist/steps/steps-item.js

@@ -1,5 +1,5 @@
 //#region src/steps/steps-item.css?inline
-var e = ":host{--width: auto;--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-semibold);--border-radius: var(--nve-ref-border-radius-xl);--color: var(--nve-sys-text-muted-color);--cursor: pointer;--text-transform: capitalize;--nve-sys-interaction-state-ratio: 0}[internal-host]{--_icon-button-color: var(--color);width:var(--width);gap:var(--nve-ref-space-xs);padding:var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);color:var(--color);font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--nve-ref-font-size-500);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;border-radius:var(--border-radius);cursor:var(--cursor);text-transform:var(--text-transform);display:inline-flex;align-items:center;border:0;position:relative}nve-progress-ring,nve-icon-button{cursor:pointer}nve-icon-button#number-icon{box-sizing:content-box;border:var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);border-radius:100%;--color: var(--_icon-button-color);--height: var(--nve-ref-size-600);--width: var(--nve-ref-size-600);--background: transparent}nve-icon-button[interaction=emphasis]{--background: var(--nve-sys-support-success-color);--color: var(--nve-sys-text-white-color)}:host(:state(selected)){--color: var(--nve-sys-text-emphasis-color);--font-weight: var(--nve-ref-font-weight-semibold);--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host(:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--cursor: not-allowed}:host(:hover:not(:state(disabled),:state(selected))){--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host([container=\"condensed\"]) div{padding:var(--nve-ref-size-200)}";
+var e = ":host{--width: auto;--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-semibold);--border-radius: var(--nve-ref-border-radius-xl);--color: var(--nve-sys-text-muted-color);--cursor: pointer;--text-transform: capitalize;--nve-sys-interaction-state-ratio: 0}[internal-host]{--_icon-button-color: var(--color);width:var(--width);gap:var(--nve-ref-space-xs);padding:var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);color:var(--color);font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--nve-ref-font-size-500);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;border-radius:var(--border-radius);cursor:var(--cursor);text-transform:var(--text-transform);display:inline-flex;align-items:center;border:0;position:relative}nve-progress-ring,nve-icon-button{--height: var(--nve-ref-size-700);--width: var(--nve-ref-size-700);cursor:pointer}nve-icon-button#number-icon{box-sizing:content-box;border:var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);border-radius:100%;--color: var(--_icon-button-color);--height: var(--nve-ref-size-600);--width: var(--nve-ref-size-600);--background: transparent}nve-icon-button[interaction=emphasis]{--background: var(--nve-sys-support-success-color);--color: var(--nve-sys-text-white-color)}:host(:state(selected)){--color: var(--nve-sys-text-emphasis-color);--font-weight: var(--nve-ref-font-weight-semibold);--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host(:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--cursor: not-allowed}:host(:hover:not(:state(disabled),:state(selected))){--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host([container=\"condensed\"]) div{padding:var(--nve-ref-size-200)}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"steps-item.js","names":[],"sources":["../../src/steps/steps-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  --width: auto;\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --border-radius: var(--nve-ref-border-radius-xl);\n  --color: var(--nve-sys-text-muted-color);\n  --cursor: pointer;\n  --text-transform: capitalize;\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n[internal-host] {\n  --_icon-button-color: var(--color);\n  width: var(--width);\n  gap: var(--nve-ref-space-xs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  line-height: var(--nve-ref-font-size-500);\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  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  position: relative;\n}\n\nnve-progress-ring,\nnve-icon-button {\n  cursor: pointer;\n}\n\nnve-icon-button#number-icon {\n  box-sizing: content-box;\n  border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n  border-radius: 100%;\n  --color: var(--_icon-button-color);\n  --height: var(--nve-ref-size-600);\n  --width: var(--nve-ref-size-600);\n  --background: transparent;\n}\n\nnve-icon-button[interaction='emphasis'] {\n  --background: var(--nve-sys-support-success-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: not-allowed;\n}\n\n:host(:hover:not(:state(disabled), :state(selected))) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([container='condensed']) div {\n  padding: var(--nve-ref-size-200);\n}\n"],"mappings":""}
+{"version":3,"file":"steps-item.js","names":[],"sources":["../../src/steps/steps-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  --width: auto;\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --border-radius: var(--nve-ref-border-radius-xl);\n  --color: var(--nve-sys-text-muted-color);\n  --cursor: pointer;\n  --text-transform: capitalize;\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n[internal-host] {\n  --_icon-button-color: var(--color);\n  width: var(--width);\n  gap: var(--nve-ref-space-xs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  line-height: var(--nve-ref-font-size-500);\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  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  position: relative;\n}\n\nnve-progress-ring,\nnve-icon-button {\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n  cursor: pointer;\n}\n\nnve-icon-button#number-icon {\n  box-sizing: content-box;\n  border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n  border-radius: 100%;\n  --color: var(--_icon-button-color);\n  --height: var(--nve-ref-size-600);\n  --width: var(--nve-ref-size-600);\n  --background: transparent;\n}\n\nnve-icon-button[interaction='emphasis'] {\n  --background: var(--nve-sys-support-success-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: not-allowed;\n}\n\n:host(:hover:not(:state(disabled), :state(selected))) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([container='condensed']) div {\n  padding: var(--nve-ref-size-200);\n}\n"],"mappings":""}

package/dist/steps/steps.d.ts

@@ -12,7 +12,6 @@ import { ProgressRing } from '../progress-ring';
  * @cssprop --font-size
  * @cssprop --border-top
  * @cssprop --width
- * @cssprop --font-size
  * @cssprop --font-weight
  * @cssprop --border-radius
  * @cssprop --color
@@ -86,6 +85,6 @@ export declare class Steps extends LitElement {
     _internals: ElementInternals;
     render(): import('lit-html').TemplateResult<1>;
     connectedCallback(): void;
-    firstUpdated(props: PropertyValues<this>): void;
+    disconnectedCallback(): void;
     updated(props: PropertyValues<this>): void;
 }