@vonage/vivid 5.23.1 → 5.25.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 (522) hide show
  1. package/README.md +1 -1
  2. package/accordion/index.cjs +1 -1
  3. package/accordion/index.js +1 -1
  4. package/accordion-item/index.cjs +1 -1
  5. package/accordion-item/index.js +1 -1
  6. package/audio-player/index.cjs +2 -2
  7. package/audio-player/index.js +3 -3
  8. package/avatar/index.cjs +10 -10
  9. package/avatar/index.js +4 -3
  10. package/badge/index.cjs +1 -1
  11. package/badge/index.js +1 -1
  12. package/breadcrumb-item/index.cjs +9 -5
  13. package/breadcrumb-item/index.js +11 -6
  14. package/bundled/affix.cjs +1 -1
  15. package/bundled/affix.js +1 -1
  16. package/bundled/definition10.cjs +2 -1
  17. package/bundled/definition10.js +3 -2
  18. package/bundled/definition11.cjs +4 -4
  19. package/bundled/definition11.js +4 -3
  20. package/bundled/definition12.cjs +1 -1
  21. package/bundled/definition12.js +1 -0
  22. package/bundled/definition15.cjs +8 -7
  23. package/bundled/definition15.js +27 -24
  24. package/bundled/definition17.cjs +7 -7
  25. package/bundled/definition17.js +22 -109
  26. package/bundled/definition18.cjs +12 -83
  27. package/bundled/definition18.js +20 -426
  28. package/bundled/definition19.cjs +87 -7
  29. package/bundled/definition19.js +433 -16
  30. package/bundled/definition20.cjs +7 -37
  31. package/bundled/definition20.js +17 -172
  32. package/bundled/definition21.cjs +35 -27
  33. package/bundled/definition21.js +155 -154
  34. package/bundled/definition22.cjs +29 -6
  35. package/bundled/definition22.js +172 -20
  36. package/bundled/definition23.cjs +6 -12
  37. package/bundled/definition23.js +17 -32
  38. package/bundled/definition24.cjs +12 -39
  39. package/bundled/definition24.js +33 -67
  40. package/bundled/definition25.cjs +44 -0
  41. package/bundled/definition25.js +81 -0
  42. package/bundled/definition3.cjs +5 -5
  43. package/bundled/definition3.js +10 -40
  44. package/bundled/definition4.cjs +6 -6
  45. package/bundled/definition4.js +4 -3
  46. package/bundled/definition6.cjs +11 -11
  47. package/bundled/definition6.js +4 -3
  48. package/bundled/definition9.cjs +12 -6
  49. package/bundled/definition9.js +66 -43
  50. package/bundled/extractOptions.cjs +1 -0
  51. package/bundled/extractOptions.js +11 -0
  52. package/bundled/icon.cjs +1 -0
  53. package/bundled/icon.js +34 -0
  54. package/bundled/listbox.cjs +1 -1
  55. package/bundled/listbox.js +28 -12
  56. package/bundled/mixins.cjs +8 -8
  57. package/bundled/mixins.js +4 -3
  58. package/bundled/optgroup.cjs +1 -0
  59. package/bundled/optgroup.js +27 -0
  60. package/bundled/option.cjs +1 -0
  61. package/bundled/option.js +93 -0
  62. package/bundled/render-in-light-dom.cjs +1 -1
  63. package/bundled/render-in-light-dom.js +16 -19
  64. package/bundled/vivid-element.cjs +1 -1
  65. package/bundled/vivid-element.js +9 -1
  66. package/card/index.cjs +22 -22
  67. package/card/index.js +4 -3
  68. package/color-picker/index.cjs +18 -18
  69. package/color-picker/index.js +4 -3
  70. package/combobox/definition.cjs +1 -1
  71. package/combobox/definition.js +1 -1
  72. package/combobox/index.cjs +7 -7
  73. package/combobox/index.js +31 -21
  74. package/country/definition.cjs +1 -1
  75. package/country/definition.js +1 -1
  76. package/country/index.cjs +1 -1
  77. package/country/index.js +1 -1
  78. package/country-group/definition.cjs +1 -1
  79. package/country-group/definition.js +1 -1
  80. package/country-group/index.cjs +1 -1
  81. package/country-group/index.js +2 -2
  82. package/custom-elements.json +8438 -7866
  83. package/data-grid/definition.cjs +1 -1
  84. package/data-grid/definition.js +1 -1
  85. package/data-grid/index.cjs +26 -26
  86. package/data-grid/index.js +9 -8
  87. package/date-picker/definition.cjs +1 -1
  88. package/date-picker/definition.js +1 -1
  89. package/date-picker/index.cjs +1 -1
  90. package/date-picker/index.js +1 -1
  91. package/date-range-picker/definition.cjs +1 -1
  92. package/date-range-picker/definition.js +1 -1
  93. package/date-range-picker/index.cjs +1 -1
  94. package/date-range-picker/index.js +1 -1
  95. package/date-time-picker/definition.cjs +1 -1
  96. package/date-time-picker/definition.js +1 -1
  97. package/date-time-picker/index.cjs +1 -1
  98. package/date-time-picker/index.js +1 -1
  99. package/dial-pad/definition.cjs +1 -1
  100. package/dial-pad/definition.js +1 -1
  101. package/dial-pad/index.cjs +7 -7
  102. package/dial-pad/index.js +124 -54
  103. package/dialog/definition.cjs +1 -1
  104. package/dialog/definition.js +1 -1
  105. package/dialog/index.cjs +14 -14
  106. package/dialog/index.js +4 -3
  107. package/divider/definition.cjs +1 -1
  108. package/divider/definition.js +1 -1
  109. package/divider/index.cjs +1 -1
  110. package/divider/index.js +1 -1
  111. package/empty-state/definition.cjs +1 -1
  112. package/empty-state/definition.js +1 -1
  113. package/empty-state/index.cjs +3 -3
  114. package/empty-state/index.js +4 -3
  115. package/fab/definition.cjs +1 -1
  116. package/fab/definition.js +1 -1
  117. package/file-picker/definition.cjs +1 -1
  118. package/file-picker/definition.js +1 -1
  119. package/file-picker/index.cjs +7 -7
  120. package/file-picker/index.js +4 -3
  121. package/flag/definition.cjs +1 -1
  122. package/flag/definition.js +1 -1
  123. package/header/definition.cjs +1 -1
  124. package/header/definition.js +1 -1
  125. package/header/index.cjs +3 -3
  126. package/header/index.js +3 -3
  127. package/icon/definition.cjs +2 -1
  128. package/icon/definition.js +2 -1
  129. package/index.cjs +209 -198
  130. package/index.js +59 -54
  131. package/kbd-key/definition.cjs +1 -1
  132. package/kbd-key/definition.js +1 -1
  133. package/kbd-shortcut/definition.cjs +1 -1
  134. package/kbd-shortcut/definition.js +1 -1
  135. package/layout/definition.cjs +1 -1
  136. package/layout/definition.js +1 -1
  137. package/lib/accordion-item/accordion-item.d.ts +3 -1
  138. package/lib/action-group/action-group.d.ts +1 -1
  139. package/lib/alert/alert.d.ts +2 -2
  140. package/lib/audio-player/audio-player.d.ts +1 -1
  141. package/lib/avatar/avatar.d.ts +1 -1
  142. package/lib/badge/badge.d.ts +1 -1
  143. package/lib/banner/banner.d.ts +3 -3
  144. package/lib/breadcrumb/breadcrumb.d.ts +1 -1
  145. package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
  146. package/lib/button/button.d.ts +3 -3
  147. package/lib/calendar-event/calendar-event.d.ts +1 -1
  148. package/lib/card/card.d.ts +1 -1
  149. package/lib/checkbox/checkbox.d.ts +6 -6
  150. package/lib/color-picker/color-picker.d.ts +7 -7
  151. package/lib/combobox/combobox.d.ts +8 -8
  152. package/lib/components.d.ts +2 -0
  153. package/lib/country-group/country-group.d.ts +2 -2
  154. package/lib/data-grid/data-grid-cell.d.ts +4 -3
  155. package/lib/data-grid/data-grid-row.d.ts +3 -2
  156. package/lib/data-grid/data-grid.options.d.ts +5 -0
  157. package/lib/date-picker/date-picker.d.ts +8 -8
  158. package/lib/date-range-picker/date-range-picker.d.ts +4 -4
  159. package/lib/date-time-picker/date-time-picker.d.ts +8 -8
  160. package/lib/dial-pad/dial-pad.d.ts +2 -2
  161. package/lib/dialog/dialog.d.ts +2 -2
  162. package/lib/divider/divider.d.ts +1 -1
  163. package/lib/fab/fab.d.ts +1 -1
  164. package/lib/file-picker/file-picker.d.ts +7 -7
  165. package/lib/header/header.d.ts +1 -1
  166. package/lib/listbox/definition.d.ts +3 -0
  167. package/lib/listbox/index.d.ts +1 -0
  168. package/lib/listbox/listbox.d.ts +1302 -0
  169. package/lib/listbox/listbox.template.d.ts +3 -0
  170. package/lib/listbox/variations.browser-spec.d.ts +1 -0
  171. package/lib/menu/menu.d.ts +2 -3
  172. package/lib/menu-item/menu-item.d.ts +3 -3
  173. package/lib/nav/nav.d.ts +1 -1
  174. package/lib/nav-disclosure/nav-disclosure.d.ts +2 -2
  175. package/lib/nav-item/nav-item.d.ts +2 -2
  176. package/lib/note/note.d.ts +1 -1
  177. package/lib/number-field/number-field.d.ts +9 -10
  178. package/lib/optgroup/definition.d.ts +3 -0
  179. package/lib/optgroup/index.d.ts +1 -0
  180. package/lib/optgroup/optgroup.d.ts +430 -0
  181. package/lib/optgroup/optgroup.template.d.ts +2 -0
  182. package/lib/optgroup/variations.browser-spec.d.ts +1 -0
  183. package/lib/option/option.d.ts +2 -2
  184. package/lib/pagination/pagination.d.ts +1 -1
  185. package/lib/popover/popover.d.ts +2 -2
  186. package/lib/progress/progress.d.ts +1 -1
  187. package/lib/progress-ring/progress-ring.d.ts +1 -1
  188. package/lib/radio/radio.d.ts +3 -3
  189. package/lib/radio-group/radio-group.d.ts +1 -1
  190. package/lib/range-slider/range-slider.d.ts +3 -3
  191. package/lib/rich-text-editor/rich-text-editor.d.ts +1 -1
  192. package/lib/rich-text-editor/rte/features/base.d.ts +1 -0
  193. package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -2
  194. package/lib/searchable-select/option-tag.d.ts +1 -1
  195. package/lib/searchable-select/searchable-select.d.ts +47 -47
  196. package/lib/select/select.d.ts +9 -9
  197. package/lib/selectable-box/selectable-box.d.ts +1 -1
  198. package/lib/simple-color-picker/simple-color-picker.d.ts +2 -2
  199. package/lib/slider/slider.d.ts +3 -3
  200. package/lib/split-button/split-button.d.ts +3 -3
  201. package/lib/status/status.d.ts +1 -1
  202. package/lib/switch/switch.d.ts +2 -2
  203. package/lib/tab/tab.d.ts +3 -3
  204. package/lib/tab-panel/tab-panel.d.ts +1 -1
  205. package/lib/table/table-cell.d.ts +1 -1
  206. package/lib/table/table-header-cell.d.ts +1 -1
  207. package/lib/table/table-row.d.ts +1 -1
  208. package/lib/table/table-sorting-button.d.ts +1 -1
  209. package/lib/tag/tag.d.ts +3 -3
  210. package/lib/tag-group/tag-group.d.ts +1 -1
  211. package/lib/tag-name-map.d.ts +3 -1
  212. package/lib/text-area/text-area.d.ts +8 -8
  213. package/lib/text-field/text-field.d.ts +10 -9
  214. package/lib/time-picker/time-picker.d.ts +4 -4
  215. package/lib/toggletip/toggletip.d.ts +3 -2
  216. package/lib/tooltip/tooltip.d.ts +3 -2
  217. package/lib/tree-item/tree-item.d.ts +2 -2
  218. package/lib/tree-view/tree-view.d.ts +1 -1
  219. package/lib/video-player/video-player.d.ts +1 -1
  220. package/listbox/definition.cjs +5 -0
  221. package/listbox/definition.js +2 -0
  222. package/listbox/index.cjs +11 -0
  223. package/listbox/index.js +540 -0
  224. package/menu/index.cjs +1 -1
  225. package/menu/index.js +1 -1
  226. package/menu-item/index.cjs +1 -1
  227. package/menu-item/index.js +1 -1
  228. package/nav/definition.cjs +1 -1
  229. package/nav/definition.js +1 -1
  230. package/nav-disclosure/definition.cjs +1 -1
  231. package/nav-disclosure/definition.js +1 -1
  232. package/nav-disclosure/index.cjs +4 -4
  233. package/nav-disclosure/index.js +4 -3
  234. package/nav-item/definition.cjs +1 -1
  235. package/nav-item/definition.js +1 -1
  236. package/note/definition.cjs +1 -1
  237. package/note/definition.js +1 -1
  238. package/number-field/definition.cjs +1 -1
  239. package/number-field/definition.js +1 -1
  240. package/number-field/index.cjs +1 -1
  241. package/number-field/index.js +1 -1
  242. package/optgroup/definition.cjs +6 -0
  243. package/optgroup/definition.js +3 -0
  244. package/optgroup/index.cjs +1 -0
  245. package/optgroup/index.js +4 -0
  246. package/option/definition.cjs +2 -1
  247. package/option/definition.js +2 -1
  248. package/package.json +9 -8
  249. package/pagination/definition.cjs +1 -1
  250. package/pagination/definition.js +1 -1
  251. package/platform-switch/definition.cjs +1 -1
  252. package/platform-switch/definition.js +1 -1
  253. package/popover/definition.cjs +1 -1
  254. package/popover/definition.js +1 -1
  255. package/popover/index.cjs +5 -5
  256. package/popover/index.js +4 -3
  257. package/progress/definition.cjs +1 -1
  258. package/progress/definition.js +1 -1
  259. package/radio/definition.cjs +1 -1
  260. package/radio/definition.js +1 -1
  261. package/radio-group/definition.cjs +1 -1
  262. package/radio-group/definition.js +1 -1
  263. package/range-slider/definition.cjs +1 -1
  264. package/range-slider/definition.js +1 -1
  265. package/rich-text-editor/definition.cjs +1 -1
  266. package/rich-text-editor/definition.js +1 -1
  267. package/rich-text-editor/index.cjs +13 -13
  268. package/rich-text-editor/index.js +26 -23
  269. package/rich-text-view/definition.cjs +1 -1
  270. package/rich-text-view/definition.js +1 -1
  271. package/searchable-select/definition.cjs +1 -1
  272. package/searchable-select/definition.js +1 -1
  273. package/searchable-select/index.cjs +23 -23
  274. package/searchable-select/index.js +67 -49
  275. package/select/definition.cjs +1 -1
  276. package/select/definition.js +1 -1
  277. package/select/index.cjs +1 -1
  278. package/select/index.js +1 -1
  279. package/selectable-box/definition.cjs +1 -1
  280. package/selectable-box/definition.js +1 -1
  281. package/shared/aria/delegates-aria.d.ts +1 -1
  282. package/shared/aria/host-semantics.d.ts +1 -1
  283. package/shared/color-picker/base-color-picker.d.ts +1 -1
  284. package/shared/feedback/feedback-message.d.ts +1 -1
  285. package/shared/feedback/mixins.d.ts +2 -2
  286. package/shared/foundation/button/button.d.ts +2 -2
  287. package/shared/foundation/form-associated/form-associated.d.ts +2 -2
  288. package/shared/foundation/listbox/extractOptions.d.ts +2 -0
  289. package/shared/foundation/listbox/listbox.d.ts +2 -0
  290. package/shared/listbox/commands.d.ts +17 -0
  291. package/shared/listbox/move.d.ts +6 -0
  292. package/shared/listbox/options.d.ts +12 -0
  293. package/shared/listbox/selection.d.ts +28 -0
  294. package/shared/listbox/state.d.ts +26 -0
  295. package/shared/listbox/typeahead.d.ts +8 -0
  296. package/shared/listbox/with-options-filter.d.ts +440 -0
  297. package/shared/listbox/with-options.d.ts +862 -0
  298. package/shared/patterns/affix.d.ts +2 -2
  299. package/shared/patterns/anchored.d.ts +2 -2
  300. package/shared/patterns/char-count/char-count.d.ts +1 -1
  301. package/shared/patterns/form-elements/form-element.d.ts +1 -1
  302. package/shared/patterns/form-elements/with-contextual-help.d.ts +1 -1
  303. package/shared/patterns/form-elements/with-error-text.d.ts +1 -1
  304. package/shared/patterns/form-elements/with-success-text.d.ts +1 -1
  305. package/shared/patterns/kbd-shortcut.d.ts +1 -1
  306. package/shared/patterns/linkable.d.ts +1 -1
  307. package/shared/patterns/localized.d.ts +2 -2
  308. package/shared/patterns/trapped-focus.d.ts +1 -1
  309. package/shared/picker-field/mixins/calendar-picker.d.ts +2 -2
  310. package/shared/picker-field/mixins/calendar-picker.template.d.ts +2 -2
  311. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +1 -1
  312. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +2 -2
  313. package/shared/picker-field/mixins/single-date-picker.d.ts +2 -2
  314. package/shared/picker-field/mixins/single-value-picker.d.ts +2 -2
  315. package/shared/picker-field/mixins/time-selection-picker.d.ts +2 -2
  316. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +4 -4
  317. package/shared/picker-field/picker-field.d.ts +7 -7
  318. package/side-drawer/definition.cjs +1 -1
  319. package/side-drawer/definition.js +1 -1
  320. package/simple-color-picker/definition.cjs +1 -1
  321. package/simple-color-picker/definition.js +1 -1
  322. package/simple-color-picker/index.cjs +6 -6
  323. package/simple-color-picker/index.js +4 -3
  324. package/split-button/definition.cjs +1 -1
  325. package/split-button/definition.js +1 -1
  326. package/split-button/index.cjs +1 -0
  327. package/split-button/index.js +1 -0
  328. package/status/definition.cjs +1 -1
  329. package/status/definition.js +1 -1
  330. package/switch/definition.cjs +1 -1
  331. package/switch/definition.js +1 -1
  332. package/switch/index.cjs +6 -5
  333. package/switch/index.js +16 -14
  334. package/tab/definition.cjs +1 -1
  335. package/tab/definition.js +1 -1
  336. package/tab-panel/definition.cjs +1 -1
  337. package/tab-panel/definition.js +1 -1
  338. package/table/definition.cjs +1 -1
  339. package/table/definition.js +1 -1
  340. package/table/index.cjs +13 -13
  341. package/table/index.js +4 -3
  342. package/tabs/definition.cjs +1 -1
  343. package/tabs/definition.js +1 -1
  344. package/tag/definition.cjs +1 -1
  345. package/tag/definition.js +1 -1
  346. package/tag/index.cjs +11 -11
  347. package/tag/index.js +4 -3
  348. package/tag-group/definition.cjs +1 -1
  349. package/tag-group/definition.js +1 -1
  350. package/text-area/definition.cjs +1 -1
  351. package/text-area/definition.js +1 -1
  352. package/time-picker/definition.cjs +1 -1
  353. package/time-picker/definition.js +1 -1
  354. package/tree-item/definition.cjs +1 -1
  355. package/tree-item/definition.js +1 -1
  356. package/tree-view/definition.cjs +1 -1
  357. package/tree-view/definition.js +1 -1
  358. package/unbundled/affix.cjs +2 -2
  359. package/unbundled/affix.js +1 -1
  360. package/unbundled/base-progress.cjs +1 -1
  361. package/unbundled/base-progress.js +1 -1
  362. package/unbundled/button.cjs +2 -2
  363. package/unbundled/button.js +2 -2
  364. package/unbundled/definition.cjs +2 -65
  365. package/unbundled/definition.js +4 -61
  366. package/unbundled/definition11.cjs +4 -3
  367. package/unbundled/definition11.js +3 -2
  368. package/unbundled/definition12.cjs +3 -2
  369. package/unbundled/definition12.js +3 -2
  370. package/unbundled/definition13.cjs +1 -1
  371. package/unbundled/definition13.js +1 -1
  372. package/unbundled/definition14.cjs +2 -1
  373. package/unbundled/definition14.js +2 -1
  374. package/unbundled/definition17.cjs +9 -4
  375. package/unbundled/definition17.js +9 -4
  376. package/unbundled/definition2.cjs +14 -3
  377. package/unbundled/definition2.js +15 -4
  378. package/unbundled/definition21.cjs +2 -1
  379. package/unbundled/definition21.js +2 -1
  380. package/unbundled/definition23.cjs +3 -1
  381. package/unbundled/definition23.js +4 -2
  382. package/unbundled/definition24.cjs +6 -4
  383. package/unbundled/definition24.js +6 -4
  384. package/unbundled/definition25.cjs +2 -1
  385. package/unbundled/definition25.js +2 -1
  386. package/unbundled/definition26.cjs +7 -4
  387. package/unbundled/definition26.js +7 -4
  388. package/unbundled/definition27.cjs +39 -5
  389. package/unbundled/definition27.js +40 -6
  390. package/unbundled/definition28.cjs +4 -3
  391. package/unbundled/definition28.js +4 -3
  392. package/unbundled/definition29.cjs +5 -168
  393. package/unbundled/definition29.js +11 -162
  394. package/unbundled/definition30.cjs +26 -506
  395. package/unbundled/definition30.js +24 -498
  396. package/unbundled/definition31.cjs +503 -39
  397. package/unbundled/definition31.js +501 -37
  398. package/unbundled/definition32.cjs +39 -239
  399. package/unbundled/definition32.js +36 -236
  400. package/unbundled/definition33.cjs +236 -74
  401. package/unbundled/definition33.js +233 -71
  402. package/unbundled/definition34.cjs +74 -1968
  403. package/unbundled/definition34.js +70 -1940
  404. package/unbundled/definition35.cjs +1993 -26
  405. package/unbundled/definition35.js +1965 -27
  406. package/unbundled/definition36.cjs +26 -111
  407. package/unbundled/definition36.js +23 -103
  408. package/unbundled/definition37.cjs +53 -294
  409. package/unbundled/definition37.js +50 -291
  410. package/unbundled/definition38.cjs +282 -132
  411. package/unbundled/definition38.js +279 -129
  412. package/unbundled/definition39.cjs +165 -339
  413. package/unbundled/definition39.js +163 -337
  414. package/unbundled/definition40.cjs +395 -227
  415. package/unbundled/definition40.js +393 -225
  416. package/unbundled/definition41.cjs +269 -47
  417. package/unbundled/definition41.js +264 -42
  418. package/unbundled/definition42.cjs +48 -67
  419. package/unbundled/definition42.js +45 -64
  420. package/unbundled/definition43.cjs +56 -383
  421. package/unbundled/definition43.js +55 -382
  422. package/unbundled/definition44.cjs +387 -44
  423. package/unbundled/definition44.js +383 -40
  424. package/unbundled/definition45.cjs +53 -45
  425. package/unbundled/definition45.js +49 -41
  426. package/unbundled/definition46.cjs +40 -164
  427. package/unbundled/definition46.js +36 -160
  428. package/unbundled/definition47.cjs +171 -31
  429. package/unbundled/definition47.js +168 -22
  430. package/unbundled/definition48.cjs +30 -89
  431. package/unbundled/definition48.js +22 -87
  432. package/unbundled/definition49.cjs +589 -48
  433. package/unbundled/definition49.js +587 -47
  434. package/unbundled/definition50.cjs +90 -21
  435. package/unbundled/definition50.js +88 -16
  436. package/unbundled/definition51.cjs +47 -32
  437. package/unbundled/definition51.js +44 -29
  438. package/unbundled/definition52.cjs +22 -323
  439. package/unbundled/definition52.js +16 -320
  440. package/unbundled/definition53.cjs +33 -212
  441. package/unbundled/definition53.js +29 -208
  442. package/unbundled/definition54.cjs +318 -41
  443. package/unbundled/definition54.js +314 -37
  444. package/unbundled/definition55.cjs +199 -253
  445. package/unbundled/definition55.js +193 -247
  446. package/unbundled/definition56.cjs +45 -53
  447. package/unbundled/definition56.js +42 -49
  448. package/unbundled/definition57.cjs +255 -133
  449. package/unbundled/definition57.js +253 -128
  450. package/unbundled/definition58.cjs +49 -245
  451. package/unbundled/definition58.js +47 -244
  452. package/unbundled/definition59.cjs +127 -444
  453. package/unbundled/definition59.js +124 -444
  454. package/unbundled/definition6.cjs +2 -1
  455. package/unbundled/definition6.js +2 -1
  456. package/unbundled/definition60.cjs +230 -3746
  457. package/unbundled/definition60.js +223 -3576
  458. package/unbundled/definition61.cjs +427 -739
  459. package/unbundled/definition61.js +425 -737
  460. package/unbundled/definition62.cjs +3762 -103
  461. package/unbundled/definition62.js +3593 -97
  462. package/unbundled/definition63.cjs +678 -886
  463. package/unbundled/definition63.js +672 -877
  464. package/unbundled/definition64.cjs +104 -108
  465. package/unbundled/definition64.js +100 -104
  466. package/unbundled/definition65.cjs +999 -65
  467. package/unbundled/definition65.js +995 -58
  468. package/unbundled/definition66.cjs +105 -155
  469. package/unbundled/definition66.js +101 -151
  470. package/unbundled/definition67.cjs +71 -121
  471. package/unbundled/definition67.js +63 -119
  472. package/unbundled/definition68.cjs +162 -51
  473. package/unbundled/definition68.js +158 -47
  474. package/unbundled/definition69.cjs +117 -75
  475. package/unbundled/definition69.js +116 -71
  476. package/unbundled/definition70.cjs +59 -21
  477. package/unbundled/definition70.js +56 -15
  478. package/unbundled/definition71.cjs +80 -75
  479. package/unbundled/definition71.js +76 -74
  480. package/unbundled/definition72.cjs +20 -305
  481. package/unbundled/definition72.js +14 -230
  482. package/unbundled/definition73.cjs +75 -315
  483. package/unbundled/definition73.js +74 -307
  484. package/unbundled/definition74.cjs +308 -30
  485. package/unbundled/definition74.js +231 -24
  486. package/unbundled/definition75.cjs +314 -109
  487. package/unbundled/definition75.js +304 -106
  488. package/unbundled/definition76.cjs +26 -250
  489. package/unbundled/definition76.js +21 -246
  490. package/unbundled/definition77.cjs +133 -27
  491. package/unbundled/definition77.js +124 -25
  492. package/unbundled/definition78.cjs +230 -116
  493. package/unbundled/definition78.js +227 -107
  494. package/unbundled/definition79.cjs +28 -203
  495. package/unbundled/definition79.js +26 -193
  496. package/unbundled/definition80.cjs +126 -477
  497. package/unbundled/definition80.js +118 -473
  498. package/unbundled/definition81.cjs +221 -0
  499. package/unbundled/definition81.js +202 -0
  500. package/unbundled/definition82.cjs +517 -0
  501. package/unbundled/definition82.js +497 -0
  502. package/unbundled/extractOptions.cjs +21 -0
  503. package/unbundled/extractOptions.js +16 -0
  504. package/unbundled/icon.cjs +67 -0
  505. package/unbundled/icon.js +61 -0
  506. package/unbundled/linkable.cjs +1 -1
  507. package/unbundled/linkable.js +1 -1
  508. package/unbundled/listbox.cjs +29 -7
  509. package/unbundled/listbox.js +29 -7
  510. package/unbundled/mixins.cjs +2 -1
  511. package/unbundled/mixins.js +2 -1
  512. package/unbundled/optgroup.cjs +66 -0
  513. package/unbundled/optgroup.js +54 -0
  514. package/unbundled/option.cjs +176 -0
  515. package/unbundled/option.js +164 -0
  516. package/unbundled/time-selection-picker.template.cjs +1 -1
  517. package/unbundled/time-selection-picker.template.js +1 -1
  518. package/unbundled/vivid-element.cjs +10 -1
  519. package/unbundled/vivid-element.js +10 -1
  520. package/video-player/definition.cjs +1 -1
  521. package/video-player/definition.js +1 -1
  522. package/vivid.api.json +568 -231
