@nvidia-elements/core 2.4.1 → 2.5.0

package/dist/data.snippets.json

@@ -71,6 +71,24 @@
     "description": "Basic inline search",
     "body": "<nve-search>\n  <input type=\"search\" aria-label=\"${2:search}\" placeholder=\"${3:search}\">\n</nve-search>\n"
   },
+  "Page Header": {
+    "srcFile": "page-header.snippets.html",
+    "prefix": [
+      "page-header"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout.",
+    "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",
+    "prefix": [
+      "page-header-with-links"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout with links.",
+    "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",
     "prefix": [
@@ -116,24 +134,6 @@
     "description": "Basic page subheader using toolbar.",
     "body": "<nve-toolbar slot=\"subheader\">\n  <h2 nve-text=\"emphasis heading sm\">${1:Subheader}</h2>\n</nve-toolbar>\n"
   },
-  "Page Header": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout.",
-    "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",
-    "prefix": [
-      "page-header-with-links"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout with links.",
-    "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"
-  },
   "Input Group": {
     "srcFile": "input.snippets.html",
     "prefix": [
@@ -188,33 +188,6 @@
     "description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
     "body": "<nve-dialog size=\"${6:md}\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">${1:Title}</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">${2:Content}</p>\n  <nve-dialog-footer>\n    <nve-button>${3:Cancel}</nve-button>\n    <nve-button interaction=\"${4:emphasis}\">${5:OK}</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n$0\n"
   },
-  "Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "card"
-    ],
-    "type": "pattern",
-    "description": "Basic Card with header and footer",
-    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
-  },
-  "Media Card": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card"
-    ],
-    "type": "pattern",
-    "description": "Basic media Card with card content and card footer",
-    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
-  },
-  "Media Card Grid": {
-    "srcFile": "card.snippets.html",
-    "prefix": [
-      "media-card-grid"
-    ],
-    "type": "pattern",
-    "description": "Grid layout with 3 media cards",
-    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
-  },
   "Button Group": {
     "srcFile": "button-group.snippets.html",
     "prefix": [
@@ -251,6 +224,33 @@
     "description": "Simple vertical button group with three icon buttons.",
     "body": "<nve-button-group orientation=\"vertical\">\n  <nve-icon-button icon-name=\"${1:copy}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${2:add-comment}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${3:download}\"></nve-icon-button>\n</nve-button-group>\n"
   },
+  "Card": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "card"
+    ],
+    "type": "pattern",
+    "description": "Basic Card with header and footer",
+    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card"
+    ],
+    "type": "pattern",
+    "description": "Basic media Card with card content and card footer",
+    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card Grid": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card-grid"
+    ],
+    "type": "pattern",
+    "description": "Grid layout with 3 media cards",
+    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
+  },
   "Alert Group": {
     "srcFile": "alert.snippets.html",
     "prefix": [

package/dist/date/date2.js

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

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "2.4.1"
+			version: "2.5.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: "2.4.1",
+			version: "2.5.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: "2.4.1",
+			version: "2.5.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: "2.4.1"
+			version: "2.5.0"
 		};
 	}
 	static {

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "2.4.1"
+			version: "2.5.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: "2.4.1",
+			version: "2.5.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: "2.4.1",
+			version: "2.5.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: "2.4.1",
+			version: "2.5.0",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

@@ -30,7 +30,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "2.4.1"
+			version: "2.5.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: "2.4.1",
+			version: "2.5.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: "2.4.1",
+			version: "2.5.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: "2.4.1"
+			version: "2.5.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: "2.4.1",
+			version: "2.5.0",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone2.js

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

package/dist/format-bytes/format-bytes2.js

@@ -95,7 +95,7 @@ var g = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-bytes",
-			version: "2.4.1"
+			version: "2.5.0"
 		};
 	}
 	get #e() {

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

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

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

