@nvidia-elements/core 2.20.0 → 2.20.2

package/dist/resize-handle/define.js

@@ -1,7 +1,6 @@
 import { ResizeHandle as e } from "./resize-handle2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/resize-handle/define.ts
+// src/resize-handle/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/resize-handle/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/resize-handle/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/foundations/internal/define';\nimport { ResizeHandle } from '@nvidia-elements/core/resize-handle';\n\ndefine(ResizeHandle);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-resize-handle': ResizeHandle;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAY"}
+{"version":3,"file":"define.js","names":["define","ResizeHandle"],"sources":["../../src/resize-handle/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/foundations/internal/define';\nimport { ResizeHandle } from '@nvidia-elements/core/resize-handle';\n\ndefine(ResizeHandle);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-resize-handle': ResizeHandle;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAY"}

package/dist/resize-handle/index.js

@@ -1,2 +1 @@
-import { ResizeHandle as e } from "./resize-handle2.js";
-export { e as ResizeHandle };
+export { ResizeHandle } from "./resize-handle2.js";

package/dist/resize-handle/resize-handle.examples.js

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

package/dist/resize-handle/resize-handle.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle.examples.js","names":[],"sources":["../../src/resize-handle/resize-handle.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable local-typescript/example-css-quality */\n/* eslint-disable local-typescript/example-metadata */\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/resize-handle/define.js';\n\nexport default {\n  title: 'Elements/Resize Handle',\n  component: 'nve-resize-handle',\n};\n\n/**\n * @summary Basic horizontal resize handle for draggable panel dividers and split pane interfaces.\n */\nexport const Default = {\n  render: () => html`\n<nve-resize-handle></nve-resize-handle>`\n};\n\n/**\n * @summary Vertical resize handle for side-by-side panel layouts and horizontal split panes.\n */\nexport const Vertical = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\"></nve-resize-handle>\n</div>\n`\n};\n\n/**\n * @summary Horizontal split pane with draggable divider that adjusts top and bottom panel heights.\n */\nexport const SplitHorizontal = {\n  render: () => html`\n<section id=\"split-horizontal-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-horizontal-demo nve-resize-handle');\n  const split = document.querySelector('#split-horizontal-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px');\n</script>\n`\n};\n\n/**\n * @summary Vertical split pane with draggable divider that adjusts left and right panel widths.\n */\nexport const SplitVertical = {\n  render: () => html`\n<section id=\"split-vertical-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-columns: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-vertical-demo nve-resize-handle');\n  const split = document.querySelector('#split-vertical-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateColumns = e.target.value + 'px auto 1fr');\n</script>\n`\n};\n\n/**\n * @summary Resize handle as a form control with name attribute for submitting resize values.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const split = document.querySelector('#form-demo section');\n  const handle = document.querySelector('#form-demo nve-resize-handle');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form)\n  });\n\n  handle.addEventListener('change', e => {\n    console.log('change', e.target.value);\n  });\n\n  handle.addEventListener('input', e => {\n    console.log('input', e.target.value);\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.\n */\nexport const PreventDefault = {\n  render: () => html`\n<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector('#prevent-default-demo section');\n  const handle = document.querySelector('#prevent-default-demo nve-resize-handle');\n\n  handle.addEventListener('toggle', e => {\n    e.preventDefault();\n    console.log('toggle defaultPrevented:', e.defaultPrevented);\n  });\n\n  handle.addEventListener('input', e => {\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Custom line width styling for resize handle visibility using CSS custom property.\n * @tags theme\n */\nexport const LineWidth = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\" style=\"--line-width: 6px\"></nve-resize-handle>\n</div>\n`\n};\n"],"mappings":";AAKA,IAAA,IAAS"}
+{"version":3,"file":"resize-handle.examples.js","names":["resize_handle_examples_default"],"sources":["../../src/resize-handle/resize-handle.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable local-typescript/example-css-quality */\n/* eslint-disable local-typescript/example-metadata */\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/resize-handle/define.js';\n\nexport default {\n  title: 'Elements/Resize Handle',\n  component: 'nve-resize-handle',\n};\n\n/**\n * @summary Basic horizontal resize handle for draggable panel dividers and split pane interfaces.\n */\nexport const Default = {\n  render: () => html`\n<nve-resize-handle></nve-resize-handle>`\n};\n\n/**\n * @summary Vertical resize handle for side-by-side panel layouts and horizontal split panes.\n */\nexport const Vertical = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\"></nve-resize-handle>\n</div>\n`\n};\n\n/**\n * @summary Horizontal split pane with draggable divider that adjusts top and bottom panel heights.\n */\nexport const SplitHorizontal = {\n  render: () => html`\n<section id=\"split-horizontal-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-horizontal-demo nve-resize-handle');\n  const split = document.querySelector('#split-horizontal-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px');\n</script>\n`\n};\n\n/**\n * @summary Vertical split pane with draggable divider that adjusts left and right panel widths.\n */\nexport const SplitVertical = {\n  render: () => html`\n<section id=\"split-vertical-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-columns: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-vertical-demo nve-resize-handle');\n  const split = document.querySelector('#split-vertical-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateColumns = e.target.value + 'px auto 1fr');\n</script>\n`\n};\n\n/**\n * @summary Resize handle as a form control with name attribute for submitting resize values.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const split = document.querySelector('#form-demo section');\n  const handle = document.querySelector('#form-demo nve-resize-handle');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form)\n  });\n\n  handle.addEventListener('change', e => {\n    console.log('change', e.target.value);\n  });\n\n  handle.addEventListener('input', e => {\n    console.log('input', e.target.value);\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.\n */\nexport const PreventDefault = {\n  render: () => html`\n<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector('#prevent-default-demo section');\n  const handle = document.querySelector('#prevent-default-demo nve-resize-handle');\n\n  handle.addEventListener('toggle', e => {\n    e.preventDefault();\n    console.log('toggle defaultPrevented:', e.defaultPrevented);\n  });\n\n  handle.addEventListener('input', e => {\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Custom line width styling for resize handle visibility using CSS custom property.\n * @tags theme\n */\nexport const LineWidth = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\" style=\"--line-width: 6px\"></nve-resize-handle>\n</div>\n`\n};\n"],"mappings":";AAKA,IAAAA,IAAS"}

package/dist/resize-handle/resize-handle.js

@@ -1,6 +1,5 @@
-//#region src/resize-handle/resize-handle.css?inline
+// src/resize-handle/resize-handle.css?inline
 var e = ":host{--background: var(--nve-ref-border-color);--line-width: var(--nve-ref-border-width-sm);--target-size: var(--nve-ref-border-width-lg);--cursor: row-resize;display:block;contain:layout;cursor:var(--cursor);z-index:99}[internal-host]{width:100%;height:100%;:before,:after{display:block;content:\" \";position:absolute;cursor:var(--cursor)}}.line{transition:background-color var(--nve-ref-animation-duration-200) ease-in,outline-color var(--nve-ref-animation-duration-200) ease-in;background:var(--background);outline:1px solid transparent;width:100%;height:100%}:host([orientation=\"horizontal\"]){height:var(--line-width);width:100%;:before,:after{height:var(--target-size);width:100%}:before{top:calc(-1 * var(--target-size))}:after{bottom:calc(-1 * var(--target-size))}input{writing-mode:vertical-lr;direction:rtl}}:host([orientation=\"vertical\"]){--cursor: col-resize;width:var(--line-width);height:100%;:before,:after{height:100%;width:var(--target-size)}:before{left:calc(-1 * var(--target-size))}:after{right:calc(-1 * var(--target-size))}}:host([dir=\"rtl\"]){input{direction:rtl}}[internal-host]:hover,[internal-host]:has(input:focus),:host(:state(active)) [internal-host]{--background: var(--nve-sys-accent-secondary-background);.line{outline:1px solid var(--background)}}input{opacity:0;height:0;width:0;position:absolute}:host(:state(active)){--background: var(--nve-sys-accent-secondary-background)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=resize-handle.js.map

