@vonage/vivid 4.23.0 → 4.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (396) hide show
  1. package/custom-elements.json +21830 -14295
  2. package/elevation/index.cjs +1 -1
  3. package/elevation/index.js +1 -1
  4. package/index.cjs +112 -150
  5. package/index.js +37 -35
  6. package/lib/accordion-item/accordion-item.d.ts +6 -0
  7. package/lib/action-group/action-group.d.ts +6 -0
  8. package/lib/alert/alert.d.ts +20 -0
  9. package/lib/audio-player/audio-player.d.ts +6 -0
  10. package/lib/badge/badge.d.ts +9 -1
  11. package/lib/banner/banner.d.ts +25 -0
  12. package/lib/breadcrumb/breadcrumb.d.ts +6 -0
  13. package/lib/breadcrumb-item/breadcrumb-item.d.ts +63 -7
  14. package/lib/button/button.d.ts +732 -7
  15. package/lib/button/locale.d.ts +3 -0
  16. package/lib/calendar-event/calendar-event.d.ts +6 -0
  17. package/lib/card/card.d.ts +394 -2
  18. package/lib/card/card.template.d.ts +2 -1
  19. package/lib/checkbox/checkbox.d.ts +1822 -5
  20. package/lib/combobox/combobox.d.ts +1827 -20
  21. package/lib/data-grid/data-grid-cell.d.ts +339 -1
  22. package/lib/data-grid/locale.d.ts +5 -0
  23. package/lib/date-picker/date-picker.d.ts +1676 -207
  24. package/lib/date-range-picker/date-range-picker.d.ts +840 -107
  25. package/lib/date-time-picker/date-time-picker.d.ts +1678 -209
  26. package/lib/dial-pad/dial-pad.d.ts +8 -0
  27. package/lib/dialog/dialog.d.ts +12 -0
  28. package/lib/divider/divider.d.ts +6 -0
  29. package/lib/fab/fab.d.ts +6 -0
  30. package/lib/file-picker/file-picker.d.ts +1510 -32
  31. package/lib/file-picker/locale.d.ts +1 -0
  32. package/lib/header/header.d.ts +6 -0
  33. package/lib/icon/icon.d.ts +1 -0
  34. package/lib/icon/icon.template.d.ts +2 -1
  35. package/lib/menu/menu.d.ts +16 -7
  36. package/lib/menu/name.d.ts +1 -0
  37. package/lib/menu-item/menu-item.d.ts +14 -2
  38. package/lib/nav/nav.d.ts +6 -0
  39. package/lib/nav-disclosure/nav-disclosure.d.ts +13 -0
  40. package/lib/nav-item/nav-item.d.ts +405 -3
  41. package/lib/note/note.d.ts +6 -0
  42. package/lib/number-field/number-field.d.ts +1857 -36
  43. package/lib/option/option.d.ts +12 -0
  44. package/lib/progress/progress.d.ts +6 -0
  45. package/lib/progress-ring/progress-ring.d.ts +6 -0
  46. package/lib/radio/radio.d.ts +1137 -4
  47. package/lib/radio-group/radio-group.d.ts +20 -2
  48. package/lib/range-slider/range-slider.d.ts +752 -5
  49. package/lib/rich-text-editor/definition.d.ts +2 -2
  50. package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +3 -1
  51. package/lib/rich-text-editor/locale.d.ts +10 -0
  52. package/lib/rich-text-editor/menubar/menubar.d.ts +340 -1
  53. package/lib/rich-text-editor/rich-text-editor.d.ts +352 -2
  54. package/lib/searchable-select/locale.d.ts +1 -0
  55. package/lib/searchable-select/option-tag.d.ts +6 -0
  56. package/lib/searchable-select/searchable-select.d.ts +1857 -35
  57. package/lib/select/select.d.ts +1843 -28
  58. package/lib/selectable-box/selectable-box.d.ts +6 -0
  59. package/lib/slider/slider.d.ts +384 -2
  60. package/lib/split-button/split-button.d.ts +18 -0
  61. package/lib/switch/switch.d.ts +386 -3
  62. package/lib/tab/tab.d.ts +18 -1
  63. package/lib/tab-panel/tab-panel.d.ts +6 -0
  64. package/lib/tabs/tabs.d.ts +5 -21
  65. package/lib/tag/tag.d.ts +12 -0
  66. package/lib/tag-group/tag-group.d.ts +6 -0
  67. package/lib/text-area/text-area.d.ts +2174 -19
  68. package/lib/text-field/text-field.d.ts +2195 -31
  69. package/lib/time-picker/time-picker.d.ts +839 -106
  70. package/lib/toggletip/toggletip.d.ts +10 -4
  71. package/lib/tooltip/tooltip.d.ts +10 -4
  72. package/lib/tree-item/tree-item.d.ts +12 -0
  73. package/lib/tree-view/tree-view.d.ts +6 -0
  74. package/lib/video-player/video-player.d.ts +6 -0
  75. package/lib/visually-hidden/definition.d.ts +4 -0
  76. package/lib/visually-hidden/visually-hidden.d.ts +3 -0
  77. package/lib/visually-hidden/visually-hidden.template.d.ts +3 -0
  78. package/locales/de-DE.cjs +47 -1
  79. package/locales/de-DE.js +47 -1
  80. package/locales/en-GB.cjs +47 -1
  81. package/locales/en-GB.js +47 -1
  82. package/locales/en-US.cjs +47 -1
  83. package/locales/en-US.js +47 -1
  84. package/locales/ja-JP.cjs +47 -1
  85. package/locales/ja-JP.js +47 -1
  86. package/locales/zh-CN.cjs +47 -1
  87. package/locales/zh-CN.js +47 -1
  88. package/menu/index.cjs +1 -1
  89. package/menu/index.js +1 -1
  90. package/nav/index.cjs +1 -1
  91. package/nav/index.js +1 -1
  92. package/nav-disclosure/index.cjs +1 -1
  93. package/nav-disclosure/index.js +1 -1
  94. package/nav-item/index.cjs +1 -1
  95. package/nav-item/index.js +1 -1
  96. package/note/index.cjs +1 -1
  97. package/note/index.js +1 -1
  98. package/number-field/index.cjs +1 -1
  99. package/number-field/index.js +1 -1
  100. package/option/index.cjs +1 -1
  101. package/option/index.js +1 -1
  102. package/package.json +1 -1
  103. package/pagination/index.cjs +1 -1
  104. package/pagination/index.js +1 -1
  105. package/popup/index.cjs +1 -1
  106. package/popup/index.js +1 -1
  107. package/progress/index.cjs +1 -1
  108. package/progress/index.js +1 -1
  109. package/progress-ring/index.cjs +1 -1
  110. package/progress-ring/index.js +1 -1
  111. package/radio/index.cjs +1 -1
  112. package/radio/index.js +1 -1
  113. package/radio-group/index.cjs +1 -1
  114. package/radio-group/index.js +1 -1
  115. package/range-slider/index.cjs +1 -1
  116. package/range-slider/index.js +1 -1
  117. package/rich-text-editor/index.cjs +1 -1
  118. package/rich-text-editor/index.js +1 -1
  119. package/searchable-select/index.cjs +1 -1
  120. package/searchable-select/index.js +1 -1
  121. package/select/index.cjs +1 -1
  122. package/select/index.js +1 -1
  123. package/selectable-box/index.cjs +1 -1
  124. package/selectable-box/index.js +1 -1
  125. package/shared/affix.cjs +13 -7
  126. package/shared/affix.js +13 -8
  127. package/shared/aria/delegates-aria.d.ts +6 -0
  128. package/shared/aria/host-semantics.d.ts +6 -0
  129. package/shared/breadcrumb-item.cjs +2 -5
  130. package/shared/breadcrumb-item.js +2 -5
  131. package/shared/button.cjs +19 -14
  132. package/shared/button.js +19 -14
  133. package/shared/calendar-picker.template.cjs +3 -3
  134. package/shared/calendar-picker.template.js +1 -1
  135. package/shared/char-count.cjs +92 -0
  136. package/shared/char-count.js +90 -0
  137. package/shared/definition.js +1 -1
  138. package/shared/definition10.js +1 -1
  139. package/shared/definition11.cjs +27 -44
  140. package/shared/definition11.js +28 -45
  141. package/shared/definition12.cjs +1 -1
  142. package/shared/definition12.js +2 -2
  143. package/shared/definition13.js +1 -1
  144. package/shared/definition14.cjs +53 -22
  145. package/shared/definition14.js +54 -23
  146. package/shared/definition15.cjs +31 -36
  147. package/shared/definition15.js +30 -36
  148. package/shared/definition16.cjs +43 -63
  149. package/shared/definition16.js +42 -63
  150. package/shared/definition17.cjs +12 -5
  151. package/shared/definition17.js +12 -5
  152. package/shared/definition18.cjs +10 -14
  153. package/shared/definition18.js +9 -14
  154. package/shared/definition19.cjs +85 -100
  155. package/shared/definition19.js +75 -91
  156. package/shared/definition2.js +1 -1
  157. package/shared/definition20.cjs +15 -20
  158. package/shared/definition20.js +14 -20
  159. package/shared/definition21.cjs +22 -3
  160. package/shared/definition21.js +23 -4
  161. package/shared/definition22.cjs +12 -6
  162. package/shared/definition22.js +13 -7
  163. package/shared/definition23.cjs +5 -38
  164. package/shared/definition23.js +5 -37
  165. package/shared/definition24.cjs +2 -7
  166. package/shared/definition24.js +3 -8
  167. package/shared/definition25.js +1 -1
  168. package/shared/definition26.cjs +160 -163
  169. package/shared/definition26.js +159 -163
  170. package/shared/definition27.cjs +1 -1
  171. package/shared/definition27.js +2 -2
  172. package/shared/definition28.cjs +32 -17
  173. package/shared/definition28.js +33 -18
  174. package/shared/definition29.js +1 -1
  175. package/shared/definition3.js +1 -1
  176. package/shared/definition30.cjs +96 -482
  177. package/shared/definition30.js +99 -482
  178. package/shared/definition31.cjs +334 -57
  179. package/shared/definition31.js +333 -56
  180. package/shared/definition32.cjs +104 -19
  181. package/shared/definition32.js +105 -20
  182. package/shared/definition33.cjs +67 -15
  183. package/shared/definition33.js +66 -14
  184. package/shared/definition34.cjs +15 -50
  185. package/shared/definition34.js +14 -49
  186. package/shared/definition35.cjs +28 -397
  187. package/shared/definition35.js +27 -397
  188. package/shared/definition36.cjs +404 -54
  189. package/shared/definition36.js +404 -55
  190. package/shared/definition37.cjs +57 -234
  191. package/shared/definition37.js +57 -233
  192. package/shared/definition38.cjs +221 -66
  193. package/shared/definition38.js +220 -65
  194. package/shared/definition39.cjs +52 -44
  195. package/shared/definition39.js +51 -43
  196. package/shared/definition4.cjs +31 -24
  197. package/shared/definition4.js +33 -26
  198. package/shared/definition40.cjs +56 -266
  199. package/shared/definition40.js +55 -265
  200. package/shared/definition41.cjs +285 -142
  201. package/shared/definition41.js +285 -142
  202. package/shared/definition42.cjs +156 -564
  203. package/shared/definition42.js +156 -565
  204. package/shared/definition43.cjs +557 -14317
  205. package/shared/definition43.js +556 -14316
  206. package/shared/definition44.cjs +14418 -1085
  207. package/shared/definition44.js +14416 -1085
  208. package/shared/definition45.cjs +1049 -671
  209. package/shared/definition45.js +1050 -672
  210. package/shared/definition46.cjs +848 -113
  211. package/shared/definition46.js +847 -112
  212. package/shared/definition47.cjs +125 -90
  213. package/shared/definition47.js +124 -89
  214. package/shared/definition48.cjs +88 -455
  215. package/shared/definition48.js +87 -454
  216. package/shared/definition49.cjs +466 -109
  217. package/shared/definition49.js +466 -109
  218. package/shared/definition5.cjs +8 -7
  219. package/shared/definition5.js +6 -5
  220. package/shared/definition50.cjs +106 -106
  221. package/shared/definition50.js +105 -105
  222. package/shared/definition51.cjs +136 -15
  223. package/shared/definition51.js +135 -14
  224. package/shared/definition52.cjs +16 -115
  225. package/shared/definition52.js +15 -114
  226. package/shared/definition53.cjs +78 -490
  227. package/shared/definition53.js +77 -488
  228. package/shared/definition54.cjs +445 -23
  229. package/shared/definition54.js +443 -22
  230. package/shared/definition55.cjs +22 -136
  231. package/shared/definition55.js +21 -135
  232. package/shared/definition56.cjs +95 -291
  233. package/shared/definition56.js +95 -292
  234. package/shared/definition57.cjs +192 -480
  235. package/shared/definition57.js +190 -479
  236. package/shared/definition58.cjs +411 -24
  237. package/shared/definition58.js +410 -24
  238. package/shared/definition59.cjs +27 -144
  239. package/shared/definition59.js +27 -143
  240. package/shared/definition6.js +1 -1
  241. package/shared/definition60.cjs +83 -54
  242. package/shared/definition60.js +82 -53
  243. package/shared/definition61.cjs +78 -166
  244. package/shared/definition61.js +77 -164
  245. package/shared/definition62.cjs +143 -232
  246. package/shared/definition62.js +141 -231
  247. package/shared/definition63.cjs +234 -69417
  248. package/shared/definition63.js +233 -69416
  249. package/shared/definition64.cjs +69454 -28
  250. package/shared/definition64.js +69453 -27
  251. package/shared/definition65.cjs +28 -2168
  252. package/shared/definition65.js +27 -2166
  253. package/shared/definition66.cjs +27 -0
  254. package/shared/definition66.js +23 -0
  255. package/shared/definition67.cjs +2195 -0
  256. package/shared/definition67.js +2190 -0
  257. package/shared/definition7.cjs +11 -2
  258. package/shared/definition7.js +12 -3
  259. package/shared/definition8.cjs +24 -11
  260. package/shared/definition8.js +26 -13
  261. package/shared/definition9.cjs +1 -2
  262. package/shared/definition9.js +2 -3
  263. package/shared/delegates-aria.js +1 -1
  264. package/shared/deprecation/replaced-props.d.ts +20 -0
  265. package/shared/divider.cjs +41 -0
  266. package/shared/divider.js +38 -0
  267. package/shared/feedback/feedback-message.d.ts +345 -0
  268. package/shared/feedback/locale.d.ts +4 -0
  269. package/{lib/text-anchor/text-anchor.d.ts → shared/feedback/mixins.d.ts} +62 -39
  270. package/shared/form-associated.cjs +124 -100
  271. package/shared/form-associated.js +125 -101
  272. package/shared/form-element.cjs +84 -0
  273. package/shared/form-element.js +82 -0
  274. package/shared/foundation/button/button.d.ts +378 -2
  275. package/shared/foundation/form-associated/form-associated.d.ts +753 -49
  276. package/shared/foundation/listbox/listbox.d.ts +1 -1
  277. package/shared/foundation/vivid-element/vivid-element.d.ts +14 -0
  278. package/shared/host-semantics.js +1 -1
  279. package/shared/key-codes.js +1 -1
  280. package/shared/linkable.cjs +70 -0
  281. package/shared/linkable.js +68 -0
  282. package/shared/localization/Locale.d.ts +16 -0
  283. package/shared/mixins.cjs +306 -0
  284. package/shared/mixins.js +300 -0
  285. package/shared/patterns/affix.d.ts +16 -1
  286. package/shared/patterns/anchored.d.ts +20 -8
  287. package/shared/patterns/char-count/char-count.d.ts +351 -0
  288. package/shared/patterns/char-count/index.d.ts +1 -0
  289. package/shared/patterns/char-count/locale.d.ts +4 -0
  290. package/shared/patterns/form-elements/form-element.d.ts +744 -0
  291. package/shared/patterns/form-elements/index.d.ts +3 -1
  292. package/shared/patterns/form-elements/with-error-text.d.ts +1122 -0
  293. package/shared/patterns/form-elements/with-success-text.d.ts +341 -0
  294. package/shared/patterns/index.d.ts +2 -0
  295. package/shared/patterns/linkable.d.ts +394 -0
  296. package/shared/patterns/localized.d.ts +6 -0
  297. package/shared/patterns/trapped-focus.d.ts +6 -0
  298. package/shared/picker-field/mixins/calendar-picker.d.ts +420 -52
  299. package/shared/picker-field/mixins/calendar-picker.template.d.ts +420 -52
  300. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +6 -0
  301. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +843 -107
  302. package/shared/picker-field/mixins/single-date-picker.d.ts +1259 -155
  303. package/shared/picker-field/mixins/single-value-picker.d.ts +417 -49
  304. package/shared/picker-field/mixins/time-selection-picker.d.ts +842 -106
  305. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +839 -103
  306. package/shared/picker-field/picker-field.d.ts +1491 -15
  307. package/shared/picker-field.template.cjs +13 -22
  308. package/shared/picker-field.template.js +14 -23
  309. package/shared/repeat.js +1 -1
  310. package/shared/slider.template.cjs +1 -1
  311. package/shared/slider.template.js +1 -1
  312. package/shared/time-selection-picker.template.cjs +10 -15
  313. package/shared/time-selection-picker.template.js +10 -16
  314. package/shared/vivid-element.cjs +53 -4
  315. package/shared/vivid-element.js +53 -3
  316. package/shared/with-error-text.cjs +56 -0
  317. package/shared/with-error-text.js +54 -0
  318. package/shared/with-success-text.cjs +23 -0
  319. package/shared/with-success-text.js +21 -0
  320. package/side-drawer/index.cjs +1 -1
  321. package/side-drawer/index.js +1 -1
  322. package/slider/index.cjs +1 -1
  323. package/slider/index.js +1 -1
  324. package/split-button/index.cjs +1 -1
  325. package/split-button/index.js +1 -1
  326. package/styles/core/all.css +1 -1
  327. package/styles/core/theme.css +1 -1
  328. package/styles/core/typography.css +1 -1
  329. package/styles/tokens/theme-dark.css +4 -4
  330. package/styles/tokens/theme-light.css +4 -4
  331. package/styles/tokens/vivid-2-compat.css +1 -1
  332. package/switch/index.cjs +1 -1
  333. package/switch/index.js +1 -1
  334. package/tab/index.cjs +1 -1
  335. package/tab/index.js +1 -1
  336. package/tab-panel/index.cjs +1 -1
  337. package/tab-panel/index.js +1 -1
  338. package/tabs/index.cjs +1 -1
  339. package/tabs/index.js +1 -1
  340. package/tag/index.cjs +1 -1
  341. package/tag/index.js +1 -1
  342. package/tag-group/index.cjs +1 -1
  343. package/tag-group/index.js +1 -1
  344. package/text-area/index.cjs +1 -1
  345. package/text-area/index.js +1 -1
  346. package/text-field/index.cjs +1 -1
  347. package/text-field/index.js +1 -1
  348. package/time-picker/index.cjs +1 -1
  349. package/time-picker/index.js +1 -1
  350. package/toggletip/index.cjs +1 -1
  351. package/toggletip/index.js +1 -1
  352. package/tooltip/index.cjs +1 -1
  353. package/tooltip/index.js +1 -1
  354. package/tree-item/index.cjs +1 -1
  355. package/tree-item/index.js +1 -1
  356. package/tree-view/index.cjs +1 -1
  357. package/tree-view/index.js +1 -1
  358. package/video-player/index.cjs +1 -1
  359. package/video-player/index.js +1 -1
  360. package/visually-hidden/index.cjs +5 -0
  361. package/visually-hidden/index.js +3 -0
  362. package/vivid.api.json +762 -1478
  363. package/lib/checkbox/checkbox.form-associated.d.ts +0 -11
  364. package/lib/file-picker/file-picker.form-associated.d.ts +0 -11
  365. package/lib/number-field/number-field.form-associated.d.ts +0 -11
  366. package/lib/radio/radio.form-associated.d.ts +0 -13
  367. package/lib/range-slider/range-slider.form-associated.d.ts +0 -11
  368. package/lib/searchable-select/searchable-select.form-associated.d.ts +0 -11
  369. package/lib/select/select.form-associated.d.ts +0 -11
  370. package/lib/slider/slider.form-associated.d.ts +0 -11
  371. package/lib/switch/switch.form-associated.d.ts +0 -11
  372. package/lib/text-anchor/definition.d.ts +0 -2
  373. package/lib/text-anchor/text-anchor.template.d.ts +0 -3
  374. package/lib/text-area/text-area.form-associated.d.ts +0 -11
  375. package/lib/text-field/text-field.form-associated.d.ts +0 -11
  376. package/shared/anchor.cjs +0 -49
  377. package/shared/anchor.js +0 -47
  378. package/shared/apply-mixins.cjs +0 -23
  379. package/shared/apply-mixins.js +0 -21
  380. package/shared/applyMixinsWithObservables.cjs +0 -15
  381. package/shared/applyMixinsWithObservables.js +0 -13
  382. package/shared/direction.cjs +0 -17
  383. package/shared/direction.js +0 -15
  384. package/shared/form-elements.cjs +0 -209
  385. package/shared/form-elements.js +0 -202
  386. package/shared/foundation/anchor/anchor.d.ts +0 -11
  387. package/shared/foundation/utilities/apply-mixins.d.ts +0 -1
  388. package/shared/patterns/form-elements/form-elements.d.ts +0 -58
  389. package/shared/picker-field/picker-field.form-associated.d.ts +0 -11
  390. package/shared/text-anchor.cjs +0 -38
  391. package/shared/text-anchor.js +0 -36
  392. package/shared/text-anchor.template.cjs +0 -35
  393. package/shared/text-anchor.template.js +0 -33
  394. package/shared/utils/applyMixinsWithObservables.d.ts +0 -1
  395. package/text-anchor/index.cjs +0 -17
  396. package/text-anchor/index.js +0 -15
