@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1,85 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { I18nController as t } from "../internal/controllers/i18n.controller.js";
+import { typeTouch as n } from "../internal/controllers/type-touch.controller.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import i from "./resize-handle.js";
+import { LitElement as a, html as o } from "lit";
+import { property as s } from "lit/decorators/property.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { FormControlMixin as l } from "@nvidia-elements/forms/mixin";
+//#region src/resize-handle/resize-handle.ts
+var u = class extends l(a) {
+	static {
+		this.styles = r([i]);
+	}
+	get #e() {
+		return this.shadowRoot.querySelector("input");
+	}
+	static {
+		this.metadata = {
+			tag: "nve-resize-handle",
+			version: "0.0.3",
+			valueSchema: { type: "number" }
+		};
+	}
+	#t = new t(this);
+	#n = 0;
+	render() {
+		return o`<div internal-host><div class="line" part="_line"></div><input aria-label="${c(this.ariaLabel ?? this.i18n.resize)}" type="range" min="${this.min}" max="${this.max}" .valueAsNumber="${this.valueAsNumber}" @input="${(e) => this.#s(e.target.valueAsNumber)}" @change="${(e) => this.#c(e.target.valueAsNumber)}" step="${this.step}"></div>`;
+	}
+	constructor() {
+		super(), this.orientation = "horizontal", this.min = 0, this.max = 100, this.step = 10, this.i18n = this.#t.i18n, this.value = this.value ?? 50, this.#n = this.valueAsNumber;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._internals.role = "none";
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.addEventListener("nve-touch-start", () => this.#i()), this.addEventListener("nve-touch-end", () => this.#o()), this.addEventListener("nve-touch-move", ((e) => this.#a(e))), this.addEventListener("dblclick", () => {
+			this.dispatchEvent(new CustomEvent("toggle", {
+				cancelable: !0,
+				bubbles: !0,
+				composed: !0
+			})) && this.#r();
+		});
+	}
+	#r() {
+		let e = this.valueAsNumber <= this.max && this.valueAsNumber !== this.min ? this.min : this.max;
+		this.#s(e), this.#c(e);
+	}
+	#i() {
+		this.#e.step = "1", this._internals.states.add("active"), this.#n = this.valueAsNumber;
+	}
+	#a(e) {
+		let t = (this.orientation === "vertical" ? e.offsetX : -e.offsetY) * (this.dir === "rtl" ? -1 : 1);
+		this.#n += t, this.#s(this.#n);
+	}
+	#o() {
+		this.#n = this.valueAsNumber, this.#e.step = `${this.step}`, this.#c(this.#n), this._internals.states.delete("active");
+	}
+	#s(e) {
+		this.#l(e), this.dispatchInputEvent();
+	}
+	#c(e) {
+		this.#l(e), this.dispatchChangeEvent();
+	}
+	#l(e) {
+		e <= this.max && e >= this.min && (this.valueAsNumber = e);
+	}
+};
+e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "orientation", void 0), e([s({
+	type: Number,
+	reflect: !0
+})], u.prototype, "min", void 0), e([s({
+	type: Number,
+	reflect: !0
+})], u.prototype, "max", void 0), e([s({
+	type: Number,
+	reflect: !0
+})], u.prototype, "step", void 0), e([s({ type: Object })], u.prototype, "i18n", void 0), u = e([n()], u);
+//#endregion
+export { u as ResizeHandle };
+
+//# sourceMappingURL=resize-handle2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resize-handle2.js","names":["#range","#setInput","#setChange","#i18nController","#offset","#touchStart","#touchEnd","#touchMove","#toggle","#updateValue"],"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/mixin';\nimport { useStyles, typeTouch } from '@nvidia-elements/core/internal';\nimport { I18nController, type NveTouchEvent } from '@nvidia-elements/core/internal';\nimport styles from './resize-handle.css?inline';\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 * @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 */\n@typeTouch<ResizeHandle>()\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  #i18nController: I18nController<this> = new I18nController<this>(this);\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  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'none';\n  }\n\n  firstUpdated(props: PropertyValues) {\n    super.firstUpdated(props);\n    this.addEventListener('nve-touch-start', () => this.#touchStart());\n    this.addEventListener('nve-touch-end', () => this.#touchEnd());\n    this.addEventListener('nve-touch-move', ((e: NveTouchEvent) => this.#touchMove(e)) as EventListener);\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  #touchStart() {\n    this.#range.step = '1';\n    this._internals.states.add('active');\n    this.#offset = this.valueAsNumber;\n  }\n\n  #touchMove(e: NveTouchEvent) {\n    const offset = (this.orientation === 'vertical' ? e.offsetX : -e.offsetY) * (this.dir === 'rtl' ? -1 : 1);\n    this.#offset = this.#offset + offset;\n    this.#setInput(this.#offset);\n  }\n\n  #touchEnd() {\n    this.#offset = this.valueAsNumber;\n    this.#range.step = `${this.step}`;\n    this.#setChange(this.#offset);\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":";;;;;;;;;;AA0BO,IAAA,IAAA,cAA2B,EAA4C,EAAW,CAAC;;gBAqBxE,EAAU,CAAC,EAAO,CAAC;;CAEnC,KAAA,IAAa;AACX,SAAO,KAAK,WAAY,cAAc,QAAQ;;;kBAGrB;GACzB,KAAK;GACL,SAAS;GACT,aAAa,EACX,MAAM,UAAA;GAET;;CAED,KAAwC,IAAI,EAAqB,KAAK;CAOtE,KAAU;CAEV,SAAS;AACP,SAAO,CAAI,8EAGa,EAAU,KAAK,aAAa,KAAK,KAAK,OAAO,CAAC,sBAAoB,KAAK,IAAI,SAAO,KAAK,IAAI,oBAAkB,KAAK,cAAc,aAAW,MAAa,MAAA,EAAgB,EAAE,OAA4B,cAAc,CAAC,cAAY,MAAa,MAAA,EAAiB,EAAE,OAA4B,cAAc,CAAC,UAAQ,KAAK,KAAK;;CAKxV,cAAc;AAGZ,EAFA,OAAO,qBAlD4E,yBAKpC,cAKA,iBAKC,gBAqBf,MAAA,EAAqB,MAetD,KAAK,QAAQ,KAAK,SAAS,IAC3B,MAAA,IAAe,KAAK;;CAGtB,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,WAAW,OAAO;;CAGzB,aAAa,GAAuB;AAKlC,EAJA,MAAM,aAAa,EAAM,EACzB,KAAK,iBAAiB,yBAAyB,MAAA,GAAkB,CAAC,EAClE,KAAK,iBAAiB,uBAAuB,MAAA,GAAgB,CAAC,EAC9D,KAAK,iBAAiB,oBAAoB,MAAqB,MAAA,EAAgB,EAAE,EAAmB,EACpG,KAAK,iBAAiB,kBAAkB;AACjC,QAAK,cAAc,IAAI,YAAY,UAAU;IAAE,YAAY;IAAM,SAAS;IAAM,UAAU;IAAM,CAAC,CAAC,IAGvG,MAAA,GAAc;IACd;;CAGJ,KAAU;EACR,IAAM,IAAQ,KAAK,iBAAiB,KAAK,OAAO,KAAK,kBAAkB,KAAK,MAAM,KAAK,MAAM,KAAK;AAElG,EADA,MAAA,EAAe,EAAM,EACrB,MAAA,EAAgB,EAAM;;CAGxB,KAAc;AAGZ,EAFA,MAAA,EAAY,OAAO,KACnB,KAAK,WAAW,OAAO,IAAI,SAAS,EACpC,MAAA,IAAe,KAAK;;CAGtB,GAAW,GAAkB;EAC3B,IAAM,KAAU,KAAK,gBAAgB,aAAa,EAAE,UAAU,CAAC,EAAE,YAAY,KAAK,QAAQ,QAAQ,KAAK;AAEvG,EADA,MAAA,KAA8B,GAC9B,MAAA,EAAe,MAAA,EAAa;;CAG9B,KAAY;AAIV,EAHA,MAAA,IAAe,KAAK,eACpB,MAAA,EAAY,OAAO,GAAG,KAAK,QAC3B,MAAA,EAAgB,MAAA,EAAa,EAC7B,KAAK,WAAW,OAAO,OAAO,SAAS;;CAGzC,GAAU,GAAe;AAEvB,EADA,MAAA,EAAkB,EAAM,EACxB,KAAK,oBAAoB;;CAG3B,GAAW,GAAe;AAExB,EADA,MAAA,EAAkB,EAAM,EACxB,KAAK,qBAAqB;;CAG5B,GAAa,GAAe;AAC1B,EAAI,KAAS,KAAK,OAAO,KAAS,KAAK,QACrC,KAAK,gBAAgB;;;GA9GxB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,OAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,OAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAqBzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAzC5B,GAAyB,CAAA,EAAA,EAAA"}

