@nvidia-elements/forms - npm Package Compare versions

+76

dist/custom-elements-jsx.d.ts

		/**
		* This type can be used to create scoped tags for your components.
		*
		* Usage:
		*
		* ```ts
		* import type { ScopedElements } from "path/to/library/jsx-integration";
		*
		* declare module "my-library" {
		* namespace JSX {
		* interface IntrinsicElements
		* extends ScopedElements<'test-', ''> {}
		* }
		* }
		* ```
		*
		*/
		export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
		[Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
		};

		type BaseProps = {
		/** Content added between the opening and closing tags of the element */
		children?: any;
		/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
		class?: string;
		/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
		className?: string;
		/** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
		classList?: Record<string, boolean \| undefined>;
		/** Specifies the text direction of the element. */
		dir?: "ltr" \| "rtl";
		/** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
		exportparts?: string;
		/** For <label> and <output>, lets you associate the label with some control. */
		htmlFor?: string;
		/** Specifies whether the element should be hidden. */
		hidden?: boolean \| string;
		/** A unique identifier for the element. */
		id?: string;
		/** Keys tell React which array item each component corresponds to */
		key?: string \| number;
		/** Specifies the language of the element. */
		lang?: string;
		/** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
		part?: string;
		/** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
		ref?: unknown \| ((e: unknown) => void);
		/** Adds a reference for a custom element slot */
		slot?: string;
		/** Prop for setting inline styles */
		style?: Record<string, string \| number>;
		/** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
		tabIndex?: number;
		/** Specifies the tooltip text for the element. */
		title?: string;
		/** Passing 'no' excludes the element content from being translated. */
		translate?: "yes" \| "no";
		};

		type BaseEvents = {
		onClick?: (event: MouseEvent) => void;
		onKeyDown?: (event: KeyboardEvent) => void;
		onKeyUp?: (event: KeyboardEvent) => void;
		onKeyPressed?: (event: KeyboardEvent) => void;
		onFocus?: (event: FocusEvent) => void;
		onBlur?: (event: FocusEvent) => void;
		onMouseEnter?: (event: MouseEvent) => void;
		onMouseLeave?: (event: FocusEvent) => void;
		onMouseMove?: (event: FocusEvent) => void;
		onPointerDown?: (event: PointerEvent) => void;
		onPointerUp?: (event: PointerEvent) => void;
		onPointerMove?: (event: PointerEvent) => void;
		};

		export type CustomElements = {};

+15

dist/custom-elements-vue.d.ts

		import type { DefineComponent } from "vue";

		export type CustomElements = {};

		declare module "vue" {
		// eslint-disable-next-line @typescript-eslint/no-empty-interface
		interface GlobalComponents extends CustomElements {}
		}

		declare global {
		namespace JSX {
		// eslint-disable-next-line @typescript-eslint/no-empty-interface
		interface IntrinsicElements extends CustomElements {}
		}
		}

+560

dist/custom-elements.json

		{
		"schemaVersion": "1.0.0",
		"readme": "",
		"modules": [
		{
		"kind": "javascript-module",
		"path": "/src/index.js",
		"declarations": [
		{
		"kind": "variable",
		"name": "VERSION",
		"type": {
		"text": "string"
		},
		"default": "'0.0.0'"
		}
		],
		"exports": [
		{
		"kind": "js",
		"name": "VERSION",
		"declaration": {
		"name": "VERSION",
		"module": "/src/index.js"
		}
		},
		{
		"kind": "js",
		"name": "*",
		"declaration": {
		"name": "*",
		"module": "home/runner/work/elements/elements/projects/forms/src/internal/types.js"
		}
		}
		]
		},
		{
		"kind": "javascript-module",
		"path": "/src/internal/errors.js",
		"declarations": [
		{
		"kind": "class",
		"description": "",
		"name": "FormControlError",
		"members": [
		{
		"kind": "field",
		"name": "name",
		"type": {
		"text": "string",
		"_sourceAliases": [],
		"values": [
		{
		"value": "string",
		"description": ""
		}
		]
		},
		"default": "'FormControlError'"
		}
		],
		"superclass": {
		"name": "Error",
		"module": "/src/internal/errors.js"
		}
		}
		],
		"exports": [
		{
		"kind": "js",
		"name": "FormControlError",
		"declaration": {
		"name": "FormControlError",
		"module": "/src/internal/errors.js"
		}
		}
		]
		},
		{
		"kind": "javascript-module",
		"path": "/src/internal/schema.js",
		"declarations": [
		{
		"kind": "function",
		"name": "parseValueSchema",
		"return": {
		"type": {
		"text": "T"
		}
		},
		"parameters": [
		{
		"name": "formControlName",
		"type": {
		"text": "string",
		"_sourceAliases": []
		}
		},
		{
		"name": "value",
		"type": {
		"text": "string",
		"_sourceAliases": []
		}
		},
		{
		"name": "schema",
		"type": {
		"text": "StringSchema \| NumberSchema \| BooleanSchema \| ArraySchema \| ObjectSchema \| EnumSchema",
		"_sourceAliases": [
		"Schema"
		]
		}
		}
		]
		},
		{
		"kind": "function",
		"name": "validateSchema",
		"return": {
		"type": {
		"text": "ValidationResult"
		}
		},
		"parameters": [
		{
		"name": "schema",
		"type": {
		"text": "StringSchema \| NumberSchema \| BooleanSchema \| ArraySchema \| ObjectSchema \| EnumSchema",
		"_sourceAliases": [
		"Schema"
		]
		}
		},
		{
		"name": "value",
		"type": {
		"text": "unknown",
		"_sourceAliases": []
		}
		}
		]
		},
		{
		"kind": "function",
		"name": "parseControlValue",
		"return": {
		"type": {
		"text": "T \| undefined"
		}
		},
		"parameters": [
		{
		"name": "value",
		"type": {
		"text": "string",
		"_sourceAliases": []
		}
		},
		{
		"name": "schema",
		"type": {
		"text": "StringSchema \| NumberSchema \| BooleanSchema \| ArraySchema \| ObjectSchema \| EnumSchema",
		"_sourceAliases": [
		"Schema"
		]
		}
		}
		]
		}
		],
		"exports": [
		{
		"kind": "js",
		"name": "parseValueSchema",
		"declaration": {
		"name": "parseValueSchema",
		"module": "/src/internal/schema.js"
		}
		},
		{
		"kind": "js",
		"name": "validateSchema",
		"declaration": {
		"name": "validateSchema",
		"module": "/src/internal/schema.js"
		}
		},
		{
		"kind": "js",
		"name": "parseControlValue",
		"declaration": {
		"name": "parseControlValue",
		"module": "/src/internal/schema.js"
		}
		}
		]
		},
		{
		"kind": "javascript-module",
		"path": "/src/internal/types.js",
		"declarations": [],
		"exports": []
		},
		{
		"kind": "javascript-module",
		"path": "/src/internal/utils.js",
		"declarations": [
		{
		"kind": "function",
		"name": "isObjectLiteral",
		"parameters": [
		{
		"name": "item",
		"type": {
		"text": "unknown",
		"_sourceAliases": []
		}
		}
		]
		}
		],
		"exports": [
		{
		"kind": "js",
		"name": "isObjectLiteral",
		"declaration": {
		"name": "isObjectLiteral",
		"module": "/src/internal/utils.js"
		}
		}
		]
		},
		{
		"kind": "javascript-module",
		"path": "/src/mixin/index.js",
		"declarations": [
		{
		"kind": "mixin",
		"description": "",
		"name": "FormControlMixin",
		"members": [
		{
		"kind": "field",
		"name": "formAssociated",
		"type": {
		"text": "boolean"
		},
		"static": true,
		"default": "true"
		},
		{
		"kind": "field",
		"name": "metadata",
		"type": {
		"text": "FormControlMetadata"
		},
		"static": true
		},
		{
		"kind": "field",
		"name": "readOnly",
		"type": {
		"text": "boolean"
		},
		"description": "determine if component is in readonly/non-editable state"
		},
		{
		"kind": "field",
		"name": "disabled",
		"type": {
		"text": "boolean"
		},
		"description": "determine if component is in disabled state"
		},
		{
		"kind": "field",
		"name": "required",
		"type": {
		"text": "boolean"
		},
		"description": "determine if the component value requires input"
		},
		{
		"kind": "field",
		"name": "name",
		"description": "name associated to parent form"
		},
		{
		"kind": "field",
		"name": "noValidate",
		"type": {
		"text": "boolean"
		},
		"description": "set determine if component is in no validation state"
		},
		{
		"kind": "field",
		"name": "value",
		"description": "value state of the component",
		"type": {
		"text": "T \| undefined"
		}
		},
		{
		"kind": "method",
		"name": "updateValue",
		"parameters": [
		{
		"name": "value",
		"type": {
		"text": "T"
		}
		}
		],
		"privacy": "protected"
		},
		{
		"kind": "field",
		"name": "form",
		"description": "associated parent form",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "willValidate",
		"description": "determine if the component is a candidate for constraint checking",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "validity",
		"description": "validity state of the component",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "validationMessage",
		"description": "validation message of the component",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "valueAsString",
		"description": "stringified value of the component",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "valueAsNumber",
		"type": {
		"text": "number"
		},
		"description": "parsed number value of the component"
		},
		{
		"kind": "field",
		"name": "type",
		"readonly": true
		},
		{
		"kind": "field",
		"name": "_internals",
		"privacy": "protected",
		"readonly": true
		},
		{
		"kind": "method",
		"name": "formResetCallback",
		"privacy": "protected"
		},
		{
		"kind": "method",
		"name": "formStateRestoreCallback",
		"parameters": [
		{
		"name": "state",
		"type": {
		"text": "T"
		}
		},
		{
		"name": "_reason",
		"type": {
		"text": "string"
		}
		}
		],
		"privacy": "protected"
		},
		{
		"kind": "method",
		"name": "reportValidity",
		"description": "report validity of the component"
		},
		{
		"kind": "method",
		"name": "checkValidity",
		"description": "check validity of the component"
		},
		{
		"kind": "method",
		"name": "setValidity",
		"parameters": [
		{
		"name": "validity",
		"type": {
		"text": "Partial<ValidityState>"
		}
		},
		{
		"name": "message",
		"optional": true,
		"type": {
		"text": "string"
		}
		}
		],
		"privacy": "protected"
		},
		{
		"kind": "method",
		"name": "dispatchInputEvent",
		"privacy": "protected"
		},
		{
		"kind": "method",
		"name": "dispatchChangeEvent",
		"privacy": "protected"
		},
		{
		"kind": "method",
		"name": "dispatchUpdateEvent",
		"parameters": [
		{
		"name": "type",
		"type": {
		"text": "'input' \| 'change'"
		}
		}
		],
		"privacy": "protected"
		},
		{
		"kind": "field",
		"name": "_initialValue"
		}
		],
		"events": [
		{
		"name": "input",
		"type": {
		"text": "InputEvent"
		}
		},
		{
		"name": "change",
		"type": {
		"text": "Event"
		}
		}
		],
		"parameters": [
		{
		"name": "SuperClass",
		"type": {
		"text": "TBase"
		}
		}
		]
		}
		],
		"exports": [
		{
		"kind": "js",
		"name": "FormControlMixin",
		"declaration": {
		"name": "FormControlMixin",
		"module": "/src/mixin/index.js"
		}
		}
		]
		},
		{
		"kind": "javascript-module",
		"path": "/src/validators/index.js",
		"declarations": [
		{
		"kind": "function",
		"name": "valueSchemaValidator",
		"return": {
		"type": {
		"text": "ValidatorResult"
		}
		},
		"parameters": [
		{
		"name": "value",
		"type": {
		"text": "unknown",
		"_sourceAliases": []
		}
		},
		{
		"name": "element",
		"type": {
		"text": "FormControl",
		"_sourceAliases": []
		}
		}
		],
		"description": "Given a json schema, check the value against the schema\nJSON Schema follows the OpenAI JSON Schema for structured outputs\nhttps://platform.openai.com/docs/guides/structured-outputs\n\n- All fields or function parameters must specify required\n- Require additionalProperties: false on all objects\n- Structured Outputs support the following types:\n - String\n - Number\n - Boolean\n - Object\n - Array\n - Enum"
		},
		{
		"kind": "function",
		"name": "requiredValidator",
		"return": {
		"type": {
		"text": "ValidatorResult"
		}
		},
		"parameters": [
		{
		"name": "value",
		"type": {
		"text": "unknown",
		"_sourceAliases": []
		}
		},
		{
		"name": "element",
		"type": {
		"text": "FormControl",
		"_sourceAliases": []
		}
		}
		]
		}
		],
		"exports": [
		{
		"kind": "js",
		"name": "valueSchemaValidator",
		"declaration": {
		"name": "valueSchemaValidator",
		"module": "/src/validators/index.js"
		}
		},
		{
		"kind": "js",
		"name": "requiredValidator",
		"declaration": {
		"name": "requiredValidator",
		"module": "/src/validators/index.js"
		}
		}
		]
		}
		]
		}

