@nvidia-elements/core 2.5.0 → 2.5.2

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	render() {

package/dist/button-group/button-group2.js

@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "2.5.0",
+			version: "2.5.2",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-card"]
 		};
 	}

package/dist/chat-message/chat-message2.js

@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "2.5.0",
+			version: "2.5.2",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/checkbox/checkbox2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "2.5.0",
+			version: "2.5.2",
 			children: [
 				"label",
 				"input",

package/dist/color/color2.js

@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	static {

package/dist/combobox/combobox2.js

@@ -31,7 +31,7 @@ var S = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	static {

package/dist/copy-button/copy-button2.js

@@ -32,7 +32,7 @@ var p = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-copy-button",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	static {

package/dist/data.snippets.json

@@ -188,6 +188,33 @@
     "description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
     "body": "<nve-dialog size=\"${6:md}\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">${1:Title}</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">${2:Content}</p>\n  <nve-dialog-footer>\n    <nve-button>${3:Cancel}</nve-button>\n    <nve-button interaction=\"${4:emphasis}\">${5:OK}</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n$0\n"
   },
+  "Card": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "card"
+    ],
+    "type": "pattern",
+    "description": "Basic Card with header and footer",
+    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card"
+    ],
+    "type": "pattern",
+    "description": "Basic media Card with card content and card footer",
+    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card Grid": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card-grid"
+    ],
+    "type": "pattern",
+    "description": "Grid layout with 3 media cards",
+    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
+  },
   "Button Group": {
     "srcFile": "button-group.snippets.html",
     "prefix": [
@@ -224,32 +251,32 @@
     "description": "Simple vertical button group with three icon buttons.",
     "body": "<nve-button-group orientation=\"vertical\">\n  <nve-icon-button icon-name=\"${1:copy}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${2:add-comment}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${3:download}\"></nve-icon-button>\n</nve-button-group>\n"
   },
-  "Card": {
-    "srcFile": "card.snippets.html",
+  "Accordion": {
+    "srcFile": "accordion.snippets.html",
     "prefix": [
-      "card"
+      "accordion"
     ],
     "type": "pattern",
-    "description": "Basic Card with header and footer",
-    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
+    "description": "Basic accordion with title and content slot.",
+    "body": "<nve-accordion behavior-expand container=\"${1:flat}\">\n  <nve-accordion-header>\n    <div>${2:Title}</div>\n  </nve-accordion-header>\n\n  <nve-accordion-content> ${3:Content} </nve-accordion-content>\n</nve-accordion>\n$0\n"
   },
-  "Media Card": {
-    "srcFile": "card.snippets.html",
+  "Accordion with Actions": {
+    "srcFile": "accordion.snippets.html",
     "prefix": [
-      "media-card"
+      "accordion-actions"
     ],
     "type": "pattern",
-    "description": "Basic media Card with card content and card footer",
-    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
+    "description": "Accordion with action buttons in header.",
+    "body": "<nve-accordion behavior-expand container=\"${1:flat}\">\n  <nve-accordion-header>\n    <div>${2:Title}</div>\n\n    <nve-icon-button container=\"flat\" icon-name=\"${3:add}\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"${4:delete}\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n  </nve-accordion-header>\n\n  <nve-accordion-content> ${5:Content} </nve-accordion-content>\n</nve-accordion>\n$0\n"
   },
-  "Media Card Grid": {
-    "srcFile": "card.snippets.html",
+  "Accorion Group": {
+    "srcFile": "accordion.snippets.html",
     "prefix": [
-      "media-card-grid"
+      "accordion-group"
     ],
     "type": "pattern",
-    "description": "Grid layout with 3 media cards",
-    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
+    "description": "Accordion group with two accordion children.",
+    "body": "<nve-accordion-group behavior-expand-single container=\"${1:flat}\">\n  <nve-accordion>\n    <nve-accordion-header>\n      <div>${2:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${3:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div>${4:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${5:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div>${6:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${7:Content} </nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n$0\n"
   },
   "Alert Group": {
     "srcFile": "alert.snippets.html",
@@ -277,32 +304,5 @@
     "type": "pattern",
     "description": "Alert text and preformatted code output.",
     "body": "<nve-alert-group status=\"danger\">\n  <nve-alert>\n    Session Paused:\n    <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n      <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n      <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n      <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n          </pre>\n    </div>\n  </nve-alert>\n</nve-alert-group>\n$0\n"
-  },
-  "Accordion": {
-    "srcFile": "accordion.snippets.html",
-    "prefix": [
-      "accordion"
-    ],
-    "type": "pattern",
-    "description": "Basic accordion with title and content slot.",
-    "body": "<nve-accordion behavior-expand container=\"${1:flat}\">\n  <nve-accordion-header>\n    <div>${2:Title}</div>\n  </nve-accordion-header>\n\n  <nve-accordion-content> ${3:Content} </nve-accordion-content>\n</nve-accordion>\n$0\n"
-  },
-  "Accordion with Actions": {
-    "srcFile": "accordion.snippets.html",
-    "prefix": [
-      "accordion-actions"
-    ],
-    "type": "pattern",
-    "description": "Accordion with action buttons in header.",
-    "body": "<nve-accordion behavior-expand container=\"${1:flat}\">\n  <nve-accordion-header>\n    <div>${2:Title}</div>\n\n    <nve-icon-button container=\"flat\" icon-name=\"${3:add}\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"${4:delete}\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n  </nve-accordion-header>\n\n  <nve-accordion-content> ${5:Content} </nve-accordion-content>\n</nve-accordion>\n$0\n"
-  },
-  "Accorion Group": {
-    "srcFile": "accordion.snippets.html",
-    "prefix": [
-      "accordion-group"
-    ],
-    "type": "pattern",
-    "description": "Accordion group with two accordion children.",
-    "body": "<nve-accordion-group behavior-expand-single container=\"${1:flat}\">\n  <nve-accordion>\n    <nve-accordion-header>\n      <div>${2:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${3:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div>${4:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${5:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div>${6:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${7:Content} </nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n$0\n"
   }
 }

package/dist/date/date2.js

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

package/dist/datetime/datetime2.js

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

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-header",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -22,7 +22,7 @@ var h = class extends f {
 		return this.modal ? "auto" : "manual";
 	}
 	get popoverDismissible() {
-		return !!this.closable;
+		return this.closable ?? !1;
 	}
 	static {
 		this.styles = o([s, d]);
@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	static {

package/dist/dialog/dialog2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog2.js","names":["#i18nController"],"sources":["../../src/dialog/dialog.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, Size } from '@nvidia-elements/core/internal';\nimport {\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './dialog.global.css?inline';\nimport styles from './dialog.css?inline';\n\n/**\n * @element nve-dialog\n * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.\n * @documentation https://nvidia.github.io/elements/docs/elements/dialog/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dialog\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 dialog opens.\n * @event close - Dispatched when the dialog closes.\n * @slot - Dialog body content displayed between the header and footer.\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --max-width\n * @cssprop --min-height\n * @cssprop --max-height\n * @cssprop --animation-duration - Duration of dialog open/close animations\n * @csspart close-button - The inner template reference for the close button of the dialog.\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dialog extends LitElement {\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   * For dialog the anchor defaults to the document body.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'center';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alignment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n  /**\n   * Sets the max size of the dialog.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Determines if a close button should render within dialog. Non-closable\n   * dialogs suit dialogs that require user confirmation steps.\n   */\n  @property({ type: Boolean }) closable: boolean;\n\n  /**\n   * Determines if a dialog should have a modal backdrop that visually overlays the UI.\n   */\n  @property({ type: Boolean, reflect: true }) modal: boolean;\n\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   * @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  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return this.modal ? 'auto' : 'manual';\n  }\n\n  /** @private */\n  get popoverDismissible() {\n    return !!this.closable;\n  }\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Dialog>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dialog',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host part=\"_host\">\n      <div class=\"header\">\n        ${this.closable ? html`<nve-icon-button part=\"close-button icon-button\" exportparts=\"icon:icon-button-icon\" size=\"sm\" @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'dialog';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiDO,IAAA,IAAA,cAAqB,EAAW;;+BAKkC,2BAMF,wBAsBV,WAAW,UAAU,gBAexC,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yCAYhB,IAAI,EAAoC,IAAI;;CAjBpF;CAQA,IAAI,cAA2B;EAC7B,OAAO,KAAK,QAAQ,SAAS;CAC/B;CAGA,IAAI,qBAAqB;EACvB,OAAO,CAAC,CAAC,KAAK;CAChB;;gBAIgB,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA,SAAS;EACP,OAAO,CAAI,uDAGL,KAAK,WAAW,CAAI,0GAAyG,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM,wBAAuB,GAAG;CASjO;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,UACvB,EAAoB,MAAM,CAAY;CACxC;AACF;GAjGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAMzB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAOxE,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvD3B,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChC,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"dialog2.js","names":["#i18nController"],"sources":["../../src/dialog/dialog.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, Size } from '@nvidia-elements/core/internal';\nimport {\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './dialog.global.css?inline';\nimport styles from './dialog.css?inline';\n\n/**\n * @element nve-dialog\n * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.\n * @documentation https://nvidia.github.io/elements/docs/elements/dialog/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dialog\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 dialog opens.\n * @event close - Dispatched when the dialog closes.\n * @slot - Dialog body content displayed between the header and footer.\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --max-width\n * @cssprop --min-height\n * @cssprop --max-height\n * @cssprop --animation-duration - Duration of dialog open/close animations\n * @csspart close-button - The inner template reference for the close button of the dialog.\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dialog extends LitElement {\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   * For dialog the anchor defaults to the document body.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'center';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alignment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n  /**\n   * Sets the max size of the dialog.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Determines if a close button should render within dialog. Non-closable\n   * dialogs suit dialogs that require user confirmation steps.\n   */\n  @property({ type: Boolean }) closable: boolean;\n\n  /**\n   * Determines if a dialog should have a modal backdrop that visually overlays the UI.\n   */\n  @property({ type: Boolean, reflect: true }) modal: boolean;\n\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   * @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  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return this.modal ? 'auto' : 'manual';\n  }\n\n  /** @private */\n  get popoverDismissible() {\n    return this.closable ?? false;\n  }\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Dialog>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dialog',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host part=\"_host\">\n      <div class=\"header\">\n        ${this.closable ? html`<nve-icon-button part=\"close-button icon-button\" exportparts=\"icon:icon-button-icon\" size=\"sm\" @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'dialog';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiDO,IAAA,IAAA,cAAqB,EAAW;;+BAKkC,2BAMF,wBAsBV,WAAW,UAAU,gBAexC,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yCAYhB,IAAI,EAAoC,IAAI;;CAjBpF;CAQA,IAAI,cAA2B;EAC7B,OAAO,KAAK,QAAQ,SAAS;CAC/B;CAGA,IAAI,qBAAqB;EACvB,OAAO,KAAK,YAAY;CAC1B;;gBAIgB,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA,SAAS;EACP,OAAO,CAAI,uDAGL,KAAK,WAAW,CAAI,0GAAyG,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM,wBAAuB,GAAG;CASjO;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,UACvB,EAAoB,MAAM,CAAY;CACxC;AACF;GAjGG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAMzB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAOxE,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAvD3B,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChC,EAAe,CAAA,GAAA,CAAA"}

package/dist/divider/divider2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-divider",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	render() {

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	render() {

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-footer",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-header",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

@@ -30,7 +30,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	static {

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "2.5.0",
+			version: "2.5.2",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	static {

package/dist/dropdown-group/dropdown-group.js

@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "2.5.0",
+			version: "2.5.2",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends m(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "2.5.0",
+			version: "2.5.2",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	connectedCallback() {

package/dist/format-bytes/format-bytes2.js

@@ -95,7 +95,7 @@ var g = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-bytes",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	get #e() {

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	get #e() {

package/dist/format-number/format-number2.js

@@ -29,7 +29,7 @@ var c = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time2.js

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	#e;

package/dist/format-truncate/format-truncate2.js

@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-format-truncate",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	#e;

package/dist/forms/control/control2.js

@@ -48,7 +48,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	render() {

package/dist/forms/control-group/control-group2.js

@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	render() {

package/dist/forms/control-message/control-message2.js

@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "2.5.0"
+			version: "2.5.2"
 		};
 	}
 	static {

package/dist/gauge/gauge.d.ts

@@ -49,5 +49,7 @@ export declare class Gauge extends LitElement {
     }>;
     render(): import("lit").TemplateResult<1>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(props: PropertyValues<this>): void;
     updated(props: PropertyValues<this>): void;
 }

package/dist/gauge/gauge.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge.examples.js","names":[],"sources":["../../src/gauge/gauge.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/gauge/define.js';\n\nexport default {\n  title: 'Elements/Gauge',\n  component: 'nve-gauge',\n};\n\n/**\n * @summary 270-degree gauges for displaying system resource usage.\n */\nexport const Default = {\n  render: () => html`\n    <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n`};\n\n/**\n * @summary Shape variants compare the default 270-degree gauge with the compact half gauge for telemetry layouts with tighter vertical space.\n * @tags test-case\n */\nexport const Shape = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" status=\"accent\" value=\"66\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Half shape variant for telemetry layouts with tighter vertical space.\n * @tags test-case\n */\nexport const ShapeHalf = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge shape=\"half\" value=\"66\" size=\"sm\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" value=\"66\" size=\"lg\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Half shape with needle thumb variant for rapidly changing values in confined spaces.\n * @tags test-case\n */\nexport const ShapeHalfNeedle = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"sm\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"lg\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Thumb variants compare filled, dot, and needle indicators for dashboards that need different levels of visual emphasis.\n * @tags test-case\n */\nexport const Thumb = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge thumb=\"fill\" value=\"66\">fill</nve-gauge>\n      <nve-gauge thumb=\"dot\" value=\"66\">dot</nve-gauge>\n      <nve-gauge thumb=\"needle\" value=\"66\">needle</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with values from 0% to 100% for displaying system resource usage.\n * @tags test-case\n */\nexport const Values = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge value=\"0\">0%</nve-gauge>\n      <nve-gauge value=\"33\">33%</nve-gauge>\n      <nve-gauge value=\"66\">66%</nve-gauge>\n      <nve-gauge value=\"100\">100%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with custom max values for mission checkpoints, validation clips, and map tile processing.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge status=\"accent\" max=\"20\" value=\"5\">5/20</nve-gauge>\n      <nve-gauge max=\"20\" value=\"10\">10/20</nve-gauge>\n      <nve-gauge max=\"20\" value=\"15\">15/20</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with accent, success, warning, and danger colors for autonomous system health and readiness signals.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge value=\"50\">50%</nve-gauge>\n      <nve-gauge status=\"accent\" value=\"75\">75%</nve-gauge>\n      <nve-gauge status=\"success\" value=\"75\">75%</nve-gauge>\n      <nve-gauge status=\"warning\" value=\"75\" aria-valuetext=\"2.1m\">2.1m</nve-gauge>\n      <nve-gauge status=\"danger\" value=\"75\" aria-valuetext=\"0Hz\">0Hz</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Use gradient colors for gauges with scaled non-segmented values such as temperature and bandwidth.\n * @tags pattern\n */\nexport const Gradient = {\n  render: () => html`\n    <style>\n      nve-gauge#gauge-temperature-example {\n        --background: conic-gradient(\n          from 225deg at 50% 50%,\n          var(--nve-sys-support-success-emphasis-color) 0deg 18deg,\n          var(--nve-sys-support-warning-emphasis-color) 135deg,\n          var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,\n          var(--nve-sys-support-success-emphasis-color) 300deg 360deg\n        );\n      }\n\n      nve-gauge#gauge-mbps-example {\n        --background: conic-gradient(\n          from 225deg at 50% 50%,\n          var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,\n          var(--nve-sys-support-warning-emphasis-color) 135deg,\n          var(--nve-sys-support-success-emphasis-color) 252deg 300deg,\n          var(--nve-sys-support-danger-emphasis-color) 300deg 360deg\n        );\n      }\n    </style>\n\n    <div nve-layout=\"row gap:md\">\n      <nve-gauge thumb=\"dot\" value=\"82\" id=\"gauge-temperature-example\" aria-label=\"Temperature\" aria-valuetext=\"82°C\">\n        <span>82&deg;C</span>\n        <span nve-text=\"body sm muted\">TEMP</span>\n      </nve-gauge>\n\n      <nve-gauge thumb=\"needle\" value=\"98\" id=\"gauge-mbps-example\" aria-label=\"Download\" aria-valuetext=\"980Mbps\">\n        <span nve-text=\"body sm\">980Mbps</span>\n        <span nve-text=\"body sm muted\">Download</span>\n      </nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Small gauge paired with route-solve text for compact autonomous vehicle task rows.\n * @tags test-case\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n      <nve-gauge status=\"accent\" size=\"sm\" value=\"50\" aria-labelledby=\"route-solve-label\" aria-valuetext=\"2.4s\">2.4s</nve-gauge>\n      <span id=\"route-solve-label\">Route solve</span>\n    </div>\n`};\n\n/**\n * @summary Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge size=\"sm\" value=\"50\" aria-valuetext=\"30Hz\">\n        <span nve-text=\"grow\">30Hz</span>\n      </nve-gauge>\n      <nve-gauge size=\"md\" value=\"50\" aria-valuetext=\"12Hz\">\n        <span nve-text=\"grow\">12Hz</span>\n      </nve-gauge>\n      <nve-gauge size=\"lg\" value=\"50\" aria-valuetext=\"84%\">\n        <span nve-text=\"grow\">84%</span>\n      </nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Use for displaying real-time system usage and performance metrics.\n * @tags pattern\n */\nexport const Dynamic = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"dynamic-gpu-gauge\" status=\"success\" value=\"0\" aria-label=\"GPU\" aria-valuetext=\"0%\">\n    <span nve-text=\"grow\">0%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const gauge = document.querySelector('#dynamic-gpu-gauge');\n  const valueElement = gauge.querySelector('span');\n  setInterval(() => {\n    const value = Math.floor(Math.random() * 101);\n    const text = value + '%';\n    gauge.value = value;\n    gauge.status = value >= 80 ? 'danger' : value >= 60 ? 'warning' : 'success';\n    gauge.setAttribute('aria-valuetext', text);\n    valueElement.textContent = text;\n  }, 1500);\n</script>\n`};\n\n/**\n * @summary Autonomous vehicle taxi gauges combine battery, perception, compute, and link status with realistic drift. Use for live dispatch views that need changing system health.\n * @tags test-case\n */\nexport const MultiGauge = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"av-taxi-battery-gauge\" status=\"success\" value=\"74\" aria-label=\"Battery\" aria-valuetext=\"74%\">\n    <span nve-text=\"grow\">74%</span>\n    <span nve-text=\"body sm muted\">BATTERY</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-perception-gauge\" status=\"success\" value=\"96\" aria-label=\"Perception\" aria-valuetext=\"96%\">\n    <span nve-text=\"grow\">96%</span>\n    <span nve-text=\"body sm muted\">PERCEPTION</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-compute-gauge\" status=\"success\" value=\"62\" aria-label=\"GPU\" aria-valuetext=\"62%\">\n    <span nve-text=\"grow\">62%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n  const telemetry = {\n    battery: 74,\n    compute: 62,\n    perception: 96\n  };\n  const gauges = {\n    battery: document.querySelector('#av-taxi-battery-gauge'),\n    compute: document.querySelector('#av-taxi-compute-gauge'),\n    perception: document.querySelector('#av-taxi-perception-gauge')\n  };\n\n  const setGauge = (gauge, value, text, status) => {\n    gauge.value = Math.round(value);\n    gauge.status = status;\n    gauge.setAttribute('aria-valuetext', text);\n    gauge.querySelector('span').textContent = text;\n  };\n\n  setInterval(() => {\n    telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);\n    telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);\n    telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);\n\n    const battery = Math.round(telemetry.battery);\n    const compute = Math.round(telemetry.compute);\n    const perception = Math.round(telemetry.perception);\n\n    setGauge(gauges.battery, battery, battery + '%', battery < 30 ? 'danger' : battery < 50 ? 'warning' : 'success');\n    setGauge(gauges.compute, compute, compute + '%', compute >= 85 ? 'danger' : compute >= 70 ? 'warning' : 'success');\n    setGauge(gauges.perception, perception, perception + '%', perception < 90 ? 'danger' : perception < 94 ? 'warning' : 'success');\n  }, 1600);\n</script>\n`};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"gauge.examples.js","names":[],"sources":["../../src/gauge/gauge.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/gauge/define.js';\n\nexport default {\n  title: 'Elements/Gauge',\n  component: 'nve-gauge',\n};\n\n/**\n * @summary 270-degree gauges for displaying system resource usage.\n */\nexport const Default = {\n  render: () => html`\n    <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n`};\n\n/**\n * @summary Shape variants compare the default 270-degree gauge with the compact half gauge for telemetry layouts with tighter vertical space.\n * @tags test-case\n */\nexport const Shape = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" status=\"accent\" value=\"66\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Half shape variant for telemetry layouts with tighter vertical space.\n * @tags test-case\n */\nexport const ShapeHalf = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge shape=\"half\" value=\"66\" size=\"sm\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" value=\"66\" size=\"lg\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Half shape with needle thumb variant for rapidly changing values in confined spaces.\n * @tags test-case\n */\nexport const ShapeHalfNeedle = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"sm\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"lg\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Thumb variants compare filled, dot, and needle indicators for dashboards that need different levels of visual emphasis.\n * @tags test-case\n */\nexport const Thumb = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge thumb=\"fill\" value=\"66\">fill</nve-gauge>\n      <nve-gauge thumb=\"dot\" value=\"66\">dot</nve-gauge>\n      <nve-gauge thumb=\"needle\" value=\"66\">needle</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with values from 0% to 100% for displaying system resource usage.\n * @tags test-case\n */\nexport const Values = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge value=\"0\">0%</nve-gauge>\n      <nve-gauge value=\"33\">33%</nve-gauge>\n      <nve-gauge value=\"66\">66%</nve-gauge>\n      <nve-gauge value=\"100\">100%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with custom max values for mission checkpoints, validation clips, and map tile processing.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge status=\"accent\" max=\"20\" value=\"5\">5/20</nve-gauge>\n      <nve-gauge max=\"20\" value=\"10\">10/20</nve-gauge>\n      <nve-gauge max=\"20\" value=\"15\">15/20</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with accent, success, warning, and danger colors for autonomous system health and readiness signals.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge value=\"50\">50%</nve-gauge>\n      <nve-gauge status=\"accent\" value=\"75\">75%</nve-gauge>\n      <nve-gauge status=\"success\" value=\"75\">75%</nve-gauge>\n      <nve-gauge status=\"warning\" value=\"75\" aria-valuetext=\"2.1m\">2.1m</nve-gauge>\n      <nve-gauge status=\"danger\" value=\"75\" aria-valuetext=\"0Hz\">0Hz</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Use gradient colors for gauges with scaled non-segmented values such as temperature and bandwidth.\n * @tags pattern\n */\nexport const Gradient = {\n  render: () => html`\n    <style>\n      nve-gauge#gauge-temperature-example {\n        --background: conic-gradient(\n          from 225deg at 50% 50%,\n          var(--nve-sys-support-success-emphasis-color) 0deg 18deg,\n          var(--nve-sys-support-warning-emphasis-color) 135deg,\n          var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,\n          var(--nve-sys-support-success-emphasis-color) 300deg 360deg\n        );\n      }\n\n      nve-gauge#gauge-mbps-example {\n        --background: conic-gradient(\n          from 225deg at 50% 50%,\n          var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,\n          var(--nve-sys-support-warning-emphasis-color) 135deg,\n          var(--nve-sys-support-success-emphasis-color) 252deg 300deg,\n          var(--nve-sys-support-danger-emphasis-color) 300deg 360deg\n        );\n      }\n    </style>\n\n    <div nve-layout=\"row gap:md\">\n      <nve-gauge thumb=\"dot\" value=\"82\" id=\"gauge-temperature-example\" aria-label=\"Temperature\" aria-valuetext=\"82°C\">\n        <span>82&deg;C</span>\n        <span nve-text=\"body sm muted\">TEMP</span>\n      </nve-gauge>\n\n      <nve-gauge thumb=\"needle\" value=\"98\" id=\"gauge-mbps-example\" aria-label=\"Download\" aria-valuetext=\"980Mbps\">\n        <span nve-text=\"body sm\">980Mbps</span>\n        <span nve-text=\"body sm muted\">Download</span>\n      </nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Small gauge paired with route-solve text for compact autonomous vehicle task rows.\n * @tags test-case\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n      <nve-gauge status=\"accent\" size=\"sm\" value=\"50\" aria-labelledby=\"route-solve-label\" aria-valuetext=\"2.4s\">2.4s</nve-gauge>\n      <span id=\"route-solve-label\">Route solve</span>\n    </div>\n`};\n\n/**\n * @summary Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge size=\"sm\" value=\"50\" aria-valuetext=\"30Hz\">\n        <span nve-text=\"grow\">30Hz</span>\n      </nve-gauge>\n      <nve-gauge size=\"md\" value=\"50\" aria-valuetext=\"12Hz\">\n        <span nve-text=\"grow\">12Hz</span>\n      </nve-gauge>\n      <nve-gauge size=\"lg\" value=\"84\" aria-valuetext=\"84%\">\n        <span nve-text=\"grow\">84%</span>\n      </nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Use for displaying real-time system usage and performance metrics.\n * @tags pattern\n */\nexport const Dynamic = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"dynamic-gpu-gauge\" status=\"success\" value=\"0\" aria-label=\"GPU\" aria-valuetext=\"0%\">\n    <span nve-text=\"grow\">0%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const gauge = document.querySelector('#dynamic-gpu-gauge');\n  const valueElement = gauge.querySelector('span');\n  setInterval(() => {\n    const value = Math.floor(Math.random() * 101);\n    const text = value + '%';\n    gauge.value = value;\n    gauge.status = value >= 80 ? 'danger' : value >= 60 ? 'warning' : 'success';\n    gauge.setAttribute('aria-valuetext', text);\n    valueElement.textContent = text;\n  }, 1500);\n</script>\n`};\n\n/**\n * @summary Autonomous vehicle taxi gauges combine battery, perception, compute, and link status with realistic drift. Use for live dispatch views that need changing system health.\n * @tags test-case\n */\nexport const MultiGauge = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"av-taxi-battery-gauge\" status=\"success\" value=\"74\" aria-label=\"Battery\" aria-valuetext=\"74%\">\n    <span nve-text=\"grow\">74%</span>\n    <span nve-text=\"body sm muted\">BATTERY</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-perception-gauge\" status=\"success\" value=\"96\" aria-label=\"Perception\" aria-valuetext=\"96%\">\n    <span nve-text=\"grow\">96%</span>\n    <span nve-text=\"body sm muted\">PERCEPTION</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-compute-gauge\" status=\"success\" value=\"62\" aria-label=\"GPU\" aria-valuetext=\"62%\">\n    <span nve-text=\"grow\">62%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n  const telemetry = {\n    battery: 74,\n    compute: 62,\n    perception: 96\n  };\n  const gauges = {\n    battery: document.querySelector('#av-taxi-battery-gauge'),\n    compute: document.querySelector('#av-taxi-compute-gauge'),\n    perception: document.querySelector('#av-taxi-perception-gauge')\n  };\n\n  const setGauge = (gauge, value, text, status) => {\n    gauge.value = Math.round(value);\n    gauge.status = status;\n    gauge.setAttribute('aria-valuetext', text);\n    gauge.querySelector('span').textContent = text;\n  };\n\n  setInterval(() => {\n    telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);\n    telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);\n    telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);\n\n    const battery = Math.round(telemetry.battery);\n    const compute = Math.round(telemetry.compute);\n    const perception = Math.round(telemetry.perception);\n\n    setGauge(gauges.battery, battery, battery + '%', battery < 30 ? 'danger' : battery < 50 ? 'warning' : 'success');\n    setGauge(gauges.compute, compute, compute + '%', compute >= 85 ? 'danger' : compute >= 70 ? 'warning' : 'success');\n    setGauge(gauges.perception, perception, perception + '%', perception < 90 ? 'danger' : perception < 94 ? 'warning' : 'success');\n  }, 1600);\n</script>\n`};\n"],"mappings":";AAGA,IAAA,IAAS"}