@nvidia-elements/core 2.11.0 → 2.11.2

package/dist/internal/controllers/state-scroll.controller.js

@@ -6,42 +6,52 @@ function n() {
 }
 var r = class {
 	#e;
-	get #t() {
+	#t;
+	get #n() {
 		return this.host.stateScrollConfig?.target || this.host;
 	}
-	get #n() {
+	get #r() {
 		return this.host.stateScrollConfig?.scrollOffset ?? 0;
 	}
 	constructor(e) {
 		this.host = e, this.host.addController(this);
 	}
 	async hostConnected() {
-		await this.host.updateComplete, t(this.host), this.#r();
+		await this.host.updateComplete, t(this.host), this.#i();
 	}
 	hostUpdated() {
-		this.#r();
+		this.#i();
 	}
 	hostDisconnected() {
-		this.#s();
+		this.#l();
 	}
-	#r() {
-		let e = this.#t;
-		this.#e !== e && (this.#s(), this.#e = e, this.#e.addEventListener("scrollend", this.#i), this.#o());
+	#i() {
+		let e = this.#n;
+		this.#e !== e && (this.#l(), this.#e = e, this.#e.addEventListener("scrollend", this.#a), this.#c());
 	}
-	#i = () => {
-		this.host._internals.states.delete("scrolling"), this.#e && e(this.#e, this.#n) && this.host.dispatchEvent(new CustomEvent("scrollboxend", {
+	#a = () => {
+		this.#s(), this.host._internals.states.has("scrolling") && (this.#t = setTimeout(() => {
+			this.#t = void 0, this.host._internals.states.delete("scrolling");
+		}, 100)), this.#c(), this.#e && e(this.#e, this.#r) && this.host.dispatchEvent(new CustomEvent("scrollboxend", {
 			bubbles: !0,
 			composed: !0
-		})), this.#o();
+		}));
 	};
-	#a = () => {
-		this.host._internals.states.add("scrolling");
+	#o = () => {
+		this.#s();
+		let e = this.host._internals.states;
+		e.has("scrolling") || e.add("scrolling");
 	};
-	#o() {
-		this.#e?.removeEventListener("scroll", this.#a), this.#e?.addEventListener("scroll", this.#a, { once: !0 });
-	}
 	#s() {
-		this.#e?.removeEventListener("scroll", this.#a), this.#e?.removeEventListener("scrollend", this.#i), this.#e = void 0;
+		this.#t !== void 0 && (clearTimeout(this.#t), this.#t = void 0);
+	}
+	#c() {
+		this.#e?.removeEventListener("scroll", this.#o), this.#e?.addEventListener("scroll", this.#o, { once: !0 });
+	}
+	#l() {
+		this.#s(), this.#e?.removeEventListener("scroll", this.#o), this.#e?.removeEventListener("scrollend", this.#a), this.#e = void 0;
+		let e = this.host._internals?.states;
+		e?.has("scrolling") && e.delete("scrolling");
 	}
 };
 //#endregion

