@vonage/vivid 5.23.1 → 5.24.0

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 (406) hide show
  1. package/accordion/index.cjs +1 -1
  2. package/accordion/index.js +1 -1
  3. package/accordion-item/index.cjs +1 -1
  4. package/accordion-item/index.js +1 -1
  5. package/audio-player/index.cjs +2 -2
  6. package/audio-player/index.js +3 -3
  7. package/badge/index.cjs +1 -1
  8. package/badge/index.js +1 -1
  9. package/bundled/definition15.cjs +8 -7
  10. package/bundled/definition15.js +26 -24
  11. package/bundled/definition17.cjs +2 -2
  12. package/bundled/definition17.js +2 -2
  13. package/bundled/definition18.cjs +12 -83
  14. package/bundled/definition18.js +35 -419
  15. package/bundled/definition19.cjs +87 -7
  16. package/bundled/definition19.js +432 -16
  17. package/bundled/definition20.cjs +7 -37
  18. package/bundled/definition20.js +17 -172
  19. package/bundled/definition21.cjs +35 -27
  20. package/bundled/definition21.js +154 -154
  21. package/bundled/definition22.cjs +29 -6
  22. package/bundled/definition22.js +172 -20
  23. package/bundled/definition23.cjs +6 -12
  24. package/bundled/definition23.js +17 -32
  25. package/bundled/definition24.cjs +12 -39
  26. package/bundled/definition24.js +32 -67
  27. package/bundled/definition25.cjs +44 -0
  28. package/bundled/definition25.js +77 -0
  29. package/bundled/extractOptions.cjs +1 -0
  30. package/bundled/extractOptions.js +11 -0
  31. package/bundled/listbox.cjs +1 -1
  32. package/bundled/listbox.js +24 -11
  33. package/bundled/render-in-light-dom.cjs +1 -1
  34. package/bundled/render-in-light-dom.js +16 -19
  35. package/bundled/vivid-element.cjs +1 -1
  36. package/bundled/vivid-element.js +9 -1
  37. package/combobox/definition.cjs +1 -1
  38. package/combobox/definition.js +1 -1
  39. package/combobox/index.cjs +7 -7
  40. package/combobox/index.js +29 -21
  41. package/country/definition.cjs +1 -1
  42. package/country/definition.js +1 -1
  43. package/country/index.cjs +1 -1
  44. package/country/index.js +1 -1
  45. package/country-group/definition.cjs +1 -1
  46. package/country-group/definition.js +1 -1
  47. package/country-group/index.cjs +1 -1
  48. package/country-group/index.js +2 -2
  49. package/custom-elements.json +3102 -2842
  50. package/data-grid/definition.cjs +1 -1
  51. package/data-grid/definition.js +1 -1
  52. package/data-grid/index.cjs +4 -4
  53. package/data-grid/index.js +5 -5
  54. package/date-picker/definition.cjs +1 -1
  55. package/date-picker/definition.js +1 -1
  56. package/date-picker/index.cjs +1 -1
  57. package/date-picker/index.js +1 -1
  58. package/date-range-picker/definition.cjs +1 -1
  59. package/date-range-picker/definition.js +1 -1
  60. package/date-range-picker/index.cjs +1 -1
  61. package/date-range-picker/index.js +1 -1
  62. package/date-time-picker/definition.cjs +1 -1
  63. package/date-time-picker/definition.js +1 -1
  64. package/date-time-picker/index.cjs +1 -1
  65. package/date-time-picker/index.js +1 -1
  66. package/dial-pad/definition.cjs +1 -1
  67. package/dial-pad/definition.js +1 -1
  68. package/dial-pad/index.cjs +24 -24
  69. package/dial-pad/index.js +120 -51
  70. package/dialog/definition.cjs +1 -1
  71. package/dialog/definition.js +1 -1
  72. package/divider/definition.cjs +1 -1
  73. package/divider/definition.js +1 -1
  74. package/divider/index.cjs +1 -1
  75. package/divider/index.js +1 -1
  76. package/empty-state/definition.cjs +1 -1
  77. package/empty-state/definition.js +1 -1
  78. package/fab/definition.cjs +1 -1
  79. package/fab/definition.js +1 -1
  80. package/file-picker/definition.cjs +1 -1
  81. package/file-picker/definition.js +1 -1
  82. package/flag/definition.cjs +1 -1
  83. package/flag/definition.js +1 -1
  84. package/header/definition.cjs +1 -1
  85. package/header/definition.js +1 -1
  86. package/header/index.cjs +3 -3
  87. package/header/index.js +3 -3
  88. package/index.cjs +200 -196
  89. package/index.js +53 -52
  90. package/kbd-key/definition.cjs +1 -1
  91. package/kbd-key/definition.js +1 -1
  92. package/kbd-shortcut/definition.cjs +1 -1
  93. package/kbd-shortcut/definition.js +1 -1
  94. package/layout/definition.cjs +1 -1
  95. package/layout/definition.js +1 -1
  96. package/lib/accordion-item/accordion-item.d.ts +2 -1
  97. package/lib/action-group/action-group.d.ts +1 -1
  98. package/lib/alert/alert.d.ts +2 -2
  99. package/lib/audio-player/audio-player.d.ts +1 -1
  100. package/lib/avatar/avatar.d.ts +1 -1
  101. package/lib/badge/badge.d.ts +1 -1
  102. package/lib/banner/banner.d.ts +3 -3
  103. package/lib/breadcrumb/breadcrumb.d.ts +1 -1
  104. package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
  105. package/lib/button/button.d.ts +3 -3
  106. package/lib/calendar-event/calendar-event.d.ts +1 -1
  107. package/lib/card/card.d.ts +1 -1
  108. package/lib/checkbox/checkbox.d.ts +6 -6
  109. package/lib/color-picker/color-picker.d.ts +7 -7
  110. package/lib/combobox/combobox.d.ts +7 -7
  111. package/lib/components.d.ts +1 -0
  112. package/lib/country-group/country-group.d.ts +2 -2
  113. package/lib/data-grid/data-grid-cell.d.ts +4 -3
  114. package/lib/data-grid/data-grid-row.d.ts +3 -2
  115. package/lib/data-grid/data-grid.options.d.ts +5 -0
  116. package/lib/date-picker/date-picker.d.ts +8 -8
  117. package/lib/date-range-picker/date-range-picker.d.ts +4 -4
  118. package/lib/date-time-picker/date-time-picker.d.ts +8 -8
  119. package/lib/dial-pad/dial-pad.d.ts +2 -1
  120. package/lib/dialog/dialog.d.ts +2 -2
  121. package/lib/divider/divider.d.ts +1 -1
  122. package/lib/fab/fab.d.ts +1 -1
  123. package/lib/file-picker/file-picker.d.ts +7 -7
  124. package/lib/header/header.d.ts +1 -1
  125. package/lib/menu/menu.d.ts +2 -2
  126. package/lib/menu-item/menu-item.d.ts +3 -3
  127. package/lib/nav/nav.d.ts +1 -1
  128. package/lib/nav-disclosure/nav-disclosure.d.ts +2 -2
  129. package/lib/nav-item/nav-item.d.ts +2 -2
  130. package/lib/note/note.d.ts +1 -1
  131. package/lib/number-field/number-field.d.ts +9 -9
  132. package/lib/optgroup/definition.d.ts +3 -0
  133. package/lib/optgroup/index.d.ts +1 -0
  134. package/lib/optgroup/optgroup.d.ts +430 -0
  135. package/lib/optgroup/optgroup.template.d.ts +2 -0
  136. package/lib/optgroup/variations.browser-spec.d.ts +1 -0
  137. package/lib/option/option.d.ts +2 -2
  138. package/lib/pagination/pagination.d.ts +1 -1
  139. package/lib/popover/popover.d.ts +2 -2
  140. package/lib/progress/progress.d.ts +1 -1
  141. package/lib/progress-ring/progress-ring.d.ts +1 -1
  142. package/lib/radio/radio.d.ts +3 -3
  143. package/lib/radio-group/radio-group.d.ts +1 -1
  144. package/lib/range-slider/range-slider.d.ts +3 -3
  145. package/lib/rich-text-editor/rich-text-editor.d.ts +1 -1
  146. package/lib/searchable-select/option-tag.d.ts +1 -1
  147. package/lib/searchable-select/searchable-select.d.ts +47 -47
  148. package/lib/select/select.d.ts +9 -9
  149. package/lib/selectable-box/selectable-box.d.ts +1 -1
  150. package/lib/simple-color-picker/simple-color-picker.d.ts +2 -2
  151. package/lib/slider/slider.d.ts +3 -3
  152. package/lib/split-button/split-button.d.ts +3 -3
  153. package/lib/status/status.d.ts +1 -1
  154. package/lib/switch/switch.d.ts +2 -2
  155. package/lib/tab/tab.d.ts +3 -3
  156. package/lib/tab-panel/tab-panel.d.ts +1 -1
  157. package/lib/table/table-cell.d.ts +1 -1
  158. package/lib/table/table-header-cell.d.ts +1 -1
  159. package/lib/table/table-row.d.ts +1 -1
  160. package/lib/table/table-sorting-button.d.ts +1 -1
  161. package/lib/tag/tag.d.ts +3 -3
  162. package/lib/tag-group/tag-group.d.ts +1 -1
  163. package/lib/tag-name-map.d.ts +2 -1
  164. package/lib/text-area/text-area.d.ts +8 -8
  165. package/lib/text-field/text-field.d.ts +9 -9
  166. package/lib/time-picker/time-picker.d.ts +4 -4
  167. package/lib/toggletip/toggletip.d.ts +2 -2
  168. package/lib/tooltip/tooltip.d.ts +2 -2
  169. package/lib/tree-item/tree-item.d.ts +2 -2
  170. package/lib/tree-view/tree-view.d.ts +1 -1
  171. package/lib/video-player/video-player.d.ts +1 -1
  172. package/menu/index.cjs +1 -1
  173. package/menu/index.js +1 -1
  174. package/menu-item/index.cjs +1 -1
  175. package/menu-item/index.js +1 -1
  176. package/nav/definition.cjs +1 -1
  177. package/nav/definition.js +1 -1
  178. package/nav-disclosure/definition.cjs +1 -1
  179. package/nav-disclosure/definition.js +1 -1
  180. package/nav-item/definition.cjs +1 -1
  181. package/nav-item/definition.js +1 -1
  182. package/note/definition.cjs +1 -1
  183. package/note/definition.js +1 -1
  184. package/number-field/definition.cjs +1 -1
  185. package/number-field/definition.js +1 -1
  186. package/number-field/index.cjs +1 -1
  187. package/number-field/index.js +1 -1
  188. package/optgroup/definition.cjs +5 -0
  189. package/optgroup/definition.js +2 -0
  190. package/optgroup/index.cjs +1 -0
  191. package/optgroup/index.js +4 -0
  192. package/package.json +6 -6
  193. package/pagination/definition.cjs +1 -1
  194. package/pagination/definition.js +1 -1
  195. package/platform-switch/definition.cjs +1 -1
  196. package/platform-switch/definition.js +1 -1
  197. package/popover/definition.cjs +1 -1
  198. package/popover/definition.js +1 -1
  199. package/progress/definition.cjs +1 -1
  200. package/progress/definition.js +1 -1
  201. package/radio/definition.cjs +1 -1
  202. package/radio/definition.js +1 -1
  203. package/radio-group/definition.cjs +1 -1
  204. package/radio-group/definition.js +1 -1
  205. package/range-slider/definition.cjs +1 -1
  206. package/range-slider/definition.js +1 -1
  207. package/rich-text-editor/definition.cjs +1 -1
  208. package/rich-text-editor/definition.js +1 -1
  209. package/rich-text-editor/index.cjs +1 -1
  210. package/rich-text-editor/index.js +4 -4
  211. package/rich-text-view/definition.cjs +1 -1
  212. package/rich-text-view/definition.js +1 -1
  213. package/searchable-select/definition.cjs +1 -1
  214. package/searchable-select/definition.js +1 -1
  215. package/searchable-select/index.cjs +19 -19
  216. package/searchable-select/index.js +60 -45
  217. package/select/definition.cjs +1 -1
  218. package/select/definition.js +1 -1
  219. package/select/index.cjs +1 -1
  220. package/select/index.js +1 -1
  221. package/selectable-box/definition.cjs +1 -1
  222. package/selectable-box/definition.js +1 -1
  223. package/shared/aria/delegates-aria.d.ts +1 -1
  224. package/shared/aria/host-semantics.d.ts +1 -1
  225. package/shared/color-picker/base-color-picker.d.ts +1 -1
  226. package/shared/feedback/feedback-message.d.ts +1 -1
  227. package/shared/feedback/mixins.d.ts +2 -2
  228. package/shared/foundation/button/button.d.ts +2 -2
  229. package/shared/foundation/form-associated/form-associated.d.ts +2 -2
  230. package/shared/foundation/listbox/extractOptions.d.ts +2 -0
  231. package/shared/foundation/listbox/listbox.d.ts +2 -0
  232. package/shared/patterns/affix.d.ts +2 -2
  233. package/shared/patterns/anchored.d.ts +2 -2
  234. package/shared/patterns/char-count/char-count.d.ts +1 -1
  235. package/shared/patterns/form-elements/form-element.d.ts +1 -1
  236. package/shared/patterns/form-elements/with-contextual-help.d.ts +1 -1
  237. package/shared/patterns/form-elements/with-error-text.d.ts +1 -1
  238. package/shared/patterns/form-elements/with-success-text.d.ts +1 -1
  239. package/shared/patterns/kbd-shortcut.d.ts +1 -1
  240. package/shared/patterns/linkable.d.ts +1 -1
  241. package/shared/patterns/localized.d.ts +2 -2
  242. package/shared/patterns/trapped-focus.d.ts +1 -1
  243. package/shared/picker-field/mixins/calendar-picker.d.ts +2 -2
  244. package/shared/picker-field/mixins/calendar-picker.template.d.ts +2 -2
  245. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +1 -1
  246. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +2 -2
  247. package/shared/picker-field/mixins/single-date-picker.d.ts +2 -2
  248. package/shared/picker-field/mixins/single-value-picker.d.ts +2 -2
  249. package/shared/picker-field/mixins/time-selection-picker.d.ts +2 -2
  250. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +4 -4
  251. package/shared/picker-field/picker-field.d.ts +7 -7
  252. package/side-drawer/definition.cjs +1 -1
  253. package/side-drawer/definition.js +1 -1
  254. package/simple-color-picker/definition.cjs +1 -1
  255. package/simple-color-picker/definition.js +1 -1
  256. package/split-button/definition.cjs +1 -1
  257. package/split-button/definition.js +1 -1
  258. package/split-button/index.cjs +1 -0
  259. package/split-button/index.js +1 -0
  260. package/status/definition.cjs +1 -1
  261. package/status/definition.js +1 -1
  262. package/switch/definition.cjs +1 -1
  263. package/switch/definition.js +1 -1
  264. package/switch/index.cjs +6 -5
  265. package/switch/index.js +16 -14
  266. package/tab/definition.cjs +1 -1
  267. package/tab/definition.js +1 -1
  268. package/tab-panel/definition.cjs +1 -1
  269. package/tab-panel/definition.js +1 -1
  270. package/table/definition.cjs +1 -1
  271. package/table/definition.js +1 -1
  272. package/tabs/definition.cjs +1 -1
  273. package/tabs/definition.js +1 -1
  274. package/tag/definition.cjs +1 -1
  275. package/tag/definition.js +1 -1
  276. package/tag-group/definition.cjs +1 -1
  277. package/tag-group/definition.js +1 -1
  278. package/text-area/definition.cjs +1 -1
  279. package/text-area/definition.js +1 -1
  280. package/time-picker/definition.cjs +1 -1
  281. package/time-picker/definition.js +1 -1
  282. package/tree-item/definition.cjs +1 -1
  283. package/tree-item/definition.js +1 -1
  284. package/tree-view/definition.cjs +1 -1
  285. package/tree-view/definition.js +1 -1
  286. package/unbundled/definition13.cjs +1 -1
  287. package/unbundled/definition13.js +1 -1
  288. package/unbundled/definition2.cjs +9 -3
  289. package/unbundled/definition2.js +9 -3
  290. package/unbundled/definition23.cjs +1 -0
  291. package/unbundled/definition23.js +2 -1
  292. package/unbundled/definition29.cjs +2 -2
  293. package/unbundled/definition29.js +2 -2
  294. package/unbundled/definition30.cjs +65 -484
  295. package/unbundled/definition30.js +57 -482
  296. package/unbundled/definition31.cjs +501 -39
  297. package/unbundled/definition31.js +499 -37
  298. package/unbundled/definition32.cjs +38 -239
  299. package/unbundled/definition32.js +35 -236
  300. package/unbundled/definition33.cjs +236 -74
  301. package/unbundled/definition33.js +233 -71
  302. package/unbundled/definition34.cjs +74 -1968
  303. package/unbundled/definition34.js +70 -1940
  304. package/unbundled/definition35.cjs +1992 -26
  305. package/unbundled/definition35.js +1964 -27
  306. package/unbundled/definition36.cjs +26 -111
  307. package/unbundled/definition36.js +23 -103
  308. package/unbundled/definition37.cjs +53 -294
  309. package/unbundled/definition37.js +50 -291
  310. package/unbundled/definition38.cjs +282 -132
  311. package/unbundled/definition38.js +279 -129
  312. package/unbundled/definition39.cjs +165 -339
  313. package/unbundled/definition39.js +163 -337
  314. package/unbundled/definition40.cjs +394 -228
  315. package/unbundled/definition40.js +391 -225
  316. package/unbundled/definition41.cjs +263 -46
  317. package/unbundled/definition41.js +258 -41
  318. package/unbundled/definition42.cjs +47 -67
  319. package/unbundled/definition42.js +45 -65
  320. package/unbundled/definition43.cjs +56 -383
  321. package/unbundled/definition43.js +55 -382
  322. package/unbundled/definition44.cjs +386 -44
  323. package/unbundled/definition44.js +382 -40
  324. package/unbundled/definition45.cjs +53 -45
  325. package/unbundled/definition45.js +49 -41
  326. package/unbundled/definition46.cjs +40 -164
  327. package/unbundled/definition46.js +36 -160
  328. package/unbundled/definition47.cjs +171 -31
  329. package/unbundled/definition47.js +168 -22
  330. package/unbundled/definition48.cjs +30 -89
  331. package/unbundled/definition48.js +22 -87
  332. package/unbundled/definition49.cjs +70 -33
  333. package/unbundled/definition49.js +67 -30
  334. package/unbundled/definition50.cjs +54 -23
  335. package/unbundled/definition50.js +52 -18
  336. package/unbundled/definition51.cjs +23 -39
  337. package/unbundled/definition51.js +17 -36
  338. package/unbundled/definition52.cjs +29 -314
  339. package/unbundled/definition52.js +27 -312
  340. package/unbundled/definition53.cjs +301 -195
  341. package/unbundled/definition53.js +297 -191
  342. package/unbundled/definition54.cjs +210 -40
  343. package/unbundled/definition54.js +206 -36
  344. package/unbundled/definition55.cjs +42 -266
  345. package/unbundled/definition55.js +38 -262
  346. package/unbundled/definition56.cjs +266 -50
  347. package/unbundled/definition56.js +263 -46
  348. package/unbundled/definition57.cjs +48 -146
  349. package/unbundled/definition57.js +47 -143
  350. package/unbundled/definition58.cjs +127 -225
  351. package/unbundled/definition58.js +122 -223
  352. package/unbundled/definition59.cjs +199 -418
  353. package/unbundled/definition59.js +196 -415
  354. package/unbundled/definition60.cjs +441 -3738
  355. package/unbundled/definition60.js +431 -3565
  356. package/unbundled/definition61.cjs +3712 -728
  357. package/unbundled/definition61.js +3538 -717
  358. package/unbundled/definition62.cjs +769 -97
  359. package/unbundled/definition62.js +766 -94
  360. package/unbundled/definition63.cjs +100 -981
  361. package/unbundled/definition63.js +98 -976
  362. package/unbundled/definition64.cjs +988 -93
  363. package/unbundled/definition64.js +982 -90
  364. package/unbundled/definition65.cjs +109 -73
  365. package/unbundled/definition65.js +105 -63
  366. package/unbundled/definition66.cjs +69 -155
  367. package/unbundled/definition66.js +60 -152
  368. package/unbundled/definition67.cjs +154 -118
  369. package/unbundled/definition67.js +151 -115
  370. package/unbundled/definition68.cjs +124 -49
  371. package/unbundled/definition68.js +120 -45
  372. package/unbundled/definition69.cjs +51 -84
  373. package/unbundled/definition69.js +50 -80
  374. package/unbundled/definition70.cjs +91 -19
  375. package/unbundled/definition70.js +86 -14
  376. package/unbundled/definition71.cjs +20 -87
  377. package/unbundled/definition71.js +14 -84
  378. package/unbundled/definition72.cjs +76 -294
  379. package/unbundled/definition72.js +71 -217
  380. package/unbundled/definition73.cjs +288 -311
  381. package/unbundled/definition73.js +218 -306
  382. package/unbundled/definition74.cjs +326 -26
  383. package/unbundled/definition74.js +317 -23
  384. package/unbundled/definition75.cjs +27 -122
  385. package/unbundled/definition75.js +22 -118
  386. package/unbundled/definition76.cjs +103 -232
  387. package/unbundled/definition76.js +99 -228
  388. package/unbundled/definition77.cjs +259 -26
  389. package/unbundled/definition77.js +249 -23
  390. package/unbundled/definition78.cjs +29 -148
  391. package/unbundled/definition78.js +27 -133
  392. package/unbundled/definition79.cjs +117 -173
  393. package/unbundled/definition79.js +108 -169
  394. package/unbundled/definition80.cjs +181 -477
  395. package/unbundled/definition80.js +176 -471
  396. package/unbundled/definition81.cjs +517 -0
  397. package/unbundled/definition81.js +497 -0
  398. package/unbundled/extractOptions.cjs +21 -0
  399. package/unbundled/extractOptions.js +16 -0
  400. package/unbundled/listbox.cjs +23 -6
  401. package/unbundled/listbox.js +23 -6
  402. package/unbundled/vivid-element.cjs +10 -1
  403. package/unbundled/vivid-element.js +10 -1
  404. package/video-player/definition.cjs +1 -1
  405. package/video-player/definition.js +1 -1
  406. package/vivid.api.json +194 -0
