@nvidia-elements/core 2.4.1 → 2.5.1

package/dist/format-truncate/utils.js

@@ -0,0 +1,114 @@
+function e(e) {
+	return t(Array.from(e, (e) => e.textContent ?? "").join(" "));
+}
+function t(e) {
+	return e.replace(/\s+/gu, " ").trim();
+}
+function n(e, { position: t, strategy: n, bias: o, preserve: s, availableWidth: c, measureText: u }) {
+	if (!e || !Number.isFinite(c)) return e;
+	if (c <= 0) return "";
+	if (u(e) <= c) return e;
+	if (u("…") > c) return "…";
+	switch (t) {
+		case "start": return i(l(e, "grapheme"), c, u);
+		case "center": return r(e, {
+			strategy: n,
+			bias: o,
+			preserve: s,
+			availableWidth: c,
+			measureText: u
+		});
+		default: return a(l(e, "grapheme"), c, u);
+	}
+}
+function r(e, { strategy: t, bias: n, preserve: r, availableWidth: l, measureText: u }) {
+	let d = h(e, t, n), f = Math.min(d.length, c(r));
+	if (n === "start") {
+		let e = d.slice(0, f), t = d.slice(f), n = (n) => s(e.join(""), t.slice(-n || t.length).join(""));
+		return u(n(0)) > l ? a(e, l, u) : n(o(t.length, n, {
+			availableWidth: l,
+			measureText: u
+		}));
+	}
+	let p = d.slice(0, d.length - f), m = d.slice(d.length - f), g = (e) => s(p.slice(0, e).join(""), m.join(""));
+	return u(g(0)) > l ? i(m, l, u) : g(o(p.length, g, {
+		availableWidth: l,
+		measureText: u
+	}));
+}
+function i(e, t, n) {
+	let r = (t) => `…${e.slice(-t || e.length).join("")}`;
+	return r(o(e.length - 1, r, {
+		availableWidth: t,
+		measureText: n
+	}));
+}
+function a(e, t, n) {
+	let r = (t) => `${e.slice(0, t).join("")}…`;
+	return r(o(e.length - 1, r, {
+		availableWidth: t,
+		measureText: n
+	}));
+}
+function o(e, t, { availableWidth: n, measureText: r }) {
+	let i = 0, a = e, o = 0;
+	for (; i <= a;) {
+		let e = Math.floor((i + a) / 2);
+		r(t(e)) <= n ? (o = e, i = e + 1) : a = e - 1;
+	}
+	return o;
+}
+function s(e, t) {
+	return `${e.trimEnd()}…${t.trimStart()}`;
+}
+function c(e) {
+	return Number.isFinite(e) ? Math.max(1, Math.floor(e)) : 1;
+}
+function l(e, t) {
+	let n = new Intl.Segmenter(void 0, { granularity: t }).segment(e);
+	return Array.from(n, (e) => e.segment);
+}
+function u(e, t) {
+	return t === "start" ? d(e) : f(e);
+}
+function d(e) {
+	let t = [];
+	for (let n of e) n.trim() ? t.push(n) : p(t, n);
+	return t;
+}
+function f(e) {
+	let t = [], n = "";
+	for (let r of e) r.trim() ? (t.push(n + r), n = "") : n += r;
+	return p(t, n), t;
+}
+function p(e, t) {
+	let n = e.at(-1);
+	n !== void 0 && (e[e.length - 1] = n + t);
+}
+function m(e, t) {
+	let n = Array.from(e.matchAll(/[^/\\]+/gu));
+	return n.length === 0 ? [e] : t === "start" ? n.map((t, r) => {
+		let i = r === 0 ? 0 : t.index, a = n[r + 1]?.index ?? e.length;
+		return e.slice(i, a);
+	}) : n.map((t, r) => {
+		let i = n[r - 1], a = i ? i.index + i[0].length : 0, o = r === n.length - 1 ? e.length : t.index + t[0].length;
+		return e.slice(a, o);
+	});
+}
+function h(e, t, n) {
+	switch (t) {
+		case "word": {
+			let t = u(l(e, "word"), n);
+			return t.length ? t : [e];
+		}
+		case "path": {
+			let t = m(e, n);
+			return t.length ? t : [e];
+		}
+		default: return l(e, "grapheme");
+	}
+}
+//#endregion
+export { t as normalizeTruncateString, e as normalizeTruncateText, n as truncateText };
+
+//# sourceMappingURL=utils.js.map