package/dist/internal/controllers/state-scroll.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-scroll.controller.js","names":[],"sources":["../../../src/internal/controllers/state-scroll.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { attachInternals, endOfScrollBox } from '@nvidia-elements/core/internal';\n\n/**\n * Adds active scroll state detection\n */\nexport function stateScroll<T extends Scroll>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateScrollController(instance));\n}\n\nexport interface StateScrollConfig {\n  target?: HTMLElement;\n  scrollOffset?: number;\n}\n\nexport type Scroll = ReactiveElement & {\n  _internals?: ElementInternals;\n  stateScrollConfig?: StateScrollConfig;\n};\n\nexport class StateScrollController<T extends Scroll> implements ReactiveController {\n  #activeTarget?: HTMLElement;\n\n  get #target(): HTMLElement {\n    const target = this.host.stateScrollConfig?.target;\n    return target ? target : this.host;\n  }\n\n  get #offset() {\n    return this.host.stateScrollConfig?.scrollOffset ?? 0;\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    attachInternals(this.host);\n    this.#syncTarget();\n  }\n\n  hostUpdated() {\n    this.#syncTarget();\n  }\n\n  hostDisconnected() {\n    this.#removeTargetListeners();\n  }\n\n  #syncTarget() {\n    const target = this.#target;\n    if (this.#activeTarget === target) return;\n\n    this.#removeTargetListeners();\n    this.#activeTarget = target;\n    this.#activeTarget.addEventListener('scrollend', this.#onScrollEnd);\n    this.#startScroll();\n  }\n\n  #onScrollEnd = () => {\n    this.host._internals!.states.delete('scrolling');\n\n    if (this.#activeTarget && endOfScrollBox(this.#activeTarget, this.#offset)) {\n      this.host.dispatchEvent(new CustomEvent('scrollboxend', { bubbles: true, composed: true }));\n    }\n\n    this.#startScroll();\n  };\n\n  #onScroll = () => {\n    this.host._internals!.states.add('scrolling');\n  };\n\n  #startScroll() {\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.addEventListener('scroll', this.#onScroll, { once: true });\n  }\n\n  #removeTargetListeners() {\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.removeEventListener('scrollend', this.#onScrollEnd);\n    this.#activeTarget = undefined;\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,IAAgD;CAC9D,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,CAAQ,CAAC;AAC/E;AAYA,IAAa,IAAb,MAAmF;CACjF;CAEA,IAAI,KAAuB;EAEzB,OADe,KAAK,KAAK,mBAAmB,UACnB,KAAK;CAChC;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,KAAK,mBAAmB,gBAAgB;CACtD;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAGpB,AAFA,MAAM,KAAK,KAAK,gBAChB,EAAgB,KAAK,IAAI,GACzB,KAAK,GAAY;CACnB;CAEA,cAAc;EACZ,KAAK,GAAY;CACnB;CAEA,mBAAmB;EACjB,KAAK,GAAuB;CAC9B;CAEA,KAAc;EACZ,IAAM,IAAS,KAAK;EAChB,KAAK,OAAkB,MAE3B,KAAK,GAAuB,GAC5B,KAAK,KAAgB,GACrB,KAAK,GAAc,iBAAiB,aAAa,KAAK,EAAY,GAClE,KAAK,GAAa;CACpB;CAEA,WAAqB;EAOnB,AANA,KAAK,KAAK,WAAY,OAAO,OAAO,WAAW,GAE3C,KAAK,MAAiB,EAAe,KAAK,IAAe,KAAK,EAAO,KACvE,KAAK,KAAK,cAAc,IAAI,YAAY,gBAAgB;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GAG5F,KAAK,GAAa;CACpB;CAEA,WAAkB;EAChB,KAAK,KAAK,WAAY,OAAO,IAAI,WAAW;CAC9C;CAEA,KAAe;EAEb,AADA,KAAK,IAAe,oBAAoB,UAAU,KAAK,EAAS,GAChE,KAAK,IAAe,iBAAiB,UAAU,KAAK,IAAW,EAAE,MAAM,GAAK,CAAC;CAC/E;CAEA,KAAyB;EAGvB,AAFA,KAAK,IAAe,oBAAoB,UAAU,KAAK,EAAS,GAChE,KAAK,IAAe,oBAAoB,aAAa,KAAK,EAAY,GACtE,KAAK,KAAgB,KAAA;CACvB;AACF"}
+{"version":3,"file":"state-scroll.controller.js","names":[],"sources":["../../../src/internal/controllers/state-scroll.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { attachInternals, endOfScrollBox } from '@nvidia-elements/core/internal';\n\n/**\n * Adds active scroll state detection\n */\nexport function stateScroll<T extends Scroll>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateScrollController(instance));\n}\n\nexport interface StateScrollConfig {\n  target?: HTMLElement;\n  scrollOffset?: number;\n}\n\nexport type Scroll = ReactiveElement & {\n  _internals?: ElementInternals;\n  stateScrollConfig?: StateScrollConfig;\n};\n\nexport class StateScrollController<T extends Scroll> implements ReactiveController {\n  #activeTarget?: HTMLElement;\n  #scrollEndTimeout?: ReturnType<typeof setTimeout>;\n\n  get #target(): HTMLElement {\n    const target = this.host.stateScrollConfig?.target;\n    return target ? target : this.host;\n  }\n\n  get #offset() {\n    return this.host.stateScrollConfig?.scrollOffset ?? 0;\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    attachInternals(this.host);\n    this.#syncTarget();\n  }\n\n  hostUpdated() {\n    this.#syncTarget();\n  }\n\n  hostDisconnected() {\n    this.#removeTargetListeners();\n  }\n\n  #syncTarget() {\n    const target = this.#target;\n    if (this.#activeTarget === target) return;\n\n    this.#removeTargetListeners();\n    this.#activeTarget = target;\n    this.#activeTarget.addEventListener('scrollend', this.#onScrollEnd);\n    this.#startScroll();\n  }\n\n  #onScrollEnd = () => {\n    this.#cancelScrollEnd();\n    // Keep brief scroll bursts in one state to reduce repeated style invalidation.\n    if (this.host._internals!.states.has('scrolling')) {\n      this.#scrollEndTimeout = setTimeout(() => {\n        this.#scrollEndTimeout = undefined;\n        this.host._internals!.states.delete('scrolling');\n      }, 100);\n    }\n    this.#startScroll();\n\n    if (this.#activeTarget && endOfScrollBox(this.#activeTarget, this.#offset)) {\n      this.host.dispatchEvent(new CustomEvent('scrollboxend', { bubbles: true, composed: true }));\n    }\n  };\n\n  #onScroll = () => {\n    this.#cancelScrollEnd();\n    const states = this.host._internals!.states;\n    if (!states.has('scrolling')) states.add('scrolling');\n  };\n\n  #cancelScrollEnd() {\n    if (this.#scrollEndTimeout !== undefined) {\n      clearTimeout(this.#scrollEndTimeout);\n      this.#scrollEndTimeout = undefined;\n    }\n  }\n\n  #startScroll() {\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.addEventListener('scroll', this.#onScroll, { once: true });\n  }\n\n  #removeTargetListeners() {\n    this.#cancelScrollEnd();\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.removeEventListener('scrollend', this.#onScrollEnd);\n    this.#activeTarget = undefined;\n    const states = this.host._internals?.states;\n    if (states?.has('scrolling')) states.delete('scrolling');\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,IAAgD;CAC9D,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,CAAQ,CAAC;AAC/E;AAYA,IAAa,IAAb,MAAmF;CACjF;CACA;CAEA,IAAI,KAAuB;EAEzB,OADe,KAAK,KAAK,mBAAmB,UACnB,KAAK;CAChC;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,KAAK,mBAAmB,gBAAgB;CACtD;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAGpB,AAFA,MAAM,KAAK,KAAK,gBAChB,EAAgB,KAAK,IAAI,GACzB,KAAK,GAAY;CACnB;CAEA,cAAc;EACZ,KAAK,GAAY;CACnB;CAEA,mBAAmB;EACjB,KAAK,GAAuB;CAC9B;CAEA,KAAc;EACZ,IAAM,IAAS,KAAK;EAChB,KAAK,OAAkB,MAE3B,KAAK,GAAuB,GAC5B,KAAK,KAAgB,GACrB,KAAK,GAAc,iBAAiB,aAAa,KAAK,EAAY,GAClE,KAAK,GAAa;CACpB;CAEA,WAAqB;EAWnB,AAVA,KAAK,GAAiB,GAElB,KAAK,KAAK,WAAY,OAAO,IAAI,WAAW,MAC9C,KAAK,KAAoB,iBAAiB;GAExC,AADA,KAAK,KAAoB,KAAA,GACzB,KAAK,KAAK,WAAY,OAAO,OAAO,WAAW;EACjD,GAAG,GAAG,IAER,KAAK,GAAa,GAEd,KAAK,MAAiB,EAAe,KAAK,IAAe,KAAK,EAAO,KACvE,KAAK,KAAK,cAAc,IAAI,YAAY,gBAAgB;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAE9F;CAEA,WAAkB;EAChB,KAAK,GAAiB;EACtB,IAAM,IAAS,KAAK,KAAK,WAAY;EACrC,AAAK,EAAO,IAAI,WAAW,KAAG,EAAO,IAAI,WAAW;CACtD;CAEA,KAAmB;EACjB,AAAI,KAAK,OAAsB,KAAA,MAC7B,aAAa,KAAK,EAAiB,GACnC,KAAK,KAAoB,KAAA;CAE7B;CAEA,KAAe;EAEb,AADA,KAAK,IAAe,oBAAoB,UAAU,KAAK,EAAS,GAChE,KAAK,IAAe,iBAAiB,UAAU,KAAK,IAAW,EAAE,MAAM,GAAK,CAAC;CAC/E;CAEA,KAAyB;EAIvB,AAHA,KAAK,GAAiB,GACtB,KAAK,IAAe,oBAAoB,UAAU,KAAK,EAAS,GAChE,KAAK,IAAe,oBAAoB,aAAa,KAAK,EAAY,GACtE,KAAK,KAAgB,KAAA;EACrB,IAAM,IAAS,KAAK,KAAK,YAAY;EACrC,AAAI,GAAQ,IAAI,WAAW,KAAG,EAAO,OAAO,WAAW;CACzD;AACF"}

package/dist/internal/services/global.service.js

@@ -19,7 +19,7 @@ var a = class {
 				i18nRegistry: {},
 				audit: {}
 			}
-		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.11.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.11.0"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
+		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.11.2"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.11.2"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
 	}
 	get state() {
 		return globalThis.NVE_ELEMENTS.state;

package/dist/logo/logo2.js

@@ -12,7 +12,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-logo",
-			version: "2.11.0"
+			version: "2.11.2"
 		};
 	}
 	render() {

package/dist/menu/menu-group2.js

@@ -21,7 +21,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu-group",
-			version: "2.11.0",
+			version: "2.11.2",
 			children: ["nve-menu"]
 		};
 	}