package/dist/resize-handle/resize-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle.js","names":[],"sources":["../../src/resize-handle/resize-handle.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-ref-border-color);\n  --line-width: var(--nve-ref-border-width-sm);\n  --target-size: var(--nve-ref-border-width-lg);\n  --cursor: row-resize;\n  display: block;\n  contain: layout;\n  cursor: var(--cursor);\n  z-index: 99;\n}\n\n[internal-host] {\n  width: 100%;\n  height: 100%;\n\n  ::before,\n  ::after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    cursor: var(--cursor);\n  }\n}\n\n.line {\n  transition:\n    background-color var(--nve-ref-animation-duration-200) ease-in,\n    outline-color var(--nve-ref-animation-duration-200) ease-in;\n  background: var(--background);\n  outline: 1px solid transparent;\n  width: 100%;\n  height: 100%;\n}\n\n:host([orientation='horizontal']) {\n  height: var(--line-width);\n  width: 100%;\n\n  ::before,\n  ::after {\n    height: var(--target-size);\n    width: 100%;\n  }\n\n  ::before {\n    top: calc(-1 * var(--target-size));\n  }\n\n  ::after {\n    bottom: calc(-1 * var(--target-size));\n  }\n\n  input {\n    writing-mode: vertical-lr;\n    direction: rtl;\n  }\n}\n\n:host([orientation='vertical']) {\n  --cursor: col-resize;\n  width: var(--line-width);\n  height: 100%;\n\n  ::before,\n  ::after {\n    height: 100%;\n    width: var(--target-size);\n  }\n\n  ::before {\n    left: calc(-1 * var(--target-size));\n  }\n\n  ::after {\n    right: calc(-1 * var(--target-size));\n  }\n}\n\n:host([dir='rtl']) {\n  input {\n    direction: rtl;\n  }\n}\n\n[internal-host]:hover,\n[internal-host]:has(input:focus),\n:host(:state(active)) [internal-host] {\n  --background: var(--nve-sys-accent-secondary-background);\n\n  .line {\n    outline: 1px solid var(--background);\n  }\n}\n\ninput {\n  opacity: 0;\n  height: 0;\n  width: 0;\n  position: absolute;\n}\n\n:host(:state(active)) {\n  --background: var(--nve-sys-accent-secondary-background);\n}\n"],"mappings":""}
+{"version":3,"file":"resize-handle.js","names":["resize_handle_default"],"sources":["../../src/resize-handle/resize-handle.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-ref-border-color);\n  --line-width: var(--nve-ref-border-width-sm);\n  --target-size: var(--nve-ref-border-width-lg);\n  --cursor: row-resize;\n  display: block;\n  contain: layout;\n  cursor: var(--cursor);\n  z-index: 99;\n}\n\n[internal-host] {\n  width: 100%;\n  height: 100%;\n\n  ::before,\n  ::after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    cursor: var(--cursor);\n  }\n}\n\n.line {\n  transition:\n    background-color var(--nve-ref-animation-duration-200) ease-in,\n    outline-color var(--nve-ref-animation-duration-200) ease-in;\n  background: var(--background);\n  outline: 1px solid transparent;\n  width: 100%;\n  height: 100%;\n}\n\n:host([orientation='horizontal']) {\n  height: var(--line-width);\n  width: 100%;\n\n  ::before,\n  ::after {\n    height: var(--target-size);\n    width: 100%;\n  }\n\n  ::before {\n    top: calc(-1 * var(--target-size));\n  }\n\n  ::after {\n    bottom: calc(-1 * var(--target-size));\n  }\n\n  input {\n    writing-mode: vertical-lr;\n    direction: rtl;\n  }\n}\n\n:host([orientation='vertical']) {\n  --cursor: col-resize;\n  width: var(--line-width);\n  height: 100%;\n\n  ::before,\n  ::after {\n    height: 100%;\n    width: var(--target-size);\n  }\n\n  ::before {\n    left: calc(-1 * var(--target-size));\n  }\n\n  ::after {\n    right: calc(-1 * var(--target-size));\n  }\n}\n\n:host([dir='rtl']) {\n  input {\n    direction: rtl;\n  }\n}\n\n[internal-host]:hover,\n[internal-host]:has(input:focus),\n:host(:state(active)) [internal-host] {\n  --background: var(--nve-sys-accent-secondary-background);\n\n  .line {\n    outline: 1px solid var(--background);\n  }\n}\n\ninput {\n  opacity: 0;\n  height: 0;\n  width: 0;\n  position: absolute;\n}\n\n:host(:state(active)) {\n  --background: var(--nve-sys-accent-secondary-background);\n}\n"],"mappings":""}

package/dist/resize-handle/resize-handle2.js

@@ -1,13 +1,13 @@
 import { GestureController as e } from "../internal/controllers/gesture.controller.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./resize-handle.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
 import { I18nController as s } from "@nvidia-elements/foundations/internal/i18n";
 import { FormControlMixin as c } from "@nvidia-elements/forms/mixins";
 import { ifDefined as l } from "lit/directives/if-defined.js";
-//#region src/resize-handle/resize-handle.ts
+// src/resize-handle/resize-handle.ts
 var u = { resize: "resize" }, d = class extends c(i) {
 	static {
 		this.styles = t([r]);
@@ -18,7 +18,7 @@ var u = { resize: "resize" }, d = class extends c(i) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "2.20.0",
+			version: "2.20.2",
 			valueSchema: { type: "number" }
 		};
 	}
@@ -32,7 +32,7 @@ var u = { resize: "resize" }, d = class extends c(i) {
 	constructor() {
 		super(), this.orientation = "horizontal", this.min = 0, this.max = 100, this.step = 10, this.#t = new s(this, u), this.i18n = this.#t.i18n, this.#i = 0, this.#o = (e) => {
 			let t = e.detail;
-			t.kind === "pointerdown" ? t.event.button === 0 && t.event.isPrimary && this.#r === void 0 && t.claim({ kind: "drag" }) && this.#c(t.event.pointerId) : t.kind === "pointerend" && t.event.pointerId === this.#r && (t.interrupted ? this.#d() : this.#u());
+			t.kind === "pointerdown" ? t.event.button === 0 && t.event.isPrimary && this.#r === void 0 && t.claim({ kind: "drag" }) && this.#c(t.event.pointerId) : t.kind === "pointerend" && t.event.pointerId === this.#r && (t.interrupted ? this.#d() : (this.#l(t), this.#u()));
 		}, this.#s = (e) => {
 			e.detail.kind === "drag" && e.detail.event.pointerId === this.#r && this.#l(e.detail);
 		}, this.value = this.value ?? 50, this.#i = this.valueAsNumber, this.#n = new e(this, { touchAction: "none" });