package/dist/format-truncate/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/format-truncate/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nconst ELLIPSIS = '…';\n\ntype TruncatePosition = 'start' | 'center' | 'end';\ntype TruncateStrategy = 'character' | 'word' | 'path';\ntype TruncateBias = 'start' | 'end';\n\nexport function normalizeTruncateText(nodes: Iterable<Node>): string {\n  return normalizeTruncateString(Array.from(nodes, node => node.textContent ?? '').join(' '));\n}\n\nexport function normalizeTruncateString(text: string): string {\n  return text.replace(/\\s+/gu, ' ').trim();\n}\n\nexport function truncateText(\n  text: string,\n  {\n    position,\n    strategy,\n    bias,\n    preserve,\n    availableWidth,\n    measureText\n  }: {\n    position: TruncatePosition;\n    strategy: TruncateStrategy;\n    bias: TruncateBias;\n    preserve: number;\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): string {\n  if (!text || !Number.isFinite(availableWidth)) return text;\n  if (availableWidth <= 0) return '';\n  if (measureText(text) <= availableWidth) return text;\n  if (measureText(ELLIPSIS) > availableWidth) return ELLIPSIS;\n\n  switch (position) {\n    case 'start':\n      return truncateStart(segmentText(text, 'grapheme'), availableWidth, measureText);\n    case 'center':\n      return truncateMiddle(text, { strategy, bias, preserve, availableWidth, measureText });\n    case 'end':\n    default:\n      return truncateEnd(segmentText(text, 'grapheme'), availableWidth, measureText);\n  }\n}\n\nfunction truncateMiddle(\n  text: string,\n  {\n    strategy,\n    bias,\n    preserve,\n    availableWidth,\n    measureText\n  }: {\n    strategy: TruncateStrategy;\n    bias: TruncateBias;\n    preserve: number;\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): string {\n  const units = getUnits(text, strategy, bias);\n  const preserveCount = Math.min(units.length, normalizePreserve(preserve));\n\n  if (bias === 'start') {\n    const preservedUnits = units.slice(0, preserveCount);\n    const truncatableUnits = units.slice(preserveCount);\n    const candidate = (count: number) =>\n      joinWithEllipsis(preservedUnits.join(''), truncatableUnits.slice(-count || truncatableUnits.length).join(''));\n\n    if (measureText(candidate(0)) > availableWidth) {\n      return truncateEnd(preservedUnits, availableWidth, measureText);\n    }\n\n    return candidate(findLargestFittingCount(truncatableUnits.length, candidate, { availableWidth, measureText }));\n  }\n\n  const truncatableUnits = units.slice(0, units.length - preserveCount);\n  const preservedUnits = units.slice(units.length - preserveCount);\n  const candidate = (count: number) =>\n    joinWithEllipsis(truncatableUnits.slice(0, count).join(''), preservedUnits.join(''));\n\n  if (measureText(candidate(0)) > availableWidth) {\n    return truncateStart(preservedUnits, availableWidth, measureText);\n  }\n\n  return candidate(findLargestFittingCount(truncatableUnits.length, candidate, { availableWidth, measureText }));\n}\n\nfunction truncateStart(units: string[], availableWidth: number, measureText: (value: string) => number): string {\n  const candidate = (count: number) => `${ELLIPSIS}${units.slice(-count || units.length).join('')}`;\n  return candidate(findLargestFittingCount(units.length - 1, candidate, { availableWidth, measureText }));\n}\n\nfunction truncateEnd(units: string[], availableWidth: number, measureText: (value: string) => number): string {\n  const candidate = (count: number) => `${units.slice(0, count).join('')}${ELLIPSIS}`;\n  return candidate(findLargestFittingCount(units.length - 1, candidate, { availableWidth, measureText }));\n}\n\nfunction findLargestFittingCount(\n  maximum: number,\n  candidate: (count: number) => string,\n  {\n    availableWidth,\n    measureText\n  }: {\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): number {\n  let lower = 0;\n  let upper = maximum;\n  let fitting = 0;\n\n  while (lower <= upper) {\n    const count = Math.floor((lower + upper) / 2);\n\n    if (measureText(candidate(count)) <= availableWidth) {\n      fitting = count;\n      lower = count + 1;\n    } else {\n      upper = count - 1;\n    }\n  }\n\n  return fitting;\n}\n\nfunction joinWithEllipsis(start: string, end: string): string {\n  return `${start.trimEnd()}${ELLIPSIS}${end.trimStart()}`;\n}\n\nfunction normalizePreserve(value: number): number {\n  return Number.isFinite(value) ? Math.max(1, Math.floor(value)) : 1;\n}\n\nfunction segmentText(text: string, granularity: 'grapheme' | 'word'): string[] {\n  const segments = new Intl.Segmenter(undefined, { granularity }).segment(text);\n  return Array.from(segments, segment => segment.segment);\n}\n\nfunction mergeWhitespace(segments: string[], bias: TruncateBias): string[] {\n  return bias === 'start' ? mergeFollowingWhitespace(segments) : mergePrecedingWhitespace(segments);\n}\n\nfunction mergeFollowingWhitespace(segments: string[]): string[] {\n  const units: string[] = [];\n\n  for (const segment of segments) {\n    if (segment.trim()) units.push(segment);\n    else appendToLastUnit(units, segment);\n  }\n\n  return units;\n}\n\nfunction mergePrecedingWhitespace(segments: string[]): string[] {\n  const units: string[] = [];\n  let whitespace = '';\n\n  for (const segment of segments) {\n    if (segment.trim()) {\n      units.push(whitespace + segment);\n      whitespace = '';\n    } else {\n      whitespace += segment;\n    }\n  }\n\n  appendToLastUnit(units, whitespace);\n\n  return units;\n}\n\nfunction appendToLastUnit(units: string[], text: string): void {\n  const previous = units.at(-1);\n  if (previous !== undefined) units[units.length - 1] = previous + text;\n}\n\nfunction splitPathUnits(text: string, bias: TruncateBias): string[] {\n  const pathSegments = Array.from(text.matchAll(/[^/\\\\]+/gu));\n  if (pathSegments.length === 0) return [text];\n\n  if (bias === 'start') {\n    return pathSegments.map((segment, index) => {\n      const start = index === 0 ? 0 : segment.index;\n      const end = pathSegments[index + 1]?.index ?? text.length;\n      return text.slice(start, end);\n    });\n  }\n\n  return pathSegments.map((segment, index) => {\n    const previous = pathSegments[index - 1];\n    const start = previous ? previous.index + previous[0].length : 0;\n    const end = index === pathSegments.length - 1 ? text.length : segment.index + segment[0].length;\n    return text.slice(start, end);\n  });\n}\n\nfunction getUnits(text: string, strategy: TruncateStrategy, bias: TruncateBias): string[] {\n  switch (strategy) {\n    case 'word': {\n      const units = mergeWhitespace(segmentText(text, 'word'), bias);\n      return units.length ? units : [text];\n    }\n    case 'path': {\n      const units = splitPathUnits(text, bias);\n      return units.length ? units : [text];\n    }\n    case 'character':\n    default:\n      return segmentText(text, 'grapheme');\n  }\n}\n"],"mappings":"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"}

package/dist/forms/control/control2.js

@@ -48,7 +48,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.4.1"
+			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.4.1"
+			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.4.1"
+			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":""}

package/dist/gauge/gauge2.js

@@ -7,15 +7,11 @@ import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
 import { styleMap as c } from "lit/directives/style-map.js";
 //#region src/gauge/gauge.ts
-var l = 200, u = 100 / 110.93, d = {
+var l = {
 	default: {
 		center: 64,
 		path: "M 27.23 100.77 A 52 52 0 1 1 100.77 100.77",
 		radius: 52,
-		start: {
-			x: 27.23,
-			y: 100.77
-		},
 		startAngle: 135,
 		sweepAngle: 270,
 		surfaceHeight: 128,
@@ -25,26 +21,18 @@ var l = 200, u = 100 / 110.93, d = {
 		center: 64,
 		path: "M 12 64 A 52 52 0 0 1 116 64",
 		radius: 52,
-		start: {
-			x: 12,
-			y: 64
-		},
 		startAngle: 180,
 		sweepAngle: 180,
 		surfaceHeight: 64,
 		viewBox: "8.53 8.53 110.93 58.93"
 	}
-}, f = (e) => ({
-	"--_progress": e,
-	"--_dash-progress": `${e * u}cqw`,
-	"--_dash-gap": `${l * u}cqw`
-}), p = (e, t, n) => ({
+}, u = (e, t, n) => ({
 	[`--_${e}-angle`]: `${t}deg`,
 	[`--_${e}-origin`]: `${n.center}px ${n.center}px`,
 	[`--_${e}-start-angle`]: `${n.startAngle}deg`
-}), m = class extends a {
+}), d = class extends a {
 	constructor(...t) {
-		super(...t), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new e(this), this.i18n = this.#e.i18n;
+		super(...t), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new e(this), this.i18n = this.#e.i18n, this.#t = 0, this.#r = 0;
 	}
 	static {
 		this.styles = n([i]);
@@ -52,11 +40,14 @@ var l = 200, u = 100 / 110.93, d = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	#e;
-	#t() {
+	#t;
+	#n;
+	#r;
+	#i() {
 		let e = this.max, t = e !== void 0 && Number.isFinite(e) && e > 0 ? e : 100;
 		return {
 			value: Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), t) : 0,
@@ -64,43 +55,89 @@ var l = 200, u = 100 / 110.93, d = {
 		};
 	}
 	render() {
-		let e = this.#r(), { value: t, max: n } = this.#t(), r = t / n * 100, i = this.#i(), a = this.#n(e, r), s = i === "fill", u = r > 0 && (i === "fill" || i === "dot");
-		return o`<div internal-host><svg viewBox="${e.viewBox}" role="presentation" aria-hidden="true"><defs><mask id="background-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path pathLength="100" d="${e.path}" class="background"></path></mask><mask id="fill-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path pathLength="100" d="${e.path}" class="gauge" ?empty="${r <= 0}" style="${c(f(r))}" stroke-dasharray="${`${r} ${l}`}"></path></mask></defs><foreignObject width="128" height="${e.surfaceHeight}" mask="url(#background-mask)"><div xmlns="http://www.w3.org/1999/xhtml" class="background-surface"></div></foreignObject><foreignObject class="fill-layer" width="128" height="${e.surfaceHeight}" mask="url(#fill-mask)" ?hidden="${!s}"><div xmlns="http://www.w3.org/1999/xhtml" class="fill-surface"></div></foreignObject><circle class="fill-dot-start" cx="${e.start.x}" cy="${e.start.y}" ?hidden="${!(s && r > 0)}"></circle><circle class="fill-dot-end" cx="${e.center + e.radius}" cy="${e.center}" ?hidden="${!u}" style="${c(p("dot", a, e))}"></circle><g class="needle" ?hidden="${i !== "needle"}" style="${c(p("needle", a, e))}"><line class="needle-line" x1="${e.center}" y1="${e.center}" x2="${e.center + 40}" y2="${e.center}"></line><circle class="needle-hub" cx="${e.center}" cy="${e.center}"></circle></g></svg><slot></slot></div>`;
+		let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), i = this.#u(e, t), a = n === "fill", s = t > 0 && (n === "fill" || n === "dot");
+		return o`<div internal-host><svg viewBox="${e.viewBox}" role="presentation" aria-hidden="true"><defs><mask id="background-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${e.path}" class="background"></path></mask><mask id="fill-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${i}" class="gauge" ?empty="${t <= 0}"></path></mask></defs><foreignObject width="128" height="${e.surfaceHeight}" mask="url(#background-mask)"><div xmlns="http://www.w3.org/1999/xhtml" class="background-surface"></div></foreignObject><foreignObject class="fill-layer" width="128" height="${e.surfaceHeight}" mask="url(#fill-mask)" ?hidden="${!a || t <= 0}"><div xmlns="http://www.w3.org/1999/xhtml" class="fill-surface"></div></foreignObject><circle class="fill-dot-end" cx="${e.center + e.radius}" cy="${e.center}" ?hidden="${!s}" style="${c(u("dot", r, e))}"></circle><g class="needle" ?hidden="${n !== "needle"}" style="${c(u("needle", r, e))}"><line class="needle-line" x1="${e.center}" y1="${e.center}" x2="${e.center + 40}" y2="${e.center}"></line><circle class="needle-hub" cx="${e.center}" cy="${e.center}"></circle></g></svg><slot></slot></div>`;
 	}
 	connectedCallback() {
 		super.connectedCallback(), t(this), this._internals.role = "progressbar";
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#n && (this.#s(), this.#t = this.#a(), this.requestUpdate());
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("value") || e.has("max")) && this.#o();
+	}
 	updated(e) {
 		super.updated(e);
-		let { value: t, max: n } = this.#t();
+		let { value: t, max: n } = this.#i();
 		this._internals.ariaValueNow = `${t}`, this._internals.ariaValueMax = `${n}`;
 		let { status: r } = this, i = r !== void 0 && r !== "neutral" && r !== "accent" ? this.i18n[r] : void 0;
 		this._internals.ariaLabel = i ?? this.i18n.information ?? null;
 	}
-	#n(e, t) {
+	#a() {
+		let { value: e, max: t } = this.#i();
+		return e / t * 100;
+	}
+	#o() {
+		let e = this.#a(), t = this.hasUpdated ? this.#c() : void 0;
+		if (this.#s(), !t || e === this.#t) {
+			this.#t = e;
+			return;
+		}
+		let n = this.#t, r = this.animate(null, t), i = (t) => {
+			this.#t = n + (e - n) * t, this.requestUpdate();
+		}, a = () => {
+			i(r.effect?.getComputedTiming().progress ?? 0), r.playState === "running" && (this.#r = requestAnimationFrame(a));
+		};
+		r.finished.then(() => {
+			this.#n === r && (this.#s(), i(1));
+		}, () => void 0), this.#n = r, this.#r = requestAnimationFrame(a);
+	}
+	#s() {
+		this.#n &&= (cancelAnimationFrame(this.#r), this.#n.cancel(), void 0);
+	}
+	#c() {
+		let e = getComputedStyle(this), t = e.getPropertyValue("--_animation-duration").trim(), n = parseFloat(t) * (t.endsWith("ms") ? 1 : 1e3), r = e.getPropertyValue("--nve-ref-animation-easing-100").trim();
+		return n > 0 ? {
+			duration: n,
+			easing: r || "linear"
+		} : void 0;
+	}
+	#l(e, t) {
 		return e.startAngle + e.sweepAngle * (t / 100);
 	}
