@nvidia-elements/core 2.20.1 → 2.20.2

package/dist/month/month.js

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

package/dist/month/month.js.map

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

@@ -1,13 +1,13 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
 import o from "./month.js";
 import { html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/month/month.ts
+// src/month/month.ts
 var l = { expand: "expand" }, u = class extends r {
 	get i18nDefaults() {
 		return l;
@@ -22,7 +22,7 @@ var l = { expand: "expand" }, u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-month",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -36,7 +36,6 @@ n([c({
 	type: String,
 	reflect: !0
 })], u.prototype, "container", void 0), u = n([e()], u);
-//#endregion
 export { u as Month };
 
 //# sourceMappingURL=month2.js.map

package/dist/month/month2.js.map

@@ -1 +1 @@
-{"version":3,"file":"month2.js","names":[],"sources":["../../src/month/month.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './month.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-month\n * @description A month picker is a control that enables users to choose a month value.\n * @documentation https://nvidia.github.io/elements/docs/elements/month/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/month\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 calendar icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month\n */\n@scopedRegistry()\nexport class Month extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-month',\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\" .ariaLabel=${this.i18n.expand} icon-name=\"calendar\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAe,EACnB,QAAQ,SACV,GAmBa,IAAN,cAAoB,EAAoC;CAC7D,IAAuB,eAA6B;EAClD,OAAO;CACT;;EAQgB,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,oDAAkD,KAAK,WAAW;CAClJ;AACF;AAhBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"month2.js","names":["styles","_decorate","__decorate","month_default","i18nDefaults","Month","Control","useStyles","inputStyles","IconButton","property","scopedRegistry"],"sources":["../../src/month/month.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 { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './month.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-month\n * @description A month picker is a control that enables users to choose a month value.\n * @documentation https://nvidia.github.io/elements/docs/elements/month/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/month\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 calendar icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month\n */\n@scopedRegistry()\nexport class Month extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-month',\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\" .ariaLabel=${this.i18n.expand} icon-name=\"calendar\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAMI,IAAe,EACnB,QAAQ,SACV,GAmBaC,IAAN,cAAoBC,EAAoC;CAC7D,IAAuB,eAA6B;EAClD,OAAOF;CACT;;EAQgB,KAAA,SAAAG,EAAU;GAAC,GAAGD,EAAQ;GAAQE;GAAaR;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBS,EAAW,SAAS,MAAMA,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,oDAAkD,KAAK,WAAW;CAClJ;AACF;AAhBGR,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAAJ,EAAA,CAAAU,EAAe,CAAA,GAAAN,CAAA"}

package/dist/notification/define.js

@@ -2,6 +2,5 @@ import { Notification as e } from "./notification2.js";
 import { NotificationGroup as t } from "./notification-group2.js";
 import { define as n } from "@nvidia-elements/foundations/internal/define";
 n(e), n(t);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/notification/define.js.map

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

package/dist/notification/notification-group.js

@@ -1,6 +1,5 @@
-//#region src/notification/notification-group.css?inline
+// src/notification/notification-group.css?inline
 var e = ":host{--nve-sys-layer-popover-arrow-padding: 0px;--nve-sys-layer-popover-arrow-offset: 0px;--nve-sys-layer-popover-offset: var(--nve-ref-space-xl);--box-shadow: var(--nve-ref-shadow-200);position:fixed;top:0;left:0;z-index:99}[internal-host]{display:flex;flex-direction:column-reverse;gap:var(--nve-ref-space-sm)}::slotted(nve-notification){position:relative;translate:none;margin:0;position-anchor:initial!important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=notification-group.js.map

package/dist/notification/notification-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-group.js","names":[],"sources":["../../src/notification/notification-group.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-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-xl);\n  --box-shadow: var(--nve-ref-shadow-200);\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 99;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column-reverse;\n  gap: var(--nve-ref-space-sm);\n}\n\n::slotted(nve-notification) {\n  position: relative;\n  translate: none;\n  margin: 0;\n  position-anchor: initial !important;\n}\n"],"mappings":""}
+{"version":3,"file":"notification-group.js","names":["notification_group_default"],"sources":["../../src/notification/notification-group.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-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-xl);\n  --box-shadow: var(--nve-ref-shadow-200);\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 99;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column-reverse;\n  gap: var(--nve-ref-space-sm);\n}\n\n::slotted(nve-notification) {\n  position: relative;\n  translate: none;\n  margin: 0;\n  position-anchor: initial !important;\n}\n"],"mappings":""}

package/dist/notification/notification-group2.js

@@ -2,11 +2,11 @@ import { audit as e } from "../internal/controllers/audit.controller.js";
 import { TypeNativePopoverController as t } from "../internal/controllers/type-native-popover.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
 import { popoverStyles as r } from "../internal/styles/popover2.js";
