@vonage/vivid 5.17.0 → 5.19.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 (648) hide show
  1. package/accordion/definition.cjs +5 -6
  2. package/accordion/definition.js +0 -1
  3. package/accordion/index.cjs +2 -2
  4. package/accordion/index.js +4 -5
  5. package/accordion-item/definition.cjs +4 -5
  6. package/accordion-item/definition.js +0 -1
  7. package/accordion-item/index.cjs +1 -1
  8. package/accordion-item/index.js +1 -3
  9. package/action-group/index.cjs +4 -4
  10. package/action-group/index.js +7 -7
  11. package/alert/definition.cjs +4 -5
  12. package/alert/definition.js +0 -1
  13. package/alert/index.cjs +5 -5
  14. package/alert/index.js +23 -23
  15. package/audio-player/definition.cjs +4 -5
  16. package/audio-player/definition.js +0 -1
  17. package/audio-player/index.cjs +13 -13
  18. package/audio-player/index.js +76 -76
  19. package/avatar/definition.cjs +4 -5
  20. package/avatar/definition.js +0 -1
  21. package/avatar/index.cjs +8 -8
  22. package/avatar/index.js +23 -23
  23. package/badge/definition.cjs +4 -5
  24. package/badge/definition.js +0 -1
  25. package/badge/index.cjs +1 -4
  26. package/badge/index.js +2 -20
  27. package/banner/definition.cjs +4 -5
  28. package/banner/definition.js +0 -1
  29. package/banner/index.cjs +4 -4
  30. package/banner/index.js +20 -20
  31. package/breadcrumb/index.cjs +2 -2
  32. package/breadcrumb/index.js +3 -3
  33. package/breadcrumb-item/definition.cjs +3 -4
  34. package/breadcrumb-item/definition.js +0 -1
  35. package/breadcrumb-item/index.cjs +5 -5
  36. package/breadcrumb-item/index.js +7 -7
  37. package/bundled/affix.cjs +2 -2
  38. package/bundled/affix.js +6 -6
  39. package/bundled/anchored.cjs +1 -1
  40. package/bundled/anchored.js +1 -1
  41. package/bundled/aria-binding-directive.cjs +1 -0
  42. package/bundled/aria-binding-directive.js +29 -0
  43. package/bundled/base-color-picker.cjs +3 -3
  44. package/bundled/base-color-picker.js +1 -1
  45. package/bundled/base-progress.cjs +1 -1
  46. package/bundled/base-progress.js +2 -2
  47. package/bundled/breadcrumb-item.cjs +1 -1
  48. package/bundled/breadcrumb-item.js +3 -3
  49. package/bundled/button.cjs +1 -1
  50. package/bundled/button.js +3 -3
  51. package/bundled/calendar-event.cjs +1 -1
  52. package/bundled/calendar-event.js +4 -4
  53. package/bundled/calendar-picker.template.cjs +20 -20
  54. package/bundled/calendar-picker.template.js +10 -10
  55. package/bundled/char-count.cjs +2 -2
  56. package/bundled/char-count.js +3 -3
  57. package/bundled/children.cjs +1 -1
  58. package/bundled/children.js +6 -6
  59. package/bundled/decorate.js +1 -1
  60. package/bundled/definition.cjs +1 -1
  61. package/bundled/definition.js +2 -2
  62. package/bundled/definition10.cjs +3 -3
  63. package/bundled/definition10.js +19 -19
  64. package/bundled/definition11.cjs +2 -2
  65. package/bundled/definition11.js +9 -9
  66. package/bundled/definition12.cjs +7 -7
  67. package/bundled/definition12.js +19 -19
  68. package/bundled/definition13.cjs +3 -3
  69. package/bundled/definition13.js +8 -8
  70. package/bundled/definition14.cjs +2 -2
  71. package/bundled/definition14.js +3 -3
  72. package/bundled/definition15.cjs +7 -7
  73. package/bundled/definition15.js +18 -18
  74. package/bundled/definition16.cjs +3 -3
  75. package/bundled/definition16.js +19 -19
  76. package/bundled/definition17.cjs +7 -7
  77. package/bundled/definition17.js +16 -16
  78. package/bundled/definition18.cjs +7 -7
  79. package/bundled/definition18.js +23 -23
  80. package/bundled/definition19.cjs +2 -2
  81. package/bundled/definition19.js +3 -3
  82. package/bundled/definition2.cjs +4 -15
  83. package/bundled/definition2.js +23 -56
  84. package/bundled/definition20.cjs +10 -10
  85. package/bundled/definition20.js +19 -20
  86. package/bundled/definition21.cjs +5 -5
  87. package/bundled/definition21.js +26 -26
  88. package/bundled/definition22.cjs +4 -39
  89. package/bundled/definition22.js +18 -70
  90. package/bundled/definition23.cjs +12 -0
  91. package/bundled/definition23.js +37 -0
  92. package/bundled/definition24.cjs +39 -0
  93. package/bundled/definition24.js +72 -0
  94. package/bundled/definition3.cjs +1 -1
  95. package/bundled/definition3.js +39 -36
  96. package/bundled/definition4.cjs +4 -4
  97. package/bundled/definition4.js +13 -13
  98. package/bundled/definition5.cjs +5 -5
  99. package/bundled/definition5.js +10 -10
  100. package/bundled/definition6.cjs +12 -12
  101. package/bundled/definition6.js +61 -45
  102. package/bundled/definition7.cjs +2 -2
  103. package/bundled/definition7.js +6 -6
  104. package/bundled/definition8.cjs +4 -4
  105. package/bundled/definition8.js +15 -15
  106. package/bundled/definition9.cjs +2 -2
  107. package/bundled/definition9.js +18 -18
  108. package/bundled/delegates-aria.cjs +1 -1
  109. package/bundled/delegates-aria.js +10 -49
  110. package/bundled/divider.cjs +1 -1
  111. package/bundled/divider.js +3 -3
  112. package/bundled/form-associated.cjs +1 -1
  113. package/bundled/form-associated.js +6 -6
  114. package/bundled/form-element.cjs +1 -1
  115. package/bundled/form-element.js +8 -6
  116. package/bundled/host-semantics.cjs +1 -1
  117. package/bundled/host-semantics.js +10 -39
  118. package/bundled/linkable.cjs +2 -2
  119. package/bundled/linkable.js +1 -1
  120. package/bundled/listbox.cjs +1 -1
  121. package/bundled/listbox.js +12 -12
  122. package/bundled/localized.cjs +1 -1
  123. package/bundled/localized.js +7 -6
  124. package/bundled/mixins.cjs +6 -6
  125. package/bundled/mixins.js +14 -14
  126. package/bundled/normalize.cjs +1 -1
  127. package/bundled/normalize.js +2 -2
  128. package/bundled/numberConverter.cjs +12 -0
  129. package/bundled/numberConverter.js +38 -0
  130. package/bundled/picker-field.template.cjs +2 -1
  131. package/bundled/picker-field.template.js +25 -23
  132. package/bundled/ref.cjs +1 -1
  133. package/bundled/ref.js +1 -1
  134. package/bundled/repeat.cjs +1 -1
  135. package/bundled/repeat.js +54 -54
  136. package/bundled/slider.template.cjs +7 -7
  137. package/bundled/slider.template.js +13 -13
  138. package/bundled/slottable-request.cjs +1 -1
  139. package/bundled/slottable-request.js +1 -1
  140. package/bundled/slotted.cjs +1 -1
  141. package/bundled/slotted.js +1 -1
  142. package/bundled/text-field.cjs +1 -1
  143. package/bundled/text-field.js +1 -1
  144. package/bundled/time-selection-picker.template.cjs +4 -4
  145. package/bundled/time-selection-picker.template.js +23 -23
  146. package/bundled/utils.cjs +1 -0
  147. package/bundled/utils.js +1420 -0
  148. package/bundled/vivid-element.cjs +1 -1
  149. package/bundled/vivid-element.js +21 -19
  150. package/bundled/when.cjs +1 -1
  151. package/bundled/when.js +1 -1
  152. package/bundled/with-contextual-help.cjs +1 -1
  153. package/bundled/with-contextual-help.js +1 -1
  154. package/bundled/with-error-text.cjs +1 -1
  155. package/bundled/with-error-text.js +1 -1
  156. package/bundled/with-success-text.cjs +1 -1
  157. package/bundled/with-success-text.js +1 -1
  158. package/button/definition.cjs +4 -5
  159. package/button/definition.js +0 -1
  160. package/button/index.cjs +1 -1
  161. package/button/index.js +0 -2
  162. package/calendar/index.cjs +8 -8
  163. package/calendar/index.js +10 -10
  164. package/calendar-event/index.cjs +6 -6
  165. package/calendar-event/index.js +8 -8
  166. package/card/definition.cjs +4 -5
  167. package/card/definition.js +0 -1
  168. package/card/index.cjs +15 -15
  169. package/card/index.js +37 -37
  170. package/checkbox/definition.cjs +4 -5
  171. package/checkbox/definition.js +0 -1
  172. package/checkbox/index.cjs +1 -1
  173. package/checkbox/index.js +0 -2
  174. package/color-picker/definition.cjs +4 -5
  175. package/color-picker/definition.js +0 -1
  176. package/color-picker/index.cjs +19 -19
  177. package/color-picker/index.js +94 -93
  178. package/combobox/definition.cjs +4 -5
  179. package/combobox/definition.js +0 -1
  180. package/combobox/index.cjs +4 -4
  181. package/combobox/index.js +23 -23
  182. package/contextual-help/definition.cjs +4 -5
  183. package/contextual-help/definition.js +0 -1
  184. package/contextual-help/index.cjs +1 -1
  185. package/contextual-help/index.js +0 -2
  186. package/country/definition.cjs +4 -5
  187. package/country/definition.js +0 -1
  188. package/country/index.cjs +1 -12
  189. package/country/index.js +2 -1216
  190. package/country-group/definition.cjs +5 -0
  191. package/country-group/definition.js +2 -0
  192. package/country-group/index.cjs +43 -0
  193. package/country-group/index.js +166 -0
  194. package/custom-elements.json +3535 -3017
  195. package/data-grid/definition.cjs +8 -9
  196. package/data-grid/definition.js +1 -2
  197. package/data-grid/index.cjs +14 -14
  198. package/data-grid/index.js +105 -105
  199. package/date-picker/definition.cjs +4 -5
  200. package/date-picker/definition.js +1 -2
  201. package/date-picker/index.cjs +1 -1
  202. package/date-picker/index.js +2 -3
  203. package/date-range-picker/definition.cjs +4 -5
  204. package/date-range-picker/definition.js +1 -2
  205. package/date-range-picker/index.cjs +1 -1
  206. package/date-range-picker/index.js +6 -7
  207. package/date-time-picker/definition.cjs +4 -5
  208. package/date-time-picker/definition.js +1 -2
  209. package/date-time-picker/index.cjs +2 -2
  210. package/date-time-picker/index.js +8 -9
  211. package/dial-pad/definition.cjs +4 -5
  212. package/dial-pad/definition.js +1 -2
  213. package/dial-pad/index.cjs +9 -9
  214. package/dial-pad/index.js +19 -19
  215. package/dialog/definition.cjs +4 -5
  216. package/dialog/definition.js +1 -2
  217. package/dialog/index.cjs +14 -11
  218. package/dialog/index.js +39 -36
  219. package/divider/definition.cjs +1 -1
  220. package/divider/definition.js +1 -1
  221. package/divider/index.cjs +1 -1
  222. package/divider/index.js +0 -1
  223. package/elevation/index.cjs +1 -1
  224. package/elevation/index.js +0 -1
  225. package/empty-state/definition.cjs +4 -5
  226. package/empty-state/definition.js +1 -2
  227. package/empty-state/index.cjs +4 -4
  228. package/empty-state/index.js +12 -12
  229. package/fab/definition.cjs +4 -5
  230. package/fab/definition.js +1 -2
  231. package/fab/index.cjs +3 -3
  232. package/fab/index.js +12 -12
  233. package/file-picker/definition.cjs +4 -5
  234. package/file-picker/definition.js +1 -2
  235. package/file-picker/index.cjs +10 -10
  236. package/file-picker/index.js +26 -26
  237. package/flag/definition.cjs +5 -0
  238. package/flag/definition.js +2 -0
  239. package/flag/index.cjs +10 -0
  240. package/flag/index.js +61 -0
  241. package/header/definition.cjs +1 -1
  242. package/header/definition.js +1 -1
  243. package/header/index.cjs +5 -5
  244. package/header/index.js +11 -11
  245. package/icon/index.cjs +1 -1
  246. package/icon/index.js +0 -1
  247. package/index.cjs +182 -174
  248. package/index.js +47 -45
  249. package/layout/definition.cjs +1 -1
  250. package/layout/definition.js +1 -1
  251. package/layout/index.cjs +2 -2
  252. package/layout/index.js +3 -3
  253. package/lib/avatar/avatar.d.ts +1 -1
  254. package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
  255. package/lib/button/button.d.ts +2 -1
  256. package/lib/card/card.d.ts +1 -1
  257. package/lib/components.d.ts +2 -0
  258. package/lib/country/countries-data.d.ts +1 -0
  259. package/lib/country/{country-code-to-flag-icon.d.ts → utils.d.ts} +0 -3
  260. package/lib/country-group/country-group.d.ts +829 -0
  261. package/lib/country-group/country-group.template.d.ts +3 -0
  262. package/lib/country-group/definition.d.ts +3 -0
  263. package/lib/country-group/index.d.ts +1 -0
  264. package/lib/country-group/locale.d.ts +3 -0
  265. package/lib/date-picker/date-picker.d.ts +4 -0
  266. package/lib/date-range-picker/date-range-picker.d.ts +2 -0
  267. package/lib/date-time-picker/date-time-picker.d.ts +4 -0
  268. package/lib/flag/definition.d.ts +3 -0
  269. package/lib/flag/flag.d.ts +8 -0
  270. package/lib/flag/flag.template.d.ts +3 -0
  271. package/lib/flag/index.d.ts +1 -0
  272. package/lib/icon/icon.d.ts +1 -2
  273. package/lib/nav-item/nav-item.d.ts +1 -1
  274. package/lib/rich-text-editor/rte/utils/ui.d.ts +2 -1
  275. package/lib/searchable-select/option-tag.d.ts +3 -1
  276. package/lib/searchable-select/searchable-select.d.ts +3 -1
  277. package/lib/tag-name-map.d.ts +2 -1
  278. package/lib/time-picker/time-picker.d.ts +2 -0
  279. package/locales/de-DE.cjs +2 -1
  280. package/locales/de-DE.js +1 -0
  281. package/locales/en-GB.cjs +2 -1
  282. package/locales/en-GB.js +1 -0
  283. package/locales/en-US.cjs +2 -1
  284. package/locales/en-US.js +1 -0
  285. package/locales/ja-JP.cjs +2 -1
  286. package/locales/ja-JP.js +1 -0
  287. package/locales/zh-CN.cjs +2 -1
  288. package/locales/zh-CN.js +1 -0
  289. package/menu/definition.cjs +4 -5
  290. package/menu/definition.js +0 -1
  291. package/menu/index.cjs +1 -1
  292. package/menu/index.js +0 -2
  293. package/menu-item/definition.cjs +5 -6
  294. package/menu-item/definition.js +0 -1
  295. package/menu-item/index.cjs +1 -1
  296. package/menu-item/index.js +0 -2
  297. package/nav/definition.cjs +1 -1
  298. package/nav/definition.js +1 -1
  299. package/nav/index.cjs +2 -2
  300. package/nav/index.js +2 -2
  301. package/nav-disclosure/definition.cjs +4 -5
  302. package/nav-disclosure/definition.js +1 -2
  303. package/nav-disclosure/index.cjs +4 -4
  304. package/nav-disclosure/index.js +18 -18
  305. package/nav-item/definition.cjs +4 -5
  306. package/nav-item/definition.js +1 -2
  307. package/nav-item/index.cjs +2 -2
  308. package/nav-item/index.js +13 -13
  309. package/note/definition.cjs +4 -5
  310. package/note/definition.js +1 -2
  311. package/note/index.cjs +2 -2
  312. package/note/index.js +10 -10
  313. package/number-field/definition.cjs +4 -5
  314. package/number-field/definition.js +1 -2
  315. package/number-field/index.cjs +5 -5
  316. package/number-field/index.js +19 -19
  317. package/option/definition.cjs +4 -5
  318. package/option/definition.js +0 -1
  319. package/option/index.cjs +1 -1
  320. package/option/index.js +0 -2
  321. package/package.json +23 -23
  322. package/pagination/definition.cjs +4 -5
  323. package/pagination/definition.js +1 -2
  324. package/pagination/index.cjs +4 -4
  325. package/pagination/index.js +11 -12
  326. package/popover/definition.cjs +4 -5
  327. package/popover/definition.js +1 -2
  328. package/popover/index.cjs +8 -8
  329. package/popover/index.js +31 -31
  330. package/popup/definition.cjs +3 -4
  331. package/popup/definition.js +0 -1
  332. package/popup/index.cjs +1 -1
  333. package/popup/index.js +0 -2
  334. package/progress/definition.cjs +1 -1
  335. package/progress/definition.js +1 -1
  336. package/progress/index.cjs +5 -5
  337. package/progress/index.js +10 -10
  338. package/progress-ring/index.cjs +1 -1
  339. package/progress-ring/index.js +0 -1
  340. package/radio/definition.cjs +1 -1
  341. package/radio/definition.js +1 -1
  342. package/radio/index.cjs +1 -1
  343. package/radio/index.js +0 -1
  344. package/radio-group/definition.cjs +4 -5
  345. package/radio-group/definition.js +1 -2
  346. package/radio-group/index.cjs +6 -6
  347. package/radio-group/index.js +21 -21
  348. package/range-slider/definition.cjs +4 -5
  349. package/range-slider/definition.js +1 -2
  350. package/range-slider/index.cjs +5 -5
  351. package/range-slider/index.js +69 -67
  352. package/rich-text-editor/definition.cjs +31 -32
  353. package/rich-text-editor/definition.js +1 -2
  354. package/rich-text-editor/index.cjs +9 -9
  355. package/rich-text-editor/index.js +2016 -1947
  356. package/rich-text-view/definition.cjs +1 -1
  357. package/rich-text-view/definition.js +1 -1
  358. package/rich-text-view/index.cjs +1 -1
  359. package/rich-text-view/index.js +2 -2
  360. package/searchable-select/definition.cjs +3 -4
  361. package/searchable-select/definition.js +1 -2
  362. package/searchable-select/index.cjs +25 -23
  363. package/searchable-select/index.js +72 -68
  364. package/select/definition.cjs +4 -5
  365. package/select/definition.js +1 -2
  366. package/select/index.cjs +1 -1
  367. package/select/index.js +0 -2
  368. package/selectable-box/definition.cjs +4 -5
  369. package/selectable-box/definition.js +1 -2
  370. package/selectable-box/index.cjs +9 -9
  371. package/selectable-box/index.js +19 -20
  372. package/shared/aria/aria-binding-directive.d.ts +21 -0
  373. package/shared/aria/aria-change-subscription.d.ts +1 -0
  374. package/shared/aria/delegates-aria.d.ts +1 -1
  375. package/shared/aria/host-semantics.d.ts +1 -1
  376. package/shared/icon/utils.d.ts +1 -0
  377. package/shared/localization/Locale.d.ts +2 -0
  378. package/shared/patterns/linkable.d.ts +1 -1
  379. package/shared/picker-field/mixins/calendar-picker.d.ts +1 -0
  380. package/shared/picker-field/mixins/calendar-picker.template.d.ts +1 -0
  381. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +1 -0
  382. package/shared/picker-field/mixins/single-date-picker.d.ts +1 -0
  383. package/shared/picker-field/mixins/single-value-picker.d.ts +1 -0
  384. package/shared/picker-field/mixins/time-selection-picker.d.ts +1 -0
  385. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +2 -0
  386. package/shared/picker-field/picker-field.d.ts +2 -0
  387. package/side-drawer/definition.cjs +1 -1
  388. package/side-drawer/definition.js +1 -1
  389. package/side-drawer/index.cjs +3 -3
  390. package/side-drawer/index.js +4 -4
  391. package/simple-color-picker/definition.cjs +4 -5
  392. package/simple-color-picker/definition.js +1 -2
  393. package/simple-color-picker/index.cjs +2 -2
  394. package/simple-color-picker/index.js +22 -22
  395. package/slider/definition.cjs +4 -5
  396. package/slider/definition.js +0 -1
  397. package/slider/index.cjs +1 -1
  398. package/slider/index.js +0 -2
  399. package/split-button/definition.cjs +4 -5
  400. package/split-button/definition.js +1 -2
  401. package/split-button/index.cjs +6 -6
  402. package/split-button/index.js +20 -20
  403. package/status/definition.cjs +4 -5
  404. package/status/definition.js +1 -2
  405. package/status/index.cjs +2 -2
  406. package/status/index.js +11 -11
  407. package/switch/definition.cjs +4 -5
  408. package/switch/definition.js +1 -2
  409. package/switch/index.cjs +5 -5
  410. package/switch/index.js +12 -12
  411. package/tab/definition.cjs +4 -5
  412. package/tab/definition.js +1 -2
  413. package/tab/index.cjs +1 -1
  414. package/tab/index.js +0 -2
  415. package/tab-panel/definition.cjs +1 -1
  416. package/tab-panel/definition.js +1 -1
  417. package/tab-panel/index.cjs +1 -1
  418. package/tab-panel/index.js +0 -1
  419. package/table/definition.cjs +16 -17
  420. package/table/definition.js +1 -2
  421. package/table/index.cjs +9 -9
  422. package/table/index.js +24 -24
  423. package/tabs/definition.cjs +5 -6
  424. package/tabs/definition.js +1 -2
  425. package/tabs/index.cjs +2 -2
  426. package/tabs/index.js +25 -26
  427. package/tag/definition.cjs +4 -5
  428. package/tag/definition.js +1 -2
  429. package/tag/index.cjs +12 -12
  430. package/tag/index.js +24 -24
  431. package/tag-group/definition.cjs +1 -1
  432. package/tag-group/definition.js +1 -1
  433. package/tag-group/index.cjs +4 -4
  434. package/tag-group/index.js +6 -6
  435. package/text-area/definition.cjs +4 -5
  436. package/text-area/definition.js +1 -2
  437. package/text-area/index.cjs +4 -4
  438. package/text-area/index.js +24 -25
  439. package/text-field/definition.cjs +4 -5
  440. package/text-field/definition.js +0 -1
  441. package/text-field/index.cjs +1 -1
  442. package/text-field/index.js +0 -2
  443. package/time-picker/definition.cjs +3 -4
  444. package/time-picker/definition.js +1 -2
  445. package/time-picker/index.cjs +1 -1
  446. package/time-picker/index.js +2 -3
  447. package/toggletip/definition.cjs +4 -5
  448. package/toggletip/definition.js +0 -1
  449. package/toggletip/index.cjs +1 -1
  450. package/toggletip/index.js +0 -2
  451. package/tooltip/definition.cjs +4 -5
  452. package/tooltip/definition.js +0 -1
  453. package/tooltip/index.cjs +1 -1
  454. package/tooltip/index.js +0 -2
  455. package/tree-item/definition.cjs +4 -5
  456. package/tree-item/definition.js +1 -2
  457. package/tree-item/index.cjs +1 -1
  458. package/tree-item/index.js +0 -2
  459. package/tree-view/definition.cjs +4 -5
  460. package/tree-view/definition.js +1 -2
  461. package/tree-view/index.cjs +2 -2
  462. package/tree-view/index.js +5 -5
  463. package/unbundled/aria-binding-directive.cjs +42 -0
  464. package/unbundled/aria-binding-directive.js +36 -0
  465. package/unbundled/calendar-picker.template.cjs +1 -1
  466. package/unbundled/calendar-picker.template.js +1 -1
  467. package/unbundled/char-count.cjs +2 -1
  468. package/unbundled/char-count.js +2 -1
  469. package/unbundled/decorate.cjs +1 -1
  470. package/unbundled/decorate.js +1 -1
  471. package/unbundled/definition.js +1 -1
  472. package/unbundled/definition10.cjs +5 -4
  473. package/unbundled/definition10.js +6 -5
  474. package/unbundled/definition11.cjs +17 -7
  475. package/unbundled/definition11.js +18 -8
  476. package/unbundled/definition12.cjs +2 -2
  477. package/unbundled/definition12.js +3 -3
  478. package/unbundled/definition13.cjs +7 -6
  479. package/unbundled/definition13.js +8 -7
  480. package/unbundled/definition14.cjs +67 -57
  481. package/unbundled/definition14.js +68 -58
  482. package/unbundled/definition15.js +1 -1
  483. package/unbundled/definition16.js +1 -1
  484. package/unbundled/definition17.cjs +10 -8
  485. package/unbundled/definition17.js +11 -9
  486. package/unbundled/definition18.js +1 -1
  487. package/unbundled/definition19.js +1 -1
  488. package/unbundled/definition2.cjs +9 -77
  489. package/unbundled/definition2.js +6 -74
  490. package/unbundled/definition20.js +1 -1
  491. package/unbundled/definition21.js +1 -1
  492. package/unbundled/definition22.js +1 -1
  493. package/unbundled/definition23.cjs +1 -1
  494. package/unbundled/definition23.js +2 -2
  495. package/unbundled/definition24.cjs +17 -13
  496. package/unbundled/definition24.js +18 -14
  497. package/unbundled/definition25.js +1 -1
  498. package/unbundled/definition26.cjs +17 -1
  499. package/unbundled/definition26.js +18 -2
  500. package/unbundled/definition27.cjs +15 -12
  501. package/unbundled/definition27.js +16 -13
  502. package/unbundled/definition28.cjs +10 -6
  503. package/unbundled/definition28.js +11 -7
  504. package/unbundled/definition29.js +1 -1
  505. package/unbundled/definition3.js +1 -1
  506. package/unbundled/definition30.cjs +4 -2
  507. package/unbundled/definition30.js +5 -3
  508. package/unbundled/definition31.cjs +2 -1189
  509. package/unbundled/definition31.js +2 -1189
  510. package/unbundled/definition32.cjs +215 -1836
  511. package/unbundled/definition32.js +212 -1809
  512. package/unbundled/definition33.cjs +85 -311
  513. package/unbundled/definition33.js +82 -236
  514. package/unbundled/definition34.cjs +2039 -25
  515. package/unbundled/definition34.js +2009 -24
  516. package/unbundled/definition35.cjs +315 -121
  517. package/unbundled/definition35.js +236 -114
  518. package/unbundled/definition36.cjs +25 -405
  519. package/unbundled/definition36.js +23 -398
  520. package/unbundled/definition37.cjs +47 -142
  521. package/unbundled/definition37.js +45 -140
  522. package/unbundled/definition38.cjs +346 -330
  523. package/unbundled/definition38.js +344 -328
  524. package/unbundled/definition39.cjs +183 -235
  525. package/unbundled/definition39.js +181 -233
  526. package/unbundled/definition4.cjs +6 -0
  527. package/unbundled/definition4.js +7 -1
  528. package/unbundled/definition40.cjs +377 -47
  529. package/unbundled/definition40.js +373 -43
  530. package/unbundled/definition41.cjs +261 -57
  531. package/unbundled/definition41.js +260 -56
  532. package/unbundled/definition42.cjs +45 -432
  533. package/unbundled/definition42.js +42 -429
  534. package/unbundled/definition43.cjs +63 -49
  535. package/unbundled/definition43.js +61 -47
  536. package/unbundled/definition44.cjs +439 -30
  537. package/unbundled/definition44.js +436 -26
  538. package/unbundled/definition45.cjs +46 -84
  539. package/unbundled/definition45.js +43 -81
  540. package/unbundled/definition46.cjs +29 -54
  541. package/unbundled/definition46.js +24 -50
  542. package/unbundled/definition47.cjs +94 -21
  543. package/unbundled/definition47.js +92 -16
  544. package/unbundled/definition48.cjs +49 -33
  545. package/unbundled/definition48.js +46 -30
  546. package/unbundled/definition49.cjs +22 -347
  547. package/unbundled/definition49.js +17 -345
  548. package/unbundled/definition5.js +1 -1
  549. package/unbundled/definition50.cjs +34 -211
  550. package/unbundled/definition50.js +31 -208
  551. package/unbundled/definition51.cjs +282 -242
  552. package/unbundled/definition51.js +276 -236
  553. package/unbundled/definition52.cjs +211 -51
  554. package/unbundled/definition52.js +209 -48
  555. package/unbundled/definition53.cjs +279 -131
  556. package/unbundled/definition53.js +277 -128
  557. package/unbundled/definition54.cjs +50 -261
  558. package/unbundled/definition54.js +48 -260
  559. package/unbundled/definition55.cjs +128 -443
  560. package/unbundled/definition55.js +126 -442
  561. package/unbundled/definition56.cjs +235 -3596
  562. package/unbundled/definition56.js +231 -3429
  563. package/unbundled/definition57.cjs +419 -729
  564. package/unbundled/definition57.js +417 -727
  565. package/unbundled/definition58.cjs +3626 -106
  566. package/unbundled/definition58.js +3458 -101
  567. package/unbundled/definition59.cjs +624 -868
  568. package/unbundled/definition59.js +619 -863
  569. package/unbundled/definition6.js +1 -1
  570. package/unbundled/definition60.cjs +106 -108
  571. package/unbundled/definition60.js +103 -105
  572. package/unbundled/definition61.cjs +1045 -71
  573. package/unbundled/definition61.js +1041 -66
  574. package/unbundled/definition62.cjs +105 -169
  575. package/unbundled/definition62.js +102 -166
  576. package/unbundled/definition63.cjs +70 -113
  577. package/unbundled/definition63.js +66 -110
  578. package/unbundled/definition64.cjs +184 -53
  579. package/unbundled/definition64.js +182 -51
  580. package/unbundled/definition65.cjs +109 -76
  581. package/unbundled/definition65.js +110 -76
  582. package/unbundled/definition66.cjs +58 -21
  583. package/unbundled/definition66.js +56 -16
  584. package/unbundled/definition67.cjs +81 -74
  585. package/unbundled/definition67.js +80 -74
  586. package/unbundled/definition68.cjs +19 -344
  587. package/unbundled/definition68.js +15 -336
  588. package/unbundled/definition69.cjs +88 -26
  589. package/unbundled/definition69.js +86 -23
  590. package/unbundled/definition7.cjs +18 -3
  591. package/unbundled/definition7.js +19 -4
  592. package/unbundled/definition70.cjs +335 -111
  593. package/unbundled/definition70.js +326 -109
  594. package/unbundled/definition71.cjs +26 -271
  595. package/unbundled/definition71.js +22 -268
  596. package/unbundled/definition72.cjs +135 -27
  597. package/unbundled/definition72.js +126 -25
  598. package/unbundled/definition73.cjs +257 -113
  599. package/unbundled/definition73.js +255 -105
  600. package/unbundled/definition74.cjs +28 -212
  601. package/unbundled/definition74.js +26 -202
  602. package/unbundled/definition75.cjs +117 -479
  603. package/unbundled/definition75.js +110 -476
  604. package/unbundled/definition76.cjs +233 -0
  605. package/unbundled/definition76.js +214 -0
  606. package/unbundled/definition77.cjs +533 -0
  607. package/unbundled/definition77.js +513 -0
  608. package/unbundled/definition8.js +1 -1
  609. package/unbundled/definition9.cjs +9 -7
  610. package/unbundled/definition9.js +10 -8
  611. package/unbundled/delegates-aria.cjs +5 -60
  612. package/unbundled/delegates-aria.js +6 -60
  613. package/unbundled/divider.cjs +6 -0
  614. package/unbundled/divider.js +6 -0
  615. package/unbundled/form-element.cjs +7 -5
  616. package/unbundled/form-element.js +7 -5
  617. package/unbundled/host-semantics.cjs +10 -45
  618. package/unbundled/host-semantics.js +10 -44
  619. package/unbundled/mixins.js +1 -1
  620. package/unbundled/numberConverter.cjs +91 -0
  621. package/unbundled/numberConverter.js +74 -0
  622. package/unbundled/picker-field.template.cjs +22 -15
  623. package/unbundled/picker-field.template.js +22 -15
  624. package/unbundled/text-field.cjs +1 -1
  625. package/unbundled/text-field.js +1 -1
  626. package/unbundled/time-selection-picker.template.cjs +4 -3
  627. package/unbundled/time-selection-picker.template.js +5 -4
  628. package/unbundled/utils.cjs +1439 -0
  629. package/unbundled/utils.js +1428 -0
  630. package/unbundled/vivid-element.cjs +10 -1
  631. package/unbundled/vivid-element.js +5 -2
  632. package/video-player/definition.cjs +1 -1
  633. package/video-player/definition.js +1 -1
  634. package/video-player/index.cjs +24 -24
  635. package/video-player/index.js +3087 -3010
  636. package/visually-hidden/index.cjs +1 -1
  637. package/visually-hidden/index.js +0 -1
  638. package/vivid.api.json +514 -1
  639. package/bundled/attribute-binding-behaviour.cjs +0 -1
  640. package/bundled/attribute-binding-behaviour.js +0 -18
  641. package/bundled/strings.cjs +0 -1
  642. package/bundled/strings.js +0 -7
  643. package/shared/aria/delegate-aria-behavior.d.ts +0 -23
  644. package/shared/aria/host-semantics-behavior.d.ts +0 -19
  645. package/shared/templating/attribute-binding-behaviour.d.ts +0 -14
  646. package/unbundled/attribute-binding-behaviour.cjs +0 -37
  647. package/unbundled/attribute-binding-behaviour.js +0 -31
  648. /package/{lib/icon/icon.placeholder.d.ts → shared/icon/icon-placeholder.d.ts} +0 -0
