@nvidia-elements/core 2.4.1 → 2.5.1

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.1"
 		};
 	}
 	static {

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "2.4.1",
+			version: "2.5.1",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-header",
-			version: "2.4.1",
+			version: "2.5.1",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	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.1"
 		};
 	}
 	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.1"
 		};
 	}
 	render() {

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "2.4.1",
+			version: "2.5.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-footer",
-			version: "2.4.1",
+			version: "2.5.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-header",
-			version: "2.4.1",
+			version: "2.5.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

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

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "2.4.1",
+			version: "2.5.1",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "2.4.1",
+			version: "2.5.1",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	static {

package/dist/dropdown-group/dropdown-group.js

@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "2.4.1",
+			version: "2.5.1",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends m(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "2.4.1",
+			version: "2.5.1",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	connectedCallback() {

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

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

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

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

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

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

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

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.4.1"
+			version: "2.5.1"
 		};
 	}
 	#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.1"
+		};
+	}
+	#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

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-truncate2.js","names":["#observeAvailableWidth","#resizeObserver","#slottedText","#renderText","#onSlotChange","#createTextMeasurer","#availableWidth","#textMeasurementContext","#measureText","#measurementContext"],"sources":["../../src/format-truncate/format-truncate.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles, typeSSR } from '@nvidia-elements/core/internal';\nimport { normalizeTruncateString, normalizeTruncateText, truncateText } from './utils.js';\nimport styles from './format-truncate.css?inline';\n\n/**\n * @element nve-format-truncate\n * @description Truncates text at its start, center, or end while preserving the full text for assistive technology.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-truncate/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-truncate\n * @slot - Text to truncate. The component flattens, trims, and normalizes mixed text and element nodes.\n * @beta\n */\n@typeSSR()\nexport class FormatTruncate extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-truncate',\n    version: '0.0.0'\n  };\n\n  /**\n   * Location of the ellipsis. Use start or end to preserve one edge, or center to preserve both edges.\n   */\n  @property({ type: String, reflect: true }) position: 'start' | 'center' | 'end' = 'start';\n\n  /**\n   * Text unit used for center truncation. Character preserves graphemes, word preserves words, and path preserves path segments.\n   */\n  @property({ type: String, reflect: true }) strategy: 'character' | 'word' | 'path' = 'character';\n\n  /**\n   * Edge favored by center truncation. The favored edge keeps at least the configured number of units.\n   */\n  @property({ type: String, reflect: true }) bias: 'start' | 'end' = 'end';\n\n  /**\n   * Number of strategy units retained at the biased edge during center truncation.\n   */\n  @property({ type: Number, reflect: true }) preserve = 6;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #measurementContext?: CanvasRenderingContext2D | null;\n  #resizeObserver?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    this.#observeAvailableWidth();\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.disconnect();\n  }\n\n  connectedMoveCallback(): void {\n    this.#observeAvailableWidth();\n    this.requestUpdate();\n  }\n\n  override render(): TemplateResult {\n    const text = this.#slottedText;\n    const truncatedText = this.#renderText(text);\n\n    if (truncatedText !== text) this.title = text;\n    else this.removeAttribute('title');\n\n    return html`<span internal-host aria-hidden=\"true\">${truncatedText}</span><span sizing-host aria-hidden=\"true\">${text}</span><slot @slotchange=${this.#onSlotChange}></slot>`;\n  }\n\n  get #slottedText(): string {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (slot) return normalizeTruncateText(slot.assignedNodes({ flatten: true }));\n\n    const nodes = Array.from(this.childNodes ?? []).filter(isDefaultSlotNode);\n    return nodes.length ? normalizeTruncateText(nodes) : normalizeTruncateString(this.textContent ?? '');\n  }\n\n  #renderText(text: string): string {\n    const measureText = this.#createTextMeasurer();\n\n    return truncateText(text, {\n      position: this.position,\n      strategy: this.strategy,\n      bias: this.bias,\n      preserve: this.preserve,\n      availableWidth: this.#availableWidth,\n      measureText\n    });\n  }\n\n  get #availableWidth(): number {\n    const view = this.ownerDocument?.defaultView;\n    if (!view || !this.shadowRoot?.querySelector('[internal-host]')) return Number.POSITIVE_INFINITY;\n\n    return getContentWidth(this, view);\n  }\n\n  #createTextMeasurer(): (text: string) => number {\n    const view = this.ownerDocument?.defaultView;\n    const context = this.#textMeasurementContext;\n    if (!view || !context) return () => 0;\n\n    const computedStyles = view.getComputedStyle(this);\n    context.font = computedStyles.font;\n\n    const letterSpacing = cssPixelValue(computedStyles.letterSpacing);\n    const wordSpacing = cssPixelValue(computedStyles.wordSpacing);\n    const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n\n    return text => this.#measureText(text, { context, letterSpacing, wordSpacing, graphemeSegmenter });\n  }\n\n  #measureText(\n    text: string,\n    {\n      context,\n      letterSpacing,\n      wordSpacing,\n      graphemeSegmenter\n    }: {\n      context: CanvasRenderingContext2D;\n      letterSpacing: number;\n      wordSpacing: number;\n      graphemeSegmenter: Intl.Segmenter;\n    }\n  ): number {\n    const graphemeSegments = graphemeSegmenter.segment(text);\n    const whitespaceCount = Array.from(text.matchAll(/\\s/gu)).length;\n\n    return (\n      context.measureText(text).width +\n      Math.max(0, Array.from(graphemeSegments).length - 1) * letterSpacing +\n      whitespaceCount * wordSpacing\n    );\n  }\n\n  get #textMeasurementContext(): CanvasRenderingContext2D | null {\n    if (this.#measurementContext === undefined) {\n      this.#measurementContext = this.ownerDocument?.createElement('canvas').getContext('2d') ?? null;\n    }\n\n    return this.#measurementContext;\n  }\n\n  #observeAvailableWidth(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.#resizeObserver ??= new ResizeObserver(() => {\n      if (this.isConnected) this.requestUpdate();\n    });\n    this.#resizeObserver.disconnect();\n    this.#resizeObserver.observe(this);\n  }\n\n  #onSlotChange = (): void => {\n    this.requestUpdate();\n  };\n}\n\nfunction getContentWidth(element: HTMLElement, view: Window): number {\n  const computedStyles = view.getComputedStyle(element);\n  return Math.max(\n    0,\n    element.getBoundingClientRect().width -\n      cssPixelValue(computedStyles.borderInlineStartWidth) -\n      cssPixelValue(computedStyles.borderInlineEndWidth) -\n      cssPixelValue(computedStyles.paddingInlineStart) -\n      cssPixelValue(computedStyles.paddingInlineEnd)\n  );\n}\n\nfunction cssPixelValue(value: string): number {\n  const parsed = Number.parseFloat(value);\n  return Number.isFinite(parsed) ? parsed : 0;\n}\n\nfunction isDefaultSlotNode(node: Node): boolean {\n  return !isElementNode(node) || !node.getAttribute('slot');\n}\n\nfunction isElementNode(node: Node): node is Element {\n  return node.nodeType === 1;\n}\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export * from './format-truncate.js';

package/dist/format-truncate/index.js

@@ -0,0 +1,2 @@
+import { FormatTruncate as e } from "./format-truncate2.js";
+export { e as FormatTruncate };

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

@@ -0,0 +1,14 @@
+type TruncatePosition = 'start' | 'center' | 'end';
+type TruncateStrategy = 'character' | 'word' | 'path';
+type TruncateBias = 'start' | 'end';
+export declare function normalizeTruncateText(nodes: Iterable<Node>): string;
+export declare function normalizeTruncateString(text: string): string;
+export declare function truncateText(text: string, { position, strategy, bias, preserve, availableWidth, measureText }: {
+    position: TruncatePosition;
+    strategy: TruncateStrategy;
+    bias: TruncateBias;
+    preserve: number;
+    availableWidth: number;
+    measureText: (value: string) => number;
+}): string;
+export {};