@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/forms/control/control.global.js

@@ -0,0 +1,6 @@
+//#region src/forms/control/control.global.css?inline
+var e = "[nve-control]:not([nofocus]):has(*:focus-visible)::part(_input){outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}[nve-control] input::placeholder,[nve-control] textarea::placeholder{color:var(--nve-sys-text-placeholder-color)!important}[nve-control] input::-webkit-search-cancel-button,[nve-control] input::-webkit-calendar-picker-indicator{opacity:0!important;display:none!important}[nve-control]:has([nve-control]){--control-type: custom}[nve-control]:not(:has(label))::part(_label){display:none!important}[nve-control]:not(:has(nve-control-message:not([hidden])))::part(_messages){display:none!important}[nve-control=\"\"]:has(label)::part(_internal-host){grid-template-areas:\"label label label\" \"input input input\"}[nve-control=\"\"]:has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"input input input\" \"messages messages messages\"}[nve-control=\"\"]:has(label):has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}[nve-control=\"\"][layout=horizontal]:has(nve-control-message:not([hidden]))::part(_internal-host),[nve-control=\"\"][layout=horizontal-inline]:has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"label input input\" \". messages messages\"}[nve-control=\"\"][layout=horizontal]:not(:has(nve-control-message:not([hidden])))::part(_internal-host),[nve-control=\"\"][layout=horizontal-inline]:not(:has(nve-control-message:not([hidden])))::part(_internal-host){grid-template-areas:\"label input input\"}[nve-control=inline]:has(label)::part(_internal-host){grid-template-areas:\"input label label\"}[nve-control=inline]:has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"input input input\" \"messages messages messages\"}[nve-control=inline]:has(label):has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"input label label\" \"messages messages messages\"}[nve-control=inline]:not(:has(nve-control-message:not([hidden])))::part(_internal-host){grid-template-areas:\"input label label\"}[nve-control=inline]:not(:has(label),:has(nve-control-message:not([hidden])))::part(_internal-host){grid-template-areas:\"input input input\"}nve-control:has(nve-monaco-input),nve-control:has(nve-monaco-diff-input){contain:none}[prominence=muted]>[nve-control]:state(checked),[prominence=muted][nve-control]:state(checked){--filter: grayscale(90%)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=control.global.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control.global.js","names":[],"sources":["../../../src/forms/control/control.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n/**\n * Majority of this CSS will be able to be removed once :has-slotted is widely supported\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:has-slotted\n * https://chromestatus.com/feature/5134941143433216\n */\n\n[nve-control]:not([nofocus]):has(*:focus-visible)::part(_input) {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[nve-control] input::placeholder,\n[nve-control] textarea::placeholder {\n  color: var(--nve-sys-text-placeholder-color) !important;\n}\n\n[nve-control] input::-webkit-search-cancel-button,\n[nve-control] input::-webkit-calendar-picker-indicator {\n  opacity: 0 !important;\n  display: none !important;\n}\n\n[nve-control]:has([nve-control]) {\n  --control-type: custom;\n}\n\n[nve-control]:not(:has(label))::part(_label) {\n  display: none !important;\n}\n\n[nve-control]:not(:has(nve-control-message:not([hidden])))::part(_messages) {\n  display: none !important;\n}\n\n/** block controls */\n[nve-control='']:has(label)::part(_internal-host) {\n  grid-template-areas:\n    'label label label'\n    'input input input';\n}\n\n[nve-control='']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control='']:has(label):has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control=''][layout='horizontal']:has(nve-control-message:not([hidden]))::part(_internal-host),\n[nve-control=''][layout='horizontal-inline']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n[nve-control=''][layout='horizontal']:not(:has(nve-control-message:not([hidden])))::part(_internal-host),\n[nve-control=''][layout='horizontal-inline']:not(:has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'label input input';\n}\n\n/** inline controls */\n[nve-control='inline']:has(label)::part(_internal-host) {\n  grid-template-areas: 'input label label';\n}\n\n[nve-control='inline']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control='inline']:has(label):has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input label label'\n    'messages messages messages';\n}\n\n[nve-control='inline']:not(:has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'input label label';\n}\n\n[nve-control='inline']:not(:has(label), :has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'input input input';\n}\n\n/* customizations for first-party elements */\nnve-control:has(nve-monaco-input),\nnve-control:has(nve-monaco-diff-input) {\n  contain: none;\n}\n\n[prominence='muted'] > [nve-control]:state(checked),\n[prominence='muted'][nve-control]:state(checked) {\n  --filter: grayscale(90%);\n}\n"],"mappings":""}

package/dist/forms/control/control.js