+1

dist/data.snippets.json

{}

+6

dist/examples/csv.examples.js

		//#region src/examples/csv.examples.ts
		var e = "";
		//#endregion
		export { e as default };

		//# sourceMappingURL=csv.examples.js.map

+1

dist/examples/csv.examples.js.map

{"version":3,"file":"csv.examples.js","names":["#getCSV"],"sources":["../../src/examples/csv.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement, nothing } from 'lit';\nimport type { ValidatorResult } from '@nvidia-elements/forms';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\nimport '@nvidia-elements/core/textarea/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/grid/define.js';\nimport './csv.examples.js';\n\nexport default {\n title: 'Labs/Forms/Examples',\n component: ['forms']\n};\n\n/**\n * @summary CSV grid form control with input validation and editable textarea.\n * @tags test-case\n */\nexport const CSV = {\n render: () => html`\n <style>\n ui-csv-grid:invalid {\n outline: 2px dashed red;\n }\n </style>\n <form nve-layout=\"grid span:6 gap:lg pad:lg align:stretch align:center\" style=\"min-width: 1000px;\">\n <nve-textarea style=\"width: max-content\">\n <label>CSV</label>\n <textarea name=\"input\" rows=\"20\" cols=\"50\">${csv}</textarea>\n </nve-textarea>\n <nve-divider orientation=\"vertical\"></nve-divider>\n <ui-csv-grid name=\"csv\"></ui-csv-grid>\n </form>\n <script type=\"module\">\n const form = document.querySelector('form');\n form.elements.csv.value = form.elements.input.value;\n form.addEventListener('input', (e) => {\n form.elements.csv.value = form.elements.input.value;\n });\n </script>\n `\n};\n\nconst csv = `\nresource_id,cpu_usage_percent,memory_usage_gb,storage_used_tb,network_traffic_gb\ninstance-001,45.2,8.5,2.3,156.7\ninstance-002,78.9,12.3,4.1,289.4\ninstance-003,23.4,4.2,1.5,89.3\ninstance-004,92.1,16.7,5.8,412.6\ninstance-005,34.7,6.8,2.9,178.2\ninstance-006,67.8,10.1,3.7,256.9\ninstance-007,12.5,2.9,0.8,45.6\ninstance-008,88.3,14.5,4.9,378.1\ninstance-009,56.4,9.2,3.2,198.5\ninstance-010,41.2,7.6,2.5,167.8`.trim();\n\nexport type CSVValue = string;\n\nexport class CSVExample extends FormControlMixin<typeof LitElement, CSVValue>(LitElement) {\n static readonly metadata = {\n tag: 'ui-csv-grid',\n version: '0.0.0',\n validators: [csvStringValidator],\n valueSchema: {\n type: 'string' as const\n },\n };\n\n static styles = [\n css`:host {\n display: block;\n width: 100%;\n }`\n ];\n\n get #getCSV() {\n const rows = this.value!.trim().split('\\n');\n return {\n columns: rows[0]!.split(','),\n rows: rows.slice(1).map(row => row.split(','))\n };\n }\n\n render() {\n return this.value\n ? html`\n <nve-grid>\n <nve-grid-header>\n ${this.#getCSV.columns.map(column => html`<nve-grid-column>${column}</nve-grid-column>`)}\n </nve-grid-header>\n ${this.#getCSV.rows.map(row => html`<nve-grid-row>${row.map(cell => html`<nve-grid-cell>${cell}</nve-grid-cell>`)}</nve-grid-row>`)}\n </nve-grid>\n `\n : nothing;\n }\n}\n\ncustomElements.get('ui-csv-grid') || customElements.define('ui-csv-grid', CSVExample);\n\nfunction csvStringValidator(value: unknown): ValidatorResult {\n const message = isValidCSV(value as string);\n if (message !== true) {\n return { validity: { badInput: true }, message };\n } else {\n return { validity: {} };\n }\n}\n\nfunction hasUnclosedQuotes(line: string): boolean {\n let inQuotes = false;\n for (let j = 0; j < line.length; j++) {\n if (line[j] === '\"' && !(j > 0 && line[j - 1] === '\\\\')) {\n inQuotes = !inQuotes;\n }\n }\n return inQuotes;\n}\n\nfunction countColumns(line: string): number {\n return (line.match(/,/g) || []).length + 1;\n}\n\nfunction validateLine(line: string, expectedColumns: number): true | string {\n if (hasUnclosedQuotes(line)) {\n return 'csv contains unclosed quotes';\n }\n\n if (countColumns(line) !== expectedColumns) {\n return 'csv contains invalid column count';\n }\n\n return true;\n}\n\nfunction isValidCSV(csvString: string): true | string {\n if (!csvString || csvString.trim().length === 0) {\n return 'empty';\n }\n\n const lines = csvString.split('\\n');\n const columnCount = countColumns(lines[0]!);\n\n for (const line of lines) {\n if (line.trim().length === 0) {\n continue;\n }\n\n const result = validateLine(line, columnCount);\n if (result !== true) {\n return result;\n }\n }\n\n return true;\n}\n"],"mappings":";AAGA,IAAA,IAAc"}

+17

dist/examples/csv.examples.json

		{
		"element": "[forms]",
		"entrypoint": "@nvidia-elements/forms/examples/csv.examples.json",
		"items": [
		{
		"id": "forms-examples-csv_csv",
		"name": "CSV",
		"template": "<style>\n ui-csv-grid:invalid {\n outline: 2px dashed red;\n }\n</style>\n<form nve-layout=\"grid span:6 gap:lg pad:lg align:stretch align:center\" style=\"min-width: 1000px\">\n <nve-textarea style=\"width: max-content\">\n <label>CSV</label>\n <textarea name=\"input\" rows=\"20\" cols=\"50\">${csv}</textarea>\n </nve-textarea>\n <nve-divider orientation=\"vertical\"></nve-divider>\n <ui-csv-grid name=\"csv\"></ui-csv-grid>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n form.elements.csv.value = form.elements.input.value;\n form.addEventListener(\"input\", (e) => {\n form.elements.csv.value = form.elements.input.value;\n });\n</script>\n",
		"summary": "CSV grid form control with input validation and editable textarea.",
		"description": "",
		"composition": false,
		"tags": [
		"test-case"
		]
		}
		]
		}

+6

dist/examples/light.examples.js

		//#region src/examples/light.examples.ts
		var e = "";
		//#endregion
		export { e as default };

		//# sourceMappingURL=light.examples.js.map

+1

dist/examples/light.examples.js.map

{"version":3,"file":"light.examples.js","names":["#updateValue"],"sources":["../../src/examples/light.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing, unsafeCSS } from 'lit';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\nimport './light.examples.js';\n\nexport default {\n title: 'Labs/Forms/Examples'\n};\n\n/**\n * @summary Light card form control with toggle and dim range inputs.\n * @tags test-case\n */\nexport const CardToggle = {\n render: () => html`\n<form nve-layout=\"column gap:lg pad:lg\">\n <ui-light-card value='{\"status\": \"on\", \"dim\": 75}' name=\"office-light\"></ui-light-card>\n <pre id=\"light-card-value\"></pre>\n</form>\n\n<script type=\"module\">\n const form = document.querySelector('form');\n const pre = document.querySelector('#light-card-value');\n const lightCard = document.querySelector('ui-light-card[name=\"office-light\"]');\n pre.textContent = JSON.stringify(lightCard.value, null, 2);\n\n form.addEventListener('change', (e) => {\n pre.textContent = JSON.stringify(lightCard.value, null, 2);\n console.log('change', e.target.value, Object.fromEntries(new FormData(form)));\n });\n\n form.addEventListener('input', (e) => {\n pre.textContent = JSON.stringify(lightCard.value, null, 2);\n console.log('input', e.target.value, Object.fromEntries(new FormData(form)));\n });\n</script>\n`\n};\n\n/**\n * @summary Light card form events including submit, reset, and invalid state handling.\n * @tags test-case\n */\nexport const Events = {\n render: () => html`\n<form id=\"novalidate-form\" nve-layout=\"column gap:lg pad:lg\">\n <ui-light-card novalidate name=\"novalidate-light\" value='{\"status\": \"on\", \"dim\": 75}'></ui-light-card>\n <pre></pre>\n <div nve-layout=\"row gap:sm\">\n <button type=\"button\">set invalid value</button>\n <button type=\"reset\">reset</button>\n <button type=\"submit\">submit</button>\n </div>\n</form>\n\n<script type=\"module\">\n const form = document.querySelector('#novalidate-form');\n const pre = form.querySelector('pre');\n const button = form.querySelector('button');\n const light = form.querySelector('[name=\"novalidate-light\"]');\n pre.textContent = JSON.stringify(light.value, null, 2);\n\n button.addEventListener('click', () => {\n light.value = { status: 'invalid', dim: -1 };\n });\n\n form.addEventListener('change', (e) => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log('change', e.target.value);\n });\n\n form.addEventListener('input', (e) => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log('input', e.target.value);\n });\n\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log('submit', Object.fromEntries(new FormData(form)));\n });\n\n form.addEventListener('reset', (e) => {\n // reset event fires before the value is reset\n setTimeout(() => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log('reset', Object.fromEntries(new FormData(form)));\n });\n });\n\n light.addEventListener('invalid', (e) => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log('invalid', Object.fromEntries(new FormData(form)));\n });\n</script>\n`\n};\n\nconst styles = /* css */ `\n:host,\n*,\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n max-width: 240px;\n}\n\n:host(:invalid) {\n outline: 2px dashed red;\n}\n\nform {\n position: relative;\n min-width: 50px;\n min-height: 50px;\n display: flex;\n align-items: center;\n gap: var(--nve-ref-space-xs);\n background: var(--nve-sys-interaction-background-200);\n padding: var(--nve-ref-size-300);\n border-radius: var(--nve-ref-border-radius-lg);\n}\n\nnve-icon {\n position: absolute;\n top: 16px;\n left: 16px;\n pointer-events: none;\n z-index: 99;\n}\n\ninput[name='status'] {\n opacity: 0;\n height: 20px;\n width: 20px;\n}\n`;\n\nexport interface LightCardValue {\n status: 'off' | 'on';\n dim: number;\n}\n\n/**\n * Custom element integrating the FormControlMixin with LitElement for form validation.\n */\nexport class LightCard extends FormControlMixin<typeof LitElement, LightCardValue>(LitElement) {\n static readonly metadata = {\n tag: 'ui-light-card',\n version: '0.0.0',\n strict: false,\n valueSchema: {\n type: 'object' as const,\n properties: {\n status: {\n type: 'enum' as const,\n enum: ['off', 'on']\n },\n dim: {\n type: 'number' as const,\n minimum: 0,\n maximum: 100\n }\n },\n required: ['status', 'dim']\n }\n };\n\n static styles = unsafeCSS(styles);\n\n render() {\n return this.value\n ? html`\n <form @input=${this.#updateValue} @change=${this.#updateValue}>\n <nve-icon size=\"lg\" name=\"lightbulb\" style=\"--color: ${this.value.status === 'on' ? 'var(--nve-ref-color-yellow-nova-900)' : 'initial'}; opacity: ${this.value.status === 'on' ? this.value.dim / 100 + 0.3 : 0.5};\"></nve-icon>\n ${\n this.readOnly\n ? nothing\n : html`\n <input type=\"checkbox\" name=\"status\" .checked=${this.value.status === 'on'} ?disabled=${this.readOnly} aria-label=\"Light Status\">\n <input type=\"range\" name=\"dim\" .valueAsNumber=${this.value.dim} ?disabled=${this.readOnly} min=${LightCard.metadata.valueSchema.properties.dim.minimum ?? 0} max=${LightCard.metadata.valueSchema.properties.dim.maximum ?? 100} aria-label=\"Light Dim\">\n `\n }\n </form>`\n : nothing;\n }\n\n constructor() {\n super();\n this.value = { status: 'off', dim: 50 };\n }\n\n #updateValue(event: Event) {\n const form = this.shadowRoot?.querySelector('form') as HTMLFormElement;\n this.value = { status: form.status.checked ? 'on' : 'off', dim: form.dim.valueAsNumber };\n this.dispatchUpdateEvent(event.type as 'input' | 'change');\n }\n}\n\ncustomElements.get('ui-light-card') ?? customElements.define('ui-light-card', LightCard);"],"mappings":";AAGA,IAAA,IAAe"}

