@nvidia-elements/core 2.2.2 → 2.3.0

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.2.2"
+			version: "2.3.0"
 		};
 	}
 	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.2.2",
+			version: "2.3.0",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.examples.js","names":[],"sources":["../../src/card/card.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/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/divider/define.js';\n\nexport default {\n  title: 'Elements/Card',\n  component: 'nve-card'\n};\n\n/**\n * @summary Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.\n */\nexport const Default = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n\n/**\n * @summary Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.\n */\nexport const Actions = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <div nve-layout=\"column gap:xs\">\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n        <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n      </div>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>  \n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.\n */\nexport const MediaCard = {\n  render: () => html`\n  <div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  `\n}\n\n/**\n * @summary Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.\n */\nexport const WithDivider = {\n  render: () => html`\n    <nve-card style=\"width: 400px; height: 300px;\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n      <nve-divider></nve-divider>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  `\n}\n\n/**\n * @summary Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.\n */\nexport const DescriptionList = {\n  render: () => html`\n  <nve-card style=\"width: 650px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <dl nve-layout=\"grid gap:lg\">\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      </dl>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with integrated tabs in the header for multi-panel content within a single card interface.\n */\nexport const WithTabs = {\n  render: () => html`\n  <nve-card style=\"width:400px; height:200px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <nve-tabs>\n        <nve-tabs-item selected>tab 1</nve-tabs-item>\n        <nve-tabs-item>tab 2</nve-tabs-item>\n        <nve-tabs-item>tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.\n */\nexport const ContainerFull = {\n  render: () => html`\n  <nve-card container=\"full\">\n    <nve-card-content>\n      <p nve-text=\"body\">container full</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.\n */\nexport const ContainerFlat = {\n  render: () => html`\n  <nve-card container=\"flat\">\n    <nve-card-content>\n      <p nve-text=\"body\">container flat</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.\n * @tags test-case\n */\nexport const Audit = {\n  /* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n  render: () => html`\n  <!-- invalid padding usage -->\n  <nve-card nve-layout=\"pad:md\"></nve-card>\n\n  <!-- invalid parent element -->\n  <nve-card-header>\n    card header\n  </nve-card-header>\n  <nve-card-content>\n    card content\n  </nve-card-content>\n  <nve-card-footer>\n    card footer\n  </nve-card-footer>\n  `\n  /* eslint-enable */\n};\n\n/**\n * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.\n */\nexport const OverflowContent = {\n  render: () => html`\n  <nve-card style=\"height: 250px; width: 400px;\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"card.examples.js","names":[],"sources":["../../src/card/card.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/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Card',\n  component: 'nve-card'\n};\n\n/**\n * @summary Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.\n */\nexport const Default = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n\n/**\n * @summary Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.\n */\nexport const Actions = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <div nve-layout=\"column gap:xs\">\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n        <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n      </div>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>  \n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.\n */\nexport const MediaCard = {\n  render: () => html`\n  <div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  `\n}\n\n/**\n * @summary Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.\n */\nexport const WithDivider = {\n  render: () => html`\n    <nve-card style=\"width: 400px; height: 300px;\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n      <nve-divider></nve-divider>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  `\n}\n\n/**\n * @summary Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.\n */\nexport const DescriptionList = {\n  render: () => html`\n  <nve-card style=\"width: 650px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <dl nve-layout=\"grid gap:lg\">\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      </dl>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with integrated tabs in the header for multi-panel content within a single card interface.\n */\nexport const WithTabs = {\n  render: () => html`\n  <nve-card style=\"width:400px; height:200px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <nve-tabs>\n        <nve-tabs-item selected>tab 1</nve-tabs-item>\n        <nve-tabs-item>tab 2</nve-tabs-item>\n        <nve-tabs-item>tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.\n * @tags test-case\n */\nexport const ContainerFull = {\n  render: () => html`\n  <nve-page document-scroll>\n    <nve-card container=\"full\">\n      <nve-card-content>\n        <p nve-text=\"body\">container full</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-page>\n  `\n}\n\n/**\n * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n  <nve-card container=\"flat\">\n    <nve-card-content>\n      <p nve-text=\"body\">container flat</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.\n * @tags test-case\n */\nexport const Audit = {\n  /* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n  render: () => html`\n  <!-- invalid padding usage -->\n  <nve-card nve-layout=\"pad:md\"></nve-card>\n\n  <!-- invalid parent element -->\n  <nve-card-header>\n    card header\n  </nve-card-header>\n  <nve-card-content>\n    card content\n  </nve-card-content>\n  <nve-card-footer>\n    card footer\n  </nve-card-footer>\n  `\n  /* eslint-enable */\n};\n\n/**\n * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.\n * @tags test-case\n */\nexport const OverflowContent = {\n  render: () => html`\n  <nve-card style=\"height: 250px; width: 400px;\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/card/card.examples.json

