@nvidia-elements/core 2.20.1 → 2.20.2

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, @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"}
+{"version":3,"file":"panel.examples.js","names":["panel_examples_default"],"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,IAAAA,IAAS"}

package/dist/panel/panel.js

@@ -1,6 +1,5 @@
-//#region src/panel/panel.css?inline
+// src/panel/panel.css?inline
 var e = ":host{--background: var(--nve-sys-layer-container-background);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--color: var(--nve-sys-layer-canvas-color);--box-shadow: var(--nve-ref-shadow-300);--panel-button-border-radius: 0 var(--nve-ref-border-radius-full) var(--nve-ref-border-radius-full) 0;overflow:hidden;-webkit-transition:width .24s ease;-webkit-transition:height .24s ease;contain:none;position:relative}[internal-host]{display:flex;flex-direction:column;align-items:stretch;justify-content:start;height:100%;color:var(--color);box-shadow:var(--box-shadow);background:var(--background)}:host(:not(:state(expanded))){--box-shadow: none}:host(:not([closable],:state(expanded))) [internal-host]{width:var(--nve-ref-size-800)!important;height:var(--nve-ref-size-800)!important;background:none}:host(:not([closable],:state(expanded))){pointer-events:none}:host(:not([closable],:state(expanded))) slot{display:none}:host(:not([closable],:state(expanded))) nve-icon-button{position:initial;pointer-events:auto;border-radius:var(--panel-button-border-radius);background:var(--background);align-items:center;justify-content:center}:host([closable]:not(:state(expanded))){display:none}:host([side=\"right\"]){float:right}:host(:not([closable],:state(expanded))[side=\"right\"]) nve-icon-button{--panel-button-border-radius: var(--nve-ref-border-radius-full) 0 0 var(--nve-ref-border-radius-full)}.header{min-height:var(--nve-ref-size-900);display:flex;align-items:start}:host(:state(expanded)) .header{border-block-end:var(--border-bottom)}.content{display:flex;flex-direction:column;align-items:start;flex-grow:1}nve-icon-button{margin-block-start:var(--nve-ref-space-xxs);margin-inline:auto var(--nve-ref-space-xxs);z-index:99}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=panel.js.map

package/dist/panel/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","names":[],"sources":["../../src/panel/panel.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-container-background);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --color: var(--nve-sys-layer-canvas-color);\n  --box-shadow: var(--nve-ref-shadow-300);\n  --panel-button-border-radius: 0 var(--nve-ref-border-radius-full) var(--nve-ref-border-radius-full) 0;\n  overflow: hidden;\n  -webkit-transition: width 240ms ease;\n  -webkit-transition: height 240ms ease;\n  contain: none;\n  position: relative;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  height: 100%;\n  color: var(--color);\n  box-shadow: var(--box-shadow);\n  background: var(--background);\n}\n\n:host(:not(:state(expanded))) {\n  --box-shadow: none;\n}\n\n:host(:not([closable], :state(expanded))) [internal-host] {\n  width: var(--nve-ref-size-800) !important;\n  height: var(--nve-ref-size-800) !important;\n  background: none;\n}\n\n:host(:not([closable], :state(expanded))) {\n  pointer-events: none;\n}\n\n:host(:not([closable], :state(expanded))) slot {\n  display: none;\n}\n\n:host(:not([closable], :state(expanded))) nve-icon-button {\n  position: initial;\n  pointer-events: auto;\n  border-radius: var(--panel-button-border-radius);\n  background: var(--background);\n  align-items: center;\n  justify-content: center;\n}\n\n:host([closable]:not(:state(expanded))) {\n  display: none;\n}\n\n:host([side='right']) {\n  float: right;\n}\n\n:host(:not([closable], :state(expanded))[side='right']) nve-icon-button {\n  --panel-button-border-radius: var(--nve-ref-border-radius-full) 0 0 var(--nve-ref-border-radius-full);\n}\n\n.header {\n  min-height: var(--nve-ref-size-900);\n  display: flex;\n  align-items: start;\n}\n\n:host(:state(expanded)) .header {\n  border-block-end: var(--border-bottom);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  flex-grow: 1;\n}\n\nnve-icon-button {\n  margin-block-start: var(--nve-ref-space-xxs);\n  margin-inline: auto var(--nve-ref-space-xxs);\n  z-index: 99;\n}\n"],"mappings":""}
+{"version":3,"file":"panel.js","names":["panel_default"],"sources":["../../src/panel/panel.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-container-background);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --color: var(--nve-sys-layer-canvas-color);\n  --box-shadow: var(--nve-ref-shadow-300);\n  --panel-button-border-radius: 0 var(--nve-ref-border-radius-full) var(--nve-ref-border-radius-full) 0;\n  overflow: hidden;\n  -webkit-transition: width 240ms ease;\n  -webkit-transition: height 240ms ease;\n  contain: none;\n  position: relative;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  height: 100%;\n  color: var(--color);\n  box-shadow: var(--box-shadow);\n  background: var(--background);\n}\n\n:host(:not(:state(expanded))) {\n  --box-shadow: none;\n}\n\n:host(:not([closable], :state(expanded))) [internal-host] {\n  width: var(--nve-ref-size-800) !important;\n  height: var(--nve-ref-size-800) !important;\n  background: none;\n}\n\n:host(:not([closable], :state(expanded))) {\n  pointer-events: none;\n}\n\n:host(:not([closable], :state(expanded))) slot {\n  display: none;\n}\n\n:host(:not([closable], :state(expanded))) nve-icon-button {\n  position: initial;\n  pointer-events: auto;\n  border-radius: var(--panel-button-border-radius);\n  background: var(--background);\n  align-items: center;\n  justify-content: center;\n}\n\n:host([closable]:not(:state(expanded))) {\n  display: none;\n}\n\n:host([side='right']) {\n  float: right;\n}\n\n:host(:not([closable], :state(expanded))[side='right']) nve-icon-button {\n  --panel-button-border-radius: var(--nve-ref-border-radius-full) 0 0 var(--nve-ref-border-radius-full);\n}\n\n.header {\n  min-height: var(--nve-ref-size-900);\n  display: flex;\n  align-items: start;\n}\n\n:host(:state(expanded)) .header {\n  border-block-end: var(--border-bottom);\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  flex-grow: 1;\n}\n\nnve-icon-button {\n  margin-block-start: var(--nve-ref-space-xxs);\n  margin-inline: auto var(--nve-ref-space-xxs);\n  z-index: 99;\n}\n"],"mappings":""}