package/dist/scoped/index.d.ts

@@ -0,0 +1,11 @@
+import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
+import { LitElement } from 'lit';
+type LitElementConstructor = new (...args: any[]) => LitElement;
+/**
+ * @deprecated
+ * Utility for applying mixin recursively to all Elements, used for scoped element registry polyfills and shims
+ */
+export declare function scope(element: LitElementConstructor & {
+    elementDefinitions?: Record<string, LitElementConstructor>;
+}, Mixin?: typeof ScopedRegistryHost): typeof element;
+export {};

package/dist/scoped/index.js

@@ -0,0 +1,16 @@
+import { ScopedRegistryHost as e } from "@lit-labs/scoped-registry-mixin";
+//#region src/scoped/index.ts
+function t(n, r = e) {
+	return class extends r(n) {
+		static {
+			this.elementDefinitions = Object.entries({ ...n.elementDefinitions }).reduce((e, [n, i]) => ({
+				...e,
+				[n]: t(i, r)
+			}), {});
+		}
+	};
+}
+//#endregion
+export { t as scope };
+
+//# sourceMappingURL=index.js.map

package/dist/scoped/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/scoped/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';\nimport type { LitElement } from 'lit';\n\ntype LitElementConstructor = new (...args: any[]) => LitElement; // eslint-disable-line @typescript-eslint/no-explicit-any\n\n/**\n * @deprecated\n * Utility for applying mixin recursively to all Elements, used for scoped element registry polyfills and shims\n */\nexport function scope(\n  element: LitElementConstructor & { elementDefinitions?: Record<string, LitElementConstructor> },\n  Mixin = ScopedRegistryHost\n): typeof element {\n  return class extends Mixin(element) {\n    static elementDefinitions = Object.entries({ ...element.elementDefinitions }).reduce(\n      (p, [tag, el]) => ({ ...p, [tag]: scope(el, Mixin) }),\n      {}\n    );\n  } as typeof element;\n}\n"],"mappings":";;AAYA,SAAgB,EACd,GACA,IAAQ,GACQ;AAChB,QAAO,cAAc,EAAM,EAAQ,CAAC;;6BACN,OAAO,QAAQ,EAAE,GAAG,EAAQ,oBAAoB,CAAC,CAAC,QAC3E,GAAG,CAAC,GAAK,QAAS;IAAE,GAAG;KAAI,IAAM,EAAM,GAAI,EAAM;IAAE,GACpD,EAAE,CACH"}

