@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/page-header/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/core/internal';\nimport { PageHeader } from '@nvidia-elements/core/page-header';\n\ndefine(PageHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-page-header': PageHeader;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAW"}

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

@@ -0,0 +1 @@
+export * from './page-header.js';

package/dist/page-header/index.js

@@ -0,0 +1,2 @@
+import { PageHeader as e } from "./page-header2.js";
+export { e as PageHeader };

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

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-page-header
+ * @description An element that appears across the top of all pages containing the application name and primary navigation.
+ * @entrypoint \@nvidia-elements/core/page-header
+ * @since 1.15.0
+ * @slot - The default content slot
+ * @slot prefix - Content displayed at the start of the header
+ * @slot suffix - Content displayed at the end of the header
+ * @cssprop --background - Background color of the header
+ * @cssprop --padding - Padding inside the header
+ * @cssprop --border-bottom - Border below the header
+ * @cssprop --gap - Gap between the prefix, default, and suffix slots
+ * @cssprop --margin-inline - left and right margin applied to the default content slot
+
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
+ *
+ */
+export declare class PageHeader extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    render(): import('lit-html').TemplateResult<1>;
+    /** @private */
+    _internals: ElementInternals;
+    connectedCallback(): void;
+}

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

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

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

@@ -0,0 +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 right-aligned layout patterns.\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"}

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