package/dist/panel/panel2.js

@@ -3,7 +3,7 @@ import { stateExpanded as t } from "../internal/controllers/state-expanded.contr
 import { TypeExpandableController as n } from "../internal/controllers/type-expandable.controller.js";
 import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
 import { useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { IconButton as o } from "../icon-button/icon-button2.js";
 import s from "./panel.js";
 import c from "./panel-header.js";
@@ -13,7 +13,7 @@ import { LitElement as d, html as f } from "lit";
 import { property as p } from "lit/decorators/property.js";
 import { I18nController as m } from "@nvidia-elements/foundations/internal/i18n";
 import { when as h } from "lit/directives/when.js";
-//#region src/panel/panel.ts
+// src/panel/panel.ts
 var g = {
 	close: "close",
 	expand: "expand",
@@ -26,7 +26,7 @@ var g = {
 	static {
 		this.metadata = {
 			tag: "nve-panel-header",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -42,7 +42,7 @@ var g = {
 	static {
 		this.metadata = {
 			tag: "nve-panel-content",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -55,7 +55,7 @@ var g = {
 	static {
 		this.metadata = {
 			tag: "nve-panel-footer",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -74,7 +74,7 @@ var g = {
 	static {
 		this.metadata = {
 			tag: "nve-panel",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -99,7 +99,6 @@ a([p({
 	type: Boolean,
 	attribute: "behavior-expand"
 })], b.prototype, "behaviorExpand", void 0), a([p({ type: String })], b.prototype, "side", void 0), a([p({ type: Object })], b.prototype, "i18n", void 0), b = a([r(), t()], b);
-//#endregion
 export { b as Panel, v as PanelContent, y as PanelFooter, _ as PanelHeader };
 
 //# sourceMappingURL=panel2.js.map

package/dist/panel/panel2.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel2.js","names":[],"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  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\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\nconst i18nDefaults = {\n  close: 'close',\n  expand: 'expand',\n  hide: 'hide',\n  show: 'show'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-panel-header\n * @description Displays the title, subtitle, and optional action controls at the top of a panel.\n * @documentation https://nvidia.github.io/elements/docs/elements/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 * @documentation https://nvidia.github.io/elements/docs/elements/panel/\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 * @documentation https://nvidia.github.io/elements/docs/elements/panel/\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 * @documentation https://nvidia.github.io/elements/docs/elements/panel/\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, i18nDefaults);\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":";;;;;;;;;;;;;;;;AAoBA,IAAM,IAAe;CACnB,OAAO;CACP,QAAQ;CACR,MAAM;CACN,MAAM;AACR,GAiBa,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAWb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAaa,IAAb,cAAkC,EAAW;;EAC3B,KAAA,SAAA,EAAU,CAAC,CAAsB,CAAC;;;EAEvB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAea,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAyBa,IAAN,cAAoB,EAAW;;EAyCD,aArCoB,KAAA,WAAA,IAKf,KAAA,WAAA,IAKoC,KAAA,iBAAA,IAKvB,KAAA,OAAA,QAgBb,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GACvD,KAAA,KAAA,IAAI,EAAyB,IAAI,GAK1B,KAAA,OAAA,KAAK,GAAgB;;;EApBxC,KAAA,SAAA,EAAU,CAAC,CAAe,CAAC;;;EAEhB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA;CACA;CAOA,IAAI,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,KAAK,GAA0B,OAAO,EAAE,gBAC1C,KAAK,GAAW,eACjB,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,QAAQ,KAAK,KAAK,OAAO,6BAG9D,CAAI,6HAES,KAAK,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;AAvFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKzC,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxD,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAsBzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GA3C3B,IAAA,EAAA,CAAA,EAAe,GACf,EAAqB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"panel2.js","names":["panelHeaderStyleSheet","panelContentStyleSheet","panelFooterStyleSheet","panelStyleSheet","_decorate","__decorate","panel_default","panel_header_default","panel_content_default","panel_footer_default","i18nDefaults","PanelHeader","LitElement","useStyles","PanelContent","PanelFooter","Panel","_args","#i18nController","I18nController","#typeExpandableController","TypeExpandableController","IconButton","#direction","when","attachInternals","property","scopedRegistry","stateExpanded"],"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  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\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\nconst i18nDefaults = {\n  close: 'close',\n  expand: 'expand',\n  hide: 'hide',\n  show: 'show'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-panel-header\n * @description Displays the title, subtitle, and optional action controls at the top of a panel.\n * @documentation https://nvidia.github.io/elements/docs/elements/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 * @documentation https://nvidia.github.io/elements/docs/elements/panel/\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 * @documentation https://nvidia.github.io/elements/docs/elements/panel/\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 * @documentation https://nvidia.github.io/elements/docs/elements/panel/\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, i18nDefaults);\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":";;;;;;;;;;;;;;;;AAoBA,IAAMU,IAAe;CACnB,OAAO;CACP,QAAQ;CACR,MAAM;CACN,MAAM;AACR,GAiBaC,IAAb,cAAiCC,EAAW;;EAC1B,KAAA,SAAAC,EAAU,CAACb,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAWb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAaac,IAAb,cAAkCF,EAAW;;EAC3B,KAAA,SAAAC,EAAU,CAACZ,CAAsB,CAAC;;;EAEvB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAeac,IAAb,cAAiCH,EAAW;;EAC1B,KAAA,SAAAC,EAAU,CAACX,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAyBac,IAAN,cAAoBJ,EAAW;;EAyCD,A,aArCoB,KAAA,WAAA,IAKf,KAAA,WAAA,IAKoC,KAAA,iBAAA,IAKvB,KAAA,OAAA,QAgBb,KAAAM,KAAA,IAAIC,EAAqB,MAAMT,CAAY,GACvD,KAAAU,KAAA,IAAIC,EAAyB,IAAI,GAK1B,KAAA,OAAA,KAAKH,GAAgB;;;EApBxC,KAAA,SAAAL,EAAU,CAACV,CAAe,CAAC;;;EAEhB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBmB,EAAW,SAAS,MAAMA,EAC7B;;CAKA;CACA;CAOA,IAAIC,KAAa;EAIb,OAHE,KAAK,SAAS,SACT,KAAK,WAAW,SAAS,UAEzB,KAAK,WAAW,UAAU;CAErC;CAEA,SAAS;EACP,OAAO,CAAI,qEAKHC,EACA,CAAC,KAAK,gBACA,CAAI,uFAC6E,KAAK,WAAW,SAAS,KAAA,EAAU,6CACvG,KAAKJ,GAA0B,OAAO,EAAE,gBAC1C,KAAKG,GAAW,eACjB,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,QAAQ,KAAK,KAAK,OAAO,6BAG9D,CAAI,6HAES,KAAKH,GAA0B,MAAM,EAAE,eAC1C,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK,qBAGnE,EAAE;CAUV;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBK,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AAvFGrB,EAAA,CAAAsB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAV,EAAA,WAAA,YAAA,KAAA,CAAA,GAKzCZ,EAAA,CAAAsB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAV,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1BZ,EAAA,CAAAsB,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAAV,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxDZ,EAAA,CAAAsB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAV,EAAA,WAAA,QAAA,KAAA,CAAA,GAsBzBZ,EAAA,CAAAsB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAV,EAAA,WAAA,QAAA,KAAA,CAAA,GA3C3B,IAAAZ,EAAA,CAAAuB,EAAe,GACfC,EAAqB,CAAA,GAAAZ,CAAA"}

package/dist/password/define.js

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

package/dist/password/define.js.map

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

package/dist/password/index.js

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

package/dist/password/password.examples.js

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

package/dist/password/password.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"password.examples.js","names":[],"sources":["../../src/password/password.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/password/define.js';\n\nexport default {\n  title: 'Elements/Password',\n  component: 'nve-password',\n};\n\n/**\n * @summary Basic password input with toggle visibility for secure credential entry and authentication forms.\n */\nexport const Default = {\n  render: () => html`\n<nve-password>\n  <label>label</label>\n  <input type=\"password\" value=\"123456\" />\n  <nve-control-message>message</nve-control-message>\n</nve-password>`\n};\n\n/**\n * @summary Password inputs with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-password>\n    <label>label</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password>\n    <label>disabled</label>\n    <input type=\"password\" value=\"123456\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password>\n    <label>success</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-password>\n\n  <nve-password>\n    <label>error</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-password>\n</div>`\n};\n\n/**\n * @summary Password inputs with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-password layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"password\" value=\"123456\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-password>\n\n  <nve-password layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-password>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"password.examples.js","names":["password_examples_default"],"sources":["../../src/password/password.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/password/define.js';\n\nexport default {\n  title: 'Elements/Password',\n  component: 'nve-password',\n};\n\n/**\n * @summary Basic password input with toggle visibility for secure credential entry and authentication forms.\n */\nexport const Default = {\n  render: () => html`\n<nve-password>\n  <label>label</label>\n  <input type=\"password\" value=\"123456\" />\n  <nve-control-message>message</nve-control-message>\n</nve-password>`\n};\n\n/**\n * @summary Password inputs with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-password>\n    <label>label</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password>\n    <label>disabled</label>\n    <input type=\"password\" value=\"123456\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password>\n    <label>success</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-password>\n\n  <nve-password>\n    <label>error</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-password>\n</div>`\n};\n\n/**\n * @summary Password inputs with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-password layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"password\" value=\"123456\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-password layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-password>\n\n  <nve-password layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"password\" value=\"123456\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-password>\n</div>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/password/password.js

@@ -1,6 +1,5 @@
-//#region src/password/password.css?inline
+// src/password/password.css?inline
 var e = ":host{width:100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=password.js.map

package/dist/password/password.js.map

@@ -1 +1 @@
-{"version":3,"file":"password.js","names":[],"sources":["../../src/password/password.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"password.js","names":["password_default"],"sources":["../../src/password/password.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}

package/dist/password/password2.js

@@ -1,6 +1,6 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { 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";
@@ -8,7 +8,7 @@ import o from "./password.js";
 import { html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
 import { state as l } from "lit/decorators/state.js";
-//#region src/password/password.ts
+// src/password/password.ts
 var u = {
 	hide: "hide",
 	show: "show"
@@ -29,7 +29,7 @@ var u = {
 	static {
 		this.metadata = {
 			tag: "nve-password",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -46,7 +46,6 @@ n([c({
 	type: String,
 	reflect: !0
 })], d.prototype, "container", void 0), n([l()], d.prototype, "pressed", void 0), d = n([e()], d);
-//#endregion
 export { d as Password };
 
 //# sourceMappingURL=password2.js.map

package/dist/password/password2.js.map

@@ -1 +1 @@
-{"version":3,"file":"password2.js","names":[],"sources":["../../src/password/password.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 { state } from 'lit/decorators/state.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './password.css?inline';\n\nconst i18nDefaults = {\n  hide: 'hide',\n  show: 'show'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-password\n * @description A password is a control that enables users to enter password text.\n * @documentation https://nvidia.github.io/elements/docs/elements/password/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/password\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The visibility toggle icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password\n */\n@scopedRegistry()\nexport class Password extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  @state() private pressed = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-password',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" @click=${() => this.#toggleVisibility()} .pressed=${this.pressed} .iconName=${this.pressed ? 'eye-hidden' : 'eye'} container=\"inline\" .ariaLabel=${this.pressed ? this.i18n.hide : this.i18n.show}></nve-icon-button>`;\n  }\n\n  #toggleVisibility() {\n    this.pressed = !this.pressed;\n    this.input.type = this.pressed ? 'text' : 'password';\n  }\n}\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,IAAe;CACnB,MAAM;CACN,MAAM;AACR,GAmBa,IAAN,cAAuB,EAAoC;;EAWrC,aAAA,KAAA,UAAA;;CAV3B,IAAuB,eAA6B;EAClD,OAAO;CACT;;EAUgB,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,qDAAoD,KAAK,GAAkB,EAAE,cAAY,KAAK,QAAQ,eAAa,KAAK,UAAU,eAAe,MAAM,mCAAiC,KAAK,UAAU,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK;CACpP;CAEA,KAAoB;EAElB,AADA,KAAK,UAAU,CAAC,KAAK,SACrB,KAAK,MAAM,OAAO,KAAK,UAAU,SAAS;CAC5C;AACF;AAvBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAZR,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"password2.js","names":["styles","_decorate","__decorate","password_default","i18nDefaults","Password","Control","_args","useStyles","inputStyles","IconButton","#toggleVisibility","property","state","scopedRegistry"],"sources":["../../src/password/password.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 { state } from 'lit/decorators/state.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './password.css?inline';\n\nconst i18nDefaults = {\n  hide: 'hide',\n  show: 'show'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-password\n * @description A password is a control that enables users to enter password text.\n * @documentation https://nvidia.github.io/elements/docs/elements/password/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/password\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The visibility toggle icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password\n */\n@scopedRegistry()\nexport class Password extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  @state() private pressed = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-password',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" @click=${() => this.#toggleVisibility()} .pressed=${this.pressed} .iconName=${this.pressed ? 'eye-hidden' : 'eye'} container=\"inline\" .ariaLabel=${this.pressed ? this.i18n.hide : this.i18n.show}></nve-icon-button>`;\n  }\n\n  #toggleVisibility() {\n    this.pressed = !this.pressed;\n    this.input.type = this.pressed ? 'text' : 'password';\n  }\n}\n"],"mappings":";;;;;;;;;;;AAcA,IAAMI,IAAe;CACnB,MAAM;CACN,MAAM;AACR,GAmBaC,IAAN,cAAuBC,EAAoC;;EAWrC,A,aAAA,KAAA,UAAA;;CAV3B,IAAuB,eAA6B;EAClD,OAAOF;CACT;;EAUgB,KAAA,SAAAI,EAAU;GAAC,GAAGF,EAAQ;GAAQG;GAAaT;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBU,EAAW,SAAS,MAAMA,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,qDAAoD,KAAKC,GAAkB,EAAE,cAAY,KAAK,QAAQ,eAAa,KAAK,UAAU,eAAe,MAAM,mCAAiC,KAAK,UAAU,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK;CACpP;CAEA,KAAoB;EAElB,AADA,KAAK,UAAU,CAAC,KAAK,SACrB,KAAK,MAAM,OAAO,KAAK,UAAU,SAAS;CAC5C;AACF;AAvBGV,EAAA,CAAAW,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,aAAA,KAAA,CAAA,GAExCJ,EAAA,CAAAY,EAAM,CAAA,GAAAR,EAAA,WAAA,WAAA,KAAA,CAAA,GAZR,IAAAJ,EAAA,CAAAa,EAAe,CAAA,GAAAT,CAAA"}

package/dist/polyfills/index.js

@@ -1,11 +1,10 @@
 import "construct-style-sheets-polyfill";
 import "element-internals-polyfill";
 import "formdata-polyfill";
-//#region src/polyfills/index.ts
+// src/polyfills/index.ts
 Element.prototype.toggleAttribute || (Element.prototype.toggleAttribute = function(e, t) {
 	let n = t === void 0 ? void 0 : t;
 	return this.hasAttribute(e) ? n ? !0 : (this.removeAttribute(e), !1) : n !== !1 && (this.setAttribute(e, ""), !0);
 });
-//#endregion
 
 //# sourceMappingURL=index.js.map

package/dist/polyfills/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/polyfills/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used for Custom Elements Form/A11y APIs\n * https://github.com/whatwg/html/pull/8467\n * https://bugs.webkit.org/show_bug.cgi?id=215911\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763\n */\nimport 'construct-style-sheets-polyfill';\nimport 'element-internals-polyfill';\nimport 'formdata-polyfill';\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used in element-internals-polyfill\n */\nif (!Element.prototype.toggleAttribute) {\n  Element.prototype.toggleAttribute = function (name, force) {\n    const forceBool = force !== void 0 ? force : undefined;\n\n    if (this.hasAttribute(name)) {\n      if (forceBool) {\n        return true;\n      }\n\n      this.removeAttribute(name);\n      return false;\n    }\n    if (forceBool === false) {\n      return false;\n    }\n\n    this.setAttribute(name, '');\n    return true;\n  };\n}\n"],"mappings":";;;;AAuBK,QAAQ,UAAU,oBACrB,QAAQ,UAAU,kBAAkB,SAAU,GAAM,GAAO;CACzD,IAAM,IAAY,MAAU,KAAK,IAAY,KAAA,IAAR;CAerC,OAbI,KAAK,aAAa,CAAI,IACpB,IACK,MAGT,KAAK,gBAAgB,CAAI,GAClB,MAEL,MAAc,OAIlB,KAAK,aAAa,GAAM,EAAE,GACnB;AACT"}
+{"version":3,"file":"index.js","names":["forceBool","force","name"],"sources":["../../src/polyfills/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used for Custom Elements Form/A11y APIs\n * https://github.com/whatwg/html/pull/8467\n * https://bugs.webkit.org/show_bug.cgi?id=215911\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763\n */\nimport 'construct-style-sheets-polyfill';\nimport 'element-internals-polyfill';\nimport 'formdata-polyfill';\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used in element-internals-polyfill\n */\nif (!Element.prototype.toggleAttribute) {\n  Element.prototype.toggleAttribute = function (name, force) {\n    const forceBool = force !== void 0 ? force : undefined;\n\n    if (this.hasAttribute(name)) {\n      if (forceBool) {\n        return true;\n      }\n\n      this.removeAttribute(name);\n      return false;\n    }\n    if (forceBool === false) {\n      return false;\n    }\n\n    this.setAttribute(name, '');\n    return true;\n  };\n}\n"],"mappings":";;;;AAuBK,QAAQ,UAAU,oBACrB,QAAQ,UAAU,kBAAkB,SAAU,GAAM,GAAO;CACzD,IAAMA,IAAYC,MAAU,KAAK,IAAY,KAAA,IAARA;CAerC,OAbI,KAAK,aAAaC,CAAI,IACpBF,IACK,MAGT,KAAK,gBAAgBE,CAAI,GAClB,MAELF,MAAc,OAIlB,KAAK,aAAaE,GAAM,EAAE,GACnB;AACT"}

package/dist/preferences-input/define.js

@@ -1,7 +1,6 @@
 import { PreferencesInput as e } from "./preferences-input2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/preferences-input/define.ts
+// src/preferences-input/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/preferences-input/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/preferences-input/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { PreferencesInput } from '@nvidia-elements/core/preferences-input';\n\ndefine(PreferencesInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-preferences-input': PreferencesInput;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAgB"}
+{"version":3,"file":"define.js","names":["define","PreferencesInput"],"sources":["../../src/preferences-input/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { PreferencesInput } from '@nvidia-elements/core/preferences-input';\n\ndefine(PreferencesInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-preferences-input': PreferencesInput;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAgB"}

package/dist/preferences-input/index.js

@@ -1,2 +1 @@
-import { PreferencesInput as e } from "./preferences-input2.js";
-export { e as PreferencesInput };
+export { PreferencesInput } from "./preferences-input2.js";

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

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

package/dist/preferences-input/preferences-input.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"preferences-input.examples.js","names":[],"sources":["../../src/preferences-input/preferences-input.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/page/define.js';\nimport '@nvidia-elements/core/page-header/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/preferences-input/define.js';\n\nexport default {\n  title: 'Elements/Preferences Input',\n  component: 'nve-preferences-input'\n};\n\n/**\n * @summary Preferences input displaying theme settings (color scheme, scale, reduced motion) for user customization.\n */\nexport const Default = {\n  render: () => {\n    return html`\n      <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'></nve-preferences-input>\n    `\n  }\n};\n\n/**\n * @summary Preferences input integrated with form submission, displaying live JSON value updates.\n */\nexport const Forms = {\n  render: () => {\n    return html`\n      <form id=\"preferences-input-form\" nve-layout=\"row gap:md\">\n        <div nve-layout=\"column gap:md\">\n          <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"light\" }'></nve-preferences-input>\n          <nve-button>submit</nve-button>\n        </div>\n        <pre></pre>\n      </form>\n      <script type=\"module\">\n        const form = document.querySelector('form');\n        const preferencesInput = document.querySelector('nve-preferences-input');\n        const pre = document.querySelector('form pre');\n\n        form.addEventListener('change', renderValues);\n        form.addEventListener('input', renderValues);\n        form.addEventListener('submit', renderValues);\n        pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n\n        \n        function renderValues(e) {\n          e.preventDefault();\n          console.log(e);\n          pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n        }\n      </script>\n    `\n  }\n}\n\n/**\n * @summary Preferences input embedded in a dropdown menu triggered from a page header settings button.\n */\nexport const Dropdown = {\n  render: () => {\n    return html`\n      <nve-page-header>\n        <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n        <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n        <nve-icon-button slot=\"suffix\" icon-name=\"gear\" size=\"sm\" popovertarget=\"preferences-input\"></nve-icon-button>\n      </nve-page-header>\n      <nve-dropdown id=\"preferences-input\" position=\"bottom\" alignment=\"end\">\n        <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\" }'></nve-preferences-input>\n      </nve-dropdown>\n    `\n  }\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"preferences-input.examples.js","names":["preferences_input_examples_default"],"sources":["../../src/preferences-input/preferences-input.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/page/define.js';\nimport '@nvidia-elements/core/page-header/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/preferences-input/define.js';\n\nexport default {\n  title: 'Elements/Preferences Input',\n  component: 'nve-preferences-input'\n};\n\n/**\n * @summary Preferences input displaying theme settings (color scheme, scale, reduced motion) for user customization.\n */\nexport const Default = {\n  render: () => {\n    return html`\n      <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'></nve-preferences-input>\n    `\n  }\n};\n\n/**\n * @summary Preferences input integrated with form submission, displaying live JSON value updates.\n */\nexport const Forms = {\n  render: () => {\n    return html`\n      <form id=\"preferences-input-form\" nve-layout=\"row gap:md\">\n        <div nve-layout=\"column gap:md\">\n          <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"light\" }'></nve-preferences-input>\n          <nve-button>submit</nve-button>\n        </div>\n        <pre></pre>\n      </form>\n      <script type=\"module\">\n        const form = document.querySelector('form');\n        const preferencesInput = document.querySelector('nve-preferences-input');\n        const pre = document.querySelector('form pre');\n\n        form.addEventListener('change', renderValues);\n        form.addEventListener('input', renderValues);\n        form.addEventListener('submit', renderValues);\n        pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n\n        \n        function renderValues(e) {\n          e.preventDefault();\n          console.log(e);\n          pre.innerText = JSON.stringify(preferencesInput.value, null, 2);\n        }\n      </script>\n    `\n  }\n}\n\n/**\n * @summary Preferences input embedded in a dropdown menu triggered from a page header settings button.\n */\nexport const Dropdown = {\n  render: () => {\n    return html`\n      <nve-page-header>\n        <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n        <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n        <nve-icon-button slot=\"suffix\" icon-name=\"gear\" size=\"sm\" popovertarget=\"preferences-input\"></nve-icon-button>\n      </nve-page-header>\n      <nve-dropdown id=\"preferences-input\" position=\"bottom\" alignment=\"end\">\n        <nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\" }'></nve-preferences-input>\n      </nve-dropdown>\n    `\n  }\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}

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

@@ -1,6 +1,5 @@
-//#region src/preferences-input/preferences-input.css?inline
+// src/preferences-input/preferences-input.css?inline
 var e = ":host{--color: var(--nve-sys-interaction-color);display:block;width:fit-content}[internal-host]{color:var(--color);display:flex;gap:var(--nve-ref-space-sm);flex-direction:column}nve-control,nve-switch{--label-text-transform: capitalize}nve-menu{--width: 100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=preferences-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"preferences-input.js","names":[],"sources":["../../src/preferences-input/preferences-input.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  --color: var(--nve-sys-interaction-color);\n  display: block;\n  width: fit-content;\n}\n\n[internal-host] {\n  color: var(--color);\n  display: flex;\n  gap: var(--nve-ref-space-sm);\n  flex-direction: column;\n}\n\nnve-control,\nnve-switch {\n  --label-text-transform: capitalize;\n}\n\nnve-menu {\n  --width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"preferences-input.js","names":["preferences_input_default"],"sources":["../../src/preferences-input/preferences-input.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  --color: var(--nve-sys-interaction-color);\n  display: block;\n  width: fit-content;\n}\n\n[internal-host] {\n  color: var(--color);\n  display: flex;\n  gap: var(--nve-ref-space-sm);\n  flex-direction: column;\n}\n\nnve-control,\nnve-switch {\n  --label-text-transform: capitalize;\n}\n\nnve-menu {\n  --width: 100%;\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as r } from "../icon/icon2.js";
 import { Control as i } from "../forms/control/control2.js";
 import { Switch as a } from "../switch/switch2.js";
@@ -13,7 +13,7 @@ import { property as p } from "lit/decorators/property.js";
 import { I18nController as m } from "@nvidia-elements/foundations/internal/i18n";
 import { state as h } from "lit/decorators/state.js";
 import { FormControlMixin as g } from "@nvidia-elements/forms/mixins";
-//#region src/preferences-input/preferences-input.ts
+// src/preferences-input/preferences-input.ts
 var _ = [
 	"auto",
 	"light",
@@ -48,7 +48,7 @@ var S = class extends g(u) {
 	static {
 		this.metadata = {
 			tag: "nve-preferences-input",
-			version: "2.20.1",
+			version: "2.20.2",
 			valueSchema: {
 				type: "object",
 				properties: {
@@ -124,7 +124,6 @@ var S = class extends g(u) {
 	}
 };
 n([p({ type: Object })], S.prototype, "i18n", void 0), n([h()], S.prototype, "activePreferences", void 0), S = n([e()], S);
-//#endregion
 export { S as PreferencesInput };
 
 //# sourceMappingURL=preferences-input2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"preferences-input2.js","names":[],"sources":["../../src/preferences-input/preferences-input.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { state } from 'lit/decorators/state.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { type IconName, Icon } from '@nvidia-elements/core/icon';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Divider } from '@nvidia-elements/core/divider';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Switch } from '@nvidia-elements/core/switch';\nimport styles from './preferences-input.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc types because the CEM analyzer loses the inherited generic specialization.\n\nexport type ColorScheme = 'auto' | 'light' | 'dark' | 'high-contrast';\nexport type Scale = 'default' | 'compact' | 'relaxed';\nexport type Variant = 'reduced-motion';\n\nconst colorSchemes: ColorScheme[] = ['auto', 'light', 'dark', 'high-contrast'];\nconst scales: Scale[] = ['default', 'compact'];\nconst i18nDefaults = {\n  theme: 'theme',\n  scale: 'scale',\n  reducedMotion: 'reduced motion',\n  colorScheme: 'color scheme'\n} satisfies I18nDefaults;\nconst colorSchemesIcons = {\n  auto: 'computer',\n  light: 'sun',\n  dark: 'moon',\n  'high-contrast': 'circle-half'\n} satisfies Record<ColorScheme, IconName>;\n\nfunction getActivePreferences(element = globalThis.document.documentElement) {\n  const computedStyle = getComputedStyle(element);\n\n  return {\n    light: computedStyle.getPropertyValue('--nve-config-color-scheme-light') === 'true',\n    dark: computedStyle.getPropertyValue('--nve-config-color-scheme-dark') === 'true',\n    'high-contrast': computedStyle.getPropertyValue('--nve-config-color-scheme-high-contrast') === 'true',\n    compact: computedStyle.getPropertyValue('--nve-config-scale-compact') === 'true',\n    'reduced-motion': computedStyle.getPropertyValue('--nve-config-reduced-motion') === 'true'\n  } satisfies Partial<Record<ColorScheme | Scale | Variant, boolean>>;\n}\n\nexport interface PreferencesInputValue {\n  'color-scheme'?: ColorScheme | string;\n  scale?: Scale | string;\n  'reduced-motion'?: boolean;\n}\n\n/**\n * @element nve-preferences-input\n * @description A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n * @documentation https://nvidia.github.io/elements/docs/elements/preferences-input/\n * @since 1.23.7\n * @entrypoint \\@nvidia-elements/core/preferences-input\n * @property {PreferencesInputValue} value - Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute.\n * @attribute {string} value - JSON object parsed as `PreferencesInputValue`.\n * @event input - Dispatched when the value has changed\n * @event change - Dispatched when the value has changed\n * @cssprop --color\n * @cssprop --width\n * @csspart control - The control wrapper elements that contain the labels and menus\n * @csspart menu - The menu elements that display color scheme and scale options\n * @csspart menu-item - The individual menu item elements for each selectable option\n * @csspart icon - The icon element displayed next to color scheme options\n * @csspart divider - The divider elements that separate preference sections\n * @csspart switch - The switch element for the reduced motion toggle\n *\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/listbox/\n *\n */\n@scopedRegistry()\nexport class PreferencesInput extends FormControlMixin<typeof LitElement, PreferencesInputValue>(LitElement) {\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-preferences-input',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'object' as const,\n      properties: {\n        'color-scheme': { type: 'string' as const },\n        scale: { type: 'string' as const },\n        'reduced-motion': { type: 'boolean' as const }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Control.metadata.tag]: Control,\n    [Divider.metadata.tag]: Divider,\n    [Icon.metadata.tag]: Icon,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Switch.metadata.tag]: Switch\n  };\n\n  @state() private activePreferences: ReturnType<typeof getActivePreferences> = {\n    light: false,\n    dark: false,\n    'high-contrast': false,\n    compact: false,\n    'reduced-motion': false\n  };\n\n  // eslint-disable-next-line max-lines-per-function\n  render() {\n    return html`\n      <div internal-host>\n        <nve-control part=\"control\">\n          <label>${this.i18n.colorScheme}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${colorSchemes.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['color-scheme'] === value}\n              .value=${value}\n              @click=${() => this.#setColorScheme(value)}\n            >\n              <nve-icon part=\"icon\" name=${colorSchemesIcons[value]}></nve-icon> ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n        ${\n          this.activePreferences['compact']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-control part=\"control\">\n          <label>${this.i18n.scale}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${scales.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['scale'] === value}\n              .value=${value}\n              @click=${() => this.#setScale(value)}\n            >\n              ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n          `\n            : ''\n        }\n        ${\n          this.activePreferences['reduced-motion']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-switch part=\"switch\">\n          <label>${this.i18n.reducedMotion}</label>\n          <input\n            type=\"checkbox\"\n            value=\"reduced-motion\"\n            .checked=${this.value?.['reduced-motion']}\n            @change=${(e: { target: HTMLInputElement }) => this.#setReducedMotion(e.target.checked)}\n          />\n        </nve-switch>`\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = {\n      'color-scheme': 'auto',\n      'reduced-motion': false,\n      scale: 'default'\n    };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    this.#updatePreferences();\n  }\n\n  /** @private */\n  updateValue(value: PreferencesInputValue) {\n    super.updateValue({ ...this.value, ...value });\n    this.#updatePreferences();\n  }\n\n  #updatePreferences() {\n    /* istanbul ignore else -- Lit SSR mode is not reachable in browser unit tests. */\n    if (!isServer) {\n      const preferences = getActivePreferences();\n      if (JSON.stringify(this.activePreferences) !== JSON.stringify(preferences)) {\n        this.activePreferences = preferences;\n      }\n    }\n  }\n\n  #setColorScheme(value: ColorScheme) {\n    this.value = { ...this.value, 'color-scheme': value };\n    this.#update();\n  }\n\n  #setScale(value: Scale) {\n    this.value = { ...this.value, scale: value };\n    this.#update();\n  }\n\n  #setReducedMotion(value: boolean) {\n    this.value = { ...this.value, 'reduced-motion': value };\n    this.#update();\n  }\n\n  #update() {\n    this.dispatchInputEvent();\n    this.dispatchChangeEvent();\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,IAA8B;CAAC;CAAQ;CAAS;CAAQ;AAAe,GACvE,IAAkB,CAAC,WAAW,SAAS,GACvC,IAAe;CACnB,OAAO;CACP,OAAO;CACP,eAAe;CACf,aAAa;AACf,GACM,IAAoB;CACxB,MAAM;CACN,OAAO;CACP,MAAM;CACN,iBAAiB;AACnB;AAEA,SAAS,EAAqB,IAAU,WAAW,SAAS,iBAAiB;CAC3E,IAAM,IAAgB,iBAAiB,CAAO;CAE9C,OAAO;EACL,OAAO,EAAc,iBAAiB,iCAAiC,MAAM;EAC7E,MAAM,EAAc,iBAAiB,gCAAgC,MAAM;EAC3E,iBAAiB,EAAc,iBAAiB,yCAAyC,MAAM;EAC/F,SAAS,EAAc,iBAAiB,4BAA4B,MAAM;EAC1E,kBAAkB,EAAc,iBAAiB,6BAA6B,MAAM;CACtF;AACF;AA+BO,IAAM,IAAN,cAA+B,EAA2D,CAAU,CAAC,CAAC;CAC3G;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,aAAa;IACX,MAAM;IACN,YAAY;KACV,gBAAgB,EAAE,MAAM,SAAkB;KAC1C,OAAO,EAAE,MAAM,SAAkB;KACjC,kBAAkB,EAAE,MAAM,UAAmB;IAC/C;GACF;EACF;;;EAE4B,KAAA,qBAAA;IACzB,EAAQ,SAAS,MAAM;IACvB,EAAQ,SAAS,MAAM;IACvB,EAAK,SAAS,MAAM;IACpB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAO,SAAS,MAAM;EACzB;;CAWA,SAAS;EACP,OAAO,CAAI,yDAGI,KAAK,KAAK,YAAY,4CAE7B,EAAa,KACb,MAAS,CAAI,8CAEC,KAAK,QAAQ,oBAAoB,EAAM,YAC1C,EAAM,kBACA,KAAK,GAAgB,CAAK,EAAE,gCAEd,EAAkB,GAAO,eAAe,EAAM,iBAG/E,EAAE,2BAIF,KAAK,kBAAkB,UACnB,CAAI,gFAGC,KAAK,KAAK,MAAM,4CAEvB,EAAO,KACP,MAAS,CAAI,8CAEC,KAAK,OAAQ,UAAa,EAAM,YACnC,EAAM,kBACA,KAAK,GAAU,CAAK,EAAE,IAEnC,EAAM,iBAGZ,EAAE,6BAIE,GACL,GAEC,KAAK,kBAAkB,oBACnB,CAAI,8EAGC,KAAK,KAAK,cAAc,mEAIpB,KAAK,QAAQ,kBAAkB,cAC/B,MAAoC,KAAK,GAAkB,EAAE,OAAO,OAAO,EAAE,mBAGtF,GACL;CAGP;CAEA,cAAc;EAEZ,AADA,MAAM,GAtGgC,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAKhD,KAAA,OAAA,KAAK,GAAgB,MA0BsB,KAAA,oBAAA;GAC5E,OAAO;GACP,MAAM;GACN,iBAAiB;GACjB,SAAS;GACT,kBAAkB;EACpB,GAkEE,KAAK,QAAQ;GACX,gBAAgB;GAChB,kBAAkB;GAClB,OAAO;EACT;CACF;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,KAAK,aAAa,eAAe,EAAE,GACnC,KAAK,GAAmB;CAC1B;CAGA,YAAY,GAA8B;EAExC,AADA,MAAM,YAAY;GAAE,GAAG,KAAK;GAAO,GAAG;EAAM,CAAC,GAC7C,KAAK,GAAmB;CAC1B;CAEA,KAAqB;;EAEnB,IAAI,CAAC,GAAU;GACb,IAAM,IAAc,EAAqB;GACzC,AAAI,KAAK,UAAU,KAAK,iBAAiB,MAAM,KAAK,UAAU,CAAW,MACvE,KAAK,oBAAoB;EAE7B;CACF;CAEA,GAAgB,GAAoB;EAElC,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,gBAAgB;EAAM,GACpD,KAAK,GAAQ;CACf;CAEA,GAAU,GAAc;EAEtB,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,OAAO;EAAM,GAC3C,KAAK,GAAQ;CACf;CAEA,GAAkB,GAAgB;EAEhC,AADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,kBAAkB;EAAM,GACtD,KAAK,GAAQ;CACf;CAEA,KAAU;EAER,AADA,KAAK,mBAAmB,GACxB,KAAK,oBAAoB;CAC3B;AACF;AAlJG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GA0BzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,qBAAA,KAAA,CAAA,GAjCR,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"preferences-input2.js","names":["styles","_decorate","__decorate","preferences_input_default","colorSchemes","scales","i18nDefaults","colorSchemesIcons","getActivePreferences","computedStyle","element","PreferencesInput","FormControlMixin","LitElement","useStyles","Control","Divider","Icon","Menu","MenuItem","Switch","value","#setColorScheme","\"compact\"","\"scale\"","#setScale","#setReducedMotion","#i18nController","I18nController","#updatePreferences","isServer","preferences","#update","property","state","scopedRegistry"],"sources":["../../src/preferences-input/preferences-input.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { state } from 'lit/decorators/state.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { type IconName, Icon } from '@nvidia-elements/core/icon';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Divider } from '@nvidia-elements/core/divider';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Switch } from '@nvidia-elements/core/switch';\nimport styles from './preferences-input.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc types because the CEM analyzer loses the inherited generic specialization.\n\nexport type ColorScheme = 'auto' | 'light' | 'dark' | 'high-contrast';\nexport type Scale = 'default' | 'compact' | 'relaxed';\nexport type Variant = 'reduced-motion';\n\nconst colorSchemes: ColorScheme[] = ['auto', 'light', 'dark', 'high-contrast'];\nconst scales: Scale[] = ['default', 'compact'];\nconst i18nDefaults = {\n  theme: 'theme',\n  scale: 'scale',\n  reducedMotion: 'reduced motion',\n  colorScheme: 'color scheme'\n} satisfies I18nDefaults;\nconst colorSchemesIcons = {\n  auto: 'computer',\n  light: 'sun',\n  dark: 'moon',\n  'high-contrast': 'circle-half'\n} satisfies Record<ColorScheme, IconName>;\n\nfunction getActivePreferences(element = globalThis.document.documentElement) {\n  const computedStyle = getComputedStyle(element);\n\n  return {\n    light: computedStyle.getPropertyValue('--nve-config-color-scheme-light') === 'true',\n    dark: computedStyle.getPropertyValue('--nve-config-color-scheme-dark') === 'true',\n    'high-contrast': computedStyle.getPropertyValue('--nve-config-color-scheme-high-contrast') === 'true',\n    compact: computedStyle.getPropertyValue('--nve-config-scale-compact') === 'true',\n    'reduced-motion': computedStyle.getPropertyValue('--nve-config-reduced-motion') === 'true'\n  } satisfies Partial<Record<ColorScheme | Scale | Variant, boolean>>;\n}\n\nexport interface PreferencesInputValue {\n  'color-scheme'?: ColorScheme | string;\n  scale?: Scale | string;\n  'reduced-motion'?: boolean;\n}\n\n/**\n * @element nve-preferences-input\n * @description A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n * @documentation https://nvidia.github.io/elements/docs/elements/preferences-input/\n * @since 1.23.7\n * @entrypoint \\@nvidia-elements/core/preferences-input\n * @property {PreferencesInputValue} value - Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute.\n * @attribute {string} value - JSON object parsed as `PreferencesInputValue`.\n * @event input - Dispatched when the value has changed\n * @event change - Dispatched when the value has changed\n * @cssprop --color\n * @cssprop --width\n * @csspart control - The control wrapper elements that contain the labels and menus\n * @csspart menu - The menu elements that display color scheme and scale options\n * @csspart menu-item - The individual menu item elements for each selectable option\n * @csspart icon - The icon element displayed next to color scheme options\n * @csspart divider - The divider elements that separate preference sections\n * @csspart switch - The switch element for the reduced motion toggle\n *\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/listbox/\n *\n */\n@scopedRegistry()\nexport class PreferencesInput extends FormControlMixin<typeof LitElement, PreferencesInputValue>(LitElement) {\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-preferences-input',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'object' as const,\n      properties: {\n        'color-scheme': { type: 'string' as const },\n        scale: { type: 'string' as const },\n        'reduced-motion': { type: 'boolean' as const }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Control.metadata.tag]: Control,\n    [Divider.metadata.tag]: Divider,\n    [Icon.metadata.tag]: Icon,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Switch.metadata.tag]: Switch\n  };\n\n  @state() private activePreferences: ReturnType<typeof getActivePreferences> = {\n    light: false,\n    dark: false,\n    'high-contrast': false,\n    compact: false,\n    'reduced-motion': false\n  };\n\n  // eslint-disable-next-line max-lines-per-function\n  render() {\n    return html`\n      <div internal-host>\n        <nve-control part=\"control\">\n          <label>${this.i18n.colorScheme}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${colorSchemes.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['color-scheme'] === value}\n              .value=${value}\n              @click=${() => this.#setColorScheme(value)}\n            >\n              <nve-icon part=\"icon\" name=${colorSchemesIcons[value]}></nve-icon> ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n        ${\n          this.activePreferences['compact']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-control part=\"control\">\n          <label>${this.i18n.scale}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${scales.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['scale'] === value}\n              .value=${value}\n              @click=${() => this.#setScale(value)}\n            >\n              ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n          `\n            : ''\n        }\n        ${\n          this.activePreferences['reduced-motion']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-switch part=\"switch\">\n          <label>${this.i18n.reducedMotion}</label>\n          <input\n            type=\"checkbox\"\n            value=\"reduced-motion\"\n            .checked=${this.value?.['reduced-motion']}\n            @change=${(e: { target: HTMLInputElement }) => this.#setReducedMotion(e.target.checked)}\n          />\n        </nve-switch>`\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = {\n      'color-scheme': 'auto',\n      'reduced-motion': false,\n      scale: 'default'\n    };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    this.#updatePreferences();\n  }\n\n  /** @private */\n  updateValue(value: PreferencesInputValue) {\n    super.updateValue({ ...this.value, ...value });\n    this.#updatePreferences();\n  }\n\n  #updatePreferences() {\n    /* istanbul ignore else -- Lit SSR mode is not reachable in browser unit tests. */\n    if (!isServer) {\n      const preferences = getActivePreferences();\n      if (JSON.stringify(this.activePreferences) !== JSON.stringify(preferences)) {\n        this.activePreferences = preferences;\n      }\n    }\n  }\n\n  #setColorScheme(value: ColorScheme) {\n    this.value = { ...this.value, 'color-scheme': value };\n    this.#update();\n  }\n\n  #setScale(value: Scale) {\n    this.value = { ...this.value, scale: value };\n    this.#update();\n  }\n\n  #setReducedMotion(value: boolean) {\n    this.value = { ...this.value, 'reduced-motion': value };\n    this.#update();\n  }\n\n  #update() {\n    this.dispatchInputEvent();\n    this.dispatchChangeEvent();\n  }\n}\n"],"mappings":"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"}

package/dist/progress-bar/define.js

@@ -1,7 +1,6 @@
 import { ProgressBar as e } from "./progress-bar2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/progress-bar/define.ts
+// src/progress-bar/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/progress-bar/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/progress-bar/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressBar } from '@nvidia-elements/core/progress-bar';\n\ndefine(ProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-bar': ProgressBar;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAW"}
+{"version":3,"file":"define.js","names":["define","ProgressBar"],"sources":["../../src/progress-bar/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { ProgressBar } from '@nvidia-elements/core/progress-bar';\n\ndefine(ProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-bar': ProgressBar;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAW"}

package/dist/progress-bar/index.js

@@ -1,2 +1 @@
-import { ProgressBar as e } from "./progress-bar2.js";
-export { e as ProgressBar };
+export { ProgressBar } from "./progress-bar2.js";

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

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