@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/dropzone/dropzone2.js

@@ -0,0 +1,104 @@
+import { formatFileSize as e } from "../internal/utils/strings.js";
+import { removeEmptyTextNode as t } from "../internal/utils/dom.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { I18nController as r } from "../internal/controllers/i18n.controller.js";
+import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
+import { useStyles as a } from "../internal/styles/index.js";
+import { Icon as o } from "../icon/icon2.js";
+import s from "./dropzone.js";
+import { fileSizeValidator as c, fileTypeValidator as l, getFileTypeSpecifiers as u } from "./dropzone.util.js";
+import { LitElement as d, html as f } from "lit";
+import { property as p } from "lit/decorators/property.js";
+import { query as m } from "lit/decorators/query.js";
+import { FormControlMixin as h } from "@nvidia-elements/forms/mixin";
+//#region src/dropzone/dropzone.ts
+var g = class extends h(d) {
+	#e = new r(this);
+	static {
+		this.styles = a([s]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-dropzone",
+			version: "0.0.3",
+			validators: [l, c],
+			valueSchema: {
+				type: "array",
+				items: {
+					type: "object",
+					properties: {
+						name: { type: "string" },
+						size: { type: "number" },
+						type: { type: "string" }
+					}
+				}
+			}
+		};
+	}
+	static {
+		this.elementDefinitions = { [o.metadata.tag]: o };
+	}
+	formResetCallback() {
+		this.value = [], this.requestUpdate();
+	}
+	constructor() {
+		super(), this.accept = "image/gif, image/jpeg, image/png, image/svg+xml", this.maxFileSize = 2 * 1024 ** 2, this.i18n = this.#e.i18n, this.value = [];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("nve-control", ""), globalThis.document.addEventListener("dragover", this.#t), globalThis.document.addEventListener("drop", this.#t);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), globalThis.document.removeEventListener("dragover", this.#t), globalThis.document.removeEventListener("drop", this.#t);
+	}
+	#t(e) {
+		e.preventDefault(), e.stopPropagation();
+	}
+	#n() {
+		this.fileInput.click();
+	}
+	#r(e) {
+		this.#t(e), this.#u(!0);
+	}
+	#i(e) {
+		this.#t(e), this.#u(!0);
+	}
+	#a(e) {
+		this.#t(e), this.#u(!1);
+	}
+	#o(e) {
+		this.#t(e), this.#u(!1);
+		let t = Array.from(e.dataTransfer.files);
+		this.#c(t);
+	}
+	#s(e) {
+		this.#t(e);
+		let t = Array.from(this.fileInput.files);
+		this.#c(t), this.fileInput.value = "";
+	}
+	#c(e) {
+		this.value = [...this.value ?? [], ...e], this.dispatchChangeEvent();
+	}
+	#l(e) {
+		let t = u(e);
+		if (t.length === 1) return t[0].toUpperCase();
+		let n = t.pop();
+		return `${t.join(", ").toUpperCase()} or ${n.toUpperCase()}`;
+	}
+	#u(e) {
+		this.toggleAttribute("highlighted", e);
+	}
+	#d(e) {
+		e.target.assignedNodes().forEach((e) => t(e));
+	}
+	render() {
+		return f`<div internal-host><div class="container" @click="${this.#n}" @dragenter="${this.#r}" @dragover="${this.#i}" @dragleave="${this.#a}" @drop="${this.#o}"><svg class="border" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="none" rx="4" ry="4" stroke="currentColor" stroke-width="2" stroke-dasharray="6,6" stroke-dashoffset="0" stroke-linecap="square"/></svg><slot name="icon"><nve-icon part="icon" class="icon" name="upload"></nve-icon></slot><slot @slotchange="${this.#d}"><div class="text-center"><div class="text-bold">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class="text-emphasized">${this.i18n.browseFiles}</span></div><div class="text-muted">${this.#l(this.accept)} — ${this.i18n.maxFileSize} ${e(this.maxFileSize)}</div></div></slot><input id="dropzone-input" type="file" accept="${this.accept}" @change="${this.#s}" multiple="multiple" hidden></div></div>`;
+	}
+};
+n([p()], g.prototype, "accept", void 0), n([p({
+	attribute: "max-file-size",
+	type: Number
+})], g.prototype, "maxFileSize", void 0), n([p({ type: Object })], g.prototype, "i18n", void 0), n([m("#dropzone-input")], g.prototype, "fileInput", void 0), g = n([i()], g);
+//#endregion
+export { g as Dropzone };
+
+//# sourceMappingURL=dropzone2.js.map