@@ -0,0 +1,81 @@
1
+ import { A as e, d as t, h as n, m as r, n as i, p as a, t as o, u as s } from "./vivid-element.js";
2
+ import { t as c } from "./slotted.js";
3
+ import { t as l } from "./ref.js";
4
+ import { t as u } from "./when.js";
5
+ import { t as d } from "./decorate.js";
6
+ import { t as f } from "./class-names.js";
7
+ import { t as p } from "./definition3.js";
8
+ import { a as m, i as h, n as g } from "./affix.js";
9
+ //#region src/lib/accordion-item/accordion-item.scss?inline
10
+ var _ = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}", v = class extends g(o) {
11
+ constructor(...e) {
12
+ super(...e), this.headinglevel = 2, this.expanded = !1, this.noIndicator = !1, this.clickHandler = () => {
13
+ this.expanded = !this.expanded, this.change();
14
+ }, this.change = () => {
15
+ this.$emit("change");
16
+ };
17
+ }
18
+ };
19
+ d([r({
20
+ attribute: "heading-level",
21
+ mode: "fromView",
22
+ converter: n
23
+ })], v.prototype, "headinglevel", void 0), d([r], v.prototype, "appearance", void 0), d([r({ mode: "boolean" })], v.prototype, "expanded", void 0), d([r], v.prototype, "id", void 0), d([r], v.prototype, "heading", void 0), d([r({ attribute: "secondary-text" })], v.prototype, "secondaryText", void 0), d([i({
24
+ deprecatedPropertyName: "secondaryText",
25
+ fromDeprecated: (e) => e,
26
+ toDeprecated: (e) => e
27
+ }), r({ attribute: "text-secondary" })], v.prototype, "textSecondary", void 0), d([e], v.prototype, "_headingSlottedContent", void 0), d([r({
28
+ mode: "boolean",
29
+ attribute: "no-indicator"
30
+ })], v.prototype, "noIndicator", void 0), d([r], v.prototype, "meta", void 0), d([e], v.prototype, "_metaSlottedContent", void 0), d([r], v.prototype, "size", void 0);
31
+ //#endregion
32
+ //#region src/lib/accordion-item/accordion-item.template.ts
33
+ var y = (e, t) => {
34
+ let n = m(e), r = a.partial(t);
35
+ return a`
36
+ <${r} class="heading-container">
37
+ <button
38
+ class="${(e) => f("heading-button", [`appearance-${e.appearance}`, !!e.appearance], [`size-${e.size}`, !!e.size])}"
39
+ id="${(e) => e.id}"
40
+ aria-expanded="${(e) => e.expanded}"
41
+ aria-controls="${(e) => e.id}-panel"
42
+ @click="${(e) => e.clickHandler()}"
43
+ ${l("expandbutton")}
44
+ >
45
+
46
+ ${(e) => e.iconTrailing ? null : n(e.icon, h.Slot)}
47
+
48
+ <span class="heading-content">
49
+ <span class="heading-primary">
50
+ <slot name="heading" ${c("_headingSlottedContent")}></slot>
51
+ ${u((e) => e.heading && !e._headingSlottedContent?.length, a`${(e) => e.heading}`)}
52
+ </span>
53
+ ${u((e) => !!e.textSecondary, a`<span class="heading-secondary"
54
+ >${(e) => e.textSecondary}</span
55
+ >`)}
56
+ </span>
57
+
58
+ <span class="meta">
59
+ <slot name="meta" ${c("_metaSlottedContent")}></slot>
60
+ ${u((e) => e.meta && !e._metaSlottedContent?.length, a`${(e) => e.meta}`)}
61
+ </span>
62
+
63
+ ${(e) => e.icon && e.iconTrailing ? n(e.icon) : null}
64
+ ${(e) => !(e.icon && e.iconTrailing) && !e.noIndicator ? n(e.expanded ? "chevron-up-line" : "chevron-down-line") : null}
65
+
66
+ </button>
67
+ </${r}>
68
+ `;
69
+ }, b = s("accordion-item", v, (e) => a`
70
+ ${(t) => y(e, `h${t.headinglevel}`)}
71
+ <div
72
+ id="${(e) => e.id}-panel"
73
+ aria-labelledby="${(e) => e.id}"
74
+ role="region"
75
+ class="region ${(e) => e.icon && !e.iconTrailing ? "padded" : ""} ${(e) => e.size ? `size-${e.size}` : ""}"
76
+ >
77
+ <slot></slot>
78
+ </div>
79
+ `, [p], { styles: _ }), x = t(b);
80
+ //#endregion
81
+ export { x as n, v as r, b as t };
@@ -1,8 +1,8 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./numberConverter.cjs`);var a=`:host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}`,o=500,s=2e3,c=class extends e.t{constructor(...e){super(...e),this.iconLoaded=!1,this.#e=0,this.#t=null}#e;#t;async nameChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController,this._svg=void 0,this.iconLoaded=!1;let t=setTimeout(()=>{this.#e===e&&(this._svg=i.r,t=setTimeout(()=>{this.#e===e&&this._svg===i.r&&(this._svg=void 0)},s))},o);try{let t=await i.n(this.name,this.#t.signal);this.#e===e&&(this._svg=t)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(t),this.iconLoaded=!0)}}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({converter:i.t})],c.prototype,`size`,void 0),n.t([e.A],c.prototype,`_svg`,void 0),n.t([e.A],c.prototype,`iconLoaded`,void 0),n.t([e.m],c.prototype,`label`,void 0),n.t([e.m],c.prototype,`name`,void 0);var l=e.u(`icon`,c,()=>{let n=e=>!e.label||e.label.trim().length===0;return e.p`
1
+ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./class-names.cjs`),r=require(`./icon.cjs`);var i=e.u(`icon`,r.t,()=>{let r=e=>!e.label||e.label.trim().length===0;return e.p`
2
2
  <span