@@ -29,7 +29,7 @@ var c = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.4.1"
+			version: "2.5.0"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time2.js

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.4.1"
+			version: "2.5.0"
 		};
 	}
 	#e;

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

@@ -0,0 +1,6 @@
+import { FormatTruncate } from '@nvidia-elements/core/format-truncate';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-format-truncate': FormatTruncate;
+    }
+}

package/dist/format-truncate/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/format-truncate/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 { FormatTruncate } from '@nvidia-elements/core/format-truncate';\n\ndefine(FormatTruncate);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-truncate': FormatTruncate;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAc"}

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

@@ -0,0 +1,41 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+/**
+ * @element nve-format-truncate
+ * @description Truncates text at its start, center, or end while preserving the full text for assistive technology.
+ * @documentation https://nvidia.github.io/elements/docs/elements/format-truncate/
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-truncate
+ * @slot - Text to truncate. The component flattens, trims, and normalizes mixed text and element nodes.
+ * @beta
+ */
+export declare class FormatTruncate extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /**
+     * Location of the ellipsis. Use start or end to preserve one edge, or center to preserve both edges.
+     */
+    position: 'start' | 'center' | 'end';
+    /**
+     * Text unit used for center truncation. Character preserves graphemes, word preserves words, and path preserves path segments.
+     */
+    strategy: 'character' | 'word' | 'path';
+    /**
+     * Edge favored by center truncation. The favored edge keeps at least the configured number of units.
+     */
+    bias: 'start' | 'end';
+    /**
+     * Number of strategy units retained at the biased edge during center truncation.
+     */
+    preserve: number;
+    /** @private */
+    _internals: ElementInternals;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    connectedMoveCallback(): void;
+    render(): TemplateResult;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-truncate.examples.js","names":[],"sources":["../../src/format-truncate/format-truncate.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-truncate/define.js';\n\nexport default {\n  title: 'Elements/FormatTruncate',\n  component: 'nve-format-truncate'\n};\n\n/**\n * @summary Start, center, and end positions keep the most useful part of constrained text. Choose the position that matches how users distinguish each value.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Inherited heading, body, and code styles keep truncated text aligned with surrounding typography. Place the component inside semantic text elements to preserve their visual hierarchy.\n * @tags test-case\n */\nexport const Typography = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 16rem\">\n      <h2 nve-text=\"heading lg\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <p nve-text=\"body\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></p>\n      <code nve-text=\"code sm muted\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></code>\n    </div>\n  `\n};\n\n/**\n * @summary Center truncation bias keeps units from either the start or end. Use end bias for shared suffixes and start bias for identifiers with meaningful endings.\n * @tags test-case\n */\nexport const Bias = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"center\" bias=\"start\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n      <nve-format-truncate position=\"center\" bias=\"end\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Character, word, and path strategies preserve complete graphemes or meaningful text units. Match the strategy to identifiers, labels, or file paths.\n * @tags test-case\n */\nexport const Strategy = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"center\" strategy=\"character\" preserve=\"8\">experiment-👩🏽‍💻-0123456789abcdef</nve-format-truncate>\n      <nve-format-truncate position=\"center\" strategy=\"word\" preserve=\"3\">NVIDIA autonomous vehicle training pipeline production run</nve-format-truncate>\n      <nve-format-truncate position=\"center\" strategy=\"path\" preserve=\"2\">/models/checkpoints/production/model.bin</nve-format-truncate>\n    </div>\n  `\n};\n\n\n/**\n * @summary Truncate applies inline to adjacent text nodes.\n * @tags test-case\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Truncate applies inline to heading text nodes.\n * @tags test-case\n */\nexport const Headings = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\">\n      <h2 nve-text=\"heading lg\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <h2 nve-text=\"heading\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <h2 nve-text=\"heading sm\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,70 @@
+{
+  "element": "nve-format-truncate",
+  "entrypoint": "@nvidia-elements/core/format-truncate/format-truncate.examples.json",
+  "items": [
+    {
+      "id": "format-truncate",
+      "name": "Default",
+      "template": "<div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n</div>\n",
+      "summary": "Start, center, and end positions keep the most useful part of constrained text. Choose the position that matches how users distinguish each value.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "format-truncate-typography",
+      "name": "Typography",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 16rem\">\n  <h2 nve-text=\"heading lg\">\n    <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  </h2>\n  <p nve-text=\"body\">\n    <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  </p>\n  <code nve-text=\"code sm muted\"\n    ><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></code\n  >\n</div>\n",
+      "summary": "Inherited heading, body, and code styles keep truncated text aligned with surrounding typography. Place the component inside semantic text elements to preserve their visual hierarchy.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "format-truncate-bias",
+      "name": "Bias",
+      "template": "<div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"center\" bias=\"start\" preserve=\"10\"\n    >sha256:1234567890abcdef1234567890abcdef</nve-format-truncate\n  >\n  <nve-format-truncate position=\"center\" bias=\"end\" preserve=\"10\"\n    >sha256:1234567890abcdef1234567890abcdef</nve-format-truncate\n  >\n</div>\n",
+      "summary": "Center truncation bias keeps units from either the start or end. Use end bias for shared suffixes and start bias for identifiers with meaningful endings.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "format-truncate-strategy",
+      "name": "Strategy",
+      "template": "<div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"center\" strategy=\"character\" preserve=\"8\"\n    >experiment-👩🏽‍💻-0123456789abcdef</nve-format-truncate\n  >\n  <nve-format-truncate position=\"center\" strategy=\"word\" preserve=\"3\"\n    >NVIDIA autonomous vehicle training pipeline production run</nve-format-truncate\n  >\n  <nve-format-truncate position=\"center\" strategy=\"path\" preserve=\"2\"\n    >/models/checkpoints/production/model.bin</nve-format-truncate\n  >\n</div>\n",
+      "summary": "Character, word, and path strategies preserve complete graphemes or meaningful text units. Match the strategy to identifiers, labels, or file paths.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "format-truncate-inline",
+      "name": "Inline",
+      "template": "<div nve-layout=\"row gap:sm\" style=\"max-width: 16rem\">\n  <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n</div>\n",
+      "summary": "Truncate applies inline to adjacent text nodes.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "format-truncate-headings",
+      "name": "Headings",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <h2 nve-text=\"heading lg\" style=\"width: 100%; max-width: 16rem\">\n    <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  </h2>\n  <h2 nve-text=\"heading\" style=\"width: 100%; max-width: 16rem\">\n    <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  </h2>\n  <h2 nve-text=\"heading sm\" style=\"width: 100%; max-width: 16rem\">\n    <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n  </h2>\n</div>\n",
+      "summary": "Truncate applies inline to heading text nodes.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region src/format-truncate/format-truncate.css?inline
+var e = ":host{position:relative;display:inline-block;max-inline-size:100%;min-inline-size:0}span{text-wrap:nowrap}[sizing-host]{display:block;opacity:0}[internal-host]{position:absolute;inset:0;overflow:hidden}slot{display:initial;position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=format-truncate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-truncate.js","names":[],"sources":["../../src/format-truncate/format-truncate.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  position: relative;\n  display: inline-block;\n  max-inline-size: 100%;\n  min-inline-size: 0;\n}\n\nspan {\n  text-wrap: nowrap;\n}\n\n[sizing-host] {\n  display: block;\n  opacity: 0;\n}\n\n[internal-host] {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\nslot {\n  display: initial;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/format-truncate/format-truncate2.js

@@ -0,0 +1,118 @@
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { typeSSR as t } from "../internal/controllers/type-ssr.controller.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import { normalizeTruncateString as i, normalizeTruncateText as a, truncateText as o } from "./utils.js";
+import s from "./format-truncate.js";
+import { LitElement as c, html as l } from "lit";
+import { property as u } from "lit/decorators/property.js";
+//#region src/format-truncate/format-truncate.ts
+var d = class extends c {
+	constructor(...e) {
+		super(...e), this.position = "start", this.strategy = "character", this.bias = "end", this.preserve = 6, this.#l = () => {
+			this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = n([s]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-format-truncate",
+			version: "2.5.0"
+		};
+	}
+	#e;
+	#t;
+	connectedCallback() {
+		super.connectedCallback(), e(this), this.#c(), this.requestUpdate();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#t?.disconnect();
+	}
+	connectedMoveCallback() {
+		this.#c(), this.requestUpdate();
+	}
+	render() {
+		let e = this.#n, t = this.#r(e);
+		return t === e ? this.removeAttribute("title") : this.title = e, l`<span internal-host aria-hidden="true">${t}</span><span sizing-host aria-hidden="true">${e}</span><slot @slotchange="${this.#l}"></slot>`;
+	}
+	get #n() {
+		let e = this.shadowRoot?.querySelector("slot:not([name])");
+		if (e) return a(e.assignedNodes({ flatten: !0 }));
+		let t = Array.from(this.childNodes ?? []).filter(m);
+		return t.length ? a(t) : i(this.textContent ?? "");
+	}
+	#r(e) {
+		let t = this.#a();
+		return o(e, {
+			position: this.position,
+			strategy: this.strategy,
+			bias: this.bias,
+			preserve: this.preserve,
+			availableWidth: this.#i,
+			measureText: t
+		});
+	}
+	get #i() {
+		let e = this.ownerDocument?.defaultView;
+		return !e || !this.shadowRoot?.querySelector("[internal-host]") ? Infinity : f(this, e);
+	}
+	#a() {
+		let e = this.ownerDocument?.defaultView, t = this.#s;
+		if (!e || !t) return () => 0;
+		let n = e.getComputedStyle(this);
+		t.font = n.font;
+		let r = p(n.letterSpacing), i = p(n.wordSpacing), a = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+		return (e) => this.#o(e, {
+			context: t,
+			letterSpacing: r,
+			wordSpacing: i,
+			graphemeSegmenter: a
+		});
+	}
+	#o(e, { context: t, letterSpacing: n, wordSpacing: r, graphemeSegmenter: i }) {
+		let a = i.segment(e), o = Array.from(e.matchAll(/\s/gu)).length;
+		return t.measureText(e).width + Math.max(0, Array.from(a).length - 1) * n + o * r;
+	}
+	get #s() {
+		return this.#e === void 0 && (this.#e = this.ownerDocument?.createElement("canvas").getContext("2d") ?? null), this.#e;
+	}
+	#c() {
+		typeof ResizeObserver > "u" || (this.#t ??= new ResizeObserver(() => {
+			this.isConnected && this.requestUpdate();
+		}), this.#t.disconnect(), this.#t.observe(this));
+	}
+	#l;
+};
+r([u({
+	type: String,
+	reflect: !0
+})], d.prototype, "position", void 0), r([u({
+	type: String,
+	reflect: !0
+})], d.prototype, "strategy", void 0), r([u({
+	type: String,
+	reflect: !0
+})], d.prototype, "bias", void 0), r([u({
+	type: Number,
+	reflect: !0
+})], d.prototype, "preserve", void 0), d = r([t()], d);
+function f(e, t) {
+	let n = t.getComputedStyle(e);
+	return Math.max(0, e.getBoundingClientRect().width - p(n.borderInlineStartWidth) - p(n.borderInlineEndWidth) - p(n.paddingInlineStart) - p(n.paddingInlineEnd));
+}
+function p(e) {
+	let t = Number.parseFloat(e);
+	return Number.isFinite(t) ? t : 0;
+}
+function m(e) {
+	return !h(e) || !e.getAttribute("slot");
+}
+function h(e) {
+	return e.nodeType === 1;
+}
+//#endregion
+export { d as FormatTruncate };
+
+//# sourceMappingURL=format-truncate2.js.map