@nvidia-elements/core 2.19.0 → 2.19.1

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  I18nController,\n  TypeNativePopoverController,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport styles from './notification.css?inline';\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);\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":[],"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/page-panel/page-panel-content2.js

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

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

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

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

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

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

@@ -27,17 +27,10 @@ import type { Size } from '@nvidia-elements/core/internal';
  *
  */
 export declare class PagePanel extends LitElement {
-    #private;
     /**
      * Sets the max size of the panel.
      */
     size?: Size;
-    /**
-     * Enables updating internal string values for internationalization.
-     */
-    i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
-        __set: boolean;
-    }>;
     static styles: import("lit").CSSResult[];
     static readonly metadata: {
         tag: string;

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

@@ -1,23 +1,21 @@
-import { I18nController as e } from "../../internal/controllers/i18n.controller.js";
-import { appendRootNodeStyle as t } from "../../internal/utils/dom.js";
-import { attachInternals as n } from "../../internal/utils/a11y.js";
-import { TypeExpandableController as r } from "../../internal/controllers/type-expandable.controller.js";
-import { useStyles as i } from "../../internal/styles/index.js";
-import a from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
-import o from "./page-panel.js";
-import s from "./page-panel.global.js";
-import { LitElement as c, html as l } from "lit";
-import { property as u } from "lit/decorators/property.js";
+import { appendRootNodeStyle as e } from "../../internal/utils/dom.js";
+import { attachInternals as t } from "../../internal/utils/a11y.js";
+import { TypeExpandableController as n } from "../../internal/controllers/type-expandable.controller.js";
+import { useStyles as r } from "../../internal/styles/index.js";
+import i from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import a from "./page-panel.js";
+import o from "./page-panel.global.js";
+import { LitElement as s, html as c } from "lit";
+import { property as l } from "lit/decorators/property.js";
 //#region src/page/page-panel/page-panel.ts
-var d = class extends c {
-	#e;
+var u = class extends s {
 	static {
-		this.styles = i([o]);
+		this.styles = r([a]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-page-panel",
-			version: "2.19.0",
+			version: "2.19.1",
 			parents: ["nve-page"]
 		};
 	}
@@ -25,23 +23,23 @@ var d = class extends c {
 		return [...super.observedAttributes, "hidden"];
 	}
 	constructor() {
-		super(), this.#e = new e(this), this.i18n = this.#e.i18n, new r(this, { useHidden: !0 });
+		super(), new n(this, { useHidden: !0 });
 	}
 	render() {
-		return l`<div internal-host><div part="_header"><slot name="header"></slot><slot name="actions"></slot></div><div class="content"><slot></slot></div><div><slot name="footer"></slot></div></div>`;
+		return c`<div internal-host><div part="_header"><slot name="header"></slot><slot name="actions"></slot></div><div class="content"><slot></slot></div><div><slot name="footer"></slot></div></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), n(this), this._internals.states.delete("reopened"), t(this, s), this._internals.role = "region";
+		super.connectedCallback(), t(this), this._internals.states.delete("reopened"), e(this, o), this._internals.role = "region";
 	}
 	attributeChangedCallback(e, t, n) {
 		super.attributeChangedCallback(e, t, n), e === "hidden" && t !== null && n === null && this.isConnected && this._internals.states.add("reopened");
 	}
 };
-a([u({
+i([l({
 	type: String,
 	reflect: !0
-})], d.prototype, "size", void 0), a([u({ type: Object })], d.prototype, "i18n", void 0);
+})], u.prototype, "size", void 0);
 //#endregion
-export { d as PagePanel };
+export { u as PagePanel };
 
 //# sourceMappingURL=page-panel2.js.map

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

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

package/dist/page/page2.js

@@ -16,7 +16,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-page",
-			version: "2.19.0"
+			version: "2.19.1"
 		};
 	}
 	static {

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

@@ -12,7 +12,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-page-header",
-			version: "2.19.0"
+			version: "2.19.1"
 		};
 	}
 	render() {

package/dist/page-loader/page-loader2.js

@@ -18,7 +18,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-page-loader",
-			version: "2.19.0"
+			version: "2.19.1"
 		};
 	}
 	static {

package/dist/pagination/pagination2.js

@@ -1,39 +1,46 @@
-import { I18nController as e } from "../internal/controllers/i18n.controller.js";
-import { keyNavigationList as t } from "../internal/controllers/keynav-list.controller.js";
-import { attachInternals as n } from "../internal/utils/a11y.js";
-import { typeSSR as r } from "../internal/controllers/type-ssr.controller.js";
-import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
-import { useStyles as a } from "../internal/styles/index.js";
-import { formatStandardNumber as o } from "../internal/utils/objects.js";
-import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
-import { IconButton as c } from "../icon-button/icon-button2.js";
-import { Select as l } from "../select/select2.js";
-import u from "./pagination.js";
-import { LitElement as d, html as f, nothing as p } from "lit";
-import { property as m } from "lit/decorators/property.js";
+import { keyNavigationList as e } from "../internal/controllers/keynav-list.controller.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
+import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
+import { useStyles as i } from "../internal/styles/index.js";
+import { formatStandardNumber as a } from "../internal/utils/objects.js";
+import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import { IconButton as s } from "../icon-button/icon-button2.js";
+import { Select as c } from "../select/select2.js";
+import l from "./pagination.js";
+import { LitElement as u, html as d, nothing as f } from "lit";
+import { property as p } from "lit/decorators/property.js";
+import { I18nController as m } from "@nvidia-elements/foundations/internal/i18n";
 import { FormControlMixin as h } from "@nvidia-elements/forms/mixins";
 //#region src/pagination/pagination.ts
-var g = class extends h(d) {
+var g = {
+	of: "of",
+	previous: "previous",
+	next: "next",
+	start: "start",
+	end: "end",
+	currentPage: "current page"
+}, _ = class extends h(u) {
 	#e;
 	static {
-		this.styles = a([u]);
+		this.styles = i([l]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-pagination",
-			version: "2.19.0",
+			version: "2.19.1",
 			valueSchema: { type: "number" }
 		};
 	}
 	static {
 		this.elementDefinitions = {
-			[c.metadata.tag]: c,
-			[l.metadata.tag]: l
+			[s.metadata.tag]: s,
+			[c.metadata.tag]: c
 		};
 	}
 	get keynavListConfig() {
 		return {
-			items: this.shadowRoot.querySelectorAll(`${c.metadata.tag}, input, select`),
+			items: this.shadowRoot.querySelectorAll(`${s.metadata.tag}, input, select`),
 			layout: "horizontal"
 		};
 	}
@@ -48,29 +55,29 @@ var g = class extends h(d) {
 	}
 	get #i() {
 		let e = (this.value - 1) * this.step + 1, t = Math.min(this.value * this.step, this.items || Infinity);
-		return `${o(e)}-${o(t)}`;
+		return `${a(e)}-${a(t)}`;
 	}
 	get #a() {
-		return this.items ? f`<label><slot name="suffix-label">${this.i18n.of} ${o(this.items)}</slot></label>` : p;
+		return this.items ? d`<label><slot name="suffix-label">${this.i18n.of} ${a(this.items)}</slot></label>` : f;
 	}
 	get #o() {
-		return f`<nve-icon-button part="icon-button previous-icon-button" @click="${() => this.#m(this.value - 1)}" .disabled="${this.disabled || this.#t <= this.step}" .ariaLabel="${this.i18n.previous}" container="inline" icon-name="chevron" direction="left"></nve-icon-button>`;
+		return d`<nve-icon-button part="icon-button previous-icon-button" @click="${() => this.#m(this.value - 1)}" .disabled="${this.disabled || this.#t <= this.step}" .ariaLabel="${this.i18n.previous}" container="inline" icon-name="chevron" direction="left"></nve-icon-button>`;
 	}
 	get #s() {
-		return f`<nve-icon-button part="icon-button next-icon-button" @click="${() => this.#m(this.value + 1)}" .disabled="${this.disabled || this.#t >= this.items}" .ariaLabel="${this.i18n.next}" container="inline" icon-name="chevron" direction="right"></nve-icon-button>`;
+		return d`<nve-icon-button part="icon-button next-icon-button" @click="${() => this.#m(this.value + 1)}" .disabled="${this.disabled || this.#t >= this.items}" .ariaLabel="${this.i18n.next}" container="inline" icon-name="chevron" direction="right"></nve-icon-button>`;
 	}
 	get #c() {
-		return f`<nve-icon-button part="icon-button start-icon-button" @click="${() => this.#m(1)}" .disabled="${this.disabled || this.#t <= this.step}" .ariaLabel="${this.i18n.start}" container="inline" icon-name="arrow-stop" direction="left"></nve-icon-button>`;
+		return d`<nve-icon-button part="icon-button start-icon-button" @click="${() => this.#m(1)}" .disabled="${this.disabled || this.#t <= this.step}" .ariaLabel="${this.i18n.start}" container="inline" icon-name="arrow-stop" direction="left"></nve-icon-button>`;
 	}
 	get #l() {
-		return f`<nve-icon-button part="icon-button end-icon-button" @click="${() => this.#m(this.items / this.step)}" .disabled="${this.disabled || (this.value - 1) * this.step + this.step >= this.items}" .ariaLabel="${this.i18n.end}" container="inline" icon-name="arrow-stop" direction="right"></nve-icon-button>`;
+		return d`<nve-icon-button part="icon-button end-icon-button" @click="${() => this.#m(this.items / this.step)}" .disabled="${this.disabled || (this.value - 1) * this.step + this.step >= this.items}" .ariaLabel="${this.i18n.end}" container="inline" icon-name="arrow-stop" direction="right"></nve-icon-button>`;
 	}
 	#u;
 	get #d() {
-		return this.disableStep ? f`<label>${this.#i} </label>` : f`<nve-select part="select" .container="${this.container}"><select .ariaLabel="${this.i18n.currentPage}" @change="${(e) => this.#p(parseInt(e.target.value, 10))}" value="${this.step}" .disabled="${this.disabled || this.disableStep}">${this.stepSizes.map((e) => f`<option ?selected="${this.step === e}" value="${e}">${e}</option>`)}</select><div class="select-label">${this.#i}</div></nve-select>`;
+		return this.disableStep ? d`<label>${this.#i} </label>` : d`<nve-select part="select" .container="${this.container}"><select .ariaLabel="${this.i18n.currentPage}" @change="${(e) => this.#p(parseInt(e.target.value, 10))}" value="${this.step}" .disabled="${this.disabled || this.disableStep}">${this.stepSizes.map((e) => d`<option ?selected="${this.step === e}" value="${e}">${e}</option>`)}</select><div class="select-label">${this.#i}</div></nve-select>`;
 	}
 	render() {
-		return f`<div internal-host role="presentation">${this.skippable && this.items ? f`${this.#c} ${this.#o} ${this.#d} ${this.#a} ${this.#s} ${this.#l}` : f`${this.#d} ${this.#a} ${this.#o} ${this.#s}`}</div>`;
+		return d`<div internal-host role="presentation">${this.skippable && this.items ? d`${this.#c} ${this.#o} ${this.#d} ${this.#a} ${this.#s} ${this.#l}` : d`${this.#d} ${this.#a} ${this.#o} ${this.#s}`}</div>`;
 	}
 	constructor() {
 		super(), this.step = 10, this.stepSizes = [
@@ -78,10 +85,10 @@ var g = class extends h(d) {
 			20,
 			50,
 			100
-		], this.#e = new e(this), this.i18n = this.#e.i18n, this.value = 1;
+		], this.#e = new m(this, g), this.i18n = this.#e.i18n, this.value = 1;
 	}
 	async connectedCallback() {
-		super.connectedCallback(), n(this), this._internals.role = "toolbar", await this.updateComplete, this.#f();
+		super.connectedCallback(), t(this), this._internals.role = "toolbar", await this.updateComplete, this.#f();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.#u?.unobserve(this);
@@ -107,21 +114,21 @@ var g = class extends h(d) {
 		}));
 	}
 };
-s([m({ type: Number })], g.prototype, "step", void 0), s([m({
+o([p({ type: Number })], _.prototype, "step", void 0), o([p({
 	type: Array,
 	attribute: "step-sizes"
-})], g.prototype, "stepSizes", void 0), s([m({ type: Number })], g.prototype, "items", void 0), s([m({ type: Boolean })], g.prototype, "skippable", void 0), s([m({
+})], _.prototype, "stepSizes", void 0), o([p({ type: Number })], _.prototype, "items", void 0), o([p({ type: Boolean })], _.prototype, "skippable", void 0), o([p({
 	type: Boolean,
 	attribute: "disable-step"
-})], g.prototype, "disableStep", void 0), s([m({
+})], _.prototype, "disableStep", void 0), o([p({
 	type: String,
 	reflect: !0
-})], g.prototype, "container", void 0), s([m({ type: Object })], g.prototype, "i18n", void 0), g = s([
-	r(),
-	t(),
-	i()
-], g);
+})], _.prototype, "container", void 0), o([p({ type: Object })], _.prototype, "i18n", void 0), _ = o([
+	n(),
+	e(),
+	r()
+], _);
 //#endregion
-export { g as Pagination };
+export { _ as Pagination };
 
 //# sourceMappingURL=pagination2.js.map

package/dist/pagination/pagination2.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination2.js","names":[],"sources":["../../src/pagination/pagination.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  formatStandardNumber,\n  keyNavigationList,\n  typeSSR,\n  useStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Select } from '@nvidia-elements/core/select';\nimport styles from './pagination.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// explicit jsdoc annotation due to inheritance context lost with CEM generator\n\n/**\n * @element nve-pagination\n * @description Pagination is a control that enables users to navigate through pages of content.\n * @documentation https://nvidia.github.io/elements/docs/elements/pagination/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/pagination\n * @event input - Dispatched when the value (page) has changed\n * @event change - Dispatched when the value (page) has changed\n * @event first-page - Dispatched when the first page is active\n * @event last-page - Dispatched when the last page is active\n * @event step-change - Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries.\n * @slot suffix-label - Overrides the \"of total\" label when the total is an approximation.\n * @cssprop --background\n * @cssprop --font-size\n * @cssprop --width\n * @csspart icon-button - Base part applied to all icon button elements\n * @csspart previous-icon-button - The previous page icon button\n * @csspart next-icon-button - The next page icon button\n * @csspart start-icon-button - The first page icon button\n * @csspart end-icon-button - The last page icon button\n * @csspart select - The page size select element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n * @property {number} value - value the current page number\n * @attribute {string} step-sizes - A JSON-serialized array of page-size options available in the selector.\n */\n@typeSSR()\n@keyNavigationList<Pagination>()\n@scopedRegistry()\nexport class Pagination extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * The number of items per page.\n   */\n  @property({ type: Number }) step = 10;\n  /**\n   * Page-size options available in the selector.\n   */\n  @property({ type: Array, attribute: 'step-sizes' }) stepSizes: number[] = [10, 20, 50, 100];\n\n  /**\n   * The total number of items.\n   */\n  @property({ type: Number }) items: number;\n\n  /**\n   * Whether the pagination is skippable to start/end.\n   */\n  @property({ type: Boolean }) skippable: boolean;\n\n  /**\n   * Whether the step selector has a disabled state.\n   */\n  @property({ type: Boolean, attribute: 'disable-step' }) disableStep: boolean;\n\n  /**\n   * Determines the container styles of component. Flat applies when nesting within other containers. Inline applies when placing within other inline content.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pagination',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Select.metadata.tag]: Select\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.shadowRoot!.querySelectorAll<HTMLElement>(`${IconButton.metadata.tag}, input, select`),\n      layout: 'horizontal'\n    };\n  }\n\n  get #currentPage() {\n    return (this.value! - 1) * this.step + this.step;\n  }\n\n  get #isLastPage() {\n    return this.items / this.value! === this.step;\n  }\n\n  get #isFirstPage() {\n    return this.value === 1;\n  }\n\n  get #selectLabel() {\n    const start = (this.value! - 1) * this.step + 1;\n    const end = Math.min(this.value! * this.step, this.items || Infinity);\n    return `${formatStandardNumber(start)}-${formatStandardNumber(end)}`;\n  }\n\n  get #label() {\n    return this.items\n      ? html`<label><slot name=\"suffix-label\">${this.i18n.of} ${formatStandardNumber(this.items)}</slot></label>`\n      : nothing;\n  }\n\n  get #previousButton() {\n    return html`<nve-icon-button part=\"icon-button previous-icon-button\"\n      @click=${() => this.#setValue(this.value! - 1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.previous}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #nextButton() {\n    return html`<nve-icon-button part=\"icon-button next-icon-button\"\n      @click=${() => this.#setValue(this.value! + 1)}\n      .disabled=${this.disabled || this.#currentPage >= this.items}\n      .ariaLabel=${this.i18n.next}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  get #startButton() {\n    return html`<nve-icon-button part=\"icon-button start-icon-button\"\n      @click=${() => this.#setValue(1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.start}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #endButton() {\n    return html`<nve-icon-button part=\"icon-button end-icon-button\"\n      @click=${() => this.#setValue(this.items / this.step)}\n      .disabled=${this.disabled || (this.value! - 1) * this.step + this.step >= this.items}\n      .ariaLabel=${this.i18n.end}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  #resizeObserver: ResizeObserver;\n\n  get #select() {\n    return this.disableStep\n      ? html`<label>${this.#selectLabel}&nbsp;</label>`\n      : html`\n          <nve-select part=\"select\" .container=${this.container}>\n            <select\n              .ariaLabel=${this.i18n.currentPage}\n              @change=${(e: Event) => this.#setStep(parseInt((e.target as HTMLSelectElement).value, 10))}\n              value=${this.step}\n              .disabled=${this.disabled || this.disableStep}\n            >\n            ${this.stepSizes.map(i => html`<option ?selected=${this.step === i} value=${i}>${i}</option>`)}\n            </select>\n            <div class=\"select-label\">${this.#selectLabel}</div>\n          </nve-select>\n        `;\n  }\n\n  render() {\n    return html`\n      <div internal-host role=\"presentation\">\n        ${\n          this.skippable && this.items\n            ? html`\n              ${this.#startButton} ${this.#previousButton} ${this.#select} ${this.#label} ${this.#nextButton}\n              ${this.#endButton}\n            `\n            : html` ${this.#select} ${this.#label} ${this.#previousButton} ${this.#nextButton} `\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = 1;\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    await this.updateComplete;\n    this.#setupLabelWidth();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.unobserve(this);\n  }\n\n  #setupLabelWidth() {\n    const label = this.shadowRoot!.querySelector('.select-label');\n    const select = this.shadowRoot!.querySelector('select');\n    if (label && select) {\n      this.#resizeObserver = new ResizeObserver(\n        entries => (select!.style.minWidth = `${entries[0]!.contentRect.width + 36}px`)\n      );\n      this.#resizeObserver.observe(label);\n    }\n  }\n\n  #setStep(value: number) {\n    /* eslint-disable-next-line */\n    this.step = value; // stateful due to internalized select element\n    this.dispatchEvent(new CustomEvent('step-change', { detail: this.step, bubbles: true, composed: true }));\n    this.#setValue(this.value!);\n  }\n\n  #setValue(value: number) {\n    if (this.value !== value) {\n      this.value = value;\n      this.dispatchInputEvent();\n      this.dispatchChangeEvent();\n    }\n\n    if (this.#isLastPage) {\n      this.dispatchEvent(new CustomEvent('last-page', { bubbles: true, composed: true }));\n    }\n\n    if (this.#isFirstPage) {\n      this.dispatchEvent(new CustomEvent('first-page', { bubbles: true, composed: true }));\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pagination2.js","names":[],"sources":["../../src/pagination/pagination.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  formatStandardNumber,\n  keyNavigationList,\n  typeSSR,\n  useStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Select } from '@nvidia-elements/core/select';\nimport styles from './pagination.css?inline';\n\nconst i18nDefaults = {\n  of: 'of',\n  previous: 'previous',\n  next: 'next',\n  start: 'start',\n  end: 'end',\n  currentPage: 'current page'\n} satisfies I18nDefaults;\n\n/* eslint-disable jsdoc/no-types */\n// explicit jsdoc annotation due to inheritance context lost with CEM generator\n\n/**\n * @element nve-pagination\n * @description Pagination is a control that enables users to navigate through pages of content.\n * @documentation https://nvidia.github.io/elements/docs/elements/pagination/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/pagination\n * @event input - Dispatched when the value (page) has changed\n * @event change - Dispatched when the value (page) has changed\n * @event first-page - Dispatched when the first page is active\n * @event last-page - Dispatched when the last page is active\n * @event step-change - Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries.\n * @slot suffix-label - Overrides the \"of total\" label when the total is an approximation.\n * @cssprop --background\n * @cssprop --font-size\n * @cssprop --width\n * @csspart icon-button - Base part applied to all icon button elements\n * @csspart previous-icon-button - The previous page icon button\n * @csspart next-icon-button - The next page icon button\n * @csspart start-icon-button - The first page icon button\n * @csspart end-icon-button - The last page icon button\n * @csspart select - The page size select element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n * @property {number} value - value the current page number\n * @attribute {string} step-sizes - A JSON-serialized array of page-size options available in the selector.\n */\n@typeSSR()\n@keyNavigationList<Pagination>()\n@scopedRegistry()\nexport class Pagination extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * The number of items per page.\n   */\n  @property({ type: Number }) step = 10;\n  /**\n   * Page-size options available in the selector.\n   */\n  @property({ type: Array, attribute: 'step-sizes' }) stepSizes: number[] = [10, 20, 50, 100];\n\n  /**\n   * The total number of items.\n   */\n  @property({ type: Number }) items: number;\n\n  /**\n   * Whether the pagination is skippable to start/end.\n   */\n  @property({ type: Boolean }) skippable: boolean;\n\n  /**\n   * Whether the step selector has a disabled state.\n   */\n  @property({ type: Boolean, attribute: 'disable-step' }) disableStep: boolean;\n\n  /**\n   * Determines the container styles of component. Flat applies when nesting within other containers. Inline applies when placing within other inline content.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\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  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pagination',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Select.metadata.tag]: Select\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.shadowRoot!.querySelectorAll<HTMLElement>(`${IconButton.metadata.tag}, input, select`),\n      layout: 'horizontal'\n    };\n  }\n\n  get #currentPage() {\n    return (this.value! - 1) * this.step + this.step;\n  }\n\n  get #isLastPage() {\n    return this.items / this.value! === this.step;\n  }\n\n  get #isFirstPage() {\n    return this.value === 1;\n  }\n\n  get #selectLabel() {\n    const start = (this.value! - 1) * this.step + 1;\n    const end = Math.min(this.value! * this.step, this.items || Infinity);\n    return `${formatStandardNumber(start)}-${formatStandardNumber(end)}`;\n  }\n\n  get #label() {\n    return this.items\n      ? html`<label><slot name=\"suffix-label\">${this.i18n.of} ${formatStandardNumber(this.items)}</slot></label>`\n      : nothing;\n  }\n\n  get #previousButton() {\n    return html`<nve-icon-button part=\"icon-button previous-icon-button\"\n      @click=${() => this.#setValue(this.value! - 1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.previous}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #nextButton() {\n    return html`<nve-icon-button part=\"icon-button next-icon-button\"\n      @click=${() => this.#setValue(this.value! + 1)}\n      .disabled=${this.disabled || this.#currentPage >= this.items}\n      .ariaLabel=${this.i18n.next}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  get #startButton() {\n    return html`<nve-icon-button part=\"icon-button start-icon-button\"\n      @click=${() => this.#setValue(1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.start}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #endButton() {\n    return html`<nve-icon-button part=\"icon-button end-icon-button\"\n      @click=${() => this.#setValue(this.items / this.step)}\n      .disabled=${this.disabled || (this.value! - 1) * this.step + this.step >= this.items}\n      .ariaLabel=${this.i18n.end}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  #resizeObserver: ResizeObserver;\n\n  get #select() {\n    return this.disableStep\n      ? html`<label>${this.#selectLabel}&nbsp;</label>`\n      : html`\n          <nve-select part=\"select\" .container=${this.container}>\n            <select\n              .ariaLabel=${this.i18n.currentPage}\n              @change=${(e: Event) => this.#setStep(parseInt((e.target as HTMLSelectElement).value, 10))}\n              value=${this.step}\n              .disabled=${this.disabled || this.disableStep}\n            >\n            ${this.stepSizes.map(i => html`<option ?selected=${this.step === i} value=${i}>${i}</option>`)}\n            </select>\n            <div class=\"select-label\">${this.#selectLabel}</div>\n          </nve-select>\n        `;\n  }\n\n  render() {\n    return html`\n      <div internal-host role=\"presentation\">\n        ${\n          this.skippable && this.items\n            ? html`\n              ${this.#startButton} ${this.#previousButton} ${this.#select} ${this.#label} ${this.#nextButton}\n              ${this.#endButton}\n            `\n            : html` ${this.#select} ${this.#label} ${this.#previousButton} ${this.#nextButton} `\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = 1;\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    await this.updateComplete;\n    this.#setupLabelWidth();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.unobserve(this);\n  }\n\n  #setupLabelWidth() {\n    const label = this.shadowRoot!.querySelector('.select-label');\n    const select = this.shadowRoot!.querySelector('select');\n    if (label && select) {\n      this.#resizeObserver = new ResizeObserver(\n        entries => (select!.style.minWidth = `${entries[0]!.contentRect.width + 36}px`)\n      );\n      this.#resizeObserver.observe(label);\n    }\n  }\n\n  #setStep(value: number) {\n    /* eslint-disable-next-line */\n    this.step = value; // stateful due to internalized select element\n    this.dispatchEvent(new CustomEvent('step-change', { detail: this.step, bubbles: true, composed: true }));\n    this.#setValue(this.value!);\n  }\n\n  #setValue(value: number) {\n    if (this.value !== value) {\n      this.value = value;\n      this.dispatchInputEvent();\n      this.dispatchChangeEvent();\n    }\n\n    if (this.#isLastPage) {\n      this.dispatchEvent(new CustomEvent('last-page', { bubbles: true, composed: true }));\n    }\n\n    if (this.#isFirstPage) {\n      this.dispatchEvent(new CustomEvent('first-page', { bubbles: true, composed: true }));\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/panel/panel2.js

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