@nvidia-elements/core 0.2.2 → 0.2.4

package/dist/panel/panel.d.ts

@@ -12,7 +12,7 @@ import { IconButton } from '../icon-button';
  * @cssprop --padding
  * @cssprop --border-bottom
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
- * @deprecated use `nve-page-panel` with `nve-page` instead
+ * @deprecated use `nve-page-panel-header` with `nve-page-panel` instead
  */
 export declare class PanelHeader extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -20,7 +20,7 @@ export declare class PanelHeader extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
 }
 /**
@@ -31,6 +31,7 @@ export declare class PanelHeader extends LitElement {
  * @slot - This is a default/unnamed slot for panel content
  * @cssprop --padding
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ * @deprecated use `nve-page-panel-content` with `nve-page-panel` instead
  */
 export declare class PanelContent extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -38,7 +39,7 @@ export declare class PanelContent extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 /**
  * @element nve-panel-footer
@@ -50,6 +51,7 @@ export declare class PanelContent extends LitElement {
  * @cssprop --border-top
  * @cssprop --gap
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ * @deprecated use `nve-page-panel-footer` with `nve-page-panel` instead
  */
 export declare class PanelFooter extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -57,7 +59,7 @@ export declare class PanelFooter extends LitElement {
         tag: string;
         version: string;
     };
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
 }
 /**
@@ -77,6 +79,7 @@ export declare class PanelFooter extends LitElement {
  * @cssprop --panel-button-border-radius - Border radius of the panel expand/collapse button
  * @csspart icon-button - The expand/collapse icon button element
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ * @deprecated use `nve-page-panel` with `nve-page` instead
  */
 export declare class Panel extends LitElement {
     #private;
@@ -112,6 +115,6 @@ export declare class Panel extends LitElement {
     i18n: Partial<import('../internal').I18nStrings & {
         __set: boolean;
     }>;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/panel/panel.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.examples.js","names":[],"sources":["../../src/panel/panel.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/panel/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/notification/define.js';\n\n/* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n\nexport default {\n  title: 'Elements/Panel',\n  component: 'nve-panel'\n};\n\n/**\n * @summary Basic panel layout with header showing session details and metadata in a collapsible side panel.\n */\nexport const Default = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-header>\n            <div slot=\"title\">Title</div>\n            <div slot=\"subtitle\"></div>\n          </nve-panel-header>\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Left-positioned collapsible panel for sidebar navigation and content details.\n * @tags test-case\n */\nexport const LeftSidePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Right-positioned collapsible panel for supplementary content and property inspectors.\n * @tags test-case\n */\nexport const RightSidePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"right\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Closable panel with external toggle button for programmatic show/hide control.\n * @tags test-case\n */\nexport const ClosablePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm full\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand id=\"trigger-closable-false\" expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n\n      <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n    </section>\n\n    <script type=\"module\">\n      const button = document.querySelector('nve-button');\n      button.addEventListener('click', () => {\n        const panel = document.querySelector('nve-panel');\n        panel.expanded = !panel.expanded;\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Collapsible panel with built-in close button and external toggle for flexible expand/collapse behavior.\n * @tags test-case\n */\nexport const WithTrigger = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm full\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded closable side=\"left\"  style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n\n      <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n    </section>\n\n    <script type=\"module\">\n      const button = document.querySelector('nve-button');\n\n      button.addEventListener('click', () => {\n        const panel = document.querySelector('nve-panel');\n        panel.expanded = !panel.expanded;\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Panel with complete header including title, subtitle, and action icon slots for rich header content.\n * @tags test-case\n */\nexport const WithFullHeader = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-header>\n            <div slot=\"title\">Title</div>\n            <div slot=\"subtitle\">Subtitle</div>\n\n            <nve-icon-button container=\"flat\" slot=\"action-icon\" icon-name=\"more-actions\"></nve-icon-button>\n          </nve-panel-header>\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Panel with footer containing action buttons for form submissions and destructive actions.\n * @tags test-case\n */\nexport const WithFooter = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:600px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n\n          <nve-panel-footer>\n            <nve-button interaction=\"destructive\" container=\"flat\">Destructive</nve-button>\n            <nve-button>Default</nve-button>\n          </nve-panel-footer>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/* eslint-enable @nvidia-elements/lint/no-restricted-attributes */"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"panel.examples.js","names":[],"sources":["../../src/panel/panel.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/panel/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/notification/define.js';\n\n/* eslint-disable @nvidia-elements/lint/no-restricted-attributes, @nvidia-elements/lint/no-deprecated-tags -- panel examples intentionally cover deprecated panel tags. */\n\nexport default {\n  title: 'Elements/Panel',\n  component: 'nve-panel'\n};\n\n/**\n * @summary Basic panel layout with header showing session details and metadata in a collapsible side panel.\n */\nexport const Default = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-header>\n            <div slot=\"title\">Title</div>\n            <div slot=\"subtitle\"></div>\n          </nve-panel-header>\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Left-positioned collapsible panel for sidebar navigation and content details.\n * @tags test-case\n */\nexport const LeftSidePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Right-positioned collapsible panel for supplementary content and property inspectors.\n * @tags test-case\n */\nexport const RightSidePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"right\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Closable panel with external toggle button for programmatic show/hide control.\n * @tags test-case\n */\nexport const ClosablePanel = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm full\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand id=\"trigger-closable-false\" expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n\n      <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n    </section>\n\n    <script type=\"module\">\n      const button = document.querySelector('nve-button');\n      button.addEventListener('click', () => {\n        const panel = document.querySelector('nve-panel');\n        panel.expanded = !panel.expanded;\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Collapsible panel with built-in close button and external toggle for flexible expand/collapse behavior.\n * @tags test-case\n */\nexport const WithTrigger = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm full\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded closable side=\"left\"  style=\"width:280px; height:550px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n\n      <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n    </section>\n\n    <script type=\"module\">\n      const button = document.querySelector('nve-button');\n\n      button.addEventListener('click', () => {\n        const panel = document.querySelector('nve-panel');\n        panel.expanded = !panel.expanded;\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Panel with complete header including title, subtitle, and action icon slots for rich header content.\n * @tags test-case\n */\nexport const WithFullHeader = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:550px\">\n\n          <nve-panel-header>\n            <div slot=\"title\">Title</div>\n            <div slot=\"subtitle\">Subtitle</div>\n\n            <nve-icon-button container=\"flat\" slot=\"action-icon\" icon-name=\"more-actions\"></nve-icon-button>\n          </nve-panel-header>\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/**\n * @summary Panel with footer containing action buttons for form submissions and destructive actions.\n * @tags test-case\n */\nexport const WithFooter = {\n  render: () => html`\n    <section nve-layout=\"row align:space-between pad:sm\">\n      <div nve-theme=\"root\">\n        <nve-panel behavior-expand expanded side=\"left\" style=\"width:280px; height:600px\">\n\n          <nve-panel-content nve-layout=\"column gap:md\">\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Release</label>\n              <p nve-text=\"label semibold sm\">RainbowBridge/08-18-2021AM/A2A</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Date</label>\n              <p nve-text=\"label semibold sm\">2021-08-18</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">State</label>\n              <nve-badge status=\"finished\">Indexed</nve-badge>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Driver</label>\n              <p nve-text=\"label semibold sm\">Kenjiro Ono</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Copilot</label>\n              <p nve-text=\"label semibold sm\">Kenichi Yoshii</p>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">GVS</label>\n              <a href=\"#\" nve-text=\"link body sm\">http://testbot/testbot/view/content...</a>\n            </div>\n\n            <div nve-layout=\"column gap:xs\">\n              <label nve-text=\"body sm medium muted\">Session ID</label>\n              <a href=\"#\" nve-text=\"link body sm\">Experiment 12345</a>\n            </div>\n          </nve-panel-content>\n\n          <nve-panel-footer>\n            <nve-button interaction=\"destructive\" container=\"flat\">Destructive</nve-button>\n            <nve-button>Default</nve-button>\n          </nve-panel-footer>\n        </nve-panel>\n      </div>\n    </section>\n  `\n};\n\n/* eslint-enable @nvidia-elements/lint/no-restricted-attributes */\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/panel/panel2.js

@@ -1,10 +1,10 @@
-import { attachInternals as e } from "../internal/utils/a11y.js";
-import { stateExpanded as t } from "../internal/controllers/state-expanded.controller.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { I18nController as r } from "../internal/controllers/i18n.controller.js";
-import { TypeExpandableController as i } from "../internal/controllers/type-expandable.controller.js";
-import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
-import { useStyles as o } from "../internal/styles/index.js";
+import { I18nController as e } from "../internal/controllers/i18n.controller.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { stateExpanded as n } from "../internal/controllers/state-expanded.controller.js";
+import { TypeExpandableController as r } from "../internal/controllers/type-expandable.controller.js";
+import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
+import { useStyles as a } from "../internal/styles/index.js";
+import { __decorate as o } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import { IconButton as s } from "../icon-button/icon-button2.js";
 import c from "./panel.js";
 import l from "./panel-header.js";
@@ -16,12 +16,12 @@ import { when as h } from "lit/directives/when.js";
 //#region src/panel/panel.ts
 var g = class extends f {
 	static {
-		this.styles = o([l]);
+		this.styles = a([l]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-panel-header",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	render() {
@@ -32,12 +32,12 @@ var g = class extends f {
 	}
 }, _ = class extends f {
 	static {
-		this.styles = o([u]);
+		this.styles = a([u]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-panel-content",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	render() {
@@ -45,12 +45,12 @@ var g = class extends f {
 	}
 }, v = class extends f {
 	static {
-		this.styles = o([d]);
+		this.styles = a([d]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-panel-footer",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	render() {
@@ -60,16 +60,16 @@ var g = class extends f {
 		super.connectedCallback(), this.slot = "footer";
 	}
 }, y = class extends f {
-	constructor(...e) {
-		super(...e), this.expanded = !1, this.closable = !1, this.behaviorExpand = !1, this.side = "left", this.#e = new r(this), this.#t = new i(this), this.i18n = this.#e.i18n;
+	constructor(...t) {
+		super(...t), this.expanded = !1, this.closable = !1, this.behaviorExpand = !1, this.side = "left", this.#e = new e(this), this.#t = new r(this), this.i18n = this.#e.i18n;
 	}
 	static {
-		this.styles = o([c]);
+		this.styles = a([c]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-panel",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	static {
@@ -84,16 +84,16 @@ var g = class extends f {
 		return p`<div internal-host><div class="header"><slot name="header"></slot>${h(!this.closable, () => p`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" .container="${this.expanded ? "flat" : void 0}" icon-name="double-chevron" @click="${() => this.#t.toggle()}" .direction="${this.#n}" .expanded="${this.expanded}" .ariaLabel="${this.expanded ? this.i18n.close : this.i18n.expand}"></nve-icon-button>`, () => p`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" container="flat" icon-name="cancel" @click="${() => this.#t.close()}" .expanded="${this.expanded}" .ariaLabel="${this.expanded ? this.i18n.hide : this.i18n.show}"></nve-icon-button>`)}</div><div class="content"><slot></slot></div><slot name="footer"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), e(this), this._internals.role = "region";
+		super.connectedCallback(), t(this), this._internals.role = "region";
 	}
 };
-n([m({
+o([m({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "expanded", void 0), n([m({ type: Boolean })], y.prototype, "closable", void 0), n([m({
+})], y.prototype, "expanded", void 0), o([m({ type: Boolean })], y.prototype, "closable", void 0), o([m({
 	type: Boolean,
 	attribute: "behavior-expand"
-})], y.prototype, "behaviorExpand", void 0), n([m({ type: String })], y.prototype, "side", void 0), n([m({ type: Object })], y.prototype, "i18n", void 0), y = n([a(), t()], y);
+})], y.prototype, "behaviorExpand", void 0), o([m({ type: String })], y.prototype, "side", void 0), o([m({ type: Object })], y.prototype, "i18n", void 0), y = o([i(), n()], y);
 //#endregion
 export { y as Panel, _ as PanelContent, v as PanelFooter, g as PanelHeader };
 

package/dist/panel/panel2.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel2.js","names":["#i18nController","#direction","#typeExpandableController"],"sources":["../../src/panel/panel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  stateExpanded,\n  I18nController,\n  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport panelStyleSheet from './panel.css?inline';\nimport panelHeaderStyleSheet from './panel-header.css?inline';\nimport panelContentStyleSheet from './panel-content.css?inline';\nimport panelFooterStyleSheet from './panel-footer.css?inline';\n\n/**\n * @element nve-panel-header\n * @description Displays the title, subtitle, and optional action controls at the top of a panel.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - default content slot\n * @slot title - Title Text\n * @slot subtitle - Subtitle Text\n * @slot action-icon - Extra Action Button\n * @cssprop --padding\n * @cssprop --border-bottom\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel` with `nve-page` instead\n */\nexport class PanelHeader extends LitElement {\n  static styles = useStyles([panelHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-header',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <div id=\"titles\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n          <slot></slot>\n        </div>\n\n        <slot name=\"action-icon\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'header';\n  }\n}\n\n/**\n * @element nve-panel-content\n * @description Contains the main body content within a panel, providing a structured region for detailed information.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class PanelContent extends LitElement {\n  static styles = useStyles([panelContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-panel-footer\n * @description Provides a designated area at the bottom of a panel for actions or supplementary controls.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class PanelFooter extends LitElement {\n  static styles = useStyles([panelFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-footer',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'footer';\n  }\n}\n\n/**\n * @element nve-panel\n * @description Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @event open - Dispatched when the panel opens.\n * @event close - Dispatched when the panel closes.\n * @slot - This is a default/unnamed slot for panel content\n * @slot header - header element (Use `panel-header` or custom content)\n * @slot content - content element (Use `panel-content` or custom content)\n * @slot footer - footer element (Use `panel-footer` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --box-shadow\n * @cssprop --panel-button-border-radius - Border radius of the panel expand/collapse button\n * @csspart icon-button - The expand/collapse icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n\n@scopedRegistry()\n@stateExpanded<Panel>()\nexport class Panel extends LitElement {\n  /**\n   * Determines whether the panel is fully expanded, displaying its contents, or not.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether the panel collapses down to an expand icon, or fully hides.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines whether the panel should handle auto-closing behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies.\n   */\n  @property({ type: String }) side: 'left' | 'right' = 'left';\n\n  static styles = useStyles([panelStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  #typeExpandableController = new TypeExpandableController(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #direction() {\n    if (this.side === 'left') {\n      return this.expanded ? 'left' : 'right';\n    } else {\n      return this.expanded ? 'right' : 'left';\n    }\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n\n          ${when(\n            !this.closable,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .container=${this.expanded ? 'flat' : undefined} icon-name=\"double-chevron\"\n                @click=${() => this.#typeExpandableController.toggle()}\n                .direction=${this.#direction}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n              ></nve-icon-button>\n            `,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" container=\"flat\" icon-name=\"cancel\"\n                @click=${() => this.#typeExpandableController.close()}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.hide : this.i18n.show}\n              ></nve-icon-button>\n            `\n          )}\n        </div>\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'region';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,CAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAWb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAWa,IAAb,cAAkC,EAAW;;gBAC3B,EAAU,CAAC,CAAsB,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAaa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,CAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAuBO,IAAA,cAAoB,EAAW;;+BAImB,oBAKf,0BAKoC,gBAKvB,kBAgBb,IAAI,EAAqB,IAAI,aACzC,IAAI,EAAyB,IAAI,eAK1B,KAAKA,GAAgB;;;gBApBxC,EAAU,CAAC,CAAe,CAAC;;;kBAEhB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA;CACA;CAOA,IAAIC,KAAa;EAIb,OAHE,KAAK,SAAS,SACT,KAAK,WAAW,SAAS,UAEzB,KAAK,WAAW,UAAU;CAErC;CAEA,SAAS;EACP,OAAO,CAAI,qEAKH,EACA,CAAC,KAAK,gBACA,CAAI,uFAC6E,KAAK,WAAW,SAAS,KAAA,EAAU,6CACvG,KAAKC,GAA0B,OAAO,EAAE,gBAC1C,KAAKD,GAAW,eACjB,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,QAAQ,KAAK,KAAK,OAAO,6BAG9D,CAAI,6HAES,KAAKC,GAA0B,MAAM,EAAE,eAC1C,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK,qBAGnE,EAAE;CAUV;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GAvFG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAKxD,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAsBzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UA3C3B,EAAe,GACf,EAAqB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"panel2.js","names":["#i18nController","#direction","#typeExpandableController"],"sources":["../../src/panel/panel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  stateExpanded,\n  I18nController,\n  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport panelStyleSheet from './panel.css?inline';\nimport panelHeaderStyleSheet from './panel-header.css?inline';\nimport panelContentStyleSheet from './panel-content.css?inline';\nimport panelFooterStyleSheet from './panel-footer.css?inline';\n\n/**\n * @element nve-panel-header\n * @description Displays the title, subtitle, and optional action controls at the top of a panel.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - default content slot\n * @slot title - Title Text\n * @slot subtitle - Subtitle Text\n * @slot action-icon - Extra Action Button\n * @cssprop --padding\n * @cssprop --border-bottom\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-header` with `nve-page-panel` instead\n */\nexport class PanelHeader extends LitElement {\n  static styles = useStyles([panelHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-header',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <div id=\"titles\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n          <slot></slot>\n        </div>\n\n        <slot name=\"action-icon\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'header';\n  }\n}\n\n/**\n * @element nve-panel-content\n * @description Contains the main body content within a panel, providing a structured region for detailed information.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-content` with `nve-page-panel` instead\n */\nexport class PanelContent extends LitElement {\n  static styles = useStyles([panelContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-panel-footer\n * @description Provides a designated area at the bottom of a panel for actions or supplementary controls.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-footer` with `nve-page-panel` instead\n */\nexport class PanelFooter extends LitElement {\n  static styles = useStyles([panelFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-footer',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'footer';\n  }\n}\n\n/**\n * @element nve-panel\n * @description Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @event open - Dispatched when the panel opens.\n * @event close - Dispatched when the panel closes.\n * @slot - This is a default/unnamed slot for panel content\n * @slot header - header element (Use `panel-header` or custom content)\n * @slot content - content element (Use `panel-content` or custom content)\n * @slot footer - footer element (Use `panel-footer` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --box-shadow\n * @cssprop --panel-button-border-radius - Border radius of the panel expand/collapse button\n * @csspart icon-button - The expand/collapse icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel` with `nve-page` instead\n */\n\n@scopedRegistry()\n@stateExpanded<Panel>()\nexport class Panel extends LitElement {\n  /**\n   * Determines whether the panel is fully expanded, displaying its contents, or not.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether the panel collapses down to an expand icon, or fully hides.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines whether the panel should handle auto-closing behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies.\n   */\n  @property({ type: String }) side: 'left' | 'right' = 'left';\n\n  static styles = useStyles([panelStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  #typeExpandableController = new TypeExpandableController(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #direction() {\n    if (this.side === 'left') {\n      return this.expanded ? 'left' : 'right';\n    } else {\n      return this.expanded ? 'right' : 'left';\n    }\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n\n          ${when(\n            !this.closable,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .container=${this.expanded ? 'flat' : undefined} icon-name=\"double-chevron\"\n                @click=${() => this.#typeExpandableController.toggle()}\n                .direction=${this.#direction}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n              ></nve-icon-button>\n            `,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" container=\"flat\" icon-name=\"cancel\"\n                @click=${() => this.#typeExpandableController.close()}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.hide : this.i18n.show}\n              ></nve-icon-button>\n            `\n          )}\n        </div>\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'region';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,CAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAWb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAYa,IAAb,cAAkC,EAAW;;gBAC3B,EAAU,CAAC,CAAsB,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAca,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,CAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAwBO,IAAA,cAAoB,EAAW;;+BAImB,oBAKf,0BAKoC,gBAKvB,kBAgBb,IAAI,EAAqB,IAAI,aACzC,IAAI,EAAyB,IAAI,eAK1B,KAAKA,GAAgB;;;gBApBxC,EAAU,CAAC,CAAe,CAAC;;;kBAEhB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA;CACA;CAOA,IAAIC,KAAa;EAIb,OAHE,KAAK,SAAS,SACT,KAAK,WAAW,SAAS,UAEzB,KAAK,WAAW,UAAU;CAErC;CAEA,SAAS;EACP,OAAO,CAAI,qEAKH,EACA,CAAC,KAAK,gBACA,CAAI,uFAC6E,KAAK,WAAW,SAAS,KAAA,EAAU,6CACvG,KAAKC,GAA0B,OAAO,EAAE,gBAC1C,KAAKD,GAAW,eACjB,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,QAAQ,KAAK,KAAK,OAAO,6BAG9D,CAAI,6HAES,KAAKC,GAA0B,MAAM,EAAE,eAC1C,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK,qBAGnE,EAAE;CAUV;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GAvFG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAKxD,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAsBzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UA3C3B,EAAe,GACf,EAAqB,CAAA,GAAA,CAAA"}

package/dist/password/password.d.ts

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

package/dist/password/password2.js

@@ -1,6 +1,6 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
-import { useStyles as n } from "../internal/styles/index.js";
+import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
@@ -14,7 +14,7 @@ var u = class extends r {
 		super(...e), this.pressed = !1;
 	}
 	static {
-		this.styles = n([
+		this.styles = t([
 			...r.styles,
 			a,
 			o
@@ -23,7 +23,7 @@ var u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-password",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	static {
@@ -36,10 +36,10 @@ var u = class extends r {
 		this.pressed = !this.pressed, this.input.type = this.pressed ? "text" : "password";
 	}
 };
-e([c({
+n([c({
 	type: String,
 	reflect: !0
-})], u.prototype, "container", void 0), e([l()], u.prototype, "pressed", void 0), u = e([t()], u);
+})], u.prototype, "container", void 0), n([l()], u.prototype, "pressed", void 0), u = n([e()], u);
 //#endregion
 export { u as Password };