package/dist/search/define.d.ts

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

package/dist/search/define.js

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

package/dist/search/define.js.map

@@ -0,0 +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/core/internal';\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,EAAO,EACd,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/search/index.d.ts

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

package/dist/search/index.js

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

package/dist/search/search.d.ts

@@ -0,0 +1,38 @@
+import { ContainerElement } from '../internal';
+import { Control } from '../forms';
+import { IconButton } from '../icon-button';
+/**
+ * @element nve-search
+ * @description A search is a control that enables users to enter text to search.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/search
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --cursor
+ * @csspart icon-button - The icon button element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
+ */
+export declare class Search extends Control implements ContainerElement {
+    /**
+     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
+     * Use when embedding within another container such as a toolbar.
+     */
+    container?: 'flat';
+    /**
+     * Sets the rounded visual style of the input.
+     */
+    rounded: boolean;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    protected get prefixContent(): import('lit-html').TemplateResult<1>;
+}

package/dist/search/search.examples.js

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

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

@@ -0,0 +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"}

package/dist/search/search.examples.json

@@ -0,0 +1,55 @@
+{
+  "element": "nve-search",
+  "entrypoint": "@nvidia-elements/core/search/search.examples.json",
+  "items": [
+    {
+      "id": "core-search_default",
+      "name": "Default",
+      "template": "<nve-search>\n  <label>label</label>\n  <input type=\"search\" />\n  <nve-control-message>message</nve-control-message>\n</nve-search>\n",
+      "summary": "Basic search input with label and message for query entry and filtering data.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-search_inline",
+      "name": "Inline",
+      "template": "<nve-search rounded>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-search>\n",
+      "summary": "Rounded search input without visible label for compact inline placement in headers or toolbars.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-search_datalist",
+      "name": "Datalist",
+      "template": "<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",
+      "summary": "Search input with datalist providing autocomplete suggestions for quick query selection from recent searches.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-search_vertical",
+      "name": "Vertical",
+      "template": "<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  <nve-search>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\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  <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",
+      "summary": "Search inputs with vertical layout including validation states for disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-search_horizontal",
+      "name": "Horizontal",
+      "template": "<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  <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  <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  <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",
+      "summary": "Search inputs with horizontal layout showing validation states for inline forms and compact layouts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/search/search.js

@@ -0,0 +1,6 @@
+//#region 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

@@ -0,0 +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":""}

package/dist/search/search2.js

@@ -0,0 +1,45 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
+import { useStyles as n } from "../internal/styles/index.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
+var l = class extends r {
+	constructor(...e) {
+		super(...e), this.rounded = !1;
+	}
+	static {
+		this.styles = n([
+			...r.styles,
+			a,
+			o
+		]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-search",
+			version: "0.0.3"
+		};
+	}
+	static {
+		this.elementDefinitions = { [i.metadata.tag]: i };
+	}
+	get prefixContent() {
+		return s`<nve-icon-button part="icon-button" icon-name="search" container="inline" aria-hidden="true" readonly="readonly"></nve-icon-button>`;
+	}
+};
+e([c({
+	type: String,
+	reflect: !0
+})], l.prototype, "container", void 0), e([c({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "rounded", void 0), l = e([t()], l);
+//#endregion
+export { l as Search };
+
+//# sourceMappingURL=search2.js.map

package/dist/search/search2.js.map

@@ -0,0 +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 * @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":";;;;;;;;;;AA4BO,IAAA,IAAA,cAAqB,EAAoC;;8BAUR;;;gBAEtC,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;GAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,IAAc,gBAAgB;AAC5B,SAAO,CAAI;;;GAnBZ,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAX5C,GAAgB,CAAA,EAAA,EAAA"}

package/dist/select/define.d.ts

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

package/dist/select/define.js

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

package/dist/select/define.js.map

@@ -0,0 +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/core/internal';\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,EAAO,EACd,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/select/index.d.ts

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

package/dist/select/index.js

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

package/dist/select/select.d.ts

@@ -0,0 +1,65 @@
+import { PropertyValues, nothing } from 'lit';
+import { Control } from '../forms';
+import { Icon } from '../icon';
+import { Menu, MenuItem } from '../menu';
+import { Dropdown } from '../dropdown';
+import { Tag } from '../tag';
+/**
+ * @element nve-select
+ * @description A select is a control that enables users to select an option from a list of options.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/select
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --border-bottom
+ * @cssprop --cursor
+ * @cssprop --font-weight
+ * @cssprop --text-align
+ * @cssprop --scroll-height
+ * @cssprop --width
+ * @cssprop --control-width
+ * @cssprop --max-width
+ * @cssprop --min-width
+ * @cssprop --box-shadow
+ * @cssprop --max-height
+ * @cssprop --text-transform
+ * @csspart tag
+ * @csspart menu - The dropdown menu element
+ * @csspart menu-item - The menu item elements
+ * @csspart icon - The icon element
+ * @csspart caret - The caret/chevron icon element
+ * @csspart dropdown - The dropdown popup element
+ * @slot - Select input element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+ */
+export declare class Select extends Control {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Icon.metadata.tag]: typeof Icon;
+        [Dropdown.metadata.tag]: typeof Dropdown;
+        [Menu.metadata.tag]: typeof Menu;
+        [MenuItem.metadata.tag]: typeof MenuItem;
+        [Tag.metadata.tag]: typeof Tag;
+    };
+    /** Flat container option applies when embedding the component within another containing element */
+    container?: 'flat' | 'inline';
+    /** Updates internal string values for internationalization. */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    protected get prefixContent(): typeof nothing | import('lit-html').TemplateResult<1>;
+    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): Promise<void>;
+    disconnectedCallback(): void;
+    updated(props: PropertyValues<this>): Promise<void>;
+}

package/dist/select/select.examples.js

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

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

@@ -0,0 +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"}