+27

dist/examples/light.examples.json

		{
		"entrypoint": "@nvidia-elements/forms/examples/light.examples.json",
		"items": [
		{
		"id": "forms-examples-light_card-toggle",
		"name": "CardToggle",
		"template": "<form nve-layout=\"column gap:lg pad:lg\">\n <ui-light-card value='{\"status\": \"on\", \"dim\": 75}' name=\"office-light\"></ui-light-card>\n <pre id=\"light-card-value\"></pre>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const pre = document.querySelector(\"#light-card-value\");\n const lightCard = document.querySelector('ui-light-card[name=\"office-light\"]');\n pre.textContent = JSON.stringify(lightCard.value, null, 2);\n form.addEventListener(\"change\", (e) => {\n pre.textContent = JSON.stringify(lightCard.value, null, 2);\n console.log(\"change\", e.target.value, Object.fromEntries(new FormData(form)));\n });\n form.addEventListener(\"input\", (e) => {\n pre.textContent = JSON.stringify(lightCard.value, null, 2);\n console.log(\"input\", e.target.value, Object.fromEntries(new FormData(form)));\n });\n</script>\n",
		"summary": "Light card form control with toggle and dim range inputs.",
		"description": "",
		"composition": false,
		"tags": [
		"test-case"
		]
		},
		{
		"id": "forms-examples-light_events",
		"name": "Events",
		"template": "<form id=\"novalidate-form\" nve-layout=\"column gap:lg pad:lg\">\n <ui-light-card novalidate name=\"novalidate-light\" value='{\"status\": \"on\", \"dim\": 75}'></ui-light-card>\n <pre></pre>\n <div nve-layout=\"row gap:sm\">\n <button type=\"button\">set invalid value</button>\n <button type=\"reset\">reset</button>\n <button type=\"submit\">submit</button>\n </div>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"#novalidate-form\");\n const pre = form.querySelector(\"pre\");\n const button = form.querySelector(\"button\");\n const light = form.querySelector('[name=\"novalidate-light\"]');\n pre.textContent = JSON.stringify(light.value, null, 2);\n button.addEventListener(\"click\", () => {\n light.value = { status: \"invalid\", dim: -1 };\n });\n form.addEventListener(\"change\", (e) => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log(\"change\", e.target.value);\n });\n form.addEventListener(\"input\", (e) => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log(\"input\", e.target.value);\n });\n form.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log(\"submit\", Object.fromEntries(new FormData(form)));\n });\n form.addEventListener(\"reset\", (e) => {\n // reset event fires before the value is reset\n setTimeout(() => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log(\"reset\", Object.fromEntries(new FormData(form)));\n });\n });\n light.addEventListener(\"invalid\", (e) => {\n pre.textContent = JSON.stringify(light.value, null, 2);\n console.log(\"invalid\", Object.fromEntries(new FormData(form)));\n });\n</script>\n",
		"summary": "Light card form events including submit, reset, and invalid state handling.",
		"description": "",
		"composition": false,
		"tags": [
		"test-case"
		]
		}
		]
		}

+6

dist/examples/simple.examples.js

		//#region src/examples/simple.examples.ts
		var e = "";
		//#endregion
		export { e as default };

		//# sourceMappingURL=simple.examples.js.map

+1

dist/examples/simple.examples.js.map

{"version":3,"file":"simple.examples.js","names":["#updateValue"],"sources":["../../src/examples/simple.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement, nothing } from 'lit';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\n\nexport default {\n title: 'Labs/Forms/Examples'\n};\n\n/**\n * @summary Quality control form with checkbox inputs and schema-based validation.\n * @tags test-case\n */\nexport const QualityCheck = {\n render: () => html`\n<form nve-layout=\"column gap:lg pad:lg\">\n <ui-quality-control value='{\"good\": true, \"fast\": true, \"cheap\": false}' name=\"quality\"></ui-quality-control>\n <pre id=\"quality-control-value\"></pre>\n</form>\n\n<script type=\"module\">\n const form = document.querySelector('form');\n const pre = document.querySelector('#quality-control-value');\n const qualityControl = document.querySelector('ui-quality-control[name=\"quality\"]');\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n\n form.addEventListener('change', (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log('change', e.target.value, Object.fromEntries(new FormData(form)));\n });\n\n form.addEventListener('input', (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log('input', e.target.value, Object.fromEntries(new FormData(form)));\n });\n</script>\n`\n};\n\n/**\n * @summary Quality control form events with strict mode toggle and invalid state handling.\n * @tags test-case\n */\nexport const Events = {\n render: () => html`\n<form id=\"simple-events-form\" nve-layout=\"column gap:lg pad:lg\">\n <ui-quality-control name=\"quality\" value='{\"good\": true, \"fast\": true, \"cheap\": false}'></ui-quality-control>\n <pre></pre>\n <div nve-layout=\"row gap:sm\">\n <button type=\"button\">set invalid value</button>\n <button type=\"reset\">reset</button>\n <button type=\"submit\">submit</button>\n <label>\n <input type=\"checkbox\" name=\"strict\" checked />\n strict mode\n </label>\n </div>\n</form>\n\n<script type=\"module\">\n const form = document.querySelector('#simple-events-form');\n const pre = form.querySelector('pre');\n const button = form.querySelector('button');\n const qualityControl = form.querySelector('[name=\"quality\"]');\n const strict = form.querySelector('[name=\"strict\"]');\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n\n strict.addEventListener('change', (e) => {\n qualityControl.constructor.metadata.strict = e.target.checked;\n });\n\n button.addEventListener('click', () => {\n qualityControl.value = { good: true, fast: true, cheap: true };\n console.log('click', qualityControl.value);\n });\n\n form.addEventListener('change', (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log('change', e.target.value);\n });\n\n form.addEventListener('input', (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log('input', e.target.value);\n });\n\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log('submit', Object.fromEntries(new FormData(form)));\n });\n\n form.addEventListener('reset', (e) => {\n // reset event fires before the value is reset\n setTimeout(() => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log('reset', Object.fromEntries(new FormData(form)));\n });\n });\n\n qualityControl.addEventListener('invalid', (e) => {\n console.log('invalid', Object.fromEntries(new FormData(form)));\n });\n</script>\n`\n};\n\nexport interface QualityControlValue {\n good: boolean;\n fast: boolean;\n cheap: boolean;\n}\n\nfunction qualityValidator(value: unknown) {\n const v = value as QualityControlValue;\n if (v.good && v.fast && v.cheap) {\n return {\n validity: { badInput: true },\n message: 'at least one value must be false'\n };\n }\n return { validity: { } };\n}\n\n/**\n * Custom element integrating the FormControlMixin with LitElement for form validation.\n */\nexport class QualityControl extends FormControlMixin<typeof LitElement, QualityControlValue>(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n :host(:invalid) {\n outline: 2px dashed red;\n }\n `\n ];\n\n static readonly metadata = {\n tag: 'ui-quality-control',\n version: '0.0.0',\n strict: true,\n validators: [qualityValidator],\n valueSchema: {\n type: 'object' as const,\n properties: {\n good: {\n type: 'boolean' as const\n },\n fast: {\n type: 'boolean' as const\n },\n cheap: {\n type: 'boolean' as const\n }\n },\n required: ['good', 'fast', 'cheap']\n }\n };\n\n render() {\n return this.value\n ? html`\n <form @input=${this.#updateValue} @change=${this.#updateValue}>\n <label>\n <input type=\"checkbox\" name=\"good\" .checked=${this.value.good} ?disabled=${this.disabled || this.readOnly} aria-label=\"Good\">\n Good\n </label>\n <label>\n <input type=\"checkbox\" name=\"fast\" .checked=${this.value.fast} ?disabled=${this.disabled || this.readOnly} aria-label=\"Fast\">\n Fast\n </label>\n <label>\n <input type=\"checkbox\" name=\"cheap\" .checked=${this.value.cheap} ?disabled=${this.disabled || this.readOnly} aria-label=\"Cheap\">\n Cheap\n </label>\n </form>`\n : nothing;\n }\n\n constructor() {\n super();\n this.value = { good: true, fast: true, cheap: true };\n }\n\n #updateValue(event: Event) {\n const form = this.shadowRoot?.querySelector('form') as HTMLFormElement;\n this.value = { good: form.good.checked, fast: form.fast.checked, cheap: form.cheap.checked };\n this.dispatchUpdateEvent(event.type as 'input' | 'change');\n }\n}\n\ncustomElements.get('ui-quality-control') ?? customElements.define('ui-quality-control', QualityControl);"],"mappings":";AAGA,IAAA,IAAc"}

+27

dist/examples/simple.examples.json

		{
		"entrypoint": "@nvidia-elements/forms/examples/simple.examples.json",
		"items": [
		{
		"id": "forms-examples-simple_quality-check",
		"name": "QualityCheck",
		"template": "<form nve-layout=\"column gap:lg pad:lg\">\n <ui-quality-control value='{\"good\": true, \"fast\": true, \"cheap\": false}' name=\"quality\"></ui-quality-control>\n <pre id=\"quality-control-value\"></pre>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const pre = document.querySelector(\"#quality-control-value\");\n const qualityControl = document.querySelector('ui-quality-control[name=\"quality\"]');\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n form.addEventListener(\"change\", (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log(\"change\", e.target.value, Object.fromEntries(new FormData(form)));\n });\n form.addEventListener(\"input\", (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log(\"input\", e.target.value, Object.fromEntries(new FormData(form)));\n });\n</script>\n",
		"summary": "Quality control form with checkbox inputs and schema-based validation.",
		"description": "",
		"composition": false,
		"tags": [
		"test-case"
		]
		},
		{
		"id": "forms-examples-simple_events",
		"name": "Events",
		"template": "<form id=\"simple-events-form\" nve-layout=\"column gap:lg pad:lg\">\n <ui-quality-control name=\"quality\" value='{\"good\": true, \"fast\": true, \"cheap\": false}'></ui-quality-control>\n <pre></pre>\n <div nve-layout=\"row gap:sm\">\n <button type=\"button\">set invalid value</button>\n <button type=\"reset\">reset</button>\n <button type=\"submit\">submit</button>\n <label>\n <input type=\"checkbox\" name=\"strict\" checked />\n strict mode\n </label>\n </div>\n</form>\n<script type=\"module\">\n const form = document.querySelector(\"#simple-events-form\");\n const pre = form.querySelector(\"pre\");\n const button = form.querySelector(\"button\");\n const qualityControl = form.querySelector('[name=\"quality\"]');\n const strict = form.querySelector('[name=\"strict\"]');\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n strict.addEventListener(\"change\", (e) => {\n qualityControl.constructor.metadata.strict = e.target.checked;\n });\n button.addEventListener(\"click\", () => {\n qualityControl.value = { good: true, fast: true, cheap: true };\n console.log(\"click\", qualityControl.value);\n });\n form.addEventListener(\"change\", (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log(\"change\", e.target.value);\n });\n form.addEventListener(\"input\", (e) => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log(\"input\", e.target.value);\n });\n form.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log(\"submit\", Object.fromEntries(new FormData(form)));\n });\n form.addEventListener(\"reset\", (e) => {\n // reset event fires before the value is reset\n setTimeout(() => {\n pre.textContent = JSON.stringify(qualityControl.value, null, 2);\n console.log(\"reset\", Object.fromEntries(new FormData(form)));\n });\n });\n qualityControl.addEventListener(\"invalid\", (e) => {\n console.log(\"invalid\", Object.fromEntries(new FormData(form)));\n });\n</script>\n",
		"summary": "Quality control form events with strict mode toggle and invalid state handling.",
		"description": "",
		"composition": false,
		"tags": [
		"test-case"
		]
		}
		]
		}