3
- class="${e=>r.t(`control`,[`connotation-${e.connotation}`,!!e.connotation],[`size-${e.size}`,typeof e.size==`number`])}"
4
- role="${e=>n(e)?null:`img`}"
5
- ?aria-hidden="${e=>n(e)}"
3
+ class="${e=>n.t(`control`,[`connotation-${e.connotation}`,!!e.connotation],[`size-${e.size}`,typeof e.size==`number`])}"
4
+ role="${e=>r(e)?null:`img`}"
5
+ ?aria-hidden="${e=>r(e)}"
6
6
  aria-label="${e=>e.label||null}"
7
7
  ?aria-busy="${e=>!e?.iconLoaded}"
8
8
  >
@@ -10,4 +10,4 @@ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./deco
10
10
  ${t.t(e=>e?.iconLoaded&&e?._svg,t=>e.p`${e.p.partial(t._svg)}`)}
11
11
  </slot>
12
12
  </span>
13
- `},[],{styles:a}),u=e.d(l);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});
13
+ `},[],{styles:`:host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}`}),a=e.d(i);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
@@ -1,54 +1,24 @@
1
- import { A as e, d as t, m as n, p as r, t as i, u as a } from "./vivid-element.js";
2
- import { t as o } from "./when.js";
3
- import { t as s } from "./decorate.js";
4
- import { t as c } from "./class-names.js";
5
- import { n as l, r as u, t as d } from "./numberConverter.js";
6
- //#region src/lib/icon/icon.scss?inline
7
- var f = ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}", p = 500, m = 2e3, h = class extends i {
8
- constructor(...e) {
9
- super(...e), this.iconLoaded = !1, this.#e = 0, this.#t = null;
10
- }
11
- #e;
12
- #t;
13
- async nameChanged() {
14
- let e = ++this.#e;
15
- this.#t && this.#t.abort(), this.#t = new AbortController(), this._svg = void 0, this.iconLoaded = !1;
16
- let t = setTimeout(() => {
17
- /* v8 ignore else -- @preserve */
18
- this.#e === e && (this._svg = u, t = setTimeout(() => {
19
- /* v8 ignore else -- @preserve */
20
- this.#e === e && this._svg === u && (this._svg = void 0);
21
- }, m));
22
- }, p);
23
- try {
24
- let t = await l(this.name, this.#t.signal);
25
- /* v8 ignore else -- @preserve */
26
- this.#e === e && (this._svg = t);
27
- } catch {
28
- this.#e === e && (this._svg = void 0);
29
- } finally {
30
- this.#e === e && (clearTimeout(t), this.iconLoaded = !0);
31
- }
32
- }
33
- };
34
- s([n], h.prototype, "connotation", void 0), s([n({ converter: d })], h.prototype, "size", void 0), s([e], h.prototype, "_svg", void 0), s([e], h.prototype, "iconLoaded", void 0), s([n], h.prototype, "label", void 0), s([n], h.prototype, "name", void 0);
1
+ import { d as e, p as t, u as n } from "./vivid-element.js";
2
+ import { t as r } from "./when.js";
3
+ import { t as i } from "./class-names.js";
4
+ import { t as a } from "./icon.js";
35
5
  //#endregion
