@nvidia-elements/core 2.5.0 → 2.5.1

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.1"
 		};
 	}
 	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.1",
 			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.1"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.5.0",
+			version: "2.5.1",
 			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.1",
 			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.1",
 			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.1"
 		};
 	}
 	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.1",
 			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.1",
 			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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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,33 +251,6 @@
     "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",
-    "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"
-  },
   "Alert Group": {
     "srcFile": "alert.snippets.html",
     "prefix": [

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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1",
 			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.1",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "2.5.0"
+			version: "2.5.1"
 		};
 	}
 	static {

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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1",
 			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.1",
 			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.1",
 			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.1"
 		};
 	}
 	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.1",
 			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.1",
 			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.1"
 		};
 	}
 	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.1",
 			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.1",
 			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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	#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.1"
 		};
 	}
 	#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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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"}

package/dist/gauge/gauge.examples.json

@@ -113,7 +113,7 @@
     {
       "id": "gauge-size",
       "name": "Size",
-      "template": "<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",
+      "template": "<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",
       "summary": "Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.",
       "description": "",
       "composition": false,

package/dist/gauge/gauge.js

@@ -1,5 +1,5 @@
 //#region src/gauge/gauge.css?inline
-var e = ":host{--color: var(--nve-sys-text-emphasis-color);--background: var(--nve-sys-interaction-background);--needle-background: var(--nve-sys-interaction-color);--accent-color: var(--nve-sys-interaction-color);--thumb-background: var(--accent-color);--track-background: var(--accent-color);--track-width: 8px;--font-size: var(--nve-ref-font-size-400);--font-weight: var(--nve-ref-font-weight-regular);--gap: var(--nve-ref-space-xs);--width: 128px;--height: calc(var(--width) * .8627);--_animation-duration: var(--nve-ref-animation-duration-250);--_needle-size: calc(var(--track-width) / 3);display:inline-block;position:relative;width:var(--width);height:var(--height);font-weight:var(--font-weight);container-type:inline-size;contain:layout;text-box:trim-both cap alphabetic}.fill-dot-start,.fill-dot-end{r:calc(var(--track-width) / 2.4)}:host([size=\"sm\"]){--font-size: var(--nve-ref-font-size-300);--width: 96px;--_needle-size: calc(var(--track-width) / 2.25);.fill-dot-start,.fill-dot-end{r:calc(var(--track-width) / 1.8)}}:host([size=\"lg\"]){--font-size: var(--nve-ref-font-size-500);--width: 160px;--_needle-size: calc(var(--track-width) / 3.75);.fill-dot-start,.fill-dot-end{r:calc(var(--track-width) / 3)}}[internal-host]{display:grid;place-items:center;position:relative;height:100%}:host([shape=\"half\"]){--height: calc(var(--width) * .5313)}:host([shape=\"half\"]) [internal-host]{place-items:end center}svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}path{fill:none;stroke:#fff;stroke-width:var(--track-width);vector-effect:non-scaling-stroke}path.background{stroke-linecap:round}path.gauge{animation:gauge-progress-in var(--_animation-duration) var(--nve-ref-animation-easing-100);stroke-linecap:butt;stroke-dasharray:var(--_dash-progress) var(--_dash-gap);transition:stroke-dasharray var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:stroke-dasharray}.background-surface,.fill-surface{inline-size:100%;block-size:100%}.background-surface{background:var(--background)}.fill-surface{background:var(--track-background)}.fill-dot-start{fill:var(--track-background)}.fill-dot-end{animation:gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);fill:var(--thumb-background);transform:rotate(var(--_dot-angle));transform-box:view-box;transform-origin:var(--_dot-origin);transition:transform var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:transform}.fill-layer[hidden],.fill-dot-start[hidden],.fill-dot-end[hidden],.needle[hidden]{display:none}.needle{animation:gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);transform:rotate(var(--_needle-angle));transform-box:view-box;transform-origin:var(--_needle-origin);transition:transform var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:transform}.needle-line{stroke:var(--needle-background);stroke-linecap:round;stroke-width:var(--_needle-size)}.needle-hub{fill:var(--needle-background);r:var(--_needle-size)}slot{display:flex;flex-direction:column;place-items:center;justify-content:center;height:100%;gap:var(--gap);color:var(--color);font-size:var(--font-size);font-weight:var(--nve-ref-font-weight-medium);padding-block-start:calc(var(--track-width) * 2);text-box:trim-both cap alphabetic;line-height:1;width:50%;font-variant-numeric:tabular-nums}:host([shape=\"half\"]) slot{transform:translateY(1cqh)}:host([thumb=\"needle\"]) slot{transform:translateY(1cqh);justify-content:end}:host([shape=\"half\"][thumb=\"needle\"]) slot{transform:translateY(2cqh)}::slotted(*){color:var(--color);font-size:var(--font-size)}:host([status=\"success\"]){--accent-color: var(--nve-sys-support-success-emphasis-color);--background: var(--nve-sys-support-success-muted-color)}:host([status=\"warning\"]){--accent-color: var(--nve-sys-support-warning-emphasis-color);--background: var(--nve-sys-support-warning-muted-color)}:host([status=\"danger\"]){--accent-color: var(--nve-sys-support-danger-emphasis-color);--background: var(--nve-sys-support-danger-muted-color)}:host([status=\"accent\"]){--accent-color: var(--nve-sys-accent-secondary-background)}@media(prefers-reduced-motion:reduce){:host{--_animation-duration: 0s}}@keyframes gauge-progress-in{0%{stroke-dasharray:0 var(--_dash-gap)}to{stroke-dasharray:var(--_dash-progress) var(--_dash-gap)}}@keyframes gauge-dot-in{0%{transform:rotate(var(--_dot-start-angle))}to{transform:rotate(var(--_dot-angle))}}@keyframes gauge-needle-in{0%{transform:rotate(var(--_needle-start-angle))}to{transform:rotate(var(--_needle-angle))}}";
+var e = ":host{--color: var(--nve-sys-text-emphasis-color);--background: var(--nve-sys-interaction-background);--needle-background: var(--nve-sys-interaction-color);--accent-color: var(--nve-sys-interaction-color);--thumb-background: var(--accent-color);--track-background: var(--accent-color);--track-width: 8px;--font-size: var(--nve-ref-font-size-400);--font-weight: var(--nve-ref-font-weight-regular);--gap: var(--nve-ref-space-xs);--width: 128px;--height: calc(var(--width) * .8627);--_animation-duration: var(--nve-ref-animation-duration-250);--_needle-size: calc(var(--track-width) / 3);display:inline-block;position:relative;width:var(--width);height:var(--height);font-weight:var(--font-weight);container-type:inline-size;contain:layout;text-box:trim-both cap alphabetic}.fill-dot-end{r:calc(var(--track-width) / 3.2)}:host([size=\"sm\"]){--font-size: var(--nve-ref-font-size-300);--width: 96px;--_needle-size: calc(var(--track-width) / 2.25);.fill-dot-end{r:calc(var(--track-width) / 2.4)}}:host([size=\"lg\"]){--font-size: var(--nve-ref-font-size-500);--width: 160px;--_needle-size: calc(var(--track-width) / 3.75);.fill-dot-end{r:calc(var(--track-width) / 4)}}[internal-host]{display:grid;place-items:center;position:relative;height:100%}:host([shape=\"half\"]){--height: calc(var(--width) * .5313)}:host([shape=\"half\"]) [internal-host]{place-items:end center}svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}path{fill:none;stroke:#fff;stroke-width:var(--track-width);vector-effect:non-scaling-stroke}path.background{stroke-linecap:round}path.gauge{stroke-linecap:round}.background-surface,.fill-surface{inline-size:100%;block-size:100%}.background-surface{background:var(--background)}.fill-surface{background:var(--track-background)}.fill-dot-end{fill:var(--thumb-background);transform:rotate(var(--_dot-angle));transform-box:view-box;transform-origin:var(--_dot-origin)}:host([thumb=\"dot\"]) .fill-dot-end{animation:gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:transform}.fill-layer[hidden],.fill-dot-end[hidden],.needle[hidden]{display:none}.needle{animation:gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);transform:rotate(var(--_needle-angle));transform-box:view-box;transform-origin:var(--_needle-origin);will-change:transform}.needle-line{stroke:var(--needle-background);stroke-linecap:round;stroke-width:var(--_needle-size)}.needle-hub{fill:var(--needle-background);r:var(--_needle-size)}slot{display:flex;flex-direction:column;place-items:center;justify-content:center;height:100%;gap:var(--gap);color:var(--color);font-size:var(--font-size);font-weight:var(--nve-ref-font-weight-medium);padding-block-start:calc(var(--track-width) * 2);text-box:trim-both cap alphabetic;line-height:1;width:50%;font-variant-numeric:tabular-nums}:host([shape=\"half\"]) slot{transform:translateY(1cqh)}:host([thumb=\"needle\"]) slot{transform:translateY(1cqh);justify-content:end}:host([shape=\"half\"][thumb=\"needle\"]) slot{transform:translateY(2cqh)}::slotted(*){color:var(--color);font-size:var(--font-size)}:host([status=\"success\"]){--accent-color: var(--nve-sys-support-success-emphasis-color);--background: var(--nve-sys-support-success-muted-color)}:host([status=\"warning\"]){--accent-color: var(--nve-sys-support-warning-emphasis-color);--background: var(--nve-sys-support-warning-muted-color)}:host([status=\"danger\"]){--accent-color: var(--nve-sys-support-danger-emphasis-color);--background: var(--nve-sys-support-danger-muted-color)}:host([status=\"accent\"]){--accent-color: var(--nve-sys-accent-secondary-background)}@media(prefers-reduced-motion:reduce){:host{--_animation-duration: 0s}}@keyframes gauge-dot-in{0%{transform:rotate(var(--_dot-start-angle))}to{transform:rotate(var(--_dot-angle))}}@keyframes gauge-needle-in{0%{transform:rotate(var(--_needle-start-angle))}to{transform:rotate(var(--_needle-angle))}}";
 //#endregion
 export { e as default };
 

package/dist/gauge/gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-text-emphasis-color);\n  --background: var(--nve-sys-interaction-background);\n  --needle-background: var(--nve-sys-interaction-color);\n  --accent-color: var(--nve-sys-interaction-color);\n  --thumb-background: var(--accent-color);\n  --track-background: var(--accent-color);\n  --track-width: 8px;\n  --font-size: var(--nve-ref-font-size-400);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --gap: var(--nve-ref-space-xs);\n  --width: 128px;\n  --height: calc(var(--width) * 0.8627);\n  --_animation-duration: var(--nve-ref-animation-duration-250);\n  --_needle-size: calc(var(--track-width) / 3);\n\n  display: inline-block;\n  position: relative;\n  width: var(--width);\n  height: var(--height);\n  font-weight: var(--font-weight);\n  container-type: inline-size;\n  contain: layout;\n  text-box: trim-both cap alphabetic;\n}\n\n.fill-dot-start,\n.fill-dot-end {\n  r: calc(var(--track-width) / 2.4);\n}\n\n:host([size='sm']) {\n  --font-size: var(--nve-ref-font-size-300);\n  --width: 96px;\n  --_needle-size: calc(var(--track-width) / 2.25);\n\n  .fill-dot-start,\n  .fill-dot-end {\n    r: calc(var(--track-width) / 1.8);\n  }\n}\n\n:host([size='lg']) {\n  --font-size: var(--nve-ref-font-size-500);\n  --width: 160px;\n  --_needle-size: calc(var(--track-width) / 3.75);\n\n  .fill-dot-start,\n  .fill-dot-end {\n    r: calc(var(--track-width) / 3);\n  }\n}\n\n[internal-host] {\n  display: grid;\n  place-items: center;\n  position: relative;\n  height: 100%;\n}\n\n:host([shape='half']) {\n  --height: calc(var(--width) * 0.5313);\n}\n\n:host([shape='half']) [internal-host] {\n  place-items: end center;\n}\n\nsvg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\npath {\n  fill: none;\n  stroke: white;\n  stroke-width: var(--track-width);\n  vector-effect: non-scaling-stroke;\n}\n\npath.background {\n  stroke-linecap: round;\n}\n\npath.gauge {\n  animation: gauge-progress-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  stroke-linecap: butt;\n  stroke-dasharray: var(--_dash-progress) var(--_dash-gap);\n  transition: stroke-dasharray var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: stroke-dasharray;\n}\n\n.background-surface,\n.fill-surface {\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.background-surface {\n  background: var(--background);\n}\n\n.fill-surface {\n  background: var(--track-background);\n}\n\n.fill-dot-start {\n  fill: var(--track-background);\n}\n\n.fill-dot-end {\n  animation: gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  fill: var(--thumb-background);\n  transform: rotate(var(--_dot-angle));\n  transform-box: view-box;\n  transform-origin: var(--_dot-origin);\n  transition: transform var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: transform;\n}\n\n.fill-layer[hidden],\n.fill-dot-start[hidden],\n.fill-dot-end[hidden],\n.needle[hidden] {\n  display: none;\n}\n\n.needle {\n  animation: gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  transform: rotate(var(--_needle-angle));\n  transform-box: view-box;\n  transform-origin: var(--_needle-origin);\n  transition: transform var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: transform;\n}\n\n.needle-line {\n  stroke: var(--needle-background);\n  stroke-linecap: round;\n  stroke-width: var(--_needle-size);\n}\n\n.needle-hub {\n  fill: var(--needle-background);\n  r: var(--_needle-size);\n}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  place-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: var(--gap);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--nve-ref-font-weight-medium);\n  padding-block-start: calc(var(--track-width) * 2);\n  text-box: trim-both cap alphabetic;\n  line-height: 1;\n  width: 50%;\n  font-variant-numeric: tabular-nums;\n}\n\n:host([shape='half']) slot {\n  transform: translateY(1cqh);\n}\n\n:host([thumb='needle']) slot {\n  transform: translateY(1cqh);\n  justify-content: end;\n}\n\n:host([shape='half'][thumb='needle']) slot {\n  transform: translateY(2cqh);\n}\n\n::slotted(*) {\n  color: var(--color);\n  font-size: var(--font-size);\n}\n\n:host([status='success']) {\n  --accent-color: var(--nve-sys-support-success-emphasis-color);\n  --background: var(--nve-sys-support-success-muted-color);\n}\n\n:host([status='warning']) {\n  --accent-color: var(--nve-sys-support-warning-emphasis-color);\n  --background: var(--nve-sys-support-warning-muted-color);\n}\n\n:host([status='danger']) {\n  --accent-color: var(--nve-sys-support-danger-emphasis-color);\n  --background: var(--nve-sys-support-danger-muted-color);\n}\n\n:host([status='accent']) {\n  --accent-color: var(--nve-sys-accent-secondary-background);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --_animation-duration: 0s;\n  }\n}\n\n@keyframes gauge-progress-in {\n  from {\n    stroke-dasharray: 0 var(--_dash-gap);\n  }\n\n  to {\n    stroke-dasharray: var(--_dash-progress) var(--_dash-gap);\n  }\n}\n\n@keyframes gauge-dot-in {\n  from {\n    transform: rotate(var(--_dot-start-angle));\n  }\n\n  to {\n    transform: rotate(var(--_dot-angle));\n  }\n}\n\n@keyframes gauge-needle-in {\n  from {\n    transform: rotate(var(--_needle-start-angle));\n  }\n\n  to {\n    transform: rotate(var(--_needle-angle));\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-text-emphasis-color);\n  --background: var(--nve-sys-interaction-background);\n  --needle-background: var(--nve-sys-interaction-color);\n  --accent-color: var(--nve-sys-interaction-color);\n  --thumb-background: var(--accent-color);\n  --track-background: var(--accent-color);\n  --track-width: 8px;\n  --font-size: var(--nve-ref-font-size-400);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --gap: var(--nve-ref-space-xs);\n  --width: 128px;\n  --height: calc(var(--width) * 0.8627);\n  --_animation-duration: var(--nve-ref-animation-duration-250);\n  --_needle-size: calc(var(--track-width) / 3);\n\n  display: inline-block;\n  position: relative;\n  width: var(--width);\n  height: var(--height);\n  font-weight: var(--font-weight);\n  container-type: inline-size;\n  contain: layout;\n  text-box: trim-both cap alphabetic;\n}\n\n.fill-dot-end {\n  r: calc(var(--track-width) / 3.2);\n}\n\n:host([size='sm']) {\n  --font-size: var(--nve-ref-font-size-300);\n  --width: 96px;\n  --_needle-size: calc(var(--track-width) / 2.25);\n\n  .fill-dot-end {\n    r: calc(var(--track-width) / 2.4);\n  }\n}\n\n:host([size='lg']) {\n  --font-size: var(--nve-ref-font-size-500);\n  --width: 160px;\n  --_needle-size: calc(var(--track-width) / 3.75);\n\n  .fill-dot-end {\n    r: calc(var(--track-width) / 4);\n  }\n}\n\n[internal-host] {\n  display: grid;\n  place-items: center;\n  position: relative;\n  height: 100%;\n}\n\n:host([shape='half']) {\n  --height: calc(var(--width) * 0.5313);\n}\n\n:host([shape='half']) [internal-host] {\n  place-items: end center;\n}\n\nsvg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\npath {\n  fill: none;\n  stroke: white;\n  stroke-width: var(--track-width);\n  vector-effect: non-scaling-stroke;\n}\n\npath.background {\n  stroke-linecap: round;\n}\n\npath.gauge {\n  stroke-linecap: round;\n}\n\n.background-surface,\n.fill-surface {\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.background-surface {\n  background: var(--background);\n}\n\n.fill-surface {\n  background: var(--track-background);\n}\n\n.fill-dot-end {\n  fill: var(--thumb-background);\n  transform: rotate(var(--_dot-angle));\n  transform-box: view-box;\n  transform-origin: var(--_dot-origin);\n}\n\n:host([thumb='dot']) .fill-dot-end {\n  animation: gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: transform;\n}\n\n.fill-layer[hidden],\n.fill-dot-end[hidden],\n.needle[hidden] {\n  display: none;\n}\n\n.needle {\n  animation: gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  transform: rotate(var(--_needle-angle));\n  transform-box: view-box;\n  transform-origin: var(--_needle-origin);\n  will-change: transform;\n}\n\n.needle-line {\n  stroke: var(--needle-background);\n  stroke-linecap: round;\n  stroke-width: var(--_needle-size);\n}\n\n.needle-hub {\n  fill: var(--needle-background);\n  r: var(--_needle-size);\n}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  place-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: var(--gap);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--nve-ref-font-weight-medium);\n  padding-block-start: calc(var(--track-width) * 2);\n  text-box: trim-both cap alphabetic;\n  line-height: 1;\n  width: 50%;\n  font-variant-numeric: tabular-nums;\n}\n\n:host([shape='half']) slot {\n  transform: translateY(1cqh);\n}\n\n:host([thumb='needle']) slot {\n  transform: translateY(1cqh);\n  justify-content: end;\n}\n\n:host([shape='half'][thumb='needle']) slot {\n  transform: translateY(2cqh);\n}\n\n::slotted(*) {\n  color: var(--color);\n  font-size: var(--font-size);\n}\n\n:host([status='success']) {\n  --accent-color: var(--nve-sys-support-success-emphasis-color);\n  --background: var(--nve-sys-support-success-muted-color);\n}\n\n:host([status='warning']) {\n  --accent-color: var(--nve-sys-support-warning-emphasis-color);\n  --background: var(--nve-sys-support-warning-muted-color);\n}\n\n:host([status='danger']) {\n  --accent-color: var(--nve-sys-support-danger-emphasis-color);\n  --background: var(--nve-sys-support-danger-muted-color);\n}\n\n:host([status='accent']) {\n  --accent-color: var(--nve-sys-accent-secondary-background);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --_animation-duration: 0s;\n  }\n}\n\n@keyframes gauge-dot-in {\n  from {\n    transform: rotate(var(--_dot-start-angle));\n  }\n\n  to {\n    transform: rotate(var(--_dot-angle));\n  }\n}\n\n@keyframes gauge-needle-in {\n  from {\n    transform: rotate(var(--_needle-start-angle));\n  }\n\n  to {\n    transform: rotate(var(--_needle-angle));\n  }\n}\n"],"mappings":""}