package/dist/dropzone/dropzone2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone2.js","names":["#i18nController","#preventDefaults","#toggleHighlighted","#addFiles","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","#handleFileInputChange"],"sources":["../../src/dropzone/dropzone.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { formatFileSize, useStyles, removeEmptyTextNode, I18nController, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - use only when custom messaging requires it\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - default slot for icon\n * @slot content - default slot for content\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n * @stable false\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n  @property()\n  accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n  @property({ attribute: 'max-file-size', type: Number })\n  maxFileSize: number = 2 * 1024 ** 2;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @query('#dropzone-input')\n  private fileInput: HTMLInputElement;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropzone',\n    version: '0.0.0',\n    validators: [fileTypeValidator, fileSizeValidator],\n    valueSchema: {\n      type: 'array' as const,\n      items: {\n        type: 'object' as const,\n        properties: {\n          name: { type: 'string' as const },\n          size: { type: 'number' as const },\n          type: { type: 'string' as const }\n        }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  formResetCallback() {\n    this.value = [];\n    this.requestUpdate();\n  }\n\n  constructor() {\n    super();\n    this.value = [];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    globalThis.document.addEventListener('dragover', this.#preventDefaults);\n    globalThis.document.addEventListener('drop', this.#preventDefaults);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n    globalThis.document.removeEventListener('drop', this.#preventDefaults);\n  }\n\n  #preventDefaults(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  #handleClick() {\n    this.fileInput.click();\n  }\n\n  #handleDragEnter(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragOver(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragLeave(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n  }\n\n  #handleDrop(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n\n    const files = Array.from(event.dataTransfer!.files);\n    this.#addFiles(files);\n  }\n\n  #handleFileInputChange(event: Event) {\n    this.#preventDefaults(event);\n\n    const files = Array.from(this.fileInput.files!);\n    this.#addFiles(files);\n\n    this.fileInput.value = '';\n  }\n\n  #addFiles(files: File[]) {\n    this.value = [...(this.value ?? []), ...files];\n    this.dispatchChangeEvent();\n  }\n\n  #formatFileTypeSpecifiers(acceptTypes: string) {\n    const types = getFileTypeSpecifiers(acceptTypes);\n\n    if (types.length === 1) {\n      return types[0]!.toUpperCase();\n    }\n\n    const lastType = types.pop();\n    return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n  }\n\n  #toggleHighlighted(highlighted: boolean) {\n    this.toggleAttribute('highlighted', highlighted);\n  }\n\n  #removeEmptyNodes(e: Event) {\n    (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n  }\n\n  render() {\n    return html`<div internal-host>\n      <div class=\"container\"\n        @click=${this.#handleClick} \n        @dragenter=${this.#handleDragEnter}\n        @dragover=${this.#handleDragOver}\n        @dragleave=${this.#handleDragLeave}\n        @drop=${this.#handleDrop}>\n        <svg class=\"border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n        </svg>\n        <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n        <slot @slotchange=${this.#removeEmptyNodes}>\n          <div class=\"text-center\">\n            <div class=\"text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n            <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} &mdash; ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n          </div>\n        </slot>\n        <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n      </div>\n    </div>`;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCO,IAAA,IAAA,cAAuB,EAA4C,EAAW,CAAC;CAOpF,KAAwC,IAAI,EAAqB,KAAK;;gBAUtD,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,YAAY,CAAC,GAAmB,EAAkB;GAClD,aAAa;IACX,MAAM;IACN,OAAO;KACL,MAAM;KACN,YAAY;MACV,MAAM,EAAE,MAAM,UAAmB;MACjC,MAAM,EAAE,MAAM,UAAmB;MACjC,MAAM,EAAE,MAAM,UAAA;;;;GAIrB;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAED,oBAAoB;AAElB,EADA,KAAK,QAAQ,EAAE,EACf,KAAK,eAAe;;CAGtB,cAAc;AAEZ,EADA,OAAO,gBA5CQ,sEAGK,IAAI,QAAQ,eAOC,MAAA,EAAqB,MAmCtD,KAAK,QAAQ,EAAE;;CAGjB,oBAA0B;AAIxB,EAHA,MAAM,mBAAmB,EACzB,KAAK,aAAa,eAAe,GAAG,EACpC,WAAW,SAAS,iBAAiB,YAAY,MAAA,EAAsB,EACvE,WAAW,SAAS,iBAAiB,QAAQ,MAAA,EAAsB;;CAGrE,uBAA6B;AAG3B,EAFA,MAAM,sBAAsB,EAC5B,WAAW,SAAS,oBAAoB,YAAY,MAAA,EAAsB,EAC1E,WAAW,SAAS,oBAAoB,QAAQ,MAAA,EAAsB;;CAGxE,GAAiB,GAAc;AAE7B,EADA,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;;CAGzB,KAAe;AACb,OAAK,UAAU,OAAO;;CAGxB,GAAiB,GAAkB;AAEjC,EADA,MAAA,EAAsB,EAAM,EAC5B,MAAA,EAAwB,GAAK;;CAG/B,GAAgB,GAAkB;AAEhC,EADA,MAAA,EAAsB,EAAM,EAC5B,MAAA,EAAwB,GAAK;;CAG/B,GAAiB,GAAkB;AAEjC,EADA,MAAA,EAAsB,EAAM,EAC5B,MAAA,EAAwB,GAAM;;CAGhC,GAAY,GAAkB;AAE5B,EADA,MAAA,EAAsB,EAAM,EAC5B,MAAA,EAAwB,GAAM;EAE9B,IAAM,IAAQ,MAAM,KAAK,EAAM,aAAc,MAAM;AACnD,QAAA,EAAe,EAAM;;CAGvB,GAAuB,GAAc;AACnC,QAAA,EAAsB,EAAM;EAE5B,IAAM,IAAQ,MAAM,KAAK,KAAK,UAAU,MAAO;AAG/C,EAFA,MAAA,EAAe,EAAM,EAErB,KAAK,UAAU,QAAQ;;CAGzB,GAAU,GAAe;AAEvB,EADA,KAAK,QAAQ,CAAC,GAAI,KAAK,SAAS,EAAE,EAAG,GAAG,EAAM,EAC9C,KAAK,qBAAqB;;CAG5B,GAA0B,GAAqB;EAC7C,IAAM,IAAQ,EAAsB,EAAY;AAEhD,MAAI,EAAM,WAAW,EACnB,QAAO,EAAM,GAAI,aAAa;EAGhC,IAAM,IAAW,EAAM,KAAK;AAC5B,SAAO,GAAG,EAAM,KAAK,KAAK,CAAC,aAAa,CAAC,MAAM,EAAU,aAAa;;CAGxE,GAAmB,GAAsB;AACvC,OAAK,gBAAgB,eAAe,EAAY;;CAGlD,GAAkB,GAAU;AACzB,IAAE,OAA2B,eAAe,CAAC,SAAS,MAAe,EAAoB,EAAK,CAAC;;CAGlG,SAAS;AACP,SAAO,CAAI,qDAEE,MAAA,EAAkB,gBACd,MAAA,EAAsB,eACvB,MAAA,EAAqB,gBACpB,MAAA,EAAsB,WAC3B,MAAA,EAAiB,4WAKL,MAAA,EAAuB,oDAEd,KAAK,KAAK,YAAY,GAAG,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK,GAAG,iCAAiC,KAAK,KAAK,YAAY,uCAC/G,MAAA,EAA+B,KAAK,OAAO,CAAC,KAAW,KAAK,KAAK,YAAY,GAAG,EAAe,KAAK,YAAY,CAAC,oEAG/F,KAAK,OAAO,aAAW,MAAA,EAA4B;;;GAjJxG,GAAU,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAGV,EAAS;CAAE,WAAW;CAAiB,MAAM;CAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAQtD,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAE1B,EAAM,kBAAkB,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAf1B,GAAgB,CAAA,EAAA,EAAA"}