@@ -0,0 +1,6 @@
+//#region src/forms/control/control.css?inline
+var e = ":host{--cursor: pointer;--accent-color: var(--nve-sys-accent-secondary-background);--color: var(--nve-sys-interaction-field-color);--label-color: var(--nve-sys-interaction-field-color);--label-text-transform: capitalize;--label-font-weight: var(--nve-ref-font-weight-medium);--label-font-size: var(--nve-ref-font-size-100);--control-width: 100%;--control-height: var(--nve-sys-interaction-field-height);--_label-width: var(--label-width, 180px);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--opacity: 1;--filter: none;contain:content}:host([nve-control=\"inline\"]){--control-height: auto}::slotted(*){color-scheme:var(--nve-sys-color-scheme);font-family:inherit}::slotted(label){font-weight:var(--label-font-weight)!important;font-size:var(--label-font-size)!important;color:var(--label-color)!important;cursor:var(--cursor)!important;text-transform:var(--label-text-transform)!important;display:inline-block!important;line-height:1em!important;align-self:center!important}::slotted(label::first-letter){text-transform:capitalize}:host(:state(disabled)),:host(:state(disabled)) ::slotted(nve-control-message:not([status])){--cursor: not-allowed}:host(:state(disabled)){--opacity: var(--nve-ref-opacity-500)}:host(:state(invalid)) ::slotted(nve-control-message:not([error],[status])){display:none}:host([fit-content]){--control-width: fit-content;--label-width: fit-content;--width: fit-content}:host([nve-control]) ::slotted(input:focus),:host([nve-control]) ::slotted(select:focus),:host([nve-control]) ::slotted(textarea:focus),:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],[internal-host]:has(nve-icon-button){outline:0!important}@container style(--control-type: custom){[input]{outline:0!important}}::slotted(nve-button[nve-control]){width:100%}[input]{cursor:var(--cursor);min-height:var(--control-height);opacity:var(--opacity);filter:var(--filter);grid-area:input;display:flex;line-height:1}:host([nve-control=\"inline\"]){[internal-host]{min-height:var(--control-height)}[input]{min-height:min-content}}slot{line-height:1;width:100%}slot[name=label]{grid-area:label;display:inline-flex;align-self:center}slot[name=messages]{grid-area:messages;display:inline-flex}[name=messages]:not(:has-slotted),[name=label]:not(:has-slotted){display:none!important}[internal-host]{display:grid;width:100%;gap:var(--nve-ref-space-xs);grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-template-areas:\"input input input\"}:host([nve-control=\"inline\"]) [internal-host]{align-items:center;grid-template-columns:auto 1fr 1fr;slot[name=label],slot[name=messages]{align-items:center}::slotted(label){font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--color)!important;width:100%}slot[name=label]{line-height:1;width:100%}}:host([layout=\"horizontal\"]) [internal-host],:host([layout=\"horizontal-inline\"]) [internal-host]{grid-template-columns:var(--_label-width) 1fr minmax(0,var(--_label-width))}[internal-host]{&:has([name=label]:has-slotted){grid-template-areas:\"label label label\" \"input input input\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}}:host([layout=\"horizontal\"]),:host([layout=\"horizontal-inline\"]){[internal-host]{&:has([name=messages]:has-slotted){grid-template-areas:\"label input input\" \". messages messages\"}&:not(:has([name=messages]:has-slotted)){grid-template-areas:\"label input input\"}}}:host([nve-control=\"inline\"]){[internal-host]{grid-template-areas:\"input input input\";&:has([name=label]:has-slotted){grid-template-areas:\"input label label\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"input label label\" \"messages messages messages\"}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --cursor: pointer;\n  --accent-color: var(--nve-sys-accent-secondary-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: capitalize;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --control-width: 100%;\n  --control-height: var(--nve-sys-interaction-field-height);\n  --_label-width: var(--label-width, 180px);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --opacity: 1;\n  --filter: none;\n  contain: content;\n}\n\n:host([nve-control='inline']) {\n  --control-height: auto;\n}\n\n::slotted(*) {\n  color-scheme: var(--nve-sys-color-scheme);\n  font-family: inherit;\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n  display: inline-block !important;\n  line-height: 1em !important;\n  align-self: center !important;\n}\n\n::slotted(label::first-letter) {\n  text-transform: capitalize;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n  display: none;\n}\n\n:host([fit-content]) {\n  --control-width: fit-content;\n  --label-width: fit-content;\n  --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button),\n[internal-host]:has(nve-icon-button) {\n  outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n  [input] {\n    outline: 0 !important;\n  }\n}\n\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]) {\n  width: 100%;\n}\n\n[input] {\n  cursor: var(--cursor);\n  min-height: var(--control-height);\n  opacity: var(--opacity);\n  filter: var(--filter);\n  grid-area: input;\n  display: flex;\n  line-height: 1;\n}\n\n:host([nve-control='inline']) {\n  [internal-host] {\n    min-height: var(--control-height);\n  }\n\n  [input] {\n    min-height: min-content;\n  }\n}\n\nslot {\n  line-height: 1;\n  width: 100%;\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: inline-flex;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n[internal-host] {\n  display: grid;\n  width: 100%;\n  gap: var(--nve-ref-space-xs);\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n  align-items: center;\n  grid-template-columns: auto 1fr 1fr;\n\n  slot[name='label'],\n  slot[name='messages'] {\n    align-items: center;\n  }\n\n  & ::slotted(label) {\n    font-weight: var(--nve-ref-font-weight-regular) !important;\n    color: var(--color) !important;\n    width: 100%;\n  }\n\n  slot[name='label'] {\n    line-height: 1;\n    width: 100%;\n  }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n  &:has([name='label']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &:has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'input input input'\n      'messages messages messages';\n  }\n\n  &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input'\n      'messages messages messages';\n  }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n  [internal-host] {\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'label input input'\n        '. messages messages';\n    }\n\n    &:not(:has([name='messages']:has-slotted)) {\n      grid-template-areas: 'label input input';\n    }\n  }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n  [internal-host] {\n    grid-template-areas: 'input input input';\n\n    &:has([name='label']:has-slotted) {\n      grid-template-areas: 'input label label';\n    }\n\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n\n    &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input label label'\n        'messages messages messages';\n    }\n  }\n}\n"],"mappings":""}

package/dist/forms/control/control2.js

