@nvidia-elements/core 0.1.4 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/accordion/accordion2.js +4 -4
  3. package/dist/alert/alert-group2.js +1 -1
  4. package/dist/alert/alert2.js +1 -1
  5. package/dist/avatar/avatar-group2.js +1 -1
  6. package/dist/avatar/avatar2.js +1 -1
  7. package/dist/badge/badge2.js +1 -1
  8. package/dist/breadcrumb/breadcrumb2.js +1 -1
  9. package/dist/bundles/index.js +2 -2
  10. package/dist/button/button2.js +1 -1
  11. package/dist/button-group/button-group2.js +1 -1
  12. package/dist/card/card2.js +4 -4
  13. package/dist/chat-message/chat-message2.js +1 -1
  14. package/dist/checkbox/checkbox-group2.js +1 -1
  15. package/dist/checkbox/checkbox2.js +1 -1
  16. package/dist/color/color2.js +1 -1
  17. package/dist/combobox/combobox.d.ts +7 -1
  18. package/dist/combobox/combobox.examples.js.map +1 -1
  19. package/dist/combobox/combobox.examples.json +21 -1
  20. package/dist/combobox/combobox.js +1 -1
  21. package/dist/combobox/combobox.js.map +1 -1
  22. package/dist/combobox/combobox2.js +67 -58
  23. package/dist/combobox/combobox2.js.map +1 -1
  24. package/dist/copy-button/copy-button2.js +1 -1
  25. package/dist/custom-elements-jsx.d.ts +5 -1
  26. package/dist/custom-elements-vue.d.ts +5 -1
  27. package/dist/custom-elements.json +46 -9
  28. package/dist/data.html.json +4 -4
  29. package/dist/data.snippets.json +32 -32
  30. package/dist/date/date2.js +1 -1
  31. package/dist/datetime/datetime2.js +1 -1
  32. package/dist/dialog/dialog-footer2.js +1 -1
  33. package/dist/dialog/dialog-header2.js +1 -1
  34. package/dist/dialog/dialog2.js +1 -1
  35. package/dist/divider/divider2.js +1 -1
  36. package/dist/dot/dot2.js +1 -1
  37. package/dist/drawer/drawer-content2.js +1 -1
  38. package/dist/drawer/drawer-footer2.js +1 -1
  39. package/dist/drawer/drawer-header2.js +1 -1
  40. package/dist/drawer/drawer2.js +1 -1
  41. package/dist/dropdown/dropdown-footer2.js +1 -1
  42. package/dist/dropdown/dropdown-header2.js +1 -1
  43. package/dist/dropdown/dropdown2.js +1 -1
  44. package/dist/dropdown-group/dropdown-group.js +1 -1
  45. package/dist/dropzone/dropzone2.js +1 -1
  46. package/dist/file/file2.js +1 -1
  47. package/dist/format-datetime/format-datetime2.js +1 -1
  48. package/dist/format-number/format-number2.js +1 -1
  49. package/dist/format-relative-time/format-relative-time2.js +1 -1
  50. package/dist/forms/control/control2.js +1 -1
  51. package/dist/forms/control-group/control-group2.js +1 -1
  52. package/dist/forms/control-message/control-message2.js +1 -1
  53. package/dist/grid/cell/cell2.js +1 -1
  54. package/dist/grid/column/column2.js +1 -1
  55. package/dist/grid/footer/footer2.js +1 -1
  56. package/dist/grid/grid2.js +1 -1
  57. package/dist/grid/header/header2.js +1 -1
  58. package/dist/grid/placeholder/placeholder2.js +1 -1
  59. package/dist/grid/row/row2.js +1 -1
  60. package/dist/icon/icon2.js +2 -2
  61. package/dist/icon-button/icon-button2.js +1 -1
  62. package/dist/index.js +1 -1
  63. package/dist/input/input-group2.js +1 -1
  64. package/dist/input/input2.js +1 -1
  65. package/dist/internal/controllers/type-native-popover.controller.js +18 -15
  66. package/dist/internal/controllers/type-native-popover.controller.js.map +1 -1
  67. package/dist/internal/controllers/type-touch.controller.js +1 -0
  68. package/dist/internal/controllers/type-touch.controller.js.map +1 -1
  69. package/dist/internal/services/global.service.js +1 -1
  70. package/dist/logo/logo2.js +1 -1
  71. package/dist/menu/menu-item2.js +1 -1
  72. package/dist/menu/menu2.js +1 -1
  73. package/dist/month/month2.js +1 -1
  74. package/dist/notification/notification-group2.js +1 -1
  75. package/dist/notification/notification2.js +1 -1
  76. package/dist/page/page-panel/page-panel-content2.js +1 -1
  77. package/dist/page/page-panel/page-panel-footer2.js +1 -1
  78. package/dist/page/page-panel/page-panel-header2.js +1 -1
  79. package/dist/page/page-panel/page-panel2.js +1 -1
  80. package/dist/page/page2.js +1 -1
  81. package/dist/page-header/page-header2.js +1 -1
  82. package/dist/page-loader/page-loader2.js +1 -1
  83. package/dist/pagination/pagination2.js +1 -1
  84. package/dist/panel/panel2.js +4 -4
  85. package/dist/password/password2.js +1 -1
  86. package/dist/preferences-input/preferences-input2.js +2 -1
  87. package/dist/preferences-input/preferences-input2.js.map +1 -1
  88. package/dist/progress-bar/progress-bar2.js +1 -1
  89. package/dist/progress-ring/progress-ring2.js +1 -1
  90. package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
  91. package/dist/pulse/pulse2.js +1 -1
  92. package/dist/radio/radio-group2.js +1 -1
  93. package/dist/radio/radio2.js +1 -1
  94. package/dist/range/range2.js +1 -1
  95. package/dist/resize-handle/resize-handle2.js +1 -1
  96. package/dist/search/search2.js +1 -1
  97. package/dist/select/select2.js +1 -1
  98. package/dist/skeleton/skeleton2.js +1 -1
  99. package/dist/sort-button/sort-button2.js +1 -1
  100. package/dist/sparkline/sparkline2.js +1 -1
  101. package/dist/star-rating/star-rating2.js +1 -1
  102. package/dist/steps/steps2.js +2 -2
  103. package/dist/switch/switch-group2.js +1 -1
  104. package/dist/switch/switch2.js +1 -1
  105. package/dist/tabs/tabs-group2.js +1 -1
  106. package/dist/tabs/tabs2.js +2 -2
  107. package/dist/tag/tag2.js +1 -1
  108. package/dist/textarea/textarea2.js +1 -1
  109. package/dist/time/time2.js +1 -1
  110. package/dist/toast/toast2.js +1 -1
  111. package/dist/toggletip/toggletip-footer2.js +1 -1
  112. package/dist/toggletip/toggletip-header2.js +1 -1
  113. package/dist/toggletip/toggletip2.js +1 -1
  114. package/dist/toolbar/toolbar2.js +1 -1
  115. package/dist/tooltip/tooltip2.js +1 -1
  116. package/dist/tree/tree-node2.js +1 -1
  117. package/dist/tree/tree2.js +1 -1
  118. package/dist/week/week2.js +1 -1
  119. package/package.json +3 -3
@@ -19,7 +19,7 @@ import { ifDefined as x } from "lit/directives/if-defined.js";
19
19
  //#region src/combobox/combobox.ts