+6

dist/examples/visualization.examples.js

		//#region src/examples/visualization.examples.ts
		var e = "";
		//#endregion
		export { e as default };

		//# sourceMappingURL=visualization.examples.js.map

+1

dist/examples/visualization.examples.js.map

{"version":3,"file":"visualization.examples.js","names":["#canvas","#startAnimation","#shapes","#animationFrame","#render"],"sources":["../../src/examples/visualization.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement, nothing } from 'lit';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixin';\nimport '@nvidia-elements/core/color/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport './visualization.examples.js';\n\nexport default {\n title: 'Labs/Forms/Examples'\n};\n\n/**\n * @summary Animated canvas visualization driven by form controls for color, shape, scale, and particle count.\n * @tags test-case\n */\nexport const CanvasParticles = {\n render: () => html`\n<section nve-layout=\"row gap:lg pad:lg align:center\">\n <form nve-layout=\"column gap:lg pad:lg\">\n <nve-color>\n <label>Color</label>\n <input type=\"color\" name=\"color\" value=\"#26ab40\" />\n </nve-color>\n <nve-radio-group>\n <label>Shape</label>\n <nve-radio>\n <label>Circle</label>\n <input type=\"radio\" name=\"shape\" value=\"circle\" checked/>\n </nve-radio>\n <nve-radio>\n <label>Square</label>\n <input type=\"radio\" name=\"shape\" value=\"square\" />\n </nve-radio>\n </nve-radio-group>\n <nve-range>\n <label>Scale</label>\n <input type=\"range\" name=\"scale\" value=\"20\" min=\"5\" max=\"100\" />\n </nve-range>\n <nve-range>\n <label>Particle Count</label>\n <input type=\"range\" name=\"particleCount\" value=\"100\" min=\"1\" max=\"10000\" />\n </nve-range>\n </form>\n <nve-divider orientation=\"vertical\"></nve-divider>\n <ui-entity-draw name=\"draw\" value='{\"color\": \"#26ab40\", \"shape\": \"circle\", \"scale\": 20, \"particleCount\": 100}'></ui-entity-draw>\n</section>\n<script type=\"module\">\n const form = document.querySelector('form');\n const draw = document.querySelector('ui-entity-draw');\n form.addEventListener('input', (e) => {\n draw.value = {\n color: form.elements.color.value,\n shape: form.elements.shape.value,\n scale: form.elements.scale.valueAsNumber,\n particleCount: form.elements.particleCount.valueAsNumber\n }\n });\n</script>\n`\n};\n\nconst styles = css`\n:host {\n display: block;\n}\n\nform {\n background: var(--nve-sys-layer-container-background);\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 1rem;\n border-radius: 0.5rem;\n box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n\nlabel {\n display: flex;\n align-items: center;\n line-height: 1;\n gap: 0.5rem;\n}\n\ninput {\n margin: 4px 0;\n}\n\npre {\n background: color-mix(in oklab, var(--nve-sys-layer-container-background) 100%, var(--nve-sys-text-muted-color) 7%);\n padding: 12px;\n margin: 0;\n}\n`;\n\nexport interface DrawValue {\n color: string;\n shape: 'circle' | 'square';\n scale: number;\n particleCount: number;\n}\n\nexport class Draw extends FormControlMixin<typeof LitElement, DrawValue>(LitElement) {\n static readonly metadata = {\n version: '0.0.0',\n tag: 'ui-entity-draw',\n valueSchema: {\n type: 'object' as const,\n properties: {\n color: {\n type: 'string' as const,\n format: 'color'\n },\n shape: {\n type: 'enum' as const,\n enum: ['circle', 'square']\n },\n scale: {\n type: 'number' as const,\n minimum: 1,\n maximum: 100\n },\n particleCount: {\n type: 'number' as const,\n minimum: 1,\n maximum: 10000\n }\n },\n required: ['color', 'shape', 'scale', 'particleCount']\n }\n };\n\n static styles = [\n styles,\n css`canvas {border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);}`\n ];\n\n #shapes: Array<{ x: number; y: number; rotation: number }> = [];\n #canvas?: HTMLCanvasElement;\n #animationFrame?: number;\n\n render() {\n return this.value\n ? html`\n <form>\n <canvas name=\"canvas\" width=\"400\" height=\"400\"></canvas>\n <pre>${JSON.stringify(this.value, null, 2)}</pre>\n </form>\n `\n : nothing;\n }\n\n constructor() {\n super();\n this.updateValue({ color: '#000000', shape: 'circle', scale: 50, particleCount: 20 });\n }\n\n firstUpdated() {\n this.#canvas = this.renderRoot.querySelector('canvas') ?? undefined;\n this.#startAnimation();\n }\n\n updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (this.value && this.value.particleCount !== this.#shapes.length) {\n this.#shapes = new Array(this.value.particleCount).fill(0).map(() => {\n return { x: Math.random() * 400, y: Math.random() * 400, rotation: Math.random() * Math.PI * 2 };\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.#animationFrame) {\n cancelAnimationFrame(this.#animationFrame);\n }\n }\n\n #startAnimation() {\n const animate = () => {\n if (this.value) {\n this.#render(this.value);\n }\n this.#animationFrame = requestAnimationFrame(animate);\n };\n animate();\n }\n\n #render(value: DrawValue) {\n const ctx = this.#canvas!.getContext('2d')!;\n ctx.clearRect(0, 0, this.#canvas!.width, this.#canvas!.height);\n\n const size = value.scale / 2.5;\n this.#shapes.forEach((shape, i) => {\n shape.y += Math.sin((Date.now() + i * 500) / 1000) * 0.5;\n shape.x += Math.cos((Date.now() + i * 500) / 1000) * 0.5;\n shape.rotation += 0.01;\n shape.x = (shape.x + this.#canvas!.width) % this.#canvas!.width;\n shape.y = (shape.y + this.#canvas!.height) % this.#canvas!.height;\n\n ctx.save();\n ctx.translate(shape.x, shape.y);\n ctx.rotate(shape.rotation);\n ctx.fillStyle = value.color;\n\n if (value.shape === 'circle') {\n ctx.beginPath();\n ctx.arc(0, 0, size / 2, 0, Math.PI * 2);\n ctx.fill();\n } else {\n ctx.fillRect(-size / 2, -size / 2, size, size);\n }\n\n ctx.restore();\n });\n }\n}\n\ncustomElements.get('ui-entity-draw') || customElements.define('ui-entity-draw', Draw);\n"],"mappings":";AAGA,IAAA,IAAc"}

+25

dist/examples/visualization.examples.json

		{
		"entrypoint": "@nvidia-elements/forms/examples/visualization.examples.json",
		"items": [
		{
		"id": "forms-examples-visualization_canvas-particles",
		"name": "CanvasParticles",
		"template": "<section nve-layout=\"row gap:lg pad:lg align:center\">\n <form nve-layout=\"column gap:lg pad:lg\">\n <nve-color>\n <label>Color</label>\n <input type=\"color\" name=\"color\" value=\"#26ab40\" />\n </nve-color>\n <nve-radio-group>\n <label>Shape</label>\n <nve-radio>\n <label>Circle</label>\n <input type=\"radio\" name=\"shape\" value=\"circle\" checked />\n </nve-radio>\n <nve-radio>\n <label>Square</label>\n <input type=\"radio\" name=\"shape\" value=\"square\" />\n </nve-radio>\n </nve-radio-group>\n <nve-range>\n <label>Scale</label>\n <input type=\"range\" name=\"scale\" value=\"20\" min=\"5\" max=\"100\" />\n </nve-range>\n <nve-range>\n <label>Particle Count</label>\n <input type=\"range\" name=\"particleCount\" value=\"100\" min=\"1\" max=\"10000\" />\n </nve-range>\n </form>\n <nve-divider orientation=\"vertical\"></nve-divider>\n <ui-entity-draw\n name=\"draw\"\n value='{\"color\": \"#26ab40\", \"shape\": \"circle\", \"scale\": 20, \"particleCount\": 100}'\n ></ui-entity-draw>\n</section>\n<script type=\"module\">\n const form = document.querySelector(\"form\");\n const draw = document.querySelector(\"ui-entity-draw\");\n form.addEventListener(\"input\", (e) => {\n draw.value = {\n color: form.elements.color.value,\n shape: form.elements.shape.value,\n scale: form.elements.scale.valueAsNumber,\n particleCount: form.elements.particleCount.valueAsNumber,\n };\n });\n</script>\n",
		"summary": "Animated canvas visualization driven by form controls for color, shape, scale, and particle count.",
		"description": "",
		"composition": true,
		"tags": [
		"test-case"
		]
		},
		{
		"id": "forms-examples-visualization_styles",
		"name": "styles",
		"template": ":host { display: block; } form { background: var(--nve-sys-layer-container-background); display: flex; flex-direction:\ncolumn; gap: 6px; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1); } label { display:\nflex; align-items: center; line-height: 1; gap: 0.5rem; } input { margin: 4px 0; } pre { background: color-mix(in oklab,\nvar(--nve-sys-layer-container-background) 100%, var(--nve-sys-text-muted-color) 7%); padding: 12px; margin: 0; }\n",
		"summary": "",
		"description": "",
		"composition": false,
		"tags": []
		}
		]
		}

+2

dist/index.d.ts

		export declare const VERSION = "0.0.0";
		export * from './internal/types.js';

+6

dist/index.js

		//#region src/index.ts
		var e = "0.0.2";
		//#endregion
		export { e as VERSION };

		//# sourceMappingURL=index.js.map

+1

dist/index.js.map