@@ -63,7 +63,7 @@ var u = { resize: "resize" }, d = class extends c(i) {
 	}
 	#l(e) {
 		let t = (this.orientation === "vertical" ? e.movementX : -e.movementY) * (this.dir === "rtl" ? -1 : 1);
-		this.#i = Math.max(this.min, Math.min(this.max, this.#i + t)), this.#f(this.#i);
+		t !== 0 && (this.#i = Math.max(this.min, Math.min(this.max, this.#i + t)), this.#f(this.#i));
 	}
 	#u() {
 		this.#i = this.valueAsNumber, this.#e.step = `${this.step}`, this.#r = void 0, this._internals.states.delete("active"), this.#p(this.#i);
@@ -94,7 +94,6 @@ n([o({
 	type: Number,
 	reflect: !0
 })], d.prototype, "step", void 0), n([o({ type: Object })], d.prototype, "i18n", void 0);
-//#endregion
 export { d as ResizeHandle };
 
 //# sourceMappingURL=resize-handle2.js.map

package/dist/resize-handle/resize-handle2.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle2.js","names":[],"sources":["../../src/resize-handle/resize-handle.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { GestureController, useStyles, type Gesture, type GestureInput } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './resize-handle.css?inline';\n\nconst i18nDefaults = {\n  resize: 'resize'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * Determines the orientation direction of the resize handle.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Determines the min resize value.\n   */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /**\n   * Determines the max resize value.\n   */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /**\n   * Determines the value step change.\n   */\n  @property({ type: Number, reflect: true }) step = 10;\n\n  static styles = useStyles([styles]);\n\n  get #range() {\n    return this.shadowRoot!.querySelector('input')!;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-resize-handle',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  readonly #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  readonly #gestureController: GestureController;\n\n  #dragPointerId?: number;\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #offset = 0;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"line\" part=\"_line\"></div>\n        <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = this.value ?? 50;\n    this.#offset = this.valueAsNumber;\n    this.#gestureController = new GestureController(this, { touchAction: 'none' });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'none';\n    this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.addEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.removeEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n    this.#cancelDrag();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated(props: PropertyValues) {\n    super.firstUpdated(props);\n    this.#gestureController.target = this;\n    this.addEventListener('dblclick', () => {\n      if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n        return;\n      }\n      this.#toggle();\n    });\n  }\n\n  #toggle() {\n    const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n    this.#setInput(value);\n    this.#setChange(value);\n  }\n\n  #handleGestureInput = (event: CustomEvent<GestureInput>): void => {\n    const input = event.detail;\n    if (input.kind === 'pointerdown') {\n      const canStartDrag = input.event.button === 0 && input.event.isPrimary && this.#dragPointerId === undefined;\n      if (canStartDrag && input.claim({ kind: 'drag' })) this.#dragStart(input.event.pointerId);\n    } else if (input.kind === 'pointerend' && input.event.pointerId === this.#dragPointerId) {\n      if (input.interrupted) this.#cancelDrag();\n      else this.#dragEnd();\n    }\n  };\n\n  #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n    if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n      this.#dragMove(event.detail);\n    }\n  };\n\n  #dragStart(pointerId: number) {\n    this.#dragPointerId = pointerId;\n    this.#range.step = '1';\n    this._internals.states.add('active');\n    this.#offset = this.valueAsNumber;\n  }\n\n  #dragMove(gesture: Extract<Gesture<undefined>, { kind: 'drag' }>) {\n    const offset =\n      (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n    this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n    this.#setInput(this.#offset);\n  }\n\n  #dragEnd() {\n    this.#offset = this.valueAsNumber;\n    this.#range.step = `${this.step}`;\n    this.#dragPointerId = undefined;\n    this._internals.states.delete('active');\n    this.#setChange(this.#offset);\n  }\n\n  #cancelDrag() {\n    if (this.#dragPointerId === undefined) return;\n    this.#dragPointerId = undefined;\n    this.#range.step = `${this.step}`;\n    this._internals.states.delete('active');\n  }\n\n  #setInput(value: number) {\n    this.#updateValue(value);\n    this.dispatchInputEvent();\n  }\n\n  #setChange(value: number) {\n    this.#updateValue(value);\n    this.dispatchChangeEvent();\n  }\n\n  #updateValue(value: number) {\n    if (value <= this.max && value >= this.min) {\n      this.valueAsNumber = value;\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"resize-handle2.js","names":["styles","_decorate","__decorate","resize_handle_default","i18nDefaults","ResizeHandle","FormControlMixin","LitElement","useStyles","#range","ifDefined","#setInput","#setChange","#i18nController","I18nController","#offset","#handleGestureInput","input","event","#dragPointerId","#dragStart","#cancelDrag","#dragMove","#dragEnd","#handleGesture","#gestureController","GestureController","props","#toggle","value","pointerId","offset","gesture","#updateValue","property"],"sources":["../../src/resize-handle/resize-handle.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, type PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport {\n  GestureController,\n  useStyles,\n  type Gesture,\n  type GestureInput,\n  type PointerMovementGesture\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './resize-handle.css?inline';\n\nconst i18nDefaults = {\n  resize: 'resize'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-resize-handle\n * @description A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.\n * @documentation https://nvidia.github.io/elements/docs/elements/resize-handle/\n * @since 1.27.0\n * @entrypoint \\@nvidia-elements/core/resize-handle\n * @event toggle - Dispatched when the resize handle is double clicked.\n * @cssprop --background\n * @cssprop --line-width\n * @cssprop --target-size\n * @cssprop --cursor\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n *\n */\nexport class ResizeHandle extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * Determines the orientation direction of the resize handle.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Determines the min resize value.\n   */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /**\n   * Determines the max resize value.\n   */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /**\n   * Determines the value step change.\n   */\n  @property({ type: Number, reflect: true }) step = 10;\n\n  static styles = useStyles([styles]);\n\n  get #range() {\n    return this.shadowRoot!.querySelector('input')!;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-resize-handle',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  readonly #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  readonly #gestureController: GestureController;\n\n  #dragPointerId?: number;\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #offset = 0;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"line\" part=\"_line\"></div>\n        <input aria-label=${ifDefined(this.ariaLabel ?? this.i18n.resize)} type=\"range\" min=${this.min} max=${this.max} .valueAsNumber=${this.valueAsNumber} @input=${(e: Event) => this.#setInput((e.target as HTMLInputElement).valueAsNumber)} @change=${(e: Event) => this.#setChange((e.target as HTMLInputElement).valueAsNumber)} step=${this.step} />\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = this.value ?? 50;\n    this.#offset = this.valueAsNumber;\n    this.#gestureController = new GestureController(this, { touchAction: 'none' });\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'none';\n    this.addEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.addEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('nve-gesture', this.#handleGesture as EventListener);\n    this.removeEventListener('nve-gesture-input', this.#handleGestureInput as EventListener);\n    this.#cancelDrag();\n    super.disconnectedCallback();\n  }\n\n  firstUpdated(props: PropertyValues) {\n    super.firstUpdated(props);\n    this.#gestureController.target = this;\n    this.addEventListener('dblclick', () => {\n      if (!this.dispatchEvent(new CustomEvent('toggle', { cancelable: true, bubbles: true, composed: true }))) {\n        return;\n      }\n      this.#toggle();\n    });\n  }\n\n  #toggle() {\n    const value = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;\n    this.#setInput(value);\n    this.#setChange(value);\n  }\n\n  #handleGestureInput = (event: CustomEvent<GestureInput>): void => {\n    const input = event.detail;\n    if (input.kind === 'pointerdown') {\n      const canStartDrag = input.event.button === 0 && input.event.isPrimary && this.#dragPointerId === undefined;\n      if (canStartDrag && input.claim({ kind: 'drag' })) this.#dragStart(input.event.pointerId);\n    } else if (input.kind === 'pointerend' && input.event.pointerId === this.#dragPointerId) {\n      if (input.interrupted) this.#cancelDrag();\n      else {\n        this.#dragMove(input);\n        this.#dragEnd();\n      }\n    }\n  };\n\n  #handleGesture = (event: CustomEvent<Gesture<undefined>>): void => {\n    if (event.detail.kind === 'drag' && event.detail.event.pointerId === this.#dragPointerId) {\n      this.#dragMove(event.detail);\n    }\n  };\n\n  #dragStart(pointerId: number) {\n    this.#dragPointerId = pointerId;\n    this.#range.step = '1';\n    this._internals.states.add('active');\n    this.#offset = this.valueAsNumber;\n  }\n\n  #dragMove(gesture: Pick<PointerMovementGesture, 'movementX' | 'movementY'>) {\n    const offset =\n      (this.orientation === 'vertical' ? gesture.movementX : -gesture.movementY) * (this.dir === 'rtl' ? -1 : 1);\n    if (offset === 0) return;\n    this.#offset = Math.max(this.min, Math.min(this.max, this.#offset + offset));\n    this.#setInput(this.#offset);\n  }\n\n  #dragEnd() {\n    this.#offset = this.valueAsNumber;\n    this.#range.step = `${this.step}`;\n    this.#dragPointerId = undefined;\n    this._internals.states.delete('active');\n    this.#setChange(this.#offset);\n  }\n\n  #cancelDrag() {\n    if (this.#dragPointerId === undefined) return;\n    this.#dragPointerId = undefined;\n    this.#range.step = `${this.step}`;\n    this._internals.states.delete('active');\n  }\n\n  #setInput(value: number) {\n    this.#updateValue(value);\n    this.dispatchInputEvent();\n  }\n\n  #setChange(value: number) {\n    this.#updateValue(value);\n    this.dispatchChangeEvent();\n  }\n\n  #updateValue(value: number) {\n    if (value <= this.max && value >= this.min) {\n      this.valueAsNumber = value;\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/search/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Search as r } from "./search2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(r), i(t), i(n), i(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/search/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/search/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/foundations/internal/define';\nimport { Search } from '@nvidia-elements/core/search';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Search);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-search': Search;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAM,GACb,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Search","Control","ControlGroup","ControlMessage"],"sources":["../../src/search/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/foundations/internal/define';\nimport { Search } from '@nvidia-elements/core/search';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Search);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-search': Search;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAM,GACbD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/search/index.js

@@ -1,2 +1 @@
-import { Search as e } from "./search2.js";
-export { e as Search };
+export { Search } from "./search2.js";

package/dist/search/search.examples.js

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

package/dist/search/search.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.examples.js","names":[],"sources":["../../src/search/search.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/search/define.js';\n\nexport default {\n  title: 'Elements/Search',\n  component: 'nve-search',\n};\n\n/**\n * @summary Basic search input with label and message for query entry and filtering data.\n */\nexport const Default = {\n  render: () => html`\n<nve-search>\n  <label>label</label>\n  <input type=\"search\" />\n  <nve-control-message>message</nve-control-message>\n</nve-search>`\n};\n\n/**\n * @summary Rounded search input without visible label for compact inline placement in headers or toolbars.\n */\nexport const Inline = {\n  render: () => html`\n<nve-search rounded>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-search>`\n};\n\n/**\n * @summary Search input with datalist providing autocomplete suggestions for quick query selection from recent searches.\n */\nexport const Datalist = {\n  render: () => html`\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\n/**\n * @summary Search inputs with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-search>\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>`\n};\n\n/**\n * @summary Search inputs with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-search layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"search.examples.js","names":["search_examples_default"],"sources":["../../src/search/search.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/search/define.js';\n\nexport default {\n  title: 'Elements/Search',\n  component: 'nve-search',\n};\n\n/**\n * @summary Basic search input with label and message for query entry and filtering data.\n */\nexport const Default = {\n  render: () => html`\n<nve-search>\n  <label>label</label>\n  <input type=\"search\" />\n  <nve-control-message>message</nve-control-message>\n</nve-search>`\n};\n\n/**\n * @summary Rounded search input without visible label for compact inline placement in headers or toolbars.\n */\nexport const Inline = {\n  render: () => html`\n<nve-search rounded>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-search>`\n};\n\n/**\n * @summary Search input with datalist providing autocomplete suggestions for quick query selection from recent searches.\n */\nexport const Datalist = {\n  render: () => html`\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\n/**\n * @summary Search inputs with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-search>\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n\n  <nve-search>\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>`\n};\n\n/**\n * @summary Search inputs with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-search layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-search>\n\n  <nve-search layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-search>\n</div>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/search/search.js

@@ -1,6 +1,5 @@
-//#region src/search/search.css?inline
+// src/search/search.css?inline
 var e = ":host{width:100%}[input]{position:relative}[icon-name=search]{pointer-events:none;position:absolute;left:0}::slotted(input){padding-inline-start:var(--nve-ref-size-800)!important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=search.js.map

package/dist/search/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":[],"sources":["../../src/search/search.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  width: 100%;\n}\n\n[input] {\n  position: relative;\n}\n\n[icon-name='search'] {\n  pointer-events: none;\n  position: absolute;\n  left: 0;\n}\n\n::slotted(input) {\n  padding-inline-start: var(--nve-ref-size-800) !important;\n}\n"],"mappings":""}
+{"version":3,"file":"search.js","names":["search_default"],"sources":["../../src/search/search.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  width: 100%;\n}\n\n[input] {\n  position: relative;\n}\n\n[icon-name='search'] {\n  pointer-events: none;\n  position: absolute;\n  left: 0;\n}\n\n::slotted(input) {\n  padding-inline-start: var(--nve-ref-size-800) !important;\n}\n"],"mappings":""}

package/dist/search/search2.js

@@ -1,13 +1,13 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
 import o from "./search.js";
 import { html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/search/search.ts
+// src/search/search.ts
 var l = class extends r {
 	constructor(...e) {
 		super(...e), this.rounded = !1;
@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -39,7 +39,6 @@ n([c({
 	type: Boolean,
 	reflect: !0
 })], l.prototype, "rounded", void 0), l = n([e()], l);
-//#endregion
 export { l as Search };
 
 //# sourceMappingURL=search2.js.map

package/dist/search/search2.js.map

@@ -1 +1 @@
-{"version":3,"file":"search2.js","names":[],"sources":["../../src/search/search.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './search.css?inline';\n\n/**\n * @element nve-search\n * @description A search is a control that enables users to enter text to search.\n * @documentation https://nvidia.github.io/elements/docs/elements/search/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/search\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search\n */\n@scopedRegistry()\nexport class Search extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  /**\n   * Sets the rounded visual style of the input.\n   */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-search',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get prefixContent() {\n    return html`<nve-icon-button part=\"icon-button\" icon-name=\"search\" container=\"inline\" aria-hidden=\"true\" readonly></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAM,IAAN,cAAqB,EAAoC;;EAUR,aAAA,KAAA,UAAA;;;EAEtC,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;AACF;AArBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAX3C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"search2.js","names":["styles","_decorate","__decorate","search_default","Search","Control","_args","useStyles","inputStyles","IconButton","property","scopedRegistry"],"sources":["../../src/search/search.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './search.css?inline';\n\n/**\n * @element nve-search\n * @description A search is a control that enables users to enter text to search.\n * @documentation https://nvidia.github.io/elements/docs/elements/search/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/search\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search\n */\n@scopedRegistry()\nexport class Search extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  /**\n   * Sets the rounded visual style of the input.\n   */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-search',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get prefixContent() {\n    return html`<nve-icon-button part=\"icon-button\" icon-name=\"search\" container=\"inline\" aria-hidden=\"true\" readonly></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AA6BO,IAAMI,IAAN,cAAqBC,EAAoC;;EAUR,A,aAAA,KAAA,UAAA;;;EAEtC,KAAA,SAAAE,EAAU;GAAC,GAAGF,EAAQ;GAAQG;GAAaR;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBS,EAAW,SAAS,MAAMA,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;AACF;AArBGR,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,WAAA,KAAA,CAAA,GAX3C,IAAAH,EAAA,CAAAU,EAAe,CAAA,GAAAP,CAAA"}

package/dist/select/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Select as r } from "./select2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(r), i(t), i(n), i(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/select/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/select/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/foundations/internal/define';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Select);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-select': Select;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAM,GACb,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Select","Control","ControlGroup","ControlMessage"],"sources":["../../src/select/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/foundations/internal/define';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Select);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-select': Select;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAM,GACbD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/select/index.js

@@ -1,2 +1 @@
-import { Select as e } from "./select2.js";
-export { e as Select };
+export { Select } from "./select2.js";

package/dist/select/select.examples.js

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

package/dist/select/select.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.examples.js","names":[],"sources":["../../src/select/select.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/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/logo/define.js';\n\nexport default {\n  title: 'Elements/Select',\n  component: 'nve-select',\n};\n\n/**\n * @summary Basic select component with label, options, and message.\n */\nexport const Default = {\n  render: () => html`\n<nve-select>\n  <label>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\n/**\n * @summary Rich option rendering with custom slots containing logos and descriptions for each option.\n * @tags test-case\n */\nexport const CustomOptionRender = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select id=\"complex\">\n    <option value=\"1\">\n      Debugger\n    </option>\n    <option value=\"2\">\n      Task Manager\n    </option>\n    <option value=\"3\">\n      CI Services\n    </option>\n  </select>\n    <div slot=\"option-1\" nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-logo color=\"pink-rose\">Db</nve-logo>\n      <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n        <span nve-text=\"label\">Debugger</span>\n        <span nve-text=\"body muted\">some details on option 1</span>\n      </p>\n    </div>\n    <div slot=\"option-2\" nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-logo color=\"blue-cobalt\">TM</nve-logo>\n      <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n        <span nve-text=\"label\">Task Manager</span>\n        <span nve-text=\"body muted\">some details on option 2</span>\n      </p>\n    </div>\n    <div slot=\"option-3\" nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-logo color=\"green-mint\">CI</nve-logo>\n      <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n        <span nve-text=\"label\">CI Services</span>\n        <span nve-text=\"body muted\">some details on option 3</span>\n      </p>\n    </div>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n  `\n}\n\n/**\n * @summary Select with a prefix button to provide extra context or categorization.\n */\nexport const Prefix = {\n  render: () => html`\n  <nve-select>\n    <nve-button container=\"flat\" readonly>location</nve-button>\n    <select aria-label=\"location\">\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-select>\n  `\n};\n\n/**\n * @summary Flat container style for single and multi select, providing a minimal visual treatment.\n */\nexport const Flat = {\n  render: () => html`\n<div nve-layout=\"column gap:xl align:stretch\">\n  <nve-select container=\"flat\">\n    <label>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-select container=\"flat\">\n    <label>multiple</label>\n    <select multiple>\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select container=\"flat\">\n    <label>multiple + size</label>\n    <select multiple size=\"5\">\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</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</div>`\n};\n\n/**\n * @summary Vertical layout showcasing states: default, disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select>\n    <label>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-select>\n    <label>disabled</label>\n    <select disabled>\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-select>\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>`\n};\n\n/**\n * @summary Horizontal layout showcasing states: default, disabled, success, and error.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select layout=\"horizontal\">\n    <label>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-select layout=\"horizontal\">\n    <label>disabled</label>\n    <select disabled>\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-select layout=\"horizontal\">\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-select>\n\n  <nve-select layout=\"horizontal\">\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>`\n};\n\n/**\n * @summary Many-selection mode allowing users to select many options simultaneously.\n */\nexport const Multiple = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>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\n/**\n * @summary Multi-selection in disabled state, showing read-only selected options.\n */\nexport const MultipleDisabled = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select multiple disabled>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>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\n/**\n * @summary Multi-selection with constrained width to show overflow handling of selected options.\n */\nexport const MultipleOverflow = {\n  render: () => html`\n<nve-select style=\"--width: 250px\">\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\" selected>Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>`\n};\n\n/**\n * @summary Size attribute controls the number of visible options without scrolling.\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"column gap:xl\">\n  <nve-select>\n    <label>label</label>\n    <select size=\"5\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option 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-select>\n    <label>label</label>\n    <select size=\"3\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option 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</div>`\n};\n\n/**\n * @summary Custom scroll height for dropdown with many options to control vertical space usage.\n * @tags test-case\n */\nexport const Height = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select style=\"--scroll-height: 150px\">\n    <label>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      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n      <option value=\"6\">Option 6</option>\n      <option value=\"7\">Option 7</option>\n      <option value=\"8\">Option 8</option>\n      <option value=\"9\">Option 9</option>\n      <option value=\"10\">Option 10</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>label</label>\n    <select>\n      ${new Array(100).fill('').map((_, i) => html`<option>Option ${i + 1}</option>`)}\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>`\n};\n\n/**\n * @summary Select width dynamically adjusts to fit the currently selected option text.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\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};\n\n/**\n * @summary Select width adjusts to fit the longest option in both vertical and horizontal layouts.\n * @tags test-case\n */\nexport const FitContent = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-select fit-content>\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\n  <nve-select fit-content layout=\"horizontal\">\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</div>`\n};\n\n/**\n * @summary Placeholder text prompts users to make a selection when no option exists yet.\n */\nexport const Placeholder = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"\" selected disabled hidden>Select Option</option>\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\n/**\n * @summary Placeholder text in multi-selection mode guides users before they select any options.\n */\nexport const PlaceholderMultiple = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value=\"\" selected disabled hidden>Select Option</option>\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\n/**\n * @summary Disable individual options to prevent selection while keeping them visible.\n */\nexport const Disabled = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" disabled>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\n/**\n * @summary Viewport overflow test for select element\n * @tags test-case\n */\nexport const ViewportOverflow = {\n  render: () => html`\n<nve-select layout=\"horizontal-inline\" style=\"margin: 30vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n<nve-select layout=\"horizontal-inline\" style=\"margin: 55vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>`\n};\n\n/**\n * @summary Performance test for select element with 1000 options\n * @tags test-case performance\n */\nexport const Performance = {\n  render: () => html`\n  <nve-select id=\"performance-select\">\n    <label>1000 options</label>\n    <select></select>\n  </nve-select>\n  <script type=\"module\">\n    const select = document.querySelector('#performance-select select');\n    const options = new Array(1000).fill('').map((_, i) => {\n      const option = document.createElement('option');\n      option.value = i;\n      option.textContent = i + ' item';\n      return option;\n    });\n    select.append(...options);\n  </script>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"select.examples.js","names":["select_examples_default"],"sources":["../../src/select/select.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/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/logo/define.js';\n\nexport default {\n  title: 'Elements/Select',\n  component: 'nve-select',\n};\n\n/**\n * @summary Basic select component with label, options, and message.\n */\nexport const Default = {\n  render: () => html`\n<nve-select>\n  <label>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\n/**\n * @summary Rich option rendering with custom slots containing logos and descriptions for each option.\n * @tags test-case\n */\nexport const CustomOptionRender = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select id=\"complex\">\n    <option value=\"1\">\n      Debugger\n    </option>\n    <option value=\"2\">\n      Task Manager\n    </option>\n    <option value=\"3\">\n      CI Services\n    </option>\n  </select>\n    <div slot=\"option-1\" nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-logo color=\"pink-rose\">Db</nve-logo>\n      <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n        <span nve-text=\"label\">Debugger</span>\n        <span nve-text=\"body muted\">some details on option 1</span>\n      </p>\n    </div>\n    <div slot=\"option-2\" nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-logo color=\"blue-cobalt\">TM</nve-logo>\n      <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n        <span nve-text=\"label\">Task Manager</span>\n        <span nve-text=\"body muted\">some details on option 2</span>\n      </p>\n    </div>\n    <div slot=\"option-3\" nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-logo color=\"green-mint\">CI</nve-logo>\n      <p nve-text=\"body\" nve-layout=\"column gap:xs\">\n        <span nve-text=\"label\">CI Services</span>\n        <span nve-text=\"body muted\">some details on option 3</span>\n      </p>\n    </div>\n  <nve-control-message>message</nve-control-message>\n</nve-select>\n  `\n}\n\n/**\n * @summary Select with a prefix button to provide extra context or categorization.\n */\nexport const Prefix = {\n  render: () => html`\n  <nve-select>\n    <nve-button container=\"flat\" readonly>location</nve-button>\n    <select aria-label=\"location\">\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-select>\n  `\n};\n\n/**\n * @summary Flat container style for single and multi select, providing a minimal visual treatment.\n */\nexport const Flat = {\n  render: () => html`\n<div nve-layout=\"column gap:xl align:stretch\">\n  <nve-select container=\"flat\">\n    <label>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-select container=\"flat\">\n    <label>multiple</label>\n    <select multiple>\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select container=\"flat\">\n    <label>multiple + size</label>\n    <select multiple size=\"5\">\n      <option selected value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</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</div>`\n};\n\n/**\n * @summary Vertical layout showcasing states: default, disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select>\n    <label>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-select>\n    <label>disabled</label>\n    <select disabled>\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-select>\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>`\n};\n\n/**\n * @summary Horizontal layout showcasing states: default, disabled, success, and error.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select layout=\"horizontal\">\n    <label>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-select layout=\"horizontal\">\n    <label>disabled</label>\n    <select disabled>\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-select layout=\"horizontal\">\n    <label>success</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 status=\"success\">message</nve-control-message>\n  </nve-select>\n\n  <nve-select layout=\"horizontal\">\n    <label>error</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 status=\"error\">message</nve-control-message>\n  </nve-select>\n</div>`\n};\n\n/**\n * @summary Many-selection mode allowing users to select many options simultaneously.\n */\nexport const Multiple = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>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\n/**\n * @summary Multi-selection in disabled state, showing read-only selected options.\n */\nexport const MultipleDisabled = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select multiple disabled>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>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\n/**\n * @summary Multi-selection with constrained width to show overflow handling of selected options.\n */\nexport const MultipleOverflow = {\n  render: () => html`\n<nve-select style=\"--width: 250px\">\n  <label>label</label>\n  <select multiple>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" selected>Option 2</option>\n    <option value=\"3\" selected>Option 3</option>\n    <option value=\"4\" selected>Option 4</option>\n    <option value=\"5\" selected>Option 5</option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-select>`\n};\n\n/**\n * @summary Size attribute controls the number of visible options without scrolling.\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"column gap:xl\">\n  <nve-select>\n    <label>label</label>\n    <select size=\"5\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option 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-select>\n    <label>label</label>\n    <select size=\"3\">\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\" selected>Option 2</option>\n      <option 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</div>`\n};\n\n/**\n * @summary Custom scroll height for dropdown with many options to control vertical space usage.\n * @tags test-case\n */\nexport const Height = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-select style=\"--scroll-height: 150px\">\n    <label>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      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n      <option value=\"6\">Option 6</option>\n      <option value=\"7\">Option 7</option>\n      <option value=\"8\">Option 8</option>\n      <option value=\"9\">Option 9</option>\n      <option value=\"10\">Option 10</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-select>\n    <label>label</label>\n    <select>\n      ${new Array(100).fill('').map((_, i) => html`<option>Option ${i + 1}</option>`)}\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</div>`\n};\n\n/**\n * @summary Select width dynamically adjusts to fit the currently selected option text.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\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};\n\n/**\n * @summary Select width adjusts to fit the longest option in both vertical and horizontal layouts.\n * @tags test-case\n */\nexport const FitContent = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-select fit-content>\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\n  <nve-select fit-content layout=\"horizontal\">\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</div>`\n};\n\n/**\n * @summary Placeholder text prompts users to make a selection when no option exists yet.\n */\nexport const Placeholder = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"\" selected disabled hidden>Select Option</option>\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\n/**\n * @summary Placeholder text in multi-selection mode guides users before they select any options.\n */\nexport const PlaceholderMultiple = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select multiple>\n    <option value=\"\" selected disabled hidden>Select Option</option>\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\n/**\n * @summary Disable individual options to prevent selection while keeping them visible.\n */\nexport const Disabled = {\n  render: () => html`\n<nve-select>\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1</option>\n    <option value=\"2\" disabled>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\n/**\n * @summary Viewport overflow test for select element\n * @tags test-case\n */\nexport const ViewportOverflow = {\n  render: () => html`\n<nve-select layout=\"horizontal-inline\" style=\"margin: 30vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>\n<nve-select layout=\"horizontal-inline\" style=\"margin: 55vh 0 0 60vw; max-width: 500px\">\n  <label>label</label>\n  <select>\n    <option value=\"1\">Option 1 asfd asdf asdf asdf asdf asdf asdfasdf asdf asdf asdf asdf asdf asdf asdf</option>\n    <option value=\"2\">Option 2</option>\n    <option value=\"3\">Option 3</option>\n  </select>\n</nve-select>`\n};\n\n/**\n * @summary Performance test for select element with 1000 options\n * @tags test-case performance\n */\nexport const Performance = {\n  render: () => html`\n  <nve-select id=\"performance-select\">\n    <label>1000 options</label>\n    <select></select>\n  </nve-select>\n  <script type=\"module\">\n    const select = document.querySelector('#performance-select select');\n    const options = new Array(1000).fill('').map((_, i) => {\n      const option = document.createElement('option');\n      option.value = i;\n      option.textContent = i + ' item';\n      return option;\n    });\n    select.append(...options);\n  </script>\n  `\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/select/select.global.js

@@ -1,6 +1,5 @@
-//#region src/select/select.global.css?inline
+// src/select/select.global.css?inline
 var e = "nve-select select[multiple] option{pointer-events:none!important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=select.global.js.map

package/dist/select/select.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.global.js","names":[],"sources":["../../src/select/select.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-select select[multiple] option {\n  pointer-events: none !important;\n}\n"],"mappings":""}
+{"version":3,"file":"select.global.js","names":["select_global_default"],"sources":["../../src/select/select.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-select select[multiple] option {\n  pointer-events: none !important;\n}\n"],"mappings":""}

package/dist/select/select.js

@@ -1,6 +1,5 @@
-//#region src/select/select.css?inline
+// src/select/select.css?inline
 var e = ":host{--padding: 0 var(--nve-ref-size-800) 0 var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: var(--nve-ref-size-800);--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--border: var(--nve-ref-border-width-md) solid transparent;--border-bottom: var(--border);--gap: var(--nve-ref-space-xxs);--cursor: pointer;--font-weight: normal;--text-align: start;--scroll-height: 50vh;--width: 100%;--control-width: var(--width);--max-width: 100%;--min-width: fit-content;--_input-background: var(--background);--_icon-color: var(--color);--_gap: var(--gap);--size: 1;--_height: var(--height);contain:initial;width:var(--width);max-width:var(--max-width);min-width:var(--min-width)}:host([fit-text]){--min-width: initial}[internal-host]{position:relative}[input]{scroll-behavior:smooth;scrollbar-color:color-mix(in oklab,var(--nve-sys-scrollbar-thumb-color) 100%,currentColor 20%) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width);height:var(--_height);background:var(--background);border:var(--border);border-bottom:var(--border-bottom);border-radius:var(--border-radius);width:var(--control-width);color:var(--color);align-items:center;display:flex;align-content:stretch;position:relative}[name=caret]{right:var(--nve-ref-size-300);align-self:center;pointer-events:none;position:absolute;transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.4,0,.2,1)}::slotted(select){appearance:none!important;color:var(--color)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;cursor:var(--cursor)!important;font-weight:var(--font-weight)!important;text-align:var(--text-align)!important;height:var(--_height)!important;width:100%!important;border:0!important;background:none!important;display:block!important}[internal-host]:has(nve-menu:focus-within) [input]{outline:0!important}:host(:state(selected)){--font-weight: var(--nve-ref-font-weight-semibold)}:host([fit-content]:state(multiple)) [internal-host]:has(nve-tag) ::slotted(select){width:var(--nve-ref-size-1000)!important}:host(:state(multiple)){--padding: 0 var(--nve-ref-size-300) 0 var(--nve-ref-size-100)}:host(:state(multiple)) [input]{padding:var(--padding)}:host(:state(multiple)) .tags{width:fit-content;display:flex;gap:var(--gap)}:host(:state(multiple)) .tags-label{padding:0 var(--nve-ref-size-200);font-size:var(--font-size);cursor:var(--cursor);font-weight:var(--font-weight);position:absolute;left:0;display:none;pointer-events:none}:host(:state(multiple-overflow)) .tags,:host([multiple-overflow]) .tags{opacity:0;pointer-events:none;position:absolute}:host(:state(multiple-overflow)) .tags-label,:host([multiple-overflow]) .tags-label,.placeholder.tags-label{display:block!important}:host([size]:state(multiple)) .tags,:host([size]:state(multiple)) .tags-label{display:none!important}:host(:state(multiple)) ::slotted(select[multiple]){opacity:0!important}:host(:state(size)){--_row-height: calc(var(--height) * var(--size) + var(--gap) * (var(--size) - 1));--_height: calc(var(--_row-height) + var(--nve-ref-border-width-md) * 2)}:host(:state(size)) [input]{overflow:auto;display:block}:host(:state(size)) [input] slot:not([name]){display:none}:host([layout*=\"horizontal\"][size]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"][size]) slot[name=label]{align-self:start}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}nve-tag{--background: color-mix(in oklab, var(--color) 15%, var(--_input-background));--padding: var(--nve-ref-size-100) var(--nve-ref-size-200);--cursor: pointer !important}:host(:state(disabled)) nve-tag{pointer-events:none!important;--cursor: not-allowed !important}nve-dropdown{--padding: var(--nve-ref-size-200)}nve-menu{--max-height: var(--scroll-height);--gap: var(--_gap)}nve-menu-item{--text-transform: initial;contain:content;content-visibility:auto}nve-menu-item:not(:state(selected)) nve-icon[name=check]{opacity:0}nve-menu-item nve-icon{--color: inherit}slot:not([name]),slot[name*=option-]{display:contents}:host([container=\"flat\"]){--background: unset;--border-radius: 0;--box-shadow: none;--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted)}:host([container=\"flat\"]) [input]{background:inherit}:host([container=\"flat\"]) nve-tag{--background: var(--nve-sys-interaction-field-background)}:host([container=\"flat\"]:focus-within){--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis)}:host([container=\"flat\"][size]){--border-bottom: 0 !important}:host([container=\"flat\"]:focus-within) [input]{outline:0!important}:host([container=\"inline\"]){--border-radius: 0;--box-shadow: none}:host([container=\"inline\"]) [input]{background:inherit}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../src/select/select.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  --padding: 0 var(--nve-ref-size-800) 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-800);\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: var(--nve-ref-border-width-md) solid transparent;\n  --border-bottom: var(--border);\n  --gap: var(--nve-ref-space-xxs);\n  --cursor: pointer;\n  --font-weight: normal;\n  --text-align: start;\n  --scroll-height: 50vh;\n  --width: 100%;\n  --control-width: var(--width);\n  --max-width: 100%;\n  --min-width: fit-content;\n  --_input-background: var(--background);\n  --_icon-color: var(--color);\n  --_gap: var(--gap);\n  --size: 1;\n  --_height: var(--height);\n  contain: initial;\n  width: var(--width);\n  max-width: var(--max-width);\n  min-width: var(--min-width);\n}\n\n:host([fit-text]) {\n  --min-width: initial;\n}\n\n[internal-host] {\n  position: relative;\n}\n\n[input] {\n  scroll-behavior: smooth;\n  scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)\n    var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  height: var(--_height);\n  background: var(--background);\n  border: var(--border);\n  border-bottom: var(--border-bottom);\n  border-radius: var(--border-radius);\n  width: var(--control-width);\n  color: var(--color);\n  align-items: center;\n  display: flex;\n  align-content: stretch;\n  position: relative;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n  transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n::slotted(select) {\n  appearance: none !important;\n  color: var(--color) !important;\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  cursor: var(--cursor) !important;\n  font-weight: var(--font-weight) !important;\n  text-align: var(--text-align) !important;\n  height: var(--_height) !important;\n  width: 100% !important;\n  border: 0 !important;\n  background: none !important;\n  display: block !important;\n}\n\n[internal-host]:has(nve-menu:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host(:state(selected)) {\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host([fit-content]:state(multiple)) [internal-host]:has(nve-tag) ::slotted(select) {\n  width: var(--nve-ref-size-1000) !important;\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-300) 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n:host(:state(multiple)) .tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--gap);\n}\n\n:host(:state(multiple)) .tags-label {\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  font-weight: var(--font-weight);\n  position: absolute;\n  left: 0;\n  display: none;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags,\n:host([multiple-overflow]) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label,\n:host([multiple-overflow]) .tags-label,\n.placeholder.tags-label {\n  display: block !important;\n}\n\n:host([size]:state(multiple)) .tags,\n:host([size]:state(multiple)) .tags-label {\n  display: none !important;\n}\n\n:host(:state(multiple)) ::slotted(select[multiple]) {\n  opacity: 0 !important;\n}\n\n:host(:state(size)) {\n  --_row-height: calc(var(--height) * var(--size) + var(--gap) * (var(--size) - 1));\n  --_height: calc(var(--_row-height) + var(--nve-ref-border-width-md) * 2);\n}\n\n:host(:state(size)) [input] {\n  overflow: auto;\n  display: block;\n}\n\n:host(:state(size)) [input] slot:not([name]) {\n  display: none;\n}\n\n:host([layout*='horizontal'][size]) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal'][size]) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\nnve-tag {\n  --background: color-mix(in oklab, var(--color) 15%, var(--_input-background));\n  --padding: var(--nve-ref-size-100) var(--nve-ref-size-200);\n  --cursor: pointer !important;\n}\n\n:host(:state(disabled)) nve-tag {\n  pointer-events: none !important;\n  --cursor: not-allowed !important;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  --max-height: var(--scroll-height);\n  --gap: var(--_gap);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n:host([container='flat']) {\n  --background: unset;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='flat']) [input] {\n  background: inherit;\n}\n\n:host([container='flat']) nve-tag {\n  --background: var(--nve-sys-interaction-field-background);\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([container='flat'][size]) {\n  --border-bottom: 0 !important;\n}\n\n:host([container='flat']:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host([container='inline']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container='inline']) [input] {\n  background: inherit;\n}\n"],"mappings":""}