20
20
  var S = class extends l {
21
21
  constructor(...e) {
22
- super(...e), this.#p = [], this.#m = !1, this._associateDatalist = !1, this.#C = /* @__PURE__ */ new Set();
22
+ super(...e), this.#p = [], this.#m = !1, this._associateDatalist = !1, this.#w = /* @__PURE__ */ new Set();
23
23
  }
24
24
  static {
25
25
  this.styles = s([
@@ -31,7 +31,7 @@ var S = class extends l {
31
31
  static {
32
32
  this.metadata = {
33
33
  tag: "nve-combobox",
34
- version: "0.1.4"
34
+ version: "0.2.1"
35
35
  };
36
36
  }
37
37
  static {
@@ -85,32 +85,35 @@ var S = class extends l {
85
85
  #p;
86
86
  #m;
87
87
  get prefixContent() {
88
- return this.#r?.multiple && !this.notags ? _`<div class="tags-label" aria-hidden="true">${this.#r.selectedOptions.length} ${this.i18n.selected}</div><div class="tags">${Array.from(this.#r.selectedOptions).map((e) => _`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#M(e)}">${t(e)}</nve-tag>`)}</div>` : _`<slot name="prefix-icon"></slot>`;
88
+ return this.#r?.multiple && !this.#h ? _`<div class="tags-label" aria-hidden="true">${this.#r.selectedOptions.length} ${this.i18n.selected}</div><div class="tags">${Array.from(this.#r.selectedOptions).map((e) => _`<nve-tag part="tag" readonly="readonly" color="gray-slate" closable .value="${e.value}" @click="${() => this.#N(e)}">${t(e)}</nve-tag>`)}</div>` : _`<slot name="prefix-icon"></slot>`;
89
89
  }
90
90
  get #h() {
91
- return (this.#t?.options?.length ?? 0) > 50;
91
+ return this.notags || this.tagLayout === "hidden";
92
92
  }
93
93
  get #g() {
94
+ return (this.#t?.options?.length ?? 0) > 50;
95
+ }
96
+ get #_() {
94
97
  return !this._internals.states.has("dirty");
95
98
  }
96
99
  get suffixContent() {
97
100
  if (v) return y;
98
- let e = this.#i, n = this.#h, r = this.#g, i = e.filter((e) => !e.hidden).filter((e) => !(e.value === "" && e.disabled)), a = i.filter((e) => !e.disabled).length === 0, o = this.#d;
99
- return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#D}" @close="${this.#R}" hidden .anchor="${this.#s}" .trigger="${this.#s}" position="bottom"><nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${i.map((e) => _`<nve-menu-item part="menu-item" .option="${t(e)}" role="option" @click="${() => this.#M(e)}" ?selected="${e.selected}" aria-selected="${e.selected ? "true" : "false"}" ?disabled="${e.disabled}" aria-label="${t(e)}">${this.#_(e)} ${n || r ? t(e) : _`<span role="presentation">${(e.label ? e.label : e.value)?.split("")?.map((e, t) => _`<span ?matches="${this.#F(e, t)}">${e}</span>`)}</span>`}</nve-menu-item>`)} ${a && !o ? _`<nve-menu-item part="menu-item" .value="${""}" disabled="disabled">${this.i18n.noResults}</nve-menu-item>` : y} ${o ? _`<nve-menu-item part="create-option" role="button" aria-label="${`${this.i18n.create} "${this.input?.value.trim()}"`}" @click="${this.#N}"><nve-icon part="icon" name="add" size="sm"></nve-icon>"${this.input?.value.trim()}"</nve-menu-item>` : y}</nve-menu><slot name="footer"></slot></nve-dropdown>`;
101
+ let e = this.#i, n = this.#g, r = this.#_, i = e.filter((e) => !e.hidden).filter((e) => !(e.value === "" && e.disabled)), a = i.filter((e) => !e.disabled).length === 0, o = this.#d;
102
+ return _`<nve-dropdown part="dropdown" .popoverType="${"manual"}" .modal="${!1}" @open="${this.#O}" @close="${this.#z}" hidden .anchor="${this.#s}" .trigger="${this.#s}" position="bottom"><nve-menu part="menu" role="listbox" style="--width:100%;--min-width:fit-content" aria-label="${x(this.i18n.select)}">${i.map((e) => _`<nve-menu-item part="menu-item" .option="${t(e)}" role="option" @click="${() => this.#N(e)}" ?selected="${e.selected}" aria-selected="${e.selected ? "true" : "false"}" ?disabled="${e.disabled}" aria-label="${t(e)}">${this.#v(e)} ${n || r ? t(e) : _`<span role="presentation">${(e.label ? e.label : e.value)?.split("")?.map((e, t) => _`<span ?matches="${this.#I(e, t)}">${e}</span>`)}</span>`}</nve-menu-item>`)} ${a && !o ? _`<nve-menu-item part="menu-item" .value="${""}" disabled="disabled">${this.i18n.noResults}</nve-menu-item>` : y} ${o ? _`<nve-menu-item part="create-option" role="button" aria-label="${`${this.i18n.create} "${this.input?.value.trim()}"`}" @click="${this.#P}"><nve-icon part="icon" name="add" size="sm"></nve-icon>"${this.input?.value.trim()}"</nve-menu-item>` : y}</nve-menu><slot name="footer"></slot></nve-dropdown>`;
100
103
  }
101
- #_(e) {
104
+ #v(e) {
102
105
  let t = this.#r;
103
- return t?.multiple && this.#h ? _`<input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}">` : t?.multiple ? _`<nve-checkbox part="checkbox"><input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}"></nve-checkbox>` : t ? _`<nve-icon part="icon" name="check" size="sm"></nve-icon>` : y;
106
+ return t?.multiple && this.#g ? _`<input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}">` : t?.multiple ? _`<nve-checkbox part="checkbox"><input aria-hidden="true" type="checkbox" .checked="${e.selected}" .disabled="${e.disabled}" .name="${e.selected ? "check" : void 0}"></nve-checkbox>` : t ? _`<nve-icon part="icon" name="check" size="sm"></nve-icon>` : y;
104
107
  }
105
108
  async firstUpdated(e) {
106
109
  super.firstUpdated(e), this.shadowRoot.addEventListener("slotchange", () => {
107
- this.#e = null, this.#n = null, this.#T();
108
- }), await this.updateComplete, this.#v(), this.#y(), this.#O(), this.#k(), this.#j(), this.#H(), this.#W(), await this.#A(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
110
+ this.#e = null, this.#n = null, this.#E();
111
+ }), await this.updateComplete, this.#y(), this.#b(), this.#k(), this.#A(), this.#M(), this.#U(), this.#G(), await this.#j(), this.input.setAttribute("list", ""), this.input.autocomplete = "off";
109
112
  }
110
113
  connectedCallback() {
111
114
  super.connectedCallback();
112
115
  let e = new MutationObserver((e) => {
113
- e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#T();
116
+ e.some((e) => e.type === "childList" && e.target === this) && (this.#e = null, this.#n = null), this.#E();
114
117
  });
115
118
  e.observe(this, {
116
119
  childList: !0,
@@ -133,55 +136,55 @@ var S = class extends l {
133
136
  selectAll() {
134
137
  this.#i.forEach((e) => e.selected = !0), this.requestUpdate(), this.#r.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r.dispatchEvent(new Event("change", { bubbles: !0 }));
135
138
  }
136
- #v() {
137
- this.#r && !this.#r.multiple && (this.#b(), this.#S(), this.#w());
138
- }
139
139
  #y() {
140
- this.#r?.multiple && (this.#b(), this.#S(), this.#w(), this._internals.states.add("multiple"));
140
+ this.#r && !this.#r.multiple && (this.#x(), this.#C(), this.#T());
141
141
  }
142
142
  #b() {
143
+ this.#r?.multiple && (this.#x(), this.#C(), this.#T(), this._internals.states.add("multiple"));
144
+ }
145
+ #x() {
143
146
  let e = Array.from(this.#r.selectedOptions).find((e) => e.hasAttribute("selected"));
144
147
  e && !this.#r.multiple && !this.input.defaultValue && (this.input.value = t(e));
145
148
  }
146
- #x() {
149
+ #S() {
147
150
  !this.#r.multiple && !this.input.defaultValue && (this.input.value = t(Array.from(this.#r.selectedOptions).find((e) => e.value === this.#r.value)));
148
151
  }
149
- #S() {
152
+ #C() {
150
153
  this.#p.push(n(this.#r, "value", () => {
151
- this.#x(), this.requestUpdate();
154
+ this.#S(), this.requestUpdate();
152
155
  }));
153
156
  }
154
- #C;
155
- #w() {
157
+ #w;
158
+ #T() {
156
159
  this.#i.forEach((e) => {
157
- this.#C.has(e) || (this.#C.add(e), r(e, "selected", () => this.requestUpdate()));
160
+ this.#w.has(e) || (this.#w.add(e), r(e, "selected", () => this.requestUpdate()));
158
161
  });
159
162
  }
160
- #T() {
163
+ #E() {
161
164
  this.#m || (this.#m = !0, queueMicrotask(() => {
162
- this.#m = !1, this.#E(), this.#w(), this.requestUpdate();
165
+ this.#m = !1, this.#D(), this.#T(), this.requestUpdate();
163
166
  }));
164
167
  }