{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport const VERSION = '0.0.0';\n\nexport * from './internal/types.js';\n"],"mappings":";AAGA,IAAa,IAAU"}

+3

dist/internal/errors.d.ts

		export declare class FormControlError extends Error {
		constructor(formControlName: string, message: string);
		}

+10

dist/internal/errors.js

		//#region src/internal/errors.ts
		var e = class extends Error {
		constructor(e, t) {
		super(`(${e}): ${t}`), this.name = "FormControlError";
		}
		};
		//#endregion
		export { e as FormControlError };

		//# sourceMappingURL=errors.js.map

+1

dist/internal/errors.js.map

{"version":3,"file":"errors.js","names":[],"sources":["../../src/internal/errors.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport class FormControlError extends Error {\n constructor(formControlName: string, message: string) {\n super(`(${formControlName}): ${message}`);\n this.name = 'FormControlError';\n }\n}\n"],"mappings":";AAGA,IAAa,IAAb,cAAsC,MAAM;CAC1C,YAAY,GAAyB,GAAiB;AAEpD,EADA,MAAM,IAAI,EAAgB,KAAK,IAAU,EACzC,KAAK,OAAO"}

+9

dist/internal/schema.d.ts

		import { Schema } from './types.js';
		export declare function parseValueSchema<T>(formControlName: string, value: string, schema: Schema): T;
		type ValidationResult = {
		validity: Partial<ValidityState>;
		message: string;
		};
		export declare function validateSchema(schema: Schema, value: unknown): ValidationResult;
		export declare function parseControlValue<T>(value: string, schema: Schema): T \| undefined;
		export {};

+98

dist/internal/schema.js

		import { FormControlError as e } from "./errors.js";
		//#region src/internal/schema.ts
		function t(t, n, r) {
		let i = f(n, r);
		if (i === void 0) throw new e(t, `unsupported value type ${typeof n}`);
		return i;
		}
		var n = {
		validity: { valid: !0 },
		message: ""
		};
		function r(e, t) {
		return {
		validity: {
		...e,
		valid: !1
		},
		message: t
		};
		}
		function i(e, t) {
		return typeof t == "string" ? e.minLength !== void 0 && t.length < e.minLength ? r({ tooShort: !0 }, `string length ${t.length} is less than minimum length ${e.minLength}`) : e.maxLength !== void 0 && t.length > e.maxLength ? r({ tooLong: !0 }, `string length ${t.length} is greater than maximum length ${e.maxLength}`) : e.pattern && !new RegExp(e.pattern).test(t) ? r({ patternMismatch: !0 }, `string does not match pattern ${e.pattern}`) : n : r({ typeMismatch: !0 }, `expected string, got ${typeof t}`);
		}
		function a(e, t) {
		return typeof t == "number" ? isNaN(t) ? r({ typeMismatch: !0 }, "expected type number, received type NaN") : e.minimum !== void 0 && t < e.minimum ? r({ rangeUnderflow: !0 }, `number ${t} is less than minimum ${e.minimum}`) : e.maximum !== void 0 && t > e.maximum ? r({ rangeOverflow: !0 }, `number ${t} is greater than maximum ${e.maximum}`) : n : r({ typeMismatch: !0 }, `expected type number, received type ${typeof t}`);
		}
		function o(e) {
		return typeof e == "boolean" ? n : r({ typeMismatch: !0 }, `expected boolean, got ${typeof e}`);
		}
		function s(e, t) {
		if (!Array.isArray(t)) return r({ typeMismatch: !0 }, `expected type array, received type ${typeof t}`);
		if (e.minItems !== void 0 && t.length < e.minItems) return r({ rangeUnderflow: !0 }, `array length ${t.length} is less than minimum length ${e.minItems}`);
		if (e.maxItems !== void 0 && t.length > e.maxItems) return r({ rangeOverflow: !0 }, `array length ${t.length} is greater than maximum length ${e.maxItems}`);
		for (let n of t) {
		let t = d(e.items, n);
		if (!t.validity.valid) return t;
		}
		return n;
		}
		function c(e, t, i, a) {
		let o = i[e];
		return o === void 0 ? a?.includes(e) ? r({ valueMissing: !0 }, `missing required property: ${e}`) : n : d(t, o);
		}
		function l(e, t) {
		if (typeof t != "object" \|\| !t \|\| Array.isArray(t)) return r({ typeMismatch: !0 }, `expected type object, received type ${typeof t}`);
		let i = Object.keys(t), a = Object.keys(e.properties), o = i.filter((e) => !a.includes(e));
		if (o.length > 0 && !e.additionalProperties) return r({ badInput: !0 }, `additional properties not allowed: ${o.join(", ")}`);
		for (let [n, r] of Object.entries(e.properties)) {
		let i = c(n, r, t, e.required);
		if (!i.validity.valid) return i;
		}
		return n;
		}
		function u(e, t) {
		return e.enum.includes(t) ? n : r({ typeMismatch: !0 }, `value must be one of: ${e.enum.join(", ")}`);
		}
		function d(e, t) {
		if (!e \|\| typeof e != "object") return r({ badInput: !0 }, "invalid schema, schema must be a non-null object");
		if (!("type" in e)) return r({ badInput: !0 }, "schema must have \"type\" property");
		switch (e.type) {
		case "string": return i(e, t);
		case "number": return a(e, t);
		case "boolean": return o(t);
		case "array": return s(e, t);
		case "object": return l(e, t);
		case "enum": return u(e, t);
		default: return r({ badInput: !0 }, `unsupported type: ${e.type}`);
		}
		}
		function f(e, t) {
		let n = t.type, r;
		switch (n) {
		case "string":
		r = e;
		break;
		case "number":
		r = parseFloat(e);
		break;
		case "boolean":
		r = !!e \|\| e === "true";
		break;
		case "array":
		r = JSON.parse(e);
		break;
		case "object":
		r = JSON.parse(e);
		break;
		case "enum":
		r = t.enum.includes(e) ? e : void 0;
		break;
		default: return;
		}
		return r;
		}
		//#endregion
		export { t as parseValueSchema, d as validateSchema };

		//# sourceMappingURL=schema.js.map

+1

dist/internal/schema.js.map

{"version":3,"file":"schema.js","names":[],"sources":["../../src/internal/schema.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Schema } from './types.js';\nimport { FormControlError } from './errors.js';\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- caller specifies T for typed return\nexport function parseValueSchema<T>(formControlName: string, value: string, schema: Schema): T {\n const parsedValue = parseControlValue(value, schema);\n if (parsedValue === undefined) {\n throw new FormControlError(formControlName, `unsupported value type ${typeof value}`);\n }\n return parsedValue as T;\n}\n\ntype ValidationResult = { validity: Partial<ValidityState>; message: string };\n\nconst VALID: ValidationResult = { validity: { valid: true }, message: '' };\n\nfunction invalid(validity: Partial<ValidityState>, message: string): ValidationResult {\n return { validity: { ...validity, valid: false }, message };\n}\n\nfunction validateString(schema: Schema & { type: 'string' }, value: unknown): ValidationResult {\n if (typeof value !== 'string') {\n return invalid({ typeMismatch: true }, `expected string, got ${typeof value}`);\n }\n if (schema.minLength !== undefined && value.length < schema.minLength) {\n return invalid({ tooShort: true }, `string length ${value.length} is less than minimum length ${schema.minLength}`);\n }\n if (schema.maxLength !== undefined && value.length > schema.maxLength) {\n return invalid(\n { tooLong: true },\n `string length ${value.length} is greater than maximum length ${schema.maxLength}`\n );\n }\n if (schema.pattern && !new RegExp(schema.pattern).test(value)) {\n return invalid({ patternMismatch: true }, `string does not match pattern ${schema.pattern}`);\n }\n return VALID;\n}\n\nfunction validateNumber(schema: Schema & { type: 'number' }, value: unknown): ValidationResult {\n if (typeof value !== 'number') {\n return invalid({ typeMismatch: true }, `expected type number, received type ${typeof value}`);\n }\n if (isNaN(value as unknown as number)) {\n return invalid({ typeMismatch: true }, `expected type number, received type NaN`);\n }\n if (schema.minimum !== undefined && value < schema.minimum) {\n return invalid({ rangeUnderflow: true }, `number ${value} is less than minimum ${schema.minimum}`);\n }\n if (schema.maximum !== undefined && value > schema.maximum) {\n return invalid({ rangeOverflow: true }, `number ${value} is greater than maximum ${schema.maximum}`);\n }\n return VALID;\n}\n\nfunction validateBoolean(value: unknown): ValidationResult {\n if (typeof value !== 'boolean') {\n return invalid({ typeMismatch: true }, `expected boolean, got ${typeof value}`);\n }\n return VALID;\n}\n\nfunction validateArray(schema: Schema & { type: 'array' }, value: unknown): ValidationResult {\n if (!Array.isArray(value)) {\n return invalid({ typeMismatch: true }, `expected type array, received type ${typeof value}`);\n }\n if (schema.minItems !== undefined && value.length < schema.minItems) {\n return invalid(\n { rangeUnderflow: true },\n `array length ${value.length} is less than minimum length ${schema.minItems}`\n );\n }\n if (schema.maxItems !== undefined && value.length > schema.maxItems) {\n return invalid(\n { rangeOverflow: true },\n `array length ${value.length} is greater than maximum length ${schema.maxItems}`\n );\n }\n for (const item of value) {\n const result = validateSchema(schema.items, item);\n if (!result.validity.valid) {\n return result;\n }\n }\n return VALID;\n}\n\nfunction validateObjectProperty(\n prop: string,\n propSchema: Schema,\n value: Record<string, unknown>,\n required?: string[]\n): ValidationResult {\n const propValue = value[prop];\n if (propValue === undefined) {\n if (required?.includes(prop)) {\n return invalid({ valueMissing: true }, `missing required property: ${prop}`);\n }\n return VALID;\n }\n return validateSchema(propSchema, propValue);\n}\n\nfunction validateObject(schema: Schema & { type: 'object' }, value: unknown): ValidationResult {\n if (typeof value !== 'object' || value === null || Array.isArray(value)) {\n return invalid({ typeMismatch: true }, `expected type object, received type ${typeof value}`);\n }\n\n const valueProperties = Object.keys(value as object);\n const schemaProperties = Object.keys(schema.properties);\n\n const additionalProps = valueProperties.filter(prop => !schemaProperties.includes(prop));\n if (additionalProps.length > 0 && !schema.additionalProperties) {\n return invalid({ badInput: true }, `additional properties not allowed: ${additionalProps.join(', ')}`);\n }\n\n for (const [prop, propSchema] of Object.entries(schema.properties)) {\n const result = validateObjectProperty(prop, propSchema, value as Record<string, unknown>, schema.required);\n if (!result.validity.valid) {\n return result;\n }\n }\n return VALID;\n}\n\nfunction validateEnum(schema: Schema & { type: 'enum' }, value: unknown): ValidationResult {\n if (!schema.enum.includes(value as string | number)) {\n return invalid({ typeMismatch: true }, `value must be one of: ${schema.enum.join(', ')}`);\n }\n return VALID;\n}\n\nexport function validateSchema(schema: Schema, value: unknown): ValidationResult {\n if (!schema || typeof schema !== 'object') {\n return invalid({ badInput: true }, 'invalid schema, schema must be a non-null object');\n }\n\n if (!('type' in schema)) {\n return invalid({ badInput: true }, 'schema must have \"type\" property');\n }\n\n switch (schema.type) {\n case 'string':\n return validateString(schema, value);\n case 'number':\n return validateNumber(schema, value);\n case 'boolean':\n return validateBoolean(value);\n case 'array':\n return validateArray(schema, value);\n case 'object':\n return validateObject(schema, value);\n case 'enum':\n return validateEnum(schema, value);\n default:\n return invalid({ badInput: true }, `unsupported type: ${(schema as { type: string }).type}`);\n }\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- caller specifies T for typed return\nexport function parseControlValue<T>(value: string, schema: Schema): T | undefined {\n const schemaType = schema.type;\n let parsedValue: unknown;\n\n switch (schemaType) {\n case 'string': {\n parsedValue = value;\n break;\n }\n case 'number': {\n parsedValue = parseFloat(value);\n break;\n }\n case 'boolean': {\n parsedValue = !!value || value === 'true';\n break;\n }\n case 'array': {\n parsedValue = JSON.parse(value);\n break;\n }\n case 'object': {\n parsedValue = JSON.parse(value);\n break;\n }\n case 'enum': {\n parsedValue = schema.enum.includes(value) ? value : undefined;\n break;\n }\n default: {\n const _exhaustiveCheck: never = schemaType;\n return undefined;\n }\n }\n return parsedValue as T;\n}\n"],"mappings":"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"}

+77

dist/internal/types.d.ts

		export type FormControlValue = string \| number \| File \| File[] \| null \| object;
		interface SchemaBase {
		type: string;
		description?: string;
		format?: string;
		}
		export interface StringSchema extends SchemaBase {
		type: 'string';
		minLength?: number;
		maxLength?: number;
		pattern?: string;
		}
		export interface NumberSchema extends SchemaBase {
		type: 'number';
		minimum?: number;
		maximum?: number;
		multipleOf?: number;
		}
		export interface BooleanSchema extends SchemaBase {
		type: 'boolean';
		}
		export interface ArraySchema extends SchemaBase {
		type: 'array';
		items: Schema;
		minItems?: number;
		maxItems?: number;
		}
		export interface ObjectSchema extends SchemaBase {
		type: 'object';
		properties: Record<string, Schema>;
		required?: string[];
		additionalProperties?: boolean \| Schema;
		}
		export interface EnumSchema extends SchemaBase {
		type: 'enum';
		enum: Array<string \| number>;
		}
		export type Schema = StringSchema \| NumberSchema \| BooleanSchema \| ArraySchema \| ObjectSchema \| EnumSchema;
		export interface FormControlMetadata {
		tag: string;
		valueSchema: Schema;
		version?: string;
		validators?: Validator[];
		strict?: boolean;
		}
		interface FormControlInstance extends HTMLElement {
		value: any;
		form: HTMLFormElement \| null;
		readonly: boolean;
		name: string;
		noValidate: boolean;
		willValidate: boolean;
		validity: ValidityState;
		validationMessage: string;
		required?: boolean;
		checkValidity(): boolean;
		reportValidity(): boolean;
		}
		/**
		* @event input - Dispatched when the input value changes
		* @event change - Dispatched when the user commits the value
		*/
		export interface FormControl {
		new (...args: any[]): FormControlInstance;
		formAssociated: boolean;
		metadata: FormControlMetadata;
		localName?: string;
		}
		export type ChangeEvent = Event & {
		type: 'change';
		};
		export interface ValidatorResult {
		validity: Partial<ValidityState>;
		message?: string;
		}
		export type Validator = (value: unknown, element: FormControl) => ValidatorResult;
		export {};

+1

dist/internal/utils.d.ts

export declare function isObjectLiteral(item: unknown): boolean;

+10

dist/internal/utils.js

		//#region src/internal/utils.ts
		function e(e) {
		if (!e \|\| typeof e != "object" \|\| Array.isArray(e)) return !1;
		let t = Object.getPrototypeOf(e);
		return t === null \|\| t === Object.prototype;
		}
		//#endregion
		export { e as isObjectLiteral };

		//# sourceMappingURL=utils.js.map

+1

dist/internal/utils.js.map

{"version":3,"file":"utils.js","names":[],"sources":["../../src/internal/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function isObjectLiteral(item: unknown) {\n if (!item || typeof item !== 'object' || Array.isArray(item)) {\n return false;\n }\n const proto = Object.getPrototypeOf(item);\n return proto === null || proto === Object.prototype;\n}\n"],"mappings":";AAGA,SAAgB,EAAgB,GAAe;AAC7C,KAAI,CAAC,KAAQ,OAAO,KAAS,YAAY,MAAM,QAAQ,EAAK,CAC1D,QAAO;CAET,IAAM,IAAQ,OAAO,eAAe,EAAK;AACzC,QAAO,MAAU,QAAQ,MAAU,OAAO"}

+453

dist/mixin/index.d.ts

		import { FormControlMetadata, FormControlValue } from '../internal/types.js';
		type Constructor = (new (...args: any[]) => HTMLElement & {
		connectedCallback?(): void;
		disconnectedCallback?(): void;
		attributeChangedCallback?(name: string, oldValue: string \| null, newValue: string \| null): void;
		requestUpdate?(name?: string, oldValue?: unknown): void;
		}) & {
		observedAttributes?: string[];
		};
		/**
		* @description A mixin that adds form control functionality to a component.
		* @event input - Dispatched when the value of the component changes as a result of a user action.
		* @event change - Dispatched when the user modifies and commits the element's value.
		* @event reset - Dispatched when the control state was reset to its initial value.
		* @event invalid - Dispatched when the control is invalid.
		*/
		export declare function FormControlMixin<TBase extends Constructor, T extends FormControlValue>(SuperClass: TBase): {
		new (...args: any[]): {
		/** determine if component is in readonly/non-editable state */
		get readOnly(): boolean;
		set readOnly(value: boolean \| unknown);
		/** determine if component is in disabled state */
		get disabled(): boolean;
		set disabled(value: boolean \| unknown);
		/** determine if the component value requires input */
		get required(): boolean;
		set required(value: T \| unknown);
		/** name associated to parent form */
		get name(): string;
		set name(value: string);
		/** get determine if component is in no validation state */
		get noValidate(): boolean;
		/** set determine if component is in no validation state */
		set noValidate(value: boolean \| unknown);
		/** @internal */
		_value: T \| undefined;
		get value(): T \| undefined;
		/** value state of the component */
		set value(value: T \| unknown);
		/** @protected */
		updateValue(value: T): void;
		/** associated parent form */
		get form(): HTMLFormElement \| null;
		/** determine if the component is a candidate for constraint checking */
		get willValidate(): boolean;
		/** validity state of the component */
		get validity(): ValidityState;
		/** validation message of the component */
		get validationMessage(): string;
		/** stringified value of the component */
		get valueAsString(): string;
		/** parsed number value of the component */
		get valueAsNumber(): number;
		set valueAsNumber(value: number);
		get type(): string;
		/** @internal */
		get _metadata(): FormControlMetadata;
		/** @internal */
		_formInternals: ElementInternals;
		/** @internal */
		_initialValue: T \| undefined;
		/** @internal */
		get _validators(): import('../index.js').Validator[];
		/** @protected */
		get _internals(): ElementInternals;
		connectedCallback(): void;
		attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
		/** @internal */
		_handleAttributeChange(name: string, newValue: string): void;
		/** @protected */
		formResetCallback(): void;
		/** @protected https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/*/
		formStateRestoreCallback(state: T, _reason: string): void;
		/** report validity of the component */
		reportValidity(): boolean;
		/** check validity of the component */
		checkValidity(): boolean;
		/** @protected */
		setValidity(validity: Partial<ValidityState>, message?: string): void;
		/** @protected */
		dispatchInputEvent(): void;
		/** @protected */
		dispatchChangeEvent(): void;
		/** @protected */
		dispatchUpdateEvent(type: "input" \| "change"): void;
		/** @internal */
		_updateFormState(): void;
		/** @internal */
		_requestUpdate(): void;
		accessKey: string;
		readonly accessKeyLabel: string;
		autocapitalize: string;
		autocorrect: boolean;
		dir: string;
		draggable: boolean;
		hidden: boolean \| "until-found";
		inert: boolean;
		innerText: string;
		lang: string;
		readonly offsetHeight: number;
		readonly offsetLeft: number;
		readonly offsetParent: Element \| null;
		readonly offsetTop: number;
		readonly offsetWidth: number;
		outerText: string;
		popover: string \| null;
		spellcheck: boolean;
		title: string;
		translate: boolean;
		writingSuggestions: string;
		attachInternals(): ElementInternals;
		click(): void;
		hidePopover(): void;
		showPopover(options?: ShowPopoverOptions): void;
		togglePopover(options?: TogglePopoverOptions \| boolean): boolean;
		addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean \| AddEventListenerOptions): void;
		addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean \| AddEventListenerOptions): void;
		removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean \| EventListenerOptions): void;
		removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean \| EventListenerOptions): void;
		readonly attributes: NamedNodeMap;
		get classList(): DOMTokenList;
		set classList(value: string);
		className: string;
		readonly clientHeight: number;
		readonly clientLeft: number;
		readonly clientTop: number;
		readonly clientWidth: number;
		readonly currentCSSZoom: number;
		readonly customElementRegistry: CustomElementRegistry \| null;
		id: string;
		innerHTML: string;
		readonly localName: string;
		readonly namespaceURI: string \| null;
		onfullscreenchange: ((this: Element, ev: Event) => any) \| null;
		onfullscreenerror: ((this: Element, ev: Event) => any) \| null;
		outerHTML: string;
		readonly ownerDocument: Document;
		get part(): DOMTokenList;
		set part(value: string);
		readonly prefix: string \| null;
		readonly scrollHeight: number;
		scrollLeft: number;
		scrollTop: number;
		readonly scrollWidth: number;
		readonly shadowRoot: ShadowRoot \| null;
		slot: string;
		readonly tagName: string;
		attachShadow(init: ShadowRootInit): ShadowRoot;
		checkVisibility(options?: CheckVisibilityOptions): boolean;
		closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] \| null;
		closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] \| null;
		closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] \| null;
		closest<E extends Element = Element>(selectors: string): E \| null;
		computedStyleMap(): StylePropertyMapReadOnly;
		getAttribute(qualifiedName: string): string \| null;
		getAttributeNS(namespace: string \| null, localName: string): string \| null;
		getAttributeNames(): string[];
		getAttributeNode(qualifiedName: string): Attr \| null;
		getAttributeNodeNS(namespace: string \| null, localName: string): Attr \| null;
		getBoundingClientRect(): DOMRect;
		getClientRects(): DOMRectList;
		getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
		getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
		getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
		getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
		getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
		getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
		getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
		getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
		getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
		getElementsByTagNameNS(namespace: string \| null, localName: string): HTMLCollectionOf<Element>;
		getHTML(options?: GetHTMLOptions): string;
		hasAttribute(qualifiedName: string): boolean;
		hasAttributeNS(namespace: string \| null, localName: string): boolean;
		hasAttributes(): boolean;
		hasPointerCapture(pointerId: number): boolean;
		insertAdjacentElement(where: InsertPosition, element: Element): Element \| null;
		insertAdjacentHTML(position: InsertPosition, string: string): void;
		insertAdjacentText(where: InsertPosition, data: string): void;
		matches<K extends keyof HTMLElementTagNameMap>(selectors: K): this is HTMLElementTagNameMap[K];
		matches<K extends keyof SVGElementTagNameMap>(selectors: K): this is SVGElementTagNameMap[K];
		matches<K extends keyof MathMLElementTagNameMap>(selectors: K): this is MathMLElementTagNameMap[K];
		matches(selectors: string): boolean;
		releasePointerCapture(pointerId: number): void;
		removeAttribute(qualifiedName: string): void;
		removeAttributeNS(namespace: string \| null, localName: string): void;
		removeAttributeNode(attr: Attr): Attr;
		requestFullscreen(options?: FullscreenOptions): Promise<void>;
		requestPointerLock(options?: PointerLockOptions): Promise<void>;
		scroll(options?: ScrollToOptions): void;
		scroll(x: number, y: number): void;
		scrollBy(options?: ScrollToOptions): void;
		scrollBy(x: number, y: number): void;
		scrollIntoView(arg?: boolean \| ScrollIntoViewOptions): void;
		scrollTo(options?: ScrollToOptions): void;
		scrollTo(x: number, y: number): void;
		setAttribute(qualifiedName: string, value: string): void;
		setAttributeNS(namespace: string \| null, qualifiedName: string, value: string): void;
		setAttributeNode(attr: Attr): Attr \| null;
		setAttributeNodeNS(attr: Attr): Attr \| null;
		setHTMLUnsafe(html: string): void;
		setPointerCapture(pointerId: number): void;
		toggleAttribute(qualifiedName: string, force?: boolean): boolean;
		webkitMatchesSelector(selectors: string): boolean;
		get textContent(): string;
		set textContent(value: string \| null);
		readonly baseURI: string;
		readonly childNodes: NodeListOf<ChildNode>;
		readonly firstChild: ChildNode \| null;
		readonly isConnected: boolean;
		readonly lastChild: ChildNode \| null;
		readonly nextSibling: ChildNode \| null;
		readonly nodeName: string;
		readonly nodeType: number;
		nodeValue: string \| null;
		readonly parentElement: HTMLElement \| null;
		readonly parentNode: ParentNode \| null;
		readonly previousSibling: ChildNode \| null;
		appendChild<T_1 extends Node>(node: T_1): T_1;
		cloneNode(subtree?: boolean): Node;
		compareDocumentPosition(other: Node): number;
		contains(other: Node \| null): boolean;
		getRootNode(options?: GetRootNodeOptions): Node;
		hasChildNodes(): boolean;
		insertBefore<T_1 extends Node>(node: T_1, child: Node \| null): T_1;
		isDefaultNamespace(namespace: string \| null): boolean;
		isEqualNode(otherNode: Node \| null): boolean;
		isSameNode(otherNode: Node \| null): boolean;
		lookupNamespaceURI(prefix: string \| null): string \| null;
		lookupPrefix(namespace: string \| null): string \| null;
		normalize(): void;
		removeChild<T_1 extends Node>(child: T_1): T_1;
		replaceChild<T_1 extends Node>(node: Node, child: T_1): T_1;
		readonly ELEMENT_NODE: 1;
		readonly ATTRIBUTE_NODE: 2;
		readonly TEXT_NODE: 3;
		readonly CDATA_SECTION_NODE: 4;
		readonly ENTITY_REFERENCE_NODE: 5;
		readonly ENTITY_NODE: 6;
		readonly PROCESSING_INSTRUCTION_NODE: 7;
		readonly COMMENT_NODE: 8;
		readonly DOCUMENT_NODE: 9;
		readonly DOCUMENT_TYPE_NODE: 10;
		readonly DOCUMENT_FRAGMENT_NODE: 11;
		readonly NOTATION_NODE: 12;
		readonly DOCUMENT_POSITION_DISCONNECTED: 1;
		readonly DOCUMENT_POSITION_PRECEDING: 2;
		readonly DOCUMENT_POSITION_FOLLOWING: 4;
		readonly DOCUMENT_POSITION_CONTAINS: 8;
		readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
		readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
		dispatchEvent(event: Event): boolean;
		ariaActiveDescendantElement: Element \| null;
		ariaAtomic: string \| null;
		ariaAutoComplete: string \| null;
		ariaBrailleLabel: string \| null;
		ariaBrailleRoleDescription: string \| null;
		ariaBusy: string \| null;
		ariaChecked: string \| null;
		ariaColCount: string \| null;
		ariaColIndex: string \| null;
		ariaColIndexText: string \| null;
		ariaColSpan: string \| null;
		ariaControlsElements: ReadonlyArray<Element> \| null;
		ariaCurrent: string \| null;
		ariaDescribedByElements: ReadonlyArray<Element> \| null;
		ariaDescription: string \| null;
		ariaDetailsElements: ReadonlyArray<Element> \| null;
		ariaDisabled: string \| null;
		ariaErrorMessageElements: ReadonlyArray<Element> \| null;
		ariaExpanded: string \| null;
		ariaFlowToElements: ReadonlyArray<Element> \| null;
		ariaHasPopup: string \| null;
		ariaHidden: string \| null;
		ariaInvalid: string \| null;
		ariaKeyShortcuts: string \| null;
		ariaLabel: string \| null;
		ariaLabelledByElements: ReadonlyArray<Element> \| null;
		ariaLevel: string \| null;
		ariaLive: string \| null;
		ariaModal: string \| null;
		ariaMultiLine: string \| null;
		ariaMultiSelectable: string \| null;
		ariaOrientation: string \| null;
		ariaOwnsElements: ReadonlyArray<Element> \| null;
		ariaPlaceholder: string \| null;
		ariaPosInSet: string \| null;
		ariaPressed: string \| null;
		ariaReadOnly: string \| null;
		ariaRelevant: string \| null;
		ariaRequired: string \| null;
		ariaRoleDescription: string \| null;
		ariaRowCount: string \| null;
		ariaRowIndex: string \| null;
		ariaRowIndexText: string \| null;
		ariaRowSpan: string \| null;
		ariaSelected: string \| null;
		ariaSetSize: string \| null;
		ariaSort: string \| null;
		ariaValueMax: string \| null;
		ariaValueMin: string \| null;
		ariaValueNow: string \| null;
		ariaValueText: string \| null;
		role: string \| null;
		animate(keyframes: Keyframe[] \| PropertyIndexedKeyframes \| null, options?: number \| KeyframeAnimationOptions): Animation;
		getAnimations(options?: GetAnimationsOptions): Animation[];
		after(...nodes: (Node \| string)[]): void;
		before(...nodes: (Node \| string)[]): void;
		remove(): void;
		replaceWith(...nodes: (Node \| string)[]): void;
		readonly nextElementSibling: Element \| null;
		readonly previousElementSibling: Element \| null;
		readonly childElementCount: number;
		readonly children: HTMLCollection;
		readonly firstElementChild: Element \| null;
		readonly lastElementChild: Element \| null;
		append(...nodes: (Node \| string)[]): void;
		moveBefore(node: Node, child: Node \| null): void;
		prepend(...nodes: (Node \| string)[]): void;
		querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] \| null;
		querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] \| null;
		querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] \| null;
		querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] \| null;
		querySelector<E extends Element = Element>(selectors: string): E \| null;
		querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
		querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
		querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
		querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
		querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
		replaceChildren(...nodes: (Node \| string)[]): void;
		readonly assignedSlot: HTMLSlotElement \| null;
		readonly attributeStyleMap: StylePropertyMap;
		get style(): CSSStyleDeclaration;
		set style(cssText: string);
		contentEditable: string;
		enterKeyHint: string;
		inputMode: string;
		readonly isContentEditable: boolean;
		onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) \| null;
		onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) \| null;
		onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) \| null;
		onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) \| null;
		onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) \| null;
		onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) \| null;
		onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) \| null;
		onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) \| null;
		oncancel: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onchange: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onclose: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		oncommand: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) \| null;
		oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) \| null;
		ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) \| null;
		ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) \| null;
		ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) \| null;
		ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) \| null;
		ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) \| null;
		ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) \| null;
		ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) \| null;
		ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onemptied: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onended: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onerror: OnErrorEventHandler;
		onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) \| null;
		onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) \| null;
		ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		oninput: ((this: GlobalEventHandlers, ev: InputEvent) => any) \| null;
		oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) \| null;
		onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) \| null;
		onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) \| null;
		onload: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) \| null;
		onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) \| null;
		onpause: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onplay: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onplaying: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) \| null;
		onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) \| null;
		onratechange: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onreset: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) \| null;
		onscroll: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) \| null;
		onseeked: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onseeking: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onselect: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onstalled: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) \| null;
		onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) \| null;
		ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) \| null \| undefined;
		ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) \| null \| undefined;
		ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) \| null \| undefined;
		ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) \| null \| undefined;
		ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) \| null;
		ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) \| null;
		ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) \| null;
		ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) \| null;
		onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) \| null;
		onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) \| null;
		autofocus: boolean;
		readonly dataset: DOMStringMap;
		nonce: string;
		tabIndex: number;
		blur(): void;
		focus(options?: FocusOptions): void;
		disconnectedCallback?(): void;
		requestUpdate?(name?: string, oldValue?: unknown): void;
		};
		formAssociated: boolean;
		metadata: FormControlMetadata;
		get observedAttributes(): string[];
		} & TBase;
		export {};

