@nvidia-elements/core 0.0.11 → 0.1.0

package/dist/button/button2.js

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

package/dist/button-group/button-group.d.ts

@@ -2,7 +2,7 @@ import { PropertyValues, LitElement } from 'lit';
 import { KeynavListConfig, Interaction, Size } from '../internal';
 /**
  * @element nve-button-group
- * @description A button group is a control that enables users to choose between two or more distinct mutually exclusive options.
+ * @description A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.
  * @since 0.16.0
  * @entrypoint \@nvidia-elements/core/button-group
  * @slot - default slot for `nve-button` or `nve-icon-button`

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"button-group2.js","names":["#buttons","#syncStyleStates","#onClick","#selectButton"],"sources":["../../src/button-group/button-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Interaction, Size } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  keyNavigationList,\n  useStyles,\n  audit,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport type { Divider } from '@nvidia-elements/core/divider';\nimport styles from './button-group.css?inline';\nimport globalStyles from './button-group.global.css?inline';\n\n/**\n * @element nve-button-group\n * @description A button group is a control that enables users to choose between two or more distinct mutually exclusive options.\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button` or `nve-icon-button`\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --height\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role\n */\n@audit()\n@keyNavigationList<ButtonGroup>()\nexport class ButtonGroup extends LitElement {\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.#buttons,\n      layout: this.orientation\n    };\n  }\n\n  /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */\n  @property({ type: String, attribute: 'behavior-select' }) behaviorSelect: 'single' | 'multi';\n\n  /** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'rounded';\n\n  /** Determines the orientation direction of the group. Vertical groups support icon buttons only. */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Use the `interaction` property on `button-group` in combination with `divider` for color-coded split buttons */\n  @property({ type: String, reflect: true }) interaction: Interaction;\n\n  /** Determines size of button */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button-group',\n    version: '0.0.0',\n    children: ['nve-button', 'nve-icon-button', 'nve-divider']\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements({ selector: 'nve-divider' }) private dividers!: Divider[];\n\n  @queryAssignedElements({ selector: 'nve-icon-button' }) private iconButtons!: IconButton[];\n\n  @queryAssignedElements({ selector: 'nve-button' }) private buttons!: Button[];\n\n  get #buttons() {\n    return [...this.iconButtons, ...this.buttons];\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncStyleStates}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'group';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => this.#selectButton(e.target as HTMLElement & { pressed?: boolean });\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#syncStyleStates();\n  }\n\n  #syncStyleStates() {\n    if (this.container === 'flat') {\n      this.#buttons.forEach(btn => (btn.container = 'flat'));\n    }\n\n    if (this.interaction) {\n      this.#buttons.forEach(btn => (btn.interaction = this.interaction));\n    }\n\n    this.dividers.length ? this._internals.states.add('split') : this._internals.states.delete('split');\n  }\n\n  #selectButton(button: HTMLElement & { pressed?: boolean }) {\n    if (!button.matches?.('nve-button, nve-icon-button')) {\n      return;\n    }\n\n    if (this.behaviorSelect === 'single') {\n      this.#buttons.forEach(i => (i.pressed = false));\n      button.pressed = true;\n    } else if (this.behaviorSelect === 'multi') {\n      button.pressed = !button.pressed;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAsCO,IAAA,IAAA,cAA0B,EAAW;;kCAgB2C;;CAdrF,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,MAAA;GACP,QAAQ,KAAK;GACd;;;gBAkBa,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;;GAC7C;;CAWD,KAAA,IAAe;AACb,SAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,QAAQ;;CAG/C,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAsB;;CAKhD,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,MAAA,EAAc;;CAG/C,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,SAAS,MAAA,EAAc;;CAGlD,MAAY,MAAa,MAAA,EAAmB,EAAE,OAA8C;CAE5F,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAuB;;CAGzB,KAAmB;AASjB,EARI,KAAK,cAAc,UACrB,MAAA,EAAc,SAAQ,MAAQ,EAAI,YAAY,OAAQ,EAGpD,KAAK,eACP,MAAA,EAAc,SAAQ,MAAQ,EAAI,cAAc,KAAK,YAAa,EAGpE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,QAAQ,GAAG,KAAK,WAAW,OAAO,OAAO,QAAQ;;CAGrG,GAAc,GAA6C;AACpD,IAAO,UAAU,8BAA8B,KAIhD,KAAK,mBAAmB,YAC1B,MAAA,EAAc,SAAQ,MAAM,EAAE,UAAU,GAAO,EAC/C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;;;GApF5B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGxD,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAazC,EAAsB,EAAE,UAAU,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAElD,EAAsB,EAAE,UAAU,mBAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAEtD,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAzCnD,GAAO,EACP,GAAgC,CAAA,EAAA,EAAA"}
+{"version":3,"file":"button-group2.js","names":["#buttons","#syncStyleStates","#onClick","#selectButton"],"sources":["../../src/button-group/button-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Interaction, Size } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  keyNavigationList,\n  useStyles,\n  audit,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport type { Divider } from '@nvidia-elements/core/divider';\nimport styles from './button-group.css?inline';\nimport globalStyles from './button-group.global.css?inline';\n\n/**\n * @element nve-button-group\n * @description A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button` or `nve-icon-button`\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --height\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role\n */\n@audit()\n@keyNavigationList<ButtonGroup>()\nexport class ButtonGroup extends LitElement {\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.#buttons,\n      layout: this.orientation\n    };\n  }\n\n  /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */\n  @property({ type: String, attribute: 'behavior-select' }) behaviorSelect: 'single' | 'multi';\n\n  /** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'rounded';\n\n  /** Determines the orientation direction of the group. Vertical groups support icon buttons only. */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Use the `interaction` property on `button-group` in combination with `divider` for color-coded split buttons */\n  @property({ type: String, reflect: true }) interaction: Interaction;\n\n  /** Determines size of button */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button-group',\n    version: '0.0.0',\n    children: ['nve-button', 'nve-icon-button', 'nve-divider']\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements({ selector: 'nve-divider' }) private dividers!: Divider[];\n\n  @queryAssignedElements({ selector: 'nve-icon-button' }) private iconButtons!: IconButton[];\n\n  @queryAssignedElements({ selector: 'nve-button' }) private buttons!: Button[];\n\n  get #buttons() {\n    return [...this.iconButtons, ...this.buttons];\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncStyleStates}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'group';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => this.#selectButton(e.target as HTMLElement & { pressed?: boolean });\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#syncStyleStates();\n  }\n\n  #syncStyleStates() {\n    if (this.container === 'flat') {\n      this.#buttons.forEach(btn => (btn.container = 'flat'));\n    }\n\n    if (this.interaction) {\n      this.#buttons.forEach(btn => (btn.interaction = this.interaction));\n    }\n\n    this.dividers.length ? this._internals.states.add('split') : this._internals.states.delete('split');\n  }\n\n  #selectButton(button: HTMLElement & { pressed?: boolean }) {\n    if (!button.matches?.('nve-button, nve-icon-button')) {\n      return;\n    }\n\n    if (this.behaviorSelect === 'single') {\n      this.#buttons.forEach(i => (i.pressed = false));\n      button.pressed = true;\n    } else if (this.behaviorSelect === 'multi') {\n      button.pressed = !button.pressed;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAsCO,IAAA,IAAA,cAA0B,EAAW;;kCAgB2C;;CAdrF,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,MAAA;GACP,QAAQ,KAAK;GACd;;;gBAkBa,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;;GAC7C;;CAWD,KAAA,IAAe;AACb,SAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,QAAQ;;CAG/C,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAsB;;CAKhD,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,MAAA,EAAc;;CAG/C,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,SAAS,MAAA,EAAc;;CAGlD,MAAY,MAAa,MAAA,EAAmB,EAAE,OAA8C;CAE5F,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAuB;;CAGzB,KAAmB;AASjB,EARI,KAAK,cAAc,UACrB,MAAA,EAAc,SAAQ,MAAQ,EAAI,YAAY,OAAQ,EAGpD,KAAK,eACP,MAAA,EAAc,SAAQ,MAAQ,EAAI,cAAc,KAAK,YAAa,EAGpE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,QAAQ,GAAG,KAAK,WAAW,OAAO,OAAO,QAAQ;;CAGrG,GAAc,GAA6C;AACpD,IAAO,UAAU,8BAA8B,KAIhD,KAAK,mBAAmB,YAC1B,MAAA,EAAc,SAAQ,MAAM,EAAE,UAAU,GAAO,EAC/C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;;;GApF5B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGxD,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAazC,EAAsB,EAAE,UAAU,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAElD,EAAsB,EAAE,UAAU,mBAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAEtD,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAzCnD,GAAO,EACP,GAAgC,CAAA,EAAA,EAAA"}

package/dist/card/card2.js

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

package/dist/checkbox/checkbox-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "0.0.11",
+			version: "0.1.0",
 			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: "0.0.11",
+			version: "0.1.0",
 			children: [
 				"label",
 				"input",

package/dist/color/color2.js

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

package/dist/combobox/combobox2.js

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

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

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

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

@@ -1249,6 +1249,45 @@ Preset styles take precedence over granular date and time part options. */
   "nve-text"?: string;
 };
 
+export type FormatNumberProps = {
+  /** 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 | "default";
+  /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */
+  locale?: string | "default";
+  /** Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'. */
+  "format-style"?: "decimal" | "currency" | "percent" | "unit";
+  /** ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency. */
+  currency?: string | "default";
+  /** Currency sign style: 'standard' | 'accounting'. */
+  "currency-sign"?: "standard" | "accounting" | "default";
+  /** Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'. */
+  "currency-display"?: "symbol" | "code" | "name" | "narrowSymbol" | "default";
+  /** Unit identifier (such as kilometer or byte). Required when formatStyle is unit. */
+  unit?: string | "default";
+  /** Unit display style: 'short' | 'long' | 'narrow'. */
+  "unit-display"?: "short" | "long" | "narrow" | "default";
+  /** Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'. */
+  notation?: "standard" | "scientific" | "engineering" | "compact" | "default";
+  /** Compact notation display: 'short' | 'long'. Only applies when notation is compact. */
+  "compact-display"?: "short" | "long" | "default";
+  /** Sign display: 'auto' | 'never' | 'always' | 'exceptZero'. */
+  "sign-display"?: "auto" | "never" | "always" | "exceptZero" | "default";
+  /** Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'. */
+  "use-grouping"?: string | "default";
+  /** Pad fraction output to at least this many digits (0-20). */
+  "minimum-fraction-digits"?: number | "default";
+  /** Round fraction output to at most this many digits (0-20). */
+  "maximum-fraction-digits"?: number | "default";
+  /** Pad integer output to at least this many digits (1-21). */
+  "minimum-integer-digits"?: number | "default";
+  /** @deprecated - not supported on custom element tags */
+  "nve-layout"?: string;
+  /** @deprecated - not supported on custom element tags */
+  "nve-text"?: string;
+};
+
 export type FormatRelativeTimeProps = {
   /** Optional date 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.
@@ -4053,7 +4092,7 @@ export type CustomElements = {
   "nve-breadcrumb": Partial<BreadcrumbProps & BaseProps & BaseEvents>;
 
   /**
-   * A button group is a control that enables users to choose between two or more distinct mutually exclusive options.
+   * A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.
    * ---
    *
    *
@@ -4765,6 +4804,17 @@ export type CustomElements = {
    */
   "nve-format-datetime": Partial<FormatDatetimeProps & BaseProps & BaseEvents>;
 
+  /**
+   * 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`.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.
+   */
+  "nve-format-number": Partial<FormatNumberProps & BaseProps & BaseEvents>;
+
   /**
    * Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
    * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.

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

@@ -1176,6 +1176,45 @@ Preset styles take precedence over granular date and time part options. */
   "nve-text"?: string;
 };
 
+type FormatNumberProps = {
+  /** 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 | "default";
+  /** Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. */
+  locale?: string | "default";
+  /** Formatting style: 'decimal' | 'currency' | 'percent' | 'unit'. */
+  "format-style"?: "decimal" | "currency" | "percent" | "unit";
+  /** ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency. */
+  currency?: string | "default";
+  /** Currency sign style: 'standard' | 'accounting'. */
+  "currency-sign"?: "standard" | "accounting" | "default";
+  /** Currency display style: 'symbol' | 'code' | 'name' | 'narrowSymbol'. */
+  "currency-display"?: "symbol" | "code" | "name" | "narrowSymbol" | "default";
+  /** Unit identifier (such as kilometer or byte). Required when formatStyle is unit. */
+  unit?: string | "default";
+  /** Unit display style: 'short' | 'long' | 'narrow'. */
+  "unit-display"?: "short" | "long" | "narrow" | "default";
+  /** Number notation: 'standard' | 'scientific' | 'engineering' | 'compact'. */
+  notation?: "standard" | "scientific" | "engineering" | "compact" | "default";
+  /** Compact notation display: 'short' | 'long'. Only applies when notation is compact. */
+  "compact-display"?: "short" | "long" | "default";
+  /** Sign display: 'auto' | 'never' | 'always' | 'exceptZero'. */
+  "sign-display"?: "auto" | "never" | "always" | "exceptZero" | "default";
+  /** Grouping separators: 'auto' | 'always' | 'min2' | 'true' | 'false'. */
+  "use-grouping"?: string | "default";
+  /** Pad fraction output to at least this many digits (0-20). */
+  "minimum-fraction-digits"?: number | "default";
+  /** Round fraction output to at most this many digits (0-20). */
+  "maximum-fraction-digits"?: number | "default";
+  /** Pad integer output to at least this many digits (1-21). */
+  "minimum-integer-digits"?: number | "default";
+  /** @deprecated - not supported on custom element tags */
+  "nve-layout"?: string;
+  /** @deprecated - not supported on custom element tags */
+  "nve-text"?: string;
+};
+
 type FormatRelativeTimeProps = {
   /** Optional date 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.
@@ -3980,7 +4019,7 @@ export type CustomElements = {
   "nve-breadcrumb": DefineComponent<BreadcrumbProps>;
 
   /**
-   * A button group is a control that enables users to choose between two or more distinct mutually exclusive options.
+   * A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.
    * ---
    *
    *
@@ -4692,6 +4731,17 @@ export type CustomElements = {
    */
   "nve-format-datetime": DefineComponent<FormatDatetimeProps>;
 
+  /**
+   * 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`.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration.
+   */
+  "nve-format-number": DefineComponent<FormatNumberProps>;
+
   /**
    * Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
    * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.