-import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import a from "./notification-group.js";
 import { LitElement as o, html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/notification/notification-group.ts
+// src/notification/notification-group.ts
 var l = class extends o {
 	constructor(...e) {
 		super(...e), this.anchor = globalThis.document?.body, this.typeNativePopoverController = new t(this);
@@ -20,7 +20,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-notification-group",
-			version: "2.20.1",
+			version: "2.20.2",
 			children: ["nve-notification"]
 		};
 	}
@@ -35,7 +35,6 @@ i([c({ type: String })], l.prototype, "anchor", void 0), i([c({
 	type: String,
 	reflect: !0
 })], l.prototype, "alignment", void 0), l = i([e()], l);
-//#endregion
 export { l as NotificationGroup };
 
 //# sourceMappingURL=notification-group2.js.map

package/dist/notification/notification-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-group2.js","names":[],"sources":["../../src/notification/notification-group.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 { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport { audit, popoverStyles, TypeNativePopoverController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './notification-group.css?inline';\n\n/**\n * @element nve-notification-group\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @slot - default slot for `nve-notification`\n * @cssprop --box-shadow\n * @cssprop --animation-duration - Duration of notification group open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@audit()\nexport class NotificationGroup extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * Sets the position of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  protected typeNativePopoverController = new TypeNativePopoverController<NotificationGroup>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  static readonly metadata = {\n    tag: 'nve-notification-group',\n    version: '0.0.0',\n    children: ['nve-notification']\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot @slotchange=${() => this.showPopover()}></slot>\n    </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAqBO,IAAM,IAAN,cAAgC,EAAW;;EAiBR,aAZmB,KAAA,SAAA,WAAW,UAAU,MAYxC,KAAA,8BAAA,IAAI,EAA+C,IAAI;;;EAE/E,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;CAGjD,IAAI,cAA2B;EAC7B,OAAO;CACT;;EAE2B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,kBAAkB;EAC/B;;CAEA,SAAS;EACP,OAAO,CAAI,+CAEiB,KAAK,YAAY,EAAE;CAGjD;AACF;AAlCG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAhB1C,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"notification-group2.js","names":["styles","_decorate","__decorate","notification_group_default","NotificationGroup","LitElement","_args","TypeNativePopoverController","useStyles","popoverStyles","property","audit"],"sources":["../../src/notification/notification-group.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 { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport { audit, popoverStyles, TypeNativePopoverController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './notification-group.css?inline';\n\n/**\n * @element nve-notification-group\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @slot - default slot for `nve-notification`\n * @cssprop --box-shadow\n * @cssprop --animation-duration - Duration of notification group open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@audit()\nexport class NotificationGroup extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * Sets the position of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  protected typeNativePopoverController = new TypeNativePopoverController<NotificationGroup>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  static readonly metadata = {\n    tag: 'nve-notification-group',\n    version: '0.0.0',\n    children: ['nve-notification']\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot @slotchange=${() => this.showPopover()}></slot>\n    </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAqBO,IAAMI,IAAN,cAAgCC,EAAW;;EAiBR,A,aAZmB,KAAA,SAAA,WAAW,UAAU,MAYxC,KAAA,8BAAA,IAAIE,EAA+C,IAAI;;;EAE/E,KAAA,SAAAC,EAAU,CAACC,GAAeT,CAAM,CAAC;;CAGjD,IAAI,cAA2B;EAC7B,OAAO;CACT;;EAE2B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,kBAAkB;EAC/B;;CAEA,SAAS;EACP,OAAO,CAAI,+CAEiB,KAAK,YAAY,EAAE;CAGjD;AACF;AAlCGC,EAAA,CAAAS,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAN,EAAA,WAAA,UAAA,KAAA,CAAA,GAKzBH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,YAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAhB1C,IAAAH,EAAA,CAAAU,EAAM,CAAA,GAAAP,CAAA"}

package/dist/notification/notification.examples.js

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

package/dist/notification/notification.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.examples.js","names":[],"sources":["../../src/notification/notification.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/notification/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\n\nexport default {\n  title: 'Elements/Notification',\n  component: 'nve-notification',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.\n */\nexport const Default = {\n  render: () => html`\n<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n`\n};\n\n/**\n * @summary Notification with actions for immediate user response. Use notifications with actions when the notification requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.\n */\nexport const Actions = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <div nve-layout=\"row gap:sm align:right\">\n    <nve-button container=\"inline\">Dismiss</nve-button>\n    <nve-button container=\"inline\">Accept</nve-button>\n  </div>\n</nve-notification>\n`\n};\n\n/**\n * @summary Custom status color for notification. Use custom status color and icon slot to convey a different meaning than the default status color. Use sparingly as it can add unnecessary cognitive load to the user.\n * @tags test-case\n */\nexport const CustomStatus = {\n  render: () => html`\n<nve-notification style=\"--status-color: var(--nve-ref-color-purple-plum-800)\" position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <nve-icon slot=\"icon\" name=\"sparkles\" aria-label=\"Info\"></nve-icon>\n  <div nve-layout=\"row align:right\">\n    <nve-button container=\"inline\">Action</nve-button>\n  </div>\n</nve-notification>\n`\n};\n\n/**\n * @summary Standard notification layout with title and body content in centered positioning for consistent notification structure.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n`\n};\n\n/**\n * @summary Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.\n * @tags test-case\n */\nexport const ContentWrap = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">some text content in a notification with some really long text in it that just keeps going...</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Event handling for notification lifecycle events. Useful for adding custom behavior when notification state changes.\n * @tags test-case\n */\nexport const Events = {\n  render: () => html`\n<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\" closable>\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n<script type=\"module\">\n  const notification = document.querySelector('nve-notification');\n  notification.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  notification.addEventListener('toggle', () => console.log('toggle'));\n  notification.addEventListener('close', () => console.log('close'));\n  notification.addEventListener('open', () => console.log('open'));\n</script>\n`\n};\n\n/**\n * @summary Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.\n */\nexport const InteractiveGroup = {\n  render: () => html`\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n\n<script type=\"module\">\n  const button = document.querySelector('nve-button');\n  button.addEventListener('click', () => {\n    const notification = document.createElement('nve-notification');\n    notification.closable = true;\n    notification.status = ['warning', 'danger', 'success', 'accent', undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML = '<h3 nve-text=\"label\">' + (notification.status ?? 'default') + '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll('nve-notification').length + 1);\n    notification.addEventListener('close', () => notification.remove(), { once: true });\n    notification.position = 'bottom';\n    notification.alignment = 'end';\n\n    document.querySelector('nve-notification-group').prepend(notification);\n  });\n</script>\n`\n};\n\n/**\n * @summary Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.\n */\nexport const Status = {\n  render: () => html`\n<nve-notification-group position=\"center\">\n  <nve-notification>\n    <h3 nve-text=\"label\">Default</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"accent\">\n    <h3 nve-text=\"label\">Accent</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"success\">\n    <h3 nve-text=\"label\">Success</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"warning\">\n    <h3 nve-text=\"label\">Warning</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"danger\">\n    <h3 nve-text=\"label\">Danger</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n  `\n};\n\n/**\n * @summary Notification positioning and alignment options for flexible screen placement. Use consistent positioning for notification types: bottom-right for success confirmations, top-center for warnings, accommodating different screen sizes and user attention patterns.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"start\">\n  <h3 nve-text=\"label\">Top Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"end\">\n  <h3 nve-text=\"label\">Top End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"start\">\n  <h3 nve-text=\"label\">Right Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"end\">\n  <h3 nve-text=\"label\">Right End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"start\">\n  <h3 nve-text=\"label\">Bottom Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">Bottom End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"start\">\n  <h3 nve-text=\"label\">Left Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"end\">\n  <h3 nve-text=\"label\">Left End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Basic notification positioning at screen edges without alignment specification. Use edge positions for standard notification placement, choosing position based on content importance and user workflow patterns.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Position Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Position Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Position Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Position Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Grouped notifications with consistent positioning for stacking many messages. Use notification groups to manage many alerts in an organized queue, maintaining visual consistency and providing users with a clear notification center.\n * @tags test-case\n */\nexport const PositionGroup = {\n  render: () => html`\n<nve-notification-group position=\"top\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"right\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"bottom\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"left\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n  `\n};\n\n/**\n * @summary Notification center pattern using drawer for persistent notification management. Perfect for applications with frequent notifications, allowing users to review, manage, and act on many notifications in a dedicated space with bulk actions.\n * @tags test-case\n */\nexport const Drawer = {\n  render: () => html`\n<nve-drawer closable position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Notifications</h3>\n  </nve-drawer-header>\n  <nve-notification closable container=\"flat\">\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"accent\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"success\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"warning\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"danger\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-drawer-footer>\n    <div nve-layout=\"grid gap:sm span-items:6\">\n      <nve-button interaction=\"destructive\" container=\"flat\">Clear All</nve-button>\n      <nve-button>Mark All as Read</nve-button>\n    </div>\n  </nve-drawer-footer>\n</nve-drawer>\n  `,\n};\n\n/**\n * @summary Notification functionality within shadow DOM for Web Component architectures. Verifies proper notification positioning and behavior when used inside encapsulated component boundaries, essential for component libraries.\n * @tags test-case\n */\nexport const ShadowRoot = {\n  render: () => html`\n<test-notification-shadow-root></test-notification-shadow-root>\n<script type=\"module\">\n  customElements.define('test-notification-shadow-root', class TestNotificationShadowRoot extends HTMLElement {\n    constructor() {\n      super();\n      this._shadow = this.attachShadow({mode: 'open'});\n\n      const template = document.createElement('template');\n      template.innerHTML = \\`\n        <nve-notification position=\"top\">\n          top\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"start\">\n          top start\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"end\">\n          top end\n        </nve-notification>\n\n        <nve-notification position=\"right\">\n          right\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"start\">\n          right start\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"end\">\n          right end\n        </nve-notification>\n\n        <nve-notification position=\"bottom\">\n          bottom\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"start\">\n          bottom start\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"end\">\n          bottom end\n        </nve-notification>\n\n        <nve-notification position=\"left\">\n          left\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"start\">\n          left start\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"end\">\n          left end\n        </nve-notification>\n      \\`;\n      this._shadow.appendChild(template.content);\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.\n * @tags test-case\n */\nexport const Layers = {\n  render: () => html`\n<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n\n<script type=\"module\">\n  const button = document.querySelector('nve-button');\n  button.addEventListener('click', () => {\n    const notification = document.createElement('nve-notification');\n    notification.closable = true;\n    notification.status = ['warning', 'danger', 'success', 'accent', undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll('nve-notification').length + 1);\n    notification.addEventListener('close', () => notification.remove(), { once: true });\n    notification.position = 'bottom';\n    notification.alignment = 'end';\n    document.querySelector('nve-notification-group').prepend(notification);\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"notification.examples.js","names":["notification_examples_default"],"sources":["../../src/notification/notification.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/notification/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\n\nexport default {\n  title: 'Elements/Notification',\n  component: 'nve-notification',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.\n */\nexport const Default = {\n  render: () => html`\n<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n`\n};\n\n/**\n * @summary Notification with actions for immediate user response. Use notifications with actions when the notification requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.\n */\nexport const Actions = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <div nve-layout=\"row gap:sm align:right\">\n    <nve-button container=\"inline\">Dismiss</nve-button>\n    <nve-button container=\"inline\">Accept</nve-button>\n  </div>\n</nve-notification>\n`\n};\n\n/**\n * @summary Custom status color for notification. Use custom status color and icon slot to convey a different meaning than the default status color. Use sparingly as it can add unnecessary cognitive load to the user.\n * @tags test-case\n */\nexport const CustomStatus = {\n  render: () => html`\n<nve-notification style=\"--status-color: var(--nve-ref-color-purple-plum-800)\" position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <nve-icon slot=\"icon\" name=\"sparkles\" aria-label=\"Info\"></nve-icon>\n  <div nve-layout=\"row align:right\">\n    <nve-button container=\"inline\">Action</nve-button>\n  </div>\n</nve-notification>\n`\n};\n\n/**\n * @summary Standard notification layout with title and body content in centered positioning for consistent notification structure.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n`\n};\n\n/**\n * @summary Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.\n * @tags test-case\n */\nexport const ContentWrap = {\n  render: () => html`\n<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">some text content in a notification with some really long text in it that just keeps going...</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Event handling for notification lifecycle events. Useful for adding custom behavior when notification state changes.\n * @tags test-case\n */\nexport const Events = {\n  render: () => html`\n<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\" closable>\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n<script type=\"module\">\n  const notification = document.querySelector('nve-notification');\n  notification.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  notification.addEventListener('toggle', () => console.log('toggle'));\n  notification.addEventListener('close', () => console.log('close'));\n  notification.addEventListener('open', () => console.log('open'));\n</script>\n`\n};\n\n/**\n * @summary Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.\n */\nexport const InteractiveGroup = {\n  render: () => html`\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n\n<script type=\"module\">\n  const button = document.querySelector('nve-button');\n  button.addEventListener('click', () => {\n    const notification = document.createElement('nve-notification');\n    notification.closable = true;\n    notification.status = ['warning', 'danger', 'success', 'accent', undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML = '<h3 nve-text=\"label\">' + (notification.status ?? 'default') + '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll('nve-notification').length + 1);\n    notification.addEventListener('close', () => notification.remove(), { once: true });\n    notification.position = 'bottom';\n    notification.alignment = 'end';\n\n    document.querySelector('nve-notification-group').prepend(notification);\n  });\n</script>\n`\n};\n\n/**\n * @summary Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.\n */\nexport const Status = {\n  render: () => html`\n<nve-notification-group position=\"center\">\n  <nve-notification>\n    <h3 nve-text=\"label\">Default</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"accent\">\n    <h3 nve-text=\"label\">Accent</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"success\">\n    <h3 nve-text=\"label\">Success</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"warning\">\n    <h3 nve-text=\"label\">Warning</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"danger\">\n    <h3 nve-text=\"label\">Danger</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n  `\n};\n\n/**\n * @summary Notification positioning and alignment options for flexible screen placement. Use consistent positioning for notification types: bottom-right for success confirmations, top-center for warnings, accommodating different screen sizes and user attention patterns.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"start\">\n  <h3 nve-text=\"label\">Top Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"end\">\n  <h3 nve-text=\"label\">Top End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"start\">\n  <h3 nve-text=\"label\">Right Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"end\">\n  <h3 nve-text=\"label\">Right End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"start\">\n  <h3 nve-text=\"label\">Bottom Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">Bottom End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"start\">\n  <h3 nve-text=\"label\">Left Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"end\">\n  <h3 nve-text=\"label\">Left End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Basic notification positioning at screen edges without alignment specification. Use edge positions for standard notification placement, choosing position based on content importance and user workflow patterns.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Position Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Position Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Position Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Position Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n  `\n};\n\n/**\n * @summary Grouped notifications with consistent positioning for stacking many messages. Use notification groups to manage many alerts in an organized queue, maintaining visual consistency and providing users with a clear notification center.\n * @tags test-case\n */\nexport const PositionGroup = {\n  render: () => html`\n<nve-notification-group position=\"top\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"right\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"bottom\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n\n<nve-notification-group position=\"left\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n  `\n};\n\n/**\n * @summary Notification center pattern using drawer for persistent notification management. Perfect for applications with frequent notifications, allowing users to review, manage, and act on many notifications in a dedicated space with bulk actions.\n * @tags test-case\n */\nexport const Drawer = {\n  render: () => html`\n<nve-drawer closable position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Notifications</h3>\n  </nve-drawer-header>\n  <nve-notification closable container=\"flat\">\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"accent\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"success\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"warning\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"danger\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-drawer-footer>\n    <div nve-layout=\"grid gap:sm span-items:6\">\n      <nve-button interaction=\"destructive\" container=\"flat\">Clear All</nve-button>\n      <nve-button>Mark All as Read</nve-button>\n    </div>\n  </nve-drawer-footer>\n</nve-drawer>\n  `,\n};\n\n/**\n * @summary Notification functionality within shadow DOM for Web Component architectures. Verifies proper notification positioning and behavior when used inside encapsulated component boundaries, essential for component libraries.\n * @tags test-case\n */\nexport const ShadowRoot = {\n  render: () => html`\n<test-notification-shadow-root></test-notification-shadow-root>\n<script type=\"module\">\n  customElements.define('test-notification-shadow-root', class TestNotificationShadowRoot extends HTMLElement {\n    constructor() {\n      super();\n      this._shadow = this.attachShadow({mode: 'open'});\n\n      const template = document.createElement('template');\n      template.innerHTML = \\`\n        <nve-notification position=\"top\">\n          top\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"start\">\n          top start\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"end\">\n          top end\n        </nve-notification>\n\n        <nve-notification position=\"right\">\n          right\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"start\">\n          right start\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"end\">\n          right end\n        </nve-notification>\n\n        <nve-notification position=\"bottom\">\n          bottom\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"start\">\n          bottom start\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"end\">\n          bottom end\n        </nve-notification>\n\n        <nve-notification position=\"left\">\n          left\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"start\">\n          left start\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"end\">\n          left end\n        </nve-notification>\n      \\`;\n      this._shadow.appendChild(template.content);\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.\n * @tags test-case\n */\nexport const Layers = {\n  render: () => html`\n<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n\n<script type=\"module\">\n  const button = document.querySelector('nve-button');\n  button.addEventListener('click', () => {\n    const notification = document.createElement('nve-notification');\n    notification.closable = true;\n    notification.status = ['warning', 'danger', 'success', 'accent', undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll('nve-notification').length + 1);\n    notification.addEventListener('close', () => notification.remove(), { once: true });\n    notification.position = 'bottom';\n    notification.alignment = 'end';\n    document.querySelector('nve-notification-group').prepend(notification);\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/notification/notification.js

@@ -1,6 +1,5 @@
-//#region src/notification/notification.css?inline
+// src/notification/notification.css?inline
 var e = ":host{--nve-sys-layer-popover-arrow-padding: 0px;--nve-sys-layer-popover-arrow-offset: 0px;--nve-sys-layer-popover-offset: var(--nve-ref-space-xl);--nve-sys-interaction-color: var(--color);--nve-sys-interaction-hover-color: var(--color);--border-radius: var(--nve-ref-border-radius-md);--status-color: var(--nve-sys-support-color);--background: var(--nve-sys-layer-popover-background);--color: var(--nve-sys-layer-popover-color);--padding: var(--nve-ref-size-500) var(--nve-ref-size-900);--box-shadow: var(--nve-ref-shadow-400);--gap: var(--nve-ref-space-md);--min-width: 320px;--width: fit-content;--max-width: fit-content;--border: 0;--status-border: 6px solid var(--status-color);width:var(--width)}[internal-host]{box-shadow:var(--box-shadow);padding:var(--padding);border-radius:var(--border-radius);background:var(--background);color:var(--color);gap:var(--gap);border:var(--border);border-inline-start:var(--status-border);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:column;position:relative}[internal-host]:has(nve-icon-button){padding-inline-end:var(--nve-ref-size-1000)}nve-icon-button{position:absolute;inset-block-start:var(--nve-ref-size-150);inset-inline-end:var(--nve-ref-size-150)}nve-icon-button::part(icon){--color: var(--nve-sys-layer-popover-color) !important}[part=status-icon],::slotted([slot=\"icon\"]){position:absolute;inset-block-start:var(--nve-ref-size-400);inset-inline-start:var(--nve-ref-size-300);--color: var(--status-color)}::slotted([nve-text]){color:inherit!important}:host([container=\"flat\"]){--max-width: 100%;--width: 100%;--border-radius: 0;--box-shadow: none;--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--background: var(--nve-sys-layer-overlay-accent-background);--color: var(--nve-sys-layer-overlay-color);position:relative;margin:0}:host([container=\"flat\"]) nve-icon-button::part(icon){--color: var(--nve-sys-layer-overlay-color) !important}:host([container=\"flat\"]) .popover{border-block-end:var(--border)}:host([status=\"accent\"]){--status-color: var(--nve-sys-support-accent-color)}:host([status=\"success\"]){--status-color: var(--nve-sys-support-success-color)}:host([status=\"warning\"]){--status-color: color-mix(in oklab, var(--nve-sys-support-warning-color) 90%, var(--nve-sys-contrast-mute-color))}:host([status=\"danger\"]){--status-color: var(--nve-sys-support-danger-color)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=notification.js.map

package/dist/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":[],"sources":["../../src/notification/notification.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-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-xl);\n  --nve-sys-interaction-color: var(--color);\n  --nve-sys-interaction-hover-color: var(--color);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --status-color: var(--nve-sys-support-color);\n  --background: var(--nve-sys-layer-popover-background);\n  --color: var(--nve-sys-layer-popover-color);\n  --padding: var(--nve-ref-size-500) var(--nve-ref-size-900);\n  --box-shadow: var(--nve-ref-shadow-400);\n  --gap: var(--nve-ref-space-md);\n  --min-width: 320px;\n  --width: fit-content;\n  --max-width: fit-content;\n  --border: 0;\n  --status-border: 6px solid var(--status-color);\n  width: var(--width);\n}\n\n[internal-host] {\n  box-shadow: var(--box-shadow);\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  gap: var(--gap);\n  border: var(--border);\n  border-inline-start: var(--status-border);\n  min-width: var(--min-width);\n  max-width: var(--max-width);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n[internal-host]:has(nve-icon-button) {\n  padding-inline-end: var(--nve-ref-size-1000);\n}\n\nnve-icon-button {\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-150);\n  inset-inline-end: var(--nve-ref-size-150);\n}\n\nnve-icon-button::part(icon) {\n  --color: var(--nve-sys-layer-popover-color) !important;\n}\n\n[part='status-icon'],\n::slotted([slot='icon']) {\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-400);\n  inset-inline-start: var(--nve-ref-size-300);\n  --color: var(--status-color);\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([container='flat']) {\n  --max-width: 100%;\n  --width: 100%;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --background: var(--nve-sys-layer-overlay-accent-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  position: relative;\n  margin: 0;\n}\n\n:host([container='flat']) nve-icon-button::part(icon) {\n  --color: var(--nve-sys-layer-overlay-color) !important;\n}\n\n:host([container='flat']) .popover {\n  border-block-end: var(--border);\n}\n\n:host([status='accent']) {\n  --status-color: var(--nve-sys-support-accent-color);\n}\n\n:host([status='success']) {\n  --status-color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --status-color: color-mix(in oklab, var(--nve-sys-support-warning-color) 90%, var(--nve-sys-contrast-mute-color));\n}\n\n:host([status='danger']) {\n  --status-color: var(--nve-sys-support-danger-color);\n}\n"],"mappings":""}
+{"version":3,"file":"notification.js","names":["notification_default"],"sources":["../../src/notification/notification.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-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-xl);\n  --nve-sys-interaction-color: var(--color);\n  --nve-sys-interaction-hover-color: var(--color);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --status-color: var(--nve-sys-support-color);\n  --background: var(--nve-sys-layer-popover-background);\n  --color: var(--nve-sys-layer-popover-color);\n  --padding: var(--nve-ref-size-500) var(--nve-ref-size-900);\n  --box-shadow: var(--nve-ref-shadow-400);\n  --gap: var(--nve-ref-space-md);\n  --min-width: 320px;\n  --width: fit-content;\n  --max-width: fit-content;\n  --border: 0;\n  --status-border: 6px solid var(--status-color);\n  width: var(--width);\n}\n\n[internal-host] {\n  box-shadow: var(--box-shadow);\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  gap: var(--gap);\n  border: var(--border);\n  border-inline-start: var(--status-border);\n  min-width: var(--min-width);\n  max-width: var(--max-width);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n\n[internal-host]:has(nve-icon-button) {\n  padding-inline-end: var(--nve-ref-size-1000);\n}\n\nnve-icon-button {\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-150);\n  inset-inline-end: var(--nve-ref-size-150);\n}\n\nnve-icon-button::part(icon) {\n  --color: var(--nve-sys-layer-popover-color) !important;\n}\n\n[part='status-icon'],\n::slotted([slot='icon']) {\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-400);\n  inset-inline-start: var(--nve-ref-size-300);\n  --color: var(--status-color);\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([container='flat']) {\n  --max-width: 100%;\n  --width: 100%;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --background: var(--nve-sys-layer-overlay-accent-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  position: relative;\n  margin: 0;\n}\n\n:host([container='flat']) nve-icon-button::part(icon) {\n  --color: var(--nve-sys-layer-overlay-color) !important;\n}\n\n:host([container='flat']) .popover {\n  border-block-end: var(--border);\n}\n\n:host([status='accent']) {\n  --status-color: var(--nve-sys-support-accent-color);\n}\n\n:host([status='success']) {\n  --status-color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --status-color: color-mix(in oklab, var(--nve-sys-support-warning-color) 90%, var(--nve-sys-contrast-mute-color));\n}\n\n:host([status='danger']) {\n  --status-color: var(--nve-sys-support-danger-color);\n}\n"],"mappings":""}

package/dist/notification/notification2.js

@@ -4,14 +4,14 @@ import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../internal/styles/index.js";
 import { popoverStyles as i } from "../internal/styles/popover2.js";
 import { statusIcons as a } from "../internal/types/index.js";
-import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import o from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as s } from "../icon/icon2.js";
 import { IconButton as c } from "../icon-button/icon-button2.js";
 import l from "./notification.js";
 import { LitElement as u, html as d } from "lit";
 import { property as f } from "lit/decorators/property.js";
 import { I18nController as p } from "@nvidia-elements/foundations/internal/i18n";
-//#region src/notification/notification.ts
+// src/notification/notification.ts
 var m = {
 	close: "close",
 	danger: "danger",
@@ -40,7 +40,7 @@ var m = {
 	static {
 		this.metadata = {
 			tag: "nve-notification",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -97,7 +97,6 @@ o([f({ type: String })], h.prototype, "anchor", void 0), o([f({ type: String })]
 	type: String,
 	reflect: !0
 })], h.prototype, "container", void 0), o([f({ type: Object })], h.prototype, "i18n", void 0), o([f({ type: Boolean })], h.prototype, "inline", void 0), h = o([n()], h);
-//#endregion
 export { h as Notification };
 
 //# sourceMappingURL=notification2.js.map

package/dist/notification/notification2.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification2.js","names":[],"sources":["../../src/notification/notification.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverType, SupportStatus, PopoverPosition } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  popoverStyles,\n  statusIcons,\n  useStyles,\n  TypeNativePopoverController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './notification.css?inline';\n\nconst i18nDefaults = {\n  close: 'close',\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-notification\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the notification opens.\n * @event close - Dispatched when the notification closes.\n * @slot - The message communicated by the notification.\n * @slot icon - content slot for the status icon\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --min-width\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --border\n * @cssprop --status-border\n * @cssprop --gap\n * @cssprop --status-color\n * @cssprop --animation-duration - Duration of notification open/close animations\n * @csspart status-icon - The status icon element\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@scopedRegistry()\nexport class Notification extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within notification.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event will occur determined from the provided millisecond value.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Determines the visual status of the notification.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  /**\n   * Flat container option applies when embedding within another containing element such as a drawer.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean }) inline = false;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  /** @private */\n  get popoverInline() {\n    return this.parentElement?.localName === 'nve-notification-group' || this.inline || this.container === 'flat';\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  protected typeNativePopoverController: TypeNativePopoverController<Notification>;\n\n  #closeTimeout?: ReturnType<typeof setTimeout>;\n\n  #hiddenAttributeObserver?: MutationObserver;\n\n  get #popoverContent() {\n    return html`\n    <slot name=\"icon\"><nve-icon .name=${statusIcons[this.status]} .ariaLabel=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information} part=\"status-icon\"></nve-icon></slot>\n    ${this.closable ? html`<nve-icon-button part=\"icon-button\" @click=${this.hidePopover} icon-name=\"cancel\" size=\"sm\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n    <slot></slot>`;\n  }\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-notification',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.#popoverContent}\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this.#hiddenAttributeObserver = new MutationObserver(() => this.#syncInlineCloseTimeout());\n    this.#hiddenAttributeObserver.observe(this, { attributeFilter: ['hidden'] });\n    this._internals.role = 'alert';\n    this.#syncInlineCloseTimeout();\n  }\n\n  disconnectedCallback() {\n    this.#clearCloseTimeout();\n    this.#hiddenAttributeObserver?.disconnect();\n    this.#hiddenAttributeObserver = undefined;\n    super.disconnectedCallback();\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    if (!this.popoverInline) {\n      this.typeNativePopoverController = new TypeNativePopoverController<Notification>(this);\n    } else {\n      this.setAttribute('nve-popover', '');\n    }\n\n    this.#syncInlineCloseTimeout();\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('closeTimeout') || props.has('container') || props.has('inline')) {\n      this.#syncInlineCloseTimeout();\n    }\n  }\n\n  hidePopover(): void {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline) {\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    } else {\n      super.hidePopover();\n    }\n  }\n\n  /**\n   * The popover controller provides this functionality.\n   * But when the notification is in inline mode the\n   * controller does not run so this sets it up directly.\n   */\n  #syncInlineCloseTimeout() {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline && this.closeTimeout && !this.hidden) {\n      this.#closeTimeout = setTimeout(() => this.hidePopover(), this.closeTimeout);\n    }\n  }\n\n  #clearCloseTimeout() {\n    if (this.#closeTimeout !== undefined) {\n      clearTimeout(this.#closeTimeout);\n      this.#closeTimeout = undefined;\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"notification2.js","names":["styles","_decorate","__decorate","notification_default","i18nDefaults","Notification","LitElement","_args","#i18nController","I18nController","#popoverContent","statusIcons","useStyles","popoverStyles","Icon","IconButton","attachInternals","#hiddenAttributeObserver","#syncInlineCloseTimeout","#clearCloseTimeout","props","TypeNativePopoverController","#closeTimeout","property","scopedRegistry"],"sources":["../../src/notification/notification.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverType, SupportStatus, PopoverPosition } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  popoverStyles,\n  statusIcons,\n  useStyles,\n  TypeNativePopoverController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './notification.css?inline';\n\nconst i18nDefaults = {\n  close: 'close',\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-notification\n * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.\n * @documentation https://nvidia.github.io/elements/docs/elements/notification/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/notification\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the notification opens.\n * @event close - Dispatched when the notification closes.\n * @slot - The message communicated by the notification.\n * @slot icon - content slot for the status icon\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --min-width\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --border\n * @cssprop --status-border\n * @cssprop --gap\n * @cssprop --status-color\n * @cssprop --animation-duration - Duration of notification open/close animations\n * @csspart status-icon - The status icon element\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n */\n@scopedRegistry()\nexport class Notification extends LitElement {\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition;\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within notification.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event will occur determined from the provided millisecond value.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Determines the visual status of the notification.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  /**\n   * Flat container option applies when embedding within another containing element such as a drawer.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /**\n   * @private\n   */\n  @property({ type: Boolean }) inline = false;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return 'manual';\n  }\n\n  /** @private */\n  get popoverInline() {\n    return this.parentElement?.localName === 'nve-notification-group' || this.inline || this.container === 'flat';\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  protected typeNativePopoverController: TypeNativePopoverController<Notification>;\n\n  #closeTimeout?: ReturnType<typeof setTimeout>;\n\n  #hiddenAttributeObserver?: MutationObserver;\n\n  get #popoverContent() {\n    return html`\n    <slot name=\"icon\"><nve-icon .name=${statusIcons[this.status]} .ariaLabel=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information} part=\"status-icon\"></nve-icon></slot>\n    ${this.closable ? html`<nve-icon-button part=\"icon-button\" @click=${this.hidePopover} icon-name=\"cancel\" size=\"sm\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n    <slot></slot>`;\n  }\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-notification',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.#popoverContent}\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this.#hiddenAttributeObserver = new MutationObserver(() => this.#syncInlineCloseTimeout());\n    this.#hiddenAttributeObserver.observe(this, { attributeFilter: ['hidden'] });\n    this._internals.role = 'alert';\n    this.#syncInlineCloseTimeout();\n  }\n\n  disconnectedCallback() {\n    this.#clearCloseTimeout();\n    this.#hiddenAttributeObserver?.disconnect();\n    this.#hiddenAttributeObserver = undefined;\n    super.disconnectedCallback();\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    if (!this.popoverInline) {\n      this.typeNativePopoverController = new TypeNativePopoverController<Notification>(this);\n    } else {\n      this.setAttribute('nve-popover', '');\n    }\n\n    this.#syncInlineCloseTimeout();\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('closeTimeout') || props.has('container') || props.has('inline')) {\n      this.#syncInlineCloseTimeout();\n    }\n  }\n\n  hidePopover(): void {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline) {\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    } else {\n      super.hidePopover();\n    }\n  }\n\n  /**\n   * The popover controller provides this functionality.\n   * But when the notification is in inline mode the\n   * controller does not run so this sets it up directly.\n   */\n  #syncInlineCloseTimeout() {\n    this.#clearCloseTimeout();\n\n    if (this.popoverInline && this.closeTimeout && !this.hidden) {\n      this.#closeTimeout = setTimeout(() => this.hidePopover(), this.closeTimeout);\n    }\n  }\n\n  #clearCloseTimeout() {\n    if (this.#closeTimeout !== undefined) {\n      clearTimeout(this.#closeTimeout);\n      this.#closeTimeout = undefined;\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/page/define.js

@@ -6,6 +6,5 @@ import { PagePanelFooter as i } from "./page-panel/page-panel-footer2.js";
 import { PagePanelHeader as a } from "./page-panel/page-panel-header2.js";
 import { define as o } from "@nvidia-elements/foundations/internal/define";
 o(t), o(n), o(i), o(a), o(r), e.enable();
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/page/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/page/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { TransitionService } from '@nvidia-elements/core/internal';\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Page, PagePanel, PagePanelContent, PagePanelFooter, PagePanelHeader } from '@nvidia-elements/core/page';\n\ndefine(Page);\ndefine(PagePanel);\ndefine(PagePanelFooter);\ndefine(PagePanelHeader);\ndefine(PagePanelContent);\n\nTransitionService.enable();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-page': Page;\n    'nve-page-panel': PagePanel;\n    'nve-page-panel-footer': PagePanelFooter;\n    'nve-page-panel-header': PagePanelHeader;\n    'nve-page-panel-content': PagePanelContent;\n  }\n}\n"],"mappings":";;;;;;;AAOA,EAAO,CAAI,GACX,EAAO,CAAS,GAChB,EAAO,CAAe,GACtB,EAAO,CAAe,GACtB,EAAO,CAAgB,GAEvB,EAAkB,OAAO"}
+{"version":3,"file":"define.js","names":["define","Page","PagePanel","PagePanelFooter","PagePanelHeader","PagePanelContent","TransitionService"],"sources":["../../src/page/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { TransitionService } from '@nvidia-elements/core/internal';\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Page, PagePanel, PagePanelContent, PagePanelFooter, PagePanelHeader } from '@nvidia-elements/core/page';\n\ndefine(Page);\ndefine(PagePanel);\ndefine(PagePanelFooter);\ndefine(PagePanelHeader);\ndefine(PagePanelContent);\n\nTransitionService.enable();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-page': Page;\n    'nve-page-panel': PagePanel;\n    'nve-page-panel-footer': PagePanelFooter;\n    'nve-page-panel-header': PagePanelHeader;\n    'nve-page-panel-content': PagePanelContent;\n  }\n}\n"],"mappings":";;;;;;;AAOAA,EAAOC,CAAI,GACXD,EAAOE,CAAS,GAChBF,EAAOG,CAAe,GACtBH,EAAOI,CAAe,GACtBJ,EAAOK,CAAgB,GAEvBC,EAAkB,OAAO"}

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

@@ -1,6 +1,5 @@
-//#region src/page/page-panel/page-panel-content.css?inline
+// src/page/page-panel/page-panel-content.css?inline
 var e = ":host{--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--gap: var(--nve-ref-space-sm);width:100%;height:100%;flex:1;justify-content:stretch;flex-direction:column;display:flex;overflow:auto;gap:var(--gap);contain:none;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}[internal-host]{background:var(--background);padding:var(--padding);height:100%;width:100%;flex:1}::slotted(nve-menu){--width: 100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=page-panel-content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel-content.js","names":[],"sources":["../../../src/page/page-panel/page-panel-content.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  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  justify-content: stretch;\n  flex-direction: column;\n  display: flex;\n  overflow: auto;\n  gap: var(--gap);\n  contain: none;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  height: 100%;\n  width: 100%;\n  flex: 1;\n}\n\n::slotted(nve-menu) {\n  --width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"page-panel-content.js","names":["page_panel_content_default"],"sources":["../../../src/page/page-panel/page-panel-content.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  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  justify-content: stretch;\n  flex-direction: column;\n  display: flex;\n  overflow: auto;\n  gap: var(--gap);\n  contain: none;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  height: 100%;\n  width: 100%;\n  flex: 1;\n}\n\n::slotted(nve-menu) {\n  --width: 100%;\n}\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 import { useStyles as e } from "../../internal/styles/index.js";
 import t from "./page-panel-content.js";
 import { LitElement as n, html as r } from "lit";
-//#region src/page/page-panel/page-panel-content.ts
+// src/page/page-panel/page-panel-content.ts
 var i = class extends n {
 	static {
 		this.styles = e([t]);
@@ -9,14 +9,13 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-content",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
 		return r`<div internal-host><slot></slot></div>`;
 	}
 };
-//#endregion
 export { i as PagePanelContent };
 
 //# sourceMappingURL=page-panel-content2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel-content2.js","names":[],"sources":["../../../src/page/page-panel/page-panel-content.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './page-panel-content.css?inline';\n\n/**\n * @element nve-page-panel-content\n * @description Contains the scrollable main body content within a page panel region.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @slot - default slot for the page-panel content\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\nexport class PagePanelContent extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-panel-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;AAoBA,IAAa,IAAb,cAAsC,EAAW;;EAC/B,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;AACF"}
+{"version":3,"file":"page-panel-content2.js","names":["styles","page_panel_content_default","PagePanelContent","LitElement","useStyles"],"sources":["../../../src/page/page-panel/page-panel-content.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './page-panel-content.css?inline';\n\n/**\n * @element nve-page-panel-content\n * @description Contains the scrollable main body content within a page panel region.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @slot - default slot for the page-panel content\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\nexport class PagePanelContent extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-panel-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;AAoBA,IAAaE,IAAb,cAAsCC,EAAW;;EAC/B,KAAA,SAAAC,EAAU,CAACJ,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;AACF"}

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

@@ -1,6 +1,5 @@
-//#region src/page/page-panel/page-panel-footer.css?inline
+// src/page/page-panel/page-panel-footer.css?inline
 var e = ":host{--border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color);--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--gap: var(--nve-ref-space-sm);--min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));display:block}[internal-host]{background:var(--background);border-top:var(--border-top);padding:var(--padding);gap:var(--gap);min-height:var(--min-height);display:flex;align-items:center}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=page-panel-footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel-footer.js","names":[],"sources":["../../../src/page/page-panel/page-panel-footer.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  --border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color);\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  --min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));\n  display: block;\n}\n\n[internal-host] {\n  background: var(--background);\n  border-top: var(--border-top);\n  padding: var(--padding);\n  gap: var(--gap);\n  min-height: var(--min-height);\n  display: flex;\n  align-items: center;\n}\n"],"mappings":""}
+{"version":3,"file":"page-panel-footer.js","names":["page_panel_footer_default"],"sources":["../../../src/page/page-panel/page-panel-footer.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  --border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color);\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  --min-height: calc(var(--nve-ref-size-1000) + var(--nve-ref-size-200));\n  display: block;\n}\n\n[internal-host] {\n  background: var(--background);\n  border-top: var(--border-top);\n  padding: var(--padding);\n  gap: var(--gap);\n  min-height: var(--min-height);\n  display: flex;\n  align-items: center;\n}\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 import { hostAttr as e } from "../../internal/decorators/host-attr.js";
 import { useStyles as t } from "../../internal/styles/index.js";
-import n from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./page-panel-footer.js";
 import { LitElement as i, html as a } from "lit";
-//#region src/page/page-panel/page-panel-footer.ts
+// src/page/page-panel/page-panel-footer.ts
 var o = class extends i {
 	constructor(...e) {
 		super(...e), this.slot = "footer";
@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-footer",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -22,7 +22,6 @@ var o = class extends i {
 	}
 };
 n([e()], o.prototype, "slot", void 0);
-//#endregion
 export { o as PagePanelFooter };
 
 //# sourceMappingURL=page-panel-footer2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel-footer2.js","names":[],"sources":["../../../src/page/page-panel/page-panel-footer.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 { hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './page-panel-footer.css?inline';\n\n/**\n * @element nve-page-panel-footer\n * @description Provides a fixed action area at the bottom of a page panel for persistent controls or status information.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @slot - default slot for the page-panel footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\nexport class PagePanelFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-panel-footer',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;AAqBA,IAAa,IAAb,cAAqC,EAAW;;EAS3B,aAAA,KAAA,OAAA;;;EARH,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AATG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"page-panel-footer2.js","names":["styles","_decorate","__decorate","page_panel_footer_default","PagePanelFooter","LitElement","_args","useStyles","hostAttr"],"sources":["../../../src/page/page-panel/page-panel-footer.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 { hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './page-panel-footer.css?inline';\n\n/**\n * @element nve-page-panel-footer\n * @description Provides a fixed action area at the bottom of a page panel for persistent controls or status information.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @slot - default slot for the page-panel footer\n * @cssprop --border-top\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --min-height\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\nexport class PagePanelFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-panel-footer',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;AAqBA,IAAaI,IAAb,cAAqCC,EAAW;;EAS3B,A,aAAA,KAAA,OAAA;;;EARH,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AATGC,EAAA,CAAAO,EAAS,CAAA,GAAAJ,EAAA,WAAA,QAAA,KAAA,CAAA"}

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

@@ -1,6 +1,5 @@
-//#region src/page/page-panel/page-panel-header.css?inline
+// src/page/page-panel/page-panel-header.css?inline
 var e = ":host{--padding: var(--nve-ref-size-300);display:block;width:100%}[internal-host]{background:var(--background);padding:var(--padding);color:var(--color);display:flex}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=page-panel-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel-header.js","names":[],"sources":["../../../src/page/page-panel/page-panel-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-300);\n  display: block;\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  color: var(--color);\n  display: flex;\n}\n"],"mappings":""}
+{"version":3,"file":"page-panel-header.js","names":["page_panel_header_default"],"sources":["../../../src/page/page-panel/page-panel-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-300);\n  display: block;\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  color: var(--color);\n  display: flex;\n}\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 import { hostAttr as e } from "../../internal/decorators/host-attr.js";
 import { useStyles as t } from "../../internal/styles/index.js";
-import n from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./page-panel-header.js";
 import { LitElement as i, html as a } from "lit";
-//#region src/page/page-panel/page-panel-header.ts
+// src/page/page-panel/page-panel-header.ts
 var o = class extends i {
 	constructor(...e) {
 		super(...e), this.slot = "header";
@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-header",
-			version: "2.20.1"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -22,7 +22,6 @@ var o = class extends i {
 	}
 };
 n([e()], o.prototype, "slot", void 0);
-//#endregion
 export { o as PagePanelHeader };
 
 //# sourceMappingURL=page-panel-header2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-panel-header2.js","names":[],"sources":["../../../src/page/page-panel/page-panel-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './page-panel-header.css?inline';\n\n/**\n * @element nve-page-panel-header\n * @description Displays the title and contextual controls at the top of a page panel to identify its purpose.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @slot - default slot for the page panel header\n * @cssprop --border-bottom\n * @cssprop --min-height\n * @cssprop --padding\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\nexport class PagePanelHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-panel-header',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;AAoBA,IAAa,IAAb,cAAqC,EAAW;;EAS3B,aAAA,KAAA,OAAA;;;EARH,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AATG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"page-panel-header2.js","names":["styles","_decorate","__decorate","page_panel_header_default","PagePanelHeader","LitElement","_args","useStyles","hostAttr"],"sources":["../../../src/page/page-panel/page-panel-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './page-panel-header.css?inline';\n\n/**\n * @element nve-page-panel-header\n * @description Displays the title and contextual controls at the top of a page panel to identify its purpose.\n * @documentation https://nvidia.github.io/elements/docs/elements/page/\n * @entrypoint \\@nvidia-elements/core/page\n * @since 1.15.0\n * @slot - default slot for the page panel header\n * @cssprop --border-bottom\n * @cssprop --min-height\n * @cssprop --padding\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role\n *\n */\nexport class PagePanelHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-page-panel-header',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;AAoBA,IAAaI,IAAb,cAAqCC,EAAW;;EAS3B,A,aAAA,KAAA,OAAA;;;EARH,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AATGC,EAAA,CAAAO,EAAS,CAAA,GAAAJ,EAAA,WAAA,QAAA,KAAA,CAAA"}