@nvidia-elements/core 0.0.11 → 0.1.0

package/dist/data.html.json

@@ -389,7 +389,7 @@
     },
     {
       "name": "nve-button-group",
-      "description": "A button group is a control that enables users to choose between two or more distinct mutually exclusive options.\n---\n\n\n### **Slots:**\n - _default_ - default slot for `nve-button` or `nve-icon-button`\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_",
+      "description": "A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n---\n\n\n### **Slots:**\n - _default_ - default slot for `nve-button` or `nve-icon-button`\n\n### **CSS Properties:**\n - **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--gap** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_",
       "attributes": [
         {
           "name": "behavior-select",
@@ -437,7 +437,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-button-group\n\nA button group is a control that enables users to choose between two or more distinct mutually exclusive options.\n\n### Example\n\n```html\n<nve-button-group>\n  <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/button-group/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-button` or `nve-icon-button` |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorSelect (behavior-select) | `'single' \\| 'multi'` | By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. |\n| container | `'flat' \\| 'rounded' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| orientation | `'horizontal' \\| 'vertical' \\| \"default\"` | Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. |\n| interaction | `'emphasis' \\| 'destructive'` | The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"default\"` | Controls the visual scale of an element to match its importance and available space. - `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\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |"
+          "url": "## nve-button-group\n\nA button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n\n### Example\n\n```html\n<nve-button-group>\n  <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n  <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n  <nve-icon-button icon-name=\"download\"></nve-icon-button>\n</nve-button-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/button-group/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for `nve-button` or `nve-icon-button` |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| behaviorSelect (behavior-select) | `'single' \\| 'multi'` | By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. |\n| container | `'flat' \\| 'rounded' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| orientation | `'horizontal' \\| 'vertical' \\| \"default\"` | Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. |\n| interaction | `'emphasis' \\| 'destructive'` | The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"default\"` | Controls the visual scale of an element to match its importance and available space. - `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\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |"
         }
       ]
     },
@@ -1775,6 +1775,124 @@
       ],
       "references": []
     },