36
6
  //#region src/lib/icon/definition.ts
37
- var g = a("icon", h, () => {
7
+ var o = n("icon", a, () => {
38
8
  let e = (e) => !e.label || e.label.trim().length === 0;
39
- return r`
9
+ return t`
40
10
  <span
41
- class="${(e) => c("control", [`connotation-${e.connotation}`, !!e.connotation], [`size-${e.size}`, typeof e.size == "number"])}"
11
+ class="${(e) => i("control", [`connotation-${e.connotation}`, !!e.connotation], [`size-${e.size}`, typeof e.size == "number"])}"
42
12
  role="${(t) => e(t) ? null : "img"}"
43
13
  ?aria-hidden="${(t) => e(t)}"
44
14
  aria-label="${(e) => e.label || null}"
45
15
  ?aria-busy="${(e) => !e?.iconLoaded}"
46
16
  >
47
17
  <slot aria-hidden="true">
48
- ${o((e) => e?.iconLoaded && e?._svg, (e) => r`${r.partial(e._svg)}`)}
18
+ ${r((e) => e?.iconLoaded && e?._svg, (e) => t`${t.partial(e._svg)}`)}
49
19
  </slot>
50
20
  </span>
51
21
  `;
52
- }, [], { styles: f }), _ = t(g);
22
+ }, [], { styles: ":host{vertical-align:sub;display:inline-block}.control.connotation-accent{--_connotation-color-primary:var(--vvd-icon-accent-primary,var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-icon-announcement-primary,var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-icon-cta-primary,var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary:var(--vvd-icon-success-primary,var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-icon-warning-primary,var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-icon-alert-primary,var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary:var(--vvd-icon-information-primary,var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}" }), s = e(o);
53
23
  //#endregion
54
- export { _ as n, h as r, g as t };
24
+ export { s as n, o as t };
@@ -1,14 +1,14 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./children.cjs`),r=require(`./ref.cjs`),i=require(`./when.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./dom.cjs`),c=require(`./definition3.cjs`),l=require(`./affix.cjs`),u=require(`./host-semantics.cjs`);var d=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-tree-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tree-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-tree-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-faint:var(--vvd-tree-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-tree-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-tree-item-accent-firm,var(--vvd-color-canvas-text));box-sizing:border-box;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);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color:transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{border-radius:8px;align-items:center;font-size:20px;display:flex}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover:hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}`;function f(e){return s.t(e)&&(e.getAttribute(`role`)===`treeitem`||e instanceof p)}var p=class extends u.t(l.t(e.t)){constructor(...e){super(...e),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>f(this.parentElement),this.handleExpandCollapseButtonClick=e=>{!this.disabled&&!e.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=e=>{this.setAttribute(`tabindex`,`0`)},this.handleBlur=e=>{this.setAttribute(`tabindex`,`-1`)}}expandedChanged(){this.$fastController.isConnected&&this.$emit(`expanded-change`,this)}selectedChanged(){this.$fastController.isConnected&&this.$emit(`selected-change`,this)}itemsChanged(){this.$fastController.isConnected&&this.items.forEach(e=>{f(e)&&(e.nested=!0)})}static focusItem(e){e.focusable=!0,e.focus()}childItemLength(){return this.childItems.filter(e=>f(e)).length}};a.t([e.m],p.prototype,`text`,void 0),a.t([e.m({mode:`boolean`})],p.prototype,`expanded`,void 0),a.t([e.m({mode:`boolean`})],p.prototype,`selected`,void 0),a.t([e.m({mode:`boolean`})],p.prototype,`disabled`,void 0),a.t([e.A],p.prototype,`focusable`,void 0),a.t([e.A],p.prototype,`childItems`,void 0),a.t([e.A],p.prototype,`items`,void 0),a.t([e.A],p.prototype,`nested`,void 0),a.t([e.A],p.prototype,`renderCollapsedChildren`,void 0);var m=t=>{let n=t.tagFor(c.r);return e.p`
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./children.cjs`),r=require(`./ref.cjs`),i=require(`./when.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./dom.cjs`),c=require(`./definition3.cjs`),l=require(`./icon.cjs`),u=require(`./affix.cjs`),d=require(`./host-semantics.cjs`);var f=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-tree-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tree-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-tree-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-faint:var(--vvd-tree-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-tree-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-tree-item-accent-firm,var(--vvd-color-canvas-text));box-sizing:border-box;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);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color:transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{border-radius:8px;align-items:center;font-size:20px;display:flex}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover:hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}`;function p(e){return s.t(e)&&(e.getAttribute(`role`)===`treeitem`||e instanceof m)}var m=class extends d.t(u.t(e.t)){constructor(...e){super(...e),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>p(this.parentElement),this.handleExpandCollapseButtonClick=e=>{!this.disabled&&!e.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=e=>{this.setAttribute(`tabindex`,`0`)},this.handleBlur=e=>{this.setAttribute(`tabindex`,`-1`)}}expandedChanged(){this.$fastController.isConnected&&this.$emit(`expanded-change`,this)}selectedChanged(){this.$fastController.isConnected&&this.$emit(`selected-change`,this)}itemsChanged(){this.$fastController.isConnected&&this.items.forEach(e=>{p(e)&&(e.nested=!0)})}static focusItem(e){e.focusable=!0,e.focus()}childItemLength(){return this.childItems.filter(e=>p(e)).length}};a.t([e.m],m.prototype,`text`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`expanded`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`selected`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`disabled`,void 0),a.t([e.A],m.prototype,`focusable`,void 0),a.t([e.A],m.prototype,`childItems`,void 0),a.t([e.A],m.prototype,`items`,void 0),a.t([e.A],m.prototype,`nested`,void 0),a.t([e.A],m.prototype,`renderCollapsedChildren`,void 0);var h=t=>{let n=t.tagFor(l.t);return e.p`
2
2
  <div aria-hidden="true"
3
3
  class="expandCollapseButton"
4
4
  @click="${(e,t)=>e.handleExpandCollapseButtonClick(t.event)}"
5
5
  ${r.t(`expandCollapseButton`)}
6
6
  >
7
7
  <${n} class="expandCollapseIcon" name="${e=>e.expanded?`chevron-down-line`:`chevron-right-line`}"></${n}>
8
- </div>`},h=e.u(`tree-item`,p,r=>{let a=l.a(r),s=r.tagFor(p,!0);return e.p` <template
8
+ </div>`},g=e.u(`tree-item`,m,r=>{let a=u.a(r),s=r.tagFor(m,!0);return e.p` <template
9
9
  slot="${e=>e.isNestedItem()?`item`:void 0}"
10
10
  tabindex="-1"
11
- ${u.n({role:`treeitem`,ariaExpanded:e=>e.childItems&&e.childItems.length>0?e.expanded:void 0,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
11
+ ${d.n({role:`treeitem`,ariaExpanded:e=>e.childItems&&e.childItems.length>0?e.expanded:void 0,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
12
12
  @focusin="${(e,t)=>e.handleFocus(t.event)}"
13
13
  @focusout="${(e,t)=>e.handleBlur(t.event)}"
14
14
  ${n.t({property:`childItems`,filter:t.r(s)})}
@@ -16,11 +16,11 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./c
16
16
  <div
17
17
  class="${e=>o.t(`control`,[`disabled`,e.disabled],[`selected`,e.selected])}"
18
18
  >
19
- ${i.t(e=>e.childItems&&e.childItems.length>0,m(r))}
20
- ${e=>a(e.icon,l.i.Slot)}
19
+ ${i.t(e=>e.childItems&&e.childItems.length>0,h(r))}
20
+ ${e=>a(e.icon,u.i.Slot)}
21
21
  ${e=>e.text}
22
22
  </div>
23
23
  ${i.t(e=>e.childItems&&e.childItems.length>0&&e.expanded,e.p` <div role="group" class="items">
24
24
  <slot name="item" ${t.t(`items`)}></slot>
25
25
  </div>`)}
26
- </template>`},[c.t],{styles:d}),g=e.d(h);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});
26
+ </template>`},[c.t],{styles:f}),_=e.d(g);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
@@ -6,7 +6,8 @@ import { t as u } from "./when.js";
6
6
  import { t as d } from "./decorate.js";
7
7
  import { t as f } from "./class-names.js";
8
8
  import { t as p } from "./dom.js";
9
- import { r as m, t as h } from "./definition3.js";
9
+ import { t as m } from "./definition3.js";
10
+ import { t as h } from "./icon.js";
10
11
  import { a as g, i as _, t as v } from "./affix.js";
11
12
  import { n as y, t as b } from "./host-semantics.js";
12
13
  //#region src/lib/tree-item/tree-item.scss?inline
@@ -49,7 +50,7 @@ d([n], C.prototype, "text", void 0), d([n({ mode: "boolean" })], C.prototype, "e
49
50
  //#endregion
50
51
  //#region src/lib/tree-item/tree-item.template.ts
51
52
  var w = (e) => {
52
- let t = e.tagFor(m);
53
+ let t = e.tagFor(h);
53
54
  return r`
54
55
  <div aria-hidden="true"
55
56
  class="expandCollapseButton"
@@ -87,6 +88,6 @@ var w = (e) => {
87
88
  <slot name="item" ${s("items")}></slot>
88
89
  </div>`)}
89
90
  </template>`;
90
- }, [h], { styles: x }), E = t(T);
91
+ }, [m], { styles: x }), E = t(T);
91
92
  //#endregion