package/searchable-select/index.cjs CHANGED
@@ -1,13 +1,13 @@
1
- const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/ref.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition3.cjs`),l=require(`../bundled/affix.cjs`),u=require(`../bundled/definition5.cjs`),d=require(`../bundled/delegates-aria.cjs`),f=require(`../bundled/form-associated.cjs`),p=require(`../bundled/definition6.cjs`),m=require(`../bundled/definition8.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/form-element.cjs`),_=require(`../bundled/with-contextual-help.cjs`),v=require(`../bundled/with-error-text.cjs`),y=require(`../bundled/with-success-text.cjs`),b=require(`../bundled/scrollIntoView.cjs`),x=require(`../bundled/definition17.cjs`),S=require(`../bundled/definition19.cjs`),C=require(`../bundled/divider.cjs`);var w=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}`,T=`:host{display:block}.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in sRGB, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in sRGB, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}`,E=8,D=100,O=10,k=e=>typeof e==`string`,A=class extends _.t(h.t(v.t(y.t(g.t(d.t(l.n(e.t(f.n(t.t))))))))){constructor(...e){super(...e),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this.#r={handleChange:(e,t)=>{e.selected&&!this.values.includes(e.value)?this.values=[...this.values,e.value]:!e.selected&&this.values.includes(e.value)&&(this.values=this.values.filter(t=>t!==e.value))}},this.#o=new Map,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.enableSelectAll=!1,this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{k(e)||super.setFormValue(e,t)},this._changeDescription=``,this.#O=new ResizeObserver(()=>{this.#b()})}openChanged(){this.open||this.#u(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(e=>!this.#n(e))){this.values=this.values.filter(e=>this.#n(e));return}this.value=this.values.length?this.values[0]:``,this.#T(),this.#i(),this.$fastController.isConnected&&this.#b(),this.#D()}}#e(e){this.values=e,this.$emit(`change`,void 0,{bubbles:!1}),this.$emit(`input`,void 0,{bubbles:!1})}#t(e){let t=new Set(this.values),n=new Set(e);this.values=[...this.values].filter(e=>n.has(e)).concat([...e].filter(e=>!t.has(e)))}initialValuesChanged(){this.dirtyValue||=(this.values=this.initialValues,!1)}#n(e){return this._slottedOptions.some(t=>t.value===e)}valueChanged(e,t){if(super.valueChanged(e,t),!this._areOptionsInitialized)return;let n=this._slottedOptions.some(e=>e.value===t);this.values[0]!==t&&(this.values=n?[t]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(e=>e.value===this.values[0]):-1}set selectedIndex(e){this.value=this._slottedOptions[e]?.value??``}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(e=>this.values.includes(e.value))}_currentSearchTextChanged(){this.#l(),this.$emit(`search-text-change`,void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??``}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==``?this.#v(this.value)??``:``)}_onInputInput(e){this._currentSearchText=e.target.value}_onInputFocus(e){this.#l()}_onInputBlur(e){this.open=!1,this._currentSearchText=null,this._changeDescription=``}_onInputKeydown(e){if(e.ctrlKey||e.shiftKey)return!0;switch(e.key){case`Enter`:return this.#d(),this._inputValue===``&&(this.open=!this.open),!1;case`Escape`:this.open=!1;break;case`Home`:if(!this.open){this.open=!0;break}return this.#f(),!1;case`End`:if(!this.open){this.open=!0;break}return this.#p(),!1;case`PageUp`:if(!this.open){this.open=!0;break}return this.#m(),!1;case`PageDown`:if(!this.open){this.open=!0;break}return this.#h(),!1;case`ArrowUp`:if(!this.open){this.open=!0;break}return this.#g(),!1;case`ArrowDown`:if(!this.open){this.open=!0;break}return this.#_(),!1;case`ArrowLeft`:return this.multiple&&this._inputValue===``&&this.values.length&&!this.externalTags?(this.#x(this.#S(this.values.length)),!1):!0;case`Backspace`:return this.multiple&&this._inputValue===``&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:return this.open||=!0,!0}return!0}_slottedOptionsChanged(e,n){let r=!!this.querySelectorAll(`:not([slot])`).length;if(!n.length&&r)return;if(this._areOptionsInitialized=!0,e){this._slottedDisabledOptions=[];for(let n of e)t.k.getNotifier(n).unsubscribe(this.#r,`selected`)}if(n)for(let e of n)e._displayCheckmark=!0,t.k.getNotifier(e).subscribe(this.#r,`selected`);let i=[];for(let e of this._slottedOptions)(e.selected||e.value===this.value||this.values.includes(e.value))&&i.push(e.value),e.disabled&&this._slottedDisabledOptions.push(e);this.#t(i),this.#l(),this.#T()}#r;#i(){for(let e of this._slottedOptions)e.selected=this.values.includes(e.value),this.#c(e)}#a(e){let t=e.value,n,r=!1,i=!this.values.includes(t);this.multiple?(n=i?[...this.values,t]:this.values.filter(e=>e!==t),r=!0):(i?(n=[t],r=!0):n=[],this.open=!1),this.#e(n);let a=i?this.locale.searchableSelect.optionSelectedMessage(e._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(e._getAccessibleName()),o=this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):``;this._changeDescription=`${a} ${o}`,r&&(this._currentSearchText=null)}#o;#s(e){return e.querySelector(`[slot="tag-icon"]`)}_tagIconSlotName(e){return`_tag-icon-${this.values.indexOf(e)}`}#c(e){if(e.selected&&this.#s(e)){let t=this.#o.get(e);t||(t=this.#s(e).cloneNode(!0),this.#o.set(e,t)),t.slot=this._tagIconSlotName(e.value),this.appendChild(t)}else{let t=this.#o.get(e);t&&(t.remove(),this.#o.delete(e))}}optionFilterChanged(){this.#l()}loadingChanged(e,t){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,e&&!t&&(this._changeDescription=``)}#l(){let e=[],t=this.optionFilter??((e,t)=>e.text.toLowerCase().includes(t.toLowerCase()));for(let n of this._slottedOptions??[]){n._vvdSearchText=this.searchText;let r=!this.searchText||t(n,this.searchText);n._isNotMatching=!r,!n.hidden&&r&&e.push(n)}this.#u(null),this._filteredOptions=e;let n=e.filter(e=>!e.disabled);this._selectAllOption?this._filteredEnabledOptions=[this._selectAllOption,...n]:this._filteredEnabledOptions=n}#u(e){if(typeof this._highlightedOptionIndex==`number`){let e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1,e.removeAttribute(`data-highlighted`)}if(typeof e==`number`&&(e=this._filteredEnabledOptions.length?Math.max(0,Math.min(this._filteredEnabledOptions.length-1,e)):null),this._highlightedOptionIndex=e,typeof this._highlightedOptionIndex==`number`){let e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,e.setAttribute(`data-highlighted`,``),b.t(e,this._listbox,`nearest`),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#d(){if(this._highlightedOptionIndex===null)return;let e=this._filteredEnabledOptions[this._highlightedOptionIndex];if(e.getAttribute(`data-select-all`)!==null){this._toggleSelectAll();return}this.#a(e)}#f(){this.#u(0)}#p(){this.#u(this._filteredEnabledOptions.length-1)}#m(){this.#u((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-O)}#h(){this.#u((this._highlightedOptionIndex??-1)+O)}#g(){this.#u((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#_(){this.#u((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(e){return this._slottedOptions.find(t=>t.value===e).label}_tagConnotationForValue(e){return this._slottedOptions.find(t=>t.value===e).tagConnotation}_isTagDisabled(e){let t=this._slottedOptions.find(t=>t.value===e);return this.disabled||t.disabled}#v(e){return this._slottedOptions?.find(t=>t.value===e)?.label}#y(e,t,n){let r=document.createElement(this._optionTagTagName);r.label=e,r.removable=t,r.style.cssText=`position: absolute; visibility: hidden;`,r.hasIconPlaceholder=n,this.shadowRoot.appendChild(r);let i=r.getBoundingClientRect().width;return r.remove(),i}#b(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}let e=this._contentArea.getBoundingClientRect().width,t=[[]],n=0,r=D,i;for(i=this.values.length-1;i>=0;i--){let a=this.maxLines&&n===this.maxLines-1,o=this.#y(this._tagLabelForValue(this.values[i]),!0,this.#s(this.selectedOptions[i])!==null),s={value:this.values[i],width:o},c=0;if(a){let e=i;e&&(c=E+this.#y(e.toString(),!1,!1))}if(r+E+o+c>e){if(a)if(i===this.values.length-1)t[n].unshift(s),r+=E+o;else break;else t.push([]),n++,t[n].unshift(s),r=o;continue}t[n].unshift(s),r+=E+o}this._numElidedTags=i+1,t.reverse();for(let n=0;n<t.length-1;n++){let r=t[n].map(e=>e.width).reduce((e,t)=>e+t,0)+(t[n].length-1)*E;for(n===0&&this._numElidedTags&&(r+=E+this.#y(this._numElidedTags.toString(),!1,!1));t[n+1].length&&r+E+t[n+1][0].width<=e;){let e=t[n+1].shift();t[n].push(e),r+=E+e.width}}let a=t.map(e=>e.map(e=>e.value));this._tagRows=a.slice(0,-1),this._lastTagRow=a.slice(-1)[0]}_onTagRemoved(e){this.#e(this.values.filter(t=>t!==e)),this.#l()}_onTagKeydown(e){let n=parseInt(e.target.dataset.index);switch(e.key){case`Backspace`:case`Delete`:case`Enter`:case` `:this._onTagRemoved(this.values[n]),t.M.process(),this.#x(this.#w(n));break;case`ArrowLeft`:this.#x(this.#S(n)??n);break;case`ArrowRight`:this.#x(this.#C(n));break}return!0}#x(e){e===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${e}"]`)?.focus()}#S(e){if(!this.values.length)return null;for(let t=e-1;t>=0;t--)if(!this._isTagDisabled(this.values[t]))return t;return null}#C(e){if(!this.values.length)return null;for(let t=e+1;t<this.values.length;t++)if(!this._isTagDisabled(this.values[t]))return t;return null}#w(e){return this.#C(e-1)??this.#S(e)}_onListboxClick(e){if(this.disabled)return;let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(t?.getAttribute(`data-select-all`)!==null){this._toggleSelectAll();return}t&&!t.disabled&&this.#a(t)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#e(this.selectedOptions.filter(e=>e.disabled).map(e=>e.value))}maxSelectedChanged(){this.#T()}#T(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!=`number`||this.maxSelected<=0)return;let e=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){let t=e.filter(e=>!this.selectedOptions.includes(e));for(let e of t)e.disabled=!0}else for(let t of e)t.disabled=!1}get _hasSelectionCount(){return this.multiple&&this.maxSelected&&this.maxSelected>=1}get _selectableOptions(){return this._slottedOptions?.filter(e=>!this._slottedDisabledOptions.includes(e)&&!e.disabled)??[]}get _selectAllLabel(){return this._isAllSelected?this.deselectAllText??this.locale.searchableSelect.deselectAllLabel:this.selectAllText??this.locale.searchableSelect.selectAllLabel}get _isAllSelected(){let e=this.values;if(!this.multiple||!this._slottedOptions)return!1;let t=this._selectableOptions;if(t.length===0)return!1;let n=new Set(e);return t.every(e=>n.has(e.value))}_toggleSelectAll(){let e=this._selectableOptions.map(e=>e.value);if(this._isAllSelected){let t=this.values.filter(t=>!e.includes(t));this.#e(t),this._changeDescription=this.locale.searchableSelect.deselectedAllMessage;return}let t=e.filter(e=>!this.values.includes(e)),n=[...this.values,...t];this.#e(n),this._changeDescription=this.locale.searchableSelect.selectedAllMessage}#E(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(e,t){super.nameChanged(e,t),this.#D()}#D(){if(!this.name)this.setFormValue(null);else{let e=new FormData;for(let t of this.values)e.append(this.name,t);this.setFormValue(e)}}formResetCallback(){super.formResetCallback(),this.#e(this.#E())}#O;_onFieldsetClick(e){this.disabled||e.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#E()),this.#O.observe(this._contentArea)}disconnectedCallback(){super.disconnectedCallback(),this.#O.disconnect()}validate(){super.validate(this._input??void 0)}focus(e){this._input?.focus(e)}_onMouseDown(e){let t=e.composedPath()[0];return!e.defaultPrevented&&t!==this._input&&!this._isFromContextualHelp(e)?(this._input.focus(),!1):!0}};o.t([t.m],A.prototype,`appearance`,void 0),o.t([t.m],A.prototype,`shape`,void 0),o.t([t.m()],A.prototype,`scale`,void 0),o.t([t.m({mode:`boolean`,attribute:`fixed-dropdown`})],A.prototype,`fixedDropdown`,void 0),o.t([t.m],A.prototype,`placeholder`,void 0),o.t([t.m({mode:`boolean`})],A.prototype,`open`,void 0),o.t([t.m({mode:`boolean`})],A.prototype,`multiple`,void 0),o.t([t.m({attribute:`external-tags`,mode:`boolean`})],A.prototype,`externalTags`,void 0),o.t([t.m({attribute:`max-lines`,converter:t.h})],A.prototype,`maxLines`,void 0),o.t([t.A],A.prototype,`values`,void 0),o.t([t.A],A.prototype,`initialValues`,void 0),o.t([t.A],A.prototype,`_input`,void 0),o.t([t.A],A.prototype,`_currentSearchText`,void 0),o.t([t.A],A.prototype,`_slottedOptions`,void 0),o.t([t.A],A.prototype,`optionFilter`,void 0),o.t([t.A],A.prototype,`_filteredOptions`,void 0),o.t([t.A],A.prototype,`_filteredEnabledOptions`,void 0),o.t([t.m({mode:`boolean`})],A.prototype,`loading`,void 0),o.t([t.A],A.prototype,`_highlightedOptionIndex`,void 0),o.t([t.A],A.prototype,`_contentArea`,void 0),o.t([t.A],A.prototype,`_numElidedTags`,void 0),o.t([t.A],A.prototype,`_tagRows`,void 0),o.t([t.A],A.prototype,`_lastTagRow`,void 0),o.t([t.A],A.prototype,`_listbox`,void 0),o.t([t.m({mode:`boolean`})],A.prototype,`clearable`,void 0),o.t([t.m({attribute:`max-selected`,converter:t.h})],A.prototype,`maxSelected`,void 0),o.t([t.A],A.prototype,`_slottedDisabledOptions`,void 0),o.t([t.m({attribute:`enable-select-all`,mode:`boolean`})],A.prototype,`enableSelectAll`,void 0),o.t([t.m({attribute:`select-all-text`})],A.prototype,`selectAllText`,void 0),o.t([t.m({attribute:`deselect-all-text`})],A.prototype,`deselectAllText`,void 0),o.t([t.A],A.prototype,`_selectAllOption`,void 0),o.t([t.A],A.prototype,`_changeDescription`,void 0),o.t([t.A],A.prototype,`_anchor`,void 0);var j=class extends e.t(t.t){constructor(...e){super(...e),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit(`remove`,void 0,{bubbles:!1})}};o.t([t.m],j.prototype,`shape`,void 0),o.t([t.A],j.prototype,`connotation`,void 0),o.t([t.m],j.prototype,`label`,void 0),o.t([t.m({mode:`boolean`})],j.prototype,`removable`,void 0),o.t([t.m({mode:`boolean`})],j.prototype,`disabled`,void 0),o.t([t.A],j.prototype,`hasIconPlaceholder`,void 0),o.t([t.m()],j.prototype,`scale`,void 0);function M(){return t.p`
1
+ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/ref.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition3.cjs`),l=require(`../bundled/affix.cjs`),u=require(`../bundled/definition5.cjs`),d=require(`../bundled/delegates-aria.cjs`),f=require(`../bundled/form-associated.cjs`),p=require(`../bundled/definition6.cjs`),m=require(`../bundled/definition8.cjs`),h=require(`../bundled/mixins.cjs`),g=require(`../bundled/form-element.cjs`),_=require(`../bundled/with-contextual-help.cjs`),v=require(`../bundled/with-error-text.cjs`),y=require(`../bundled/with-success-text.cjs`),b=require(`../bundled/scrollIntoView.cjs`),x=require(`../bundled/definition17.cjs`),S=require(`../bundled/definition18.cjs`),C=require(`../bundled/extractOptions.cjs`),w=require(`../bundled/definition20.cjs`),T=require(`../bundled/divider.cjs`);var E=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.divider{margin-block:10px;margin-inline:12px}`,D=`:host{display:block}.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in sRGB, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in sRGB, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}`,O=8,k=100,A=10,j=e=>typeof e==`string`,M=class extends _.t(h.t(v.t(y.t(g.t(d.t(l.n(e.t(f.n(t.t))))))))){constructor(...e){super(...e),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this.#r={handleChange:(e,t)=>{e.selected&&!this.values.includes(e.value)?this.values=[...this.values,e.value]:!e.selected&&this.values.includes(e.value)&&(this.values=this.values.filter(t=>t!==e.value))}},this.#o=new Map,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.enableSelectAll=!1,this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{j(e)||super.setFormValue(e,t)},this._changeDescription=``,this.#O=new ResizeObserver(()=>{this.#b()}),this.#k=()=>{this._slottedElements&&this._slottedElementsChanged()}}openChanged(){this.open||this.#u(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(e=>!this.#n(e))){this.values=this.values.filter(e=>this.#n(e));return}this.value=this.values.length?this.values[0]:``,this.#T(),this.#i(),this.$fastController.isConnected&&this.#b(),this.#D()}}#e(e){this.values=e,this.$emit(`change`,void 0,{bubbles:!1}),this.$emit(`input`,void 0,{bubbles:!1})}#t(e){let t=new Set(this.values),n=new Set(e);this.values=[...this.values].filter(e=>n.has(e)).concat([...e].filter(e=>!t.has(e)))}initialValuesChanged(){this.dirtyValue||=(this.values=this.initialValues,!1)}#n(e){return this._slottedOptions.some(t=>t.value===e)}valueChanged(e,t){if(super.valueChanged(e,t),!this._areOptionsInitialized)return;let n=this._slottedOptions.some(e=>e.value===t);this.values[0]!==t&&(this.values=n?[t]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(e=>e.value===this.values[0]):-1}set selectedIndex(e){this.value=this._slottedOptions[e]?.value??``}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(e=>this.values.includes(e.value))}_currentSearchTextChanged(){this.#l(),this.$emit(`search-text-change`,void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??``}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==``?this.#v(this.value)??``:``)}_onInputInput(e){this._currentSearchText=e.target.value}_onInputFocus(e){this.#l()}_onInputBlur(e){this.open=!1,this._currentSearchText=null,this._changeDescription=``}_onInputKeydown(e){if(e.ctrlKey||e.shiftKey)return!0;switch(e.key){case`Enter`:return this.#d(),this._inputValue===``&&(this.open=!this.open),!1;case`Escape`:this.open=!1;break;case`Home`:if(!this.open){this.open=!0;break}return this.#f(),!1;case`End`:if(!this.open){this.open=!0;break}return this.#p(),!1;case`PageUp`:if(!this.open){this.open=!0;break}return this.#m(),!1;case`PageDown`:if(!this.open){this.open=!0;break}return this.#h(),!1;case`ArrowUp`:if(!this.open){this.open=!0;break}return this.#g(),!1;case`ArrowDown`:if(!this.open){this.open=!0;break}return this.#_(),!1;case`ArrowLeft`:return this.multiple&&this._inputValue===``&&this.values.length&&!this.externalTags?(this.#x(this.#S(this.values.length)),!1):!0;case`Backspace`:return this.multiple&&this._inputValue===``&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:return this.open||=!0,!0}return!0}_slottedElementsChanged(){this._slottedOptions=C.t(this._slottedElements)}_slottedOptionsChanged(e,n){let r=!!this.querySelectorAll(`:not([slot])`).length;if(!n.length&&r)return;if(this._areOptionsInitialized=!0,e){this._slottedDisabledOptions=[];for(let n of e)t.k.getNotifier(n).unsubscribe(this.#r,`selected`)}if(n)for(let e of n)e._displayCheckmark=!0,t.k.getNotifier(e).subscribe(this.#r,`selected`);let i=[];for(let e of this._slottedOptions)(e.selected||e.value===this.value||this.values.includes(e.value))&&i.push(e.value),e.disabled&&this._slottedDisabledOptions.push(e);this.#t(i),this.#l(),this.#T()}#r;#i(){for(let e of this._slottedOptions)e.selected=this.values.includes(e.value),this.#c(e)}#a(e){let t=e.value,n,r=!1,i=!this.values.includes(t);this.multiple?(n=i?[...this.values,t]:this.values.filter(e=>e!==t),r=!0):(i?(n=[t],r=!0):n=[],this.open=!1),this.#e(n);let a=i?this.locale.searchableSelect.optionSelectedMessage(e._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(e._getAccessibleName()),o=this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):``;this._changeDescription=`${a} ${o}`,r&&(this._currentSearchText=null)}#o;#s(e){return e.querySelector(`[slot="tag-icon"]`)}_tagIconSlotName(e){return`_tag-icon-${this.values.indexOf(e)}`}#c(e){if(e.selected&&this.#s(e)){let t=this.#o.get(e);t||(t=this.#s(e).cloneNode(!0),this.#o.set(e,t)),t.slot=this._tagIconSlotName(e.value),this.appendChild(t)}else{let t=this.#o.get(e);t&&(t.remove(),this.#o.delete(e))}}optionFilterChanged(){this.#l()}loadingChanged(e,t){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,e&&!t&&(this._changeDescription=``)}#l(){let e=[],t=this.optionFilter??((e,t)=>e.text.toLowerCase().includes(t.toLowerCase()));for(let n of this._slottedOptions??[]){n._vvdSearchText=this.searchText;let r=!this.searchText||t(n,this.searchText);n._isNotMatching=!r,!n.hidden&&r&&e.push(n)}for(let e of this._slottedElements??[])if(S.r(e)){let t=Array.from(e.children).some(e=>x.i(e)&&!e._isNotMatching&&!e.hidden);e.style.display=t?``:`none`}this.#u(null),this._filteredOptions=e;let n=e.filter(e=>!e.disabled);this._selectAllOption?this._filteredEnabledOptions=[this._selectAllOption,...n]:this._filteredEnabledOptions=n}#u(e){if(typeof this._highlightedOptionIndex==`number`){let e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1}if(typeof e==`number`&&(e=this._filteredEnabledOptions.length?Math.max(0,Math.min(this._filteredEnabledOptions.length-1,e)):null),this._highlightedOptionIndex=e,typeof this._highlightedOptionIndex==`number`){let e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,b.t(e,this._listbox,`nearest`),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#d(){if(this._highlightedOptionIndex===null)return;let e=this._filteredEnabledOptions[this._highlightedOptionIndex];if(e.getAttribute(`data-select-all`)!==null){this._toggleSelectAll();return}this.#a(e)}#f(){this.#u(0)}#p(){this.#u(this._filteredEnabledOptions.length-1)}#m(){this.#u((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-A)}#h(){this.#u((this._highlightedOptionIndex??-1)+A)}#g(){this.#u((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#_(){this.#u((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(e){return this._slottedOptions.find(t=>t.value===e).label}_tagConnotationForValue(e){return this._slottedOptions.find(t=>t.value===e).tagConnotation}_isTagDisabled(e){let t=this._slottedOptions.find(t=>t.value===e);return this.disabled||t.disabled}#v(e){return this._slottedOptions?.find(t=>t.value===e)?.label}#y(e,t,n){let r=document.createElement(this._optionTagTagName);r.label=e,r.removable=t,r.style.cssText=`position: absolute; visibility: hidden;`,r.hasIconPlaceholder=n,this.shadowRoot.appendChild(r);let i=r.getBoundingClientRect().width;return r.remove(),i}#b(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}let e=this._contentArea.getBoundingClientRect().width,t=[[]],n=0,r=k,i;for(i=this.values.length-1;i>=0;i--){let a=this.maxLines&&n===this.maxLines-1,o=this.#y(this._tagLabelForValue(this.values[i]),!0,this.#s(this.selectedOptions[i])!==null),s={value:this.values[i],width:o},c=0;if(a){let e=i;e&&(c=O+this.#y(e.toString(),!1,!1))}if(r+O+o+c>e){if(a)if(i===this.values.length-1)t[n].unshift(s),r+=O+o;else break;else t.push([]),n++,t[n].unshift(s),r=o;continue}t[n].unshift(s),r+=O+o}this._numElidedTags=i+1,t.reverse();for(let n=0;n<t.length-1;n++){let r=t[n].map(e=>e.width).reduce((e,t)=>e+t,0)+(t[n].length-1)*O;for(n===0&&this._numElidedTags&&(r+=O+this.#y(this._numElidedTags.toString(),!1,!1));t[n+1].length&&r+O+t[n+1][0].width<=e;){let e=t[n+1].shift();t[n].push(e),r+=O+e.width}}let a=t.map(e=>e.map(e=>e.value));this._tagRows=a.slice(0,-1),this._lastTagRow=a.slice(-1)[0]}_onTagRemoved(e){this.#e(this.values.filter(t=>t!==e)),this.#l()}_onTagKeydown(e){let n=parseInt(e.target.dataset.index);switch(e.key){case`Backspace`:case`Delete`:case`Enter`:case` `:this._onTagRemoved(this.values[n]),t.M.process(),this.#x(this.#w(n));break;case`ArrowLeft`:this.#x(this.#S(n)??n);break;case`ArrowRight`:this.#x(this.#C(n));break}return!0}#x(e){e===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${e}"]`)?.focus()}#S(e){if(!this.values.length)return null;for(let t=e-1;t>=0;t--)if(!this._isTagDisabled(this.values[t]))return t;return null}#C(e){if(!this.values.length)return null;for(let t=e+1;t<this.values.length;t++)if(!this._isTagDisabled(this.values[t]))return t;return null}#w(e){return this.#C(e-1)??this.#S(e)}_onListboxClick(e){if(this.disabled)return;let t=e.target.closest(`option,[role=option],[data-vvd-component=option]`);if(t?.getAttribute(`data-select-all`)!==null){this._toggleSelectAll();return}t&&!t.disabled&&this.#a(t)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#e(this.selectedOptions.filter(e=>e.disabled).map(e=>e.value))}maxSelectedChanged(){this.#T()}#T(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!=`number`||this.maxSelected<=0)return;let e=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){let t=e.filter(e=>!this.selectedOptions.includes(e));for(let e of t)e.disabled=!0}else for(let t of e)t.disabled=!1}get _hasSelectionCount(){return this.multiple&&this.maxSelected&&this.maxSelected>=1}get _selectableOptions(){return this._slottedOptions?.filter(e=>!this._slottedDisabledOptions.includes(e)&&!e.disabled)??[]}get _selectAllLabel(){return this._isAllSelected?this.deselectAllText??this.locale.searchableSelect.deselectAllLabel:this.selectAllText??this.locale.searchableSelect.selectAllLabel}get _isAllSelected(){let e=this.values;if(!this.multiple||!this._slottedOptions)return!1;let t=this._selectableOptions;if(t.length===0)return!1;let n=new Set(e);return t.every(e=>n.has(e.value))}_toggleSelectAll(){let e=this._selectableOptions.map(e=>e.value);if(this._isAllSelected){let t=this.values.filter(t=>!e.includes(t));this.#e(t),this._changeDescription=this.locale.searchableSelect.deselectedAllMessage;return}let t=e.filter(e=>!this.values.includes(e)),n=[...this.values,...t];this.#e(n),this._changeDescription=this.locale.searchableSelect.selectedAllMessage}#E(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(e,t){super.nameChanged(e,t),this.#D()}#D(){if(!this.name)this.setFormValue(null);else{let e=new FormData;for(let t of this.values)e.append(this.name,t);this.setFormValue(e)}}formResetCallback(){super.formResetCallback(),this.#e(this.#E())}#O;_onFieldsetClick(e){this.disabled||e.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#E()),this.#O.observe(this._contentArea),this.addEventListener(`optgroup-change`,this.#k)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`optgroup-change`,this.#k),this.#O.disconnect()}#k;validate(){super.validate(this._input??void 0)}focus(e){this._input?.focus(e)}_onMouseDown(e){let t=e.composedPath()[0];return!e.defaultPrevented&&t!==this._input&&!this._isFromContextualHelp(e)?(this._input.focus(),!1):!0}};o.t([t.m],M.prototype,`appearance`,void 0),o.t([t.m],M.prototype,`shape`,void 0),o.t([t.m()],M.prototype,`scale`,void 0),o.t([t.m({mode:`boolean`,attribute:`fixed-dropdown`})],M.prototype,`fixedDropdown`,void 0),o.t([t.m],M.prototype,`placeholder`,void 0),o.t([t.m({mode:`boolean`})],M.prototype,`open`,void 0),o.t([t.m({mode:`boolean`})],M.prototype,`multiple`,void 0),o.t([t.m({attribute:`external-tags`,mode:`boolean`})],M.prototype,`externalTags`,void 0),o.t([t.m({attribute:`max-lines`,converter:t.h})],M.prototype,`maxLines`,void 0),o.t([t.A],M.prototype,`values`,void 0),o.t([t.A],M.prototype,`initialValues`,void 0),o.t([t.A],M.prototype,`_input`,void 0),o.t([t.A],M.prototype,`_currentSearchText`,void 0),o.t([t.A],M.prototype,`_slottedElements`,void 0),o.t([t.A],M.prototype,`_slottedOptions`,void 0),o.t([t.A],M.prototype,`optionFilter`,void 0),o.t([t.A],M.prototype,`_filteredOptions`,void 0),o.t([t.A],M.prototype,`_filteredEnabledOptions`,void 0),o.t([t.m({mode:`boolean`})],M.prototype,`loading`,void 0),o.t([t.A],M.prototype,`_highlightedOptionIndex`,void 0),o.t([t.A],M.prototype,`_contentArea`,void 0),o.t([t.A],M.prototype,`_numElidedTags`,void 0),o.t([t.A],M.prototype,`_tagRows`,void 0),o.t([t.A],M.prototype,`_lastTagRow`,void 0),o.t([t.A],M.prototype,`_listbox`,void 0),o.t([t.m({mode:`boolean`})],M.prototype,`clearable`,void 0),o.t([t.m({attribute:`max-selected`,converter:t.h})],M.prototype,`maxSelected`,void 0),o.t([t.A],M.prototype,`_slottedDisabledOptions`,void 0),o.t([t.m({attribute:`enable-select-all`,mode:`boolean`})],M.prototype,`enableSelectAll`,void 0),o.t([t.m({attribute:`select-all-text`})],M.prototype,`selectAllText`,void 0),o.t([t.m({attribute:`deselect-all-text`})],M.prototype,`deselectAllText`,void 0),o.t([t.A],M.prototype,`_selectAllOption`,void 0),o.t([t.A],M.prototype,`_changeDescription`,void 0),o.t([t.A],M.prototype,`_anchor`,void 0);var N=class extends e.t(t.t){constructor(...e){super(...e),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit(`remove`,void 0,{bubbles:!1})}};o.t([t.m],N.prototype,`shape`,void 0),o.t([t.A],N.prototype,`connotation`,void 0),o.t([t.m],N.prototype,`label`,void 0),o.t([t.m({mode:`boolean`})],N.prototype,`removable`,void 0),o.t([t.m({mode:`boolean`})],N.prototype,`disabled`,void 0),o.t([t.A],N.prototype,`hasIconPlaceholder`,void 0),o.t([t.m()],N.prototype,`scale`,void 0);function P(){return t.p`
2
2
  <label for="control" class="label" id="label"> ${e=>e.label} </label>
3
- `}function N(){return t.p`
3
+ `}function F(){return t.p`
4
4
  <span
5
5
  id="selection-count"
6
6
  class="selection-count"
7
7
  aria-label="${e=>e.locale.searchableSelect.maxSelectedMessage(e.values.length,e.maxSelected)}"
8
8
  >(${e=>`${e.values.length}/${e.maxSelected}`})</span
9
9
  >
10
- `}var P=(e,n)=>{let r=e.tagFor(j);return t.p`
10
+ `}var I=(e,n)=>{let r=e.tagFor(N);return t.p`
11
11
  <div class="tag-wrapper">
12
12
  <${r}
13
13
  class="tag"
@@ -25,7 +25,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
25
25
  <slot slot="icon" name="${(e,t)=>n(t)._tagIconSlotName(e)}"></slot>
26
26
  </${r}>
27
27
  </div>
28
- `},F=(e,n)=>{let r=e.tagFor(j);return t.p`
28
+ `},L=(e,n)=>{let r=e.tagFor(N);return t.p`
29
29
  <${r}
30
30
  class="tag"
31
31
  tabindex="-1"
@@ -35,7 +35,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
35
35
  ?disabled="${(e,t)=>n(e,t).disabled}"
36
36
  @mousedown="${()=>!1}">
37
37
  </${r}>
38
- `};function I(e){let r=e.tagFor(p.i),o=e.tagFor(u.r),c=l.a(e),f=p.r(e),m=P(e,e=>e.parent),h=P(e,e=>e.parentContext.parent),g=F(e,(e,t)=>e),_=F(e,(e,t)=>t.parent);return t.p`
38
+ `};function R(e){let r=e.tagFor(p.i),o=e.tagFor(u.r),c=l.a(e),f=p.r(e),m=I(e,e=>e.parent),h=I(e,e=>e.parentContext.parent),g=L(e,(e,t)=>e),_=L(e,(e,t)=>t.parent);return t.p`
39
39
  <div
40
40
  class="fieldset ${e=>s.t([`disabled`,e.disabled],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`size-${e.scale}`,!!e.scale],[`error`,!!e.errorValidationMessage],[`success`,!!e.successText],[`has-highlighted-option`,e._highlightedOptionIndex!==null])}"
41
41
  @click="${(e,t)=>e._onFieldsetClick(t.event)}"
@@ -89,7 +89,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
89
89
  ${a.t(e=>!e.loading,f)}
90
90
  </div>
91
91
  </div>
92
- `}function L(e){return e.open&&e.fixedDropdown?`--_searchable-select-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function R(e){let n=e.tagFor(x.r),r=e.tagFor(C.t);return t.p`
92
+ `}function z(e){return e.open&&e.fixedDropdown?`--_searchable-select-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px`:null}function B(e){let n=e.tagFor(x.r),r=e.tagFor(T.t);return t.p`
93
93
  <${n}
94
94
  data-select-all
95
95
  tabindex="-1"
@@ -100,12 +100,12 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
100
100
  ${i.t(`_selectAllOption`)}>
101
101
  </${n}>
102
102
  <${r} class="divider"></${r}>
103
- `}function z(e){let n=e.tagFor(m.i);return t.p`
103
+ `}function V(e){let n=e.tagFor(m.i);return t.p`
104
104
  <div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp&&!e._hasSelectionCount}>
105
105
  ${a.t(e=>e.label||e._hasSelectionCount,t.p`
106
106
  <div>
107
- ${a.t(e=>e.label,M())}
108
- ${a.t(e=>e._hasSelectionCount,N())}
107
+ ${a.t(e=>e.label,P())}
108
+ ${a.t(e=>e._hasSelectionCount,F())}
109
109
  </div>
110
110
  `)}
111
111
  <slot name="contextual-help" ${r.t(`_contextualHelpSlottedContent`)}></slot>
@@ -114,14 +114,14 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
114
114
  ${e=>e._changeDescription}
115
115
  </span>
116
116
  <div>
117
- ${I(e)}
117
+ ${R(e)}
118
118
  <div class="popup-wrapper">
119
119
  <${n}
120
120
  :anchor="${e=>e._anchor}"
121
121
  :open="${e=>e.open}"
122
122
  class="popup"
123
123
  placement="bottom-start"
124
- style="${L}"
124
+ style="${z}"
125
125
  strategy="${e=>e.fixedDropdown?`fixed`:`absolute`}">
126
126
  <div
127
127
  class="listbox"
@@ -132,9 +132,9 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
132
132
  @click="${(e,t)=>e._onListboxClick(t.event)}"
133
133
  @mousedown="${()=>!1}"
134
134
  >
135
- ${a.t(e=>e.enableSelectAll&&e.multiple&&!e.maxSelected,R(e))}
135
+ ${a.t(e=>e.enableSelectAll&&e.multiple&&!e.maxSelected,B(e))}
136
136
  <slot
137
- ${r.t({filter:x.i,flatten:!0,property:`_slottedOptions`})}>
137
+ ${r.t({filter:(e=>x.i(e)||S.r(e)),flatten:!0,property:`_slottedElements`})}>
138
138
  </slot>
139
139
  ${a.t(e=>e._filteredOptions.length===0,t.p`<div class="empty-message">
140
140
  ${a.t(e=>e.loading,t.p`<slot name="loading-options">
@@ -151,16 +151,16 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
151
151
  </${n}>
152
152
  </div>
153
153
  </div>
154
- `}var B=e=>{let n=e.tagFor(j,!0);return t.p`
154
+ `}var H=e=>{let n=e.tagFor(N,!0);return t.p`
155
155
  <template
156
156
  :_optionTagTagName="${()=>n}"
157
157
  @mousedown="${(e,t)=>e._onMouseDown(t.event)}"
158
158
  >
159
159
  <div class="control-wrapper">
160
- ${z(e)} ${t=>t._getFeedbackTemplate(e)}
160
+ ${V(e)} ${t=>t._getFeedbackTemplate(e)}
161
161
  </div>
162
162
  </template>
163
- `};function V(e){return t.p`
163
+ `};function U(e){return t.p`
164
164
  <span
165
165
  class="remove-button"
166
166
  aria-label="${e=>e.locale.searchableSelect.removeTagButtonLabel(e.label)}"
@@ -170,7 +170,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
170
170
  >
171
171
  <${e} name="close-line"></${e}>
172
172
  </span>
173
- `}var H=t.u(`option-tag`,j,e=>{let n=e.tagFor(c.r);return t.p`<span
173
+ `}var W=t.u(`option-tag`,N,e=>{let n=e.tagFor(c.r);return t.p`<span
174
174
  class="${e=>s.t(`base`,[`disabled`,e.disabled],[`removable`,e.removable],[`shape-${e.shape}`,!!e.shape],[`connotation-${e.connotation}`,!!e.connotation],[`size-${e.scale}`,!!e.scale])}"
175
175
  aria-disabled="${e=>e.disabled}"
176
176
  >
@@ -178,5 +178,5 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
178
178
  ${a.t(e=>e.hasIconPlaceholder,t.p`<div class="icon-placeholder"></div>`)}
179
179
  </slot>
180
180
  ${a.t(e=>e.label,e=>t.p`<span class="label">${e.label}</span>`)}
181
- ${a.t(e=>e.removable,V(n))}
182
- </span>`},[c.t],{styles:[T],shadowOptions:{delegatesFocus:!0}}),U=t.u(`searchable-select`,A,B,[p.t,m.t,c.t,H,u.t,h.r,x.t,S.t],{styles:w});t.d(U)();
181
+ ${a.t(e=>e.removable,U(n))}
182
+ </span>`},[c.t],{styles:[D],shadowOptions:{delegatesFocus:!0}}),G=t.u(`searchable-select`,M,H,[p.t,m.t,c.t,W,u.t,h.r,x.t,S.t,w.t],{styles:E});t.d(G)();
package/searchable-select/index.js CHANGED
@@ -9,21 +9,23 @@ import { t as h } from "../bundled/class-names.js";
9
9
  import { r as g, t as _ } from "../bundled/definition3.js";
10
10
  import { a as v, i as y, n as b } from "../bundled/affix.js";
11
11
  import { r as x, t as S } from "../bundled/definition5.js";
12
- import { n as C, t as w } from "../bundled/delegates-aria.js";
13
- import { n as T } from "../bundled/form-associated.js";
14
- import { i as E, r as D, t as O } from "../bundled/definition6.js";
15
- import { i as k, t as A } from "../bundled/definition8.js";
16
- import { r as j, t as M } from "../bundled/mixins.js";
17
- import { t as N } from "../bundled/form-element.js";
18
- import { t as P } from "../bundled/with-contextual-help.js";
19
- import { t as F } from "../bundled/with-error-text.js";
20
- import { t as I } from "../bundled/with-success-text.js";
21
- import { t as L } from "../bundled/scrollIntoView.js";
22
- import { i as R, r as z, t as ee } from "../bundled/definition17.js";
23
- import { t as B } from "../bundled/definition19.js";
12
+ import { n as ee, t as te } from "../bundled/delegates-aria.js";
13
+ import { n as ne } from "../bundled/form-associated.js";
14
+ import { i as C, r as w, t as T } from "../bundled/definition6.js";
15
+ import { i as E, t as D } from "../bundled/definition8.js";
16
+ import { r as O, t as k } from "../bundled/mixins.js";
17
+ import { t as A } from "../bundled/form-element.js";
18
+ import { t as j } from "../bundled/with-contextual-help.js";
19
+ import { t as M } from "../bundled/with-error-text.js";
20
+ import { t as N } from "../bundled/with-success-text.js";
21
+ import { t as P } from "../bundled/scrollIntoView.js";
22
+ import { i as F, r as I, t as L } from "../bundled/definition17.js";
23
+ import { r as R, t as re } from "../bundled/definition18.js";
24
+ import { t as z } from "../bundled/extractOptions.js";
25
+ import { t as B } from "../bundled/definition20.js";
24
26
  import { t as V } from "../bundled/divider.js";
25
27
  //#region src/lib/searchable-select/searchable-select.scss?inline
26
- var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}", U = ":host{display:block}.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in sRGB, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in sRGB, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}", W = 8, G = 100, K = 10, q = (e) => typeof e == "string", J = class extends P(M(F(I(N(w(b(e(T(c))))))))) {
28
+ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notset;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);--_suppressable-focus-shadow:none;--_suppressable-focus-outline:none;--_suppressable-focus-outline-offset:0;flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.divider{margin-block:10px;margin-inline:12px}", U = ":host{display:block}.base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in sRGB, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in sRGB, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}", W = 8, G = 100, K = 10, q = (e) => typeof e == "string", J = class extends j(k(M(N(A(te(b(e(ne(c))))))))) {
27
29
  constructor(...e) {
28
30
  super(...e), this.fixedDropdown = !1, this.open = !1, this.multiple = !1, this.externalTags = !1, this.maxLines = null, this.values = [], this.initialValues = [], this._currentSearchText = null, this._areOptionsInitialized = !1, this.#r = { handleChange: (e, t) => {
29
31
  e.selected && !this.values.includes(e.value) ? this.values = [...this.values, e.value] : !e.selected && this.values.includes(e.value) && (this.values = this.values.filter((t) => t !== e.value));
@@ -31,7 +33,10 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
31
33
  q(e) || super.setFormValue(e, t);
32
34
  }, this._changeDescription = "", this.#O = new ResizeObserver(() => {
33
35
  this.#b();
34
- });
36
+ }), this.#k = () => {
37
+ /* v8 ignore else */
38
+ this._slottedElements && this._slottedElementsChanged();
39
+ };
35
40
  }
36
41
  openChanged() {
37
42
  this.open || this.#u(null);
@@ -149,6 +154,9 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
149
154
  }
150
155
  return !0;
151
156
  }
157
+ _slottedElementsChanged() {
158
+ this._slottedOptions = z(this._slottedElements);
159
+ }
152
160
  _slottedOptionsChanged(e, t) {
153
161
  let n = !!this.querySelectorAll(":not([slot])").length;
154
162
  if (!t.length && n) return;
@@ -201,6 +209,11 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
201
209
  let r = !this.searchText || t(n, this.searchText);
202
210
  n._isNotMatching = !r, !n.hidden && r && e.push(n);
203
211
  }
212
+ /* v8 ignore next -- _slottedElements not yet set if filtering is triggered before slot initialises */
213
+ for (let e of this._slottedElements ?? []) if (R(e)) {
214
+ let t = Array.from(e.children).some((e) => F(e) && !e._isNotMatching && !e.hidden);
215
+ e.style.display = t ? "" : "none";
216
+ }
204
217
  this.#u(null), this._filteredOptions = e;
205
218
  let n = e.filter((e) => !e.disabled);
206
219
  this._selectAllOption ? this._filteredEnabledOptions = [this._selectAllOption, ...n] : this._filteredEnabledOptions = n;
@@ -208,11 +221,11 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
208
221
  #u(e) {
209
222
  if (typeof this._highlightedOptionIndex == "number") {
210
223
  let e = this._filteredEnabledOptions[this._highlightedOptionIndex];
211
- e._highlighted = !1, e.removeAttribute("data-highlighted");
224
+ e._highlighted = !1;
212
225
  }
213
226
  if (typeof e == "number" && (e = this._filteredEnabledOptions.length ? Math.max(0, Math.min(this._filteredEnabledOptions.length - 1, e)) : null), this._highlightedOptionIndex = e, typeof this._highlightedOptionIndex == "number") {
214
227
  let e = this._filteredEnabledOptions[this._highlightedOptionIndex];
215
- e._highlighted = !0, e.setAttribute("data-highlighted", ""), L(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, e.selected);
228
+ e._highlighted = !0, P(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, e.selected);
216
229
  }
217
230
  }
218
231
  #d() {
@@ -414,11 +427,12 @@ var H = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
414
427
  return this.open ? (this.open = !1, !1) : !0;
415
428
  }
416
429
  connectedCallback() {
417
- super.connectedCallback(), this.values.length || (this.values = this.#E()), this.#O.observe(this._contentArea);
430
+ super.connectedCallback(), this.values.length || (this.values = this.#E()), this.#O.observe(this._contentArea), this.addEventListener("optgroup-change", this.#k);
418
431
  }
419
432
  disconnectedCallback() {
420
- super.disconnectedCallback(), this.#O.disconnect();
433
+ super.disconnectedCallback(), this.removeEventListener("optgroup-change", this.#k), this.#O.disconnect();
421
434
  }
435
+ #k;
422
436
  validate() {
423
437
  super.validate(this._input ?? void 0);
424
438
  }
@@ -439,7 +453,7 @@ m([o], J.prototype, "appearance", void 0), m([o], J.prototype, "shape", void 0),
439
453
  })], J.prototype, "externalTags", void 0), m([o({
440
454
  attribute: "max-lines",
441
455
  converter: i
442
- })], J.prototype, "maxLines", void 0), m([t], J.prototype, "values", void 0), m([t], J.prototype, "initialValues", void 0), m([t], J.prototype, "_input", void 0), m([t], J.prototype, "_currentSearchText", void 0), m([t], J.prototype, "_slottedOptions", void 0), m([t], J.prototype, "optionFilter", void 0), m([t], J.prototype, "_filteredOptions", void 0), m([t], J.prototype, "_filteredEnabledOptions", void 0), m([o({ mode: "boolean" })], J.prototype, "loading", void 0), m([t], J.prototype, "_highlightedOptionIndex", void 0), m([t], J.prototype, "_contentArea", void 0), m([t], J.prototype, "_numElidedTags", void 0), m([t], J.prototype, "_tagRows", void 0), m([t], J.prototype, "_lastTagRow", void 0), m([t], J.prototype, "_listbox", void 0), m([o({ mode: "boolean" })], J.prototype, "clearable", void 0), m([o({
456
+ })], J.prototype, "maxLines", void 0), m([t], J.prototype, "values", void 0), m([t], J.prototype, "initialValues", void 0), m([t], J.prototype, "_input", void 0), m([t], J.prototype, "_currentSearchText", void 0), m([t], J.prototype, "_slottedElements", void 0), m([t], J.prototype, "_slottedOptions", void 0), m([t], J.prototype, "optionFilter", void 0), m([t], J.prototype, "_filteredOptions", void 0), m([t], J.prototype, "_filteredEnabledOptions", void 0), m([o({ mode: "boolean" })], J.prototype, "loading", void 0), m([t], J.prototype, "_highlightedOptionIndex", void 0), m([t], J.prototype, "_contentArea", void 0), m([t], J.prototype, "_numElidedTags", void 0), m([t], J.prototype, "_tagRows", void 0), m([t], J.prototype, "_lastTagRow", void 0), m([t], J.prototype, "_listbox", void 0), m([o({ mode: "boolean" })], J.prototype, "clearable", void 0), m([o({
443
457
  attribute: "max-selected",
444
458
  converter: i
445
459
  })], J.prototype, "maxSelected", void 0), m([t], J.prototype, "_slottedDisabledOptions", void 0), m([o({
@@ -464,7 +478,7 @@ function X() {
464
478
  <label for="control" class="label" id="label"> ${(e) => e.label} </label>
465
479
  `;
466
480
  }
467
- function Z() {
481
+ function ie() {
468
482
  return s`
469
483
  <span
470
484
  id="selection-count"
@@ -474,7 +488,7 @@ function Z() {
474
488
  >
475
489
  `;
476
490
  }
477
- var Q = (e, t) => {
491
+ var Z = (e, t) => {
478
492
  let n = e.tagFor(Y);
479
493
  return s`
480
494
  <div class="tag-wrapper">
@@ -495,7 +509,7 @@ var Q = (e, t) => {
495
509
  </${n}>
496
510
  </div>
497
511
  `;
498
- }, $ = (e, t) => {
512
+ }, Q = (e, t) => {
499
513
  let n = e.tagFor(Y);
500
514
  return s`
501
515
  <${n}
@@ -509,8 +523,8 @@ var Q = (e, t) => {
509
523
  </${n}>
510
524
  `;
511
525
  };
512
- function te(e) {
513
- let t = e.tagFor(E), n = e.tagFor(x), r = v(e), i = D(e), a = Q(e, (e) => e.parent), o = Q(e, (e) => e.parentContext.parent), c = $(e, (e, t) => e), l = $(e, (e, t) => t.parent);
526
+ function ae(e) {
527
+ let t = e.tagFor(C), n = e.tagFor(x), r = v(e), i = w(e), a = Z(e, (e) => e.parent), o = Z(e, (e) => e.parentContext.parent), c = Q(e, (e, t) => e), l = Q(e, (e, t) => t.parent);
514
528
  return s`
515
529
  <div
516
530
  class="fieldset ${(e) => h(["disabled", e.disabled], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], [`size-${e.scale}`, !!e.scale], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["has-highlighted-option", e._highlightedOptionIndex !== null])}"
@@ -534,7 +548,7 @@ function te(e) {
534
548
  id="control"
535
549
  class="control"
536
550
  autocomplete="off"
537
- ${C({
551
+ ${ee({
538
552
  role: "combobox",
539
553
  ariaAutoComplete: "list",
540
554
  ariaHasPopup: "listbox",
@@ -578,11 +592,11 @@ function te(e) {
578
592
  </div>
579
593
  `;
580
594
  }
581
- function ne(e) {
595
+ function oe(e) {
582
596
  return e.open && e.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
583
597
  }
584
- function re(e) {
585
- let t = e.tagFor(z), n = e.tagFor(V);
598
+ function se(e) {
599
+ let t = e.tagFor(I), n = e.tagFor(V);
586
600
  return s`
587
601
  <${t}
588
602
  data-select-all
@@ -596,14 +610,14 @@ function re(e) {
596
610
  <${n} class="divider"></${n}>
597
611
  `;
598
612
  }
599
- function ie(e) {
600
- let t = e.tagFor(k);
613
+ function ce(e) {
614
+ let t = e.tagFor(E);
601
615
  return s`
602
616
  <div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp && !e._hasSelectionCount}>
603
617
  ${p((e) => e.label || e._hasSelectionCount, s`
604
618
  <div>
605
619
  ${p((e) => e.label, X())}
606
- ${p((e) => e._hasSelectionCount, Z())}
620
+ ${p((e) => e._hasSelectionCount, ie())}
607
621
  </div>
608
622
  `)}
609
623
  <slot name="contextual-help" ${d("_contextualHelpSlottedContent")}></slot>
@@ -612,14 +626,14 @@ function ie(e) {
612
626
  ${(e) => e._changeDescription}
613
627
  </span>
614
628
  <div>
615
- ${te(e)}
629
+ ${ae(e)}
616
630
  <div class="popup-wrapper">
617
631
  <${t}
618
632
  :anchor="${(e) => e._anchor}"
619
633
  :open="${(e) => e.open}"
620
634
  class="popup"
621
635
  placement="bottom-start"
622
- style="${ne}"
636
+ style="${oe}"
623
637
  strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}">
624
638
  <div
625
639
  class="listbox"
@@ -630,12 +644,12 @@ function ie(e) {
630
644
  @click="${(e, t) => e._onListboxClick(t.event)}"
631
645
  @mousedown="${() => !1}"
632
646
  >
633
- ${p((e) => e.enableSelectAll && e.multiple && !e.maxSelected, re(e))}
647
+ ${p((e) => e.enableSelectAll && e.multiple && !e.maxSelected, se(e))}
634
648
  <slot
635
649
  ${d({
636
- filter: R,
650
+ filter: ((e) => F(e) || R(e)),
637
651
  flatten: !0,
638
- property: "_slottedOptions"
652
+ property: "_slottedElements"
639
653
  })}>
640
654
  </slot>
641
655
  ${p((e) => e._filteredOptions.length === 0, s`<div class="empty-message">
@@ -655,7 +669,7 @@ function ie(e) {
655
669
  </div>
656
670
  `;
657
671
  }
658
- var ae = (e) => {
672
+ var le = (e) => {
659
673
  let t = e.tagFor(Y, !0);
660
674
  return s`
661
675
  <template
@@ -663,14 +677,14 @@ var ae = (e) => {
663
677
  @mousedown="${(e, t) => e._onMouseDown(t.event)}"
664
678
  >
665
679
  <div class="control-wrapper">
666
- ${ie(e)} ${(t) => t._getFeedbackTemplate(e)}
680
+ ${ce(e)} ${(t) => t._getFeedbackTemplate(e)}
667
681
  </div>
668
682
  </template>
669
683
  `;
670
684
  };
671
685
  //#endregion
672
686
  //#region src/lib/searchable-select/option-tag.template.ts
673
- function oe(e) {
687
+ function $(e) {
674
688
  return s`
675
689
  <span
676
690
  class="remove-button"
@@ -685,9 +699,9 @@ function oe(e) {
685
699
  }
686
700
  //#endregion
687
701
  //#region src/lib/searchable-select/index.ts
688
- r(l("searchable-select", J, ae, [
689
- O,
690
- A,
702
+ r(l("searchable-select", J, le, [
703
+ T,
704
+ D,
691
705
  _,
692
706
  l("option-tag", Y, (e) => {
693
707
  let t = e.tagFor(g);
@@ -699,15 +713,16 @@ r(l("searchable-select", J, ae, [
699
713
  ${p((e) => e.hasIconPlaceholder, s`<div class="icon-placeholder"></div>`)}
700
714
  </slot>
701
715
  ${p((e) => e.label, (e) => s`<span class="label">${e.label}</span>`)}
702
- ${p((e) => e.removable, oe(t))}
716
+ ${p((e) => e.removable, $(t))}
703
717
  </span>`;
704
718
  }, [_], {
705
719
  styles: [U],
706
720
  shadowOptions: { delegatesFocus: !0 }
707
721
  }),
708
722
  S,
709
- j,
710
- ee,
723
+ O,
724
+ L,
725
+ re,
711
726
  B
712
727
  ], { styles: H }))();
713
728
  //#endregion
package/select/definition.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
- const require_definition = require("../unbundled/definition61.cjs");
2
+ const require_definition = require("../unbundled/definition62.cjs");
3
3
  exports.VwcSelectElement = require_definition.Select;
4
4
  exports.registerSelect = require_definition.registerSelect;
5
5
  exports.selectDefinition = require_definition.selectDefinition;
package/select/definition.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition61.js";
1
+ import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition62.js";
2
2
  export { Select as VwcSelectElement, registerSelect, selectDefinition };
package/select/index.cjs CHANGED
@@ -1 +1 @@
1
- require(`../bundled/definition18.cjs`).t();
1
+ require(`../bundled/definition19.cjs`).t();
package/select/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { t as e } from "../bundled/definition18.js";
1
+ import { t as e } from "../bundled/definition19.js";
2
2
  //#region src/lib/select/index.ts
3
3
  e();
4
4
  //#endregion
package/selectable-box/definition.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
- const require_definition = require("../unbundled/definition64.cjs");
2
+ const require_definition = require("../unbundled/definition65.cjs");
3
3
  exports.VwcSelectableBoxElement = require_definition.SelectableBox;
4
4
  exports.registerSelectableBox = require_definition.registerSelectableBox;
5
5
  exports.selectableBoxDefinition = require_definition.selectableBoxDefinition;
package/selectable-box/definition.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition64.js";
1
+ import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition65.js";
2
2
  export { SelectableBox as VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition };
package/shared/aria/delegates-aria.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
10
10
  new (...args: any[]): {
11
11
  _vividAriaBehaviour: "delegate";
12
12
  connectedCallback(): void;
13
+ focus(...args: any[]): void;
13
14
  readonly $fastController: import('@microsoft/fast-element').ElementController;
14
15
  $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
15
16
  disconnectedCallback: (() => void) & (() => void);
@@ -363,7 +364,6 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
363
364
  nonce?: string;
364
365
  tabIndex: number;
365
366
  blur(): void;
366
- focus(options?: FocusOptions): void;
367
367
  ariaControls: string | null;
368
368
  ariaDescribedBy: string | null;
369
369
  ariaDetails: string | null;