-	#r() {
-		return this.shape === "half" ? d.half : d.default;
+	#u(e, t) {
+		let n = this.#d(e, e.startAngle), r = e.sweepAngle * (t / 100), i = this.#d(e, e.startAngle + r), a = +(r > 180);
+		return `M ${n.x} ${n.y} A ${e.radius} ${e.radius} 0 ${a} 1 ${i.x} ${i.y}`;
 	}
-	#i() {
+	#d(e, t) {
+		let n = t * Math.PI / 180;
+		return {
+			x: e.center + e.radius * Math.cos(n),
+			y: e.center + e.radius * Math.sin(n)
+		};
+	}
+	#f() {
+		return this.shape === "half" ? l.half : l.default;
+	}
+	#p() {
 		return this.thumb === "dot" || this.thumb === "needle" ? this.thumb : "fill";
 	}
 };
-r([s({ type: Number })], m.prototype, "value", void 0), r([s({ type: Number })], m.prototype, "max", void 0), r([s({
+r([s({ type: Number })], d.prototype, "value", void 0), r([s({ type: Number })], d.prototype, "max", void 0), r([s({
 	type: String,
 	reflect: !0
-})], m.prototype, "status", void 0), r([s({
+})], d.prototype, "status", void 0), r([s({
 	type: String,
 	reflect: !0
-})], m.prototype, "shape", void 0), r([s({
+})], d.prototype, "shape", void 0), r([s({
 	type: String,
 	reflect: !0
-})], m.prototype, "thumb", void 0), r([s({
+})], d.prototype, "thumb", void 0), r([s({
 	type: String,
 	reflect: !0
-})], m.prototype, "size", void 0), r([s({ type: Object })], m.prototype, "i18n", void 0);
+})], d.prototype, "size", void 0), r([s({ type: Object })], d.prototype, "i18n", void 0);
 //#endregion