package/shared/definition11.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import { I as Icon, i as iconDefinition } from './definition28.js';
2
- import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
3
- import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
4
- import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
2
+ import { P as ProgressRing, p as progressRingDefinition } from './definition39.js';
3
+ import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
5
4
  import { V as VividFoundationButton } from './button.js';
5
+ import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
6
+ import { L as Localized } from './localized.js';
7
+ import { L as Linkable } from './linkable.js';
6
8
  import { b as Size } from './enums.js';
7
9
  import { d as delegateAria } from './delegates-aria.js';
8
10
  import { w as when } from './when.js';
@@ -18,7 +20,9 @@ var __decorateClass = (decorators, target, key, kind) => {
18
20
  if (result) __defProp(target, key, result);
19
21
  return result;
20
22
  };
21
- class Button extends AffixIconWithTrailing(VividFoundationButton) {
23
+ class Button extends AffixIconWithTrailing(
24
+ Localized(Linkable(VividFoundationButton))
25
+ ) {
22
26
  constructor() {
23
27
  super();
24
28
  this.stacked = false;
@@ -75,29 +79,8 @@ __decorateClass([
75
79
  __decorateClass([
76
80
  attr
77
81
  ], Button.prototype, "label");
78
- __decorateClass([
79
- attr
80
- ], Button.prototype, "href");
81
- __decorateClass([
82
- attr
83
- ], Button.prototype, "download");
84
- __decorateClass([
85
- attr
86
- ], Button.prototype, "hreflang");
87
- __decorateClass([
88
- attr
89
- ], Button.prototype, "ping");
90
- __decorateClass([
91
- attr
92
- ], Button.prototype, "referrerpolicy");
93
- __decorateClass([
94
- attr
95
- ], Button.prototype, "rel");
96
- __decorateClass([
97
- attr
98
- ], Button.prototype, "target");
99
82
 
100
- const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-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)}.control:where(.hover,: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:where(.hover,: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:where(.hover,: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:where(.hover,: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:where(.hover,: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:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,: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:where(.active,: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:where(.active,: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:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,: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:where(.active,: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;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;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);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control:not(:disabled){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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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{position:relative;outline:none}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,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));position:absolute;display:block;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));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(--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]{display:flex;order:1}.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{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.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}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
83
+ const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.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)}.control:where(.hover,: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:where(.hover,: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:where(.hover,: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:where(.hover,: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:where(.hover,: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:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,: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:where(.active,: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:where(.active,: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:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,: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:where(.active,: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;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;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);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%;text-align:start}.control:not(.icon-only){inline-size:100%}.control:not(:disabled){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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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{position:relative;outline:none}.control.appearance-filled:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,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));position:absolute;display:block;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));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(--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]{display:flex;order:1}.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{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.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{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
101
84
 
102
85
  const chevronTemplateFactory = (context) => {
103
86
  const iconTag = context.tagFor(Icon);
@@ -148,7 +131,14 @@ function renderIconOrPending(context, icon, pending, size = Size.Normal) {
148
131
  [Size.Normal]: "-5",
149
132
  [Size.Expanded]: "-4"
150
133
  };
151
- return html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
134
+ const getClassName = (x) => {
135
+ const slottedIconElement = x.querySelector('[slot="icon"]');
136
+ return classNames("icon", "pending", [
137
+ "pending-no-icon",
138
+ !(icon || slottedIconElement)
139
+ ]);
140
+ };
141
+ return html`<span class="${getClassName}" aria-hidden="true"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
152
142
  } else {
153
143
  const affixIconTemplate = affixIconTemplateFactory(context);
154
144
  return affixIconTemplate(icon, IconWrapper.Slot);
@@ -165,8 +155,11 @@ const buttonContent = (context) => {
165
155
  ${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
166
156
  ${when(
167
157
  (x) => x.label,
168
- html`<span class="text" role="presentation">${(x) => x.label}</span>`
158
+ html`<span class="text" aria-hidden="true">${(x) => x.label}</span>`
169
159
  )}
160
+ <span class="sr-only"
161
+ >${(x) => x.pending ? x.locale.button.pendingLabel : x.label ?? x.ariaLabel}</span
162
+ >
170
163
  </span>
171
164
  ${when((x) => x.dropdownIndicator, chevronTemplate)}`;
172
165
  };
@@ -185,33 +178,23 @@ function renderButtonContent(context) {
185
178
  type="${(x) => getButtonType(x.type)}"
186
179
  value="${(x) => x.value}"
187
180
  title="${(x) => x.title}"
188
- ${delegateAria()}
181
+ ${delegateAria({
182
+ ariaLabel: null
183
+ })}
189
184
  ${ref("control")}
190
185
  >
191
186
  ${buttonContent(context)}
192
187
  </button>`;
193
188
  }
194
189
  function renderAnchorContent(context) {
195
- return html`<a
196
- class="${getClasses}"
197
- download="${(x) => x.download}"
198
- href="${(x) => x.href}"
199
- hreflang="${(x) => x.hreflang}"
200
- ping="${(x) => x.ping}"
201
- referrerpolicy="${(x) => x.referrerpolicy}"
202
- rel="${(x) => x.rel}"
203
- target="${(x) => x.target}"
204
- type="${(x) => x.type}"
205
- ${delegateAria()}
206
- ${ref("control")}
207
- >
208
- ${buttonContent(context)}
209
- </a>`;
190
+ return html`${(x) => x._renderLinkElement(buttonContent(context), getClasses, {
191
+ ariaLabel: null
192
+ })}`;
210
193
  }
211
194
  const buttonTemplate = (context) => {
212
195
  return html` <template>
213
196
  ${when((x) => !x.href, html`${renderButtonContent(context)}`)}
214
- ${when((x) => x.href, html`${renderAnchorContent(context)}`)}
197
+ ${when((x) => x.href, renderAnchorContent(context))}
215
198
  </template>`;
216
199
  };
217
200
 
package/shared/definition12.cjs CHANGED
@@ -6,7 +6,7 @@ const delegatesAria = require('./delegates-aria.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
  const when = require('./when.cjs');
8
8
 
9
- const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
9
+ const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
10
10
 
11
11
  const getClasses = ({ connotation, appearance }) => classNames.classNames(
12
12
  "base",
package/shared/definition12.js CHANGED
@@ -1,10 +1,10 @@
1
- import { h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
1
+ import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
2
2
  import { C as CalendarEvent } from './calendar-event.js';
3
3
  import { d as delegateAria } from './delegates-aria.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
  import { w as when } from './when.js';
6
6
 
7
- const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{z-index:2000;filter:var(--vvd-shadow-surface-8dp);outline:none}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
7
+ const styles = ":host{display:contents}.base.connotation-accent{--_connotation-color-primary: var(--vvd-calendar-event-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-calendar-event-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-calendar-event-accent-soft, var(--vvd-color-neutral-100))}.base.connotation-cta{--_connotation-color-primary: var(--vvd-calendar-event-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-calendar-event-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-calendar-event-cta-soft, var(--vvd-color-cta-100))}.base.connotation-success{--_connotation-color-primary: var(--vvd-calendar-event-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-calendar-event-success-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-success-contrast, var(--vvd-color-success-800));--_connotation-color-soft: var(--vvd-calendar-event-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-calendar-event-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-calendar-event-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-soft: var(--vvd-calendar-event-alert-soft, var(--vvd-color-alert-100))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-calendar-event-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-calendar-event-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-contrast: var(--vvd-calendar-event-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-soft: var(--vvd-calendar-event-warning-soft, var(--vvd-color-warning-100))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-calendar-event-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-calendar-event-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-soft: var(--vvd-calendar-event-announcement-soft, var(--vvd-color-announcement-100))}.base:not(.connotation-accent,.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-calendar-event-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-calendar-event-information-primary-text, var(--vvd-color-canvas));--_connotation-color-contrast: var(--vvd-calendar-event-information-contrast, var(--vvd-color-information-800));--_connotation-color-soft: var(--vvd-calendar-event-information-soft, var(--vvd-color-information-100))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{--vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);--focus-stroke-gap-color: transparent;position:absolute;z-index:var(--vvd-calendar-event--overlap-count);top:calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));overflow:hidden;box-sizing:border-box;padding:4px 8px;border-radius:8px;background-color:var(--_appearance-color-fill);block-size:calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(100% - 8px - min(var(--vvd-calendar-event--indent),32px));margin-block-start:2px;margin-inline:min(var(--vvd-calendar-event--indent),32px) 8px;max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}@supports (contain: content){.base{contain:strict}}@supports not (contain: content){.base{overflow:hidden}}.base:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));z-index:2000}:host([overlap-count]) .base{--focus-stroke-gap-color: var(--vvd-color-canvas)}:host([overlap-count]) .base:not(:focus){box-shadow:inset 0 0 0 1px var(--vvd-color-canvas)}h2{margin:0;font:var(--vvd-typography-base-condensed-bold)}h2>strong{font:inherit}p{margin:0;font:var(--vvd-typography-base-condensed)}";
8
8
 
9
9
  const getClasses = ({ connotation, appearance }) => classNames(
10
10
  "base",
package/shared/definition13.js CHANGED
@@ -1,4 +1,4 @@
1
- import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
1
+ import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
2
2
  import { d as Sticky } from './enums.js';
3
3
  import { C as CalendarEvent } from './calendar-event.js';
4
4
  import { b as _has, _ as _curry1, a as _curry2 } from './_has.js';
package/shared/definition14.cjs CHANGED
@@ -1,14 +1,16 @@
1
1
  'use strict';
2
2
 
3
3
  const definition$1 = require('./definition28.cjs');
4
- const definition = require('./definition64.cjs');
4
+ const definition = require('./definition65.cjs');
5
5
  const vividElement = require('./vivid-element.cjs');
6
+ const linkable = require('./linkable.cjs');
6
7
  const enums = require('./enums.cjs');
8
+ const delegatesAria = require('./delegates-aria.cjs');
7
9
  const when = require('./when.cjs');
8
- const classNames = require('./class-names.cjs');
9
10
  const slotted = require('./slotted.cjs');
11
+ const classNames = require('./class-names.cjs');
10
12
 
11
- const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
13
+ const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.wrapper:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
12
14
 
13
15
  var __defProp = Object.defineProperty;
14
16
  var __decorateClass = (decorators, target, key, kind) => {
@@ -19,7 +21,11 @@ var __decorateClass = (decorators, target, key, kind) => {
19
21
  if (result) __defProp(target, key, result);
20
22
  return result;
21
23
  };
22
- class Card extends vividElement.VividElement {
24
+ class Card extends linkable.Linkable(vividElement.VividElement) {
25
+ constructor() {
26
+ super(...arguments);
27
+ this.clickableCard = false;
28
+ }
23
29
  }
24
30
  __decorateClass([
25
31
  vividElement.attr
@@ -39,6 +45,12 @@ __decorateClass([
39
45
  __decorateClass([
40
46
  vividElement.attr
41
47
  ], Card.prototype, "elevation");
48
+ __decorateClass([
49
+ vividElement.attr({
50
+ mode: "boolean",
51
+ attribute: "clickable-card"
52
+ })
53
+ ], Card.prototype, "clickableCard");
42
54
  __decorateClass([
43
55
  vividElement.observable
44
56
  ], Card.prototype, "footerSlottedContent");
@@ -73,12 +85,12 @@ function headerContent() {
73
85
  `;
74
86
  }
75
87
  function renderHeader(iconTag) {
76
- return vividElement.html` <header class="header">
88
+ return vividElement.html` <div class="header">
77
89
  <slot name="graphic" ${slotted.slotted("graphicSlottedContent")}
78
90
  >${when.when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
79
91
  >
80
92
  ${when.when((x) => x.headline || x.subtitle, headerContent())}
81
- </header>`;
93
+ </div>`;
82
94
  }
83
95
  function shouldHideHeader(card) {
84
96
  return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
@@ -89,27 +101,46 @@ function renderMetaSlot() {
89
101
  function text() {
90
102
  return vividElement.html` <div class="text">${(x) => x.text}</div> `;
91
103
  }
104
+ function renderButtonElement(content) {
105
+ return vividElement.html`<button
106
+ class="${getClasses}"
107
+ type="button"
108
+ ${delegatesAria.delegateAria()}
109
+ >
110
+ ${content}
111
+ </button>`;
112
+ }
113
+ function renderCardBaseElement(x, content) {
114
+ if (x.href) {
115
+ return x._renderLinkElement(content, getClasses);
116
+ } else if (x.clickableCard) {
117
+ return renderButtonElement(content);
118
+ } else {
119
+ return vividElement.html`<div class="${getClasses}">${content}</div>`;
120
+ }
121
+ }
92
122
  function renderCardContent(context) {
93
123
  const iconTag = context.tagFor(definition$1.Icon);
94
124
  return vividElement.html`
95
- <div class="${getClasses}">
96
- <div class="wrapper">
97
- <div class="vwc-card-media">
98
- <slot name="media"></slot>
99
- </div>
100
- <slot name="main">
101
- <div class="main-content">
102
- <div class="header-wrapper">
103
- ${renderHeader(iconTag)} ${renderMetaSlot()}
125
+ ${(x) => renderCardBaseElement(
126
+ x,
127
+ vividElement.html`<div class="wrapper">
128
+ <div class="vwc-card-media">
129
+ <slot name="media"></slot>
130
+ </div>
131
+ <slot name="main">
132
+ <div class="main-content">
133
+ <div class="header-wrapper">
134
+ ${renderHeader(iconTag)} ${renderMetaSlot()}
135
+ </div>
136
+ ${when.when((x2) => x2.text, text())}
104
137
  </div>
105
- ${when.when((x) => x.text, text())}
138
+ </slot>
139
+ <div class="footer">
140
+ <slot name="footer" ${slotted.slotted("footerSlottedContent")}></slot>
106
141
  </div>
107
- </slot>
108
- <div class="footer">
109
- <slot name="footer" ${slotted.slotted("footerSlottedContent")}></slot>
110
- </div>
111
- </div>
112
- </div>
142
+ </div> `
143
+ )}
113
144
  `;
114
145
  }
115
146
  const CardTemplate = (context) => {
package/shared/definition14.js CHANGED
@@ -1,12 +1,14 @@
1
1
  import { I as Icon, i as iconDefinition } from './definition28.js';
2
- import { E as Elevation, e as elevationDefinition } from './definition64.js';
3
- import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
2
+ import { E as Elevation, e as elevationDefinition } from './definition65.js';
3
+ import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
4
+ import { L as Linkable } from './linkable.js';
4
5
  import { A as Appearance } from './enums.js';
6
+ import { d as delegateAria } from './delegates-aria.js';
5
7
  import { w as when } from './when.js';
6
- import { c as classNames } from './class-names.js';
7
8
  import { s as slotted } from './slotted.js';
9
+ import { c as classNames } from './class-names.js';
8
10
 
9
- const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
11
+ const styles = ":host{display:flex}.base{border-radius:8px;inline-size:100%;text-align:start}.base{padding:0;border:0 none;outline:none;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}.wrapper{display:flex;overflow:hidden;flex-flow:column;border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text)}.wrapper{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.wrapper:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.wrapper:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.wrapper{--_connotation-color-primary: var(--vvd-card-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-card-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-card-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-card-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-card-cta-soft, var(--vvd-color-cta-100))}.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}.main-content{display:flex;flex-flow:column;padding:24px}.header{display:flex;flex:1;align-items:flex-start;gap:8px}.header-content{flex:1}.header-wrapper{display:flex;gap:8px}.header-headline,.header-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{padding-right:8px;margin-top:12px}.footer{display:inline-flex;flex-direction:column;align-items:flex-end;padding-bottom:24px;margin-top:auto;padding-inline:24px}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
10
12
 
11
13
  var __defProp = Object.defineProperty;
12
14
  var __decorateClass = (decorators, target, key, kind) => {
@@ -17,7 +19,11 @@ var __decorateClass = (decorators, target, key, kind) => {
17
19
  if (result) __defProp(target, key, result);
18
20
  return result;
19
21
  };
20
- class Card extends VividElement {
22
+ class Card extends Linkable(VividElement) {
23
+ constructor() {
24
+ super(...arguments);
25
+ this.clickableCard = false;
26
+ }
21
27
  }
22
28
  __decorateClass([
23
29
  attr
@@ -37,6 +43,12 @@ __decorateClass([
37
43
  __decorateClass([
38
44
  attr
39
45
  ], Card.prototype, "elevation");
46
+ __decorateClass([
47
+ attr({
48
+ mode: "boolean",
49
+ attribute: "clickable-card"
50
+ })
51
+ ], Card.prototype, "clickableCard");
40
52
  __decorateClass([
41
53
  observable
42
54
  ], Card.prototype, "footerSlottedContent");
@@ -71,12 +83,12 @@ function headerContent() {
71
83
  `;
72
84
  }
73
85
  function renderHeader(iconTag) {
74
- return html` <header class="header">
86
+ return html` <div class="header">
75
87
  <slot name="graphic" ${slotted("graphicSlottedContent")}
76
88
  >${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
77
89
  >
78
90
  ${when((x) => x.headline || x.subtitle, headerContent())}
79
- </header>`;
91
+ </div>`;
80
92
  }
81
93
  function shouldHideHeader(card) {
82
94
  return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
@@ -87,27 +99,46 @@ function renderMetaSlot() {
87
99
  function text() {
88
100
  return html` <div class="text">${(x) => x.text}</div> `;
89
101
  }
102
+ function renderButtonElement(content) {
103
+ return html`<button
104
+ class="${getClasses}"
105
+ type="button"
106
+ ${delegateAria()}
107
+ >
108
+ ${content}
109
+ </button>`;
110
+ }
111
+ function renderCardBaseElement(x, content) {
112
+ if (x.href) {
113
+ return x._renderLinkElement(content, getClasses);
114
+ } else if (x.clickableCard) {
115
+ return renderButtonElement(content);
116
+ } else {
117
+ return html`<div class="${getClasses}">${content}</div>`;
118
+ }
119
+ }
90
120
  function renderCardContent(context) {
91
121
  const iconTag = context.tagFor(Icon);
92
122
  return html`
93
- <div class="${getClasses}">
94
- <div class="wrapper">
95
- <div class="vwc-card-media">
96
- <slot name="media"></slot>
97
- </div>
98
- <slot name="main">
99
- <div class="main-content">
100
- <div class="header-wrapper">
101
- ${renderHeader(iconTag)} ${renderMetaSlot()}
123
+ ${(x) => renderCardBaseElement(
124
+ x,
125
+ html`<div class="wrapper">
126
+ <div class="vwc-card-media">
127
+ <slot name="media"></slot>
128
+ </div>
129
+ <slot name="main">
130
+ <div class="main-content">
131
+ <div class="header-wrapper">
132
+ ${renderHeader(iconTag)} ${renderMetaSlot()}
133
+ </div>
134
+ ${when((x2) => x2.text, text())}
102
135
  </div>
103
- ${when((x) => x.text, text())}
136
+ </slot>
137
+ <div class="footer">
138
+ <slot name="footer" ${slotted("footerSlottedContent")}></slot>
104
139
  </div>
105
- </slot>
106
- <div class="footer">
107
- <slot name="footer" ${slotted("footerSlottedContent")}></slot>
108
- </div>
109
- </div>
110
- </div>
140
+ </div> `
141
+ )}
111
142
  `;
112
143
  }
113
144
  const CardTemplate = (context) => {