package/unbundled/definition7.cjs CHANGED
@@ -27,6 +27,7 @@ var Button = class extends require_affix.AffixIconWithTrailing(require_localized
27
27
  this.pending = false;
28
28
  this.dropdownIndicator = false;
29
29
  this.active = false;
30
+ this.pressed = false;
30
31
  this.title = "";
31
32
  }
32
33
  /**
@@ -68,10 +69,14 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
68
69
  mode: "boolean",
69
70
  attribute: "active"
70
71
  })], Button.prototype, "active", void 0);
72
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
73
+ mode: "boolean",
74
+ attribute: "pressed"
75
+ })], Button.prototype, "pressed", void 0);
71
76
  require_decorate.__decorate([_microsoft_fast_element.attr], Button.prototype, "label", void 0);
72
77
  //#endregion
73
78
  //#region src/lib/button/button.scss?inline
74
- var button_default = ".chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}: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))}.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))}.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))}.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))}.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))}.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)}@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-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: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-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: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-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{--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}@supports (user-select:none){.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}";
79
+ var button_default = ".chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}: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}@supports (user-select:none){.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}";
75
80
  //#endregion
76
81
  //#region src/shared/patterns/chevron.ts
77
82
  var chevronTemplateFactory = (context) => {
@@ -80,7 +85,16 @@ var chevronTemplateFactory = (context) => {
80
85
  };
81
86
  //#endregion
82
87
  //#region src/lib/button/button.template.ts
83
- var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", Boolean(stacked)], ["active", ariaExpanded === "true" || active]);
88
+ function getEffectiveAppearance(appearance, pressed) {
89
+ const resolvedAppearance = appearance ?? "ghost";
90
+ if (pressed) {
91
+ if (resolvedAppearance === "ghost") return "subtle";
92
+ if (resolvedAppearance === "ghost-light") return "subtle-light";
93
+ if (resolvedAppearance === "outlined") return "filled";
94
+ }
95
+ return resolvedAppearance;
96
+ }
97
+ var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator, pressed }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${connotation}`, Boolean(connotation)], `appearance-${getEffectiveAppearance(appearance, pressed)}`, ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", Boolean(stacked)], ["active", ariaExpanded === "true" || active]);
84
98
  function renderIconOrPending(context, icon, pending, size = require_enums.Size.Normal) {
85
99
  if (pending && size != require_enums.Size.SuperCondensed) {
86
100
  const progressTag = context.tagFor(require_definition$1.ProgressRing);
@@ -131,7 +145,8 @@ function renderButtonContent(context) {
131
145
  title="${(x) => x.title}"
132
146
  ${require_delegates_aria.delegateAria({
133
147
  ariaLabel: null,
134
- ariaDisabled: (x) => x.disabled || x.pending
148
+ ariaDisabled: (x) => x.disabled || x.pending,
149
+ ariaPressed: (x) => x.pressed ? "true" : x.ariaPressed ?? null
135
150
  })}
136
151
  ${(0, _microsoft_fast_element.ref)("control")}
137
152
  @click="${(x, c) => x.clickHandler(c.event)}"
package/unbundled/definition7.js CHANGED
@@ -1,4 +1,4 @@
1
- import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
1
+ import { c as createRegisterFunction, s as defineVividComponent } from "./vivid-element.js";
2
2
  import { r as Icon, t as iconDefinition } from "./definition2.js";
3
3
  import { t as __decorate } from "./decorate.js";
4
4
  import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
@@ -26,6 +26,7 @@ var Button = class extends AffixIconWithTrailing(Localized(Linkable(VividFoundat
26
26
  this.pending = false;
27
27
  this.dropdownIndicator = false;
28
28
  this.active = false;
29
+ this.pressed = false;
29
30
  this.title = "";
30
31
  }
31
32
  /**
@@ -67,10 +68,14 @@ __decorate([attr({
67
68
  mode: "boolean",
68
69
  attribute: "active"
69
70
  })], Button.prototype, "active", void 0);
71
+ __decorate([attr({
72
+ mode: "boolean",
73
+ attribute: "pressed"
74
+ })], Button.prototype, "pressed", void 0);
70
75
  __decorate([attr], Button.prototype, "label", void 0);
71
76
  //#endregion
72
77
  //#region src/lib/button/button.scss?inline
73
- var button_default = ".chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}: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))}.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))}.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))}.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))}.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))}.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)}@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-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: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-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: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-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{--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}@supports (user-select:none){.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}";
78
+ var button_default = ".chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}: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}@supports (user-select:none){.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}";
74
79
  //#endregion
75
80
  //#region src/shared/patterns/chevron.ts
76
81
  var chevronTemplateFactory = (context) => {
@@ -79,7 +84,16 @@ var chevronTemplateFactory = (context) => {
79
84
  };
80
85
  //#endregion
81
86
  //#region src/lib/button/button.template.ts
82
- var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator }) => classNames("control", [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", Boolean(stacked)], ["active", ariaExpanded === "true" || active]);
87
+ function getEffectiveAppearance(appearance, pressed) {
88
+ const resolvedAppearance = appearance ?? "ghost";
89
+ if (pressed) {
90
+ if (resolvedAppearance === "ghost") return "subtle";
91
+ if (resolvedAppearance === "ghost-light") return "subtle-light";
92
+ if (resolvedAppearance === "outlined") return "filled";
93
+ }
94
+ return resolvedAppearance;
95
+ }
96
+ var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator, pressed }) => classNames("control", [`connotation-${connotation}`, Boolean(connotation)], `appearance-${getEffectiveAppearance(appearance, pressed)}`, ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", Boolean(stacked)], ["active", ariaExpanded === "true" || active]);
83
97
  function renderIconOrPending(context, icon, pending, size = Size.Normal) {
84
98
  if (pending && size != Size.SuperCondensed) {
85
99
  const progressTag = context.tagFor(ProgressRing);
@@ -130,7 +144,8 @@ function renderButtonContent(context) {
130
144
  title="${(x) => x.title}"
131
145
  ${delegateAria({
132
146
  ariaLabel: null,
133
- ariaDisabled: (x) => x.disabled || x.pending
147
+ ariaDisabled: (x) => x.disabled || x.pending,
148
+ ariaPressed: (x) => x.pressed ? "true" : x.ariaPressed ?? null
134
149
  })}
135
150
  ${ref("control")}
136
151
  @click="${(x, c) => x.clickHandler(c.event)}"