@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/tag/tag.examples.json

@@ -0,0 +1,84 @@
+{
+  "element": "nve-tag",
+  "entrypoint": "@nvidia-elements/core/tag/tag.examples.json",
+  "items": [
+    {
+      "id": "core-tag_default",
+      "name": "Default",
+      "template": "<nve-tag>topic-tag</nve-tag>\n",
+      "summary": "Basic tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tag_closable",
+      "name": "Closable",
+      "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag closable>default-color</nve-tag>\n  <nve-tag closable color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag closable color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag closable color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag closable color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag closable color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag closable color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag closable color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag closable color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag closable color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag closable color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag closable color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag closable color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag closable color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag closable color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag closable color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag closable color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag closable color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag closable color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag closable color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag closable color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag closable color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag closable color=\"brand-green\">brand-green</nve-tag>\n</div>\n",
+      "summary": "Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tag_readonly",
+      "name": "Readonly",
+      "template": "<nve-tag readonly>topic-tag</nve-tag>\n",
+      "summary": "Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tag_group",
+      "name": "Group",
+      "template": "<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>3+</nve-tag>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"add\"></nve-icon-button>\n</div>\n",
+      "summary": "Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tag_color",
+      "name": "Color",
+      "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag>default-color</nve-tag>\n  <nve-tag color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag color=\"brand-green\">brand-green</nve-tag>\n</div>\n",
+      "summary": "Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tag_prominence",
+      "name": "Prominence",
+      "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag prominence=\"emphasis\" color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"brand-green\">brand-green</nve-tag>\n</div>\n",
+      "summary": "High prominence tags with emphasis styling for important categories and priority labels that require visual attention.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tag_overflow-single",
+      "name": "OverflowSingle",
+      "template": "<nve-tag style=\"--width: 150px\">some really long content</nve-tag>\n",
+      "summary": "Single tag with constrained width, with text overflow behavior and content truncation in limited space.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tag_overflow-max-width",
+      "name": "OverflowMaxWidth",
+      "template": "<style>\n  .limit-width {\n    --max-width: 100px;\n  }\n</style>\n<nve-tag class=\"limit-width\">two words</nve-tag>\n<nve-tag class=\"limit-width\">three words here</nve-tag>\n<nve-tag class=\"limit-width\">four words long here</nve-tag>\n",
+      "summary": "Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/tag/tag.js

@@ -0,0 +1,6 @@
+//#region src/tag/tag.css?inline
+var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--state-color-base: var(--nve-ref-color-blue-cobalt-1100);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--padding: 0 var(--nve-ref-size-200);--border: 0;--border-radius: var(--nve-ref-border-radius-full);--font-weight: var(--nve-ref-font-weight-regular);--cursor: pointer;--height: var(--nve-ref-size-600);--width: initial;--max-width: initial;display:inline-flex;user-select:none}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);padding:var(--padding);border:var(--border);border-radius:var(--border-radius);cursor:var(--cursor);height:var(--height);width:var(--width);max-width:var(--max-width);display:inline-flex;line-height:1.1em;place-items:center;place-content:center;white-space:nowrap}slot{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}::slotted([nve-text]){color:inherit!important}nve-icon{--color: inherit;cursor:var(--cursor)}:host([readonly]){--text-decoration: none;--cursor: cursor}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tag.js.map

package/dist/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.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  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: 0 var(--nve-ref-size-200);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --cursor: pointer;\n  --height: var(--nve-ref-size-600);\n  --width: initial;\n  --max-width: initial;\n  display: inline-flex;\n  user-select: none;\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  display: inline-flex;\n  line-height: 1.1em;\n  place-items: center;\n  place-content: center;\n  white-space: nowrap;\n}\n\nslot {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: block;\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\nnve-icon {\n  --color: inherit;\n  cursor: var(--cursor);\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n"],"mappings":""}

package/dist/tag/tag2.js

@@ -0,0 +1,45 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { BaseButton as t } from "../internal/base/button.js";
+import { I18nController as n } from "../internal/controllers/i18n.controller.js";
+import { TypeClosableController as r } from "../internal/controllers/type-closable.controller.js";
+import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
+import { colorStateStyles as a, useStyles as o } from "../internal/styles/index.js";
+import { Icon as s } from "../icon/icon2.js";
+import c from "./tag.js";
+import { html as l } from "lit";
+import { property as u } from "lit/decorators/property.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+//#region src/tag/tag.ts
+var f = class extends t {
+	static {
+		this.styles = o([a, c]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-tag",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [s.metadata.tag]: s };
+	}
+	#e = new n(this);
+	#t = new r(this);
+	render() {
+		return l`<div internal-host interaction-state focus-within><slot></slot>${this.closable ? l`<nve-icon part="icon" @click="${() => this.#t.close()}" container="flat" name="cancel" size="sm" role="img" aria-label="${d(this.i18n.close)}"></nve-icon>` : ""}</div>`;
+	}
+	constructor() {
+		super(), this.closable = !1, this.i18n = this.#e.i18n, this.type = "button";
+	}
+};
+e([u({ type: Boolean })], f.prototype, "closable", void 0), e([u({
+	type: String,
+	reflect: !0
+})], f.prototype, "color", void 0), e([u({
+	type: String,
+	reflect: !0
+})], f.prototype, "prominence", void 0), e([u({ type: Object })], f.prototype, "i18n", void 0), f = e([i()], f);
+//#endregion
+export { f as Tag };
+
+//# sourceMappingURL=tag2.js.map

package/dist/tag/tag2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag2.js","names":["#typeClosableController","#i18nController"],"sources":["../../src/tag/tag.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 { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport {\n  I18nController,\n  BaseButton,\n  TypeClosableController,\n  useStyles,\n  colorStateStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends BaseButton {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAyCO,IAAA,IAAA,cAAkB,EAAW;;gBAClB,EAAU,CAAC,GAAkB,EAAO,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAWD,KAAwC,IAAI,EAAqB,KAAK;CAKtE,KAA0B,IAAI,EAAuB,KAAK;CAE1D,SAAS;AACP,SAAO,CAAI,kEAGL,KAAK,WAAW,CAAI,uCAAsC,MAAA,EAA6B,OAAO,CAAC,oEAAkE,EAAU,KAAK,KAAK,MAAM,CAAC,iBAAgB,GAAG;;CAKvN,cAAc;AAEZ,EADA,OAAO,kBAzB+B,gBAWL,MAAA,EAAqB,MAetD,KAAK,OAAO;;;GA1Bb,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAG3B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAKzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAzB5B,GAAgB,CAAA,EAAA,EAAA"}

package/dist/test/demo.d.ts

@@ -0,0 +1,41 @@
+export interface DemoItem {
+    field1: {
+        label: string;
+        value: string;
+    };
+    field2: {
+        label: string;
+        value: string | number;
+    };
+    field3: {
+        label: string;
+        value: string | number;
+    };
+    field4: {
+        label: string;
+        value: string | number;
+    };
+    field5: {
+        label: string;
+        value: string | number;
+    };
+}
+/**
+ * demo data for examples only
+ */
+export declare function getItems(rows?: number): DemoItem[];
+/** demo data for datagrid examples only */
+export declare function grid(rows?: number, columns?: number): {
+    columns: {
+        id: string;
+        label: string;
+        sort: string;
+    }[];
+    rows: {
+        id: string;
+        cells: {
+            id: string;
+            label: string;
+        }[];
+    }[];
+};

package/dist/test/demo.js

@@ -0,0 +1,244 @@
+import { generateId as e } from "../internal/utils/dom.js";
+//#region src/test/demo.ts
+function t(t = "") {
+	let n = e().replace("_", ""), r = new Intl.DateTimeFormat("en-US", { dateStyle: "short" }).format(new Date(new Date(2020, 0, 1).getTime() + Math.random() * ((/* @__PURE__ */ new Date()).getTime() - new Date(2012, 0, 1).getTime())));
+	if (t === "models") {
+		let e = [
+			"finished",
+			"pending",
+			"running",
+			"queued"
+		][Math.floor(Math.random() * 4)], t = [
+			1,
+			4,
+			16,
+			32
+		][Math.floor(Math.random() * 4)], i = [
+			"GPT-2",
+			"BioBERT",
+			"PeopleNet",
+			"VehicleTypeNet",
+			"BioMegatron",
+			"FinMegatron"
+		][Math.floor(Math.random() * 6)];
+		return {
+			field1: {
+				label: "id",
+				value: n
+			},
+			field2: {
+				label: "status",
+				value: e
+			},
+			field3: {
+				label: "model",
+				value: i
+			},
+			field4: {
+				label: "nodes",
+				value: t
+			},
+			field5: {
+				label: "created",
+				value: r
+			}
+		};
+	} else if (t === "hardware") return [
+		{
+			field1: {
+				label: "id",
+				value: n
+			},
+			field2: {
+				label: "model",
+				value: "4090"
+			},
+			field3: {
+				label: "memory",
+				value: "24gb"
+			},
+			field4: {
+				label: "cores",
+				value: 16384
+			},
+			field5: {
+				label: "created",
+				value: r
+			}
+		},
+		{
+			field1: {
+				label: "id",
+				value: n
+			},
+			field2: {
+				label: "model",
+				value: "4080"
+			},
+			field3: {
+				label: "memory",
+				value: "16gb"
+			},
+			field4: {
+				label: "cores",
+				value: 9728
+			},
+			field5: {
+				label: "created",
+				value: r
+			}
+		},
+		{
+			field1: {
+				label: "id",
+				value: n
+			},
+			field2: {
+				label: "model",
+				value: "4070ti"
+			},
+			field3: {
+				label: "memory",
+				value: "12gb"
+			},
+			field4: {
+				label: "cores",
+				value: 7680
+			},
+			field5: {
+				label: "created",
+				value: r
+			}
+		},
+		{
+			field1: {
+				label: "id",
+				value: n
+			},
+			field2: {
+				label: "model",
+				value: "4070"
+			},
+			field3: {
+				label: "memory",
+				value: "12gb"
+			},
+			field4: {
+				label: "cores",
+				value: 5888
+			},
+			field5: {
+				label: "created",
+				value: r
+			}
+		},
+		{
+			field1: {
+				label: "id",
+				value: n
+			},
+			field2: {
+				label: "model",
+				value: "4060ti"
+			},
+			field3: {
+				label: "memory",
+				value: "16gb"
+			},
+			field4: {
+				label: "cores",
+				value: 4352
+			},
+			field5: {
+				label: "created",
+				value: r
+			}
+		},
+		{
+			field1: {
+				label: "id",
+				value: n
+			},
+			field2: {
+				label: "model",
+				value: "4060"
+			},
+			field3: {
+				label: "memory",
+				value: "8gb"
+			},
+			field4: {
+				label: "cores",
+				value: 3072
+			},
+			field5: {
+				label: "created",
+				value: r
+			}
+		}
+	][Math.floor(Math.random() * 6)];
+	else return {
+		field1: {
+			label: "id",
+			value: n
+		},
+		field2: {
+			label: "task",
+			value: [
+				"build",
+				"test",
+				"integration"
+			][Math.floor(Math.random() * 3)]
+		},
+		field3: {
+			label: "status",
+			value: [
+				"finished",
+				"pending",
+				"running",
+				"queued"
+			][Math.floor(Math.random() * 4)]
+		},
+		field4: {
+			label: "priority",
+			value: [
+				"p0",
+				"p1",
+				"p2"
+			][Math.floor(Math.random() * 3)]
+		},
+		field5: {
+			label: "created",
+			value: r
+		}
+	};
+}
+var n = {
+	"": { 10: Array(10).fill("").map(() => t("")) },
+	models: { 10: Array(10).fill("").map(() => t("models")) },
+	hardware: { 10: Array(10).fill("").map(() => t("hardware")) }
+};
+function r(e = 10) {
+	let r = window.NVE_SB_GLOBALS?.dataTheme ?? "", i = n[r];
+	return i[e] || (i[e] = Array(e).fill("").map(() => t(r))), [...i[e]];
+}
+function i(e = 9, t = 4) {
+	return {
+		columns: Array(t).fill("").map((e, t) => ({
+			id: `${t + 1}`,
+			label: `Column ${t + 1}`,
+			sort: "none"
+		})),
+		rows: Array(e).fill("").map((e, n) => ({
+			id: `${n + 1}`,
+			cells: Array(t).fill("").map((e, t) => ({
+				id: `${t + 1}`,
+				label: `Cell ${n + 1}-${t + 1}`
+			}))
+		}))
+	};
+}
+//#endregion
+export { r as getItems, i as grid };
+
+//# sourceMappingURL=demo.js.map

package/dist/test/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.js","names":[],"sources":["../../src/test/demo.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { generateId } from '@nvidia-elements/core/internal';\n\nexport interface DemoItem {\n  field1: { label: string; value: string };\n  field2: { label: string; value: string | number };\n  field3: { label: string; value: string | number };\n  field4: { label: string; value: string | number };\n  field5: { label: string; value: string | number };\n}\n\n/* default \"infrastructure\" */\nfunction createItem(type: '' | 'models' | 'hardware' | 'system' = ''): DemoItem {\n  const id = generateId().replace('_', '');\n  const created = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' }).format(\n    new Date(new Date(2020, 0, 1).getTime() + Math.random() * (new Date().getTime() - new Date(2012, 0, 1).getTime()))\n  );\n\n  if (type === 'models') {\n    const status = ['finished', 'pending', 'running', 'queued'][Math.floor(Math.random() * 4)]!;\n    const nodes = [1, 4, 16, 32][Math.floor(Math.random() * 4)]!;\n    const model = ['GPT-2', 'BioBERT', 'PeopleNet', 'VehicleTypeNet', 'BioMegatron', 'FinMegatron'][\n      Math.floor(Math.random() * 6)\n    ]!;\n    return {\n      field1: { label: 'id', value: id },\n      field2: { label: 'status', value: status },\n      field3: { label: 'model', value: model },\n      field4: { label: 'nodes', value: nodes },\n      field5: { label: 'created', value: created }\n    };\n  } else if (type === 'hardware') {\n    return [\n      {\n        field1: { label: 'id', value: id },\n        field2: { label: 'model', value: '4090' },\n        field3: { label: 'memory', value: '24gb' },\n        field4: { label: 'cores', value: 16384 },\n        field5: { label: 'created', value: created }\n      },\n      {\n        field1: { label: 'id', value: id },\n        field2: { label: 'model', value: '4080' },\n        field3: { label: 'memory', value: '16gb' },\n        field4: { label: 'cores', value: 9728 },\n        field5: { label: 'created', value: created }\n      },\n      {\n        field1: { label: 'id', value: id },\n        field2: { label: 'model', value: '4070ti' },\n        field3: { label: 'memory', value: '12gb' },\n        field4: { label: 'cores', value: 7680 },\n        field5: { label: 'created', value: created }\n      },\n      {\n        field1: { label: 'id', value: id },\n        field2: { label: 'model', value: '4070' },\n        field3: { label: 'memory', value: '12gb' },\n        field4: { label: 'cores', value: 5888 },\n        field5: { label: 'created', value: created }\n      },\n      {\n        field1: { label: 'id', value: id },\n        field2: { label: 'model', value: '4060ti' },\n        field3: { label: 'memory', value: '16gb' },\n        field4: { label: 'cores', value: 4352 },\n        field5: { label: 'created', value: created }\n      },\n      {\n        field1: { label: 'id', value: id },\n        field2: { label: 'model', value: '4060' },\n        field3: { label: 'memory', value: '8gb' },\n        field4: { label: 'cores', value: 3072 },\n        field5: { label: 'created', value: created }\n      }\n    ][Math.floor(Math.random() * 6)]!;\n  } else {\n    // default \"infrastructure\"\n    return {\n      field1: { label: 'id', value: id },\n      field2: { label: 'task', value: ['build', 'test', 'integration'][Math.floor(Math.random() * 3)]! },\n      field3: { label: 'status', value: ['finished', 'pending', 'running', 'queued'][Math.floor(Math.random() * 4)]! },\n      field4: { label: 'priority', value: ['p0', 'p1', 'p2'][Math.floor(Math.random() * 3)]! },\n      field5: { label: 'created', value: created }\n    };\n  }\n}\n\n// cache the result to reuse\nconst data: Record<string, Record<number, DemoItem[]>> = {\n  '': {\n    10: Array(10)\n      .fill('')\n      .map(() => createItem('')) // infrastructure\n  },\n  models: {\n    10: Array(10)\n      .fill('')\n      .map(() => createItem('models'))\n  },\n  hardware: {\n    10: Array(10)\n      .fill('')\n      .map(() => createItem('hardware'))\n  }\n};\n\n/**\n * demo data for examples only\n */\nexport function getItems(rows = 10): DemoItem[] {\n  const type = ((window as any).NVE_SB_GLOBALS?.dataTheme as '' | 'models' | 'hardware') ?? ''; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  const typeData = data[type]!;\n  if (typeData[rows]) {\n    return [...typeData[rows]];\n  } else {\n    typeData[rows] = Array(rows)\n      .fill('')\n      .map(() => createItem(type));\n    return [...typeData[rows]];\n  }\n}\n\n/** demo data for datagrid examples only */\nexport function grid(rows = 9, columns = 4) {\n  return {\n    columns: Array(columns)\n      .fill('')\n      .map((_, i) => {\n        return { id: `${i + 1}`, label: `Column ${i + 1}`, sort: 'none' };\n      }),\n    rows: Array(rows)\n      .fill('')\n      .map((_, ri) => {\n        return {\n          id: `${ri + 1}`,\n          cells: Array(columns)\n            .fill('')\n            .map((_, ci) => {\n              return { id: `${ci + 1}`, label: `Cell ${ri + 1}-${ci + 1}` };\n            })\n        };\n      })\n  };\n}\n"],"mappings":"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"}

package/dist/test/index.d.ts

@@ -0,0 +1,26 @@
+import { TemplateResult } from 'lit';
+export * from './demo.js';
+/**
+ * @deprecated
+ * Creates a test fixture DOM element for testing.
+ * Fixture is ready when the registry defines all custom elements.
+ */
+export declare function createFixture(template?: TemplateResult): Promise<HTMLElement>;
+/**
+ * @deprecated
+ * Removes test fixture DOM element.
+ */
+export declare function removeFixture(fixture: HTMLElement): void;
+/**
+ * @deprecated
+ * Awaits until Lit element has rendered and has no pending updates
+ */
+export declare function elementIsStable(element: any): Promise<any>;
+/**
+ * @deprecated
+ */
+export declare function emulateClick(component: HTMLElement | Element): void;
+/**
+ * @deprecated
+ */
+export declare function untilEvent(element: HTMLElement | Document, event: string): Promise<any>;

package/dist/test/index.js

@@ -0,0 +1,36 @@
+import { getItems as e, grid as t } from "./demo.js";
+import { render as n } from "lit";
+//#region src/test/index.ts
+async function r(e) {
+	let t = document.createElement("div");
+	return document.body.appendChild(t), e && n(e, t), await a(), t;
+}
+function i(e) {
+	e && document.body.removeChild(e);
+}
+async function a() {
+	let e = [...new Set(Array.from(document.querySelectorAll("*:not(:defined)")).filter((e) => e.tagName.includes("-")).map((e) => e.tagName.toLocaleLowerCase()))];
+	return new Promise((t, n) => {
+		let r = [];
+		Promise.all(e.map((e) => customElements.whenDefined(e))).then(() => t("")).catch((e) => n(e)), setTimeout(() => {
+			r.length && (n(""), console.log(`\x1b[91m Elements not defined: ${r}\x1b[0m`));
+		}, 5e3);
+	});
+}
+async function o(e) {
+	return e.updateComplete ? s(async () => await e.updateComplete ? Promise.resolve() : Promise.reject("Element did not stablize")) : Promise.reject(`${e.tagName.toLocaleLowerCase()} is not a defined lit element`);
+}
+function s(e, t = 10) {
+	return e().catch(() => t > 0 ? s(e, t--) : Promise.reject("Max attempts reached"));
+}
+function c(e) {
+	let t = new MouseEvent("mousedown", { bubbles: !0 }), n = new MouseEvent("pointerdown", { bubbles: !0 }), r = new MouseEvent("mouseup", { bubbles: !0 }), i = new MouseEvent("pointerup", { bubbles: !0 }), a = new MouseEvent("click", { bubbles: !0 });
+	e.dispatchEvent(t), e.dispatchEvent(n), e.dispatchEvent(r), e.dispatchEvent(i), e.dispatchEvent(a);
+}
+function l(e, t) {
+	return new Promise((n) => e.addEventListener(t, (e) => n(e)));
+}
+//#endregion
+export { r as createFixture, o as elementIsStable, c as emulateClick, e as getItems, t as grid, i as removeFixture, l as untilEvent };
+
+//# sourceMappingURL=index.js.map

package/dist/test/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/test/index.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 { render } from 'lit';\nexport * from './demo.js';\n\n/**\n * @deprecated\n * Creates a test fixture DOM element for testing.\n * Fixture is ready when the registry defines all custom elements.\n */\nexport async function createFixture(template?: TemplateResult): Promise<HTMLElement> {\n  const container = document.createElement('div');\n  document.body.appendChild(container);\n\n  if (template) {\n    render(template, container);\n  }\n\n  await waitForAllElementsToBeDefined();\n  return container;\n}\n\n/**\n * @deprecated\n * Removes test fixture DOM element.\n */\nexport function removeFixture(fixture: HTMLElement) {\n  if (fixture) {\n    document.body.removeChild(fixture);\n  }\n}\n\n/**\n * @deprecated\n * Find all undefined elements in the custom elements registry and wait until\n * the registry adds all elements https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined\n */\nasync function waitForAllElementsToBeDefined() {\n  const pendingElements = [\n    ...new Set(\n      Array.from(document.querySelectorAll('*:not(:defined)'))\n        .filter(e => e.tagName.includes('-'))\n        .map(e => e.tagName.toLocaleLowerCase())\n    )\n  ];\n  return new Promise((resolve, reject) => {\n    const undefinedElements: string[] = [];\n    Promise.all(pendingElements.map(e => customElements.whenDefined(e)))\n      .then(() => resolve(''))\n      .catch(e => reject(e));\n    setTimeout(() => {\n      if (undefinedElements.length) {\n        reject('');\n        console.log(`\\x1b[91m Elements not defined: ${undefinedElements}\\x1b[0m`);\n      }\n    }, 5000);\n  });\n}\n\n/**\n * @deprecated\n * Awaits until Lit element has rendered and has no pending updates\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport async function elementIsStable(element: any) {\n  if (element.updateComplete) {\n    return retry(async () =>\n      (await element.updateComplete) ? Promise.resolve() : Promise.reject('Element did not stablize')\n    );\n  } else {\n    return Promise.reject(`${element.tagName.toLocaleLowerCase()} is not a defined lit element`);\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction retry(fn: () => Promise<any>, maxTries = 10): Promise<any> {\n  return fn().catch(() => (maxTries > 0 ? retry(fn, maxTries--) : Promise.reject('Max attempts reached')));\n}\n\n/**\n * @deprecated\n */\nexport function emulateClick(component: HTMLElement | Element) {\n  const event1 = new MouseEvent('mousedown', { bubbles: true });\n  const event2 = new MouseEvent('pointerdown', { bubbles: true });\n  const event3 = new MouseEvent('mouseup', { bubbles: true });\n  const event4 = new MouseEvent('pointerup', { bubbles: true });\n  const event5 = new MouseEvent('click', { bubbles: true });\n  component.dispatchEvent(event1);\n  component.dispatchEvent(event2);\n  component.dispatchEvent(event3);\n  component.dispatchEvent(event4);\n  component.dispatchEvent(event5);\n}\n\n/**\n * @deprecated\n */\nexport function untilEvent(element: HTMLElement | Document, event: string) {\n  return new Promise<any>(resolve => element.addEventListener(event, e => resolve(e))); // eslint-disable-line @typescript-eslint/no-explicit-any\n}\n"],"mappings":";;;AAYA,eAAsB,EAAc,GAAiD;CACnF,IAAM,IAAY,SAAS,cAAc,MAAM;AAQ/C,QAPA,SAAS,KAAK,YAAY,EAAU,EAEhC,KACF,EAAO,GAAU,EAAU,EAG7B,MAAM,GAA+B,EAC9B;;AAOT,SAAgB,EAAc,GAAsB;AAClD,CAAI,KACF,SAAS,KAAK,YAAY,EAAQ;;AAStC,eAAe,IAAgC;CAC7C,IAAM,IAAkB,CACtB,GAAG,IAAI,IACL,MAAM,KAAK,SAAS,iBAAiB,kBAAkB,CAAC,CACrD,QAAO,MAAK,EAAE,QAAQ,SAAS,IAAI,CAAC,CACpC,KAAI,MAAK,EAAE,QAAQ,mBAAmB,CAAC,CAC3C,CACF;AACD,QAAO,IAAI,SAAS,GAAS,MAAW;EACtC,IAAM,IAA8B,EAAE;AAItC,EAHA,QAAQ,IAAI,EAAgB,KAAI,MAAK,eAAe,YAAY,EAAE,CAAC,CAAC,CACjE,WAAW,EAAQ,GAAG,CAAC,CACvB,OAAM,MAAK,EAAO,EAAE,CAAC,EACxB,iBAAiB;AACf,GAAI,EAAkB,WACpB,EAAO,GAAG,EACV,QAAQ,IAAI,kCAAkC,EAAkB,SAAS;KAE1E,IAAK;GACR;;AAQJ,eAAsB,EAAgB,GAAc;AAMhD,QALE,EAAQ,iBACH,EAAM,YACV,MAAM,EAAQ,iBAAkB,QAAQ,SAAS,GAAG,QAAQ,OAAO,2BAA2B,CAChG,GAEM,QAAQ,OAAO,GAAG,EAAQ,QAAQ,mBAAmB,CAAC,+BAA+B;;AAKhG,SAAS,EAAM,GAAwB,IAAW,IAAkB;AAClE,QAAO,GAAI,CAAC,YAAa,IAAW,IAAI,EAAM,GAAI,IAAW,GAAG,QAAQ,OAAO,uBAAuB,CAAE;;AAM1G,SAAgB,EAAa,GAAkC;CAC7D,IAAM,IAAS,IAAI,WAAW,aAAa,EAAE,SAAS,IAAM,CAAC,EACvD,IAAS,IAAI,WAAW,eAAe,EAAE,SAAS,IAAM,CAAC,EACzD,IAAS,IAAI,WAAW,WAAW,EAAE,SAAS,IAAM,CAAC,EACrD,IAAS,IAAI,WAAW,aAAa,EAAE,SAAS,IAAM,CAAC,EACvD,IAAS,IAAI,WAAW,SAAS,EAAE,SAAS,IAAM,CAAC;AAKzD,CAJA,EAAU,cAAc,EAAO,EAC/B,EAAU,cAAc,EAAO,EAC/B,EAAU,cAAc,EAAO,EAC/B,EAAU,cAAc,EAAO,EAC/B,EAAU,cAAc,EAAO;;AAMjC,SAAgB,EAAW,GAAiC,GAAe;AACzE,QAAO,IAAI,SAAa,MAAW,EAAQ,iBAAiB,IAAO,MAAK,EAAQ,EAAE,CAAC,CAAC"}

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/textarea/define.d.ts

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

package/dist/textarea/define.js

@@ -0,0 +1,9 @@
+import { define as e } from "../internal/utils/dom.js";
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Textarea as i } from "./textarea2.js";
+e(i), e(n), e(r), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/textarea/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/textarea/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 { Textarea } from '@nvidia-elements/core/textarea';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Textarea);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-textarea': Textarea;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAS,EAChB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/textarea/index.d.ts

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

package/dist/textarea/index.js

@@ -0,0 +1,2 @@
+import { Textarea as e } from "./textarea2.js";
+export { e as Textarea };

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,26 @@
+import { CSSResult } from 'lit';
+import { Control } from '../forms';
+/**
+ * @element nve-textarea
+ * @description A textarea is a control that enables users to enter and edit text.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/textarea
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --width
+ * @cssprop --min-height
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --cursor
+ * @cssprop --border
+ * @cssprop --color
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+ */
+export declare class Textarea extends Control {
+    static styles: CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+}

package/dist/textarea/textarea.examples.js

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

package/dist/textarea/textarea.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.examples.js","names":[],"sources":["../../src/textarea/textarea.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/forms/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Textarea',\n  component: 'nve-textarea',\n};\n\n/**\n * @summary Basic multi-line text input for longer content entry like comments, descriptions, or messages.\n */\nexport const Default = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textareas with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textareas with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>`\n};\n\n/**\n * @summary Textarea with built-in HTML validation showing required field error messages for form validation.\n */\nexport const ControlValidation = {\n  render: () => html`\n<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with custom columns and rows attributes for controlling initial size and dimensions.\n */\nexport const ColumnsAndRows = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};"],"mappings":";AAGA,IAAA,IAAS"}