92
93
  export { S as i, T as n, C as r, E as t };
@@ -1,12 +1,12 @@
1
- const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./enums.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./affix.cjs`),l=require(`./definition5.cjs`),u=require(`./delegates-aria.cjs`),d=require(`./button.cjs`),f=require(`./linkable.cjs`);var p=class extends c.n(e.t(f.t(d.t))){constructor(){super(),this.stacked=!1,this.pending=!1,this.dropdownIndicator=!1,this.active=!1,this.pressed=!1,this.title=``}clickHandler(e){if(this.disabled||this.pending){e.preventDefault(),e.stopImmediatePropagation();return}return!0}};a.t([t.m({converter:{fromView:e=>e||null,toView:e=>e||null}})],p.prototype,`title`,void 0),a.t([t.m],p.prototype,`connotation`,void 0),a.t([t.m],p.prototype,`shape`,void 0),a.t([t.m],p.prototype,`appearance`,void 0),a.t([t.m],p.prototype,`size`,void 0),a.t([t.m({mode:`boolean`,attribute:`stacked`})],p.prototype,`stacked`,void 0),a.t([t.m({mode:`boolean`,attribute:`pending`})],p.prototype,`pending`,void 0),a.t([t.m({mode:`boolean`,attribute:`dropdown-indicator`})],p.prototype,`dropdownIndicator`,void 0),a.t([t.m({mode:`boolean`,attribute:`active`})],p.prototype,`active`,void 0),a.t([t.m({mode:`boolean`,attribute:`pressed`})],p.prototype,`pressed`,void 0),a.t([t.m],p.prototype,`label`,void 0);var m=`.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)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-dim:var(--vvd-button-cta-dim,var(--vvd-color-cta-200));--_connotation-color-pale:var(--vvd-button-cta-pale,var(--vvd-color-cta-300))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-dim:var(--vvd-button-success-dim,var(--vvd-color-success-200));--_connotation-color-pale:var(--vvd-button-success-pale,var(--vvd-color-success-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-dim:var(--vvd-button-alert-dim,var(--vvd-color-alert-200));--_connotation-color-pale:var(--vvd-button-alert-pale,var(--vvd-color-alert-300))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-dim:var(--vvd-button-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-pale:var(--vvd-button-announcement-pale,var(--vvd-color-announcement-300))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-dim:var(--vvd-button-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-button-accent-pale,var(--vvd-color-neutral-300))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-subtle,.control:disabled.appearance-subtle-light,.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-subtle,.control.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}`,h=e=>{let n=e.tagFor(s.r);return t.p`<${n} class="chevron" aria-hidden="true" name="chevron-down-line"></${n}>`};function g(e,t){let n=e??`ghost`;if(t){if(n===`ghost`)return`subtle`;if(n===`ghost-light`)return`subtle-light`;if(n===`outlined`)return`filled`}return n}var _=e=>o.t(`control`,[`connotation-${e.connotation}`,!!e.connotation],`appearance-${g(e.appearance,e.pressed)}`,[`disabled`,e.disabled||e.pending],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size],[`icon-only`,!e.label&&!!(e.icon||e.iconSlottedContent?.length)&&!e.dropdownIndicator],[`icon-trailing`,e.iconTrailing],[`stacked`,e.stacked],[`active`,e.ariaExpanded===`true`||e.active]);function v(e,n,r,a=i.a.Normal){if(r&&a!=i.a.SuperCondensed){let r=e.tagFor(l.r),s={[i.a.Condensed]:`-6`,[i.a.Normal]:`-5`,[i.a.Expanded]:`-4`};return t.p`<span class="${e=>{let t=e.querySelector(`[slot="icon"]`);return o.t(`icon`,`pending`,[`pending-no-icon`,!(n||t)])}}" aria-hidden="true"><${r} size="${s[a]}"></${r}></span>`}else return c.a(e)(n,c.i.Slot)}var y=e=>[`submit`,`button`,`reset`].indexOf(e)>-1?e:`submit`,b=e=>{let n=h(e);return t.p`<span class="content">
2
- ${t=>v(e,t.icon,t.pending,t.size)}
1
+ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./enums.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./icon.cjs`),l=require(`./affix.cjs`),u=require(`./definition5.cjs`),d=require(`./delegates-aria.cjs`),f=require(`./button.cjs`),p=require(`./linkable.cjs`);var m=class extends l.n(e.t(p.t(f.t))){constructor(){super(),this.stacked=!1,this.pending=!1,this.dropdownIndicator=!1,this.active=!1,this.pressed=!1,this.title=``}clickHandler(e){if(this.disabled||this.pending){e.preventDefault(),e.stopImmediatePropagation();return}return!0}};a.t([t.m({converter:{fromView:e=>e||null,toView:e=>e||null}})],m.prototype,`title`,void 0),a.t([t.m],m.prototype,`connotation`,void 0),a.t([t.m],m.prototype,`shape`,void 0),a.t([t.m],m.prototype,`appearance`,void 0),a.t([t.m],m.prototype,`size`,void 0),a.t([t.m({mode:`boolean`,attribute:`stacked`})],m.prototype,`stacked`,void 0),a.t([t.m({mode:`boolean`,attribute:`pending`})],m.prototype,`pending`,void 0),a.t([t.m({mode:`boolean`,attribute:`dropdown-indicator`})],m.prototype,`dropdownIndicator`,void 0),a.t([t.m({mode:`boolean`,attribute:`active`})],m.prototype,`active`,void 0),a.t([t.m({mode:`boolean`,attribute:`pressed`})],m.prototype,`pressed`,void 0),a.t([t.m],m.prototype,`label`,void 0);var h=`.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)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-dim:var(--vvd-button-cta-dim,var(--vvd-color-cta-200));--_connotation-color-pale:var(--vvd-button-cta-pale,var(--vvd-color-cta-300))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-dim:var(--vvd-button-success-dim,var(--vvd-color-success-200));--_connotation-color-pale:var(--vvd-button-success-pale,var(--vvd-color-success-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-dim:var(--vvd-button-alert-dim,var(--vvd-color-alert-200));--_connotation-color-pale:var(--vvd-button-alert-pale,var(--vvd-color-alert-300))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-dim:var(--vvd-button-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-pale:var(--vvd-button-announcement-pale,var(--vvd-color-announcement-300))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-dim:var(--vvd-button-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-button-accent-pale,var(--vvd-color-neutral-300))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-subtle,.control:disabled.appearance-subtle-light,.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-subtle,.control.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}`,g=e=>{let n=e.tagFor(c.t);return t.p`<${n} class="chevron" aria-hidden="true" name="chevron-down-line"></${n}>`};function _(e,t){let n=e??`ghost`;if(t){if(n===`ghost`)return`subtle`;if(n===`ghost-light`)return`subtle-light`;if(n===`outlined`)return`filled`}return n}var v=e=>o.t(`control`,[`connotation-${e.connotation}`,!!e.connotation],`appearance-${_(e.appearance,e.pressed)}`,[`disabled`,e.disabled||e.pending],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size],[`icon-only`,!e.label&&!!(e.icon||e.iconSlottedContent?.length)&&!e.dropdownIndicator],[`icon-trailing`,e.iconTrailing],[`stacked`,e.stacked],[`active`,e.ariaExpanded===`true`||e.active]);function y(e,n,r,a=i.a.Normal){if(r&&a!=i.a.SuperCondensed){let r=e.tagFor(u.r),s={[i.a.Condensed]:`-6`,[i.a.Normal]:`-5`,[i.a.Expanded]:`-4`};return t.p`<span class="${e=>{let t=e.querySelector(`[slot="icon"]`);return o.t(`icon`,`pending`,[`pending-no-icon`,!(n||t)])}}" aria-hidden="true"><${r} size="${s[a]}"></${r}></span>`}else return l.a(e)(n,l.i.Slot)}var b=e=>[`submit`,`button`,`reset`].indexOf(e)>-1?e:`submit`,x=e=>{let n=g(e);return t.p`<span class="content">
2
+ ${t=>y(e,t.icon,t.pending,t.size)}
3
3
  ${r.t(e=>e.label,t.p`<span class="text" aria-hidden="true">${e=>e.label}</span>`)}
4
4
  <span class="sr-only"
5
5
  >${e=>e.pending?e.locale.button.pendingLabel:e.ariaLabel??e.label}</span
6
6
  >
7
7
  </span>
8
- ${r.t(e=>e.dropdownIndicator,n)}`};function x(e){return t.p` <button
9
- class="${_}"
8
+ ${r.t(e=>e.dropdownIndicator,n)}`};function S(e){return t.p` <button
9
+ class="${v}"
10
10
  ?autofocus="${e=>e.autofocus}"
11
11
  form="${e=>e.formId}"
12
12
  formaction="${e=>e.formaction}"
@@ -15,15 +15,15 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
15
15
  formnovalidate="${e=>e.formnovalidate}"
16
16
  formtarget="${e=>e.formtarget}"
17
17
  name="${e=>e.name}"
18
- type="${e=>y(e.type)}"
18
+ type="${e=>b(e.type)}"
19
19
  value="${e=>e.value}"
20
20
  title="${e=>e.title}"
21
- ${u.n({ariaLabel:null,ariaDisabled:e=>e.disabled||e.pending,ariaPressed:e=>e.pressed?`true`:e.ariaPressed??null})}
21
+ ${d.n({ariaLabel:null,ariaDisabled:e=>e.disabled||e.pending,ariaPressed:e=>e.pressed?`true`:e.ariaPressed??null})}
22
22
  ${n.t(`control`)}
23
23
  @click="${(e,t)=>e.clickHandler(t.event)}"
24
24
  >
25
- ${b(e)}
26
- </button>`}function S(e){return t.p`${t=>t._renderLinkElement(b(e),_,{ariaLabel:null})}`}var C=t.u(`button`,p,e=>t.p` <template>
27
- ${r.t(e=>!e.href,t.p`${x(e)}`)}
28
- ${r.t(e=>e.href,S(e))}
29
- </template>`,[s.t,l.t],{styles:m,shadowOptions:{delegatesFocus:!0}}),w=t.d(C);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return C}});
25
+ ${x(e)}
26
+ </button>`}function C(e){return t.p`${t=>t._renderLinkElement(x(e),v,{ariaLabel:null})}`}var w=t.u(`button`,m,e=>t.p` <template>
27
+ ${r.t(e=>!e.href,t.p`${S(e)}`)}
28
+ ${r.t(e=>e.href,C(e))}
29
+ </template>`,[s.t,u.t],{styles:h,shadowOptions:{delegatesFocus:!0}}),T=t.d(w);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return w}});
@@ -5,7 +5,8 @@ import { t as o } from "./when.js";
5
5
  import { a as s } from "./enums.js";