package/dist/menu/menu-item2.js

@@ -13,7 +13,7 @@ var c = class extends s(i) {
 	static {
 		this.metadata = {
 			tag: "nve-menu-item",
-			version: "2.11.0",
+			version: "2.11.2",
 			parents: ["nve-menu"]
 		};
 	}

package/dist/menu/menu2.js

@@ -17,7 +17,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu",
-			version: "2.11.0",
+			version: "2.11.2",
 			children: ["nve-menu-item", "nve-divider"]
 		};
 	}

package/dist/month/month2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-month",
-			version: "2.11.0"
+			version: "2.11.2"
 		};
 	}
 	static {

package/dist/notification/notification-group2.js

@@ -20,7 +20,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-notification-group",
-			version: "2.11.0",
+			version: "2.11.2",
 			children: ["nve-notification"]
 		};
 	}

package/dist/notification/notification2.js

@@ -34,7 +34,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-notification",
-			version: "2.11.0"
+			version: "2.11.2"
 		};
 	}
 	static {

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

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-content",
-			version: "2.11.0"
+			version: "2.11.2"
 		};
 	}
 	render() {

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

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

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

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

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

@@ -44,9 +44,11 @@ export declare class PagePanel extends LitElement {
         version: string;
         parents: string[];
     };
+    static get observedAttributes(): string[];
     constructor();
     /** @private */
     _internals: ElementInternals;
     render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

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

@@ -1,5 +1,5 @@
 //#region src/page/page-panel/page-panel.css?inline
-var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--animation-duration: var(--nve-ref-animation-duration-200);--background: var(--nve-sys-layer-container-background);--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--color: var(--nve-sys-layer-overlay-color);--gap: var(--nve-ref-space-sm);--padding: 0;--height: 100%;--width: 100%;--max-width: 100%;--max-height: 100%;height:var(--height);width:var(--width);max-width:var(--max-width);max-height:var(--max-height);overflow:auto}[internal-host]{border:var(--border);background:var(--background);color:var(--color);display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;width:100%}:host([slot=\"left-aside\"]),:host([slot=\"right-aside\"]){width:fit-content}:host([slot=\"left\"]),:host([slot=\"right\"]){--width: 100vw;--max-width: 340px}:host([slot=\"left\"][size=\"sm\"]),:host([slot=\"right\"][size=\"sm\"]){--max-width: 240px}:host([slot=\"left\"][size=\"lg\"]),:host([slot=\"right\"][size=\"lg\"]){--max-width: 400px}:host([slot=\"bottom\"]){--height: 100vw;--max-height: 320px}:host([slot=\"bottom\"][size=\"sm\"]){--max-height: 220px}:host([slot=\"bottom\"][size=\"lg\"]){--max-height: 380px}:host([style*=\"width\"]){--width: 100%;--max-width: 100%}[part=_header]{display:flex;align-items:center}slot[name=actions]{display:block;margin-inline-start:auto;position:fixed;inset-block-start:0;inset-inline-end:0;z-index:99}.content{padding:var(--padding);display:flex;flex-direction:column;align-items:start;overflow:auto;flex:1}:host([slot=\"left\"][hidden]),:host([slot=\"right\"][hidden]),:host([slot=\"bottom\"][hidden]){pointer-events:none;display:block!important}:host([slot=\"left\"]){transition:margin-inline-start var(--animation-duration) ease-in-out;margin-inline-start:0}:host([slot=\"left\"][hidden]){margin-inline-start:calc(-1 * var(--max-width))}:host([slot=\"right\"]){transition:margin-inline-end var(--animation-duration) ease-in-out;margin-inline-end:0}:host([slot=\"right\"][hidden]){margin-inline-end:calc(-1 * var(--max-width))}:host([slot=\"bottom\"]){transition:margin-block-end var(--animation-duration) ease-in-out;margin-block-end:0}:host([slot=\"bottom\"][hidden]){margin-block-end:calc(-1 * var(--max-height))}";
+var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--animation-duration: var(--nve-ref-animation-duration-200);--background: var(--nve-sys-layer-container-background);--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--color: var(--nve-sys-layer-overlay-color);--gap: var(--nve-ref-space-sm);--padding: 0;--height: 100%;--width: 100%;--max-width: 100%;--max-height: 100%;height:var(--height);width:var(--width);max-width:var(--max-width);max-height:var(--max-height);overflow:auto}[internal-host]{position:relative;border:var(--border);background:var(--background);color:var(--color);display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;width:100%}:host([slot=\"left-aside\"]),:host([slot=\"right-aside\"]){width:fit-content}:host([slot=\"left\"]),:host([slot=\"right\"]){--width: 100vw;--max-width: 340px}:host([slot=\"left\"][size=\"sm\"]),:host([slot=\"right\"][size=\"sm\"]){--max-width: 240px}:host([slot=\"left\"][size=\"lg\"]),:host([slot=\"right\"][size=\"lg\"]){--max-width: 400px}:host([slot=\"bottom\"]){--height: 100vw;--max-height: 320px}:host([slot=\"bottom\"][size=\"sm\"]){--max-height: 220px}:host([slot=\"bottom\"][size=\"lg\"]){--max-height: 380px}:host([style*=\"width\"]){--width: 100%;--max-width: 100%}[part=_header]{display:flex;align-items:center}slot[name=actions]{display:block;margin-inline-start:auto;position:absolute;inset-block-start:0;inset-inline-end:0;z-index:99}.content{padding:var(--padding);display:flex;flex-direction:column;align-items:start;overflow:auto;flex:1}:host([slot=\"left\"][hidden]),:host([slot=\"right\"][hidden]),:host([slot=\"bottom\"][hidden]){pointer-events:none}:host([slot=\"left\"]){transition:margin-inline-start var(--animation-duration) ease-in-out,display var(--animation-duration) allow-discrete;margin-inline-start:0}:host([slot=\"left\"][hidden]){margin-inline-start:calc(-1 * var(--max-width))}:host([slot=\"right\"]){transition:margin-inline-end var(--animation-duration) ease-in-out,display var(--animation-duration) allow-discrete;margin-inline-end:0}:host([slot=\"right\"][hidden]){margin-inline-end:calc(-1 * var(--max-width))}:host([slot=\"bottom\"]){transition:margin-block-end var(--animation-duration) ease-in-out,display var(--animation-duration) allow-discrete;margin-block-end:0}:host([slot=\"bottom\"][hidden]){margin-block-end:calc(-1 * var(--max-height))}@starting-style{:host([slot=\"left\"]:not([hidden]):state(reopened)){margin-inline-start:calc(-1 * var(--max-width))}:host([slot=\"right\"]:not([hidden]):state(reopened)){margin-inline-end:calc(-1 * var(--max-width))}:host([slot=\"bottom\"]:not([hidden]):state(reopened)){margin-block-end:calc(-1 * var(--max-height))}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel.js","names":[],"sources":["../../../src/page/page-panel/page-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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --animation-duration: var(--nve-ref-animation-duration-200);\n  --background: var(--nve-sys-layer-container-background);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --color: var(--nve-sys-layer-overlay-color);\n  --gap: var(--nve-ref-space-sm);\n  --padding: 0;\n  --height: 100%;\n  --width: 100%;\n  --max-width: 100%;\n  --max-height: 100%;\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  max-height: var(--max-height);\n  overflow: auto;\n}\n\n[internal-host] {\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  width: 100%;\n}\n\n:host([slot='left-aside']),\n:host([slot='right-aside']) {\n  width: fit-content;\n}\n\n:host([slot='left']),\n:host([slot='right']) {\n  --width: 100vw;\n  --max-width: 340px;\n}\n\n:host([slot='left'][size='sm']),\n:host([slot='right'][size='sm']) {\n  --max-width: 240px;\n}\n\n:host([slot='left'][size='lg']),\n:host([slot='right'][size='lg']) {\n  --max-width: 400px;\n}\n\n:host([slot='bottom']) {\n  --height: 100vw;\n  --max-height: 320px;\n}\n\n:host([slot='bottom'][size='sm']) {\n  --max-height: 220px;\n}\n\n:host([slot='bottom'][size='lg']) {\n  --max-height: 380px;\n}\n\n:host([style*='width']) {\n  --width: 100%;\n  --max-width: 100%;\n}\n\n[part='_header'] {\n  display: flex;\n  align-items: center;\n}\n\nslot[name='actions'] {\n  display: block;\n  margin-inline-start: auto;\n  position: fixed;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  z-index: 99;\n}\n\n.content {\n  padding: var(--padding);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  overflow: auto;\n  flex: 1;\n}\n\n/* animations */\n:host([slot='left'][hidden]),\n:host([slot='right'][hidden]),\n:host([slot='bottom'][hidden]) {\n  pointer-events: none;\n  display: block !important;\n}\n\n:host([slot='left']) {\n  transition: margin-inline-start var(--animation-duration) ease-in-out;\n  margin-inline-start: 0;\n}\n\n:host([slot='left'][hidden]) {\n  margin-inline-start: calc(-1 * var(--max-width));\n}\n\n:host([slot='right']) {\n  transition: margin-inline-end var(--animation-duration) ease-in-out;\n  margin-inline-end: 0;\n}\n\n:host([slot='right'][hidden]) {\n  margin-inline-end: calc(-1 * var(--max-width));\n}\n\n:host([slot='bottom']) {\n  transition: margin-block-end var(--animation-duration) ease-in-out;\n  margin-block-end: 0;\n}\n\n:host([slot='bottom'][hidden]) {\n  margin-block-end: calc(-1 * var(--max-height));\n}\n"],"mappings":""}
+{"version":3,"file":"page-panel.js","names":[],"sources":["../../../src/page/page-panel/page-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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --animation-duration: var(--nve-ref-animation-duration-200);\n  --background: var(--nve-sys-layer-container-background);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --color: var(--nve-sys-layer-overlay-color);\n  --gap: var(--nve-ref-space-sm);\n  --padding: 0;\n  --height: 100%;\n  --width: 100%;\n  --max-width: 100%;\n  --max-height: 100%;\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  max-height: var(--max-height);\n  overflow: auto;\n}\n\n[internal-host] {\n  position: relative;\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  width: 100%;\n}\n\n:host([slot='left-aside']),\n:host([slot='right-aside']) {\n  width: fit-content;\n}\n\n:host([slot='left']),\n:host([slot='right']) {\n  --width: 100vw;\n  --max-width: 340px;\n}\n\n:host([slot='left'][size='sm']),\n:host([slot='right'][size='sm']) {\n  --max-width: 240px;\n}\n\n:host([slot='left'][size='lg']),\n:host([slot='right'][size='lg']) {\n  --max-width: 400px;\n}\n\n:host([slot='bottom']) {\n  --height: 100vw;\n  --max-height: 320px;\n}\n\n:host([slot='bottom'][size='sm']) {\n  --max-height: 220px;\n}\n\n:host([slot='bottom'][size='lg']) {\n  --max-height: 380px;\n}\n\n:host([style*='width']) {\n  --width: 100%;\n  --max-width: 100%;\n}\n\n[part='_header'] {\n  display: flex;\n  align-items: center;\n}\n\nslot[name='actions'] {\n  display: block;\n  margin-inline-start: auto;\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  z-index: 99;\n}\n\n.content {\n  padding: var(--padding);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  overflow: auto;\n  flex: 1;\n}\n\n/* animations */\n:host([slot='left'][hidden]),\n:host([slot='right'][hidden]),\n:host([slot='bottom'][hidden]) {\n  pointer-events: none;\n}\n\n:host([slot='left']) {\n  transition:\n    margin-inline-start var(--animation-duration) ease-in-out,\n    display var(--animation-duration) allow-discrete;\n  margin-inline-start: 0;\n}\n\n:host([slot='left'][hidden]) {\n  margin-inline-start: calc(-1 * var(--max-width));\n}\n\n:host([slot='right']) {\n  transition:\n    margin-inline-end var(--animation-duration) ease-in-out,\n    display var(--animation-duration) allow-discrete;\n  margin-inline-end: 0;\n}\n\n:host([slot='right'][hidden]) {\n  margin-inline-end: calc(-1 * var(--max-width));\n}\n\n:host([slot='bottom']) {\n  transition:\n    margin-block-end var(--animation-duration) ease-in-out,\n    display var(--animation-duration) allow-discrete;\n  margin-block-end: 0;\n}\n\n:host([slot='bottom'][hidden]) {\n  margin-block-end: calc(-1 * var(--max-height));\n}\n\n@starting-style {\n  :host([slot='left']:not([hidden]):state(reopened)) {\n    margin-inline-start: calc(-1 * var(--max-width));\n  }\n\n  :host([slot='right']:not([hidden]):state(reopened)) {\n    margin-inline-end: calc(-1 * var(--max-width));\n  }\n\n  :host([slot='bottom']:not([hidden]):state(reopened)) {\n    margin-block-end: calc(-1 * var(--max-height));\n  }\n}\n"],"mappings":""}

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

@@ -18,10 +18,13 @@ var f = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel",
-			version: "2.11.0",
+			version: "2.11.2",
 			parents: ["nve-page"]
 		};
 	}
