@nvidia-elements/core 2.20.1 → 2.20.3

package/dist/color/color2.js

@@ -1,7 +1,7 @@
 import { appendRootNodeStyle as e, openEyeDropper as t } from "../internal/utils/dom.js";
 import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../internal/styles/index.js";
-import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as a } from "../forms/control/control2.js";
 import { IconButton as o } from "../icon-button/icon-button2.js";
 import { inputStyles as s } from "../input/input2.js";
@@ -9,7 +9,7 @@ import c from "./color.global.js";
 import l from "./color.js";
 import { html as u } from "lit";
 import { property as d } from "lit/decorators/property.js";
-//#region src/color/color.ts
+// src/color/color.ts
 var f = { expand: "expand" }, p = class extends a {
 	get i18nDefaults() {
 		return f;
@@ -24,7 +24,7 @@ var f = { expand: "expand" }, p = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -47,7 +47,6 @@ i([d({
 	type: String,
 	reflect: !0
 })], p.prototype, "container", void 0), p = i([n()], p);
-//#endregion
 export { p as Color };
 
 //# sourceMappingURL=color2.js.map

package/dist/color/color2.js.map

@@ -1 +1 @@
-{"version":3,"file":"color2.js","names":[],"sources":["../../src/color/color.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 { appendRootNodeStyle, openEyeDropper, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport globalStyles from './color.global.css?inline';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './color.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-color\n * @description A color picker is a control that enables users to choose a color value.\n * @documentation https://nvidia.github.io/elements/docs/elements/color/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/color\n * @cssprop --cursor\n * @csspart icon-button - The eye dropper icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color\n */\n@scopedRegistry()\nexport class Color extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\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  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-color',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .role=${'button'} .ariaLabel=${this.i18n.expand} icon-name=\"dropper\" container=\"inline\" @click=${() => this.#select()}></nve-icon-button>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    if (this.input.value === '#000000') {\n      const color = getComputedStyle(this).getPropertyValue('--background').trim();\n      if (color.includes('#')) {\n        this.input.value = color;\n      }\n    }\n  }\n\n  async #select() {\n    this.input.value = await openEyeDropper();\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,IAAe,EACnB,QAAQ,SACV,GAaa,IAAN,cAAoB,EAAoC;CAC7D,IAAuB,eAA6B;EAClD,OAAO;CACT;;EAQgB,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,8CAA6C,SAAS,gBAAc,KAAK,KAAK,OAAO,yDAAuD,KAAK,GAAQ,EAAE;CACxK;CAEA,oBAAoB;EAGlB,IAFA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GAClC,KAAK,MAAM,UAAU,WAAW;GAClC,IAAM,IAAQ,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,cAAc,CAAC,CAAC,KAAK;GAC3E,AAAI,EAAM,SAAS,GAAG,MACpB,KAAK,MAAM,QAAQ;EAEvB;CACF;CAEA,MAAM,KAAU;EAGd,AAFA,KAAK,MAAM,QAAQ,MAAM,EAAe,GACxC,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;AAjCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"color2.js","names":["styles","globalStyles","_decorate","__decorate","color_global_default","color_default","i18nDefaults","Color","Control","useStyles","inputStyles","IconButton","#select","appendRootNodeStyle","color","openEyeDropper","property","scopedRegistry"],"sources":["../../src/color/color.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 { appendRootNodeStyle, openEyeDropper, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport globalStyles from './color.global.css?inline';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './color.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-color\n * @description A color picker is a control that enables users to choose a color value.\n * @documentation https://nvidia.github.io/elements/docs/elements/color/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/color\n * @cssprop --cursor\n * @csspart icon-button - The eye dropper icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color\n */\n@scopedRegistry()\nexport class Color extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\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  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-color',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .role=${'button'} .ariaLabel=${this.i18n.expand} icon-name=\"dropper\" container=\"inline\" @click=${() => this.#select()}></nve-icon-button>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    if (this.input.value === '#000000') {\n      const color = getComputedStyle(this).getPropertyValue('--background').trim();\n      if (color.includes('#')) {\n        this.input.value = color;\n      }\n    }\n  }\n\n  async #select() {\n    this.input.value = await openEyeDropper();\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAMM,IAAe,EACnB,QAAQ,SACV,GAaaC,IAAN,cAAoBC,EAAoC;CAC7D,IAAuB,eAA6B;EAClD,OAAOF;CACT;;EAQgB,KAAA,SAAAG,EAAU;GAAC,GAAGD,EAAQ;GAAQE;GAAaV;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBW,EAAW,SAAS,MAAMA,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,8CAA6C,SAAS,gBAAc,KAAK,KAAK,OAAO,yDAAuD,KAAKC,GAAQ,EAAE;CACxK;CAEA,oBAAoB;EAGlB,IAFA,MAAM,kBAAkB,GACxBC,EAAoB,MAAMZ,CAAY,GAClC,KAAK,MAAM,UAAU,WAAW;GAClC,IAAMa,IAAQ,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,cAAc,CAAC,CAAC,KAAK;GAC3E,AAAIA,EAAM,SAAS,GAAG,MACpB,KAAK,MAAM,QAAQA;EAEvB;CACF;CAEA,MAAMF,KAAU;EAGd,AAFA,KAAK,MAAM,QAAQ,MAAMG,EAAe,GACxC,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;AAjCGb,EAAA,CAAAc,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAAL,EAAA,CAAAe,EAAe,CAAA,GAAAV,CAAA"}

package/dist/color/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Color as r } from "./color2.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/color/define.js.map

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

package/dist/color/index.js

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

package/dist/combobox/combobox.examples.js

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

package/dist/combobox/combobox.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.examples.js","names":[],"sources":["../../src/combobox/combobox.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { choose } from 'lit/directives/choose.js';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/combobox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tag/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Elements/Combobox',\n  component: 'nve-combobox',\n};\n\n/**\n * @summary Basic combobox with search input and datalist options for filtering and selection.\n */\nexport const Default = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.\n * @tags test-case\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Flat container style with prefix icon for compact inline filtering interfaces.\n */\nexport const Flat = () => {\n  return html`\n  <nve-combobox container=\"flat\">\n    <nve-icon name=\"filter\" slot=\"prefix-icon\"></nve-icon>\n    <input type=\"search\" aria-label=\"search\">\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Single select allows users only to select from a predefined list\n * of options. Invalid input is automatically cleared. All options are visible\n * on focus until typing begins for filtering.\n */\nexport const Select = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Multi select allows users to select many options from a\n * predefined list. The select `value` will only reflect the first selected value.\n * To get all selected options check the `selected` property on each `<option>`\n * or the select property `selectedOptions`.\n * On focus all options will show until the user starts typing. Select is the\n * selection value of the combobox. The input is the filter value.\n */\nexport const MultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select that reorders selected options before unselected options after the combobox closes. Use when long filter lists need selected values to stay easy to review.\n */\nexport const SelectedFirst = () => {\n  return html`\n  <nve-combobox id=\"combobox-selected-first\" style=\"width: 500px; --scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    const combobox = document.querySelector('#combobox-selected-first');\n    const select = combobox.querySelector('select');\n    const optionOrder = new Map([...select.options].map((option, index) => [option, index]));\n    combobox.addEventListener('open', () => {\n      const selectedOrder = new Map([...select.selectedOptions].map((option, index) => [option, index]));\n      Array.from(select.options).sort((a, b) =>\n        Number(b.selected) - Number(a.selected) ||\n        a.selected && b.selected ? selectedOrder.get(a) - selectedOrder.get(b) : optionOrder.get(a) - optionOrder.get(b)\n      ).forEach(option => select.append(option));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Combobox with an empty initial value using a disabled placeholder option. Use when no default selection exists and the user must make an explicit choice.\n */\nexport const EmptyDefault = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option disabled selected></option>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox options with display labels that differ from underlying values. Use when option values are IDs or codes but users need to see human-readable text in the input.\n */\nexport const Label = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with labeled options where display text differs from option values.\n */\nexport const LabelMultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Overflow behavior where many tags collapse into a simple text label when the parent container is too narrow.\n * @tags test-case\n */\nexport const Overflow = () => {\n  return html`\n  <nve-combobox style=\"width: 250px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option selected value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox with option to wrap tags when the parent container is too narrow. Input will span below the tags.\n * @tags test-case\n */\nexport const OverflowWrap = () => {\n  return html`\n  <nve-combobox tag-layout=\"wrap\" style=\"width: 400px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option selected value=\"session\"></option>\n      <option selected value=\"configuration\"></option>\n      <option selected value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox handling of long option text in constrained width containers.\n * @tags test-case\n */\nexport const PopoverOverflow = () => {\n  return html`\n  <nve-combobox style=\"width: 100px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"really-long-text-option-that-keeps-going\"></option>  \n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with reset functionality via icon button and footer button to clear all selections.\n */\nexport const Reset = () => {\n  return html`\n  <nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n    <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    document.querySelector('#combobox-reset nve-icon-button').addEventListener('click', e => e.target.parentElement.reset());\n    document.querySelector('#combobox-reset nve-button').addEventListener('click', e => e.target.parentElement.reset());\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with footer action button for extra operations on selected items.\n */\nexport const Footer = () => {\n  return html`\n  <nve-combobox style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <nve-button slot=\"footer\" container=\"flat\">action</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.\n */\nexport const SelectAll = () => {\n  return html`\n  <nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n      <nve-button container=\"flat\">Select All</nve-button>\n      <nve-button container=\"flat\">Deselect All</nve-button>\n    </div>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    const combobox = document.querySelector('#combobox-select-all');\n    const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll('nve-button'));\n\n    selectAll.addEventListener('click', () => combobox.selectAll());\n    deselectAll.addEventListener('click', () => combobox.reset());\n    combobox.addEventListener('change', e => console.log(e.target.selectedOptions));\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with disabled options to show unavailable choices while maintaining visual context.\n */\nexport const DisabledOptions = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\" disabled></option>\n      <option value=\"priority\" disabled></option>\n      <option value=\"date\" disabled></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select without built-in tags, using external tag management for custom selection display.\n */\nexport const NoTags = () => {\n  return html`\n  <form id=\"hidden-tags\" nve-layout=\"column gap:lg align:stretch\">\n    <nve-combobox tag-layout=\"hidden\">\n      <label>label</label>\n      <input type=\"search\">\n      <select multiple>\n        <option selected value=\"status\"></option>\n        <option selected value=\"priority\"></option>\n        <option value=\"date\"></option>\n        <option value=\"session\"></option>\n        <option value=\"configuration\"></option>\n        <option value=\"contains\"></option>\n      </select>\n    </nve-combobox>\n    <div id=\"tags\" nve-layout=\"row gap:xs\">\n    </div>\n  </form>\n  <script type=\"module\">\n    const form = document.querySelector('#hidden-tags');\n    const select = form.querySelector('select');\n    const tags = form.querySelector('#tags');\n    updateTags();\n    select.addEventListener('change', e => updateTags());\n    tags.addEventListener('close', e => {\n      Array.from(select.options).find(o => o.value === e.target.value).selected = false;\n      updateTags();\n    });\n    function updateTags() {\n      tags.innerHTML = '';\n      Array.from(select.selectedOptions).forEach(o => tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + '</nve-tag>');\n    }\n  </script>\n  `\n};\n\n/**\n * @summary Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.\n * @tags pattern\n */\nexport const CreateOptions = () => {\n  return html`\n<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n  <label>Tags</label>\n  <input type=\"search\" placeholder=\"Select or create a tag…\" />\n  <select multiple>\n    <option value=\"Go\">Go</option>\n    <option value=\"Rust\">Rust</option>\n    <option value=\"Python\">Python</option>\n    <option value=\"JavaScript\">JavaScript</option>\n    <option value=\"TypeScript\">TypeScript</option>\n    <option value=\"Java\">Java</option>\n    <option value=\"C#\">C#</option>\n    <option value=\"C++\">C++</option>\n    <option value=\"C\">C</option>\n    <option value=\"PHP\">PHP</option>\n  </select>\n  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById('creatable-combo');\n  const select = combobox.querySelector('select');\n\n  combobox.addEventListener('create', (e) => {\n    const option = document.createElement('option');\n    option.value = e.detail.value;\n    option.textContent = e.detail.value;\n    option.selected = true;\n    select.appendChild(option);\n  });\n</script>\n  `\n};\n\n/**\n * @summary Complete form integration showing combobox with form submission, reset, and programmatic value setting.\n */\nexport const Form = () => {\n  return html`\n<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\">\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n\n<script type=\"module\">\n  const form = document.querySelector('form');\n  const select = document.querySelector('select');\n  const input = document.querySelector('input');\n  const btn = document.querySelector('[type=button]');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log('input: ', formData.get('input'));\n    console.log('select: ', formData.get('select'));\n    console.log('selectedOptions: ', Array.from(select.selectedOptions).map(o => o.value));\n  });\n\n  btn.addEventListener('click', () => {\n    select.value = 'status';\n    select.options[0].selected = true;\n    input.value = 'test';\n  });\n</script>\n  `\n};\n\n/**\n * @summary Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.\n * @tags pattern\n */\nexport const DynamicTypeaheadSearch = () => {\n  return html`\n<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combobox = document.getElementById('combobox');\n  const input = combobox.querySelector('input');\n  const datalist = combobox.querySelector('datalist');\n\n  let controller = null;\n  input.addEventListener('input', async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = '';\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join('');\n    } catch (err) {\n      if (err.name !== 'AbortError') datalist.innerHTML = '';\n    }\n  });\n\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve(['A100 GPU', 'H100 GPU', 'H200 GPU', 'DGX A100', 'DGX H100', 'CUDA Toolkit'].filter((v) => v.toLowerCase().startsWith(query.toLowerCase())));\n      }, 500);\n      signal.addEventListener('abort', () => {\n        clearTimeout(timer);\n        reject(new DOMException('Aborted', 'AbortError'));\n      });\n    });\n  }\n</script>\n  `\n}\n\n/**\n * @summary Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.\n * @tags pattern\n */\nexport const InfiniteScroll = () => {\n  return html`\n<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n  <label>GPU Models</label>\n  <input type=\"search\" placeholder=\"Scroll to load more…\" />\n  <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combo = document.getElementById('infinite-scroll-combo');\n  const datalist = document.getElementById('infinite-scroll-list');\n  let loading = false;\n\n  async function loadBatch() {\n    if (loading) return;\n    loading = true;\n    const items = await new Promise(resolve => setTimeout(() => resolve(Array.from({ length: 100 }, (_, i) => 'GPU Model ' + (datalist.options.length + i + 1))), 300));\n    datalist.append(...items.map(v => new Option(v)));\n    loading = false;\n  }\n\n  loadBatch();\n\n  combo.addEventListener('scroll', (e) => {\n    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n      loadBatch();\n    }\n  });\n</script>\n  `\n}\n\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const Performance = () => {\n  return html`\n<nve-combobox id=\"performance-combobox\">\n  <input type=\"search\" aria-label=\"performance test\">\n  <datalist></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const datalist = document.querySelector('#performance-combobox datalist');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  datalist.append(...options);\n</script>`\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-slotted-elements */\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const PerformanceSelect = () => {\n  return html`\n<div nve-layout=\"pad:lg\">\n  <nve-combobox id=\"performance-combobox\">\n    <input type=\"search\" aria-label=\"performance test\">\n    <select multiple></select>\n  </nve-combobox>\n</div>\n<script type=\"module\">\n  const select = document.querySelector('#performance-combobox select');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  select.append(...options);\n</script>`\n}\n\n/**\n * @summary Dynamic options with datalist and select variants of combobox.\n * @tags test-case\n */\nexport const DynamicOptions = () => {\n  return html`\n<nve-combobox id=\"dynamic-options-combobox\">\n  <input type=\"search\" aria-label=\"performance test\" />\n  <datalist>\n    <option>default</option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  let i = 0;\n  setInterval(function() {\n    if (i > 100) clearInterval(interval);\n    const datalist = document.querySelector(\"#dynamic-options-combobox datalist\");\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    datalist.append(option);\n    i++;\n    console.log('append');\n  }, 1000);\n</script>\n  `\n}\n\n/**\n * @summary Interactive demo showing progressive filter chips with dynamic combobox creation for complex filtering interfaces.\n * @tags test-case\n */\nexport const FilterDemo = {\n  render: () => html`<combobox-demo></combobox-demo>`\n}\n\nconst schema = {\n  status: {\n    type: 'select',\n    options: ['success', 'failure', 'processing'],\n    initial: 'success'\n  },\n  priority: {\n    type: 'select',\n    options: ['high', 'medium', 'low'],\n    initial: 'high'\n  },\n  created: {\n    type: 'date',\n    initial: new Date()\n  },\n  progress: {\n    type: 'number',\n    initial: 0\n  },\n  sessionId: {\n    type: 'text',\n    initial: ''\n  }\n};\n\n\nclass ComboboxDemo extends LitElement {\n  @state() private value = [{ name: '', value: '' }];\n\n  render() {\n    return html`\n      <nve-button id=\"filter-btn\" popovertarget=\"one\" ?pressed=${!!this.value.filter(v => v.name.length).length}><nve-icon name=\"filter\"></nve-icon>filters</nve-button>\n      <nve-dropdown id=\"one\" anchor=\"filter-btn\" style=\"--min-width: 400px; --min-height: 500px;\">\n        <progressive-filter-demo @change=${e => this.value = e.detail} .value=${this.value} .schema=${schema}></progressive-filter-demo>\n      </nve-dropdown>\n      <pre style=\"margin-top: 300px\">${JSON.stringify(this.value.filter(v => v.name.length), null, 2)}</pre>\n    `;\n  }\n}\n\ncustomElements.get('combobox-demo') || customElements.define('combobox-demo', ComboboxDemo);\n\nclass ProgressiveFilterDemo extends LitElement {\n  static styles = [unsafeCSS(`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--nve-ref-space-xs);\n    }\n\n    nve-progressive-filter-chip {\n      width: 100%;\n    }\n  `)];\n\n  @property({ type: Object }) schema = {};\n\n  @property({ type: Array }) value: { name: string, value: string }[] = [{ name: '', value: '' }];\n\n  get #unusedFilters() {\n    return Object.entries(this.schema).filter(([key]) => !this.value.find(f => f.name === key));\n  }\n\n  render() {\n    return html`\n      ${this.value.map(filter => html`\n      <nve-progressive-filter-chip closable @close=${() => this.#removeFilter(filter)}>\n        <nve-combobox>\n          <span slot=\"prefix-icon\"></span>\n          <input type=\"search\" placeholder=\"filter\" .value=${filter.name} @change=${e => this.#createfilter(e.target.value, filter)} aria-label=\"filter\" />\n          <datalist>${this.#unusedFilters.map(([key]) => html`<option .value=${key}>${key}</option>`)}</datalist>\n        </nve-combobox>\n        ${choose(this.schema[filter.name]?.type, [\n      ['text', () => html`<nve-combobox><input type=\"text\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} placeholder=\"value\" aria-label=\"filter value\" /></nve-combobox>`],\n      ['number', () => html`<nve-combobox><input type=\"number\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-combobox>`],\n      ['date', () => html`<nve-date><input type=\"date\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-date>`],\n      ['select', () => html`<nve-select><select @change=${e => this.#updateFilter(e.target.value, filter)} value=${filter.value} aria-label=\"filter value\">${this.schema[filter.name]?.options?.map(v => html`<option value=${v}>${v}</option>`)}</select></nve-select>`]\n    ], () => html`<nve-combobox><input type=\"text\" placeholder=\"value\" disabled aria-label=\"filter value\" /></nve-combobox>`)}\n      </nve-progressive-filter-chip>`)}\n      <nve-button container=\"flat\" @click=${this.#addFilter} .disabled=${this.#unusedFilters.length === 0 || !!this.value.find(v => v.name === '')} style=\"align: center; margin-top: 12px;\">\n        <nve-icon name=\"add\"></nve-icon> Add Filter\n      </nve-button>\n    `;\n  }\n\n  #addFilter() {\n    this.value = [...this.value, { name: '', value: '' }];\n    this.#valueChange();\n  }\n\n  #removeFilter(filter: { name: string, value: string }) {\n    this.value = this.value.filter(o => o.name !== filter.name);\n    this.#valueChange();\n  }\n\n  #updateFilter(value: string, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { ...filter, value } : v);\n    this.#valueChange();\n  }\n\n  #createfilter(name, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { name, value: this.schema[name]?.initial ?? '' } : v);\n    this.#valueChange();\n  }\n\n  #valueChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }));\n  }\n}\n\ncustomElements.get('progressive-filter-demo') || customElements.define('progressive-filter-demo', ProgressiveFilterDemo);\n"],"mappings":";AAGA,IAAA,IAAe"}
+{"version":3,"file":"combobox.examples.js","names":["combobox_examples_default"],"sources":["../../src/combobox/combobox.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { choose } from 'lit/directives/choose.js';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/combobox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tag/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Elements/Combobox',\n  component: 'nve-combobox',\n};\n\n/**\n * @summary Basic combobox with search input and datalist options for filtering and selection.\n */\nexport const Default = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.\n * @tags test-case\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Flat container style with prefix icon for compact inline filtering interfaces.\n */\nexport const Flat = () => {\n  return html`\n  <nve-combobox container=\"flat\">\n    <nve-icon name=\"filter\" slot=\"prefix-icon\"></nve-icon>\n    <input type=\"search\" aria-label=\"search\">\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Single select allows users only to select from a predefined list\n * of options. Invalid input is automatically cleared. All options are visible\n * on focus until typing begins for filtering.\n */\nexport const Select = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Multi select allows users to select many options from a\n * predefined list. The select `value` will only reflect the first selected value.\n * To get all selected options check the `selected` property on each `<option>`\n * or the select property `selectedOptions`.\n * On focus all options will show until the user starts typing. Select is the\n * selection value of the combobox. The input is the filter value.\n */\nexport const MultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select that reorders selected options before unselected options after the combobox closes. Use when long filter lists need selected values to stay easy to review.\n */\nexport const SelectedFirst = () => {\n  return html`\n  <nve-combobox id=\"combobox-selected-first\" style=\"width: 500px; --scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    const combobox = document.querySelector('#combobox-selected-first');\n    const select = combobox.querySelector('select');\n    const optionOrder = new Map([...select.options].map((option, index) => [option, index]));\n    combobox.addEventListener('open', () => {\n      const selectedOrder = new Map([...select.selectedOptions].map((option, index) => [option, index]));\n      Array.from(select.options).sort((a, b) =>\n        Number(b.selected) - Number(a.selected) ||\n        a.selected && b.selected ? selectedOrder.get(a) - selectedOrder.get(b) : optionOrder.get(a) - optionOrder.get(b)\n      ).forEach(option => select.append(option));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Combobox with an empty initial value using a disabled placeholder option. Use when no default selection exists and the user must make an explicit choice.\n */\nexport const EmptyDefault = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option disabled selected></option>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox options with display labels that differ from underlying values. Use when option values are IDs or codes but users need to see human-readable text in the input.\n */\nexport const Label = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with labeled options where display text differs from option values.\n */\nexport const LabelMultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Overflow behavior where many tags collapse into a simple text label when the parent container is too narrow.\n * @tags test-case\n */\nexport const Overflow = () => {\n  return html`\n  <nve-combobox style=\"width: 250px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option selected value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox with option to wrap tags when the parent container is too narrow. Input will span below the tags.\n * @tags test-case\n */\nexport const OverflowWrap = () => {\n  return html`\n  <nve-combobox tag-layout=\"wrap\" style=\"width: 400px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option selected value=\"session\"></option>\n      <option selected value=\"configuration\"></option>\n      <option selected value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox handling of long option text in constrained width containers.\n * @tags test-case\n */\nexport const PopoverOverflow = () => {\n  return html`\n  <nve-combobox style=\"width: 100px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"really-long-text-option-that-keeps-going\"></option>  \n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with reset functionality via icon button and footer button to clear all selections.\n */\nexport const Reset = () => {\n  return html`\n  <nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n    <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    document.querySelector('#combobox-reset nve-icon-button').addEventListener('click', e => e.target.parentElement.reset());\n    document.querySelector('#combobox-reset nve-button').addEventListener('click', e => e.target.parentElement.reset());\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with footer action button for extra operations on selected items.\n */\nexport const Footer = () => {\n  return html`\n  <nve-combobox style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <nve-button slot=\"footer\" container=\"flat\">action</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.\n */\nexport const SelectAll = () => {\n  return html`\n  <nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n      <nve-button container=\"flat\">Select All</nve-button>\n      <nve-button container=\"flat\">Deselect All</nve-button>\n    </div>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    const combobox = document.querySelector('#combobox-select-all');\n    const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll('nve-button'));\n\n    selectAll.addEventListener('click', () => combobox.selectAll());\n    deselectAll.addEventListener('click', () => combobox.reset());\n    combobox.addEventListener('change', e => console.log(e.target.selectedOptions));\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with disabled options to show unavailable choices while maintaining visual context.\n */\nexport const DisabledOptions = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\" disabled></option>\n      <option value=\"priority\" disabled></option>\n      <option value=\"date\" disabled></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select without built-in tags, using external tag management for custom selection display.\n */\nexport const NoTags = () => {\n  return html`\n  <form id=\"hidden-tags\" nve-layout=\"column gap:lg align:stretch\">\n    <nve-combobox tag-layout=\"hidden\">\n      <label>label</label>\n      <input type=\"search\">\n      <select multiple>\n        <option selected value=\"status\"></option>\n        <option selected value=\"priority\"></option>\n        <option value=\"date\"></option>\n        <option value=\"session\"></option>\n        <option value=\"configuration\"></option>\n        <option value=\"contains\"></option>\n      </select>\n    </nve-combobox>\n    <div id=\"tags\" nve-layout=\"row gap:xs\">\n    </div>\n  </form>\n  <script type=\"module\">\n    const form = document.querySelector('#hidden-tags');\n    const select = form.querySelector('select');\n    const tags = form.querySelector('#tags');\n    updateTags();\n    select.addEventListener('change', e => updateTags());\n    tags.addEventListener('close', e => {\n      Array.from(select.options).find(o => o.value === e.target.value).selected = false;\n      updateTags();\n    });\n    function updateTags() {\n      tags.innerHTML = '';\n      Array.from(select.selectedOptions).forEach(o => tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + '</nve-tag>');\n    }\n  </script>\n  `\n};\n\n/**\n * @summary Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.\n * @tags pattern\n */\nexport const CreateOptions = () => {\n  return html`\n<nve-combobox id=\"creatable-combo\" behavior-create style=\"--scroll-height: 220px\">\n  <label>Tags</label>\n  <input type=\"search\" placeholder=\"Select or create a tag…\" />\n  <select multiple>\n    <option value=\"Go\">Go</option>\n    <option value=\"Rust\">Rust</option>\n    <option value=\"Python\">Python</option>\n    <option value=\"JavaScript\">JavaScript</option>\n    <option value=\"TypeScript\">TypeScript</option>\n    <option value=\"Java\">Java</option>\n    <option value=\"C#\">C#</option>\n    <option value=\"C++\">C++</option>\n    <option value=\"C\">C</option>\n    <option value=\"PHP\">PHP</option>\n  </select>\n  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>\n</nve-combobox>\n<script type=\"module\">\n  const combobox = document.getElementById('creatable-combo');\n  const select = combobox.querySelector('select');\n\n  combobox.addEventListener('create', (e) => {\n    const option = document.createElement('option');\n    option.value = e.detail.value;\n    option.textContent = e.detail.value;\n    option.selected = true;\n    select.appendChild(option);\n  });\n</script>\n  `\n};\n\n/**\n * @summary Complete form integration showing combobox with form submission, reset, and programmatic value setting.\n */\nexport const Form = () => {\n  return html`\n<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\">\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n\n<script type=\"module\">\n  const form = document.querySelector('form');\n  const select = document.querySelector('select');\n  const input = document.querySelector('input');\n  const btn = document.querySelector('[type=button]');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log('input: ', formData.get('input'));\n    console.log('select: ', formData.get('select'));\n    console.log('selectedOptions: ', Array.from(select.selectedOptions).map(o => o.value));\n  });\n\n  btn.addEventListener('click', () => {\n    select.value = 'status';\n    select.options[0].selected = true;\n    input.value = 'test';\n  });\n</script>\n  `\n};\n\n/**\n * @summary Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.\n * @tags pattern\n */\nexport const DynamicTypeaheadSearch = () => {\n  return html`\n<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combobox = document.getElementById('combobox');\n  const input = combobox.querySelector('input');\n  const datalist = combobox.querySelector('datalist');\n\n  let controller = null;\n  input.addEventListener('input', async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = '';\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join('');\n    } catch (err) {\n      if (err.name !== 'AbortError') datalist.innerHTML = '';\n    }\n  });\n\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve(['A100 GPU', 'H100 GPU', 'H200 GPU', 'DGX A100', 'DGX H100', 'CUDA Toolkit'].filter((v) => v.toLowerCase().startsWith(query.toLowerCase())));\n      }, 500);\n      signal.addEventListener('abort', () => {\n        clearTimeout(timer);\n        reject(new DOMException('Aborted', 'AbortError'));\n      });\n    });\n  }\n</script>\n  `\n}\n\n/**\n * @summary Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.\n * @tags pattern\n */\nexport const InfiniteScroll = () => {\n  return html`\n<nve-combobox id=\"infinite-scroll-combo\" style=\"--scroll-height: 200px\">\n  <label>GPU Models</label>\n  <input type=\"search\" placeholder=\"Scroll to load more…\" />\n  <datalist id=\"infinite-scroll-list\"></datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combo = document.getElementById('infinite-scroll-combo');\n  const datalist = document.getElementById('infinite-scroll-list');\n  let loading = false;\n\n  async function loadBatch() {\n    if (loading) return;\n    loading = true;\n    const items = await new Promise(resolve => setTimeout(() => resolve(Array.from({ length: 100 }, (_, i) => 'GPU Model ' + (datalist.options.length + i + 1))), 300));\n    datalist.append(...items.map(v => new Option(v)));\n    loading = false;\n  }\n\n  loadBatch();\n\n  combo.addEventListener('scroll', (e) => {\n    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {\n      loadBatch();\n    }\n  });\n</script>\n  `\n}\n\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const Performance = () => {\n  return html`\n<nve-combobox id=\"performance-combobox\">\n  <input type=\"search\" aria-label=\"performance test\">\n  <datalist></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const datalist = document.querySelector('#performance-combobox datalist');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  datalist.append(...options);\n</script>`\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-slotted-elements */\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const PerformanceSelect = () => {\n  return html`\n<div nve-layout=\"pad:lg\">\n  <nve-combobox id=\"performance-combobox\">\n    <input type=\"search\" aria-label=\"performance test\">\n    <select multiple></select>\n  </nve-combobox>\n</div>\n<script type=\"module\">\n  const select = document.querySelector('#performance-combobox select');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  select.append(...options);\n</script>`\n}\n\n/**\n * @summary Dynamic options with datalist and select variants of combobox.\n * @tags test-case\n */\nexport const DynamicOptions = () => {\n  return html`\n<nve-combobox id=\"dynamic-options-combobox\">\n  <input type=\"search\" aria-label=\"performance test\" />\n  <datalist>\n    <option>default</option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  let i = 0;\n  setInterval(function() {\n    if (i > 100) clearInterval(interval);\n    const datalist = document.querySelector(\"#dynamic-options-combobox datalist\");\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    datalist.append(option);\n    i++;\n    console.log('append');\n  }, 1000);\n</script>\n  `\n}\n\n/**\n * @summary Interactive demo showing progressive filter chips with dynamic combobox creation for complex filtering interfaces.\n * @tags test-case\n */\nexport const FilterDemo = {\n  render: () => html`<combobox-demo></combobox-demo>`\n}\n\nconst schema = {\n  status: {\n    type: 'select',\n    options: ['success', 'failure', 'processing'],\n    initial: 'success'\n  },\n  priority: {\n    type: 'select',\n    options: ['high', 'medium', 'low'],\n    initial: 'high'\n  },\n  created: {\n    type: 'date',\n    initial: new Date()\n  },\n  progress: {\n    type: 'number',\n    initial: 0\n  },\n  sessionId: {\n    type: 'text',\n    initial: ''\n  }\n};\n\n\nclass ComboboxDemo extends LitElement {\n  @state() private value = [{ name: '', value: '' }];\n\n  render() {\n    return html`\n      <nve-button id=\"filter-btn\" popovertarget=\"one\" ?pressed=${!!this.value.filter(v => v.name.length).length}><nve-icon name=\"filter\"></nve-icon>filters</nve-button>\n      <nve-dropdown id=\"one\" anchor=\"filter-btn\" style=\"--min-width: 400px; --min-height: 500px;\">\n        <progressive-filter-demo @change=${e => this.value = e.detail} .value=${this.value} .schema=${schema}></progressive-filter-demo>\n      </nve-dropdown>\n      <pre style=\"margin-top: 300px\">${JSON.stringify(this.value.filter(v => v.name.length), null, 2)}</pre>\n    `;\n  }\n}\n\ncustomElements.get('combobox-demo') || customElements.define('combobox-demo', ComboboxDemo);\n\nclass ProgressiveFilterDemo extends LitElement {\n  static styles = [unsafeCSS(`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--nve-ref-space-xs);\n    }\n\n    nve-progressive-filter-chip {\n      width: 100%;\n    }\n  `)];\n\n  @property({ type: Object }) schema = {};\n\n  @property({ type: Array }) value: { name: string, value: string }[] = [{ name: '', value: '' }];\n\n  get #unusedFilters() {\n    return Object.entries(this.schema).filter(([key]) => !this.value.find(f => f.name === key));\n  }\n\n  render() {\n    return html`\n      ${this.value.map(filter => html`\n      <nve-progressive-filter-chip closable @close=${() => this.#removeFilter(filter)}>\n        <nve-combobox>\n          <span slot=\"prefix-icon\"></span>\n          <input type=\"search\" placeholder=\"filter\" .value=${filter.name} @change=${e => this.#createfilter(e.target.value, filter)} aria-label=\"filter\" />\n          <datalist>${this.#unusedFilters.map(([key]) => html`<option .value=${key}>${key}</option>`)}</datalist>\n        </nve-combobox>\n        ${choose(this.schema[filter.name]?.type, [\n      ['text', () => html`<nve-combobox><input type=\"text\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} placeholder=\"value\" aria-label=\"filter value\" /></nve-combobox>`],\n      ['number', () => html`<nve-combobox><input type=\"number\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-combobox>`],\n      ['date', () => html`<nve-date><input type=\"date\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-date>`],\n      ['select', () => html`<nve-select><select @change=${e => this.#updateFilter(e.target.value, filter)} value=${filter.value} aria-label=\"filter value\">${this.schema[filter.name]?.options?.map(v => html`<option value=${v}>${v}</option>`)}</select></nve-select>`]\n    ], () => html`<nve-combobox><input type=\"text\" placeholder=\"value\" disabled aria-label=\"filter value\" /></nve-combobox>`)}\n      </nve-progressive-filter-chip>`)}\n      <nve-button container=\"flat\" @click=${this.#addFilter} .disabled=${this.#unusedFilters.length === 0 || !!this.value.find(v => v.name === '')} style=\"align: center; margin-top: 12px;\">\n        <nve-icon name=\"add\"></nve-icon> Add Filter\n      </nve-button>\n    `;\n  }\n\n  #addFilter() {\n    this.value = [...this.value, { name: '', value: '' }];\n    this.#valueChange();\n  }\n\n  #removeFilter(filter: { name: string, value: string }) {\n    this.value = this.value.filter(o => o.name !== filter.name);\n    this.#valueChange();\n  }\n\n  #updateFilter(value: string, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { ...filter, value } : v);\n    this.#valueChange();\n  }\n\n  #createfilter(name, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { name, value: this.schema[name]?.initial ?? '' } : v);\n    this.#valueChange();\n  }\n\n  #valueChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }));\n  }\n}\n\ncustomElements.get('progressive-filter-demo') || customElements.define('progressive-filter-demo', ProgressiveFilterDemo);\n"],"mappings":";AAGA,IAAAA,IAAe"}

package/dist/combobox/combobox.js

@@ -1,6 +1,5 @@
-//#region src/combobox/combobox.css?inline
+// src/combobox/combobox.css?inline
 var e = ":host{--scroll-height: 25vh;--_input-background: var(--background);contain:initial}[name=caret]{right:var(--nve-ref-size-300);align-self:center;pointer-events:none;position:absolute}[internal-host]:has(nve-menu:focus-within) [input]{outline:0!important}:host(:state(selected)){--font-weight: var(--nve-ref-font-weight-semibold)}:host(:state(multiple)){--padding: 0 var(--nve-ref-size-100)}:host(:state(multiple)) [input]{padding:var(--padding)}.tags{width:fit-content;display:flex;gap:var(--nve-ref-space-xxs);align-items:center}.tags-label{padding:0 var(--nve-ref-size-200);font-size:var(--font-size);cursor:var(--cursor);font-weight:var(--font-weight);text-wrap:nowrap;display:none;align-items:center;pointer-events:none}:host(:state(multiple-overflow):not([tag-layout=\"wrap\"])) .tags{opacity:0;pointer-events:none;position:absolute}:host(:state(multiple-overflow):not([tag-layout=\"wrap\"])) .tags-label{display:flex}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}::slotted(select){display:none!important}: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}[name=prefix-icon]{display:contents}nve-dropdown{--padding: var(--nve-ref-size-200)}nve-menu{contain:content;--max-height: var(--scroll-height)}nve-menu-item{--text-transform: initial;contain:content;content-visibility:auto}[internal-host]:has([matches]) nve-menu-item{--color: var(--nve-sys-text-muted-color)}nve-menu-item nve-icon{--color: inherit}input[type=checkbox]{accent-color:var(--nve-sys-accent-secondary-background)}nve-checkbox:not(:state(disabled)){--border-color: var(--nve-ref-border-color-emphasis)}nve-menu-item:not(:state(selected)) nve-icon[name=check]{opacity:0}slot:not([name]),slot[name*=option-]{display:contents}[matches]{font-weight:var(--nve-ref-font-weight-medium);color:var(--nve-sys-text-emphasis-color)}[name=footer]{display:none;min-height:var(--nve-ref-size-900);margin:calc(var(--nve-ref-size-200) * -1);width:calc(100% + calc(var(--nve-ref-size-200) * 2));border-top:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);padding:0 var(--nve-ref-size-200);gap:var(--nve-ref-space-sm);justify-content:center;align-items:center}:host(:state(footer-content)) [name=footer]{display:flex}nve-menu-item[part=create-option]{--color: var(--nve-sys-text-muted-color);font-style:italic;span:first-letter{text-transform:uppercase}}:host([tag-layout=\"wrap\"]:state(multiple-overflow)){[input]{min-height:var(--height);height:fit-content;flex-direction:column;width:100%}.tags{padding-block-start:var(--nve-ref-size-50);flex-wrap:wrap}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=combobox.js.map

package/dist/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/combobox/combobox.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  --scroll-height: 25vh;\n  --_input-background: var(--background);\n  contain: initial;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\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(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n.tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--nve-ref-space-xxs);\n  align-items: center;\n}\n\n.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  text-wrap: nowrap;\n  display: none;\n  align-items: center;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow):not([tag-layout='wrap'])) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow):not([tag-layout='wrap'])) .tags-label {\n  display: flex;\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::slotted(select) {\n  display: none !important;\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\n[name='prefix-icon'] {\n  display: contents;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  contain: content;\n  --max-height: var(--scroll-height);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\n[internal-host]:has([matches]) nve-menu-item {\n  --color: var(--nve-sys-text-muted-color);\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\ninput[type='checkbox'] {\n  accent-color: var(--nve-sys-accent-secondary-background);\n}\n\nnve-checkbox:not(:state(disabled)) {\n  --border-color: var(--nve-ref-border-color-emphasis);\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n[matches] {\n  font-weight: var(--nve-ref-font-weight-medium);\n  color: var(--nve-sys-text-emphasis-color);\n}\n\n[name='footer'] {\n  display: none;\n  min-height: var(--nve-ref-size-900);\n  margin: calc(var(--nve-ref-size-200) * -1);\n  width: calc(100% + calc(var(--nve-ref-size-200) * 2));\n  border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  padding: 0 var(--nve-ref-size-200);\n  gap: var(--nve-ref-space-sm);\n  justify-content: center;\n  align-items: center;\n}\n\n:host(:state(footer-content)) [name='footer'] {\n  display: flex;\n}\n\nnve-menu-item[part='create-option'] {\n  --color: var(--nve-sys-text-muted-color);\n  font-style: italic;\n\n  span::first-letter {\n    text-transform: uppercase;\n  }\n}\n\n:host([tag-layout='wrap']:state(multiple-overflow)) {\n  [input] {\n    min-height: var(--height);\n    height: fit-content;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .tags {\n    padding-block-start: var(--nve-ref-size-50);\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"combobox.js","names":["combobox_default"],"sources":["../../src/combobox/combobox.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  --scroll-height: 25vh;\n  --_input-background: var(--background);\n  contain: initial;\n}\n\n[name='caret'] {\n  right: var(--nve-ref-size-300);\n  align-self: center;\n  pointer-events: none;\n  position: absolute;\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(:state(multiple)) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\n:host(:state(multiple)) [input] {\n  padding: var(--padding);\n}\n\n.tags {\n  width: fit-content;\n  display: flex;\n  gap: var(--nve-ref-space-xxs);\n  align-items: center;\n}\n\n.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  text-wrap: nowrap;\n  display: none;\n  align-items: center;\n  pointer-events: none;\n}\n\n:host(:state(multiple-overflow):not([tag-layout='wrap'])) .tags {\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n:host(:state(multiple-overflow):not([tag-layout='wrap'])) .tags-label {\n  display: flex;\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::slotted(select) {\n  display: none !important;\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\n[name='prefix-icon'] {\n  display: contents;\n}\n\nnve-dropdown {\n  --padding: var(--nve-ref-size-200);\n}\n\nnve-menu {\n  contain: content;\n  --max-height: var(--scroll-height);\n}\n\nnve-menu-item {\n  --text-transform: initial;\n  contain: content;\n  content-visibility: auto;\n}\n\n[internal-host]:has([matches]) nve-menu-item {\n  --color: var(--nve-sys-text-muted-color);\n}\n\nnve-menu-item nve-icon {\n  --color: inherit;\n}\n\ninput[type='checkbox'] {\n  accent-color: var(--nve-sys-accent-secondary-background);\n}\n\nnve-checkbox:not(:state(disabled)) {\n  --border-color: var(--nve-ref-border-color-emphasis);\n}\n\nnve-menu-item:not(:state(selected)) nve-icon[name='check'] {\n  opacity: 0;\n}\n\nslot:not([name]),\nslot[name*='option-'] {\n  display: contents;\n}\n\n[matches] {\n  font-weight: var(--nve-ref-font-weight-medium);\n  color: var(--nve-sys-text-emphasis-color);\n}\n\n[name='footer'] {\n  display: none;\n  min-height: var(--nve-ref-size-900);\n  margin: calc(var(--nve-ref-size-200) * -1);\n  width: calc(100% + calc(var(--nve-ref-size-200) * 2));\n  border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  padding: 0 var(--nve-ref-size-200);\n  gap: var(--nve-ref-space-sm);\n  justify-content: center;\n  align-items: center;\n}\n\n:host(:state(footer-content)) [name='footer'] {\n  display: flex;\n}\n\nnve-menu-item[part='create-option'] {\n  --color: var(--nve-sys-text-muted-color);\n  font-style: italic;\n\n  span::first-letter {\n    text-transform: uppercase;\n  }\n}\n\n:host([tag-layout='wrap']:state(multiple-overflow)) {\n  [input] {\n    min-height: var(--height);\n    height: fit-content;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .tags {\n    padding-block-start: var(--nve-ref-size-50);\n    flex-wrap: wrap;\n  }\n}\n"],"mappings":""}

package/dist/combobox/combobox2.js

@@ -3,7 +3,7 @@ import { getDisplayValue as t, getElementUpdate as n, getPropertyChanges as r }
 import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
 import { useStyles as a } from "../internal/styles/index.js";
 import { createLightDismiss as o } from "../internal/utils/keynav.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 { inputStyles as u } from "../input/input2.js";
@@ -16,7 +16,7 @@ import g from "./combobox.js";
 import { html as _, isServer as v, nothing as y } from "lit";
 import { property as b } from "lit/decorators/property.js";
 import { ifDefined as x } from "lit/directives/if-defined.js";
-//#region src/combobox/combobox.ts
+// src/combobox/combobox.ts
 var S = {
 	select: "select",
 	selected: "selected",
@@ -39,7 +39,7 @@ var S = {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -287,7 +287,6 @@ s([b({
 	reflect: !0,
 	attribute: "behavior-create"
 })], C.prototype, "behaviorCreate", void 0), C = s([i()], C);
-//#endregion
 export { C as Combobox };
 
 //# sourceMappingURL=combobox2.js.map

package/dist/combobox/combobox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox2.js","names":[],"sources":["../../src/combobox/combobox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, isServer, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport {\n  createLightDismiss,\n  focusElementTimeout,\n  getDisplayValue,\n  getElementUpdate,\n  getPropertyChanges,\n  scopedRegistry,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport styles from './combobox.css?inline';\n\nconst comboboxI18nDefaults = {\n  select: 'select',\n  selected: 'selected',\n  noResults: 'no results',\n  create: 'create'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-combobox\n * @description An editable combobox with autocomplete behavior and selection support.\n * @documentation https://nvidia.github.io/elements/docs/elements/combobox/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/combobox\n * @slot - default slot for an input and a datalist/select element\n * @slot prefix-icon - slot for icon before the input\n * @slot footer - slot for dropdown footer content\n * @cssprop --scroll-height\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --width\n * @cssprop --border-color\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag - The tag element for selected items\n * @csspart dropdown - The dropdown popup element\n * @csspart menu - The menu element\n * @csspart menu-item - The menu item elements\n * @csspart checkbox - The checkbox element\n * @csspart icon - The icon element\n * @event scroll - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @event create - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`.\n * @csspart create-option - The menu item element for creating new options\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/\n */\n@scopedRegistry()\nexport class Combobox extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return comboboxI18nDefaults;\n  }\n\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  /** Manage inline tag rendering for many-item select */\n  @property({ type: String, reflect: true, attribute: 'tag-layout' }) tagLayout: 'hidden' | 'wrap';\n\n  /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-create' }) behaviorCreate: boolean;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-combobox',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Checkbox.metadata.tag]: Checkbox,\n    [Icon.metadata.tag]: Icon,\n    [Dropdown.metadata.tag]: Dropdown,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Tag.metadata.tag]: Tag\n  };\n\n  /**\n   * If a <select> exists, on focus all options show by default.\n   * If a <datalist> exists, on focus only options that match the current input value show.\n   */\n\n  #_datalist: HTMLSelectElement | null;\n  get #datalist(): HTMLSelectElement | null {\n    if (!this.#_datalist) {\n      this.#_datalist = this.shadowRoot\n        ? ((this.shadowRoot\n            .querySelector('slot')\n            ?.assignedElements({ flatten: true })\n            ?.find(i => i.tagName === 'DATALIST' || i.tagName === 'SELECT') ??\n            this.querySelector('datalist, select')) as HTMLSelectElement)\n        : null;\n    }\n    return this.#_datalist;\n  }\n\n  #_select: HTMLSelectElement | null;\n  get #select(): HTMLSelectElement | null {\n    if (!this.#_select) {\n      this.#_select = this.shadowRoot\n        ? ((this.shadowRoot\n            .querySelector('slot')\n            ?.assignedElements({ flatten: true })\n            ?.find(i => i.tagName === 'SELECT') ?? this.querySelector('select')) as HTMLSelectElement)\n        : null;\n    }\n    return this.#_select;\n  }\n\n  get #options(): HTMLOptionElement[] {\n    return Array.from(this.#datalist?.options ? this.#datalist.options : []);\n  }\n\n  get #items() {\n    return Array.from(this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag));\n  }\n\n  get #dropdown() {\n    return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n  }\n\n  get #input() {\n    return this.shadowRoot!.querySelector('[input]');\n  }\n\n  get #tags() {\n    return this.shadowRoot!.querySelector('.tags');\n  }\n\n  get #hasAvailableOptions() {\n    return this.#options.find(o => !o.disabled && !o.hidden);\n  }\n\n  get #hasFooterContent() {\n    return !!this.querySelector('[slot=\"footer\"]');\n  }\n\n  get #showCreateItem(): boolean {\n    if (!this.behaviorCreate || this.input?.disabled) return false;\n    const value = this.input?.value.trim();\n    if (!value) return false;\n    return !this.#findOptionMatch(value);\n  }\n\n  #findOptionMatch(value: string): HTMLOptionElement | undefined {\n    const lower = value.toLowerCase();\n    return this.#options.find(o => {\n      const display = o.textContent!.trim() || o.value;\n      return display.toLowerCase() === lower || o.value.toLowerCase() === lower;\n    });\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n  #syncPending = false;\n\n  protected _associateDatalist = false;\n\n  protected get prefixContent() {\n    return this.#select?.multiple && !this.#tagLayoutIsHidden\n      ? html`\n    <div class=\"tags-label\" aria-hidden=\"true\">${this.#select.selectedOptions.length} ${this.i18n.selected}</div>\n    <div class=\"tags\">\n      ${Array.from<HTMLOptionElement>(this.#select.selectedOptions).map(\n        o => html`\n      <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o)}>${getDisplayValue(o)}</nve-tag>`\n      )}\n    </div>`\n      : html`<slot name=\"prefix-icon\"></slot>`;\n  }\n\n  get #tagLayoutIsHidden() {\n    return this.tagLayout === 'hidden';\n  }\n\n  get #largeOptionsList() {\n    return (this.#datalist?.options?.length ?? 0) > 50;\n  }\n\n  get #isPristine() {\n    return !this._internals.states.has('dirty');\n  }\n\n  protected get suffixContent() {\n    if (isServer) return nothing;\n    const options = this.#options;\n    const largeOptionsList = this.#largeOptionsList;\n    const isPristine = this.#isPristine;\n    const visibleOptions = options.filter(o => !o.hidden).filter(o => !(o.value === '' && o.disabled));\n    const hasNoResults = visibleOptions.filter(o => !o.disabled).length === 0;\n    const showCreateItem = this.#showCreateItem;\n    return html`\n    <nve-dropdown part=\"dropdown\" .popoverType=${'manual'} .modal=${false} @open=${this.#openDropdown} @close=${this.#closeDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n      <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n        ${visibleOptions.map(\n          o => html`\n          <nve-menu-item part=\"menu-item\" .option=${getDisplayValue(o)} role=\"option\" @click=${() => this.#selectValue(o)} ?selected=${o.selected} aria-selected=${o.selected ? 'true' : 'false'} ?disabled=${o.disabled} aria-label=${getDisplayValue(o)}>\n            ${this.#getOptionCheckbox(o)}\n            ${largeOptionsList || isPristine ? getDisplayValue(o) : html`<span role=\"presentation\">${(o.label ? o.label : o.value)?.split('')?.map((c, ci) => html`<span ?matches=${this.#characterAtIndexMatches(c, ci)}>${c}</span>`)}</span>`}\n          </nve-menu-item>`\n        )}\n        ${hasNoResults && !showCreateItem ? html`<nve-menu-item part=\"menu-item\" .value=${''} disabled>${this.i18n.noResults}</nve-menu-item>` : nothing}\n        ${\n          showCreateItem\n            ? html`<nve-menu-item part=\"create-option\" role=\"button\" aria-label=${`${this.i18n.create} \"${this.input?.value.trim()}\"`} @click=${this.#onCreateItemClick}>\n          <nve-icon part=\"icon\" name=\"add\" size=\"sm\"></nve-icon> \"${this.input?.value.trim()}\"\n        </nve-menu-item>`\n            : nothing\n        }\n      </nve-menu>\n      <slot name=\"footer\"></slot>\n    </nve-dropdown>`;\n  }\n\n  #getOptionCheckbox(o: HTMLOptionElement) {\n    const select = this.#select;\n    if (select?.multiple && this.#largeOptionsList) {\n      return html`<input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} />`;\n    } else if (select?.multiple) {\n      /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n      return html`<nve-checkbox part=\"checkbox\"><input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} /></nve-checkbox>`;\n    } else if (select) {\n      return html`<nve-icon part=\"icon\" name=\"check\" size=\"sm\"></nve-icon>`;\n    } else {\n      return nothing;\n    }\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.shadowRoot!.addEventListener('slotchange', () => this.#onSlottedChildMutation());\n    await this.updateComplete;\n    this.#setupSingleSelect();\n    this.#setupMultipleSelect();\n    this.#setupAutoCompleteKeyEvents();\n    this.#setupMenuItemUpdateEvents();\n    this.#setupOpenKeyEvents();\n    this.#setupOverflowListener();\n    this.#setupSlotStates();\n    await this.#setupLightDismiss();\n    this.input.setAttribute('list', '');\n    this.input.autocomplete = 'off';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    const observer = new MutationObserver(() => this.#onSlottedChildMutation());\n    observer.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['selected', 'disabled', 'value'],\n      characterData: true\n    });\n    this.#observers.push(observer);\n    this.#setupOptionObservers();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#cleanupOptionObservers();\n  }\n\n  reset() {\n    this.#dropdown!.hidePopover();\n    if (this.#select) {\n      this.#select.selectedIndex = -1;\n    }\n    super.reset();\n  }\n\n  /** Select all options provided */\n  selectAll() {\n    this.#options.forEach(o => (o.selected = true));\n    this.requestUpdate();\n    this.#select!.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select!.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setupSingleSelect() {\n    if (this.#select && !this.#select.multiple) {\n      this.#setupInitialValue();\n      this.#syncSelectValueStates();\n    }\n  }\n\n  #setupMultipleSelect() {\n    if (this.#select?.multiple) {\n      this.#setupInitialValue();\n      this.#syncSelectValueStates();\n      this._internals.states.add('multiple');\n    }\n  }\n\n  #setupInitialValue() {\n    const selected = Array.from(this.#select!.selectedOptions).find((o: HTMLOptionElement) =>\n      o.hasAttribute('selected')\n    );\n    if (selected && !this.#select!.multiple && !this.input.defaultValue) {\n      this.input.value = getDisplayValue(selected);\n    }\n  }\n\n  #updateInputValue() {\n    if (!this.#select!.multiple && !this.input.defaultValue) {\n      this.input.value = getDisplayValue(\n        Array.from(this.#select!.selectedOptions).find(o => o.value === this.#select!.value)!\n      );\n    }\n  }\n\n  #syncSelectValueStates() {\n    this.#observers.push(\n      getElementUpdate(this.#select!, 'value', () => {\n        this.#updateInputValue();\n        this.requestUpdate();\n      })\n    );\n  }\n\n  #trackedOptions = new Map<HTMLOptionElement, ReturnType<typeof getPropertyChanges>>();\n\n  #setupOptionObservers() {\n    this.#_datalist = null;\n    this.#_select = null;\n    this.#syncOptionSelectedStates();\n    this.requestUpdate();\n  }\n\n  #cleanupOptionObservers() {\n    this.#trackedOptions.forEach(cleanup => cleanup?.());\n    this.#trackedOptions.clear();\n  }\n\n  #syncOptionSelectedStates() {\n    if (!this.isConnected) return;\n    this.#options.forEach(o => {\n      if (!this.#trackedOptions.has(o)) {\n        this.#trackedOptions.set(\n          o,\n          getPropertyChanges(o, 'selected', () => this.requestUpdate())\n        );\n      }\n    });\n  }\n\n  #onSlottedChildMutation() {\n    if (!this.#syncPending) {\n      this.#syncPending = true;\n      queueMicrotask(() => {\n        this.#syncPending = false;\n        if (!this.isConnected) return;\n        this.#_datalist = null;\n        this.#_select = null;\n        this.#cleanupStaleTrackedOptions();\n        this.#syncOptionSelectedStates();\n        this.requestUpdate();\n      });\n    }\n  }\n\n  #cleanupStaleTrackedOptions() {\n    const currentOptions = new Set(this.#options);\n    for (const [tracked, cleanup] of this.#trackedOptions) {\n      if (!currentOptions.has(tracked)) {\n        cleanup?.();\n        this.#trackedOptions.delete(tracked);\n      }\n    }\n  }\n\n  #openDropdown() {\n    this.#dropdown!.hidden = false;\n  }\n\n  #closeDropdown() {\n    this.#dropdown!.hidden = true;\n    this._internals.states.delete('dirty');\n    this.#validateSingleSelectValue();\n  }\n\n  #setupAutoCompleteKeyEvents() {\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      const value = this.input.value.trim();\n\n      if (e.code === 'Tab') {\n        if (this.#hasAvailableOptions && this.#dropdown!.matches(':popover-open') && value !== '') {\n          e.preventDefault();\n          // the menu item option property caches/stores the option value instead of value to prevent unnecessary lit lifecycle updates for each menu item\n          this.#setInputValue((this.#items[0] as MenuItem & { option: string }).option);\n          this.#setSelectValue(\n            this.#options.find(\n              o => (o.label ? o.label : o.value) === (this.#items[0] as MenuItem & { option: string }).option\n            )!\n          );\n        }\n        this.#dropdown!.hidePopover();\n      }\n\n      if (e.code === 'Enter' && this.behaviorCreate && !this.input.disabled && value) {\n        const match = this.#findOptionMatch(value);\n        if (match) {\n          this.#selectValue(match);\n        } else {\n          e.preventDefault();\n          e.stopImmediatePropagation();\n          this.#dispatchCreate();\n        }\n      }\n    });\n  }\n\n  #setupMenuItemUpdateEvents() {\n    this.input.addEventListener('input', () => this.#filterOptions());\n    this.shadowRoot!.addEventListener('slotchange', () => this.#filterOptions());\n  }\n\n  async #setupLightDismiss() {\n    const dropdown = this.#dropdown!;\n    await dropdown.updateComplete;\n    const options = {\n      element: dropdown.shadowRoot!.querySelector<HTMLElement>('[internal-host]')!,\n      focusElement: this.input\n    };\n    createLightDismiss(options, () => {\n      if (this.#dropdown!.matches(':popover-open')) {\n        this.#dropdown!.hidePopover();\n      }\n    });\n  }\n\n  #setupOpenKeyEvents() {\n    this.#tags?.addEventListener('pointerup', () => {\n      if (this.tagLayout !== 'wrap') return;\n      this.input.focus();\n      setTimeout(() => this.#openListBox(), 0);\n    });\n\n    this.input.addEventListener('pointerdown', () => {\n      this.#openListBox();\n    });\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (e.code !== 'Tab' && e.code !== 'Escape') {\n        this.#openListBox();\n      }\n\n      if (e?.code === 'ArrowDown' && (this.getRootNode() as ShadowRoot).activeElement === this.input) {\n        this.#dropdown!.tabIndex = 0;\n        this.#items[0]?.focus();\n        e.preventDefault();\n      }\n    });\n  }\n\n  #selectValue(option: { selected?: boolean; label?: string; value?: string }) {\n    if (!this.#select?.multiple) {\n      this.#setInputValue(getDisplayValue(option));\n      this.#dropdown!.hidePopover();\n      focusElementTimeout(this.input);\n    }\n\n    if (this.#select) {\n      option.selected = !option.selected;\n      this.#setSelectValue(option);\n    }\n\n    this.requestUpdate();\n  }\n\n  #onCreateItemClick() {\n    this.#dispatchCreate();\n  }\n\n  #dispatchCreate() {\n    const value = this.input.value.trim();\n    if (value) {\n      this.dispatchEvent(new CustomEvent('create', { detail: { value }, bubbles: true, composed: true }));\n      this.input.value = '';\n      this.#dropdown!.hidePopover();\n      focusElementTimeout(this.input);\n      this.requestUpdate();\n    }\n  }\n\n  #characterAtIndexMatches(character: string, index: number) {\n    if (this.#hasAvailableOptions) {\n      return this.input.value.toLowerCase()[index]?.toLowerCase() === character.toLowerCase();\n    }\n    return false;\n  }\n\n  #filterOptions() {\n    this.#options.forEach(option => {\n      const hasLabel = option.textContent!.trim().length;\n      if (hasLabel) {\n        const matchesLabel = option.textContent!.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n        option.hidden = !matchesLabel;\n      } else {\n        const matchesValue = option.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n        option.hidden = !matchesValue;\n      }\n    });\n    this.requestUpdate();\n  }\n\n  #openListBox() {\n    if (!this.input.disabled && !this.#dropdown!.matches(':popover-open')) {\n      if (this.#select) {\n        this.#options.forEach(option => (option.hidden = false));\n        this.requestUpdate();\n      } else {\n        this.#filterOptions();\n      }\n      this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n      // explicitly provide source as the performance optimizations in the suffixContent getter prevent the dropdown from setting its anchor/trigger reliably\n      this.#dropdown!.showPopover({ source: this.#input as HTMLElement });\n      this.#dropdown!.tabIndex = -1;\n    }\n  }\n\n  #validateSingleSelectValue() {\n    const invalidInputValue =\n      this.#select &&\n      !this.#select.multiple &&\n      !this.#options.filter(o => !(o.value === '' && o.disabled)).find(o => getDisplayValue(o) === this.input.value);\n    if (invalidInputValue) {\n      this.#options.forEach(o => (o.selected = false));\n      this.#setInputValue('');\n      this.#setSelectValue({ value: '', selected: false });\n    }\n  }\n\n  #setInputValue(value: string) {\n    this.input.value = value;\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setSelectValue(option: { value?: string; selected?: boolean }) {\n    const found = [...this.#options, { value: '', selected: null as boolean | null }].find(\n      o => o.value === option.value\n    );\n    if (found) found.selected = option.selected ?? null;\n\n    if (this.#select && !this.#select.multiple) {\n      this.#select.value = option.value!;\n    }\n\n    this.#select?.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select?.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setupOverflowListener() {\n    if (this.#select?.multiple && !this.#tagLayoutIsHidden) {\n      if (this.#select.selectedOptions.length > 1) {\n        // only calculate initial overflow if many tags exist\n        this.#updateMultipleOverflow(this.#tags!.getBoundingClientRect().width);\n      }\n      const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n      this.#observers.push(observer);\n      observer.observe(this.#tags!);\n    }\n  }\n\n  #updateMultipleOverflow(tagWidth: number) {\n    const INPUT_MIN_WIDTH = 100;\n    if (this.#select?.multiple && tagWidth > this.#input!.getBoundingClientRect().width - INPUT_MIN_WIDTH) {\n      this._internals.states.add('multiple-overflow');\n    } else {\n      this._internals.states.delete('multiple-overflow');\n    }\n  }\n\n  #setupSlotStates() {\n    this.#setSlotStates();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#setSlotStates());\n  }\n\n  #setSlotStates() {\n    if (this.#hasFooterContent) {\n      this._internals.states.add('footer-content');\n    } else {\n      this._internals.states.delete('footer-content');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2BA,IAAM,IAAuB;CAC3B,QAAQ;CACR,UAAU;CACV,WAAW;CACX,QAAQ;AACV,GAqCa,IAAN,cAAuB,EAAoC;;EAoR9C,aAxKkC,KAAA,KAAA,CAAC,GACtC,KAAA,KAAA,IAEgB,KAAA,qBAAA,IAqKb,KAAA,qBAAA,IAAI,IAA8D;;CAnRpF,IAAuB,eAA6B;EAClD,OAAO;CACT;;EAcgB,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAS,SAAS,MAAM;IACxB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAI,SAAS,MAAM;EACtB;;CAOA;CACA,IAAI,KAAsC;EAUxC,OATA,AACE,KAAK,OAAa,KAAK,aACjB,KAAK,WACJ,cAAc,MAAM,CAAC,EACpB,iBAAiB,EAAE,SAAS,GAAK,CAAC,CAAC,EACnC,MAAK,MAAK,EAAE,YAAY,cAAc,EAAE,YAAY,QAAQ,KAC9D,KAAK,cAAc,kBAAkB,IACvC,MAEC,KAAK;CACd;CAEA;CACA,IAAI,KAAoC;EAStC,OARA,AACE,KAAK,OAAW,KAAK,aACf,KAAK,WACJ,cAAc,MAAM,CAAC,EACpB,iBAAiB,EAAE,SAAS,GAAK,CAAC,CAAC,EACnC,MAAK,MAAK,EAAE,YAAY,QAAQ,KAAK,KAAK,cAAc,QAAQ,IACpE,MAEC,KAAK;CACd;CAEA,IAAI,KAAgC;EAClC,OAAO,MAAM,KAAK,KAAK,IAAW,UAAU,KAAK,GAAU,UAAU,CAAC,CAAC;CACzE;CAEA,IAAI,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,WAAY,iBAA2B,EAAS,SAAS,GAAG,CAAC;CACtF;CAEA,IAAI,KAAY;EACd,OAAO,KAAK,WAAY,cAAwB,EAAS,SAAS,GAAG;CACvE;CAEA,IAAI,KAAS;EACX,OAAO,KAAK,WAAY,cAAc,SAAS;CACjD;CAEA,IAAI,KAAQ;EACV,OAAO,KAAK,WAAY,cAAc,OAAO;CAC/C;CAEA,IAAI,KAAuB;EACzB,OAAO,KAAK,GAAS,MAAK,MAAK,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM;CACzD;CAEA,IAAI,KAAoB;EACtB,OAAO,CAAC,CAAC,KAAK,cAAc,mBAAiB;CAC/C;CAEA,IAAI,KAA2B;EAC7B,IAAI,CAAC,KAAK,kBAAkB,KAAK,OAAO,UAAU,OAAO;EACzD,IAAM,IAAQ,KAAK,OAAO,MAAM,KAAK;EAErC,OADK,IACE,CAAC,KAAK,GAAiB,CAAK,IADhB;CAErB;CAEA,GAAiB,GAA8C;EAC7D,IAAM,IAAQ,EAAM,YAAY;EAChC,OAAO,KAAK,GAAS,MAAK,OACR,EAAE,YAAa,KAAK,KAAK,EAAE,MAAA,CAC5B,YAAY,MAAM,KAAS,EAAE,MAAM,YAAY,MAAM,CACrE;CACH;CAEA;CACA;CAIA,IAAc,gBAAgB;EAC5B,OAAO,KAAK,IAAS,YAAY,CAAC,KAAK,KACnC,CAAI,8CACqC,KAAK,GAAQ,gBAAgB,OAAO,GAAG,KAAK,KAAK,SAAS,0BAEnG,MAAM,KAAwB,KAAK,GAAQ,eAAe,CAAC,CAAC,KAC5D,MAAK,CAAI,+EACuD,EAAE,MAAM,kBAAgB,KAAK,GAAa,CAAC,EAAE,IAAG,EAAgB,CAAC,EAAE,WACrI,EAAE,UAEA,CAAI;CACV;CAEA,IAAI,KAAqB;EACvB,OAAO,KAAK,cAAc;CAC5B;CAEA,IAAI,KAAoB;EACtB,QAAQ,KAAK,IAAW,SAAS,UAAU,KAAK;CAClD;CAEA,IAAI,KAAc;EAChB,OAAO,CAAC,KAAK,WAAW,OAAO,IAAI,OAAO;CAC5C;CAEA,IAAc,gBAAgB;EAC5B,IAAI,GAAU,OAAO;EACrB,IAAM,IAAU,KAAK,IACf,IAAmB,KAAK,IACxB,IAAa,KAAK,IAClB,IAAiB,EAAQ,QAAO,MAAK,CAAC,EAAE,MAAM,CAAC,CAAC,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,GAC3F,IAAe,EAAe,QAAO,MAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,WAAW,GAClE,IAAiB,KAAK;EAC5B,OAAO,CAAI,+CACkC,SAAS,YAAU,GAAM,WAAS,KAAK,GAAc,YAAU,KAAK,GAAe,oBAAkB,KAAK,GAAsB,oHACzE,EAAU,KAAK,KAAK,MAAM,EAAE,IAC1H,EAAe,KACf,MAAK,CAAI,4CACiC,EAAgB,CAAC,EAAE,gCAA8B,KAAK,GAAa,CAAC,EAAE,eAAa,EAAE,SAAS,mBAAiB,EAAE,WAAW,SAAS,QAAQ,eAAa,EAAE,SAAS,gBAAc,EAAgB,CAAC,EAAE,IAC5O,KAAK,GAAmB,CAAC,EAAE,GAC3B,KAAoB,IAAa,EAAgB,CAAC,IAAI,CAAI,8BAA8B,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAA,EAAQ,MAAM,EAAE,CAAC,EAAE,KAAK,GAAG,MAAO,CAAI,mBAAkB,KAAK,GAAyB,GAAG,CAAE,EAAE,IAAG,EAAE,QAAQ,EAAE,SAAS,iBAEzO,EAAE,GACA,KAAgB,CAAC,IAAiB,CAAI,2CAA0C,GAAG,wBAAY,KAAK,KAAK,UAAU,oBAAoB,EAAQ,GAE/I,IACI,CAAI,iEAAgE,GAAG,KAAK,KAAK,OAAO,IAAI,KAAK,OAAO,MAAM,KAAK,EAAE,GAAG,YAAU,KAAK,GAAmB,2DACpG,KAAK,OAAO,MAAM,KAAK,EAAE,qBAE/E,EACL;CAIP;CAEA,GAAmB,GAAsB;EACvC,IAAM,IAAS,KAAK;EASlB,OARE,GAAQ,YAAY,KAAK,KACpB,CAAI,uDAAsD,EAAE,SAAS,eAAa,EAAE,SAAS,WAAS,EAAE,WAAW,UAAU,KAAA,EAAU,MACrI,GAAQ,WAEV,CAAI,qFAAoF,EAAE,SAAS,eAAa,EAAE,SAAS,WAAS,EAAE,WAAW,UAAU,KAAA,EAAU,qBACnK,IACF,CAAI,6DAEJ;CAEX;CAEA,MAAM,aAAa,GAA6B;EAa9C,AAZA,MAAM,aAAa,CAAK,GACxB,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAwB,CAAC,GACpF,MAAM,KAAK,gBACX,KAAK,GAAmB,GACxB,KAAK,GAAqB,GAC1B,KAAK,GAA4B,GACjC,KAAK,GAA2B,GAChC,KAAK,GAAoB,GACzB,KAAK,GAAuB,GAC5B,KAAK,GAAiB,GACtB,MAAM,KAAK,GAAmB,GAC9B,KAAK,MAAM,aAAa,QAAQ,EAAE,GAClC,KAAK,MAAM,eAAe;CAC5B;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,IAAM,IAAW,IAAI,uBAAuB,KAAK,GAAwB,CAAC;EAS1E,AARA,EAAS,QAAQ,MAAM;GACrB,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB;IAAC;IAAY;IAAY;GAAO;GACjD,eAAe;EACjB,CAAC,GACD,KAAK,GAAW,KAAK,CAAQ,GAC7B,KAAK,GAAsB;CAC7B;CAEA,uBAAuB;EAGrB,AAFA,MAAM,qBAAqB,GAC3B,KAAK,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC,GACzD,KAAK,GAAwB;CAC/B;CAEA,QAAQ;EAKN,AAJA,KAAK,GAAW,YAAY,GACxB,KAAK,OACP,KAAK,GAAQ,gBAAgB,KAE/B,MAAM,MAAM;CACd;CAGA,YAAY;EAIV,AAHA,KAAK,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAK,GAC9C,KAAK,cAAc,GACnB,KAAK,GAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAK,GAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAqB;EACnB,AAAI,KAAK,MAAW,CAAC,KAAK,GAAQ,aAChC,KAAK,GAAmB,GACxB,KAAK,GAAuB;CAEhC;CAEA,KAAuB;EACrB,AAAI,KAAK,IAAS,aAChB,KAAK,GAAmB,GACxB,KAAK,GAAuB,GAC5B,KAAK,WAAW,OAAO,IAAI,UAAU;CAEzC;CAEA,KAAqB;EACnB,IAAM,IAAW,MAAM,KAAK,KAAK,GAAS,eAAe,CAAC,CAAC,MAAM,MAC/D,EAAE,aAAa,UAAU,CAC3B;EACA,AAAI,KAAY,CAAC,KAAK,GAAS,YAAY,CAAC,KAAK,MAAM,iBACrD,KAAK,MAAM,QAAQ,EAAgB,CAAQ;CAE/C;CAEA,KAAoB;EAClB,AAAI,CAAC,KAAK,GAAS,YAAY,CAAC,KAAK,MAAM,iBACzC,KAAK,MAAM,QAAQ,EACjB,MAAM,KAAK,KAAK,GAAS,eAAe,CAAC,CAAC,MAAK,MAAK,EAAE,UAAU,KAAK,GAAS,KAAK,CACrF;CAEJ;CAEA,KAAyB;EACvB,KAAK,GAAW,KACd,EAAiB,KAAK,IAAU,eAAe;GAE7C,AADA,KAAK,GAAkB,GACvB,KAAK,cAAc;EACrB,CAAC,CACH;CACF;CAEA;CAEA,KAAwB;EAItB,AAHA,KAAK,KAAa,MAClB,KAAK,KAAW,MAChB,KAAK,GAA0B,GAC/B,KAAK,cAAc;CACrB;CAEA,KAA0B;EAExB,AADA,KAAK,GAAgB,SAAQ,MAAW,IAAU,CAAC,GACnD,KAAK,GAAgB,MAAM;CAC7B;CAEA,KAA4B;EACrB,KAAK,eACV,KAAK,GAAS,SAAQ,MAAK;GACzB,AAAK,KAAK,GAAgB,IAAI,CAAC,KAC7B,KAAK,GAAgB,IACnB,GACA,EAAmB,GAAG,kBAAkB,KAAK,cAAc,CAAC,CAC9D;EAEJ,CAAC;CACH;CAEA,KAA0B;EACxB,AAAK,KAAK,OACR,KAAK,KAAe,IACpB,qBAAqB;GACnB,KAAK,KAAe,IACf,KAAK,gBACV,KAAK,KAAa,MAClB,KAAK,KAAW,MAChB,KAAK,GAA4B,GACjC,KAAK,GAA0B,GAC/B,KAAK,cAAc;EACrB,CAAC;CAEL;CAEA,KAA8B;EAC5B,IAAM,IAAiB,IAAI,IAAI,KAAK,EAAQ;EAC5C,KAAK,IAAM,CAAC,GAAS,MAAY,KAAK,IACpC,AAAK,EAAe,IAAI,CAAO,MAC7B,IAAU,GACV,KAAK,GAAgB,OAAO,CAAO;CAGzC;CAEA,KAAgB;EACd,KAAK,GAAW,SAAS;CAC3B;CAEA,KAAiB;EAGf,AAFA,KAAK,GAAW,SAAS,IACzB,KAAK,WAAW,OAAO,OAAO,OAAO,GACrC,KAAK,GAA2B;CAClC;CAEA,KAA8B;EAC5B,KAAK,iBAAiB,YAAY,MAAqB;GACrD,IAAM,IAAQ,KAAK,MAAM,MAAM,KAAK;GAgBpC,IAdI,EAAE,SAAS,UACT,KAAK,MAAwB,KAAK,GAAW,QAAQ,eAAe,KAAK,MAAU,OACrF,EAAE,eAAe,GAEjB,KAAK,GAAgB,KAAK,GAAO,EAAE,CAAmC,MAAM,GAC5E,KAAK,GACH,KAAK,GAAS,MACZ,OAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAY,KAAK,GAAO,EAAE,CAAmC,MAC3F,CACF,IAEF,KAAK,GAAW,YAAY,IAG1B,EAAE,SAAS,WAAW,KAAK,kBAAkB,CAAC,KAAK,MAAM,YAAY,GAAO;IAC9E,IAAM,IAAQ,KAAK,GAAiB,CAAK;IACzC,AAAI,IACF,KAAK,GAAa,CAAK,KAEvB,EAAE,eAAe,GACjB,EAAE,yBAAyB,GAC3B,KAAK,GAAgB;GAEzB;EACF,CAAC;CACH;CAEA,KAA6B;EAE3B,AADA,KAAK,MAAM,iBAAiB,eAAe,KAAK,GAAe,CAAC,GAChE,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAe,CAAC;CAC7E;CAEA,MAAM,KAAqB;EACzB,IAAM,IAAW,KAAK;EACtB,MAAM,EAAS;EACf,IAAM,IAAU;GACd,SAAS,EAAS,WAAY,cAA2B,iBAAiB;GAC1E,cAAc,KAAK;EACrB;EACA,EAAmB,SAAe;GAChC,AAAI,KAAK,GAAW,QAAQ,eAAe,KACzC,KAAK,GAAW,YAAY;EAEhC,CAAC;CACH;CAEA,KAAsB;EAWpB,AAVA,KAAK,IAAO,iBAAiB,mBAAmB;GAC1C,KAAK,cAAc,WACvB,KAAK,MAAM,MAAM,GACjB,iBAAiB,KAAK,GAAa,GAAG,CAAC;EACzC,CAAC,GAED,KAAK,MAAM,iBAAiB,qBAAqB;GAC/C,KAAK,GAAa;EACpB,CAAC,GAED,KAAK,iBAAiB,YAAY,MAAqB;GAKrD,AAJI,EAAE,SAAS,SAAS,EAAE,SAAS,YACjC,KAAK,GAAa,GAGhB,GAAG,SAAS,eAAgB,KAAK,YAAY,CAAC,CAAgB,kBAAkB,KAAK,UACvF,KAAK,GAAW,WAAW,GAC3B,KAAK,GAAO,EAAE,EAAE,MAAM,GACtB,EAAE,eAAe;EAErB,CAAC;CACH;CAEA,GAAa,GAAgE;EAY3E,AAXK,KAAK,IAAS,aACjB,KAAK,GAAe,EAAgB,CAAM,CAAC,GAC3C,KAAK,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,IAG5B,KAAK,OACP,EAAO,WAAW,CAAC,EAAO,UAC1B,KAAK,GAAgB,CAAM,IAG7B,KAAK,cAAc;CACrB;CAEA,KAAqB;EACnB,KAAK,GAAgB;CACvB;CAEA,KAAkB;EAChB,IAAM,IAAQ,KAAK,MAAM,MAAM,KAAK;EACpC,AAAI,MACF,KAAK,cAAc,IAAI,YAAY,UAAU;GAAE,QAAQ,EAAE,SAAM;GAAG,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,GAClG,KAAK,MAAM,QAAQ,IACnB,KAAK,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,GAC9B,KAAK,cAAc;CAEvB;CAEA,GAAyB,GAAmB,GAAe;EAIzD,OAHI,KAAK,KACA,KAAK,MAAM,MAAM,YAAY,CAAC,CAAC,EAAM,EAAE,YAAY,MAAM,EAAU,YAAY,IAEjF;CACT;CAEA,KAAiB;EAWf,AAVA,KAAK,GAAS,SAAQ,MAAU;GAE9B,AAKE,EAAO,SANQ,EAAO,YAAa,KAAK,CAAC,CAAC,SAG1B,CADK,EAAO,YAAa,kBAAkB,CAAC,CAAC,SAAS,KAAK,OAAO,MAAM,YAAY,CACnF,IAGD,CADK,EAAO,MAAM,kBAAkB,CAAC,CAAC,SAAS,KAAK,OAAO,MAAM,YAAY,CAC5E;EAErB,CAAC,GACD,KAAK,cAAc;CACrB;CAEA,KAAe;EACb,AAAI,CAAC,KAAK,MAAM,YAAY,CAAC,KAAK,GAAW,QAAQ,eAAe,MAC9D,KAAK,MACP,KAAK,GAAS,SAAQ,MAAW,EAAO,SAAS,EAAM,GACvD,KAAK,cAAc,KAEnB,KAAK,GAAe,GAEtB,KAAK,GAAW,MAAM,YAAY,eAAe,GAAG,KAAK,GAAQ,sBAAsB,CAAC,CAAC,MAAM,GAAG,GAElG,KAAK,GAAW,YAAY,EAAE,QAAQ,KAAK,GAAsB,CAAC,GAClE,KAAK,GAAW,WAAW;CAE/B;CAEA,KAA6B;EAK3B,AAHE,KAAK,MACL,CAAC,KAAK,GAAQ,YACd,CAAC,KAAK,GAAS,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,CAAC,CAAC,MAAK,MAAK,EAAgB,CAAC,MAAM,KAAK,MAAM,KAAK,MAE7G,KAAK,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAM,GAC/C,KAAK,GAAe,EAAE,GACtB,KAAK,GAAgB;GAAE,OAAO;GAAI,UAAU;EAAM,CAAC;CAEvD;CAEA,GAAe,GAAe;EAG5B,AAFA,KAAK,MAAM,QAAQ,GACnB,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;CAEA,GAAgB,GAAgD;EAC9D,IAAM,IAAQ,CAAC,GAAG,KAAK,IAAU;GAAE,OAAO;GAAI,UAAU;EAAuB,CAAC,CAAC,CAAC,MAChF,MAAK,EAAE,UAAU,EAAO,KAC1B;EAQA,AAPI,MAAO,EAAM,WAAW,EAAO,YAAY,OAE3C,KAAK,MAAW,CAAC,KAAK,GAAQ,aAChC,KAAK,GAAQ,QAAQ,EAAO,QAG9B,KAAK,IAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAK,IAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAyB;EACvB,IAAI,KAAK,IAAS,YAAY,CAAC,KAAK,IAAoB;GACtD,AAAI,KAAK,GAAQ,gBAAgB,SAAS,KAExC,KAAK,GAAwB,KAAK,GAAO,sBAAsB,CAAC,CAAC,KAAK;GAExE,IAAM,IAAW,IAAI,gBAAe,MAAW,KAAK,GAAwB,EAAQ,EAAE,CAAE,YAAY,KAAK,CAAC;GAE1G,AADA,KAAK,GAAW,KAAK,CAAQ,GAC7B,EAAS,QAAQ,KAAK,EAAM;EAC9B;CACF;CAEA,GAAwB,GAAkB;EAExC,AAAI,KAAK,IAAS,YAAY,IAAW,KAAK,GAAQ,sBAAsB,CAAC,CAAC,QAAQ,MACpF,KAAK,WAAW,OAAO,IAAI,mBAAmB,IAE9C,KAAK,WAAW,OAAO,OAAO,mBAAmB;CAErD;CAEA,KAAmB;EAEjB,AADA,KAAK,GAAe,GACpB,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAe,CAAC;CAC7E;CAEA,KAAiB;EACf,AAAI,KAAK,KACP,KAAK,WAAW,OAAO,IAAI,gBAAgB,IAE3C,KAAK,WAAW,OAAO,OAAO,gBAAgB;CAElD;AACF;AArhBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGjE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAhBzE,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"combobox2.js","names":["styles","_decorate","__decorate","combobox_default","comboboxI18nDefaults","Combobox","Control","_args","#observers","#syncPending","#trackedOptions","useStyles","inputStyles","Checkbox","Icon","Dropdown","Menu","MenuItem","Tag","#datalist","#_datalist","i","#select","#_select","#options","#items","#dropdown","#input","#tags","#hasAvailableOptions","o","#hasFooterContent","#showCreateItem","value","#findOptionMatch","lower","#tagLayoutIsHidden","#selectValue","getDisplayValue","#largeOptionsList","#isPristine","isServer","nothing","options","largeOptionsList","isPristine","visibleOptions","hasNoResults","showCreateItem","#openDropdown","#closeDropdown","ifDefined","#getOptionCheckbox","#characterAtIndexMatches","c","ci","#onCreateItemClick","select","props","#onSlottedChildMutation","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","observer","#setupOptionObservers","#cleanupOptionObservers","#setupInitialValue","#syncSelectValueStates","selected","getElementUpdate","#updateInputValue","#syncOptionSelectedStates","cleanup","getPropertyChanges","#cleanupStaleTrackedOptions","currentOptions","tracked","#validateSingleSelectValue","#setInputValue","#setSelectValue","match","#dispatchCreate","#filterOptions","dropdown","#openListBox","option","focusElementTimeout","index","character","found","#updateMultipleOverflow","entries","tagWidth","#setSlotStates","property","scopedRegistry"],"sources":["../../src/combobox/combobox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, isServer, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport {\n  createLightDismiss,\n  focusElementTimeout,\n  getDisplayValue,\n  getElementUpdate,\n  getPropertyChanges,\n  scopedRegistry,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Dropdown } from '@nvidia-elements/core/dropdown';\nimport { Tag } from '@nvidia-elements/core/tag';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport styles from './combobox.css?inline';\n\nconst comboboxI18nDefaults = {\n  select: 'select',\n  selected: 'selected',\n  noResults: 'no results',\n  create: 'create'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-combobox\n * @description An editable combobox with autocomplete behavior and selection support.\n * @documentation https://nvidia.github.io/elements/docs/elements/combobox/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/combobox\n * @slot - default slot for an input and a datalist/select element\n * @slot prefix-icon - slot for icon before the input\n * @slot footer - slot for dropdown footer content\n * @cssprop --scroll-height\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @cssprop --font-weight\n * @cssprop --width\n * @cssprop --border-color\n * @cssprop --max-height\n * @cssprop --text-transform\n * @csspart tag - The tag element for selected items\n * @csspart dropdown - The dropdown popup element\n * @csspart menu - The menu element\n * @csspart menu-item - The menu item elements\n * @csspart checkbox - The checkbox element\n * @csspart icon - The icon element\n * @event scroll - Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.\n * @event create - Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`.\n * @csspart create-option - The menu item element for creating new options\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/\n */\n@scopedRegistry()\nexport class Combobox extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return comboboxI18nDefaults;\n  }\n\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  /** Manage inline tag rendering for many-item select */\n  @property({ type: String, reflect: true, attribute: 'tag-layout' }) tagLayout: 'hidden' | 'wrap';\n\n  /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-create' }) behaviorCreate: boolean;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-combobox',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Checkbox.metadata.tag]: Checkbox,\n    [Icon.metadata.tag]: Icon,\n    [Dropdown.metadata.tag]: Dropdown,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Tag.metadata.tag]: Tag\n  };\n\n  /**\n   * If a <select> exists, on focus all options show by default.\n   * If a <datalist> exists, on focus only options that match the current input value show.\n   */\n\n  #_datalist: HTMLSelectElement | null;\n  get #datalist(): HTMLSelectElement | null {\n    if (!this.#_datalist) {\n      this.#_datalist = this.shadowRoot\n        ? ((this.shadowRoot\n            .querySelector('slot')\n            ?.assignedElements({ flatten: true })\n            ?.find(i => i.tagName === 'DATALIST' || i.tagName === 'SELECT') ??\n            this.querySelector('datalist, select')) as HTMLSelectElement)\n        : null;\n    }\n    return this.#_datalist;\n  }\n\n  #_select: HTMLSelectElement | null;\n  get #select(): HTMLSelectElement | null {\n    if (!this.#_select) {\n      this.#_select = this.shadowRoot\n        ? ((this.shadowRoot\n            .querySelector('slot')\n            ?.assignedElements({ flatten: true })\n            ?.find(i => i.tagName === 'SELECT') ?? this.querySelector('select')) as HTMLSelectElement)\n        : null;\n    }\n    return this.#_select;\n  }\n\n  get #options(): HTMLOptionElement[] {\n    return Array.from(this.#datalist?.options ? this.#datalist.options : []);\n  }\n\n  get #items() {\n    return Array.from(this.shadowRoot!.querySelectorAll<MenuItem>(MenuItem.metadata.tag));\n  }\n\n  get #dropdown() {\n    return this.shadowRoot!.querySelector<Dropdown>(Dropdown.metadata.tag);\n  }\n\n  get #input() {\n    return this.shadowRoot!.querySelector('[input]');\n  }\n\n  get #tags() {\n    return this.shadowRoot!.querySelector('.tags');\n  }\n\n  get #hasAvailableOptions() {\n    return this.#options.find(o => !o.disabled && !o.hidden);\n  }\n\n  get #hasFooterContent() {\n    return !!this.querySelector('[slot=\"footer\"]');\n  }\n\n  get #showCreateItem(): boolean {\n    if (!this.behaviorCreate || this.input?.disabled) return false;\n    const value = this.input?.value.trim();\n    if (!value) return false;\n    return !this.#findOptionMatch(value);\n  }\n\n  #findOptionMatch(value: string): HTMLOptionElement | undefined {\n    const lower = value.toLowerCase();\n    return this.#options.find(o => {\n      const display = o.textContent!.trim() || o.value;\n      return display.toLowerCase() === lower || o.value.toLowerCase() === lower;\n    });\n  }\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n  #syncPending = false;\n\n  protected _associateDatalist = false;\n\n  protected get prefixContent() {\n    return this.#select?.multiple && !this.#tagLayoutIsHidden\n      ? html`\n    <div class=\"tags-label\" aria-hidden=\"true\">${this.#select.selectedOptions.length} ${this.i18n.selected}</div>\n    <div class=\"tags\">\n      ${Array.from<HTMLOptionElement>(this.#select.selectedOptions).map(\n        o => html`\n      <nve-tag part=\"tag\" readonly color=\"gray-slate\" closable .value=${o.value} @click=${() => this.#selectValue(o)}>${getDisplayValue(o)}</nve-tag>`\n      )}\n    </div>`\n      : html`<slot name=\"prefix-icon\"></slot>`;\n  }\n\n  get #tagLayoutIsHidden() {\n    return this.tagLayout === 'hidden';\n  }\n\n  get #largeOptionsList() {\n    return (this.#datalist?.options?.length ?? 0) > 50;\n  }\n\n  get #isPristine() {\n    return !this._internals.states.has('dirty');\n  }\n\n  protected get suffixContent() {\n    if (isServer) return nothing;\n    const options = this.#options;\n    const largeOptionsList = this.#largeOptionsList;\n    const isPristine = this.#isPristine;\n    const visibleOptions = options.filter(o => !o.hidden).filter(o => !(o.value === '' && o.disabled));\n    const hasNoResults = visibleOptions.filter(o => !o.disabled).length === 0;\n    const showCreateItem = this.#showCreateItem;\n    return html`\n    <nve-dropdown part=\"dropdown\" .popoverType=${'manual'} .modal=${false} @open=${this.#openDropdown} @close=${this.#closeDropdown} hidden .anchor=${this.#input as HTMLElement} position=\"bottom\">\n      <nve-menu part=\"menu\" role=\"listbox\" style=\"--width: 100%; --min-width: fit-content\" aria-label=${ifDefined(this.i18n.select)}>\n        ${visibleOptions.map(\n          o => html`\n          <nve-menu-item part=\"menu-item\" .option=${getDisplayValue(o)} role=\"option\" @click=${() => this.#selectValue(o)} ?selected=${o.selected} aria-selected=${o.selected ? 'true' : 'false'} ?disabled=${o.disabled} aria-label=${getDisplayValue(o)}>\n            ${this.#getOptionCheckbox(o)}\n            ${largeOptionsList || isPristine ? getDisplayValue(o) : html`<span role=\"presentation\">${(o.label ? o.label : o.value)?.split('')?.map((c, ci) => html`<span ?matches=${this.#characterAtIndexMatches(c, ci)}>${c}</span>`)}</span>`}\n          </nve-menu-item>`\n        )}\n        ${hasNoResults && !showCreateItem ? html`<nve-menu-item part=\"menu-item\" .value=${''} disabled>${this.i18n.noResults}</nve-menu-item>` : nothing}\n        ${\n          showCreateItem\n            ? html`<nve-menu-item part=\"create-option\" role=\"button\" aria-label=${`${this.i18n.create} \"${this.input?.value.trim()}\"`} @click=${this.#onCreateItemClick}>\n          <nve-icon part=\"icon\" name=\"add\" size=\"sm\"></nve-icon> \"${this.input?.value.trim()}\"\n        </nve-menu-item>`\n            : nothing\n        }\n      </nve-menu>\n      <slot name=\"footer\"></slot>\n    </nve-dropdown>`;\n  }\n\n  #getOptionCheckbox(o: HTMLOptionElement) {\n    const select = this.#select;\n    if (select?.multiple && this.#largeOptionsList) {\n      return html`<input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} />`;\n    } else if (select?.multiple) {\n      /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n      return html`<nve-checkbox part=\"checkbox\"><input aria-hidden=\"true\" type=\"checkbox\" .checked=${o.selected} .disabled=${o.disabled} .name=${o.selected ? 'check' : undefined} /></nve-checkbox>`;\n    } else if (select) {\n      return html`<nve-icon part=\"icon\" name=\"check\" size=\"sm\"></nve-icon>`;\n    } else {\n      return nothing;\n    }\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.shadowRoot!.addEventListener('slotchange', () => this.#onSlottedChildMutation());\n    await this.updateComplete;\n    this.#setupSingleSelect();\n    this.#setupMultipleSelect();\n    this.#setupAutoCompleteKeyEvents();\n    this.#setupMenuItemUpdateEvents();\n    this.#setupOpenKeyEvents();\n    this.#setupOverflowListener();\n    this.#setupSlotStates();\n    await this.#setupLightDismiss();\n    this.input.setAttribute('list', '');\n    this.input.autocomplete = 'off';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    const observer = new MutationObserver(() => this.#onSlottedChildMutation());\n    observer.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['selected', 'disabled', 'value'],\n      characterData: true\n    });\n    this.#observers.push(observer);\n    this.#setupOptionObservers();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n    this.#cleanupOptionObservers();\n  }\n\n  reset() {\n    this.#dropdown!.hidePopover();\n    if (this.#select) {\n      this.#select.selectedIndex = -1;\n    }\n    super.reset();\n  }\n\n  /** Select all options provided */\n  selectAll() {\n    this.#options.forEach(o => (o.selected = true));\n    this.requestUpdate();\n    this.#select!.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select!.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setupSingleSelect() {\n    if (this.#select && !this.#select.multiple) {\n      this.#setupInitialValue();\n      this.#syncSelectValueStates();\n    }\n  }\n\n  #setupMultipleSelect() {\n    if (this.#select?.multiple) {\n      this.#setupInitialValue();\n      this.#syncSelectValueStates();\n      this._internals.states.add('multiple');\n    }\n  }\n\n  #setupInitialValue() {\n    const selected = Array.from(this.#select!.selectedOptions).find((o: HTMLOptionElement) =>\n      o.hasAttribute('selected')\n    );\n    if (selected && !this.#select!.multiple && !this.input.defaultValue) {\n      this.input.value = getDisplayValue(selected);\n    }\n  }\n\n  #updateInputValue() {\n    if (!this.#select!.multiple && !this.input.defaultValue) {\n      this.input.value = getDisplayValue(\n        Array.from(this.#select!.selectedOptions).find(o => o.value === this.#select!.value)!\n      );\n    }\n  }\n\n  #syncSelectValueStates() {\n    this.#observers.push(\n      getElementUpdate(this.#select!, 'value', () => {\n        this.#updateInputValue();\n        this.requestUpdate();\n      })\n    );\n  }\n\n  #trackedOptions = new Map<HTMLOptionElement, ReturnType<typeof getPropertyChanges>>();\n\n  #setupOptionObservers() {\n    this.#_datalist = null;\n    this.#_select = null;\n    this.#syncOptionSelectedStates();\n    this.requestUpdate();\n  }\n\n  #cleanupOptionObservers() {\n    this.#trackedOptions.forEach(cleanup => cleanup?.());\n    this.#trackedOptions.clear();\n  }\n\n  #syncOptionSelectedStates() {\n    if (!this.isConnected) return;\n    this.#options.forEach(o => {\n      if (!this.#trackedOptions.has(o)) {\n        this.#trackedOptions.set(\n          o,\n          getPropertyChanges(o, 'selected', () => this.requestUpdate())\n        );\n      }\n    });\n  }\n\n  #onSlottedChildMutation() {\n    if (!this.#syncPending) {\n      this.#syncPending = true;\n      queueMicrotask(() => {\n        this.#syncPending = false;\n        if (!this.isConnected) return;\n        this.#_datalist = null;\n        this.#_select = null;\n        this.#cleanupStaleTrackedOptions();\n        this.#syncOptionSelectedStates();\n        this.requestUpdate();\n      });\n    }\n  }\n\n  #cleanupStaleTrackedOptions() {\n    const currentOptions = new Set(this.#options);\n    for (const [tracked, cleanup] of this.#trackedOptions) {\n      if (!currentOptions.has(tracked)) {\n        cleanup?.();\n        this.#trackedOptions.delete(tracked);\n      }\n    }\n  }\n\n  #openDropdown() {\n    this.#dropdown!.hidden = false;\n  }\n\n  #closeDropdown() {\n    this.#dropdown!.hidden = true;\n    this._internals.states.delete('dirty');\n    this.#validateSingleSelectValue();\n  }\n\n  #setupAutoCompleteKeyEvents() {\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      const value = this.input.value.trim();\n\n      if (e.code === 'Tab') {\n        if (this.#hasAvailableOptions && this.#dropdown!.matches(':popover-open') && value !== '') {\n          e.preventDefault();\n          // the menu item option property caches/stores the option value instead of value to prevent unnecessary lit lifecycle updates for each menu item\n          this.#setInputValue((this.#items[0] as MenuItem & { option: string }).option);\n          this.#setSelectValue(\n            this.#options.find(\n              o => (o.label ? o.label : o.value) === (this.#items[0] as MenuItem & { option: string }).option\n            )!\n          );\n        }\n        this.#dropdown!.hidePopover();\n      }\n\n      if (e.code === 'Enter' && this.behaviorCreate && !this.input.disabled && value) {\n        const match = this.#findOptionMatch(value);\n        if (match) {\n          this.#selectValue(match);\n        } else {\n          e.preventDefault();\n          e.stopImmediatePropagation();\n          this.#dispatchCreate();\n        }\n      }\n    });\n  }\n\n  #setupMenuItemUpdateEvents() {\n    this.input.addEventListener('input', () => this.#filterOptions());\n    this.shadowRoot!.addEventListener('slotchange', () => this.#filterOptions());\n  }\n\n  async #setupLightDismiss() {\n    const dropdown = this.#dropdown!;\n    await dropdown.updateComplete;\n    const options = {\n      element: dropdown.shadowRoot!.querySelector<HTMLElement>('[internal-host]')!,\n      focusElement: this.input\n    };\n    createLightDismiss(options, () => {\n      if (this.#dropdown!.matches(':popover-open')) {\n        this.#dropdown!.hidePopover();\n      }\n    });\n  }\n\n  #setupOpenKeyEvents() {\n    this.#tags?.addEventListener('pointerup', () => {\n      if (this.tagLayout !== 'wrap') return;\n      this.input.focus();\n      setTimeout(() => this.#openListBox(), 0);\n    });\n\n    this.input.addEventListener('pointerdown', () => {\n      this.#openListBox();\n    });\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (e.code !== 'Tab' && e.code !== 'Escape') {\n        this.#openListBox();\n      }\n\n      if (e?.code === 'ArrowDown' && (this.getRootNode() as ShadowRoot).activeElement === this.input) {\n        this.#dropdown!.tabIndex = 0;\n        this.#items[0]?.focus();\n        e.preventDefault();\n      }\n    });\n  }\n\n  #selectValue(option: { selected?: boolean; label?: string; value?: string }) {\n    if (!this.#select?.multiple) {\n      this.#setInputValue(getDisplayValue(option));\n      this.#dropdown!.hidePopover();\n      focusElementTimeout(this.input);\n    }\n\n    if (this.#select) {\n      option.selected = !option.selected;\n      this.#setSelectValue(option);\n    }\n\n    this.requestUpdate();\n  }\n\n  #onCreateItemClick() {\n    this.#dispatchCreate();\n  }\n\n  #dispatchCreate() {\n    const value = this.input.value.trim();\n    if (value) {\n      this.dispatchEvent(new CustomEvent('create', { detail: { value }, bubbles: true, composed: true }));\n      this.input.value = '';\n      this.#dropdown!.hidePopover();\n      focusElementTimeout(this.input);\n      this.requestUpdate();\n    }\n  }\n\n  #characterAtIndexMatches(character: string, index: number) {\n    if (this.#hasAvailableOptions) {\n      return this.input.value.toLowerCase()[index]?.toLowerCase() === character.toLowerCase();\n    }\n    return false;\n  }\n\n  #filterOptions() {\n    this.#options.forEach(option => {\n      const hasLabel = option.textContent!.trim().length;\n      if (hasLabel) {\n        const matchesLabel = option.textContent!.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n        option.hidden = !matchesLabel;\n      } else {\n        const matchesValue = option.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());\n        option.hidden = !matchesValue;\n      }\n    });\n    this.requestUpdate();\n  }\n\n  #openListBox() {\n    if (!this.input.disabled && !this.#dropdown!.matches(':popover-open')) {\n      if (this.#select) {\n        this.#options.forEach(option => (option.hidden = false));\n        this.requestUpdate();\n      } else {\n        this.#filterOptions();\n      }\n      this.#dropdown!.style.setProperty('--min-width', `${this.#input!.getBoundingClientRect().width}px`);\n      // explicitly provide source as the performance optimizations in the suffixContent getter prevent the dropdown from setting its anchor/trigger reliably\n      this.#dropdown!.showPopover({ source: this.#input as HTMLElement });\n      this.#dropdown!.tabIndex = -1;\n    }\n  }\n\n  #validateSingleSelectValue() {\n    const invalidInputValue =\n      this.#select &&\n      !this.#select.multiple &&\n      !this.#options.filter(o => !(o.value === '' && o.disabled)).find(o => getDisplayValue(o) === this.input.value);\n    if (invalidInputValue) {\n      this.#options.forEach(o => (o.selected = false));\n      this.#setInputValue('');\n      this.#setSelectValue({ value: '', selected: false });\n    }\n  }\n\n  #setInputValue(value: string) {\n    this.input.value = value;\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setSelectValue(option: { value?: string; selected?: boolean }) {\n    const found = [...this.#options, { value: '', selected: null as boolean | null }].find(\n      o => o.value === option.value\n    );\n    if (found) found.selected = option.selected ?? null;\n\n    if (this.#select && !this.#select.multiple) {\n      this.#select.value = option.value!;\n    }\n\n    this.#select?.dispatchEvent(new Event('input', { bubbles: true }));\n    this.#select?.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #setupOverflowListener() {\n    if (this.#select?.multiple && !this.#tagLayoutIsHidden) {\n      if (this.#select.selectedOptions.length > 1) {\n        // only calculate initial overflow if many tags exist\n        this.#updateMultipleOverflow(this.#tags!.getBoundingClientRect().width);\n      }\n      const observer = new ResizeObserver(entries => this.#updateMultipleOverflow(entries[0]!.contentRect.width));\n      this.#observers.push(observer);\n      observer.observe(this.#tags!);\n    }\n  }\n\n  #updateMultipleOverflow(tagWidth: number) {\n    const INPUT_MIN_WIDTH = 100;\n    if (this.#select?.multiple && tagWidth > this.#input!.getBoundingClientRect().width - INPUT_MIN_WIDTH) {\n      this._internals.states.add('multiple-overflow');\n    } else {\n      this._internals.states.delete('multiple-overflow');\n    }\n  }\n\n  #setupSlotStates() {\n    this.#setSlotStates();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#setSlotStates());\n  }\n\n  #setSlotStates() {\n    if (this.#hasFooterContent) {\n      this._internals.states.add('footer-content');\n    } else {\n      this._internals.states.delete('footer-content');\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/combobox/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Combobox as r } from "./combobox2.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/combobox/define.js.map

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

package/dist/combobox/index.js

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

package/dist/copy-button/copy-button.examples.js

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

package/dist/copy-button/copy-button.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.examples.js","names":[],"sources":["../../src/copy-button/copy-button.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/copy-button/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Copy Button',\n  component: 'nve-copy-button',\n};\n\n/**\n * @summary Standard copy button for copying text to the clipboard on click.\n */\nexport const Default = {\n  render: () => html`\n    <nve-copy-button value=\"hello\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy button in disabled state. Useful for showing when copying is not available or when the user doesn't have permission to copy.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n    <nve-copy-button disabled value=\"hello\"></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy buttons with flat container styling, showing both enabled and disabled states. Ideal for inline usage where minimal visual impact matters.\n * @tags test-case\n */\nexport const Flat = {\n  render: () => html`\n    <nve-copy-button container=\"flat\" value=\"hello\"></nve-copy-button>\n    <nve-copy-button container=\"flat\" disabled value=\"hello\"></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy button with behavior-copy attribute that automatically handles the copy functionality. Simplifies implementation by providing built-in copy behavior.\n */\nexport const BehaviorCopy = {\n  render: () => html`\n    <nve-copy-button value=\"hello\" behavior-copy></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy buttons in different sizes (small, default, large). Useful for adapting to different UI contexts and design requirements.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <nve-copy-button size=\"sm\"></nve-copy-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-copy-button size=\"lg\"></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy button integrated with text content, showing how to copy truncated values like commit hashes. Perfect for code snippets, IDs, or other long text that users copy while viewing a shortened version.\n */\nexport const Hint = {\n  render: () => html`\n    <h2 nve-text=\"body lg\" nve-layout=\"row align:vertical-center\">\n      2d628479c...\n      <nve-copy-button container=\"flat\" value=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\" aria-label=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\" behavior-copy></nve-copy-button>\n    </h2>\n  `\n}\n\n/**\n * @summary Copy button with custom icon in the icon slot. Customizes the button appearance while maintaining copy functionality. Useful for context-specific icons like git branches, URLs, or other specialized content.\n */\nexport const Icon = {\n  render: () => html`\n    <nve-copy-button value=\"ssh://elements.git\" aria-label=\"copy git branch\" behavior-copy>\n      <nve-icon name=\"branch\" slot=\"icon\"></nve-icon>\n    </nve-copy-button>\n  `\n}\n\n/**\n * @summary Advanced pattern for handling long-running copy to clipboard operations.\n * @tags test-case\n */\nexport const AsyncCopy = {\n  render: () => html`\n    <nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n\n    <script type=\"module\">\n      const button = document.querySelector('#async-copy-button');\n      button.addEventListener('pointerdown', () => {\n        button.disabled = true;\n\n        // do an async operation\n        new Promise(resolve => setTimeout(resolve, 2000)).then(() => {\n          button.value = 'async value';\n          button.disabled = false;\n          button.dispatchEvent(new Event('click'));\n        });\n      });\n    </script>\n  `\n}\n\n/**\n * @summary Popover position override in a copy button.\n * @tags test-case\n */\nexport const TooltipPositionOverride = {\n  render: () => html`\n    <style>\n      nve-copy-button.override-position-example {\n        &::part(tooltip-arrow) {\n          position-area: right center;\n          translate: -50% 0%;\n          transform: translate(-2px, 0) rotate(45deg);\n        }\n      }\n    </style>\n    <nve-copy-button class=\"override-position-example\" value=\"hello\" aria-label=\"copy value\" behavior-copy style=\"position: absolute; top: 12px; right: 12px;\"></nve-copy-button>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"copy-button.examples.js","names":["copy_button_examples_default"],"sources":["../../src/copy-button/copy-button.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/copy-button/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Copy Button',\n  component: 'nve-copy-button',\n};\n\n/**\n * @summary Standard copy button for copying text to the clipboard on click.\n */\nexport const Default = {\n  render: () => html`\n    <nve-copy-button value=\"hello\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy button in disabled state. Useful for showing when copying is not available or when the user doesn't have permission to copy.\n * @tags test-case\n */\nexport const Disabled = {\n  render: () => html`\n    <nve-copy-button disabled value=\"hello\"></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy buttons with flat container styling, showing both enabled and disabled states. Ideal for inline usage where minimal visual impact matters.\n * @tags test-case\n */\nexport const Flat = {\n  render: () => html`\n    <nve-copy-button container=\"flat\" value=\"hello\"></nve-copy-button>\n    <nve-copy-button container=\"flat\" disabled value=\"hello\"></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy button with behavior-copy attribute that automatically handles the copy functionality. Simplifies implementation by providing built-in copy behavior.\n */\nexport const BehaviorCopy = {\n  render: () => html`\n    <nve-copy-button value=\"hello\" behavior-copy></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy buttons in different sizes (small, default, large). Useful for adapting to different UI contexts and design requirements.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <nve-copy-button size=\"sm\"></nve-copy-button>\n    <nve-copy-button></nve-copy-button>\n    <nve-copy-button size=\"lg\"></nve-copy-button>\n  `\n}\n\n/**\n * @summary Copy button integrated with text content, showing how to copy truncated values like commit hashes. Perfect for code snippets, IDs, or other long text that users copy while viewing a shortened version.\n */\nexport const Hint = {\n  render: () => html`\n    <h2 nve-text=\"body lg\" nve-layout=\"row align:vertical-center\">\n      2d628479c...\n      <nve-copy-button container=\"flat\" value=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\" aria-label=\"2d628479cf2db27cbdebbfe41a42f1c9e07c46a8\" behavior-copy></nve-copy-button>\n    </h2>\n  `\n}\n\n/**\n * @summary Copy button with custom icon in the icon slot. Customizes the button appearance while maintaining copy functionality. Useful for context-specific icons like git branches, URLs, or other specialized content.\n */\nexport const Icon = {\n  render: () => html`\n    <nve-copy-button value=\"ssh://elements.git\" aria-label=\"copy git branch\" behavior-copy>\n      <nve-icon name=\"branch\" slot=\"icon\"></nve-icon>\n    </nve-copy-button>\n  `\n}\n\n/**\n * @summary Advanced pattern for handling long-running copy to clipboard operations.\n * @tags test-case\n */\nexport const AsyncCopy = {\n  render: () => html`\n    <nve-copy-button id=\"async-copy-button\" value=\"initial value\" aria-label=\"copy value\" behavior-copy></nve-copy-button>\n\n    <script type=\"module\">\n      const button = document.querySelector('#async-copy-button');\n      button.addEventListener('pointerdown', () => {\n        button.disabled = true;\n\n        // do an async operation\n        new Promise(resolve => setTimeout(resolve, 2000)).then(() => {\n          button.value = 'async value';\n          button.disabled = false;\n          button.dispatchEvent(new Event('click'));\n        });\n      });\n    </script>\n  `\n}\n\n/**\n * @summary Popover position override in a copy button.\n * @tags test-case\n */\nexport const TooltipPositionOverride = {\n  render: () => html`\n    <style>\n      nve-copy-button.override-position-example {\n        &::part(tooltip-arrow) {\n          position-area: right center;\n          translate: -50% 0%;\n          transform: translate(-2px, 0) rotate(45deg);\n        }\n      }\n    </style>\n    <nve-copy-button class=\"override-position-example\" value=\"hello\" aria-label=\"copy value\" behavior-copy style=\"position: absolute; top: 12px; right: 12px;\"></nve-copy-button>\n  `\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}