165
- #E() {
168
+ #D() {
166
169
  let e = new Set(this.#i);
167
- for (let t of this.#C) e.has(t) || this.#C.delete(t);
170
+ for (let t of this.#w) e.has(t) || this.#w.delete(t);
168
171
  }
169
- #D(e) {
172
+ #O(e) {
170
173
  e.target.hidden = !1;
171
174
  }
172
- #O() {
175
+ #k() {
173
176
  this.addEventListener("keydown", (e) => {
174
177
  let t = this.input.value.trim();
175
- if (e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && t !== "" && (e.preventDefault(), this.#B(this.#a[0].option), this.#V(this.#i.find((e) => (e.label ? e.label : e.value) === this.#a[0].option))), this.#o.hidePopover()), e.code === "Enter" && this.behaviorCreate && !this.input.disabled && t) {
178
+ if (e.code === "Tab" && (this.#l && this.#o.matches(":popover-open") && t !== "" && (e.preventDefault(), this.#V(this.#a[0].option), this.#H(this.#i.find((e) => (e.label ? e.label : e.value) === this.#a[0].option))), this.#o.hidePopover()), e.code === "Enter" && this.behaviorCreate && !this.input.disabled && t) {
176
179
  let n = this.#f(t);
177
- n ? this.#M(n) : (e.preventDefault(), e.stopImmediatePropagation(), this.#P());
180
+ n ? this.#N(n) : (e.preventDefault(), e.stopImmediatePropagation(), this.#F());
178
181
  }
179
182
  });
180
183
  }
181
- #k() {
182
- this.input.addEventListener("input", () => this.#I()), this.shadowRoot.addEventListener("slotchange", () => this.#I());
184
+ #A() {
185
+ this.input.addEventListener("input", () => this.#L()), this.shadowRoot.addEventListener("slotchange", () => this.#L());
183
186
  }
184
- async #A() {
187
+ async #j() {
185
188
  let e = this.#o;
186
189
  await e.updateComplete, i({
187
190
  element: e.shadowRoot.querySelector("[internal-host]"),
@@ -190,20 +193,22 @@ var S = class extends l {
190
193
  this.#o.matches(":popover-open") && this.#o.hidePopover();
191
194
  });
192
195
  }
193
- #j() {
194
- this.input.addEventListener("pointerdown", () => {
195
- this.#L();
196
+ #M() {
197
+ this.#c?.addEventListener("pointerup", () => {
198
+ this.tagLayout === "wrap" && (this.input.focus(), setTimeout(() => this.#R(), 0));
199
+ }), this.input.addEventListener("pointerdown", () => {
200
+ this.#R();
196
201
  }), this.addEventListener("keydown", (e) => {
197
- e.code !== "Tab" && e.code !== "Escape" && this.#L(), e?.code === "ArrowDown" && this.getRootNode().activeElement === this.input && (this.#o.tabIndex = 0, this.#a[0]?.focus(), e.preventDefault());
202
+ e.code !== "Tab" && e.code !== "Escape" && this.#R(), e?.code === "ArrowDown" && this.getRootNode().activeElement === this.input && (this.#o.tabIndex = 0, this.#a[0]?.focus(), e.preventDefault());
198
203
  });
199
204
  }
200
- #M(n) {
201
- this.#r?.multiple || (this.#B(t(n)), this.#o.hidePopover(), e(this.input)), this.#r && (n.selected = !n.selected, this.#V(n)), this.requestUpdate();
202
- }
203
- #N() {
204
- this.#P();
205
+ #N(n) {
206
+ this.#r?.multiple || (this.#V(t(n)), this.#o.hidePopover(), e(this.input)), this.#r && (n.selected = !n.selected, this.#H(n)), this.requestUpdate();
205
207
  }
206
208
  #P() {
209
+ this.#F();
210
+ }
211
+ #F() {
207
212
  let t = this.input.value.trim();
208
213
  t && (this.dispatchEvent(new CustomEvent("create", {
209
214
  detail: { value: t },
@@ -211,50 +216,50 @@ var S = class extends l {
211
216
  composed: !0
212
217
  })), this.input.value = "", this.#o.hidePopover(), e(this.input), this.requestUpdate());
213
218
  }
214
- #F(e, t) {
219
+ #I(e, t) {
215
220
  return this.#l ? this.input.value.toLowerCase()[t]?.toLowerCase() === e.toLowerCase() : !1;
216
221
  }
217
- #I() {
222
+ #L() {
218
223
  this.#i.forEach((e) => {
219
224
  e.textContent.trim().length ? e.hidden = !e.textContent.toLocaleLowerCase().includes(this.input?.value.toLowerCase()) : e.hidden = !e.value.toLocaleLowerCase().includes(this.input?.value.toLowerCase());
220
225
  }), this.requestUpdate();
221
226
  }
222
- #L() {
223
- !this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#I(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
224
- }
225
227
  #R() {
226
- this.#o.hidePopover(), this._internals.states.delete("dirty"), this.#z();
228
+ !this.input.disabled && !this.#o.matches(":popover-open") && (this.#r ? (this.#i.forEach((e) => e.hidden = !1), this.requestUpdate()) : this.#L(), this.#o.style.setProperty("--min-width", `${this.#s.getBoundingClientRect().width}px`), this.#o.showPopover({ source: this.#s }), this.#o.tabIndex = -1);
227
229
  }
228
230
  #z() {
229
- this.#r && !this.#r.multiple && !this.#i.filter((e) => !(e.value === "" && e.disabled)).find((e) => t(e) === this.input.value) && (this.#i.forEach((e) => e.selected = !1), this.#B(""), this.#V({
231
+ this.#o.hidePopover(), this._internals.states.delete("dirty"), this.#B();
232
+ }
233
+ #B() {
234
+ this.#r && !this.#r.multiple && !this.#i.filter((e) => !(e.value === "" && e.disabled)).find((e) => t(e) === this.input.value) && (this.#i.forEach((e) => e.selected = !1), this.#V(""), this.#H({
230
235
  value: "",
231
236
  selected: !1
232
237
  }));
233
238
  }
234
- #B(e) {
239
+ #V(e) {
235
240
  this.input.value = e, this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
236
241
  }
237
- #V(e) {
242
+ #H(e) {
238
243
  let t = [...this.#i, {
239
244
  value: "",
240
245
  selected: null
241
246
  }].find((t) => t.value === e.value);
242
247
  t && (t.selected = e.selected ?? null), this.#r && !this.#r.multiple && (this.#r.value = e.value), this.#r?.dispatchEvent(new Event("input", { bubbles: !0 })), this.#r?.dispatchEvent(new Event("change", { bubbles: !0 }));
243
248
  }
244
- #H() {
245
- if (this.#r?.multiple && !this.notags) {
246
- this.#r.selectedOptions.length > 1 && this.#U(this.#c.getBoundingClientRect().width);
247
- let e = new ResizeObserver((e) => this.#U(e[0].contentRect.width));
249
+ #U() {
250
+ if (this.#r?.multiple && !this.#h) {
251
+ this.#r.selectedOptions.length > 1 && this.#W(this.#c.getBoundingClientRect().width);
252
+ let e = new ResizeObserver((e) => this.#W(e[0].contentRect.width));
248
253
  this.#p.push(e), e.observe(this.#c);
249
254
  }
250
255
  }
251
- #U(e) {
256
+ #W(e) {
252
257
  this.#r?.multiple && e > this.#s.getBoundingClientRect().width - 100 ? this._internals.states.add("multiple-overflow") : this._internals.states.delete("multiple-overflow");
253
258
  }
254
- #W() {
255
- this.#G(), this.shadowRoot.addEventListener("slotchange", () => this.#G());
256
- }
257
259
  #G() {
260
+ this.#K(), this.shadowRoot.addEventListener("slotchange", () => this.#K());
261
+ }
262
+ #K() {
258
263
  this.#u ? this._internals.states.add("footer-content") : this._internals.states.delete("footer-content");
259
264
  }
260
265
  };
