@nvidia-elements/core 2.5.3 → 2.6.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.3"
+			version: "2.6.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.3",
+			version: "2.6.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.3"
+			version: "2.6.1"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.5.3",
+			version: "2.6.1",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.5.3",
+			version: "2.6.1",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.5.3",
+			version: "2.6.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.3"
+			version: "2.6.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.3",
+			version: "2.6.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.3",
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.1"
 		};
 	}
 	static {

package/dist/custom-elements-jsx.d.ts

@@ -2051,6 +2051,9 @@ export type IconProps = {
   size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
   /** Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) */
   direction?: "up" | "down" | "left" | "right" | undefined;
+  /** Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to
+the outline form when that asset is unavailable. */
+  appearance?: "outline" | "solid" | undefined;
   /** The name of the icon SVG sprite to render. */
   name?:
     | "placeholder"

package/dist/custom-elements-vue.d.ts

@@ -1920,6 +1920,9 @@ type IconProps = {
   size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
   /** Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) */
   direction?: "up" | "down" | "left" | "right" | undefined;
+  /** Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to
+the outline form when that asset is unavailable. */
+  appearance?: "outline" | "solid" | undefined;
   /** The name of the icon SVG sprite to render. */
   name?:
     | "placeholder"

package/dist/custom-elements.json

@@ -21639,6 +21639,26 @@
               "attribute": "direction",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "'outline' | 'solid' | undefined",
+                "_sourceAliases": [],
+                "values": [
+                  {
+                    "value": "outline",
+                    "description": ""
+                  },
+                  {
+                    "value": "solid",
+                    "description": ""
+                  }
+                ]
+              },
+              "description": "Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to\nthe outline form when that asset is unavailable.",
+              "attribute": "appearance"
+            },
             {
               "kind": "field",
               "name": "name",
@@ -22845,6 +22865,25 @@
               "description": "Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions)",
               "fieldName": "direction"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "'outline' | 'solid' | undefined",
+                "_sourceAliases": [],
+                "values": [
+                  {
+                    "value": "outline",
+                    "description": ""
+                  },
+                  {
+                    "value": "solid",
+                    "description": ""
+                  }
+                ]
+              },
+              "description": "Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to\nthe outline form when that asset is unavailable.",
+              "fieldName": "appearance"
+            },
             {
               "name": "name",
               "type": {
@@ -23981,7 +24020,7 @@
             "documentation": "https://nvidia.github.io/elements/docs/elements/icon/",
             "status": "stable",
             "behavior": "content",
-            "markdown": "## nve-icon\n\nAn icon is a graphic symbol designed to visually show the purpose of an interface element.\n\n### Example\n\n```html\n<nve-icon name=\"person\"></nve-icon>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/icon/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Custom SVG content to override the named icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'danger' \\| 'success' \\| 'accent' \\| undefined` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. - `accent` Highlights important actions or draws attention to primary interactive elements. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| 'xs' \\| 'xl' \\| undefined` | Controls the bounding box size of the icon given a t-shirt style value. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |\n| direction | `'up' \\| 'down' \\| 'left' \\| 'right' \\| undefined` | Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) |\n| name | `placeholder` \\| `caret` \\| `person` \\| `menu` \\| `cancel` \\| `gear` \\| `chevron` \\| `logout` \\| `copy` \\| `more-actions` \\| `add` \\| `arrow` \\| `delete` \\| `download` \\| `search` \\| `split-vertical` \\| `sparkles` \\| `branch` \\| `refresh` \\| `double-chevron` ... (use `icons_list` tool for full list) | The name of the icon SVG sprite to render. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |"
+            "markdown": "## nve-icon\n\nAn icon is a graphic symbol designed to visually show the purpose of an interface element.\n\n### Example\n\n```html\n<nve-icon name=\"person\"></nve-icon>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/icon/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Custom SVG content to override the named icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'danger' \\| 'success' \\| 'accent' \\| undefined` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. - `accent` Highlights important actions or draws attention to primary interactive elements. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| 'xs' \\| 'xl' \\| undefined` | Controls the bounding box size of the icon given a t-shirt style value. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |\n| direction | `'up' \\| 'down' \\| 'left' \\| 'right' \\| undefined` | Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) |\n| appearance | `'outline' \\| 'solid' \\| undefined` | Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to the outline form when that asset is unavailable. |\n| name | `placeholder` \\| `caret` \\| `person` \\| `menu` \\| `cancel` \\| `gear` \\| `chevron` \\| `logout` \\| `copy` \\| `more-actions` \\| `add` \\| `arrow` \\| `delete` \\| `download` \\| `search` \\| `split-vertical` \\| `sparkles` \\| `branch` \\| `refresh` \\| `double-chevron` ... (use `icons_list` tool for full list) | The name of the icon SVG sprite to render. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |"
           }
         },
         {

package/dist/data.html.json

@@ -2759,6 +2759,11 @@
             { "name": "right" }
           ]
         },
+        {
+          "name": "appearance",
+          "description": "Selects the outline or solid form of the named icon. Solid icons use an optional `-solid` asset and fall back to\nthe outline form when that asset is unavailable.",
+          "values": [{ "name": "outline" }, { "name": "solid" }]
+        },
         {
           "name": "name",
           "description": "The name of the icon SVG sprite to render.",

package/dist/date/date2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-date",
-			version: "2.5.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3",
+			version: "2.6.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.3",
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3",
+			version: "2.6.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.3",
+			version: "2.6.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.3",
+			version: "2.6.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.3"
+			version: "2.6.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.3",
+			version: "2.6.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.3",
+			version: "2.6.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.3"
+			version: "2.6.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.3",
+			version: "2.6.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.3",
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.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.3"
+			version: "2.6.1"
 		};
 	}
 	static {

package/dist/gauge/gauge2.js

@@ -40,7 +40,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.5.3"
+			version: "2.6.1"
 		};
 	}
 	#e;

package/dist/gauge/gauge2.js.map

@@ -1 +1 @@
-{"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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"}
+{"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 where the animation stopped\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.5.3"
+			version: "2.6.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.5.3"
+			version: "2.6.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.5.3"
+			version: "2.6.1"
 		};
 	}
 	static {

package/dist/grid/grid2.js

@@ -23,7 +23,7 @@ var y = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "2.5.3",
+			version: "2.6.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.5.3",
+			version: "2.6.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.5.3"
+			version: "2.6.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.5.3",
+			version: "2.6.1",
 			children: [a.metadata.tag]
 		};
 	}