@@ -0,0 +1,114 @@
+import { appendRootNodeStyle as e, getAttributeListChanges as t } from "../../internal/utils/dom.js";
+import { associateAriaDescribedBy as n, associateDataList as r, associateLabel as i, attachInternals as a } from "../../internal/utils/a11y.js";
+import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { I18nController as s } from "../../internal/controllers/i18n.controller.js";
+import { typeSSR as c } from "../../internal/controllers/type-ssr.controller.js";
+import { hostAttr as l } from "../../internal/decorators/host-attr.js";
+import { useStyles as u } from "../../internal/styles/index.js";
+import { inputQuery as d, setupControlStates as f, setupControlStatusStates as p, setupControlValidationStates as m } from "../utils/states.js";
+import { setupControlLayoutStates as h } from "../utils/layout.js";
+import g from "./control.global.js";
+import _ from "./control.js";
+import { LitElement as v, html as y, isServer as b, nothing as x } from "lit";
+import { property as S } from "lit/decorators/property.js";
+//#region src/forms/control/control.ts
+var C = class extends v {
+	constructor(...e) {
+		super(...e), this.fitText = !1, this.fitContent = !1, this.i18n = this.#e.i18n, this.nveControl = "", this._associateDatalist = !0;
+	}
+	#e = new s(this);
+	get #t() {
+		return this.shadowRoot?.querySelector("slot[name=\"label\"]")?.assignedElements({ flatten: !0 })?.[0];
+	}
+	get #n() {
+		return this.shadowRoot?.querySelector("slot[name=\"messages\"]")?.assignedElements({ flatten: !0 }) ?? [];
+	}
+	#r;
+	get input() {
+		return !b && !this.#r && (this.#r = (this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]"))) || this.querySelector(d)), this.#r;
+	}
+	get prefixContent() {
+		return x;
+	}
+	get suffixContent() {
+		return x;
+	}
+	#i = [];
+	static {
+		this.styles = u([_]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-control",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return this.nveControl === "inline" ? y`<div internal-host part="_internal-host"><div input part="_input"><slot interaction-state></slot></div><slot name="label" part="_label"></slot><slot name="messages" part="_messages"></slot></div>` : y`<div internal-host part="_internal-host"><slot name="label" part="_label"></slot><div input part="_input">${this.prefixContent}<slot></slot>${this.suffixContent}</div><slot name="messages" part="_messages"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), a(this), e(this, g), this.shadowRoot.addEventListener("slotchange", () => {
+			this.#l(), this.input && this.#i.length === 0 && (this.#a(), this.#o());
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#i.forEach((e) => e.disconnect());
+	}
+	reset() {
+		this.input.value = this.input.getAttribute("value") ?? "", this.requestUpdate(), this.dispatchEvent(new CustomEvent("reset", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	#a() {
+		m(this, this.#n), this.#i.push(...f(this), ...p(this, this.#n), h(this), t(this, ["hidden", "status"], () => this.#l())), this.#c(), this.#u(), this.shadowRoot.addEventListener("slotchange", () => {
+			this.#l(), this.#u();
+		});
+	}
+	#o() {
+		this.fitText && (this.#s(), this.input.addEventListener("input", () => this.#s()), this.input.addEventListener("change", () => this.#s()));
+	}
+	#s() {
+		if (this.input.tagName === "INPUT") {
+			let e = this.input.type === "text" ? 0 : 4;
+			this.style.setProperty("--control-width", `${this.input.value.length + e}ch`), this.input.style.setProperty("max-width", `${this.input.value.length + 2}ch`, "important");
+		} else this.input.tagName === "SELECT" && this.style.setProperty("--control-width", `${this.input.options[this.input.selectedIndex].textContent.length + 4}ch`);
+	}
+	#c() {
+		this.input.showPicker || (this.input.showPicker = () => this.input.focus());
+	}
+	#l() {
+		this.input && (this.toggleAttribute("multiple", this.input?.multiple), this.input?.hasAttribute("size") ? this.setAttribute("size", "") : this.removeAttribute("size"));
+	}
+	#u() {
+		this.#d(), i(this.#t, this.input), n(Array.from(this.#n), this.input), this._associateDatalist && r(this.querySelector("datalist"), this.input);
+	}
+	#d() {
+		let e = this.querySelector("label") || this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).find((e) => e.tagName === "LABEL");
+		e && (e.slot = "label");
+	}
+	showPicker() {
+		try {
+			this.input.showPicker();
+		} catch {}
+	}
+};
+o([S({ type: String })], C.prototype, "status", void 0), o([S({
+	type: String,
+	reflect: !0
+})], C.prototype, "layout", void 0), o([S({
+	type: Boolean,
+	reflect: !0,
+	attribute: "fit-text"
+})], C.prototype, "fitText", void 0), o([S({
+	type: Boolean,
+	reflect: !0,
+	attribute: "fit-content"
+})], C.prototype, "fitContent", void 0), o([S({ type: Object })], C.prototype, "i18n", void 0), o([S({
+	type: String,
+	reflect: !0
+})], C.prototype, "prominence", void 0), o([l({ attribute: "nve-control" })], C.prototype, "nveControl", void 0), C = o([c()], C);
+//#endregion
+export { C as Control };
+
+//# sourceMappingURL=control2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control2.js","names":["#i18nController","#label","#messages","#input","#updateStyleStates","#observers","#setupInput","#setupFitText","#polyfillShowPicker","#updateAssociations","#getCharacterWidth","#assignLabel"],"sources":["../../../src/forms/control/control.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { LitElement, html, nothing, isServer } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateLabel,\n  associateAriaDescribedBy,\n  associateDataList,\n  appendRootNodeStyle,\n  getAttributeListChanges,\n  I18nController,\n  hostAttr,\n  typeSSR\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlValidationStates,\n  setupControlStates,\n  setupControlStatusStates,\n  inputQuery\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport globalStyles from './control.global.css?inline';\nimport styles from './control.css?inline';\n\n/**\n * @element nve-control\n * @description Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input element\n * @slot label - Label element\n * @cssprop --cursor\n * @cssprop --accent-color\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-width\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @cssprop --control-width\n * @cssprop --control-height\n\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@typeSSR()\nexport class Control extends LitElement {\n  /** Set current visaul state for control. This overrides any validation states active. */\n  @property({ type: String }) status: 'warning' | 'error' | 'success' | 'disabled';\n\n  /** Set current control + label + control message layout. Layouts will collapse based on available container space. */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-text' }) fitText = false;\n\n  /** Sets the input to match native default content block */\n  @property({ type: Boolean, reflect: true, attribute: 'fit-content' }) fitContent = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables internal string values to update for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Set the visual prominence of the control */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get #label() {\n    return this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"label\"]')\n      ?.assignedElements({ flatten: true })?.[0] as HTMLLabelElement;\n  }\n\n  get #messages() {\n    return (this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"messages\"]')\n      ?.assignedElements({ flatten: true }) ?? []) as ControlMessage[];\n  }\n\n  #input: HTMLInputElement;\n\n  /** @private */\n  get input(): HTMLInputElement {\n    if (!isServer && !this.#input) {\n      const slotted =\n        this.querySelector('slot')\n          ?.assignedElements()\n          ?.find(i => i.matches(inputQuery)) ??\n        Array.from(this.shadowRoot!.querySelector('slot')?.assignedElements({ flatten: true }) ?? []).find(i =>\n          i.matches(inputQuery)\n        );\n      this.#input = (slotted ? slotted : this.querySelector(inputQuery)) as HTMLInputElement;\n    }\n\n    return this.#input;\n  }\n\n  /** @private */\n  protected get prefixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  /** @private */\n  protected get suffixContent(): typeof nothing | TemplateResult {\n    return nothing;\n  }\n\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  protected _associateDatalist = true;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control',\n    version: '0.0.0'\n  };\n\n  render() {\n    return this.nveControl !== 'inline'\n      ? html`\n      <div internal-host part=\"_internal-host\">\n        <slot name=\"label\" part=\"_label\"></slot>\n        <div input part=\"_input\">\n          ${this.prefixContent}\n          <slot></slot>\n          ${this.suffixContent}\n        </div>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `\n      : html`\n      <div internal-host part=\"_internal-host\">\n        <div input part=\"_input\"><slot interaction-state></slot></div>\n        <slot name=\"label\" part=\"_label\"></slot>\n        <slot name=\"messages\" part=\"_messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n\n    this.shadowRoot!.addEventListener('slotchange', () => {\n      this.#updateStyleStates();\n\n      if (this.input && this.#observers.length === 0) {\n        this.#setupInput();\n        this.#setupFitText();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  /** Resets control value to initial attribute value and clears any active validation rules. */\n  reset() {\n    this.input.value = this.input.getAttribute('value') ?? '';\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }));\n  }\n\n  #setupInput() {\n    setupControlValidationStates(this, this.#messages);\n\n    this.#observers.push(\n      ...setupControlStates(this),\n      ...setupControlStatusStates(this, this.#messages),\n      setupControlLayoutStates(this),\n      getAttributeListChanges(this, ['hidden', 'status'], () => this.#updateStyleStates())\n    );\n\n    this.#polyfillShowPicker();\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', () => {\n      this.#updateStyleStates();\n      this.#updateAssociations();\n    });\n  }\n\n  #setupFitText() {\n    if (this.fitText) {\n      this.#getCharacterWidth();\n      this.input.addEventListener('input', () => this.#getCharacterWidth());\n      this.input.addEventListener('change', () => this.#getCharacterWidth());\n    }\n  }\n\n  #getCharacterWidth() {\n    if (this.input.tagName === 'INPUT') {\n      const offset = this.input.type !== 'text' ? 4 : 0;\n      this.style.setProperty('--control-width', `${this.input.value.length + offset}ch`);\n      this.input.style.setProperty('max-width', `${this.input.value.length + 2}ch`, 'important');\n    } else if (this.input.tagName === 'SELECT') {\n      this.style.setProperty(\n        '--control-width',\n        `${(this.input as unknown as HTMLSelectElement).options[(this.input as unknown as HTMLSelectElement).selectedIndex]!.textContent!.length + 4}ch`\n      );\n    }\n  }\n\n  #polyfillShowPicker() {\n    if (!this.input.showPicker) {\n      this.input.showPicker = () => this.input.focus();\n    }\n  }\n\n  #updateStyleStates() {\n    if (this.input) {\n      this.toggleAttribute('multiple', this.input?.multiple);\n      this.input?.hasAttribute('size') ? this.setAttribute('size', '') : this.removeAttribute('size');\n    }\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateLabel(this.#label, this.input);\n    associateAriaDescribedBy(Array.from(this.#messages), this.input);\n\n    if (this._associateDatalist) {\n      associateDataList(this.querySelector<HTMLDataListElement>('datalist')!, this.input);\n    }\n  }\n\n  #assignLabel() {\n    const label =\n      this.querySelector('label') ||\n      (this.shadowRoot!.querySelector('slot')!\n        .assignedNodes({ flatten: true })\n        .find((i: Node) => (i as HTMLElement).tagName === 'LABEL') as HTMLLabelElement);\n    if (label) {\n      label.slot = 'label';\n    }\n  }\n\n  protected showPicker() {\n    try {\n      this.input.showPicker();\n    } catch {\n      //\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAsB,EAAW;;8BAYuC,sBAGM,gBAKhD,MAAA,EAAqB,wBA6CO,8BAOhC;;CAvD/B,KAAwC,IAAI,EAAqB,KAAK;CAQtE,KAAA,IAAa;AACX,SAAO,KAAK,YACR,cAA+B,uBAAqB,EACpD,iBAAiB,EAAE,SAAS,IAAM,CAAC,GAAG;;CAG5C,KAAA,IAAgB;AACd,SAAQ,KAAK,YACT,cAA+B,0BAAwB,EACvD,iBAAiB,EAAE,SAAS,IAAM,CAAC,IAAI,EAAE;;CAG/C;CAGA,IAAI,QAA0B;AAY5B,SAXI,CAAC,KAAY,CAAC,MAAA,MAQhB,MAAA,KANE,KAAK,cAAc,OAAO,EACtB,kBAAkB,EAClB,MAAK,MAAK,EAAE,QAAA,oEAAmB,CAAC,IACpC,MAAM,KAAK,KAAK,WAAY,cAAc,OAAO,EAAE,iBAAiB,EAAE,SAAS,IAAM,CAAC,IAAI,EAAE,CAAC,CAAC,MAAK,MACjG,EAAE,QAAA,oEAAmB,CACtB,KACgC,KAAK,cAAc,EAAW,GAG5D,MAAA;;CAIT,IAAc,gBAAiD;AAC7D,SAAO;;CAIT,IAAc,gBAAiD;AAC7D,SAAO;;CAQT,KAAoD,EAAE;;gBAItC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAED,SAAS;AACP,SAAO,KAAK,eAAe,WAYvB,CAAI,wMAXJ,CAAI,6GAIA,KAAK,cAAc,eAEnB,KAAK,cAAc;;CAc7B,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EAEvC,KAAK,WAAY,iBAAiB,oBAAoB;AAGpD,GAFA,MAAA,GAAyB,EAErB,KAAK,SAAS,MAAA,EAAgB,WAAW,MAC3C,MAAA,GAAkB,EAClB,MAAA,GAAoB;IAEtB;;CAGJ,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC;;CAI5D,QAAQ;AAGN,EAFA,KAAK,MAAM,QAAQ,KAAK,MAAM,aAAa,QAAQ,IAAI,IACvD,KAAK,eAAe,EACpB,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAGjF,KAAc;AAYZ,EAXA,EAA6B,MAAM,MAAA,EAAe,EAElD,MAAA,EAAgB,KACd,GAAG,EAAmB,KAAK,EAC3B,GAAG,EAAyB,MAAM,MAAA,EAAe,EACjD,EAAyB,KAAK,EAC9B,EAAwB,MAAM,CAAC,UAAU,SAAS,QAAQ,MAAA,GAAyB,CAAC,CACrF,EAED,MAAA,GAA0B,EAC1B,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,oBAAoB;AAEpD,GADA,MAAA,GAAyB,EACzB,MAAA,GAA0B;IAC1B;;CAGJ,KAAgB;AACd,EAAI,KAAK,YACP,MAAA,GAAyB,EACzB,KAAK,MAAM,iBAAiB,eAAe,MAAA,GAAyB,CAAC,EACrE,KAAK,MAAM,iBAAiB,gBAAgB,MAAA,GAAyB,CAAC;;CAI1E,KAAqB;AACnB,MAAI,KAAK,MAAM,YAAY,SAAS;GAClC,IAAM,IAAS,KAAK,MAAM,SAAS,SAAa,IAAJ;AAE5C,GADA,KAAK,MAAM,YAAY,mBAAmB,GAAG,KAAK,MAAM,MAAM,SAAS,EAAO,IAAI,EAClF,KAAK,MAAM,MAAM,YAAY,aAAa,GAAG,KAAK,MAAM,MAAM,SAAS,EAAE,KAAK,YAAY;SACjF,KAAK,MAAM,YAAY,YAChC,KAAK,MAAM,YACT,mBACA,GAAI,KAAK,MAAuC,QAAS,KAAK,MAAuC,eAAgB,YAAa,SAAS,EAAE,IAC9I;;CAIL,KAAsB;AACpB,EAAK,KAAK,MAAM,eACd,KAAK,MAAM,mBAAmB,KAAK,MAAM,OAAO;;CAIpD,KAAqB;AACnB,EAAI,KAAK,UACP,KAAK,gBAAgB,YAAY,KAAK,OAAO,SAAS,EACtD,KAAK,OAAO,aAAa,OAAO,GAAG,KAAK,aAAa,QAAQ,GAAG,GAAG,KAAK,gBAAgB,OAAO;;CAInG,KAAsB;AAKpB,EAJA,MAAA,GAAmB,EACnB,EAAe,MAAA,GAAa,KAAK,MAAM,EACvC,EAAyB,MAAM,KAAK,MAAA,EAAe,EAAE,KAAK,MAAM,EAE5D,KAAK,sBACP,EAAkB,KAAK,cAAmC,WAAW,EAAG,KAAK,MAAM;;CAIvF,KAAe;EACb,IAAM,IACJ,KAAK,cAAc,QAAQ,IAC1B,KAAK,WAAY,cAAc,OAAO,CACpC,cAAc,EAAE,SAAS,IAAM,CAAC,CAChC,MAAM,MAAa,EAAkB,YAAY,QAAQ;AAC9D,EAAI,MACF,EAAM,OAAO;;CAIjB,aAAuB;AACrB,MAAI;AACF,QAAK,MAAM,YAAY;UACjB;;;GA5MT,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAY,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAGjE,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAKpE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KA0CzC,EAAS,EAAE,WAAW,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,SAlExC,GAAS,CAAA,EAAA,EAAA"}

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