+{"version":3,"file":"select.js","names":["select_default"],"sources":["../../src/select/select.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  --padding: 0 var(--nve-ref-size-800) 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-800);\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: var(--nve-ref-border-width-md) solid transparent;\n  --border-bottom: var(--border);\n  --gap: var(--nve-ref-space-xxs);\n  --cursor: pointer;\n  --font-weight: normal;\n  --text-align: start;\n  --scroll-height: 50vh;\n  --width: 100%;\n  --control-width: var(--width);\n  --max-width: 100%;\n  --min-width: fit-content;\n  --_input-background: var(--background);\n  --_icon-color: var(--color);\n  --_gap: var(--gap);\n  --size: 1;\n  --_height: var(--height);\n  contain: initial;\n  width: var(--width);\n  max-width: var(--max-width);\n  min-width: var(--min-width);\n}\n\n:host([fit-text]) {\n  --min-width: initial;\n}\n\n[internal-host] {\n  position: relative;\n}\n\n[input] {\n  scroll-behavior: smooth;\n  scrollbar-color: color-mix(in oklab, var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)\n    var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  height: var(--_height);\n  background: var(--background);\n  border: var(--border);\n  border-bottom: var(--border-bottom);\n  border-radius: var(--border-radius);\n  width: var(--control-width);\n  color: var(--color);\n  align-items: center;\n  display: flex;\n  align-content: stretch;\n  position: relative;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\n  transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n::slotted(select) {\n  appearance: none !important;\n  color: var(--color) !important;\n  padding: var(--padding) !important;\n  font-size: var(--font-size) !important;\n  cursor: var(--cursor) !important;\n  font-weight: var(--font-weight) !important;\n  text-align: var(--text-align) !important;\n  height: var(--_height) !important;\n  width: 100% !important;\n  border: 0 !important;\n  background: none !important;\n  display: block !important;\n}\n\n[internal-host]:has(nve-menu:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host(:state(selected)) {\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n:host([fit-content]:state(multiple)) [internal-host]:has(nve-tag) ::slotted(select) {\n  width: var(--nve-ref-size-1000) !important;\n}\n\n:host(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-300) 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n:host(:state(multiple)) .tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--gap);\n}\n\n:host(:state(multiple)) .tags-label {\n  padding: 0 var(--nve-ref-size-200);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  font-weight: var(--font-weight);\n  position: absolute;\n  left: 0;\n  display: none;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow)) .tags,\n:host([multiple-overflow]) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow)) .tags-label,\n:host([multiple-overflow]) .tags-label,\n.placeholder.tags-label {\n  display: block !important;\n}\n\n:host([size]:state(multiple)) .tags,\n:host([size]:state(multiple)) .tags-label {\n  display: none !important;\n}\n\n:host(:state(multiple)) ::slotted(select[multiple]) {\n  opacity: 0 !important;\n}\n\n:host(:state(size)) {\n  --_row-height: calc(var(--height) * var(--size) + var(--gap) * (var(--size) - 1));\n  --_height: calc(var(--_row-height) + var(--nve-ref-border-width-md) * 2);\n}\n\n:host(:state(size)) [input] {\n  overflow: auto;\n  display: block;\n}\n\n:host(:state(size)) [input] slot:not([name]) {\n  display: none;\n}\n\n:host([layout*='horizontal'][size]) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal'][size]) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\nnve-tag {\n  --background: color-mix(in oklab, var(--color) 15%, var(--_input-background));\n  --padding: var(--nve-ref-size-100) var(--nve-ref-size-200);\n  --cursor: pointer !important;\n}\n\n:host(:state(disabled)) nve-tag {\n  pointer-events: none !important;\n  --cursor: not-allowed !important;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  --max-height: var(--scroll-height);\n  --gap: var(--_gap);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n:host([container='flat']) {\n  --background: unset;\n  --border-radius: 0;\n  --box-shadow: none;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='flat']) [input] {\n  background: inherit;\n}\n\n:host([container='flat']) nve-tag {\n  --background: var(--nve-sys-interaction-field-background);\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([container='flat'][size]) {\n  --border-bottom: 0 !important;\n}\n\n:host([container='flat']:focus-within) [input] {\n  outline: 0 !important;\n}\n\n:host([container='inline']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container='inline']) [input] {\n  background: inherit;\n}\n"],"mappings":""}