@@ -265,6 +270,10 @@ a([b({
265
270
  type: Boolean,
266
271
  reflect: !0
267
272
  })], S.prototype, "notags", void 0), a([b({
273
+ type: String,
274
+ reflect: !0,
275
+ attribute: "tag-layout"
276
+ })], S.prototype, "tagLayout", void 0), a([b({
268
277
  type: Boolean,
269
278
  reflect: !0,
270
279
  attribute: "behavior-create"
@@ -1 +1 @@
1
- {"version":3,"file":"combobox2.js","names":["#datalist","#_datalist","#select","#_select","#options","#items","#dropdown","#input","#tags","#hasAvailableOptions","#hasFooterContent","#showCreateItem","#findOptionMatch","#selectValue","#largeOptionsList","#isPristine","#onDropdownOpen","#closeListBox","#getOptionCheckbox","#characterAtIndexMatches","#onCreateItemClick","#onSlottedChildMutation","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","#observers","#setupInitialValue","#syncSelectValueStates","#syncOptionSelectedStates","#updateInputValue","#trackedOptions","#syncPending","#cleanupStaleTrackedOptions","#setInputValue","#setSelectValue","#dispatchCreate","#filterOptions","#openListBox","#validateSingleSelectValue","#updateMultipleOverflow","#setSlotStates"],"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 {\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\n/**\n * @element nve-combobox\n * @description An editable combobox with autocomplete behavior and selection support.\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 /**\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 /** Disable rendering of inline tags for many-item select */\n @property({ type: Boolean, reflect: true }) notags: boolean;\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.notags\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 #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.#onDropdownOpen} @close=${this.#closeListBox} hidden .anchor=${this.#input as HTMLElement} .trigger=${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', () => {\n this.#_datalist = null;\n this.#_select = null;\n this.#onSlottedChildMutation();\n });\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(mutations => {\n if (mutations.some(m => m.type === 'childList' && m.target === this)) {\n this.#_datalist = null;\n this.#_select = null;\n }\n this.#onSlottedChildMutation();\n });\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 }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(observer => observer.disconnect());\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 this.#syncOptionSelectedStates();\n }\n }\n\n #setupMultipleSelect() {\n if (this.#select?.multiple) {\n this.#setupInitialValue();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\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 Set<HTMLOptionElement>();\n #syncOptionSelectedStates() {\n this.#options.forEach(o => {\n if (!this.#trackedOptions.has(o)) {\n this.#trackedOptions.add(o);\n getPropertyChanges(o, 'selected', () => this.requestUpdate());\n }\n });\n }\n\n #onSlottedChildMutation() {\n if (!this.#syncPending) {\n this.#syncPending = true;\n queueMicrotask(() => {\n this.#syncPending = false;\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 of this.#trackedOptions) {\n if (!currentOptions.has(tracked)) {\n this.#trackedOptions.delete(tracked);\n }\n }\n }\n\n #onDropdownOpen(e: Event) {\n (e.target as HTMLElement).hidden = false;\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.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 #closeListBox() {\n this.#dropdown!.hidePopover();\n this._internals.states.delete('dirty');\n this.#validateSingleSelectValue();\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.notags) {\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":";;;;;;;;;;;;;;;;;;;AA4DO,IAAA,IAAA,cAAuB,EAAoC;;yBAwGZ,CAAC,aACtC,8BAEgB,8BA2Kb,IAAI,IAAuB;;;gBAzQ7B,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;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,IAAIA,KAAsC;EAUxC,OATA,AACE,KAAKC,OAAa,KAAK,aACjB,KAAK,WACJ,cAAc,MAAM,GACnB,iBAAiB,EAAE,SAAS,GAAK,CAAC,GAClC,MAAK,MAAK,EAAE,YAAY,cAAc,EAAE,YAAY,QAAQ,KAC9D,KAAK,cAAc,kBAAkB,IACvC,MAEC,KAAKA;CACd;CAEA;CACA,IAAIC,KAAoC;EAStC,OARA,AACE,KAAKC,OAAW,KAAK,aACf,KAAK,WACJ,cAAc,MAAM,GACnB,iBAAiB,EAAE,SAAS,GAAK,CAAC,GAClC,MAAK,MAAK,EAAE,YAAY,QAAQ,KAAK,KAAK,cAAc,QAAQ,IACpE,MAEC,KAAKA;CACd;CAEA,IAAIC,KAAgC;EAClC,OAAO,MAAM,KAAK,KAAKJ,IAAW,UAAU,KAAKA,GAAU,UAAU,CAAC,CAAC;CACzE;CAEA,IAAIK,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,WAAY,iBAA2B,EAAS,SAAS,GAAG,CAAC;CACtF;CAEA,IAAIC,KAAY;EACd,OAAO,KAAK,WAAY,cAAwB,EAAS,SAAS,GAAG;CACvE;CAEA,IAAIC,KAAS;EACX,OAAO,KAAK,WAAY,cAAc,SAAS;CACjD;CAEA,IAAIC,KAAQ;EACV,OAAO,KAAK,WAAY,cAAc,OAAO;CAC/C;CAEA,IAAIC,KAAuB;EACzB,OAAO,KAAKL,GAAS,MAAK,MAAK,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM;CACzD;CAEA,IAAIM,KAAoB;EACtB,OAAO,CAAC,CAAC,KAAK,cAAc,mBAAiB;CAC/C;CAEA,IAAIC,KAA2B;EAC7B,IAAI,CAAC,KAAK,kBAAkB,KAAK,OAAO,UAAU,OAAO;EACzD,IAAM,IAAQ,KAAK,OAAO,MAAM,KAAK;EAErC,OADK,IACE,CAAC,KAAKC,GAAiB,CAAK,IADhB;CAErB;CAEA,GAAiB,GAA8C;EAC7D,IAAM,IAAQ,EAAM,YAAY;EAChC,OAAO,KAAKR,GAAS,MAAK,OACR,EAAE,YAAa,KAAK,KAAK,EAAE,OAC5B,YAAY,MAAM,KAAS,EAAE,MAAM,YAAY,MAAM,CACrE;CACH;CAEA;CACA;CAIA,IAAc,gBAAgB;EAC5B,OAAO,KAAKF,IAAS,YAAY,CAAC,KAAK,SACnC,CAAI,8CACqC,KAAKA,GAAQ,gBAAgB,OAAO,GAAG,KAAK,KAAK,SAAS,0BAEnG,MAAM,KAAwB,KAAKA,GAAQ,eAAe,EAAE,KAC5D,MAAK,CAAI,+EACuD,EAAE,MAAM,kBAAgB,KAAKW,GAAa,CAAC,EAAE,IAAG,EAAgB,CAAC,EAAE,WACrI,EAAE,UAEA,CAAI;CACV;CAEA,IAAIC,KAAoB;EACtB,QAAQ,KAAKd,IAAW,SAAS,UAAU,KAAK;CAClD;CAEA,IAAIe,KAAc;EAChB,OAAO,CAAC,KAAK,WAAW,OAAO,IAAI,OAAO;CAC5C;CAEA,IAAc,gBAAgB;EAC5B,IAAI,GAAU,OAAO;EACrB,IAAM,IAAU,KAAKX,IACf,IAAmB,KAAKU,IACxB,IAAa,KAAKC,IAClB,IAAiB,EAAQ,QAAO,MAAK,CAAC,EAAE,MAAM,EAAE,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,GAC3F,IAAe,EAAe,QAAO,MAAK,CAAC,EAAE,QAAQ,EAAE,WAAW,GAClE,IAAiB,KAAKJ;EAC5B,OAAO,CAAI,+CACkC,SAAS,YAAU,GAAM,WAAS,KAAKK,GAAgB,YAAU,KAAKC,GAAc,oBAAkB,KAAKV,GAAsB,cAAY,KAAKA,GAAsB,oHACjH,EAAU,KAAK,KAAK,MAAM,EAAE,IAC1H,EAAe,KACf,MAAK,CAAI,4CACiC,EAAgB,CAAC,EAAE,gCAA8B,KAAKM,GAAa,CAAC,EAAE,eAAa,EAAE,SAAS,mBAAiB,EAAE,WAAW,SAAS,QAAQ,eAAa,EAAE,SAAS,gBAAc,EAAgB,CAAC,EAAE,IAC5O,KAAKK,GAAmB,CAAC,EAAE,GAC3B,KAAoB,IAAa,EAAgB,CAAC,IAAI,CAAI,8BAA8B,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,KAAK,GAAG,MAAO,CAAI,mBAAkB,KAAKC,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,KAAKC,GAAmB,2DACpG,KAAK,OAAO,MAAM,KAAK,EAAE,qBAE/E,EACL;CAIP;CAEA,GAAmB,GAAsB;EACvC,IAAM,IAAS,KAAKlB;EASlB,OARE,GAAQ,YAAY,KAAKY,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;EAiB9C,AAhBA,MAAM,aAAa,CAAK,GACxB,KAAK,WAAY,iBAAiB,oBAAoB;GAGpD,AAFA,KAAKb,KAAa,MAClB,KAAKE,KAAW,MAChB,KAAKkB,GAAwB;EAC/B,CAAC,GACD,MAAM,KAAK,gBACX,KAAKC,GAAmB,GACxB,KAAKC,GAAqB,GAC1B,KAAKC,GAA4B,GACjC,KAAKC,GAA2B,GAChC,KAAKC,GAAoB,GACzB,KAAKC,GAAuB,GAC5B,KAAKC,GAAiB,GACtB,MAAM,KAAKC,GAAmB,GAC9B,KAAK,MAAM,aAAa,QAAQ,EAAE,GAClC,KAAK,MAAM,eAAe;CAC5B;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,IAAM,IAAW,IAAI,kBAAiB,MAAa;GAKjD,AAJI,EAAU,MAAK,MAAK,EAAE,SAAS,eAAe,EAAE,WAAW,IAAI,MACjE,KAAK5B,KAAa,MAClB,KAAKE,KAAW,OAElB,KAAKkB,GAAwB;EAC/B,CAAC;EAQD,AAPA,EAAS,QAAQ,MAAM;GACrB,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB;IAAC;IAAY;IAAY;GAAO;GACjD,eAAe;EACjB,CAAC,GACD,KAAKS,GAAW,KAAK,CAAQ;CAC/B;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAKA,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC;CAC3D;CAEA,QAAQ;EAKN,AAJA,KAAKxB,GAAW,YAAY,GACxB,KAAKJ,OACP,KAAKA,GAAQ,gBAAgB,KAE/B,MAAM,MAAM;CACd;CAGA,YAAY;EAIV,AAHA,KAAKE,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAK,GAC9C,KAAK,cAAc,GACnB,KAAKF,GAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAKA,GAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAqB;EACnB,AAAI,KAAKA,MAAW,CAAC,KAAKA,GAAQ,aAChC,KAAK6B,GAAmB,GACxB,KAAKC,GAAuB,GAC5B,KAAKC,GAA0B;CAEnC;CAEA,KAAuB;EACrB,AAAI,KAAK/B,IAAS,aAChB,KAAK6B,GAAmB,GACxB,KAAKC,GAAuB,GAC5B,KAAKC,GAA0B,GAC/B,KAAK,WAAW,OAAO,IAAI,UAAU;CAEzC;CAEA,KAAqB;EACnB,IAAM,IAAW,MAAM,KAAK,KAAK/B,GAAS,eAAe,EAAE,MAAM,MAC/D,EAAE,aAAa,UAAU,CAC3B;EACA,AAAI,KAAY,CAAC,KAAKA,GAAS,YAAY,CAAC,KAAK,MAAM,iBACrD,KAAK,MAAM,QAAQ,EAAgB,CAAQ;CAE/C;CAEA,KAAoB;EAClB,AAAI,CAAC,KAAKA,GAAS,YAAY,CAAC,KAAK,MAAM,iBACzC,KAAK,MAAM,QAAQ,EACjB,MAAM,KAAK,KAAKA,GAAS,eAAe,EAAE,MAAK,MAAK,EAAE,UAAU,KAAKA,GAAS,KAAK,CACrF;CAEJ;CAEA,KAAyB;EACvB,KAAK4B,GAAW,KACd,EAAiB,KAAK5B,IAAU,eAAe;GAE7C,AADA,KAAKgC,GAAkB,GACvB,KAAK,cAAc;EACrB,CAAC,CACH;CACF;CAEA;CACA,KAA4B;EAC1B,KAAK9B,GAAS,SAAQ,MAAK;GACzB,AAAK,KAAK+B,GAAgB,IAAI,CAAC,MAC7B,KAAKA,GAAgB,IAAI,CAAC,GAC1B,EAAmB,GAAG,kBAAkB,KAAK,cAAc,CAAC;EAEhE,CAAC;CACH;CAEA,KAA0B;EACxB,AAAK,KAAKC,OACR,KAAKA,KAAe,IACpB,qBAAqB;GAInB,AAHA,KAAKA,KAAe,IACpB,KAAKC,GAA4B,GACjC,KAAKJ,GAA0B,GAC/B,KAAK,cAAc;EACrB,CAAC;CAEL;CAEA,KAA8B;EAC5B,IAAM,IAAiB,IAAI,IAAI,KAAK7B,EAAQ;EAC5C,KAAK,IAAM,KAAW,KAAK+B,IACzB,AAAK,EAAe,IAAI,CAAO,KAC7B,KAAKA,GAAgB,OAAO,CAAO;CAGzC;CAEA,GAAgB,GAAU;EACxB,EAAG,OAAuB,SAAS;CACrC;CAEA,KAA8B;EAC5B,KAAK,iBAAiB,YAAY,MAAqB;GACrD,IAAM,IAAQ,KAAK,MAAM,MAAM,KAAK;GAgBpC,IAdI,EAAE,SAAS,UACT,KAAK1B,MAAwB,KAAKH,GAAW,QAAQ,eAAe,KAAK,MAAU,OACrF,EAAE,eAAe,GAEjB,KAAKgC,GAAgB,KAAKjC,GAAO,GAAqC,MAAM,GAC5E,KAAKkC,GACH,KAAKnC,GAAS,MACZ,OAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAY,KAAKC,GAAO,GAAqC,MAC3F,CACF,IAEF,KAAKC,GAAW,YAAY,IAG1B,EAAE,SAAS,WAAW,KAAK,kBAAkB,CAAC,KAAK,MAAM,YAAY,GAAO;IAC9E,IAAM,IAAQ,KAAKM,GAAiB,CAAK;IACzC,AAAI,IACF,KAAKC,GAAa,CAAK,KAEvB,EAAE,eAAe,GACjB,EAAE,yBAAyB,GAC3B,KAAK2B,GAAgB;GAEzB;EACF,CAAC;CACH;CAEA,KAA6B;EAE3B,AADA,KAAK,MAAM,iBAAiB,eAAe,KAAKC,GAAe,CAAC,GAChE,KAAK,WAAY,iBAAiB,oBAAoB,KAAKA,GAAe,CAAC;CAC7E;CAEA,MAAMZ,KAAqB;EACzB,IAAM,IAAW,KAAKvB;EAMtB,AALA,MAAM,EAAS,gBAKf,EAAmB;GAHjB,SAAS,EAAS,WAAY,cAA2B,iBAAiB;GAC1E,cAAc,KAAK;EAEF,SAAe;GAChC,AAAI,KAAKA,GAAW,QAAQ,eAAe,KACzC,KAAKA,GAAW,YAAY;EAEhC,CAAC;CACH;CAEA,KAAsB;EAKpB,AAJA,KAAK,MAAM,iBAAiB,qBAAqB;GAC/C,KAAKoC,GAAa;EACpB,CAAC,GAED,KAAK,iBAAiB,YAAY,MAAqB;GAKrD,AAJI,EAAE,SAAS,SAAS,EAAE,SAAS,YACjC,KAAKA,GAAa,GAGhB,GAAG,SAAS,eAAgB,KAAK,YAAY,EAAiB,kBAAkB,KAAK,UACvF,KAAKpC,GAAW,WAAW,GAC3B,KAAKD,GAAO,IAAI,MAAM,GACtB,EAAE,eAAe;EAErB,CAAC;CACH;CAEA,GAAa,GAAgE;EAY3E,AAXK,KAAKH,IAAS,aACjB,KAAKoC,GAAe,EAAgB,CAAM,CAAC,GAC3C,KAAKhC,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,IAG5B,KAAKJ,OACP,EAAO,WAAW,CAAC,EAAO,UAC1B,KAAKqC,GAAgB,CAAM,IAG7B,KAAK,cAAc;CACrB;CAEA,KAAqB;EACnB,KAAKC,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,KAAKlC,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,GAC9B,KAAK,cAAc;CAEvB;CAEA,GAAyB,GAAmB,GAAe;EAIzD,OAHI,KAAKG,KACA,KAAK,MAAM,MAAM,YAAY,EAAE,IAAQ,YAAY,MAAM,EAAU,YAAY,IAEjF;CACT;CAEA,KAAiB;EAWf,AAVA,KAAKL,GAAS,SAAQ,MAAU;GAE9B,AADiB,EAAO,YAAa,KAAK,EAAE,SAG1C,EAAO,SAAS,CADK,EAAO,YAAa,kBAAkB,EAAE,SAAS,KAAK,OAAO,MAAM,YAAY,CACnF,IAGjB,EAAO,SAAS,CADK,EAAO,MAAM,kBAAkB,EAAE,SAAS,KAAK,OAAO,MAAM,YAAY,CAC5E;EAErB,CAAC,GACD,KAAK,cAAc;CACrB;CAEA,KAAe;EACb,AAAI,CAAC,KAAK,MAAM,YAAY,CAAC,KAAKE,GAAW,QAAQ,eAAe,MAC9D,KAAKJ,MACP,KAAKE,GAAS,SAAQ,MAAW,EAAO,SAAS,EAAM,GACvD,KAAK,cAAc,KAEnB,KAAKqC,GAAe,GAEtB,KAAKnC,GAAW,MAAM,YAAY,eAAe,GAAG,KAAKC,GAAQ,sBAAsB,EAAE,MAAM,GAAG,GAElG,KAAKD,GAAW,YAAY,EAAE,QAAQ,KAAKC,GAAsB,CAAC,GAClE,KAAKD,GAAW,WAAW;CAE/B;CAEA,KAAgB;EAGd,AAFA,KAAKA,GAAW,YAAY,GAC5B,KAAK,WAAW,OAAO,OAAO,OAAO,GACrC,KAAKqC,GAA2B;CAClC;CAEA,KAA6B;EAK3B,AAHE,KAAKzC,MACL,CAAC,KAAKA,GAAQ,YACd,CAAC,KAAKE,GAAS,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,EAAE,MAAK,MAAK,EAAgB,CAAC,MAAM,KAAK,MAAM,KAAK,MAE7G,KAAKA,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAM,GAC/C,KAAKkC,GAAe,EAAE,GACtB,KAAKC,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,KAAKnC,IAAU;GAAE,OAAO;GAAI,UAAU;EAAuB,CAAC,EAAE,MAChF,MAAK,EAAE,UAAU,EAAO,KAC1B;EAQA,AAPI,MAAO,EAAM,WAAW,EAAO,YAAY,OAE3C,KAAKF,MAAW,CAAC,KAAKA,GAAQ,aAChC,KAAKA,GAAQ,QAAQ,EAAO,QAG9B,KAAKA,IAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAKA,IAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAyB;EACvB,IAAI,KAAKA,IAAS,YAAY,CAAC,KAAK,QAAQ;GAC1C,AAAI,KAAKA,GAAQ,gBAAgB,SAAS,KAExC,KAAK0C,GAAwB,KAAKpC,GAAO,sBAAsB,EAAE,KAAK;GAExE,IAAM,IAAW,IAAI,gBAAe,MAAW,KAAKoC,GAAwB,EAAQ,GAAI,YAAY,KAAK,CAAC;GAE1G,AADA,KAAKd,GAAW,KAAK,CAAQ,GAC7B,EAAS,QAAQ,KAAKtB,EAAM;EAC9B;CACF;CAEA,GAAwB,GAAkB;EAExC,AAAI,KAAKN,IAAS,YAAY,IAAW,KAAKK,GAAQ,sBAAsB,EAAE,QAAQ,MACpF,KAAK,WAAW,OAAO,IAAI,mBAAmB,IAE9C,KAAK,WAAW,OAAO,OAAO,mBAAmB;CAErD;CAEA,KAAmB;EAEjB,AADA,KAAKsC,GAAe,GACpB,KAAK,WAAY,iBAAiB,oBAAoB,KAAKA,GAAe,CAAC;CAC7E;CAEA,KAAiB;EACf,AAAI,KAAKnC,KACP,KAAK,WAAW,OAAO,IAAI,gBAAgB,IAE3C,KAAK,WAAW,OAAO,OAAO,gBAAgB;CAElD;AACF;GAjgBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,UAZzE,EAAe,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"combobox2.js","names":["#datalist","#_datalist","#select","#_select","#options","#items","#dropdown","#input","#tags","#hasAvailableOptions","#hasFooterContent","#showCreateItem","#findOptionMatch","#tagLayoutIsHidden","#selectValue","#largeOptionsList","#isPristine","#onDropdownOpen","#closeListBox","#getOptionCheckbox","#characterAtIndexMatches","#onCreateItemClick","#onSlottedChildMutation","#setupSingleSelect","#setupMultipleSelect","#setupAutoCompleteKeyEvents","#setupMenuItemUpdateEvents","#setupOpenKeyEvents","#setupOverflowListener","#setupSlotStates","#setupLightDismiss","#observers","#setupInitialValue","#syncSelectValueStates","#syncOptionSelectedStates","#updateInputValue","#trackedOptions","#syncPending","#cleanupStaleTrackedOptions","#setInputValue","#setSelectValue","#dispatchCreate","#filterOptions","#openListBox","#validateSingleSelectValue","#updateMultipleOverflow","#setSlotStates"],"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 {\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\n/**\n * @element nve-combobox\n * @description An editable combobox with autocomplete behavior and selection support.\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 /**\n * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n * Use when embedding within another container such as a toolbar.\n */\n @property({ type: String, reflect: true }) container: 'flat';\n\n /**\n * @deprecated Use `tagLayout = 'hidden'` or `tag-layout=\"hidden\"` instead.\n *\n * Disable rendering of inline tags for many-item select\n */\n @property({ type: Boolean, reflect: true }) notags: boolean;\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.notags || 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.#onDropdownOpen} @close=${this.#closeListBox} hidden .anchor=${this.#input as HTMLElement} .trigger=${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', () => {\n this.#_datalist = null;\n this.#_select = null;\n this.#onSlottedChildMutation();\n });\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(mutations => {\n if (mutations.some(m => m.type === 'childList' && m.target === this)) {\n this.#_datalist = null;\n this.#_select = null;\n }\n this.#onSlottedChildMutation();\n });\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 }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#observers.forEach(observer => observer.disconnect());\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 this.#syncOptionSelectedStates();\n }\n }\n\n #setupMultipleSelect() {\n if (this.#select?.multiple) {\n this.#setupInitialValue();\n this.#syncSelectValueStates();\n this.#syncOptionSelectedStates();\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 Set<HTMLOptionElement>();\n #syncOptionSelectedStates() {\n this.#options.forEach(o => {\n if (!this.#trackedOptions.has(o)) {\n this.#trackedOptions.add(o);\n getPropertyChanges(o, 'selected', () => this.requestUpdate());\n }\n });\n }\n\n #onSlottedChildMutation() {\n if (!this.#syncPending) {\n this.#syncPending = true;\n queueMicrotask(() => {\n this.#syncPending = false;\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 of this.#trackedOptions) {\n if (!currentOptions.has(tracked)) {\n this.#trackedOptions.delete(tracked);\n }\n }\n }\n\n #onDropdownOpen(e: Event) {\n (e.target as HTMLElement).hidden = false;\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 #closeListBox() {\n this.#dropdown!.hidePopover();\n this._internals.states.delete('dirty');\n this.#validateSingleSelectValue();\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":";;;;;;;;;;;;;;;;;;;AA4DO,IAAA,IAAA,cAAuB,EAAoC;;yBA+GZ,CAAC,aACtC,8BAEgB,8BA+Kb,IAAI,IAAuB;;;gBA7Q7B,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;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,IAAIA,KAAsC;EAUxC,OATA,AACE,KAAKC,OAAa,KAAK,aACjB,KAAK,WACJ,cAAc,MAAM,GACnB,iBAAiB,EAAE,SAAS,GAAK,CAAC,GAClC,MAAK,MAAK,EAAE,YAAY,cAAc,EAAE,YAAY,QAAQ,KAC9D,KAAK,cAAc,kBAAkB,IACvC,MAEC,KAAKA;CACd;CAEA;CACA,IAAIC,KAAoC;EAStC,OARA,AACE,KAAKC,OAAW,KAAK,aACf,KAAK,WACJ,cAAc,MAAM,GACnB,iBAAiB,EAAE,SAAS,GAAK,CAAC,GAClC,MAAK,MAAK,EAAE,YAAY,QAAQ,KAAK,KAAK,cAAc,QAAQ,IACpE,MAEC,KAAKA;CACd;CAEA,IAAIC,KAAgC;EAClC,OAAO,MAAM,KAAK,KAAKJ,IAAW,UAAU,KAAKA,GAAU,UAAU,CAAC,CAAC;CACzE;CAEA,IAAIK,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,WAAY,iBAA2B,EAAS,SAAS,GAAG,CAAC;CACtF;CAEA,IAAIC,KAAY;EACd,OAAO,KAAK,WAAY,cAAwB,EAAS,SAAS,GAAG;CACvE;CAEA,IAAIC,KAAS;EACX,OAAO,KAAK,WAAY,cAAc,SAAS;CACjD;CAEA,IAAIC,KAAQ;EACV,OAAO,KAAK,WAAY,cAAc,OAAO;CAC/C;CAEA,IAAIC,KAAuB;EACzB,OAAO,KAAKL,GAAS,MAAK,MAAK,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM;CACzD;CAEA,IAAIM,KAAoB;EACtB,OAAO,CAAC,CAAC,KAAK,cAAc,mBAAiB;CAC/C;CAEA,IAAIC,KAA2B;EAC7B,IAAI,CAAC,KAAK,kBAAkB,KAAK,OAAO,UAAU,OAAO;EACzD,IAAM,IAAQ,KAAK,OAAO,MAAM,KAAK;EAErC,OADK,IACE,CAAC,KAAKC,GAAiB,CAAK,IADhB;CAErB;CAEA,GAAiB,GAA8C;EAC7D,IAAM,IAAQ,EAAM,YAAY;EAChC,OAAO,KAAKR,GAAS,MAAK,OACR,EAAE,YAAa,KAAK,KAAK,EAAE,OAC5B,YAAY,MAAM,KAAS,EAAE,MAAM,YAAY,MAAM,CACrE;CACH;CAEA;CACA;CAIA,IAAc,gBAAgB;EAC5B,OAAO,KAAKF,IAAS,YAAY,CAAC,KAAKW,KACnC,CAAI,8CACqC,KAAKX,GAAQ,gBAAgB,OAAO,GAAG,KAAK,KAAK,SAAS,0BAEnG,MAAM,KAAwB,KAAKA,GAAQ,eAAe,EAAE,KAC5D,MAAK,CAAI,+EACuD,EAAE,MAAM,kBAAgB,KAAKY,GAAa,CAAC,EAAE,IAAG,EAAgB,CAAC,EAAE,WACrI,EAAE,UAEA,CAAI;CACV;CAEA,IAAID,KAAqB;EACvB,OAAO,KAAK,UAAU,KAAK,cAAc;CAC3C;CAEA,IAAIE,KAAoB;EACtB,QAAQ,KAAKf,IAAW,SAAS,UAAU,KAAK;CAClD;CAEA,IAAIgB,KAAc;EAChB,OAAO,CAAC,KAAK,WAAW,OAAO,IAAI,OAAO;CAC5C;CAEA,IAAc,gBAAgB;EAC5B,IAAI,GAAU,OAAO;EACrB,IAAM,IAAU,KAAKZ,IACf,IAAmB,KAAKW,IACxB,IAAa,KAAKC,IAClB,IAAiB,EAAQ,QAAO,MAAK,CAAC,EAAE,MAAM,EAAE,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,GAC3F,IAAe,EAAe,QAAO,MAAK,CAAC,EAAE,QAAQ,EAAE,WAAW,GAClE,IAAiB,KAAKL;EAC5B,OAAO,CAAI,+CACkC,SAAS,YAAU,GAAM,WAAS,KAAKM,GAAgB,YAAU,KAAKC,GAAc,oBAAkB,KAAKX,GAAsB,cAAY,KAAKA,GAAsB,oHACjH,EAAU,KAAK,KAAK,MAAM,EAAE,IAC1H,EAAe,KACf,MAAK,CAAI,4CACiC,EAAgB,CAAC,EAAE,gCAA8B,KAAKO,GAAa,CAAC,EAAE,eAAa,EAAE,SAAS,mBAAiB,EAAE,WAAW,SAAS,QAAQ,eAAa,EAAE,SAAS,gBAAc,EAAgB,CAAC,EAAE,IAC5O,KAAKK,GAAmB,CAAC,EAAE,GAC3B,KAAoB,IAAa,EAAgB,CAAC,IAAI,CAAI,8BAA8B,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,KAAK,GAAG,MAAO,CAAI,mBAAkB,KAAKC,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,KAAKC,GAAmB,2DACpG,KAAK,OAAO,MAAM,KAAK,EAAE,qBAE/E,EACL;CAIP;CAEA,GAAmB,GAAsB;EACvC,IAAM,IAAS,KAAKnB;EASlB,OARE,GAAQ,YAAY,KAAKa,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;EAiB9C,AAhBA,MAAM,aAAa,CAAK,GACxB,KAAK,WAAY,iBAAiB,oBAAoB;GAGpD,AAFA,KAAKd,KAAa,MAClB,KAAKE,KAAW,MAChB,KAAKmB,GAAwB;EAC/B,CAAC,GACD,MAAM,KAAK,gBACX,KAAKC,GAAmB,GACxB,KAAKC,GAAqB,GAC1B,KAAKC,GAA4B,GACjC,KAAKC,GAA2B,GAChC,KAAKC,GAAoB,GACzB,KAAKC,GAAuB,GAC5B,KAAKC,GAAiB,GACtB,MAAM,KAAKC,GAAmB,GAC9B,KAAK,MAAM,aAAa,QAAQ,EAAE,GAClC,KAAK,MAAM,eAAe;CAC5B;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,IAAM,IAAW,IAAI,kBAAiB,MAAa;GAKjD,AAJI,EAAU,MAAK,MAAK,EAAE,SAAS,eAAe,EAAE,WAAW,IAAI,MACjE,KAAK7B,KAAa,MAClB,KAAKE,KAAW,OAElB,KAAKmB,GAAwB;EAC/B,CAAC;EAQD,AAPA,EAAS,QAAQ,MAAM;GACrB,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB;IAAC;IAAY;IAAY;GAAO;GACjD,eAAe;EACjB,CAAC,GACD,KAAKS,GAAW,KAAK,CAAQ;CAC/B;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAKA,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC;CAC3D;CAEA,QAAQ;EAKN,AAJA,KAAKzB,GAAW,YAAY,GACxB,KAAKJ,OACP,KAAKA,GAAQ,gBAAgB,KAE/B,MAAM,MAAM;CACd;CAGA,YAAY;EAIV,AAHA,KAAKE,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAK,GAC9C,KAAK,cAAc,GACnB,KAAKF,GAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAKA,GAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAqB;EACnB,AAAI,KAAKA,MAAW,CAAC,KAAKA,GAAQ,aAChC,KAAK8B,GAAmB,GACxB,KAAKC,GAAuB,GAC5B,KAAKC,GAA0B;CAEnC;CAEA,KAAuB;EACrB,AAAI,KAAKhC,IAAS,aAChB,KAAK8B,GAAmB,GACxB,KAAKC,GAAuB,GAC5B,KAAKC,GAA0B,GAC/B,KAAK,WAAW,OAAO,IAAI,UAAU;CAEzC;CAEA,KAAqB;EACnB,IAAM,IAAW,MAAM,KAAK,KAAKhC,GAAS,eAAe,EAAE,MAAM,MAC/D,EAAE,aAAa,UAAU,CAC3B;EACA,AAAI,KAAY,CAAC,KAAKA,GAAS,YAAY,CAAC,KAAK,MAAM,iBACrD,KAAK,MAAM,QAAQ,EAAgB,CAAQ;CAE/C;CAEA,KAAoB;EAClB,AAAI,CAAC,KAAKA,GAAS,YAAY,CAAC,KAAK,MAAM,iBACzC,KAAK,MAAM,QAAQ,EACjB,MAAM,KAAK,KAAKA,GAAS,eAAe,EAAE,MAAK,MAAK,EAAE,UAAU,KAAKA,GAAS,KAAK,CACrF;CAEJ;CAEA,KAAyB;EACvB,KAAK6B,GAAW,KACd,EAAiB,KAAK7B,IAAU,eAAe;GAE7C,AADA,KAAKiC,GAAkB,GACvB,KAAK,cAAc;EACrB,CAAC,CACH;CACF;CAEA;CACA,KAA4B;EAC1B,KAAK/B,GAAS,SAAQ,MAAK;GACzB,AAAK,KAAKgC,GAAgB,IAAI,CAAC,MAC7B,KAAKA,GAAgB,IAAI,CAAC,GAC1B,EAAmB,GAAG,kBAAkB,KAAK,cAAc,CAAC;EAEhE,CAAC;CACH;CAEA,KAA0B;EACxB,AAAK,KAAKC,OACR,KAAKA,KAAe,IACpB,qBAAqB;GAInB,AAHA,KAAKA,KAAe,IACpB,KAAKC,GAA4B,GACjC,KAAKJ,GAA0B,GAC/B,KAAK,cAAc;EACrB,CAAC;CAEL;CAEA,KAA8B;EAC5B,IAAM,IAAiB,IAAI,IAAI,KAAK9B,EAAQ;EAC5C,KAAK,IAAM,KAAW,KAAKgC,IACzB,AAAK,EAAe,IAAI,CAAO,KAC7B,KAAKA,GAAgB,OAAO,CAAO;CAGzC;CAEA,GAAgB,GAAU;EACxB,EAAG,OAAuB,SAAS;CACrC;CAEA,KAA8B;EAC5B,KAAK,iBAAiB,YAAY,MAAqB;GACrD,IAAM,IAAQ,KAAK,MAAM,MAAM,KAAK;GAgBpC,IAdI,EAAE,SAAS,UACT,KAAK3B,MAAwB,KAAKH,GAAW,QAAQ,eAAe,KAAK,MAAU,OACrF,EAAE,eAAe,GAEjB,KAAKiC,GAAgB,KAAKlC,GAAO,GAAqC,MAAM,GAC5E,KAAKmC,GACH,KAAKpC,GAAS,MACZ,OAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAY,KAAKC,GAAO,GAAqC,MAC3F,CACF,IAEF,KAAKC,GAAW,YAAY,IAG1B,EAAE,SAAS,WAAW,KAAK,kBAAkB,CAAC,KAAK,MAAM,YAAY,GAAO;IAC9E,IAAM,IAAQ,KAAKM,GAAiB,CAAK;IACzC,AAAI,IACF,KAAKE,GAAa,CAAK,KAEvB,EAAE,eAAe,GACjB,EAAE,yBAAyB,GAC3B,KAAK2B,GAAgB;GAEzB;EACF,CAAC;CACH;CAEA,KAA6B;EAE3B,AADA,KAAK,MAAM,iBAAiB,eAAe,KAAKC,GAAe,CAAC,GAChE,KAAK,WAAY,iBAAiB,oBAAoB,KAAKA,GAAe,CAAC;CAC7E;CAEA,MAAMZ,KAAqB;EACzB,IAAM,IAAW,KAAKxB;EAMtB,AALA,MAAM,EAAS,gBAKf,EAAmB;GAHjB,SAAS,EAAS,WAAY,cAA2B,iBAAiB;GAC1E,cAAc,KAAK;EAEF,SAAe;GAChC,AAAI,KAAKA,GAAW,QAAQ,eAAe,KACzC,KAAKA,GAAW,YAAY;EAEhC,CAAC;CACH;CAEA,KAAsB;EAWpB,AAVA,KAAKE,IAAO,iBAAiB,mBAAmB;GAC1C,KAAK,cAAc,WACvB,KAAK,MAAM,MAAM,GACjB,iBAAiB,KAAKmC,GAAa,GAAG,CAAC;EACzC,CAAC,GAED,KAAK,MAAM,iBAAiB,qBAAqB;GAC/C,KAAKA,GAAa;EACpB,CAAC,GAED,KAAK,iBAAiB,YAAY,MAAqB;GAKrD,AAJI,EAAE,SAAS,SAAS,EAAE,SAAS,YACjC,KAAKA,GAAa,GAGhB,GAAG,SAAS,eAAgB,KAAK,YAAY,EAAiB,kBAAkB,KAAK,UACvF,KAAKrC,GAAW,WAAW,GAC3B,KAAKD,GAAO,IAAI,MAAM,GACtB,EAAE,eAAe;EAErB,CAAC;CACH;CAEA,GAAa,GAAgE;EAY3E,AAXK,KAAKH,IAAS,aACjB,KAAKqC,GAAe,EAAgB,CAAM,CAAC,GAC3C,KAAKjC,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,IAG5B,KAAKJ,OACP,EAAO,WAAW,CAAC,EAAO,UAC1B,KAAKsC,GAAgB,CAAM,IAG7B,KAAK,cAAc;CACrB;CAEA,KAAqB;EACnB,KAAKC,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,KAAKnC,GAAW,YAAY,GAC5B,EAAoB,KAAK,KAAK,GAC9B,KAAK,cAAc;CAEvB;CAEA,GAAyB,GAAmB,GAAe;EAIzD,OAHI,KAAKG,KACA,KAAK,MAAM,MAAM,YAAY,EAAE,IAAQ,YAAY,MAAM,EAAU,YAAY,IAEjF;CACT;CAEA,KAAiB;EAWf,AAVA,KAAKL,GAAS,SAAQ,MAAU;GAE9B,AADiB,EAAO,YAAa,KAAK,EAAE,SAG1C,EAAO,SAAS,CADK,EAAO,YAAa,kBAAkB,EAAE,SAAS,KAAK,OAAO,MAAM,YAAY,CACnF,IAGjB,EAAO,SAAS,CADK,EAAO,MAAM,kBAAkB,EAAE,SAAS,KAAK,OAAO,MAAM,YAAY,CAC5E;EAErB,CAAC,GACD,KAAK,cAAc;CACrB;CAEA,KAAe;EACb,AAAI,CAAC,KAAK,MAAM,YAAY,CAAC,KAAKE,GAAW,QAAQ,eAAe,MAC9D,KAAKJ,MACP,KAAKE,GAAS,SAAQ,MAAW,EAAO,SAAS,EAAM,GACvD,KAAK,cAAc,KAEnB,KAAKsC,GAAe,GAEtB,KAAKpC,GAAW,MAAM,YAAY,eAAe,GAAG,KAAKC,GAAQ,sBAAsB,EAAE,MAAM,GAAG,GAElG,KAAKD,GAAW,YAAY,EAAE,QAAQ,KAAKC,GAAsB,CAAC,GAClE,KAAKD,GAAW,WAAW;CAE/B;CAEA,KAAgB;EAGd,AAFA,KAAKA,GAAW,YAAY,GAC5B,KAAK,WAAW,OAAO,OAAO,OAAO,GACrC,KAAKsC,GAA2B;CAClC;CAEA,KAA6B;EAK3B,AAHE,KAAK1C,MACL,CAAC,KAAKA,GAAQ,YACd,CAAC,KAAKE,GAAS,QAAO,MAAK,EAAE,EAAE,UAAU,MAAM,EAAE,SAAS,EAAE,MAAK,MAAK,EAAgB,CAAC,MAAM,KAAK,MAAM,KAAK,MAE7G,KAAKA,GAAS,SAAQ,MAAM,EAAE,WAAW,EAAM,GAC/C,KAAKmC,GAAe,EAAE,GACtB,KAAKC,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,KAAKpC,IAAU;GAAE,OAAO;GAAI,UAAU;EAAuB,CAAC,EAAE,MAChF,MAAK,EAAE,UAAU,EAAO,KAC1B;EAQA,AAPI,MAAO,EAAM,WAAW,EAAO,YAAY,OAE3C,KAAKF,MAAW,CAAC,KAAKA,GAAQ,aAChC,KAAKA,GAAQ,QAAQ,EAAO,QAG9B,KAAKA,IAAS,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GACjE,KAAKA,IAAS,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACpE;CAEA,KAAyB;EACvB,IAAI,KAAKA,IAAS,YAAY,CAAC,KAAKW,IAAoB;GACtD,AAAI,KAAKX,GAAQ,gBAAgB,SAAS,KAExC,KAAK2C,GAAwB,KAAKrC,GAAO,sBAAsB,EAAE,KAAK;GAExE,IAAM,IAAW,IAAI,gBAAe,MAAW,KAAKqC,GAAwB,EAAQ,GAAI,YAAY,KAAK,CAAC;GAE1G,AADA,KAAKd,GAAW,KAAK,CAAQ,GAC7B,EAAS,QAAQ,KAAKvB,EAAM;EAC9B;CACF;CAEA,GAAwB,GAAkB;EAExC,AAAI,KAAKN,IAAS,YAAY,IAAW,KAAKK,GAAQ,sBAAsB,EAAE,QAAQ,MACpF,KAAK,WAAW,OAAO,IAAI,mBAAmB,IAE9C,KAAK,WAAW,OAAO,OAAO,mBAAmB;CAErD;CAEA,KAAmB;EAEjB,AADA,KAAKuC,GAAe,GACpB,KAAK,WAAY,iBAAiB,oBAAoB,KAAKA,GAAe,CAAC;CAC7E;CAEA,KAAiB;EACf,AAAI,KAAKpC,KACP,KAAK,WAAW,OAAO,IAAI,gBAAgB,IAE3C,KAAK,WAAW,OAAO,OAAO,gBAAgB;CAElD;AACF;GAlhBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAOxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAGjE,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,UAnBzE,EAAe,CAAA,GAAA,CAAA"}
@@ -32,7 +32,7 @@ var p = class extends a {
32
32
  static {
33
33
  this.metadata = {
34
34
  tag: "nve-copy-button",
35
- version: "0.1.4"
35
+ version: "0.2.1"
36
36
  };
37
37
  }
38
38
  static {
@@ -661,8 +661,12 @@ export type ComboboxProps = {
661
661
  /** Demonstrates different container styles to accommodate visual weight and context.
662
662
  - `flat` Element has white space bounds but reduced visual container. */
663
663
  container?: "flat";
664
- /** Disable rendering of inline tags for many-item select */
664
+ /** @deprecated Use `tagLayout = 'hidden'` or `tag-layout="hidden"` instead.
665
+
666
+ Disable rendering of inline tags for many-item select */
665
667
  notags?: boolean;
668
+ /** Manage inline tag rendering for many-item select */
669
+ "tag-layout"?: "hidden" | "wrap";
666
670
  /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */
667
671
  "behavior-create"?: boolean;
668
672
  /** @deprecated - not supported on custom element tags */
@@ -588,8 +588,12 @@ type ComboboxProps = {
588
588
  /** Demonstrates different container styles to accommodate visual weight and context.
589
589
  - `flat` Element has white space bounds but reduced visual container. */
590
590
  container?: "flat";
591
- /** Disable rendering of inline tags for many-item select */
591
+ /** @deprecated Use `tagLayout = 'hidden'` or `tag-layout="hidden"` instead.
592
+
593
+ Disable rendering of inline tags for many-item select */
592
594
  notags?: boolean;
595
+ /** Manage inline tag rendering for many-item select */
596
+ "tag-layout"?: "hidden" | "wrap";
593
597
  /** Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. */
594
598
  "behavior-create"?: boolean;
595
599
  /** @deprecated - not supported on custom element tags */
@@ -8355,17 +8355,34 @@
8355
8355
  "_sourceAliases": [],
8356
8356
  "values": [
8357
8357
  {
8358
- "value": "true",
8358
+ "value": "boolean",
8359
+ "description": ""
8360
+ }
8361
+ ]
8362
+ },
8363
+ "deprecated": "Use `tagLayout = 'hidden'` or `tag-layout=\"hidden\"` instead.\n\nDisable rendering of inline tags for many-item select",
8364
+ "attribute": "notags",
8365
+ "reflects": true
8366
+ },
8367
+ {
8368
+ "kind": "field",
8369
+ "name": "tagLayout",
8370
+ "type": {
8371
+ "text": "'hidden' | 'wrap'",
8372
+ "_sourceAliases": [],
8373
+ "values": [
8374
+ {
8375
+ "value": "hidden",
8359
8376
  "description": ""
8360
8377
  },
8361
8378
  {
8362
- "value": "false",
8379
+ "value": "wrap",
8363
8380
  "description": ""
8364
8381
  }
8365
8382
  ]
8366
8383
  },
8367
- "description": "Disable rendering of inline tags for many-item select",
8368
- "attribute": "notags",
8384
+ "description": "Manage inline tag rendering for many-item select",
8385
+ "attribute": "tag-layout",
8369
8386
  "reflects": true
8370
8387
  },
8371
8388
  {
@@ -8681,17 +8698,32 @@
8681
8698
  "_sourceAliases": [],
8682
8699
  "values": [
8683
8700
  {
8684
- "value": "true",
8701
+ "value": "boolean",
8702
+ "description": ""
8703
+ }
8704
+ ]
8705
+ },
8706
+ "deprecated": "Use `tagLayout = 'hidden'` or `tag-layout=\"hidden\"` instead.\n\nDisable rendering of inline tags for many-item select",
8707
+ "fieldName": "notags"
8708
+ },
8709
+ {
8710
+ "name": "tag-layout",
8711
+ "type": {
8712
+ "text": "'hidden' | 'wrap'",
8713
+ "_sourceAliases": [],
8714
+ "values": [
8715
+ {
8716
+ "value": "hidden",
8685
8717
  "description": ""
8686
8718
  },
8687
8719
  {
8688
- "value": "false",
8720
+ "value": "wrap",
8689
8721
  "description": ""
8690
8722
  }
8691
8723
  ]
8692
8724
  },
8693
- "description": "Disable rendering of inline tags for many-item select",
8694
- "fieldName": "notags"
8725
+ "description": "Manage inline tag rendering for many-item select",
8726
+ "fieldName": "tagLayout"
8695
8727
  },
8696
8728
  {
8697
8729
  "name": "behavior-create",
@@ -8921,7 +8953,7 @@
8921
8953
  "since": "0.17.0",
8922
8954
  "status": "stable",
8923
8955
  "behavior": "form",
8924
- "markdown": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```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### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| notags | `boolean` | Disable rendering of inline tags for many-item select |\n| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |\n| reset | | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll | | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| layout | `\\| 'vertical'\n \\| 'vertical-inline'\n \\| 'horizontal'\n \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n | | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` | |\n| showPicker | | |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` | |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` | |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
8956
+ "markdown": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```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### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| tagLayout (tag-layout) | `'hidden' \\| 'wrap'` | Manage inline tag rendering for many-item select |\n| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |\n| reset | | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll | | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| layout | `\\| 'vertical'\n \\| 'vertical-inline'\n \\| 'horizontal'\n \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n | | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` | |\n| showPicker | | |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` | |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` | |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
8925
8957
  }
8926
8958
  }
8927
8959
  ],
@@ -31293,6 +31325,11 @@
31293
31325
  "kind": "method",
31294
31326
  "name": "hostDisconnected"
31295
31327
  },
31328
+ {
31329
+ "kind": "method",
31330
+ "name": "#clearInterestTimeout",
31331
+ "privacy": "private"
31332
+ },
31296
31333
  {
31297
31334
  "kind": "method",
31298
31335
  "name": "#parseInterestDelay",