@@ -0,0 +1,35 @@
+import { PropertyValues, LitElement } from 'lit';
+/**
+ * @element nve-control-group
+ * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/forms
+ * @slot - Control input elements
+ * @cssprop --color
+ * @cssprop --label-color
+ * @cssprop --label-text-transform
+ * @cssprop --label-font-weight
+ * @cssprop --label-font-size
+ * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
+ * @package true
+ */
+export declare class ControlGroup extends LitElement {
+    #private;
+    /** Set each slotted control + label + control message layout */
+    layout: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';
+    /** Set the visual prominence of the control group */
+    prominence: 'muted';
+    get label(): HTMLLabelElement | null;
+    get inputs(): HTMLInputElement[];
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+}

package/dist/forms/control-group/control-group.js

@@ -0,0 +1,6 @@
+//#region src/forms/control-group/control-group.css?inline
+var e = ":host{--color: var(--nve-sys-interaction-field-color);--opacity: 1;--label-color: var(--nve-sys-interaction-field-color);--label-text-transform: capitalize;--label-font-weight: var(--nve-ref-font-weight-medium);--label-font-size: var(--nve-ref-font-size-100);--_label-width: var(--label-width, 180px)}[internal-host]{color:var(--color);opacity:var(--opacity)}::slotted(label){font-weight:var(--label-font-weight)!important;font-size:var(--label-font-size)!important;color:var(--label-color)!important;cursor:var(--cursor)!important;text-transform:var(--label-text-transform)!important}:host([layout*=\"horizontal-inline\"]) ::slotted([nve-control]),:host([layout*=\"vertical-inline\"]) ::slotted([nve-control]){--control-height: var(--nve-sys-interaction-field-height)}slot[name=label]{grid-area:label;display:block;align-self:center}slot[name=messages]{grid-area:messages;display:block}.input-slot{grid-area:input;display:flex;flex-flow:column wrap;gap:var(--nve-ref-space-sm) var(--nve-ref-space-md);width:fit-content}:host([layout*=\"-inline\"]) .input-slot{flex-direction:row}[name=messages]:not(:has-slotted),[name=label]:not(:has-slotted){display:none!important}.no-messages{& slot[name=messages]{display:none!important}}.no-label{& slot[name=label]{display:none!important}}[internal-host]{display:grid;gap:var(--nve-ref-space-xs);align-items:start;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\";&.no-messages{grid-template-areas:\"label label label\" \"input input input\"}&.no-label{& slot[name=messages]{grid-template-areas:\"input input input\" \"messages messages messages\"}}&.no-label.no-messages{grid-template-areas:\"input input input\"}}:host([layout=\"vertical-inline\"]) [internal-host]{grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}:host([layout=\"vertical-inline\"]) [internal-host].no-messages{grid-template-areas:\"label label label\" \"input input input\"}:host([layout=\"horizontal\"]) [internal-host]{grid-template-columns:var(--_label-width) minmax(auto,max-content) auto;grid-template-areas:\"label input input\" \". messages messages\"}:host([layout=\"horizontal\"]) [internal-host].no-messages{grid-template-areas:\"label input input\"}:host([layout=\"horizontal-inline\"]) [internal-host]{grid-template-columns:var(--_label-width) minmax(auto,max-content) auto;grid-template-areas:\"label input input\" \". messages messages\"}:host([layout=\"horizontal-inline\"]) [internal-host].no-messages{grid-template-areas:\"label input input\"}:host([layout=\"horizontal\"]) slot[name=label]{align-self:start}:host([layout=\"horizontal\"]) ::slotted(label){align-self:start!important}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=control-group.js.map