@@ -0,0 +1,87 @@
+{
+  "element": "nve-page-header",
+  "entrypoint": "@nvidia-elements/core/page-header/page-header.examples.json",
+  "items": [
+    {
+      "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",
+      "summary": "Basic page header with logo, navigation links, and user actions in a standard layout structure.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "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",
+      "summary": "Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "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",
+      "summary": "Use a Icon Button to represent collapsible top level navigation, optimal for mobile or constrained viewport sizes.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-page-header_app-logo",
+      "name": "AppLogo",
+      "template": "<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",
+      "summary": "Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "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",
+      "summary": "Page header with primary navigation positioned after the logo and branding area.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "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",
+      "summary": "Page header with navigation centered in the available space for balanced visual hierarchy.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "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",
+      "summary": "Page header with all navigation positioned at the end for right-aligned layout patterns.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "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",
+      "summary": "Page header with integrated search functionality for content discovery within the application.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "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",
+      "summary": "Page header displaying user information and avatar for personalized application experiences.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#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}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=page-header.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,26 @@
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import n from "./page-header.js";
+import { LitElement as r, html as i } from "lit";
+//#region src/page-header/page-header.ts
+var a = class extends r {
+	static {
+		this.styles = t([n]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-page-header",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return i`<div internal-host><slot name="prefix"></slot><slot></slot><slot name="suffix"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "navigation";
+	}
+};
+//#endregion
+export { a as PageHeader };
+
+//# sourceMappingURL=page-header2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-header2.js","names":[],"sources":["../../src/page-header/page-header.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 { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './page-header.css?inline';\n\n/**\n * @element nve-page-header\n * @description An element that appears across the top of all pages containing the application name and primary navigation.\n * @entrypoint \\@nvidia-elements/core/page-header\n * @since 1.15.0\n * @slot - The default content slot\n * @slot prefix - Content displayed at the start of the header\n * @slot suffix - Content displayed at the end of the header\n * @cssprop --background - Background color of the header\n * @cssprop --padding - Padding inside the header\n * @cssprop --border-bottom - Border below the header\n * @cssprop --gap - Gap between the prefix, default, and suffix slots\n * @cssprop --margin-inline - left and right margin applied to the default content slot\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\n *\n */\nexport class PageHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-header',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'navigation';\n  }\n}\n"],"mappings":";;;;;AAwBA,IAAa,IAAb,cAAgC,EAAW;;gBACzB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,CAAI;;CAYb,oBAA0B;AAGxB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO"}

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

@@ -0,0 +1,6 @@
+import { PageLoader } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-page-loader': PageLoader;
+    }
+}

package/dist/page-loader/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { PageLoader as t } from "./page-loader2.js";
+//#region src/page-loader/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/page-loader/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/page-loader/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/core/internal';\nimport { PageLoader } from '@nvidia-elements/core/page-loader';\n\ndefine(PageLoader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-page-loader': PageLoader;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAW"}

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

@@ -0,0 +1 @@
+export * from './page-loader.js';

package/dist/page-loader/index.js

@@ -0,0 +1,2 @@
+import { PageLoader as e } from "./page-loader2.js";
+export { e as PageLoader };

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import { PopoverPosition, PopoverType, TypeNativePopoverController } from '../internal';
+import { ProgressRing } from '../progress-ring';
+/**
+ * @element nve-page-loader
+ * @description Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.
+ * @since 0.19.0
+ * @entrypoint \@nvidia-elements/core/page-loader
+ * @slot - default slot for content
+ * @cssprop --gap
+ * @cssprop --animation-duration - Duration of page loader open/close animations
+ * @csspart progress-ring - The progress ring element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role
+ */
+export declare class PageLoader extends LitElement {
+    /** @private */
+    readonly position: PopoverPosition;
+    /** @private */
+    readonly popoverType: PopoverType;
+    /** @private */
+    protected typeNativePopoverController: TypeNativePopoverController<PageLoader>;
+    /**
+     * @private
+     */
+    anchor: HTMLElement;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [ProgressRing.metadata.tag]: typeof ProgressRing;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-loader.examples.js","names":[],"sources":["../../src/page-loader/page-loader.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-loader/define.js';\n\nexport default {\n  title: 'Elements/Page Loader',\n  component: 'nve-page-loader',\n};\n\n/**\n * @summary Full-page loading indicator displaying centered spinner for initial page load states.\n */\nexport const Default = {\n  render: () => html`\n<nve-page-loader></nve-page-loader>\n  `\n};\n\n/**\n * @summary Interactive page loader that starts programmatically via button click. Use when user actions such as form submissions, data refreshes, or navigation events start loading states rather than on initial page load.\n */\nexport const Interactive = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"loader-btn\">trigger loader</nve-button>\n<nve-page-loader hidden></nve-page-loader>\n\n<script type=\"module\">\n  let loader = document.querySelector('nve-page-loader');\n  let btn = document.querySelector('#loader-btn');\n  btn.addEventListener('click', () => loader.hidden = false);\n</script>\n  `\n};"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,24 @@
+{
+  "element": "nve-page-loader",
+  "entrypoint": "@nvidia-elements/core/page-loader/page-loader.examples.json",
+  "items": [
+    {
+      "id": "core-page-loader_default",
+      "name": "Default",
+      "template": "<nve-page-loader></nve-page-loader>\n",
+      "summary": "Full-page loading indicator displaying centered spinner for initial page load states.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-page-loader_interactive",
+      "name": "Interactive",
+      "template": "<nve-button id=\"loader-btn\">trigger loader</nve-button>\n<nve-page-loader hidden></nve-page-loader>\n<script type=\"module\">\n  let loader = document.querySelector(\"nve-page-loader\");\n  let btn = document.querySelector(\"#loader-btn\");\n  btn.addEventListener(\"click\", () => (loader.hidden = false));\n</script>\n",
+      "summary": "Interactive page loader that starts programmatically via button click. Use when user actions such as form submissions, data refreshes, or navigation events start loading states rather than on initial page load.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region src/page-loader/page-loader.css?inline
+var e = ":host{inset:0!important;margin:auto;height:fit-content;--gap: var(--nve-ref-space-sm)}[internal-host]{gap:var(--gap);display:flex;flex-direction:column;align-items:center}[internal-host]{outline:0}:host::backdrop{background:#00000080}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=page-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-loader.js","names":[],"sources":["../../src/page-loader/page-loader.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  inset: 0 !important;\n  margin: auto;\n  height: fit-content;\n  --gap: var(--nve-ref-space-sm);\n}\n\n[internal-host] {\n  gap: var(--gap);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n[internal-host] {\n  outline: 0;\n}\n\n:host::backdrop {\n  /* not available on top layer */\n  background: hsl(0 0% 0% / 0.5); /* eslint-disable-line @nvidia-elements/lint/no-unexpected-css-value */\n}\n"],"mappings":""}

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

@@ -0,0 +1,35 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { TypeNativePopoverController as t } from "../internal/controllers/type-native-popover.controller.js";
+import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import { popoverStyles as i } from "../internal/styles/popover2.js";
+import { ProgressRing as a } from "../progress-ring/progress-ring2.js";
+import o from "./page-loader.js";
+import { LitElement as s, html as c } from "lit";
+import { state as l } from "lit/decorators/state.js";
+//#region src/page-loader/page-loader.ts
+var u = class extends s {
+	constructor(...e) {
+		super(...e), this.position = "center", this.popoverType = "manual", this.typeNativePopoverController = new t(this), this.anchor = globalThis.document?.body;
+	}
+	static {
+		this.styles = r([i, o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-page-loader",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [a.metadata.tag]: a };
+	}
+	render() {
+		return c`<div internal-host><nve-progress-ring part="progress-ring" status="accent" size="xl"></nve-progress-ring><slot></slot></div>`;
+	}
+};
+e([l()], u.prototype, "anchor", void 0), u = e([n()], u);
+//#endregion
+export { u as PageLoader };
+
+//# sourceMappingURL=page-loader2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-loader2.js","names":[],"sources":["../../src/page-loader/page-loader.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport type { PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport { popoverStyles, scopedRegistry, TypeNativePopoverController, useStyles } from '@nvidia-elements/core/internal';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\nimport styles from './page-loader.css?inline';\n\n/**\n * @element nve-page-loader\n * @description Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.\n * @since 0.19.0\n * @entrypoint \\@nvidia-elements/core/page-loader\n * @slot - default slot for content\n * @cssprop --gap\n * @cssprop --animation-duration - Duration of page loader open/close animations\n * @csspart progress-ring - The progress ring element\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class PageLoader extends LitElement {\n  /** @private */\n  readonly position: PopoverPosition = 'center';\n\n  /** @private */\n  readonly popoverType: PopoverType = 'manual';\n\n  /** @private */\n  protected typeNativePopoverController = new TypeNativePopoverController<PageLoader>(this);\n\n  /**\n   * @private\n   */\n  @state() anchor = globalThis.document?.body;\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-loader',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [ProgressRing.metadata.tag]: ProgressRing\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"xl\"></nve-progress-ring>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;AAsBO,IAAA,IAAA,cAAyB,EAAW;;+BAEJ,6BAGD,6CAGI,IAAI,EAAwC,KAAK,gBAKvE,WAAW,UAAU;;;gBAEvB,EAAU,CAAC,GAAe,EAAO,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAa,SAAS,MAAM,GAC9B;;CAKD,SAAS;AACP,SAAO,CAAI;;;GAjBZ,GAAO,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SAdT,GAAgB,CAAA,EAAA,EAAA"}

package/dist/pagination/define.d.ts

@@ -0,0 +1,6 @@
+import { Pagination } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-pagination': Pagination;
+    }
+}

package/dist/pagination/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Pagination as t } from "./pagination2.js";
+//#region src/pagination/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/pagination/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/pagination/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/core/internal';\nimport { Pagination } from '@nvidia-elements/core/pagination';\n\ndefine(Pagination);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-pagination': Pagination;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAW"}

package/dist/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination.js';

package/dist/pagination/index.js

@@ -0,0 +1,2 @@
+import { Pagination as e } from "./pagination2.js";
+export { e as Pagination };