package/dist/select/select2.js

@@ -3,7 +3,7 @@ import { focusElementTimeout as t, onListboxActivate as n } from "../internal/ut
 import { appendRootNodeStyle as r, getElementUpdate as i } from "../internal/utils/dom.js";
 import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
 import { useStyles as o } from "../internal/styles/index.js";
-import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import s from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as c } from "../icon/icon2.js";
 import { Control as l } from "../forms/control/control2.js";
 import { Tag as u } from "../tag/tag2.js";
@@ -16,7 +16,7 @@ import { html as g, nothing as _ } from "lit";
 import { property as v } from "lit/decorators/property.js";
 import { I18nController as y, i18n as b } from "@nvidia-elements/foundations/internal/i18n";
 import { ifDefined as x } from "lit/directives/if-defined.js";
-//#region src/select/select.ts
+// src/select/select.ts
 var S = {
 	select: "select",
 	selected: "selected"
@@ -30,7 +30,7 @@ var S = {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -146,7 +146,6 @@ s([v({
 	type: String,
 	reflect: !0
 })], C.prototype, "container", void 0), s([v({ type: Object })], C.prototype, "i18n", void 0), C = s([b(), a()], C);
-//#endregion
 export { C as Select };
 
 //# sourceMappingURL=select2.js.map