package/dist/forms/control-group/control-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-group.js","names":[],"sources":["../../../src/forms/control-group/control-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-interaction-field-color);\n  --opacity: 1;\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: capitalize;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --_label-width: var(--label-width, 180px);\n}\n\n[internal-host] {\n  color: var(--color);\n  opacity: var(--opacity);\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n}\n\n:host([layout*='horizontal-inline']) ::slotted([nve-control]),\n:host([layout*='vertical-inline']) ::slotted([nve-control]),\n:host([layout*='horizontal-inline']) ::slotted([nve-control]),\n:host([layout*='vertical-inline']) ::slotted([nve-control]) {\n  --control-height: var(--nve-sys-interaction-field-height);\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: block;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: block;\n}\n\n.input-slot {\n  grid-area: input;\n  display: flex;\n  flex-flow: column wrap;\n  gap: var(--nve-ref-space-sm) var(--nve-ref-space-md);\n  width: fit-content;\n}\n\n:host([layout*='-inline']) .input-slot {\n  flex-direction: row;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n/* fallback for :has-slotted */\n.no-messages {\n  & slot[name='messages'] {\n    display: none !important;\n  }\n}\n\n/* fallback for :has-slotted */\n.no-label {\n  & slot[name='label'] {\n    display: none !important;\n  }\n}\n\n[internal-host] {\n  display: grid;\n  gap: var(--nve-ref-space-xs);\n  align-items: start;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n\n  &.no-messages {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &.no-label {\n    & slot[name='messages'] {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n  }\n\n  &.no-label.no-messages {\n    grid-template-areas: 'input input input';\n  }\n}\n\n:host([layout='vertical-inline']) [internal-host] {\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n}\n\n:host([layout='vertical-inline']) [internal-host].no-messages {\n  grid-template-areas:\n    'label label label'\n    'input input input';\n}\n\n:host([layout='horizontal']) [internal-host] {\n  grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n:host([layout='horizontal']) [internal-host].no-messages {\n  grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) minmax(auto, max-content) auto;\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n:host([layout='horizontal-inline']) [internal-host].no-messages {\n  grid-template-areas: 'label input input';\n}\n\n:host([layout='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([layout='horizontal']) ::slotted(label) {\n  align-self: start !important;\n}\n"],"mappings":""}

package/dist/forms/control-group/control-group2.js

@@ -0,0 +1,64 @@
+import { tagSelector as e } from "../../internal/utils/dom.js";
+import { associateAriaDescribedBy as t, associateAriaLabel as n, associateControlGroup as r, attachInternals as i } from "../../internal/utils/a11y.js";
+import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { useStyles as o } from "../../internal/styles/index.js";
+import { inputQuery as s, setupControlGroupStates as c, setupControlStatusStates as l } from "../utils/states.js";
+import { setupControlLayoutStates as u } from "../utils/layout.js";
+import d from "./control-group.js";
+import { LitElement as f, html as p } from "lit";
+import { property as m } from "lit/decorators/property.js";
+//#region src/forms/control-group/control-group.ts
+var h = class extends f {
+	get label() {
+		return this.querySelector?.("label");
+	}
+	get inputs() {
+		return this.querySelectorAll ? Array.from(this.querySelectorAll(s)) : [];
+	}
+	get #e() {
+		return this.querySelectorAll ? Array.from(this.querySelectorAll(e("nve-control-message"))) : [];
+	}
+	#t = [];
+	static {
+		this.styles = o([d]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-control-group",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return p`<div internal-host class="${this.#e.length ? "" : "no-messages"} ${this.label ? "" : "no-label"}"><slot name="label"></slot><slot class="input-slot"></slot><slot name="messages"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), i(this), this._internals.role = "group";
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.#t = [
+			c(this),
+			u(this),
+			...l(this, this.#e)
+		], this.#n(), this.shadowRoot.addEventListener("slotchange", () => this.#n());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#t.forEach((e) => e.disconnect());
+	}
+	#n() {
+		this.#r(), n(this.label, this), t(Array.from(this.querySelectorAll(e("nve-control-message"))), this), r(Array.from(this.inputs));
+	}
+	#r() {
+		this.label && (this.label.slot = "label");
+	}
+};
+a([m({
+	type: String,
+	reflect: !0
+})], h.prototype, "layout", void 0), a([m({
+	type: String,
+	reflect: !0
+})], h.prototype, "prominence", void 0);
+//#endregion
+export { h as ControlGroup };
+
+//# sourceMappingURL=control-group2.js.map

package/dist/forms/control-group/control-group2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-group2.js","names":["#messages","#observers","#updateAssociations","#assignLabel"],"sources":["../../../src/forms/control-group/control-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateAriaLabel,\n  associateAriaDescribedBy,\n  associateControlGroup,\n  tagSelector\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport { setupControlStatusStates, setupControlGroupStates, inputQuery } from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport styles from './control-group.css?inline';\n\n/**\n * @element nve-control-group\n * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input elements\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-text-transform\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\nexport class ControlGroup extends LitElement {\n  /** Set each slotted control + label + control message layout */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Set the visual prominence of the control group */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get label() {\n    return this.querySelector?.<HTMLLabelElement>('label');\n  }\n\n  get inputs() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<HTMLInputElement>(inputQuery)) : [];\n  }\n\n  get #messages() {\n    return this.querySelectorAll\n      ? Array.from(this.querySelectorAll<ControlMessage>(tagSelector('nve-control-message')))\n      : [];\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host class=\"${this.#messages.length ? '' : 'no-messages'} ${this.label ? '' : 'no-label'}\">\n        <slot name=\"label\"></slot>\n        <slot class=\"input-slot\"></slot>\n        <slot name=\"messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#observers = [\n      setupControlGroupStates(this),\n      setupControlLayoutStates(this),\n      ...setupControlStatusStates(this, this.#messages)\n    ];\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#updateAssociations());\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateAriaLabel(this.label as HTMLElement, this);\n    associateAriaDescribedBy(\n      Array.from(this.querySelectorAll<ControlMessage>(tagSelector('nve-control-message'))),\n      this\n    );\n    associateControlGroup(Array.from(this.inputs));\n  }\n\n  #assignLabel() {\n    if (this.label) {\n      this.label.slot = 'label';\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;AAiCA,IAAa,IAAb,cAAkC,EAAW;CAW3C,IAAI,QAAQ;AACV,SAAO,KAAK,gBAAkC,QAAQ;;CAGxD,IAAI,SAAS;AACX,SAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,EAAW,CAAC,GAAG,EAAE;;CAGrG,KAAA,IAAgB;AACd,SAAO,KAAK,mBACR,MAAM,KAAK,KAAK,iBAAiC,EAAY,sBAAsB,CAAC,CAAC,GACrF,EAAE;;CAGR,KAAoD,EAAE;;gBAEtC,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,SAAS;AACP,SAAO,CAAI,6BACmB,MAAA,EAAe,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;;CAQ3G,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,aAAa,GAA6B;AAQxC,EAPA,MAAM,aAAa,EAAM,EACzB,MAAA,IAAkB;GAChB,EAAwB,KAAK;GAC7B,EAAyB,KAAK;GAC9B,GAAG,EAAyB,MAAM,MAAA,EAAKA;GACxC,EACD,MAAA,GAA0B,EAC1B,KAAK,WAAY,iBAAiB,oBAAoB,MAAA,GAA0B,CAAC;;CAGnF,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,MAAA,EAAgB,SAAQ,MAAY,EAAS,YAAY,CAAC;;CAG5D,KAAsB;AAOpB,EANA,MAAA,GAAmB,EACnB,EAAmB,KAAK,OAAsB,KAAK,EACnD,EACE,MAAM,KAAK,KAAK,iBAAiC,EAAY,sBAAsB,CAAC,CAAC,EACrF,KACD,EACD,EAAsB,MAAM,KAAK,KAAK,OAAO,CAAC;;CAGhD,KAAe;AACb,EAAI,KAAK,UACP,KAAK,MAAM,OAAO;;;GA/ErB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAOzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA"}

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import { Icon } from '../../icon';
+import { ValidityStateError } from '../utils/types.js';
+/**
+ * @element nve-control-message
+ * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/forms
+ * @slot - default slot for content
+ * @cssprop --color
+ * @cssprop --font-weight
+ * @cssprop --font-size
+ * @csspart icon - The icon element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals
+ * @package true
+ */
+export declare class ControlMessage extends LitElement {
+    /**
+     * Visual treatment for current form control validation status
+     */
+    status?: 'warning' | 'error' | 'success' | 'disabled';
+    /**
+     * Validation error code for current form control
+     * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
+     */
+    error: ValidityStateError | null;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Icon.metadata.tag]: typeof Icon;
+    };
+    slot: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/forms/control-message/control-message.js

@@ -0,0 +1,6 @@
+//#region src/forms/control-message/control-message.css?inline
+var e = ":host{--color: var(--nve-sys-text-muted-color);--font-weight: var(--nve-ref-font-weight-regular);--font-size: var(--nve-ref-font-size-100);--gap: var(--nve-ref-space-xs);--_icon-color: var(--color)}[internal-host]{--icon-color: var(--color);gap:var(--gap);color:var(--color);font-weight:var(--font-weight);font-size:var(--font-size);display:flex}nve-icon{--color: var(--_icon-color)}:host([status=\"success\"]){--color: var(--nve-sys-support-success-emphasis-color)}:host([status=\"warning\"]){--color: var(--nve-sys-support-warning-emphasis-color)}:host([status=\"error\"]),:host([error]){--color: var(--nve-sys-support-danger-emphasis-color)}:host([status=\"muted\"]){--color: var(--nve-sys-text-muted-color)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=control-message.js.map

package/dist/forms/control-message/control-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-message.js","names":[],"sources":["../../../src/forms/control-message/control-message.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-text-muted-color);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --font-size: var(--nve-ref-font-size-100);\n  --gap: var(--nve-ref-space-xs);\n  --_icon-color: var(--color);\n}\n\n[internal-host] {\n  --icon-color: var(--color);\n  gap: var(--gap);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  display: flex;\n}\n\nnve-icon {\n  --color: var(--_icon-color);\n}\n\n:host([status='success']) {\n  --color: var(--nve-sys-support-success-emphasis-color);\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-support-warning-emphasis-color);\n}\n\n:host([status='error']),\n:host([error]) {\n  --color: var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='muted']) {\n  --color: var(--nve-sys-text-muted-color);\n}\n"],"mappings":""}