+	static get observedAttributes() {
+		return [...super.observedAttributes, "hidden"];
+	}
 	constructor() {
 		super(), this.#e = new t(this), this.i18n = this.#e.i18n, new i(this, { useHidden: !0 });
 	}
@@ -29,7 +32,10 @@ var f = class extends l {
 		return u`<div internal-host><div part="_header"><slot name="header"></slot><slot name="actions"></slot></div><div class="content"><slot></slot></div><div><slot name="footer"></slot></div></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), r(this), n(this, c), this._internals.role = "region";
+		super.connectedCallback(), r(this), this._internals.states.delete("reopened"), n(this, c), this._internals.role = "region";
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), e === "hidden" && t !== null && n === null && this.isConnected && this._internals.states.add("reopened");
 	}
 };
 o([d({

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel2.js","names":[],"sources":["../../../src/page/page-panel/page-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 type { Size } from '@nvidia-elements/core/internal';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  audit,\n  I18nController,\n  TypeExpandableController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './page-panel.css?inline';\nimport globalStyles from './page-panel.global.css?inline';\n\n/**\n * @element nve-page-panel\n * @description Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @event open - Dispatched after an invoker command removes `hidden` and opens the panel.\n * @event close - Dispatched after an invoker command sets `hidden` and closes the panel.\n * @slot - `nve-page-panel-content` elements that provide the panel body.\n * @slot actions - slot for action / dismiss buttons\n * @command --open - Removes `hidden` and dispatches `open`.\n * @command --close - Sets `hidden` and dispatches `close`.\n * @command --toggle - Toggles `hidden` and dispatches `open` or `close`.\n * @cssprop --background\n * @cssprop --border\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --padding\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --max-height\n * @cssprop --animation-duration - Duration of panel open/close animations\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\n@audit()\nexport class PagePanel extends LitElement {\n  /**\n   * Sets the max size of the panel.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\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-page-panel',\n    version: '0.0.0',\n    parents: ['nve-page']\n  };\n\n  constructor() {\n    super();\n    new TypeExpandableController(this, { useHidden: true });\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n      <div part=\"_header\">\n        <slot name=\"header\"></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n      <div class=\"content\">\n        <slot></slot>\n      </div>\n      <div>\n        <slot name=\"footer\"></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'region';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA4CO,IAAM,IAAN,cAAwB,EAAW;CAMxC;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,cAAc;EAEZ,AADA,MAAM,GAhBgC,KAAA,KAAA,IAAI,EAAqB,IAAI,GAKlC,KAAA,OAAA,KAAK,GAAgB,MAYtD,IAAI,EAAyB,MAAM,EAAE,WAAW,GAAK,CAAC;CACxD;CAKA,SAAS;EACP,OAAO,CAAI;CAcb;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO;CACzB;AACF;AAhDG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAZ3B,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"page-panel2.js","names":[],"sources":["../../../src/page/page-panel/page-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 type { Size } from '@nvidia-elements/core/internal';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  audit,\n  I18nController,\n  TypeExpandableController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './page-panel.css?inline';\nimport globalStyles from './page-panel.global.css?inline';\n\n/**\n * @element nve-page-panel\n * @description Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @event open - Dispatched after an invoker command removes `hidden` and opens the panel.\n * @event close - Dispatched after an invoker command sets `hidden` and closes the panel.\n * @slot - `nve-page-panel-content` elements that provide the panel body.\n * @slot actions - slot for action / dismiss buttons\n * @command --open - Removes `hidden` and dispatches `open`.\n * @command --close - Sets `hidden` and dispatches `close`.\n * @command --toggle - Toggles `hidden` and dispatches `open` or `close`.\n * @cssprop --background\n * @cssprop --border\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --padding\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --max-height\n * @cssprop --animation-duration - Duration of panel open/close animations\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\n@audit()\nexport class PagePanel extends LitElement {\n  /**\n   * Sets the max size of the panel.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\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-page-panel',\n    version: '0.0.0',\n    parents: ['nve-page']\n  };\n\n  static get observedAttributes() {\n    return [...super.observedAttributes, 'hidden'];\n  }\n\n  constructor() {\n    super();\n    new TypeExpandableController(this, { useHidden: true });\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n      <div part=\"_header\">\n        <slot name=\"header\"></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n      <div class=\"content\">\n        <slot></slot>\n      </div>\n      <div>\n        <slot name=\"footer\"></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.states.delete('reopened');\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'region';\n  }\n\n  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    super.attributeChangedCallback(name, oldValue, newValue);\n    if (name === 'hidden' && oldValue !== null && newValue === null && this.isConnected) {\n      this._internals.states.add('reopened');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA4CO,IAAM,IAAN,cAAwB,EAAW;CAMxC;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,WAAW,qBAAqB;EAC9B,OAAO,CAAC,GAAG,MAAM,oBAAoB,QAAQ;CAC/C;CAEA,cAAc;EAEZ,AADA,MAAM,GApBgC,KAAA,KAAA,IAAI,EAAqB,IAAI,GAKlC,KAAA,OAAA,KAAK,GAAgB,MAgBtD,IAAI,EAAyB,MAAM,EAAE,WAAW,GAAK,CAAC;CACxD;CAKA,SAAS;EACP,OAAO,CAAI;CAcb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,OAAO,UAAU,GACxC,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO;CACzB;CAEA,yBAAyB,GAAc,GAAyB,GAAyB;EAEvF,AADA,MAAM,yBAAyB,GAAM,GAAU,CAAQ,GACnD,MAAS,YAAY,MAAa,QAAQ,MAAa,QAAQ,KAAK,eACtE,KAAK,WAAW,OAAO,IAAI,UAAU;CAEzC;AACF;AA5DG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAZ3B,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}