+    {
+      "name": "nve-format-number",
+      "description": "A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.\nProvide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.\n---\n\n\n### **Slots:**\n - _default_ - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.",
+      "attributes": [
+        {
+          "name": "number",
+          "description": "Optional numeric string for values supplied by JavaScript or bound data.\nBy default, the component formats the element's text content, which also serves as the SSR fallback.\nWhen both are present, this property takes precedence.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "locale",
+          "description": "Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "format-style",
+          "description": "Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'.",
+          "values": [
+            { "name": "decimal" },
+            { "name": "currency" },
+            { "name": "percent" },
+            { "name": "unit" }
+          ]
+        },
+        {
+          "name": "currency",
+          "description": "ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "currency-sign",
+          "description": "Currency sign style: 'standard' | 'accounting'.",
+          "values": [
+            { "name": "standard" },
+            { "name": "accounting" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "currency-display",
+          "description": "Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'.",
+          "values": [
+            { "name": "symbol" },
+            { "name": "code" },
+            { "name": "name" },
+            { "name": "narrowSymbol" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "unit",
+          "description": "Unit identifier (such as kilometer or byte). Required when formatStyle is unit.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "unit-display",
+          "description": "Unit display style: 'short' | 'long' | 'narrow'.",
+          "values": [
+            { "name": "short" },
+            { "name": "long" },
+            { "name": "narrow" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "notation",
+          "description": "Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'.",
+          "values": [
+            { "name": "standard" },
+            { "name": "scientific" },
+            { "name": "engineering" },
+            { "name": "compact" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "compact-display",
+          "description": "Compact notation display: 'short' | 'long'. Only applies when notation is compact.",
+          "values": [
+            { "name": "short" },
+            { "name": "long" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "sign-display",
+          "description": "Sign display: 'auto' | 'never' | 'always' | 'exceptZero'.",
+          "values": [
+            { "name": "auto" },
+            { "name": "never" },
+            { "name": "always" },
+            { "name": "exceptZero" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "use-grouping",
+          "description": "Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "minimum-fraction-digits",
+          "description": "Pad fraction output to at least this many digits (0-20).",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "maximum-fraction-digits",
+          "description": "Round fraction output to at most this many digits (0-20).",
+          "values": [{ "name": "default" }]
+        },
+        {
+          "name": "minimum-integer-digits",
+          "description": "Pad integer output to at least this many digits (1-21).",
+          "values": [{ "name": "default" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "nve-format-relative-time",
       "description": "Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.\nOptions mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.\n---\n\n\n### **Slots:**\n - _default_ - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.",
@@ -3023,7 +3141,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-logo\n\nA visual indicator for a brand or application.\n\n### Example\n\n```html\n<nve-logo aria-label=\"NVIDIA\"></nve-logo>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/logo/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| color | `'red-cardinal' \\| 'gray-slate' \\| 'gray-denim' \\| 'blue-indigo' \\| 'blue-cobalt' \\| 'blue-sky' \\| 'teal-cyan' \\| 'green-mint' \\| 'teal-seafoam' \\| 'green-grass' \\| 'yellow-amber' \\| 'orange-pumpkin' \\| 'red-tomato' \\| 'pink-magenta' \\| 'purple-plum' \\| 'purple-violet' \\| 'purple-lavender' \\| 'pink-rose' \\| 'green-jade' \\| 'lime-pear' \\| 'yellow-nova' \\| 'brand-green'` | Defines a base color from the theme color palette |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"default\"` | Controls the visual scale of an element to match its importance and available space. - `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\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |"
+          "url": "## nve-logo\n\nA visual indicator for a brand or application.\n\n### Example\n\n```html\n<nve-logo aria-label=\"NVIDIA\">NV</nve-logo>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/logo/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for content |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| color | `'red-cardinal' \\| 'gray-slate' \\| 'gray-denim' \\| 'blue-indigo' \\| 'blue-cobalt' \\| 'blue-sky' \\| 'teal-cyan' \\| 'green-mint' \\| 'teal-seafoam' \\| 'green-grass' \\| 'yellow-amber' \\| 'orange-pumpkin' \\| 'red-tomato' \\| 'pink-magenta' \\| 'purple-plum' \\| 'purple-violet' \\| 'purple-lavender' \\| 'pink-rose' \\| 'green-jade' \\| 'lime-pear' \\| 'yellow-nova' \\| 'brand-green'` | Defines a base color from the theme color palette |\n| size | `'sm' \\| 'md' \\| 'lg' \\| \"default\"` | Controls the visual scale of an element to match its importance and available space. - `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\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |"
         }
       ]
     },

package/dist/data.snippets.json

@@ -78,7 +78,7 @@
     ],
     "type": "pattern",
     "description": "Basic page-header layout.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
   },
   "Page Header with Links": {
     "srcFile": "page-header.snippets.html",
@@ -87,7 +87,7 @@
     ],
     "type": "pattern",
     "description": "Basic page-header layout with links.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
   },
   "Page": {
     "srcFile": "page.snippets.html",

package/dist/date/date2.js

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

package/dist/datetime/datetime2.js

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

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "0.0.11",
+			version: "0.1.0",
 			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: "0.0.11",
+			version: "0.1.0",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

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

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

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

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "0.0.11",
+			version: "0.1.0",
 			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: "0.0.11",
+			version: "0.1.0",
 			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: "0.0.11",
+			version: "0.1.0",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

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

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "0.0.11",
+			version: "0.1.0",
 			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: "0.0.11",
+			version: "0.1.0",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "0.0.11"
+			version: "0.1.0"
 		};
 	}
 	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: "0.0.11",
+			version: "0.1.0",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "0.0.11",
+			version: "0.1.0",
 			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: "0.0.11"
+			version: "0.1.0"
 		};
 	}
 	connectedCallback() {

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

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

package/dist/format-number/define.d.ts

@@ -0,0 +1,6 @@
+import { FormatNumber } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-format-number': FormatNumber;
+    }
+}

package/dist/format-number/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { FormatNumber as t } from "./format-number2.js";
+//#region src/format-number/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/format-number/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/format-number/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { FormatNumber } from '@nvidia-elements/core/format-number';\n\ndefine(FormatNumber);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-number': FormatNumber;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAa"}

package/dist/format-number/format-number.d.ts

@@ -0,0 +1,87 @@
+import { LitElement } from 'lit';
+export type FormatNumberStyle = 'decimal' | 'currency' | 'percent' | 'unit';
+export type CurrencyDisplayOption = 'symbol' | 'code' | 'name' | 'narrowSymbol';
+export type CurrencySignOption = 'standard' | 'accounting';
+export type NotationOption = 'standard' | 'scientific' | 'engineering' | 'compact';
+export type CompactDisplayOption = 'short' | 'long';
+export type UnitDisplayOption = 'short' | 'long' | 'narrow';
+export type SignDisplayOption = 'auto' | 'never' | 'always' | 'exceptZero';
+/**
+ * @element nve-format-number
+ * @description A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.
+ * Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-number
+ * @slot - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.
+ */
+export declare class FormatNumber extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /**
+     * Optional numeric string for values supplied by JavaScript or bound data.
+     * By default, the component formats the element's text content, which also serves as the SSR fallback.
+     * When both are present, this property takes precedence.
+     */
+    number?: string;
+    /**
+     * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
+     */
+    locale?: string;
+    /**
+     * Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'.
+     */
+    formatStyle: FormatNumberStyle;
+    /**
+     * ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency.
+     */
+    currency?: string;
+    /**
+     * Currency sign style: 'standard' | 'accounting'.
+     */
+    currencySign?: CurrencySignOption;
+    /**
+     * Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'.
+     */
+    currencyDisplay?: CurrencyDisplayOption;
+    /**
+     * Unit identifier (such as kilometer or byte). Required when formatStyle is unit.
+     */
+    unit?: string;
+    /**
+     * Unit display style: 'short' | 'long' | 'narrow'.
+     */
+    unitDisplay?: UnitDisplayOption;
+    /**
+     * Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'.
+     */
+    notation?: NotationOption;
+    /**
+     * Compact notation display: 'short' | 'long'. Only applies when notation is compact.
+     */
+    compactDisplay?: CompactDisplayOption;
+    /**
+     * Sign display: 'auto' | 'never' | 'always' | 'exceptZero'.
+     */
+    signDisplay?: SignDisplayOption;
+    /**
+     * Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'.
+     */
+    useGrouping?: string;
+    /**
+     * Pad fraction output to at least this many digits (0-20).
+     */
+    minimumFractionDigits?: number;
+    /**
+     * Round fraction output to at most this many digits (0-20).
+     */
+    maximumFractionDigits?: number;
+    /**
+     * Pad integer output to at least this many digits (1-21).
+     */
+    minimumIntegerDigits?: number;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,6 @@
+//#region src/format-number/format-number.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=format-number.examples.js.map

package/dist/format-number/format-number.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-number.examples.js","names":[],"sources":["../../src/format-number/format-number.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/format-number/define.js';\n\nexport default {\n  title: 'Elements/FormatNumber',\n  component: 'nve-format-number'\n};\n\n/**\n * @summary Basic decimal formatting with localized grouping separators. Use for inline counts and metrics.\n */\nexport const Default = {\n  render: () => html`\n  <nve-format-number>1234567.89</nve-format-number>\n  `\n};\n\n/**\n * @summary Currency formatting for monetary values with locale-aware symbols and separators. Use for prices, budgets, and financial totals.\n */\nexport const Currency = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"currency\" currency=\"USD\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"currency\" currency=\"EUR\" currency-display=\"code\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"currency\" currency=\"JPY\" currency-display=\"name\">1234</nve-format-number>\n</div>\n  `\n};\n\n/**\n * @summary Percent formatting for ratios and completion values. Source values should already represent a fraction (such as 0.85 for 85 percent).\n */\nexport const Percent = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"percent\">0.85</nve-format-number>\n  <nve-format-number format-style=\"percent\">0.126</nve-format-number>\n</div>\n  `\n};\n\n/**\n * @summary Unit formatting for measurements and quantities. Use for distances, storage sizes, or other numeric labels that need a localized unit suffix.\n */\nexport const Unit = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"unit\" unit=\"kilometer\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"unit\" unit=\"byte\" unit-display=\"long\">2048</nve-format-number>\n  <nve-format-number format-style=\"unit\" unit=\"celsius\" unit-display=\"narrow\">22</nve-format-number>\n</div>\n  `\n};\n\n/**\n * @summary Notation presets for scientific, engineering, and compact display. Use compact notation in dashboards or cards where space matters.\n */\nexport const Notation = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-number notation=\"compact\" compact-display=\"short\">1234567</nve-format-number>\n  <nve-format-number notation=\"compact\" compact-display=\"long\">1234567</nve-format-number>\n  <nve-format-number notation=\"scientific\">1234567</nve-format-number>\n  <nve-format-number notation=\"engineering\">1234567</nve-format-number>\n</div>\n  `\n};\n\n/**\n * @summary Sign display options for controlling positive and negative indicators. Use 'always' for delta values or 'exceptZero' for change indicators.\n */\nexport const SignDisplay = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-number sign-display=\"always\">42</nve-format-number>\n  <nve-format-number sign-display=\"always\">-42</nve-format-number>\n  <nve-format-number sign-display=\"exceptZero\">0</nve-format-number>\n  <nve-format-number sign-display=\"never\">-42</nve-format-number>\n</div>\n  `\n};\n\n/**\n * @summary Fraction digit control for tuning decimal precision. Use to enforce fixed decimal places in financial or scientific contexts.\n */\nexport const FractionDigits = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-number minimum-fraction-digits=\"4\">1.5</nve-format-number>\n  <nve-format-number maximum-fraction-digits=\"0\">1.567</nve-format-number>\n  <nve-format-number minimum-fraction-digits=\"2\" maximum-fraction-digits=\"2\">3</nve-format-number>\n</div>\n  `\n};\n\n/**\n * @summary Explicit locale settings for internationalized number output. Use when the target audience locale differs from the document language or browser default.\n */\nexport const Locale = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-number locale=\"de-DE\" format-style=\"currency\" currency=\"EUR\">1234.56</nve-format-number>\n  <nve-format-number locale=\"ja-JP\" format-style=\"currency\" currency=\"JPY\">1234</nve-format-number>\n  <nve-format-number locale=\"fr-FR\">1234567.89</nve-format-number>\n</div>\n  `\n};\n\n/**\n * @summary Number attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `number` wins when both are present.\n */\nexport const NumberAttribute = {\n  render: () => html`\n  <nve-format-number number=\"1234.56\" format-style=\"currency\" currency=\"USD\"></nve-format-number>\n  `\n};"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/format-number/format-number.examples.json

@@ -0,0 +1,87 @@
+{
+  "element": "nve-format-number",
+  "entrypoint": "@nvidia-elements/core/format-number/format-number.examples.json",
+  "items": [
+    {
+      "id": "format-number",
+      "name": "Default",
+      "template": "<nve-format-number>1234567.89</nve-format-number>\n",
+      "summary": "Basic decimal formatting with localized grouping separators. Use for inline counts and metrics.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-currency",
+      "name": "Currency",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"currency\" currency=\"USD\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"currency\" currency=\"EUR\" currency-display=\"code\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"currency\" currency=\"JPY\" currency-display=\"name\">1234</nve-format-number>\n</div>\n",
+      "summary": "Currency formatting for monetary values with locale-aware symbols and separators. Use for prices, budgets, and financial totals.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-percent",
+      "name": "Percent",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"percent\">0.85</nve-format-number>\n  <nve-format-number format-style=\"percent\">0.126</nve-format-number>\n</div>\n",
+      "summary": "Percent formatting for ratios and completion values. Source values should already represent a fraction (such as 0.85 for 85 percent).",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-unit",
+      "name": "Unit",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number format-style=\"unit\" unit=\"kilometer\">1234.56</nve-format-number>\n  <nve-format-number format-style=\"unit\" unit=\"byte\" unit-display=\"long\">2048</nve-format-number>\n  <nve-format-number format-style=\"unit\" unit=\"celsius\" unit-display=\"narrow\">22</nve-format-number>\n</div>\n",
+      "summary": "Unit formatting for measurements and quantities. Use for distances, storage sizes, or other numeric labels that need a localized unit suffix.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-notation",
+      "name": "Notation",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number notation=\"compact\" compact-display=\"short\">1234567</nve-format-number>\n  <nve-format-number notation=\"compact\" compact-display=\"long\">1234567</nve-format-number>\n  <nve-format-number notation=\"scientific\">1234567</nve-format-number>\n  <nve-format-number notation=\"engineering\">1234567</nve-format-number>\n</div>\n",
+      "summary": "Notation presets for scientific, engineering, and compact display. Use compact notation in dashboards or cards where space matters.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-sign-display",
+      "name": "SignDisplay",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number sign-display=\"always\">42</nve-format-number>\n  <nve-format-number sign-display=\"always\">-42</nve-format-number>\n  <nve-format-number sign-display=\"exceptZero\">0</nve-format-number>\n  <nve-format-number sign-display=\"never\">-42</nve-format-number>\n</div>\n",
+      "summary": "Sign display options for controlling positive and negative indicators. Use 'always' for delta values or 'exceptZero' for change indicators.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-fraction-digits",
+      "name": "FractionDigits",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number minimum-fraction-digits=\"4\">1.5</nve-format-number>\n  <nve-format-number maximum-fraction-digits=\"0\">1.567</nve-format-number>\n  <nve-format-number minimum-fraction-digits=\"2\" maximum-fraction-digits=\"2\">3</nve-format-number>\n</div>\n",
+      "summary": "Fraction digit control for tuning decimal precision. Use to enforce fixed decimal places in financial or scientific contexts.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-locale",
+      "name": "Locale",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-number locale=\"de-DE\" format-style=\"currency\" currency=\"EUR\">1234.56</nve-format-number>\n  <nve-format-number locale=\"ja-JP\" format-style=\"currency\" currency=\"JPY\">1234</nve-format-number>\n  <nve-format-number locale=\"fr-FR\">1234567.89</nve-format-number>\n</div>\n",
+      "summary": "Explicit locale settings for internationalized number output. Use when the target audience locale differs from the document language or browser default.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-number-number-attribute",
+      "name": "NumberAttribute",
+      "template": "<nve-format-number number=\"1234.56\" format-style=\"currency\" currency=\"USD\"></nve-format-number>\n",
+      "summary": "Number attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `number` wins when both are present.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region src/format-number/format-number.css?inline
+var e = ":host{display:inline}[internal-host]{color:var(--nve-sys-text-color, inherit)}slot{display:none}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=format-number.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-number.js","names":[],"sources":["../../src/format-number/format-number.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  display: inline;\n}\n\n[internal-host] {\n  color: var(--nve-sys-text-color, inherit);\n}\n\nslot {\n  display: none;\n}\n"],"mappings":""}