package/dist/forms/control-message/control-message2.js

@@ -0,0 +1,46 @@
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { hostAttr as t } from "../../internal/decorators/host-attr.js";
+import { scopedRegistry as n } from "../../internal/decorators/scoped-registry.js";
+import { useStyles as r } from "../../internal/styles/index.js";
+import { Icon as i } from "../../icon/icon2.js";
+import a from "./control-message.js";
+import { LitElement as o, html as s } from "lit";
+import { property as c } from "lit/decorators/property.js";
+//#region src/forms/control-message/control-message.ts
+var l = {
+	undefined: "information-circle-stroke",
+	disabled: "information-circle-stroke",
+	warning: "exclamation-triangle",
+	success: "checkmark-circle",
+	error: "exclamation-circle"
+}, u = class extends o {
+	constructor(...e) {
+		super(...e), this.error = null, this.slot = "messages";
+	}
+	static {
+		this.styles = r([a]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-control-message",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [i.metadata.tag]: i };
+	}
+	render() {
+		return s`<div internal-host><slot name="icon"><nve-icon part="icon" name="${this.error ? l.error : l[this.status]}"></nve-icon></slot><slot></slot></div>`;
+	}
+};
+e([c({
+	type: String,
+	reflect: !0
+})], u.prototype, "status", void 0), e([c({
+	type: String,
+	reflect: !0
+})], u.prototype, "error", void 0), e([t()], u.prototype, "slot", void 0), u = e([n()], u);
+//#endregion
+export { u as ControlMessage };
+
+//# sourceMappingURL=control-message2.js.map

package/dist/forms/control-message/control-message2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-message2.js","names":[],"sources":["../../../src/forms/control-message/control-message.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { hostAttr, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { type ValidityStateError } from '../utils/types.js';\nimport styles from './control-message.css?inline';\n\nconst statusIcons = {\n  undefined: 'information-circle-stroke',\n  disabled: 'information-circle-stroke',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  error: 'exclamation-circle'\n} as const;\n\n/**\n * @element nve-control-message\n * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - default slot for content\n * @cssprop --color\n * @cssprop --font-weight\n * @cssprop --font-size\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@scopedRegistry()\nexport class ControlMessage extends LitElement {\n  /**\n   * Visual treatment for current form control validation status\n   */\n  @property({ type: String, reflect: true }) status?: 'warning' | 'error' | 'success' | 'disabled';\n\n  /**\n   * Validation error code for current form control\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  @property({ type: String, reflect: true }) error: ValidityStateError | null = null;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-message',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  @hostAttr() slot = 'messages';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"icon\"><nve-icon part=\"icon\" name=${this.error ? statusIcons.error : statusIcons[this.status!]}></nve-icon></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAc;CAClB,WAAW;CACX,UAAU;CACV,SAAS;CACT,SAAS;CACT,OAAO;CACR,EAgBM,IAAA,cAA6B,EAAW;;4BAUiC,kBAa3D;;;gBAXH,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAID,SAAS;AACP,SAAO,CAAI,oEAEwC,KAAK,QAAQ,EAAY,QAAQ,EAAY,KAAK,QAAS;;;GAxB/G,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAMzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAazC,GAAU,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAxBZ,GAAgB,CAAA,EAAA,EAAA"}

package/dist/forms/define.d.ts

@@ -0,0 +1,8 @@
+import { Control, ControlGroup, ControlMessage } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-control': Control;
+        'nve-control-group': ControlGroup;
+        'nve-control-message': ControlMessage;
+    }
+}

package/dist/forms/define.js

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

package/dist/forms/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/forms/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-control': Control;\n    'nve-control-group': ControlGroup;\n    'nve-control-message': ControlMessage;\n  }\n}\n"],"mappings":";;;;AAMA,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/forms/forms.examples.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"forms.examples.js","names":[],"sources":["../../src/forms/forms.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/password/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/time/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/color/define.js';\nimport '@nvidia-elements/core/datetime/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/switch/define.js';\nimport '@nvidia-elements/core/week/define.js';\nimport '@nvidia-elements/core/file/define.js';\nimport '@nvidia-elements/core/month/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'forms'\n}\n\n/**\n * @summary Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns for complete form design reference.\n */\nexport const KitchenSink = {\n  render: () => html`\n<div style=\"display: grid; gap: 36px 48px; grid-template-columns: 1fr 1fr; max-width: 1400px;\">\n    <nve-input layout=\"vertical-inline\">\n      <label>text label</label>\n      <input />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-search layout=\"vertical-inline\">\n      <label>search label</label>\n      <input type=\"search\" placeholder=\"search\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-search>\n\n    <nve-password layout=\"vertical-inline\">\n      <label>password label</label>\n      <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-password>\n\n    <nve-select layout=\"vertical-inline\">\n      <label>select label</label>\n      <select>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </select>\n      <nve-control-message>message</nve-control-message>\n    </nve-select>\n\n    <nve-date layout=\"vertical-inline\">\n      <label>date label</label>\n      <input type=\"date\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-date>\n\n    <nve-datetime layout=\"vertical-inline\">\n      <label>datetime label</label>\n      <input type=\"datetime-local\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-datetime>\n\n    <nve-month layout=\"vertical-inline\">\n      <label>month label</label>\n      <input type=\"month\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-month>\n\n    <nve-week layout=\"vertical-inline\">\n      <label>week label</label>\n      <input type=\"week\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-week>\n\n    <nve-time layout=\"vertical-inline\">\n      <label>time label</label>\n      <input type=\"time\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-time>\n\n    <nve-color layout=\"vertical-inline\">\n      <label>color label</label>\n      <input type=\"color\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-color>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>prefix/suffix label</label>\n      <nve-button container=\"flat\" readonly>https://</nve-button>\n      <input type=\"text\" />\n      <nve-button container=\"flat\" readonly>.com</nve-button>\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>actions label</label>\n      <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n      <input type=\"text\" />\n      <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input-group layout=\"vertical-inline\">\n      <label>date range</label>\n      <nve-date>\n        <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n      </nve-date>\n      <nve-date>\n        <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n      </nve-date>\n      <nve-control-message>message</nve-control-message>\n    </nve-input-group>\n\n    <nve-input-group layout=\"vertical-inline\">\n      <label>domain</label>\n      <nve-select style=\"width: 120px\">\n        <select aria-label=\"protocol\">\n          <option>https://</option>\n          <option>http://</option>\n        </select>\n      </nve-select>\n      <nve-input>\n        <input placeholder=\"example\" aria-label=\"host\" />\n        <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n      </nve-input>\n      <nve-control-message>Host ID: 123456</nve-control-message>\n    </nve-input-group>\n\n    <nve-range layout=\"vertical-inline\">\n      <label>range label</label>\n      <input type=\"range\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-range>\n\n    <nve-checkbox-group layout=\"vertical-inline\">\n      <label>checkbox group label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-control-message>message</nve-control-message>\n    </nve-checkbox-group>\n\n    <nve-radio-group layout=\"vertical-inline\">\n      <label>radio group label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-control-message>message</nve-control-message>\n    </nve-radio-group>\n\n    <nve-switch-group layout=\"vertical-inline\">\n      <label>switch group label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-control-message>message</nve-control-message>\n    </nve-switch-group>\n\n    <nve-select layout=\"vertical-inline\">\n      <label>select multiple label</label>\n      <select multiple>\n        <option value=\"1\">Option 1</option>\n        <option selected value=\"2\">Option 2</option>\n        <option selected value=\"3\">Option 3</option>\n        <option selected value=\"3\">Option 3</option>\n        <option value=\"4\">Option 4</option>\n        <option value=\"5\">Option 5</option>\n      </select>\n      <nve-control-message>message</nve-control-message>\n    </nve-select>\n\n    <nve-textarea layout=\"vertical-inline\">\n      <label>textarea label</label>\n      <textarea></textarea>\n      <nve-control-message>message</nve-control-message>\n    </nve-textarea>\n\n    <nve-file>\n      <label>file label</label>\n      <input type=\"file\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-file>\n\n    <nve-search rounded>\n      <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n      <datalist>\n        <option value=\"search result 1\"></option>\n        <option value=\"search result 2\"></option>\n        <option value=\"search result 3\"></option>\n      </datalist>\n    </nve-search>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>disabled</label>\n      <input disabled />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>success</label>\n      <input />\n      <nve-control-message status=\"success\">message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>error</label>\n      <input />\n      <nve-control-message status=\"error\">message</nve-control-message>\n    </nve-input>\n</div>\n  `\n}\n\n/**\n * @summary Traditional vertical form layout with labels above inputs, providing clear visual hierarchy and optimal readability for complex forms.\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search>\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password>\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select>\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range>\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group>\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group>\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group>\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select>\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea>\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Compact vertical layout with inline labels and controls, maximizing space efficiency while maintaining form clarity and accessibility.\n */\nexport const VerticalInline = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Horizontal form layout with labels beside inputs, creating efficient use of horizontal space and familiar desktop form patterns.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Space-efficient horizontal layout with inline labels, ideal for dense forms with tight vertical space where quick scanning matters.\n */\nexport const HorizontalInline = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Form controls that automatically adjust their width to fit content, optimizing space usage for dynamic or variable-length inputs.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\n<section nve-layout=\"column gap:md full\">\n  <nve-date fit-text>\n    <label>date</label>\n    <input type=\"date\" value=\"2017-06-01\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-input fit-text>\n    <label>label</label>\n    <input value=\"123456789012345678901234567890\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-select fit-text>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</section>\n`\n};\n\n/**\n * @summary Hidden status icon on the control message in form controls.\n * @tags test-case\n */\nexport const HiddenMessageIcon = {\n  render: () => html`\n<style>\n  .hidden-icon::part(icon) {\n    display: none;\n  }\n</style>\n<nve-switch-group style=\"width: 200px\">\n  <nve-switch>\n    <label>default</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"success\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"error\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>warning</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"warning\">hidden icon control message</nve-control-message>\n  </nve-switch>\n</nve-switch-group>\n`\n}\n\n/**\n * @summary Use the prominence muted state to lower visual weight of controls in forms.\n */\nexport const ProminenceMuted = {\n  render: () => html`\n<div nve-layout=\"row gap:lg\">\n  <div nve-layout=\"column gap:lg pad:lg\">\n    <nve-radio-group prominence=\"muted\">\n      <label>label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n    </nve-radio-group>\n\n    <nve-checkbox-group prominence=\"muted\">\n      <label>label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n    </nve-checkbox-group>\n\n    <nve-switch-group prominence=\"muted\">\n      <label>label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 3</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n    </nve-switch-group>\n\n    <nve-range prominence=\"muted\">\n      <label>label</label>\n      <input type=\"range\" />\n    </nve-range>\n  </div>\n  <nve-card>\n    <nve-card-content>\n      <div nve-layout=\"column gap:lg pad:lg\">\n        <nve-radio-group prominence=\"muted\">\n          <label>label</label>\n          <nve-radio>\n            <label>radio 1</label>\n            <input type=\"radio\" checked />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 2</label>\n            <input type=\"radio\" />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 3</label>\n            <input type=\"radio\" />\n          </nve-radio>\n        </nve-radio-group>\n\n        <nve-checkbox-group prominence=\"muted\">\n          <label>label</label>\n          <nve-checkbox>\n            <label>checkbox 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 2</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 3</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n        </nve-checkbox-group>\n\n        <nve-switch-group prominence=\"muted\">\n          <label>label</label>\n          <nve-switch>\n            <label>switch 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 2</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 3</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n        </nve-switch-group>\n\n        <nve-range prominence=\"muted\">\n        <label>label</label>\n          <input type=\"range\" />\n        </nve-range>\n      </div>\n    </nve-card-content>\n  </nve-card>\n</div>\n`\n}"],"mappings":";AAGA,IAAA,IAAS"}