@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/panel/panel.examples.json

@@ -0,0 +1,81 @@
+{
+  "element": "nve-panel",
+  "entrypoint": "@nvidia-elements/core/panel/panel.examples.json",
+  "items": [
+    {
+      "id": "core-panel_default",
+      "name": "Default",
+      "template": "<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      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\"></div>\n      </nve-panel-header>\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        <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        <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        <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        <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        <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        <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",
+      "summary": "Basic panel layout with header showing session details and metadata in a collapsible side panel.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-panel_left-side-panel",
+      "name": "LeftSidePanel",
+      "template": "<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      <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        <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        <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        <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        <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        <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        <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",
+      "summary": "Left-positioned collapsible panel for sidebar navigation and content details.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-panel_right-side-panel",
+      "name": "RightSidePanel",
+      "template": "<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      <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        <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        <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        <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        <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        <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        <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",
+      "summary": "Right-positioned collapsible panel for supplementary content and property inspectors.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-panel_closable-panel",
+      "name": "ClosablePanel",
+      "template": "<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      <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        <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        <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        <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        <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        <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        <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  <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n</section>\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",
+      "summary": "Closable panel with external toggle button for programmatic show/hide control.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-panel_with-trigger",
+      "name": "WithTrigger",
+      "template": "<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      <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        <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        <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        <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        <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        <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        <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  <nve-button interaction=\"emphasis\">Toggle Panel</nve-button>\n</section>\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",
+      "summary": "Collapsible panel with built-in close button and external toggle for flexible expand/collapse behavior.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-panel_with-full-header",
+      "name": "WithFullHeader",
+      "template": "<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      <nve-panel-header>\n        <div slot=\"title\">Title</div>\n        <div slot=\"subtitle\">Subtitle</div>\n        <nve-icon-button container=\"flat\" slot=\"action-icon\" icon-name=\"more-actions\"></nve-icon-button>\n      </nve-panel-header>\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        <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        <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        <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        <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        <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        <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",
+      "summary": "Panel with complete header including title, subtitle, and action icon slots for rich header content.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-panel_with-footer",
+      "name": "WithFooter",
+      "template": "<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      <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        <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        <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        <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        <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        <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        <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-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",
+      "summary": "Panel with footer containing action buttons for form submissions and destructive actions.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/panel/panel.js

@@ -0,0 +1,6 @@
+//#region 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

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

package/dist/panel/panel2.js

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

package/dist/panel/panel2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel2.js","names":["#i18nController","#direction","#typeExpandableController"],"sources":["../../src/panel/panel.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  stateExpanded,\n  I18nController,\n  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport panelStyleSheet from './panel.css?inline';\nimport panelHeaderStyleSheet from './panel-header.css?inline';\nimport panelContentStyleSheet from './panel-content.css?inline';\nimport panelFooterStyleSheet from './panel-footer.css?inline';\n\n/**\n * @element nve-panel-header\n * @description Displays the title, subtitle, and optional action controls at the top of a panel.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - default content slot\n * @slot title - Title Text\n * @slot subtitle - Subtitle Text\n * @slot action-icon - Extra Action Button\n * @cssprop --padding\n * @cssprop --border-bottom\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel` with `nve-page` instead\n */\nexport class PanelHeader extends LitElement {\n  static styles = useStyles([panelHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-header',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <div id=\"titles\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n          <slot></slot>\n        </div>\n\n        <slot name=\"action-icon\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'header';\n  }\n}\n\n/**\n * @element nve-panel-content\n * @description Contains the main body content within a panel, providing a structured region for detailed information.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class PanelContent extends LitElement {\n  static styles = useStyles([panelContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-panel-footer\n * @description Provides a designated area at the bottom of a panel for actions or supplementary controls.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class PanelFooter extends LitElement {\n  static styles = useStyles([panelFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-footer',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'footer';\n  }\n}\n\n/**\n * @element nve-panel\n * @description Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @event open - Dispatched when the panel opens.\n * @event close - Dispatched when the panel closes.\n * @slot - This is a default/unnamed slot for panel content\n * @slot header - header element (Use `panel-header` or custom content)\n * @slot content - content element (Use `panel-content` or custom content)\n * @slot footer - footer element (Use `panel-footer` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --box-shadow\n * @cssprop --panel-button-border-radius - Border radius of the panel expand/collapse button\n * @csspart icon-button - The expand/collapse icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n\n@scopedRegistry()\n@stateExpanded<Panel>()\nexport class Panel extends LitElement {\n  /**\n   * Determines whether the panel is fully expanded, displaying its contents, or not.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether the panel collapses down to an expand icon, or fully hides.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines whether the panel should handle auto-closing behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies.\n   */\n  @property({ type: String }) side: 'left' | 'right' = 'left';\n\n  static styles = useStyles([panelStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  #typeExpandableController = new TypeExpandableController(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #direction() {\n    if (this.side === 'left') {\n      return this.expanded ? 'left' : 'right';\n    } else {\n      return this.expanded ? 'right' : 'left';\n    }\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n\n          ${when(\n            !this.closable,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .container=${this.expanded ? 'flat' : undefined} icon-name=\"double-chevron\"\n                @click=${() => this.#typeExpandableController.toggle()}\n                .direction=${this.#direction}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n              ></nve-icon-button>\n            `,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" container=\"flat\" icon-name=\"cancel\"\n                @click=${() => this.#typeExpandableController.close()}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.hide : this.i18n.show}\n              ></nve-icon-button>\n            `\n          )}\n        </div>\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'region';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkCA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,EAAsB,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,CAAI;;CAab,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,OAAO;;GAaH,IAAb,cAAkC,EAAW;;gBAC3B,EAAU,CAAC,EAAuB,CAAC;;;kBAExB;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,CAAI;;GAiBF,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,EAAsB,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,OAAO;;GAyBT,IAAA,cAAoB,EAAW;;+BAImB,oBAKf,0BAKoC,gBAKvB,oBAsBlB,MAAA,EAAqB;;;gBApBxC,EAAU,CAAC,EAAgB,CAAC;;;kBAEjB;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAKD,KAAwC,IAAI,EAAqB,KAAK;CACtE,KAA4B,IAAI,EAAyB,KAAK;CAO9D,KAAA,IAAiB;AAIb,SAHE,KAAK,SAAS,SACT,KAAK,WAAW,SAAS,UAEzB,KAAK,WAAW,UAAU;;CAIrC,SAAS;AACP,SAAO,CAAI,qEAKH,EACA,CAAC,KAAK,gBACA,CAAI,uFAC6E,KAAK,WAAW,SAAS,KAAA,EAAU,6CACvG,MAAA,EAA+B,QAAQ,CAAC,gBAC1C,MAAA,EAAgB,eACjB,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,QAAQ,KAAK,KAAK,OAAO,6BAG9D,CAAI,6HAES,MAAA,EAA+B,OAAO,CAAC,eAC1C,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK,sBAGlE,CAAC;;CAYV,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;;GArFxB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK3B,EAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAKzD,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAsB1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SA3C5B,GAAgB,EAChB,GAAsB,CAAA,EAAA,EAAA"}

package/dist/password/define.d.ts

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

package/dist/password/define.js

@@ -0,0 +1,9 @@
+import { define as e } from "../internal/utils/dom.js";
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Password as i } from "./password2.js";
+e(i), e(n), e(r), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/password/define.js.map

@@ -0,0 +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/core/internal';\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,EAAS,EAChB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/password/index.d.ts

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

package/dist/password/index.js

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

package/dist/password/password.d.ts

@@ -0,0 +1,36 @@
+import { ContainerElement } from '../internal';
+import { Control } from '../forms';
+import { IconButton } from '../icon-button';
+/**
+ * @element nve-password
+ * @description A password is a control that enables users to enter password text.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/password
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --cursor
+ * @csspart icon-button - The visibility toggle icon button element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
+ */
+export declare class Password extends Control implements ContainerElement {
+    #private;
+    /**
+     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
+     * Use when embedding within another container such as a toolbar.
+     */
+    container?: 'flat';
+    private pressed;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+}

package/dist/password/password.examples.js

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

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

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

package/dist/password/password.examples.json

@@ -0,0 +1,37 @@
+{
+  "element": "nve-password",
+  "entrypoint": "@nvidia-elements/core/password/password.examples.json",
+  "items": [
+    {
+      "id": "core-password_default",
+      "name": "Default",
+      "template": "<nve-password>\n  <label>label</label>\n  <input type=\"password\" value=\"123456\" />\n  <nve-control-message>message</nve-control-message>\n</nve-password>\n",
+      "summary": "Basic password input with toggle visibility for secure credential entry and authentication forms.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-password_vertical",
+      "name": "Vertical",
+      "template": "<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  <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  <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  <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",
+      "summary": "Password inputs with vertical layout including validation states for disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-password_horizontal",
+      "name": "Horizontal",
+      "template": "<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  <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  <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  <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",
+      "summary": "Password inputs with horizontal layout showing validation states for inline forms and compact layouts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/password/password.js

@@ -0,0 +1,6 @@
+//#region 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

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

package/dist/password/password2.js

@@ -0,0 +1,46 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
+import { useStyles as n } from "../internal/styles/index.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";
+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
+var u = class extends r {
+	constructor(...e) {
+		super(...e), this.pressed = !1;
+	}
+	static {
+		this.styles = n([
+			...r.styles,
+			a,
+			o
+		]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-password",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [i.metadata.tag]: i };
+	}
+	get suffixContent() {
+		return s`<nve-icon-button part="icon-button" @click="${() => this.#e()}" .pressed="${this.pressed}" .iconName="${this.pressed ? "eye-hidden" : "eye"}" container="inline" .ariaLabel="${this.pressed ? this.i18n.hide : this.i18n.show}"></nve-icon-button>`;
+	}
+	#e() {
+		this.pressed = !this.pressed, this.input.type = this.pressed ? "text" : "password";
+	}
+};
+e([c({
+	type: String,
+	reflect: !0
+})], u.prototype, "container", void 0), e([l()], u.prototype, "pressed", void 0), u = e([t()], u);
+//#endregion
+export { u as Password };
+
+//# sourceMappingURL=password2.js.map

package/dist/password/password2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password2.js","names":["#toggleVisibility"],"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 styles from './password.css?inline';\n\n/**\n * @element nve-password\n * @description A password is a control that enables users to enter password text.\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  /**\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":";;;;;;;;;;;AA6BO,IAAA,IAAA,cAAuB,EAAoC;;8BAOrC;;;gBAEX,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;GAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,IAAc,gBAAgB;AAC5B,SAAO,CAAI,qDAAoD,MAAA,GAAwB,CAAC,cAAY,KAAK,QAAQ,eAAa,KAAK,UAAU,eAAe,MAAM,mCAAiC,KAAK,UAAU,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK;;CAGpP,KAAoB;AAElB,EADA,KAAK,UAAU,CAAC,KAAK,SACrB,KAAK,MAAM,OAAO,KAAK,UAAU,SAAS;;;GArB3C,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAEzC,GAAO,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SART,GAAgB,CAAA,EAAA,EAAA"}

package/dist/polyfills/custom-state-set.d.ts

@@ -0,0 +1,17 @@
+declare const SUPPORTS_CUSTOM_STATES: boolean;
+/**
+ * CustomStateSet Polyfill for :state() syntax downleveled to legacy :--state syntax (Chromium < v123)
+ * https://html.spec.whatwg.org/multipage/custom-elements.html#exposing-custom-element-states
+ *
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763
+ */
+declare class CustomStateSetPolyfill extends Set {
+    private _stateSet;
+    private _element;
+    constructor(stateSet: CustomStateSet, element: HTMLElement);
+    add(state: string): this;
+    delete(state: string): boolean;
+    clear(): void;
+}
+declare function customStateSetPolyfill(): void;
+declare function replaceToLegacyState(value: string): string;

package/dist/polyfills/custom-state-set.js

@@ -0,0 +1,49 @@
+//#region src/polyfills/custom-state-set.ts
+var e = CSS.supports("selector(:state(test))"), t = class extends Set {
+	constructor(e, t) {
+		super(), this._stateSet = e, this._element = t;
+	}
+	add(e) {
+		super.add(e);
+		try {
+			this._stateSet?.add(e.replace("--", ""));
+		} catch {
+			this._element.setAttribute(`state--${e.replace("--", "")}`, "");
+		}
+		return this;
+	}
+	delete(e) {
+		super.delete(e);
+		try {
+			this._stateSet?.delete(e);
+		} catch {
+			this._element.removeAttribute(`state--${e.replace("--", "")}`);
+		}
+		return !0;
+	}
+	clear() {
+		for (let e of this) this.delete(e);
+	}
+};
+n();
+function n() {
+	let e = HTMLElement.prototype.attachInternals;
+	Object.defineProperty(HTMLElement.prototype, "attachInternals", { value: function(...n) {
+		let r = e.call(this);
+		return Object.defineProperty(r, "states", { value: new t(r.states, this) }), r;
+	} });
+	let n = Element.prototype.matches;
+	Object.defineProperty(Element.prototype, "matches", { value: function(e) {
+		return n.call(this, r(e));
+	} });
+	let i = CSSStyleSheet.prototype.replaceSync;
+	Object.defineProperty(CSSStyleSheet.prototype, "replaceSync", { value: function(e) {
+		i.call(this, r(e));
+	} });
+}
+function r(t) {
+	return e ? t.replace(/:--([^\)]+)/g, ":state($1)") : t.replace(/:--([^\)]+)/g, "[state--$1]").replace(/:state\(([^\)]+)\)/g, "[state--$1]");
+}
+//#endregion
+
+//# sourceMappingURL=custom-state-set.js.map

package/dist/polyfills/custom-state-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-state-set.js","names":[],"sources":["../../src/polyfills/custom-state-set.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nconst SUPPORTS_CUSTOM_STATES = CSS.supports('selector(:state(test))');\n\n/**\n * CustomStateSet Polyfill for :state() syntax downleveled to legacy :--state syntax (Chromium < v123)\n * https://html.spec.whatwg.org/multipage/custom-elements.html#exposing-custom-element-states\n *\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763\n */\n\nclass CustomStateSetPolyfill extends Set {\n  // not using native private fields due to terser bug\n  private _stateSet: CustomStateSet; // eslint-disable-line no-restricted-syntax\n  private _element: HTMLElement; // eslint-disable-line no-restricted-syntax\n\n  constructor(stateSet: CustomStateSet, element: HTMLElement) {\n    super();\n    this._stateSet = stateSet;\n    this._element = element;\n  }\n\n  add(state: string) {\n    super.add(state);\n    try {\n      this._stateSet?.add(state.replace('--', ''));\n      // try latest syntax :state()\n    } catch {\n      // else fallback to legacy syntax [state--*]\n      this._element.setAttribute(`state--${state.replace('--', '')}`, '');\n    }\n    return this;\n  }\n\n  delete(state: string) {\n    super.delete(state);\n    try {\n      this._stateSet?.delete(state);\n    } catch {\n      this._element.removeAttribute(`state--${state.replace('--', '')}`);\n    }\n    return true;\n  }\n\n  clear() {\n    for (const state of this) this.delete(state);\n  }\n}\n\ncustomStateSetPolyfill();\n\nfunction customStateSetPolyfill() {\n  const attachInternals = HTMLElement.prototype.attachInternals;\n  Object.defineProperty(HTMLElement.prototype, 'attachInternals', {\n    value: function (..._args: unknown[]) {\n      const internals = attachInternals.call(this) as unknown as ElementInternals;\n      Object.defineProperty(internals, 'states', { value: new CustomStateSetPolyfill(internals.states, this) });\n      return internals;\n    }\n  });\n\n  const matches = Element.prototype.matches;\n  Object.defineProperty(Element.prototype, 'matches', {\n    value: function (text: string) {\n      return matches.call(this, replaceToLegacyState(text));\n    }\n  });\n\n  const replaceSync = CSSStyleSheet.prototype.replaceSync;\n  Object.defineProperty(CSSStyleSheet.prototype, 'replaceSync', {\n    value: function (text: string) {\n      replaceSync.call(this, replaceToLegacyState(text));\n    }\n  });\n}\n\nfunction replaceToLegacyState(value: string) {\n  // if the browser does not support :state(*) selectors replace any CSS state selectors with attribute fallbacks [state-*]\n  if (!SUPPORTS_CUSTOM_STATES) {\n    return value.replace(/:--([^\\)]+)/g, '[state--$1]').replace(/:state\\(([^\\)]+)\\)/g, '[state--$1]');\n  } else {\n    return value.replace(/:--([^\\)]+)/g, ':state($1)');\n  }\n}\n"],"mappings":";AAGA,IAAM,IAAyB,IAAI,SAAS,yBAAyB,EAS/D,IAAN,cAAqC,IAAI;CAKvC,YAAY,GAA0B,GAAsB;AAG1D,EAFA,OAAO,EACP,KAAK,YAAY,GACjB,KAAK,WAAW;;CAGlB,IAAI,GAAe;AACjB,QAAM,IAAI,EAAM;AAChB,MAAI;AACF,QAAK,WAAW,IAAI,EAAM,QAAQ,MAAM,GAAG,CAAC;UAEtC;AAEN,QAAK,SAAS,aAAa,UAAU,EAAM,QAAQ,MAAM,GAAG,IAAI,GAAG;;AAErE,SAAO;;CAGT,OAAO,GAAe;AACpB,QAAM,OAAO,EAAM;AACnB,MAAI;AACF,QAAK,WAAW,OAAO,EAAM;UACvB;AACN,QAAK,SAAS,gBAAgB,UAAU,EAAM,QAAQ,MAAM,GAAG,GAAG;;AAEpE,SAAO;;CAGT,QAAQ;AACN,OAAK,IAAM,KAAS,KAAM,MAAK,OAAO,EAAM;;;AAIhD,GAAwB;AAExB,SAAS,IAAyB;CAChC,IAAM,IAAkB,YAAY,UAAU;AAC9C,QAAO,eAAe,YAAY,WAAW,mBAAmB,EAC9D,OAAO,SAAU,GAAG,GAAkB;EACpC,IAAM,IAAY,EAAgB,KAAK,KAAK;AAE5C,SADA,OAAO,eAAe,GAAW,UAAU,EAAE,OAAO,IAAI,EAAuB,EAAU,QAAQ,KAAK,EAAE,CAAC,EAClG;IAEV,CAAC;CAEF,IAAM,IAAU,QAAQ,UAAU;AAClC,QAAO,eAAe,QAAQ,WAAW,WAAW,EAClD,OAAO,SAAU,GAAc;AAC7B,SAAO,EAAQ,KAAK,MAAM,EAAqB,EAAK,CAAC;IAExD,CAAC;CAEF,IAAM,IAAc,cAAc,UAAU;AAC5C,QAAO,eAAe,cAAc,WAAW,eAAe,EAC5D,OAAO,SAAU,GAAc;AAC7B,IAAY,KAAK,MAAM,EAAqB,EAAK,CAAC;IAErD,CAAC;;AAGJ,SAAS,EAAqB,GAAe;AAGzC,QADG,IAGI,EAAM,QAAQ,gBAAgB,aAAa,GAF3C,EAAM,QAAQ,gBAAgB,cAAc,CAAC,QAAQ,uBAAuB,cAAc"}

package/dist/polyfills/index.js

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

package/dist/polyfills/index.js.map

@@ -0,0 +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';\nimport './custom-state-set.js';\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    if (force !== void 0) {\n      force = !!force;\n    }\n\n    if (this.hasAttribute(name)) {\n      if (force) {\n        return true;\n      }\n\n      this.removeAttribute(name);\n      return false;\n    }\n    if (force === false) {\n      return false;\n    }\n\n    this.setAttribute(name, '');\n    return true;\n  };\n}\n"],"mappings":";;;;AAwBK,QAAQ,UAAU,oBACrB,QAAQ,UAAU,kBAAkB,SAAU,GAAM,GAAO;AAkBzD,QAjBI,MAAU,KAAK,MACjB,IAAQ,CAAC,CAAC,IAGR,KAAK,aAAa,EAAK,GACrB,IACK,MAGT,KAAK,gBAAgB,EAAK,EACnB,MAEL,MAAU,KACL,MAGT,KAAK,aAAa,GAAM,GAAG,EACpB"}

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

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

package/dist/preferences-input/define.js

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

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

@@ -0,0 +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/core/internal';\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,EAAiB"}

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

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

package/dist/preferences-input/index.js

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