@@ -59,11 +59,13 @@
     {
       "id": "card-container-full",
       "name": "ContainerFull",
-      "template": "<nve-card container=\"full\">\n  <nve-card-content>\n    <p nve-text=\"body\">container full</p>\n  </nve-card-content>\n</nve-card>\n",
+      "template": "<nve-page document-scroll>\n  <nve-card container=\"full\">\n    <nve-card-content>\n      <p nve-text=\"body\">container full</p>\n    </nve-card-content>\n  </nve-card>\n</nve-page>\n",
       "summary": "Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "card-container-flat",
@@ -72,7 +74,9 @@
       "summary": "Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "card-audit",
@@ -92,7 +96,9 @@
       "summary": "Card with overflow content, where the card body scrolls when content exceeds the card height.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     }
   ]
 }

package/dist/card/card2.js

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

package/dist/combobox/combobox2.js

@@ -31,7 +31,7 @@ var S = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "2.2.2"
+			version: "2.3.0"
 		};
 	}
 	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.2.2"
+			version: "2.3.0"
 		};
 	}
 	static {

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

@@ -976,9 +976,9 @@ Determines if popover visibility behavior should be automatically controlled by
   arrow?: boolean;
   /** Enables internal string values to update for internationalization. */
   i18n?: string;
-  /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
+  /** Dispatched on a popover just before showing or hiding. */
   onbeforetoggle?: (e: CustomEvent<never>) => void;
-  /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
+  /** Dispatched on a popover element just after showing or hiding. */
   ontoggle?: (e: CustomEvent<never>) => void;
   /** Dispatched when the dropdown opens. */
   onopen?: (e: CustomEvent<never>) => void;
@@ -1103,6 +1103,32 @@ export type FileProps = {
   onreset?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type FormatBytesProps = {
+  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  "unit-display"?: "short" | "long";
+  /** Pad fraction output to at least this many digits. */
+  "minimum-fraction-digits"?: number | undefined;
+  /** Round fraction output to at most this many digits. Defaults to two effective digits after the decimal point. */
+  "maximum-fraction-digits"?: number | undefined;
+  /** Optional byte count 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. */
+  value?: number | undefined;
+  /** Unit system: 'decimal' uses powers of 1000 and 'binary' uses powers of 1024. */
+  display?: "decimal" | "binary";
+  /** Optional unit magnitude. When omitted, the component selects a unit from the byte count. */
+  unit?: "b" | "kb" | "mb" | "gb" | "tb" | "pb" | undefined;
+  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  unitDisplay?: "short" | "long";
+  /** Language tag (such as en-US or de-DE) used to format the number.
+Defaults to document.documentElement.lang or the runtime default. */
+  locale?: string | undefined;
+  /** Pad fraction output to at least this many digits. */
+  minimumFractionDigits?: number | undefined;
+  /** Round fraction output to at most this many digits. Defaults to two effective digits after the decimal point. */
+  maximumFractionDigits?: number | undefined;
+};
+
 export type FormatDatetimeProps = {
   /** Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
 Preset styles take precedence over granular date and time part options. */
@@ -4628,7 +4654,7 @@ export type CustomElements = {
   "nve-dialog-header": Partial<DialogHeaderProps & BaseProps & BaseEvents>;
 
   /**
-   * Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
    * ---
    *
    *
@@ -4742,7 +4768,7 @@ export type CustomElements = {
   "nve-drawer-header": Partial<DrawerHeaderProps & BaseProps & BaseEvents>;
 
   /**
-   * Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.
    * ---
    *
    *
@@ -4822,13 +4848,13 @@ export type CustomElements = {
   "nve-dropdown-header": Partial<DropdownHeaderProps & BaseProps & BaseEvents>;
 
   /**
-   * Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.
    * ---
    *
    *
    * ### **Events:**
-   *  - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
-   * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
+   *  - **beforetoggle** - Dispatched on a popover just before showing or hiding.
+   * - **toggle** - Dispatched on a popover element just after showing or hiding.
    * - **open** - Dispatched when the dropdown opens.
    * - **close** - Dispatched when the dropdown closes.
    *
@@ -4924,6 +4950,16 @@ export type CustomElements = {
    */
   "nve-file": Partial<FileProps & BaseProps & BaseEvents>;
 
+  /**
+   * Formats a byte count as localized, human-readable decimal or binary units.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Numeric byte count to format (such as 1048576). Serves as fallback before hydration.
+   */
+  "nve-format-bytes": Partial<FormatBytesProps & BaseProps & BaseEvents>;
+
   /**
    * Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
    * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
@@ -5401,7 +5437,7 @@ export type CustomElements = {
   "nve-notification-group": Partial<NotificationGroupProps & BaseProps & BaseEvents>;
 
   /**
-   * Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * Displays real time updates without interrupting the user's workflow to communicate an important message or status.
    * ---
    *
    *
@@ -5570,6 +5606,7 @@ export type CustomElements = {
    * - **--border-radius** - undefined _(default: undefined)_
    * - **--box-shadow** - undefined _(default: undefined)_
    * - **--min-height** - undefined _(default: undefined)_
+   * - **--gap** - Vertical gap spacing between main content items _(default: undefined)_
    */
   "nve-page": Partial<PageProps & BaseProps & BaseEvents>;
 
@@ -6385,7 +6422,7 @@ export type CustomElements = {
   "nve-time": Partial<TimeProps & BaseProps & BaseEvents>;
 
   /**
-   * A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
    * ---
    *
    *
@@ -6506,7 +6543,7 @@ export type CustomElements = {
   "nve-toolbar": Partial<ToolbarProps & BaseProps & BaseEvents>;
 
   /**
-   * A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
    * ---
    *
    *

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

@@ -862,9 +862,9 @@ Determines if popover visibility behavior should be automatically controlled by
   arrow?: boolean;
   /** Enables internal string values to update for internationalization. */
   i18n?: string;
-  /** Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event) */
+  /** Dispatched on a popover just before showing or hiding. */
   onbeforetoggle?: (e: CustomEvent<never>) => void;
-  /** Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event) */
+  /** Dispatched on a popover element just after showing or hiding. */
   ontoggle?: (e: CustomEvent<never>) => void;
   /** Dispatched when the dropdown opens. */
   onopen?: (e: CustomEvent<never>) => void;
@@ -979,6 +979,32 @@ type FileProps = {
   onreset?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+type FormatBytesProps = {
+  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  "unit-display"?: "short" | "long";
+  /** Pad fraction output to at least this many digits. */
+  "minimum-fraction-digits"?: number | undefined;
+  /** Round fraction output to at most this many digits. Defaults to two effective digits after the decimal point. */
+  "maximum-fraction-digits"?: number | undefined;
+  /** Optional byte count 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. */
+  value?: number | undefined;
+  /** Unit system: 'decimal' uses powers of 1000 and 'binary' uses powers of 1024. */
+  display?: "decimal" | "binary";
+  /** Optional unit magnitude. When omitted, the component selects a unit from the byte count. */
+  unit?: "b" | "kb" | "mb" | "gb" | "tb" | "pb" | undefined;
+  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  unitDisplay?: "short" | "long";
+  /** Language tag (such as en-US or de-DE) used to format the number.
+Defaults to document.documentElement.lang or the runtime default. */
+  locale?: string | undefined;
+  /** Pad fraction output to at least this many digits. */
+  minimumFractionDigits?: number | undefined;
+  /** Round fraction output to at most this many digits. Defaults to two effective digits after the decimal point. */
+  maximumFractionDigits?: number | undefined;
+};
+
 type FormatDatetimeProps = {
   /** Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
 Preset styles take precedence over granular date and time part options. */
@@ -4386,7 +4412,7 @@ export type CustomElements = {
   "nve-dialog-header": DefineComponent<DialogHeaderProps>;
 
   /**
-   * Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
    * ---
    *
    *
@@ -4500,7 +4526,7 @@ export type CustomElements = {
   "nve-drawer-header": DefineComponent<DrawerHeaderProps>;
 
   /**
-   * Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.
    * ---
    *
    *
@@ -4580,13 +4606,13 @@ export type CustomElements = {
   "nve-dropdown-header": DefineComponent<DropdownHeaderProps>;
 
   /**
-   * Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.
    * ---
    *
    *
    * ### **Events:**
-   *  - **beforetoggle** - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
-   * - **toggle** - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
+   *  - **beforetoggle** - Dispatched on a popover just before showing or hiding.
+   * - **toggle** - Dispatched on a popover element just after showing or hiding.
    * - **open** - Dispatched when the dropdown opens.
    * - **close** - Dispatched when the dropdown closes.
    *
@@ -4682,6 +4708,16 @@ export type CustomElements = {
    */
   "nve-file": DefineComponent<FileProps>;
 
+  /**
+   * Formats a byte count as localized, human-readable decimal or binary units.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Numeric byte count to format (such as 1048576). Serves as fallback before hydration.
+   */
+  "nve-format-bytes": DefineComponent<FormatBytesProps>;
+
   /**
    * Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
    * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
@@ -5159,7 +5195,7 @@ export type CustomElements = {
   "nve-notification-group": DefineComponent<NotificationGroupProps>;
 
   /**
-   * Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * Displays real time updates without interrupting the user's workflow to communicate an important message or status.
    * ---
    *
    *
@@ -5328,6 +5364,7 @@ export type CustomElements = {
    * - **--border-radius** - undefined _(default: undefined)_
    * - **--box-shadow** - undefined _(default: undefined)_
    * - **--min-height** - undefined _(default: undefined)_
+   * - **--gap** - Vertical gap spacing between main content items _(default: undefined)_
    */
   "nve-page": DefineComponent<PageProps>;
 
@@ -6143,7 +6180,7 @@ export type CustomElements = {
   "nve-time": DefineComponent<TimeProps>;
 
   /**
-   * A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
    * ---
    *
    *
@@ -6264,7 +6301,7 @@ export type CustomElements = {
   "nve-toolbar": DefineComponent<ToolbarProps>;
 
   /**
-   * A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
    * ---
    *
    *