+182

dist/mixin/index.js

		import { FormControlError as e } from "../internal/errors.js";
		import { parseValueSchema as t } from "../internal/schema.js";
		import { isObjectLiteral as n } from "../internal/utils.js";
		//#region src/mixin/index.ts
		function r(r) {
		return class extends r {
		static {
		this.formAssociated = !0;
		}
		get readOnly() {
		return this.getAttribute("readonly") !== null;
		}
		set readOnly(e) {
		this.toggleAttribute("readonly", e), this._requestUpdate();
		}
		get disabled() {
		return this.getAttribute("disabled") !== null;
		}
		set disabled(e) {
		this.toggleAttribute("disabled", e), this._requestUpdate();
		}
		get required() {
		return this.getAttribute("required") !== null;
		}
		set required(e) {
		this.toggleAttribute("required", e), this._requestUpdate();
		}
		get name() {
		return this.getAttribute("name") ?? "";
		}
		set name(e) {
		this.setAttribute("name", e), this._requestUpdate();
		}
		get noValidate() {
		return this.getAttribute("novalidate") !== null \|\| this._formInternals.form?.noValidate === !0;
		}
		set noValidate(e) {
		this.toggleAttribute("novalidate", e), this._requestUpdate();
		}
		set value(e) {
		this.updateValue(e), this._requestUpdate();
		}
		get value() {
		return this._value;
		}
		updateValue(e) {
		let t = this._value;
		this._value = structuredClone(e), !this.checkValidity() && this._metadata.strict && (this._value = t, console.error("FormControlError: (strict mode)", this.validationMessage)), this._updateFormState();
		}
		get form() {
		return this._formInternals.form;
		}
		get willValidate() {
		return this._formInternals.willValidate;
		}
		get validity() {
		return this._formInternals.validity;
		}
		get validationMessage() {
		return this._formInternals.validationMessage;
		}
		get valueAsString() {
		return JSON.stringify(this.value);
		}
		get valueAsNumber() {
		return Number(this.valueAsString);
		}
		set valueAsNumber(t) {
		if (typeof this._value == "number" && typeof t == "number") this.value = t;
		else throw new e(this.localName, "cannot set number value on non-number type");
		}
		get type() {
		return this.localName;
		}
		get _metadata() {
		return this.constructor.metadata;
		}
		get _validators() {
		return this._metadata.validators ?? [];
		}
		get _internals() {
		return this._formInternals;
		}
		constructor(...e) {
		super(...e), this._formInternals = this.attachInternals(), this._initialValue = this.value;
		}
		connectedCallback() {
		super.connectedCallback && super.connectedCallback(), this.tabIndex = 0, this._updateFormState(), this.shadowRoot?.addEventListener("input", (e) => e.stopPropagation()), this.shadowRoot?.addEventListener("change", (e) => e.stopPropagation());
		}
		static get observedAttributes() {
		return (super.observedAttributes ?? []).concat([
		"value",
		"readonly",
		"required",
		"name",
		"novalidate",
		"disabled"
		]);
		}
		attributeChangedCallback(e, t, n) {
		super.attributeChangedCallback && super.attributeChangedCallback(e, t, n), n !== t && this._handleAttributeChange(e, n);
		}
		_handleAttributeChange(e, n) {
		switch (e) {
		case "value":
		this.value = t(this.localName, n, this._metadata.valueSchema), this._initialValue === void 0 && (this._initialValue = this.value);
		break;
		case "readonly":
		this.readOnly = n !== null;
		break;
		case "disabled":
		this.disabled = n !== null;
		break;
		case "required":
		this.required = n !== null;
		break;
		case "name":
		this.name = n;
		break;
		}
		}
		formResetCallback() {
		this.value = this._initialValue, this.checkValidity();
		}
		formStateRestoreCallback(e, t) {
		this.value = e, this.checkValidity();
		}
		reportValidity() {
		return this._formInternals.reportValidity();
		}
		checkValidity() {
		if (this.noValidate) this._formInternals.setValidity({});
		else for (let e of this._validators) {
		let t = e(this.value, this);
		if (t.validity.valid) this._formInternals.setValidity({});
		else {
		this._formInternals.setValidity(t.validity, t.message, this.shadowRoot?.activeElement ?? void 0);
		break;
		}
		}
		return this._formInternals.checkValidity();
		}
		setValidity(e, t) {
		this._formInternals.setValidity(e, t);
		}
		dispatchInputEvent() {
		this.dispatchEvent(new InputEvent("input", {
		bubbles: !0,
		cancelable: !0,
		data: this.valueAsString
		}));
		}
		dispatchChangeEvent() {
		this.dispatchEvent(new Event("change", {
		bubbles: !0,
		cancelable: !0
		}));
		}
		dispatchUpdateEvent(e) {
		e === "input" ? this.dispatchInputEvent() : e === "change" && this.dispatchChangeEvent();
		}
		_updateFormState() {
		if (this.name) if (typeof this.value == "number") this._formInternals?.setFormValue(`${this.value}`);
		else if (n(this.value)) {
		let e = new FormData();
		Object.entries(this.value).filter(([e]) => e !== "value").forEach(([t, n]) => {
		e.set(`${this.name}-${t}`, `${n}`);
		}), this._formInternals?.setFormValue(e);
		} else if (Array.isArray(this.value)) {
		let e = new FormData();
		this.value.forEach((t) => e.append(`${this.name}`, t)), this._formInternals?.setFormValue(e);
		} else this._formInternals?.setFormValue(this.value);
		}
		_requestUpdate() {
		this.requestUpdate && this.requestUpdate();
		}
		};
		}
		//#endregion
		export { r as FormControlMixin };

		//# sourceMappingURL=index.js.map