-export { m as Gauge };
+export { d as Gauge };
 
 //# sourceMappingURL=gauge2.js.map

package/dist/gauge/gauge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge2.js","names":["#i18nController","#geometry","#normalizedValues","#normalizedThumb","#angleAtProgress"],"sources":["../../src/gauge/gauge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, I18nController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_DASH_GAP = 200;\nconst GAUGE_DASH_SCALE = 100 / 110.93;\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    start: { x: 27.23, y: 100.77 },\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    start: { x: 12, y: 64 },\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst fillMaskStyle = (progress: number) => ({\n  '--_progress': progress,\n  '--_dash-progress': `${progress * GAUGE_DASH_SCALE}cqw`,\n  '--_dash-gap': `${GAUGE_DASH_GAP * GAUGE_DASH_SCALE}cqw`\n});\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const { value, max } = this.#normalizedValues();\n    const progress = (value / max) * 100;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path pathLength=\"100\" d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path pathLength=\"100\" d=${geometry.path} class=\"gauge\"\n                ?empty=${progress <= 0}\n                style=${styleMap(fillMaskStyle(progress))}\n                stroke-dasharray=${`${progress} ${GAUGE_DASH_GAP}`}>\n              </path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\" ?hidden=${!showFill}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-start\" cx=${geometry.start.x} cy=${geometry.start.y} ?hidden=${!(showFill && progress > 0)}></circle>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"gauge2.js","names":["#i18nController","#geometry","#paintedProgress","#normalizedThumb","#angleAtProgress","#pathAtProgress","#progressAnimation","#stopProgressAnimation","#targetProgress","#animateProgress","#normalizedValues","#animationTiming","#progressFrame","#pointAtAngle"],"sources":["../../src/gauge/gauge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, I18nController, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n  #paintedProgress = 0;\n\n  #progressAnimation?: Animation;\n\n  #progressFrame = 0;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const progress = this.#paintedProgress;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const fillPath = this.#pathAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n            ?hidden=${!showFill || progress <= 0}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // settle the value, otherwise reattaching paints the frame the animation was cancelled on\n    if (this.#progressAnimation) {\n      this.#stopProgressAnimation();\n      this.#paintedProgress = this.#targetProgress();\n      this.requestUpdate();\n    }\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    super.willUpdate(props);\n\n    if (props.has('value') || props.has('max')) {\n      this.#animateProgress();\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #targetProgress() {\n    const { value, max } = this.#normalizedValues();\n    return (value / max) * 100;\n  }\n\n  /**\n   * Eases the painted progress toward the value with the duration and easing declared in css, so\n   * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n   */\n  #animateProgress() {\n    const target = this.#targetProgress();\n    const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n    this.#stopProgressAnimation();\n\n    if (!timing || target === this.#paintedProgress) {\n      this.#paintedProgress = target;\n      return;\n    }\n\n    const from = this.#paintedProgress;\n    // keyframeless animations only keep time, leaving every painted frame to `render`\n    const animation = this.animate(null, timing);\n    const paint = (progress: number) => {\n      this.#paintedProgress = from + (target - from) * progress;\n      this.requestUpdate();\n    };\n    const paintFrame = () => {\n      paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n      if (animation.playState === 'running') {\n        this.#progressFrame = requestAnimationFrame(paintFrame);\n      }\n    };\n\n    animation.finished.then(\n      () => {\n        // a value that changes on the frame this settles already started the next animation\n        if (this.#progressAnimation === animation) {\n          this.#stopProgressAnimation();\n          paint(1);\n        }\n      },\n      () => undefined\n    );\n\n    this.#progressAnimation = animation;\n    this.#progressFrame = requestAnimationFrame(paintFrame);\n  }\n\n  #stopProgressAnimation() {\n    // only a browser render starts an animation, so server rendering never reaches these apis\n    if (this.#progressAnimation) {\n      cancelAnimationFrame(this.#progressFrame);\n      this.#progressAnimation.cancel();\n      this.#progressAnimation = undefined;\n    }\n  }\n\n  #animationTiming() {\n    const gaugeStyles = getComputedStyle(this);\n    const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n    const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n    const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n    return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n    const start = this.#pointAtAngle(geometry, geometry.startAngle);\n    const sweepAngle = geometry.sweepAngle * (progress / 100);\n    const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n    const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n    return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n  }\n\n  #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n    const radians = (angle * Math.PI) / 180;\n    return {\n      x: geometry.center + geometry.radius * Math.cos(radians),\n      y: geometry.center + geometry.radius * Math.sin(radians)\n    };\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":"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"}

package/dist/grid/cell/cell2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	render() {

package/dist/grid/column/column2.js

@@ -13,7 +13,7 @@ var c = class r extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	get #e() {

package/dist/grid/footer/footer2.js

@@ -15,7 +15,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-footer",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	static {

package/dist/grid/grid2.js

@@ -23,7 +23,7 @@ var y = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "2.4.1",
+			version: "2.5.1",
 			children: [
 				d.metadata.tag,
 				f.metadata.tag,

package/dist/grid/header/header2.js

@@ -19,7 +19,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-grid-header",
-			version: "2.4.1",
+			version: "2.5.1",
 			children: [c.metadata.tag]
 		};
 	}

package/dist/grid/placeholder/placeholder2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-placeholder",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	render() {

package/dist/grid/row/row2.js

@@ -15,7 +15,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-grid-row",
-			version: "2.4.1",
+			version: "2.5.1",
 			children: [a.metadata.tag]
 		};
 	}