6
6
  import { t as c } from "./decorate.js";
7
7
  import { t as l } from "./class-names.js";
8
- import { r as u, t as d } from "./definition3.js";
8
+ import { t as u } from "./definition3.js";
9
+ import { t as d } from "./icon.js";
9
10
  import { a as f, i as p, n as m } from "./affix.js";
10
11
  import { r as h, t as g } from "./definition5.js";
11
12
  import { n as _ } from "./delegates-aria.js";
@@ -47,7 +48,7 @@ c([n({ converter: {
47
48
  //#endregion
48
49
  //#region src/lib/button/button.scss?inline
49
50
  var x = ".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)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-dim:var(--vvd-button-cta-dim,var(--vvd-color-cta-200));--_connotation-color-pale:var(--vvd-button-cta-pale,var(--vvd-color-cta-300))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-dim:var(--vvd-button-success-dim,var(--vvd-color-success-200));--_connotation-color-pale:var(--vvd-button-success-pale,var(--vvd-color-success-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-dim:var(--vvd-button-alert-dim,var(--vvd-color-alert-200));--_connotation-color-pale:var(--vvd-button-alert-pale,var(--vvd-color-alert-300))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-dim:var(--vvd-button-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-pale:var(--vvd-button-announcement-pale,var(--vvd-color-announcement-300))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-dim:var(--vvd-button-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-button-accent-pale,var(--vvd-color-neutral-300))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-subtle,.control:disabled.appearance-subtle-light,.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-subtle,.control.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}", S = (e) => {
50
- let t = e.tagFor(u);
51
+ let t = e.tagFor(d);
51
52
  return r`<${t} class="chevron" aria-hidden="true" name="chevron-down-line"></${t}>`;
52
53
  };
53
54
  //#endregion
@@ -123,7 +124,7 @@ function k(e) {
123
124
  var A = i("button", b, (e) => r` <template>
124
125
  ${o((e) => !e.href, r`${O(e)}`)}
125
126
  ${o((e) => e.href, k(e))}
126
- </template>`, [d, g], {
127
+ </template>`, [u, g], {
127
128
  styles: x,
128
129
  shadowOptions: { delegatesFocus: !0 }
129
130
  }), j = t(A);
@@ -1,16 +1,22 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./definition8.cjs`),a=require(`./anchored.cjs`),o=require(`./kbd-shortcut.cjs`),s=require(`./render-in-light-dom.cjs`),c=require(`./dialog.cjs`);var l=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}`,u=class extends o.t(a.t(e.t)){constructor(...e){super(...e),this.open=!1,this._descriptionId=`vwc-tooltip-desc-${s.n()}`,this.#n=()=>{this.open=!0},this.#r=()=>{this.open=!1},this.#a=e=>{e.key===`Escape`&&this.#r()}}_kbdAriaShortcutsValueChanged(){this._anchorEl&&e.P.setAttribute(this._anchorEl,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,t){e&&this.#t(e),t&&this.#e(t)}#e(t){t.addEventListener(`mouseover`,this.#n),t.addEventListener(`mouseout`,this.#r),t.addEventListener(`focusin`,this.#n),t.addEventListener(`focusout`,this.#r);let n=t.getAttribute(`aria-describedby`)??t.ariaDescribedBy;t.setAttribute(`aria-describedby`,n?`${n} ${this._descriptionId}`:this._descriptionId),e.P.setAttribute(t,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}#t(t){t.removeEventListener(`mouseover`,this.#n),t.removeEventListener(`mouseout`,this.#r),t.removeEventListener(`focusin`,this.#n),t.removeEventListener(`focusout`,this.#r);let n=(t.getAttribute(`aria-describedby`)??t.ariaDescribedBy??``).split(` `).filter(e=>e!==this._descriptionId),r=n.length?n.join(` `):null;t.hasAttribute(`aria-describedby`)?e.P.setAttribute(t,`aria-describedby`,r):t.ariaDescribedBy=r,t.removeAttribute(`aria-keyshortcuts`)}#n;#r;#i(){document.removeEventListener(`keydown`,this.#a),this.open&&this.isConnected&&document.addEventListener(`keydown`,this.#a)}#a;openChanged(e){e!==void 0&&this.#i()}};n.t([e.m],u.prototype,`text`,void 0),n.t([e.m({mode:`fromView`})],u.prototype,`placement`,void 0),n.t([e.m({mode:`boolean`})],u.prototype,`open`,void 0);var d=e.u(`tooltip`,u,n=>{let o=n.tagFor(i.i);return e.p`
2
- ${a.n()}
3
- ${s.t(e.p`<span slot="_description" id="${e=>e._descriptionId}">${e=>e.text}</span>`)}
4
- <${o} class="${e=>r.t(`control`,[`open`,e.open])}" arrow alternate
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition8.cjs`),o=require(`./anchored.cjs`),s=require(`./kbd-shortcut.cjs`),c=require(`./render-in-light-dom.cjs`),l=require(`./dialog.cjs`);var u=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}`,d=class extends s.t(o.t(e.t)){constructor(...e){super(...e),this.open=!1,this._descriptionId=`vwc-tooltip-desc-${c.n()}`,this._descriptionSecondaryId=`vwc-tooltip-desc-secondary-${c.n()}`,this._defaultSlotContent=[],this.#i=()=>{this.open=!0},this.#a=()=>{this.open=!1},this.#s=e=>{e.key===`Escape`&&this.#a()}}_defaultSlotContentChanged(){for(let e of this._defaultSlotContent)e.id||=`vwc-tooltip-content-${c.n()}`;this._anchorEl&&this.#t(this._anchorEl)}_kbdAriaShortcutsValueChanged(){this._anchorEl&&e.P.setAttribute(this._anchorEl,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}connectedCallback(){super.connectedCallback(),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#n(t)}#e(){return[this._descriptionId,this._descriptionSecondaryId,...this._defaultSlotContent.map(e=>e.id).filter(Boolean)]}#t(e){let t=e.getAttribute(`aria-describedby`)??e.ariaDescribedBy??``,n=new Set(this.#e()),r=t.split(` `).filter(e=>e&&!n.has(e));e.setAttribute(`aria-describedby`,[...r,...this.#e()].join(` `))}#n(t){t.addEventListener(`mouseover`,this.#i),t.addEventListener(`mouseout`,this.#a),t.addEventListener(`focusin`,this.#i),t.addEventListener(`focusout`,this.#a),this.#t(t),e.P.setAttribute(t,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}#r(t){t.removeEventListener(`mouseover`,this.#i),t.removeEventListener(`mouseout`,this.#a),t.removeEventListener(`focusin`,this.#i),t.removeEventListener(`focusout`,this.#a);let n=t.getAttribute(`aria-describedby`)??t.ariaDescribedBy??``,r=new Set(this.#e()),i=n.split(` `).filter(e=>e&&!r.has(e)),a=i.length?i.join(` `):null;t.hasAttribute(`aria-describedby`)?e.P.setAttribute(t,`aria-describedby`,a):t.ariaDescribedBy=a,t.removeAttribute(`aria-keyshortcuts`)}#i;#a;#o(){document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&document.addEventListener(`keydown`,this.#s)}#s;openChanged(e){e!==void 0&&this.#o()}};r.t([e.m],d.prototype,`text`,void 0),r.t([e.m({attribute:`text-secondary`})],d.prototype,`textSecondary`,void 0),r.t([e.m({mode:`fromView`})],d.prototype,`placement`,void 0),r.t([e.m({mode:`boolean`})],d.prototype,`open`,void 0),r.t([e.A],d.prototype,`_defaultSlotContent`,void 0);var f=e.u(`tooltip`,d,r=>{let s=r.tagFor(a.i);return e.p`
2
+ ${o.n()}
3
+ ${c.t(e.p`<span slot="_description" id="${e=>e._descriptionId}">${e=>e.text}</span><span slot="_description-secondary" id="${e=>e._descriptionSecondaryId}">${e=>e.textSecondary}</span>`)}
4
+ <${s} class="${e=>i.t(`control`,[`open`,e.open])}" arrow alternate
5
5
  :placement=${e=>e.placement}
6
6
  :anchor="${e=>e._anchorEl}"
7
7
  :open="${e=>e.open}"
8
- @keydown="${(e,t)=>{e.open&&c.t(t.event)&&(e.open=!1)}}"
8
+ @keydown="${(e,t)=>{e.open&&l.t(t.event)&&(e.open=!1)}}"
9
9
  exportparts="vvd-theme-alternate">
10
10
  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
11
11
  <span class="text"><slot name="_description"></slot></span>
12
+ ${n.t(e=>e.textSecondary,e.p`<span class="text-secondary"
13
+ ><slot name="_description-secondary"></slot
14
+ ></span>`)}
15
+ <slot
16
+ ${t.t({property:`_defaultSlotContent`,filter:t.r()})}
17
+ ></slot>
12
18
  <slot name="kbd-shortcut"
13
19
  ${t.t({property:`_kbdShortcutSlotted`,filter:t.r()})}
14
20
  ></slot>
15
21
  </div>
16
- </${o}>`},[i.t],{styles:l}),f=e.d(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
22
+ </${s}>`},[a.t],{styles:u}),p=e.d(f);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});