+1

dist/mixin/index.js.map

{"version":3,"file":"index.js","names":[],"sources":["../../src/mixin/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { FormControl, FormControlMetadata, FormControlValue } from '../internal/types.js';\nimport { FormControlError } from '../internal/errors.js';\nimport { parseValueSchema } from '../internal/schema.js';\nimport { isObjectLiteral } from '../internal/utils.js';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor = (new (...args: any[]) => HTMLElement & {\n connectedCallback?(): void;\n disconnectedCallback?(): void;\n attributeChangedCallback?(name: string, oldValue: string | null, newValue: string | null): void;\n requestUpdate?(name?: string, oldValue?: unknown): void;\n}) & {\n observedAttributes?: string[];\n};\n\n/**\n * @description A mixin that adds form control functionality to a component.\n * @event input - Dispatched when the value of the component changes as a result of a user action.\n * @event change - Dispatched when the user modifies and commits the element's value.\n * @event reset - Dispatched when the control state was reset to its initial value.\n * @event invalid - Dispatched when the control is invalid.\n */\nexport function FormControlMixin<TBase extends Constructor, T extends FormControlValue>(SuperClass: TBase) {\n return class FormControlBase extends SuperClass {\n static formAssociated = true;\n\n static metadata: FormControlMetadata;\n\n /** determine if component is in readonly/non-editable state */\n get readOnly(): boolean {\n return this.getAttribute('readonly') !== null;\n }\n\n set readOnly(value: boolean | unknown) {\n this.toggleAttribute('readonly', value as boolean);\n this._requestUpdate();\n }\n\n /** determine if component is in disabled state */\n get disabled(): boolean {\n return this.getAttribute('disabled') !== null;\n }\n\n // unknown forces generation of get/set in type defs see https://github.com/microsoft/TypeScript/issues/58790\n set disabled(value: boolean | unknown) {\n this.toggleAttribute('disabled', value as boolean);\n this._requestUpdate();\n }\n\n /** determine if the component value requires input */\n get required(): boolean {\n return this.getAttribute('required') !== null;\n }\n\n set required(value: T | unknown) {\n this.toggleAttribute('required', value as boolean);\n this._requestUpdate();\n }\n\n /** name associated to parent form */\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(value: string) {\n this.setAttribute('name', value);\n this._requestUpdate();\n }\n\n /** get determine if component is in no validation state */\n get noValidate(): boolean {\n return this.getAttribute('novalidate') !== null || this._formInternals.form?.noValidate === true;\n }\n\n /** set determine if component is in no validation state */\n set noValidate(value: boolean | unknown) {\n this.toggleAttribute('novalidate', value as boolean);\n this._requestUpdate();\n }\n\n /** @internal */\n _value: T | undefined;\n\n /** value state of the component */\n set value(value: T | unknown) {\n this.updateValue(value as T);\n this._requestUpdate();\n }\n\n get value(): T | undefined {\n return this._value;\n }\n\n /** @protected */\n updateValue(value: T) {\n const previousValue = this._value;\n this._value = structuredClone(value);\n const valid = this.checkValidity();\n\n if (!valid && this._metadata.strict) {\n this._value = previousValue;\n console.error('FormControlError: (strict mode)', this.validationMessage);\n }\n\n this._updateFormState();\n }\n\n /** associated parent form */\n get form() {\n return this._formInternals.form;\n }\n\n /** determine if the component is a candidate for constraint checking */\n get willValidate() {\n return this._formInternals.willValidate;\n }\n\n /** validity state of the component */\n get validity() {\n return this._formInternals.validity;\n }\n\n /** validation message of the component */\n get validationMessage() {\n return this._formInternals.validationMessage;\n }\n\n /** stringified value of the component */\n get valueAsString() {\n return JSON.stringify(this.value);\n }\n\n /** parsed number value of the component */\n get valueAsNumber(): number {\n return Number(this.valueAsString);\n }\n\n set valueAsNumber(value: number) {\n if (typeof this._value === 'number' && typeof value === 'number') {\n this.value = value as T;\n } else {\n throw new FormControlError(this.localName, 'cannot set number value on non-number type');\n }\n }\n\n get type() {\n return this.localName;\n }\n\n /** @internal */\n get _metadata() {\n return (this.constructor as FormControl).metadata;\n }\n\n /** @internal */\n _formInternals = this.attachInternals();\n /** @internal */\n _initialValue: T | undefined;\n\n /** @internal */\n get _validators() {\n return this._metadata.validators ?? [];\n }\n\n /** @protected */\n get _internals() {\n return this._formInternals;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n constructor(...args: any[]) {\n super(...args);\n this._initialValue = this.value;\n }\n\n connectedCallback() {\n if (super.connectedCallback) {\n super.connectedCallback();\n }\n\n this.tabIndex = 0;\n this._updateFormState();\n // 'input' event composes but 'change' does not https://github.com/whatwg/html/issues/5453\n this.shadowRoot?.addEventListener('input', e => e.stopPropagation());\n this.shadowRoot?.addEventListener('change', e => e.stopPropagation());\n }\n\n static get observedAttributes() {\n const attrs = super.observedAttributes ?? [];\n return attrs.concat(['value', 'readonly', 'required', 'name', 'novalidate', 'disabled']);\n }\n\n attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n if (super.attributeChangedCallback) {\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n if (newValue === oldValue) {\n return;\n }\n\n this._handleAttributeChange(name, newValue);\n }\n\n /** @internal */\n _handleAttributeChange(name: string, newValue: string) {\n switch (name) {\n case 'value':\n this.value = parseValueSchema<T>(this.localName, newValue, this._metadata.valueSchema);\n if (this._initialValue === undefined) {\n this._initialValue = this.value;\n }\n break;\n case 'readonly':\n this.readOnly = newValue !== null;\n break;\n case 'disabled':\n this.disabled = newValue !== null;\n break;\n case 'required':\n this.required = newValue !== null;\n break;\n case 'name':\n this.name = newValue;\n break;\n }\n }\n\n /** @protected */\n formResetCallback() {\n this.value = this._initialValue;\n this.checkValidity();\n }\n\n /** @protected https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/*/\n formStateRestoreCallback(state: T, _reason: string) {\n this.value = state;\n this.checkValidity();\n }\n\n /** report validity of the component */\n reportValidity() {\n return this._formInternals.reportValidity();\n }\n\n /** check validity of the component */\n checkValidity() {\n if (this.noValidate) {\n this._formInternals.setValidity({});\n } else {\n for (const validator of this._validators) {\n const result = validator(this.value, this as unknown as FormControl);\n if (!result.validity.valid) {\n this._formInternals.setValidity(\n result.validity,\n result.message,\n (this.shadowRoot?.activeElement as HTMLElement) ?? undefined\n );\n break;\n } else {\n this._formInternals.setValidity({});\n }\n }\n }\n\n return this._formInternals.checkValidity();\n }\n\n /** @protected */\n setValidity(validity: Partial<ValidityState>, message?: string) {\n this._formInternals.setValidity(validity, message);\n }\n\n /** @protected */\n dispatchInputEvent() {\n this.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true, data: this.valueAsString }));\n }\n\n /** @protected */\n dispatchChangeEvent() {\n this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));\n }\n\n /** @protected */\n dispatchUpdateEvent(type: 'input' | 'change') {\n if (type === 'input') {\n this.dispatchInputEvent();\n } else if (type === 'change') {\n this.dispatchChangeEvent();\n }\n }\n\n /** @internal */\n _updateFormState() {\n if (this.name) {\n if (typeof this.value === 'number') {\n this._formInternals?.setFormValue(`${this.value}`);\n } else if (isObjectLiteral(this.value)) {\n const formData = new FormData();\n Object.entries(this.value as Record<string, unknown>)\n .filter(([key]) => key !== 'value')\n .forEach(([key, value]) => {\n formData.set(`${this.name}-${key}`, `${value}`);\n });\n this._formInternals?.setFormValue(formData);\n } else if (Array.isArray(this.value)) {\n const formData = new FormData();\n this.value.forEach(i => formData.append(`${this.name}`, i));\n this._formInternals?.setFormValue(formData);\n } else {\n this._formInternals?.setFormValue(this.value as null | string | File);\n }\n }\n }\n\n /** @internal */\n _requestUpdate() {\n if (this.requestUpdate) {\n this.requestUpdate();\n }\n }\n };\n}\n"],"mappings":"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"}