package/dist/dropzone/index.d.ts

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

package/dist/dropzone/index.js

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

package/dist/file/define.d.ts

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

package/dist/file/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 { File as i } from "./file2.js";
+e(i), e(n), e(r), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/file/define.js.map

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

package/dist/file/file.d.ts

@@ -0,0 +1,27 @@
+import { CSSResult } from 'lit';
+import { Control } from '../forms';
+/**
+ * @element nve-file
+ * @description A file picker is a control that enables users to choose a file value.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/file
+ * @cssprop --background
+ * @cssprop --padding
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --font-weight
+ * @cssprop --font-size
+ * @cssprop --text-decoration
+ * @cssprop --cursor
+ * @cssprop --gap
+ * @cssprop --height
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+ */
+export declare class File extends Control {
+    static styles: CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    connectedCallback(): void;
+}

package/dist/file/file.examples.js

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

package/dist/file/file.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.examples.js","names":[],"sources":["../../src/file/file.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/file/define.js';\n\nexport default {\n  title: 'Elements/File',\n  component: 'nve-file',\n};\n\n/**\n * @summary Basic file input with label and validation message. Use for simple file upload fields in forms.\n */\nexport const Default = {\n  render: () => html`\n<nve-file>\n  <label>file</label>\n  <input type=\"file\" />\n  <nve-control-message>message</nve-control-message>\n</nve-file>\n`\n};\n\n/**\n * @summary Vertical layout file inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file>\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file>\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file>\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n\n  <nve-file>\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>`\n};\n\n/**\n * @summary Horizontal layout file inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n\n  <nve-file layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/file/file.examples.json

@@ -0,0 +1,37 @@
+{
+  "element": "nve-file",
+  "entrypoint": "@nvidia-elements/core/file/file.examples.json",
+  "items": [
+    {
+      "id": "core-file_default",
+      "name": "Default",
+      "template": "<nve-file>\n  <label>file</label>\n  <input type=\"file\" />\n  <nve-control-message>message</nve-control-message>\n</nve-file>\n",
+      "summary": "Basic file input with label and validation message. Use for simple file upload fields in forms.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-file_vertical",
+      "name": "Vertical",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file>\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
+      "summary": "Vertical layout file inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-file_horizontal",
+      "name": "Horizontal",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
+      "summary": "Horizontal layout file inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/file/file.global.js

@@ -0,0 +1,6 @@
+//#region src/file/file.global.css?inline
+var e = "nve-file>input{color:var(--color)}nve-file>input::file-selector-button{background:var(--background);padding:var(--padding);height:var(--height);width:var(--width);border-radius:var(--border-radius);border:var(--border);text-decoration:var(--text-decoration);font-weight:var(--font-weight);font-size:var(--font-size);cursor:var(--cursor);gap:var(--gap);margin-inline-end:var(--nve-ref-space-sm);display:inline-flex;place-items:center;appearance:none;line-height:1.2em}nve-file>input::file-selector-button:hover{--color: var(--nve-sys-interaction-hover-color);--background: var(--nve-sys-interaction-background)}nve-file>input::file-selector-button:active{--color: var(--nve-sys-interaction-active-color);--background: var(--nve-sys-interaction-background)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=file.global.js.map

package/dist/file/file.global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.global.js","names":[],"sources":["../../src/file/file.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-file > input,\nnve-file > input {\n  color: var(--color);\n}\n\nnve-file > input::file-selector-button,\nnve-file > input::file-selector-button {\n  background: var(--background);\n  padding: var(--padding);\n  height: var(--height);\n  width: var(--width);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  text-decoration: var(--text-decoration);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  gap: var(--gap);\n  margin-inline-end: var(--nve-ref-space-sm);\n  display: inline-flex;\n  place-items: center;\n  appearance: none;\n  line-height: 1.2em;\n}\n\nnve-file > input::file-selector-button:hover,\nnve-file > input::file-selector-button:hover {\n  --color: var(--nve-sys-interaction-hover-color);\n  --background: var(--nve-sys-interaction-background);\n}\n\nnve-file > input::file-selector-button:active,\nnve-file > input::file-selector-button:active {\n  --color: var(--nve-sys-interaction-active-color);\n  --background: var(--nve-sys-interaction-background);\n}\n"],"mappings":""}

package/dist/file/file.js

@@ -0,0 +1,6 @@
+//#region src/file/file.css?inline
+var e = ":host{--background: var(--nve-sys-interaction-background);--padding: 0 var(--nve-ref-size-300);--border-radius: var(--nve-ref-border-radius-lg);--border: 0;--font-weight: var(--nve-ref-font-weight-semibold);--font-size: var(--nve-ref-font-size-200);--text-decoration: none;--cursor: pointer;--gap: var(--nve-ref-space-xxs);--height: var(--nve-ref-size-800);width:100%}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=file.js.map

package/dist/file/file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.js","names":[],"sources":["../../src/file/file.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(--nve-sys-interaction-background);\n  --padding: 0 var(--nve-ref-size-300);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --border: 0;\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-200);\n  --text-decoration: none;\n  --cursor: pointer;\n  --gap: var(--nve-ref-space-xxs);\n  --height: var(--nve-ref-size-800);\n  width: 100%;\n}\n"],"mappings":""}

package/dist/file/file2.js

@@ -0,0 +1,24 @@
+import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import { Control as n } from "../forms/control/control2.js";
+import r from "./file.js";
+import i from "./file.global.js";
+//#region src/file/file.ts
+var a = class extends n {
+	static {
+		this.styles = t([...n.styles, r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-file",
+			version: "0.0.3"
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this, i);
+	}
+};
+//#endregion
+export { a as File };
+
+//# sourceMappingURL=file2.js.map

package/dist/file/file2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file2.js","names":[],"sources":["../../src/file/file.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { appendRootNodeStyle, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './file.css?inline';\nimport globalStyles from './file.global.css?inline';\n\n/**\n * @element nve-file\n * @description A file picker is a control that enables users to choose a file value.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/file\n * @cssprop --background\n * @cssprop --padding\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --text-decoration\n * @cssprop --cursor\n * @cssprop --gap\n * @cssprop --height\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\nexport class File extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-file',\n    version: '0.0.0'\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;AA0BA,IAAa,IAAb,cAA0B,EAAQ;;gBACH,EAAU,CAAC,GAAG,EAAQ,QAAQ,EAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACV;;CAED,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa"}

package/dist/file/index.d.ts

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

package/dist/file/index.js

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

package/dist/forms/actions.examples.js

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

package/dist/forms/actions.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.examples.js","names":[],"sources":["../../src/forms/actions.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/input/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'nve-input'\n};\n\n/**\n * @summary Input with action buttons for search and clear, providing quick access to common operations.\n */\nexport const SearchClear = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>label</label>\n  <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n  <input type=\"text\" />\n  <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n  }\n}\n\n/**\n * @summary Label with an information button to provide contextual help or more details about the field.\n */\nexport const LabelAction = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>label</label>\n  <nve-icon-button icon-name=\"information-circle-stroke\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n  }\n}\n\n/**\n * @summary Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.\n */\nexport const PrefixSuffix = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>label</label>\n  <nve-button container=\"flat\" readonly>https://</nve-button>\n  <input type=\"text\" />\n  <nve-button container=\"flat\" readonly>.com</nve-button>\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n  }\n}"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/forms/actions.examples.json

@@ -0,0 +1,33 @@
+{
+  "element": "nve-input",
+  "entrypoint": "@nvidia-elements/core/forms/actions.examples.json",
+  "items": [
+    {
+      "id": "core-forms-actions_search-clear",
+      "name": "SearchClear",
+      "template": "<nve-input>\n  <label>label</label>\n  <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n  <input type=\"text\" />\n  <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Input with action buttons for search and clear, providing quick access to common operations.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-forms-actions_label-action",
+      "name": "LabelAction",
+      "template": "<nve-input>\n  <label>label</label>\n  <nve-icon-button\n    icon-name=\"information-circle-stroke\"\n    container=\"flat\"\n    aria-label=\"more details\"\n    slot=\"label\"\n  ></nve-icon-button>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Label with an information button to provide contextual help or more details about the field.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-forms-actions_prefix-suffix",
+      "name": "PrefixSuffix",
+      "template": "<nve-input>\n  <label>label</label>\n  <nve-button container=\"flat\" readonly>https://</nve-button>\n  <input type=\"text\" />\n  <nve-button container=\"flat\" readonly>.com</nve-button>\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
+      "summary": "Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    }
+  ]
+}

package/dist/forms/control/control.d.ts

@@ -0,0 +1,59 @@
+import { TemplateResult, LitElement, nothing } from 'lit';
+/**
+ * @element nve-control
+ * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/forms
+ * @slot - Control input element
+ * @slot label - Label element
+ * @cssprop --cursor
+ * @cssprop --accent-color
+ * @cssprop --color
+ * @cssprop --label-color
+ * @cssprop --label-width
+ * @cssprop --label-font-weight
+ * @cssprop --label-font-size
+ * @cssprop --control-width
+ * @cssprop --control-height
+
+ * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
+ * @package true
+ */
+export declare class Control extends LitElement {
+    #private;
+    /** Set current visaul state for control. This overrides any validation states active. */
+    status: 'warning' | 'error' | 'success' | 'disabled';
+    /** Set current control + label + control message layout. Layouts will collapse based on available container space. */
+    layout: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';
+    /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */
+    fitText: boolean;
+    /** Sets the input to match native default content block */
+    fitContent: boolean;
+    /** Enables internal string values to update for internationalization. */
+    i18n: Partial<import('../../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    /** Set the visual prominence of the control */
+    prominence: 'muted';
+    /** @private */
+    get input(): HTMLInputElement;
+    /** @private */
+    protected get prefixContent(): typeof nothing | TemplateResult;
+    /** @private */
+    protected get suffixContent(): typeof nothing | TemplateResult;
+    protected nveControl: string;
+    /** @private */
+    _internals: ElementInternals;
+    protected _associateDatalist: boolean;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    render(): TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Resets control value to initial attribute value and clears any active validation rules. */
+    reset(): void;
+    protected showPicker(): void;
+}

package/dist/forms/control/control.examples.js

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

package/dist/forms/control/control.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.examples.js","names":[],"sources":["../../../src/forms/control/control.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/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'nve-control'\n}\n\n/**\n * @summary Basic form control wrapper with label, input, and validation message structure.\n * @tags test-case\n */\nexport const Default = {\n  render: () => html`\n<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Responsive form controls with layout adaptation in resizable containers.\n * @tags test-case\n */\nexport const Responsive = {\n  render: () => html`\n  <div nve-layout=\"column gap:lg\" style=\"padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px;\">\n    <nve-input layout=\"horizontal\">\n      <label>text label</label>\n      <input />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n    <nve-select layout=\"horizontal\">\n      <label>select label</label>\n      <select>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </select>\n      <nve-control-message>message</nve-control-message>\n    </nve-select>\n    <nve-search layout=\"horizontal-inline\">\n      <label>search label</label>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-checkbox-group layout=\"horizontal-inline\">\n      <label>checkbox label</label>\n      <nve-checkbox>\n        <label>local</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>staging</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>production</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n      </nve-checkbox>\n      <nve-control-message>message</nve-control-message>\n    </nve-checkbox-group>\n    <nve-range layout=\"horizontal-inline\">\n      <label>label</label>\n      <input type=\"range\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-range>\n    <nve-textarea layout=\"horizontal-inline\">\n      <label>label</label>\n      <textarea></textarea>\n    </nve-textarea>\n  </div>\n  `\n};\n\n/**\n * @summary All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.\n * @tags test-case\n */\nexport const Layout = {\n  render: () => html`\n<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n\n    nve-control {\n      outline: 1px solid red;\n    }\n\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>`\n};\n\n/**\n * @summary Form control with HTML5 validation showing required field error messaging.\n * @tags test-case\n */\nexport const RequiredField = {\n  render: () => html`\n<nve-control>\n  <label>validation</label>\n  <input required />\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control without visible label using aria-label for accessibility in compact layouts.\n * @tags test-case\n */\nexport const NoLabelControl = {\n  render: () => html`\n<nve-control>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-control>`\n};\n\n/**\n * @summary Inline control layout with checkbox positioned before its label for toggle-style inputs.\n * @tags test-case\n */\nexport const InlineControl = {\n  render: () => html`\n<nve-control>\n  <label>enable logging</label>\n  <input type=\"checkbox\" checked />\n</nve-control>`\n};\n\n/**\n * @summary Control group organizing related radio buttons and checkboxes with shared label and messaging.\n * @tags test-case\n */\nexport const Group = {\n  render: () => html`\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n\n<br />\n\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n`\n};\n\n/**\n * @summary Form control wrapping a native date input with label and message support.\n * @tags test-case\n */\nexport const DateControl = {\n  render: () => html`\n<nve-control>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control wrapping a textarea element for multi-line text input.\n * @tags test-case\n */\nexport const TextareaControl = {\n  render: () => html`\n<nve-control>\n  <label>about</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control with datalist providing autocomplete suggestions for search input.\n * @tags test-case\n */\nexport const Datalist = {\n  render: () => html`\n<nve-control>\n  <label>search</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"option 1\"></option>\n    <option value=\"option 2\"></option>\n    <option value=\"option 3\"></option>\n  </datalist>\n</nve-control>`\n};\n\n/**\n * @summary Form controls showing all status states (default, disabled, success, error) for validation feedback.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/forms/control/control.examples.json

@@ -0,0 +1,127 @@
+{
+  "element": "nve-control",
+  "entrypoint": "@nvidia-elements/core/forms/control/control.examples.json",
+  "items": [
+    {
+      "id": "core-forms-control_default",
+      "name": "Default",
+      "template": "<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
+      "summary": "Basic form control wrapper with label, input, and validation message structure.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_responsive",
+      "name": "Responsive",
+      "template": "<div\n  nve-layout=\"column gap:lg\"\n  style=\"padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px\"\n>\n  <nve-input layout=\"horizontal\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-select layout=\"horizontal\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n  </nve-search>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox label</label>\n    <nve-checkbox>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-range layout=\"horizontal-inline\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>label</label>\n    <textarea></textarea>\n  </nve-textarea>\n</div>\n",
+      "summary": "Responsive form controls with layout adaptation in resizable containers.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_layout",
+      "name": "Layout",
+      "template": "<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n    nve-control {\n      outline: 1px solid red;\n    }\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>\n",
+      "summary": "All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_required-field",
+      "name": "RequiredField",
+      "template": "<nve-control>\n  <label>validation</label>\n  <input required />\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-control>\n",
+      "summary": "Form control with HTML5 validation showing required field error messaging.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_no-label-control",
+      "name": "NoLabelControl",
+      "template": "<nve-control>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-control>\n",
+      "summary": "Form control without visible label using aria-label for accessibility in compact layouts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_inline-control",
+      "name": "InlineControl",
+      "template": "<nve-control>\n  <label>enable logging</label>\n  <input type=\"checkbox\" checked />\n</nve-control>\n",
+      "summary": "Inline control layout with checkbox positioned before its label for toggle-style inputs.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_group",
+      "name": "Group",
+      "template": "<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n<br />\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n",
+      "summary": "Control group organizing related radio buttons and checkboxes with shared label and messaging.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_date-control",
+      "name": "DateControl",
+      "template": "<nve-control>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
+      "summary": "Form control wrapping a native date input with label and message support.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_textarea-control",
+      "name": "TextareaControl",
+      "template": "<nve-control>\n  <label>about</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
+      "summary": "Form control wrapping a textarea element for multi-line text input.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_datalist",
+      "name": "Datalist",
+      "template": "<nve-control>\n  <label>search</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"option 1\"></option>\n    <option value=\"option 2\"></option>\n    <option value=\"option 3\"></option>\n  </datalist>\n</nve-control>\n",
+      "summary": "Form control with datalist providing autocomplete suggestions for search input.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-forms-control_status",
+      "name": "Status",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>\n",
+      "summary": "Form controls showing all status states (default, disabled, success, error) for validation feedback.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}