+18

dist/validators/index.d.ts

		import { FormControl, ValidatorResult } from '../internal/types.js';
		/**
		* Given a json schema, check the value against the schema
		* JSON Schema follows the OpenAI JSON Schema for structured outputs
		* https://platform.openai.com/docs/guides/structured-outputs
		*
		* - All fields or function parameters must specify required
		* - Require additionalProperties: false on all objects
		* - Structured Outputs support the following types:
		* - String
		* - Number
		* - Boolean
		* - Object
		* - Array
		* - Enum
		*/
		export declare function valueSchemaValidator(value: unknown, element: FormControl): ValidatorResult;
		export declare function requiredValidator(value: unknown, element: FormControl): ValidatorResult;

+22

dist/validators/index.js

		import { validateSchema as e } from "../internal/schema.js";
		//#region src/validators/index.ts
		function t(t, n) {
		let r = n.constructor.metadata;
		return e(r.valueSchema, t);
		}
		function n(e, t) {
		return t.required && (e == null \|\| e === "") ? {
		validity: {
		valueMissing: !0,
		valid: !1
		},
		message: "This field is required"
		} : {
		validity: { valid: !0 },
		message: ""
		};
		}
		//#endregion
		export { n as requiredValidator, t as valueSchemaValidator };

		//# sourceMappingURL=index.js.map

+1

dist/validators/index.js.map

{"version":3,"file":"index.js","names":[],"sources":["../../src/validators/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { validateSchema } from '../internal/schema.js';\nimport type { FormControl, ValidatorResult } from '../internal/types.js';\n\n/**\n * Given a json schema, check the value against the schema\n * JSON Schema follows the OpenAI JSON Schema for structured outputs\n * https://platform.openai.com/docs/guides/structured-outputs\n *\n * - All fields or function parameters must specify required\n * - Require additionalProperties: false on all objects\n * - Structured Outputs support the following types:\n * - String\n * - Number\n * - Boolean\n * - Object\n * - Array\n * - Enum\n */\nexport function valueSchemaValidator(value: unknown, element: FormControl): ValidatorResult {\n const metadata = (element as any).constructor.metadata; // eslint-disable-line @typescript-eslint/no-explicit-any\n return validateSchema(metadata.valueSchema, value);\n}\n\nexport function requiredValidator(value: unknown, element: FormControl): ValidatorResult {\n if (\n (element as unknown as { required: boolean }).required &&\n (value === undefined || value === null || value === '')\n ) {\n return { validity: { valueMissing: true, valid: false }, message: 'This field is required' };\n }\n return { validity: { valid: true }, message: '' };\n}\n"],"mappings":";;AAqBA,SAAgB,EAAqB,GAAgB,GAAuC;CAC1F,IAAM,IAAY,EAAgB,YAAY;AAC9C,QAAO,EAAe,EAAS,aAAa,EAAM;;AAGpD,SAAgB,EAAkB,GAAgB,GAAuC;AAOvF,QALG,EAA6C,aAC7C,KAAiC,QAAQ,MAAU,MAE7C;EAAE,UAAU;GAAE,cAAc;GAAM,OAAO;GAAO;EAAE,SAAS;EAA0B,GAEvF;EAAE,UAAU,EAAE,OAAO,IAAM;EAAE,SAAS;EAAI"}

+4

-4

package.json

		{
		"name": "@nvidia-elements/forms",
		"version": "0.0.1",
		"version": "0.0.2",
		"release": {
		@@ -76,7 +76,7 @@ "extends": "../../release.config.js"
		"vitest": "4.1.0",
		"@internals/testing": "0.0.0",
		"@internals/eslint": "0.0.0",
		"@nvidia-elements/styles": "0.0.0",
		"@internals/testing": "0.0.0",
		"@nvidia-elements/styles": "0.0.1",
		"@internals/vite": "0.0.0",
		"@nvidia-elements/lint": "0.0.0"
		"@nvidia-elements/lint": "0.0.1"
		},
		@@ -83,0 +83,0 @@ "wireit": {

@nvidia-elements/forms - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics