@vonage/vivid 3.51.0 → 3.53.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 (340) hide show
  1. package/README.md +1 -1
  2. package/accordion/index.cjs +1 -1
  3. package/accordion/index.js +1 -1
  4. package/accordion-item/index.cjs +1 -1
  5. package/accordion-item/index.js +1 -1
  6. package/alert/index.cjs +3 -3
  7. package/alert/index.js +3 -3
  8. package/appearance-ui/index.cjs +19 -11
  9. package/appearance-ui/index.js +19 -11
  10. package/audio-player/index.cjs +4 -3
  11. package/audio-player/index.js +4 -3
  12. package/avatar/index.cjs +1 -1
  13. package/avatar/index.js +1 -1
  14. package/badge/index.cjs +1 -1
  15. package/badge/index.js +1 -1
  16. package/banner/index.cjs +2 -2
  17. package/banner/index.js +2 -2
  18. package/breadcrumb-item/index.cjs +1 -1
  19. package/breadcrumb-item/index.js +1 -1
  20. package/button/index.cjs +2 -2
  21. package/button/index.js +2 -2
  22. package/card/index.cjs +2 -2
  23. package/card/index.js +2 -2
  24. package/checkbox/index.cjs +3 -2
  25. package/checkbox/index.js +3 -2
  26. package/combobox/index.cjs +5 -8
  27. package/combobox/index.js +5 -8
  28. package/custom-elements.json +2310 -769
  29. package/data-grid/index.cjs +1 -1
  30. package/data-grid/index.js +1 -1
  31. package/date-picker/index.cjs +7 -9
  32. package/date-picker/index.js +7 -9
  33. package/date-range-picker/index.cjs +7 -9
  34. package/date-range-picker/index.js +7 -9
  35. package/dial-pad/index.cjs +33 -0
  36. package/dial-pad/index.js +31 -0
  37. package/dialog/index.cjs +4 -4
  38. package/dialog/index.js +4 -4
  39. package/divider/index.cjs +1 -1
  40. package/divider/index.js +1 -1
  41. package/elevation/index.cjs +1 -1
  42. package/elevation/index.js +1 -1
  43. package/empty-state/index.cjs +2 -2
  44. package/empty-state/index.js +2 -2
  45. package/fab/index.cjs +2 -2
  46. package/fab/index.js +2 -2
  47. package/file-picker/index.cjs +4 -5
  48. package/file-picker/index.js +4 -5
  49. package/header/index.cjs +2 -2
  50. package/header/index.js +2 -2
  51. package/icon/index.cjs +1 -1
  52. package/icon/index.js +1 -1
  53. package/index.cjs +135 -123
  54. package/index.js +48 -46
  55. package/layout/index.cjs +1 -1
  56. package/layout/index.js +1 -1
  57. package/lib/avatar/definition.d.ts +1 -1
  58. package/lib/button/button.d.ts +1 -0
  59. package/lib/button/definition.d.ts +1 -1
  60. package/lib/calendar-event/definition.d.ts +1 -1
  61. package/lib/components.d.ts +3 -0
  62. package/lib/dial-pad/definition.d.ts +3 -0
  63. package/lib/dial-pad/dial-pad.d.ts +14 -0
  64. package/lib/dial-pad/dial-pad.template.d.ts +4 -0
  65. package/lib/dial-pad/locale.d.ts +18 -0
  66. package/lib/enums.d.ts +6 -0
  67. package/lib/layout/definition.d.ts +1 -1
  68. package/lib/menu-item/menu-item.d.ts +3 -0
  69. package/lib/range-slider/definition.d.ts +3 -0
  70. package/lib/range-slider/locale.d.ts +4 -0
  71. package/lib/range-slider/range-slider.d.ts +32 -0
  72. package/lib/range-slider/range-slider.form-associated.d.ts +10 -0
  73. package/lib/range-slider/range-slider.template.d.ts +4 -0
  74. package/lib/range-slider/utils/lerp.d.ts +2 -0
  75. package/lib/range-slider/utils/roundToStepValue.d.ts +1 -0
  76. package/lib/slider/slider.template.d.ts +1 -0
  77. package/lib/split-button/definition.d.ts +1 -1
  78. package/lib/text-anchor/definition.d.ts +1 -0
  79. package/lib/text-anchor/text-anchor.d.ts +5 -0
  80. package/lib/video-player/definition.d.ts +3 -0
  81. package/lib/video-player/locale.d.ts +1 -0
  82. package/lib/video-player/video-player.d.ts +17 -0
  83. package/lib/video-player/video-player.template.d.ts +4 -0
  84. package/listbox/index.cjs +25 -24
  85. package/listbox/index.js +25 -24
  86. package/locales/en-GB.cjs +34 -0
  87. package/locales/en-GB.js +34 -0
  88. package/locales/en-US.cjs +202 -0
  89. package/locales/en-US.js +202 -0
  90. package/locales/ja-JP.cjs +202 -1
  91. package/locales/ja-JP.js +202 -1
  92. package/locales/zh-CN.cjs +203 -0
  93. package/locales/zh-CN.js +203 -0
  94. package/menu/index.cjs +7 -7
  95. package/menu/index.js +7 -7
  96. package/menu-item/index.cjs +4 -4
  97. package/menu-item/index.js +4 -4
  98. package/nav/index.cjs +1 -1
  99. package/nav/index.js +1 -1
  100. package/nav-disclosure/index.cjs +2 -2
  101. package/nav-disclosure/index.js +2 -2
  102. package/nav-item/index.cjs +2 -2
  103. package/nav-item/index.js +2 -2
  104. package/note/index.cjs +2 -2
  105. package/note/index.js +2 -2
  106. package/number-field/index.cjs +5 -6
  107. package/number-field/index.js +5 -6
  108. package/option/index.cjs +2 -2
  109. package/option/index.js +2 -2
  110. package/package.json +34 -34
  111. package/pagination/index.cjs +3 -3
  112. package/pagination/index.js +3 -3
  113. package/popup/index.cjs +4 -4
  114. package/popup/index.js +4 -4
  115. package/progress/index.cjs +1 -1
  116. package/progress/index.js +1 -1
  117. package/progress-ring/index.cjs +1 -1
  118. package/progress-ring/index.js +1 -1
  119. package/radio/index.cjs +1 -1
  120. package/radio/index.js +1 -1
  121. package/radio-group/index.cjs +1 -1
  122. package/radio-group/index.js +1 -1
  123. package/range-slider/index.cjs +22 -0
  124. package/range-slider/index.js +20 -0
  125. package/select/index.cjs +7 -6
  126. package/select/index.js +7 -6
  127. package/selectable-box/index.cjs +5 -4
  128. package/selectable-box/index.js +5 -4
  129. package/shared/Reflector.cjs +5 -1
  130. package/shared/Reflector.js +5 -1
  131. package/shared/affix.cjs +11 -4
  132. package/shared/affix.js +12 -4
  133. package/shared/anchored.cjs +8 -2
  134. package/shared/anchored.js +8 -2
  135. package/shared/applyMixinsWithObservables.cjs +15 -0
  136. package/shared/applyMixinsWithObservables.js +13 -0
  137. package/shared/definition.cjs +9 -4
  138. package/shared/definition.js +9 -4
  139. package/shared/definition10.cjs +5 -5
  140. package/shared/definition10.js +5 -5
  141. package/shared/definition11.cjs +77 -49
  142. package/shared/definition11.js +78 -50
  143. package/shared/definition12.cjs +12 -14
  144. package/shared/definition12.js +12 -14
  145. package/shared/definition13.cjs +118 -75
  146. package/shared/definition13.js +118 -75
  147. package/shared/definition14.cjs +34 -33
  148. package/shared/definition14.js +34 -33
  149. package/shared/definition15.cjs +24 -12
  150. package/shared/definition15.js +24 -12
  151. package/shared/definition16.cjs +38 -43
  152. package/shared/definition16.js +38 -43
  153. package/shared/definition17.cjs +126 -66
  154. package/shared/definition17.js +127 -67
  155. package/shared/definition18.cjs +31 -15
  156. package/shared/definition18.js +31 -15
  157. package/shared/definition19.cjs +117 -81
  158. package/shared/definition19.js +117 -81
  159. package/shared/definition2.cjs +10 -5
  160. package/shared/definition2.js +10 -5
  161. package/shared/definition20.cjs +187 -227
  162. package/shared/definition20.js +183 -223
  163. package/shared/definition21.cjs +262 -69
  164. package/shared/definition21.js +261 -67
  165. package/shared/definition22.cjs +66 -61
  166. package/shared/definition22.js +64 -60
  167. package/shared/definition23.cjs +42 -77
  168. package/shared/definition23.js +41 -76
  169. package/shared/definition24.cjs +65 -2350
  170. package/shared/definition24.js +64 -2349
  171. package/shared/definition25.cjs +2402 -48
  172. package/shared/definition25.js +2401 -47
  173. package/shared/definition26.cjs +62 -28
  174. package/shared/definition26.js +61 -27
  175. package/shared/definition27.cjs +28 -54
  176. package/shared/definition27.js +27 -53
  177. package/shared/definition28.cjs +39 -819
  178. package/shared/definition28.js +38 -817
  179. package/shared/definition29.cjs +893 -54
  180. package/shared/definition29.js +893 -55
  181. package/shared/definition3.cjs +7 -10
  182. package/shared/definition3.js +7 -10
  183. package/shared/definition30.cjs +69 -85
  184. package/shared/definition30.js +68 -84
  185. package/shared/definition31.cjs +86 -23
  186. package/shared/definition31.js +86 -23
  187. package/shared/definition32.cjs +24 -14
  188. package/shared/definition32.js +23 -13
  189. package/shared/definition33.cjs +11 -53
  190. package/shared/definition33.js +10 -52
  191. package/shared/definition34.cjs +28 -500
  192. package/shared/definition34.js +28 -500
  193. package/shared/definition35.cjs +447 -194
  194. package/shared/definition35.js +447 -192
  195. package/shared/definition36.cjs +258 -188
  196. package/shared/definition36.js +255 -187
  197. package/shared/definition37.cjs +204 -78
  198. package/shared/definition37.js +203 -76
  199. package/shared/definition38.cjs +55 -51
  200. package/shared/definition38.js +52 -49
  201. package/shared/definition39.cjs +65 -423
  202. package/shared/definition39.js +64 -422
  203. package/shared/definition4.cjs +24 -12
  204. package/shared/definition4.js +24 -12
  205. package/shared/definition40.cjs +447 -35
  206. package/shared/definition40.js +444 -32
  207. package/shared/definition41.cjs +35 -678
  208. package/shared/definition41.js +34 -677
  209. package/shared/definition42.cjs +544 -99
  210. package/shared/definition42.js +543 -98
  211. package/shared/definition43.cjs +696 -77
  212. package/shared/definition43.js +695 -76
  213. package/shared/definition44.cjs +113 -563
  214. package/shared/definition44.js +112 -561
  215. package/shared/definition45.cjs +77 -117
  216. package/shared/definition45.js +75 -115
  217. package/shared/definition46.cjs +474 -86
  218. package/shared/definition46.js +474 -87
  219. package/shared/definition47.cjs +140 -23
  220. package/shared/definition47.js +139 -22
  221. package/shared/definition48.cjs +132 -57
  222. package/shared/definition48.js +131 -56
  223. package/shared/definition49.cjs +18 -524
  224. package/shared/definition49.js +17 -523
  225. package/shared/definition5.cjs +20 -17
  226. package/shared/definition5.js +20 -17
  227. package/shared/definition50.cjs +73 -25
  228. package/shared/definition50.js +72 -24
  229. package/shared/definition51.cjs +506 -99
  230. package/shared/definition51.js +505 -99
  231. package/shared/definition52.cjs +29 -277
  232. package/shared/definition52.js +28 -276
  233. package/shared/definition53.cjs +97 -256
  234. package/shared/definition53.js +97 -255
  235. package/shared/definition54.cjs +287 -769
  236. package/shared/definition54.js +287 -769
  237. package/shared/definition55.cjs +305 -105
  238. package/shared/definition55.js +304 -104
  239. package/shared/definition56.cjs +841 -81
  240. package/shared/definition56.js +840 -80
  241. package/shared/definition57.cjs +153 -69
  242. package/shared/definition57.js +152 -68
  243. package/shared/definition58.cjs +138 -299
  244. package/shared/definition58.js +137 -298
  245. package/shared/definition59.cjs +72 -27
  246. package/shared/definition59.js +71 -26
  247. package/shared/definition6.cjs +4 -5
  248. package/shared/definition6.js +4 -5
  249. package/shared/definition60.cjs +279 -1780
  250. package/shared/definition60.js +278 -1779
  251. package/shared/definition61.cjs +65870 -11
  252. package/shared/definition61.js +65869 -11
  253. package/shared/definition62.cjs +50 -0
  254. package/shared/definition62.js +46 -0
  255. package/shared/definition63.cjs +1828 -0
  256. package/shared/definition63.js +1824 -0
  257. package/shared/definition7.cjs +8 -6
  258. package/shared/definition7.js +8 -6
  259. package/shared/definition8.cjs +27 -20
  260. package/shared/definition8.js +27 -20
  261. package/shared/definition9.cjs +7 -10
  262. package/shared/definition9.js +7 -10
  263. package/shared/enums.cjs +8 -0
  264. package/shared/enums.js +8 -1
  265. package/shared/icon.cjs +7 -2
  266. package/shared/icon.js +7 -2
  267. package/shared/index2.cjs +67 -38
  268. package/shared/index2.js +67 -38
  269. package/shared/key-codes2.cjs +8 -0
  270. package/shared/key-codes2.js +5 -1
  271. package/shared/listbox.cjs +1 -1
  272. package/shared/listbox.js +1 -1
  273. package/shared/localization/Locale.d.ts +6 -0
  274. package/shared/patterns/form-elements/form-elements.d.ts +2 -3
  275. package/shared/patterns/index.d.ts +0 -1
  276. package/shared/presentationDate.cjs +140 -81
  277. package/shared/presentationDate.js +140 -81
  278. package/shared/slider.template.cjs +71 -0
  279. package/shared/slider.template.js +67 -0
  280. package/shared/text-anchor.cjs +6 -0
  281. package/shared/text-anchor.js +6 -0
  282. package/shared/text-anchor.template.cjs +33 -33
  283. package/shared/text-anchor.template.js +33 -33
  284. package/shared/text-field.cjs +1 -1
  285. package/shared/text-field.js +1 -1
  286. package/shared/utils/applyMixinsWithObservables.d.ts +1 -0
  287. package/side-drawer/index.cjs +1 -1
  288. package/side-drawer/index.js +1 -1
  289. package/slider/index.cjs +2 -1
  290. package/slider/index.js +2 -1
  291. package/split-button/index.cjs +2 -2
  292. package/split-button/index.js +2 -2
  293. package/style.css +1 -0
  294. package/styles/core/all.css +1 -1
  295. package/styles/core/theme.css +1 -1
  296. package/styles/core/typography.css +1 -1
  297. package/styles/fonts/spezia-variable.css +39 -13
  298. package/styles/tokens/theme-dark.css +4 -4
  299. package/styles/tokens/theme-light.css +4 -4
  300. package/styles/tokens/vivid-2-compat.css +4 -2
  301. package/switch/index.cjs +2 -2
  302. package/switch/index.js +2 -2
  303. package/tab/index.cjs +2 -2
  304. package/tab/index.js +2 -2
  305. package/tab-panel/index.cjs +1 -1
  306. package/tab-panel/index.js +1 -1
  307. package/tabs/index.cjs +4 -4
  308. package/tabs/index.js +4 -4
  309. package/tag/index.cjs +2 -2
  310. package/tag/index.js +2 -2
  311. package/tag-group/index.cjs +1 -1
  312. package/tag-group/index.js +1 -1
  313. package/text-area/index.cjs +4 -3
  314. package/text-area/index.js +4 -3
  315. package/text-field/index.cjs +4 -6
  316. package/text-field/index.js +4 -6
  317. package/time-picker/index.cjs +8 -10
  318. package/time-picker/index.js +8 -10
  319. package/toggletip/index.cjs +5 -5
  320. package/toggletip/index.js +5 -5
  321. package/tooltip/index.cjs +5 -5
  322. package/tooltip/index.js +5 -5
  323. package/tree-item/index.cjs +2 -2
  324. package/tree-item/index.js +2 -2
  325. package/tree-view/index.cjs +1 -1
  326. package/tree-view/index.js +1 -1
  327. package/video-player/index.cjs +17 -0
  328. package/video-player/index.js +15 -0
  329. package/vivid.api.json +428 -1
  330. package/focus/index.cjs +0 -7
  331. package/focus/index.js +0 -5
  332. package/lib/focus/definition.d.ts +0 -3
  333. package/lib/focus/focus.d.ts +0 -3
  334. package/lib/focus/focus.template.d.ts +0 -4
  335. package/lib/popup/popup.d.ts +0 -21
  336. package/shared/focus.cjs +0 -8
  337. package/shared/focus.js +0 -6
  338. package/shared/focus2.cjs +0 -11
  339. package/shared/focus2.js +0 -9
  340. package/shared/patterns/focus.d.ts +0 -3
@@ -5,33 +5,31 @@ const calendarEvent = require('./calendar-event.cjs');
5
5
  const when = require('./when.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
 
8
- const styles = ":host{display:contents}.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;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);border-radius:8px;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-end:8px;margin-inline-start:min(var(--vvd-calendar-event--indent),32px);max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.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}@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)}\n";
8
+ const styles = ":host{display:contents}.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)}.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}@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)}\n";
9
9
 
10
- const getClasses = ({
11
- connotation,
12
- appearance
13
- }) => classNames.classNames(
10
+ const getClasses = ({ connotation, appearance }) => classNames.classNames(
14
11
  "base",
15
12
  [`connotation-${connotation}`, Boolean(connotation)],
16
13
  [`appearance-${appearance}`, Boolean(appearance)]
17
14
  );
18
15
  const getStyles = ({ start, duration, overlapCount }) => {
19
16
  const stylesObj = {
20
- ...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
17
+ ...overlapCount && {
18
+ "--vvd-calendar-event--overlap-count": overlapCount
19
+ },
21
20
  ...start && { "--vvd-calendar-event--start": start },
22
21
  ...duration && { "--vvd-calendar-event--duration": duration }
23
22
  };
24
23
  return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
25
24
  };
26
- const CalendarEventTemplate = () => index.html`
27
- <div
28
- style="${getStyles}"
29
- class="${getClasses}"
30
- role="button"
31
- tabindex="0"
25
+ const CalendarEventTemplate = () => index.html` <div
26
+ style="${getStyles}"
27
+ class="${getClasses}"
28
+ role="button"
29
+ tabindex="0"
32
30
  >
33
- ${when.when((x) => x.heading, index.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
34
- ${when.when((x) => x.description, index.html`<p>${(x) => x.description}</p>`)}
31
+ ${when.when((x) => x.heading, index.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
32
+ ${when.when((x) => x.description, index.html`<p>${(x) => x.description}</p>`)}
35
33
  </div>`;
36
34
 
37
35
  const calendarEventDefinition = calendarEvent.CalendarEvent.compose({
@@ -3,33 +3,31 @@ import { C as CalendarEvent } from './calendar-event.js';
3
3
  import { w as when } from './when.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
6
- const styles = ":host{display:contents}.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;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);border-radius:8px;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-end:8px;margin-inline-start:min(var(--vvd-calendar-event--indent),32px);max-block-size:calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px)}.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}@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)}\n";
6
+ const styles = ":host{display:contents}.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)}.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}@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)}\n";
7
7
 
8
- const getClasses = ({
9
- connotation,
10
- appearance
11
- }) => classNames(
8
+ const getClasses = ({ connotation, appearance }) => classNames(
12
9
  "base",
13
10
  [`connotation-${connotation}`, Boolean(connotation)],
14
11
  [`appearance-${appearance}`, Boolean(appearance)]
15
12
  );
16
13
  const getStyles = ({ start, duration, overlapCount }) => {
17
14
  const stylesObj = {
18
- ...overlapCount && { "--vvd-calendar-event--overlap-count": overlapCount },
15
+ ...overlapCount && {
16
+ "--vvd-calendar-event--overlap-count": overlapCount
17
+ },
19
18
  ...start && { "--vvd-calendar-event--start": start },
20
19
  ...duration && { "--vvd-calendar-event--duration": duration }
21
20
  };
22
21
  return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
23
22
  };
24
- const CalendarEventTemplate = () => html`
25
- <div
26
- style="${getStyles}"
27
- class="${getClasses}"
28
- role="button"
29
- tabindex="0"
23
+ const CalendarEventTemplate = () => html` <div
24
+ style="${getStyles}"
25
+ class="${getClasses}"
26
+ role="button"
27
+ tabindex="0"
30
28
  >
31
- ${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
32
- ${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
29
+ ${when((x) => x.heading, html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
30
+ ${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
33
31
  </div>`;
34
32
 
35
33
  const calendarEventDefinition = CalendarEvent.compose({
@@ -507,7 +507,7 @@ _has._curry1(function isEmpty(x) {
507
507
 
508
508
  const isEmpty$1 = isEmpty;
509
509
 
510
- const styles = "ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\". column-headers\" \"row-headers calendar\";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;background:var(--vvd-color-surface-2dp);border-radius:8px;counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:\"\"}@supports (inset: 0){[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{inset:0}}@supports not (inset: 0){[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{inset:0}}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content}@supports (inset: 0){.column-headers [role=columnheader i] h2>em{inset-inline-start:0}}@supports not (inset: 0){.column-headers [role=columnheader i] h2>em{left:0}}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}\n";
510
+ const styles = "ol{padding:0;margin:0;list-style:none}[role=grid i]{position:relative;z-index:0;display:grid;margin:auto;grid-template-areas:\". column-headers\" \"row-headers calendar\";grid-template-columns:min-content auto;inline-size:max(100%,500px);min-inline-size:880px}.row-headers{display:grid;grid-area:row-headers;grid-template-rows:repeat(24,1fr);margin-inline-end:2px}.row-headers>[role=rowheader i]{display:flex;align-items:flex-end;justify-content:flex-end}.row-headers>[role=rowheader i]>time{font:var(--vvd-typography-base-condensed);font-size:small;line-height:1;text-transform:uppercase;white-space:nowrap}.calendar-row{display:contents}.calendar-grid-presentation{display:grid;overflow:hidden;border-radius:8px;background:var(--vvd-color-surface-2dp);counter-reset:listing;filter:var(--vvd-shadow-surface-2dp);gap:1px;grid-area:calendar;grid-auto-flow:column;grid-template:repeat(24,1fr)/repeat(7,1fr)}.hours{display:contents}.hours>[role=listitem i]{position:relative;grid-column:1/8;grid-row:var(--row);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));pointer-events:none}.hours>[role=listitem i]:not(:first-child):after{position:absolute;border-block-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";inline-size:100%;margin-block-start:-1px}.hours>[role=listitem i]:nth-child(24n+1){--row: 1}.hours>[role=listitem i]:nth-child(24n+2){--row: 2}.hours>[role=listitem i]:nth-child(24n+3){--row: 3}.hours>[role=listitem i]:nth-child(24n+4){--row: 4}.hours>[role=listitem i]:nth-child(24n+5){--row: 5}.hours>[role=listitem i]:nth-child(24n+6){--row: 6}.hours>[role=listitem i]:nth-child(24n+7){--row: 7}.hours>[role=listitem i]:nth-child(24n+8){--row: 8}.hours>[role=listitem i]:nth-child(24n+9){--row: 9}.hours>[role=listitem i]:nth-child(24n+10){--row: 10}.hours>[role=listitem i]:nth-child(24n+11){--row: 11}.hours>[role=listitem i]:nth-child(24n+12){--row: 12}.hours>[role=listitem i]:nth-child(24n+13){--row: 13}.hours>[role=listitem i]:nth-child(24n+14){--row: 14}.hours>[role=listitem i]:nth-child(24n+15){--row: 15}.hours>[role=listitem i]:nth-child(24n+16){--row: 16}.hours>[role=listitem i]:nth-child(24n+17){--row: 17}.hours>[role=listitem i]:nth-child(24n+18){--row: 18}.hours>[role=listitem i]:nth-child(24n+19){--row: 19}.hours>[role=listitem i]:nth-child(24n+20){--row: 20}.hours>[role=listitem i]:nth-child(24n+21){--row: 21}.hours>[role=listitem i]:nth-child(24n+22){--row: 22}.hours>[role=listitem i]:nth-child(24n+23){--row: 23}.hours>[role=listitem i]:nth-child(24n+24){--row: 24}[role=gridcell i]{display:grid;gap:1px;grid-auto-flow:column}[role=gridcell i],[role=columnheader i],[role=columnheader i] [role=button i]{position:relative}[role=gridcell i]:before,[role=columnheader i]:before,[role=columnheader i] [role=button i]:before{position:absolute;z-index:-1;background-color:var(--vvd-color-information-400);content:\"\";inset:0}[role=gridcell i]:focus,[role=columnheader i]:focus,[role=columnheader i] [role=button i]:focus{outline:none}[role=gridcell i]:not(:focus-visible):before,[role=columnheader i]:not(:focus-visible):before,[role=columnheader i] [role=button i]:not(:focus-visible):before{display:none}.columns{display:contents}.columns>[role=gridcell i]{position:relative;grid-column:var(--column);grid-row:1/25}.columns>[role=gridcell i]:nth-child(1){--column: 1}.columns>[role=gridcell i]:nth-child(2){--column: 2}.columns>[role=gridcell i]:nth-child(3){--column: 3}.columns>[role=gridcell i]:nth-child(4){--column: 4}.columns>[role=gridcell i]:nth-child(5){--column: 5}.columns>[role=gridcell i]:nth-child(6){--column: 6}.columns>[role=gridcell i]:nth-child(7){--column: 7}.columns>[role=gridcell i]:not(:first-child):after{position:absolute;block-size:100%;border-inline-end:var(--vvd-color-neutral-100) 1px solid;content:\"\";margin-inline-start:-1px}.column-headers{display:grid;grid-area:column-headers;grid-template-columns:repeat(7,1fr)}.column-headers [role=columnheader i] h2{display:grid;align-items:baseline;margin:0;font:var(--vvd-typography-heading-4);grid-template-columns:1fr auto 1fr}.column-headers [role=columnheader i] h2>em{font:inherit;inline-size:min-content;inset-inline-start:0}.column-headers [role=columnheader i] h2>small{font:var(--vvd-typography-base-condensed);text-transform:uppercase}\n";
511
511
 
512
512
  const ARROW_UP = "ArrowUp";
513
513
  const ARROW_RIGHT = "ArrowRight";
@@ -540,9 +540,13 @@ function getHeaderDescendantGridCell(key, activeElement) {
540
540
  return;
541
541
  }
542
542
  const header = activeElement.closest('[role="columnheader"i]');
543
- const columnHeaders = this.shadowRoot.querySelectorAll('[role="columnheader"i]');
543
+ const columnHeaders = this.shadowRoot.querySelectorAll(
544
+ '[role="columnheader"i]'
545
+ );
544
546
  const i = Array.from(columnHeaders).indexOf(header);
545
- return this.shadowRoot.querySelector(`[role="gridcell"i]:nth-child(${i + 1})`);
547
+ return this.shadowRoot.querySelector(
548
+ `[role="gridcell"i]:nth-child(${i + 1})`
549
+ );
546
550
  }
547
551
 
548
552
  function getDay(el) {
@@ -555,7 +559,9 @@ function getDay(el) {
555
559
  }
556
560
  }
557
561
  function getHour(e, el, hours) {
558
- const rowHeaderOrCell = el.closest('[role="rowheader"], [role="gridcell"i]');
562
+ const rowHeaderOrCell = el.closest(
563
+ '[role="rowheader"], [role="gridcell"i]'
564
+ );
559
565
  if (rowHeaderOrCell) {
560
566
  const DOMRect = rowHeaderOrCell.getBoundingClientRect();
561
567
  const offsetY = e.clientY - DOMRect.y;
@@ -566,11 +572,15 @@ function getHour(e, el, hours) {
566
572
  }
567
573
  const getEventContext = function(e) {
568
574
  if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) {
569
- throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");
575
+ throw new Error(
576
+ "Invalid event. Event must be instance of KeyboardEvent or MouseEvent"
577
+ );
570
578
  }
571
579
  const [el] = e.composedPath();
572
580
  if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) {
573
- throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
581
+ throw new Error(
582
+ "Invalid event. Event must contain a target object which is a direct descendant of calendar"
583
+ );
574
584
  }
575
585
  const day = getDay(el);
576
586
  let hour;
@@ -638,7 +648,9 @@ class Calendar extends index.FoundationElement {
638
648
  }
639
649
  getCalendarEventContainingCell(calendarEvent) {
640
650
  const slotName = calendarEvent.getAttribute("slot");
641
- const gridCell = this.shadowRoot.querySelector(`slot[name="${slotName}"i]`);
651
+ const gridCell = this.shadowRoot.querySelector(
652
+ `slot[name="${slotName}"i]`
653
+ );
642
654
  return gridCell.parentElement;
643
655
  }
644
656
  arrowKeysInteractions(key) {
@@ -647,11 +659,19 @@ class Calendar extends index.FoundationElement {
647
659
  if (isCellOrHeader(activeElement)) {
648
660
  focusNext = getNextFocusableGridElement.call(this, key, activeElement);
649
661
  } else if (this.#activeCalendarEvent) {
650
- focusNext = this.getCalendarEventContainingCell(this.#activeCalendarEvent);
662
+ focusNext = this.getCalendarEventContainingCell(
663
+ this.#activeCalendarEvent
664
+ );
651
665
  } else if (activeElement?.matches('em[role="button"i]')) {
652
- focusNext = getHeaderDescendantGridCell.call(this, key, activeElement);
666
+ focusNext = getHeaderDescendantGridCell.call(
667
+ this,
668
+ key,
669
+ activeElement
670
+ );
653
671
  } else {
654
- focusNext = this.shadowRoot.querySelector('[role="columnheader"i]');
672
+ focusNext = this.shadowRoot.querySelector(
673
+ '[role="columnheader"i]'
674
+ );
655
675
  }
656
676
  this.activateElement(focusNext);
657
677
  }
@@ -662,7 +682,9 @@ class Calendar extends index.FoundationElement {
662
682
  el?.focus();
663
683
  }
664
684
  onKeydown({ key }) {
665
- const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some((predefinedKey) => predefinedKey == key);
685
+ const isArrow = [ARROW_UP, ARROW_RIGHT, ARROW_DOWN, ARROW_LEFT].some(
686
+ (predefinedKey) => predefinedKey == key
687
+ );
666
688
  if (isArrow) {
667
689
  this.arrowKeysInteractions(key);
668
690
  }
@@ -684,7 +706,9 @@ __decorateClass([
684
706
 
685
707
  function getValidDateString(date) {
686
708
  const twoDigit = (num) => `0${num}`.slice(-2);
687
- return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(date.getDate())}`;
709
+ return `${date.getFullYear()}-${twoDigit(date.getMonth() + 1)}-${twoDigit(
710
+ date.getDate()
711
+ )}`;
688
712
  }
689
713
  const weekdaysMap = /* @__PURE__ */ new Map([
690
714
  ["sunday", 0],
@@ -699,78 +723,97 @@ function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
699
723
  }
700
724
 
701
725
  const HoursTemplate = () => {
702
- return index.html`
703
- <div class="row-headers" role="row">
704
- ${repeat.repeat((x) => x.hoursAsDatetime, index.html`<span role="rowheader">
705
- <time datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
706
- hour: "numeric",
707
- minute: "numeric",
708
- hour12: false
709
- }).format(x)}">
710
- ${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
711
- hour: "numeric",
712
- hour12: c.parent.hour12
713
- }).format(x)}
714
- </time>
715
- </span>`)}
716
- </div>`;
726
+ return index.html` <div class="row-headers" role="row">
727
+ ${repeat.repeat(
728
+ (x) => x.hoursAsDatetime,
729
+ index.html`<span role="rowheader">
730
+ <time
731
+ datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
732
+ hour: "numeric",
733
+ minute: "numeric",
734
+ hour12: false
735
+ }).format(x)}"
736
+ >
737
+ ${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
738
+ hour: "numeric",
739
+ hour12: c.parent.hour12
740
+ }).format(x)}
741
+ </time>
742
+ </span>`
743
+ )}
744
+ </div>`;
717
745
  };
718
746
  const DaysTemplate = () => {
719
- return index.html`
720
- <div class="column-headers" role="row">
721
- ${repeat.repeat((x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]), index.html`
722
- <div role="columnheader" tabindex="-1">
723
- <time datetime=${(x) => getValidDateString(x)}>
724
- <h2>
725
- <!-- TODO add to column aria-labelledby or describedby to count
747
+ return index.html` <div class="column-headers" role="row">
748
+ ${repeat.repeat(
749
+ (x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]),
750
+ index.html` <div role="columnheader" tabindex="-1">
751
+ <time datetime=${(x) => getValidDateString(x)}>
752
+ <h2>
753
+ <!-- TODO add to column aria-labelledby or describedby to count
726
754
  events and related day e.g. "3 events, Sunday, March 8" -->
727
- <em tabindex="0" role="button" aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
728
- weekday: "long",
729
- month: "long",
730
- day: "2-digit"
731
- }).format(x)}>
732
- ${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { day: "2-digit" }).format(x)}
733
- </em>
734
- <small aria-hidden="true">
735
- ${(x, c) => new Intl.DateTimeFormat(c.parent.locales, { weekday: "short" }).format(x)}
736
- </small>
737
- </h2>
738
- </time>
739
- </div>`)}
740
- </div>`;
755
+ <em
756
+ tabindex="0"
757
+ role="button"
758
+ aria-label=${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
759
+ weekday: "long",
760
+ month: "long",
761
+ day: "2-digit"
762
+ }).format(x)}
763
+ >
764
+ ${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
765
+ day: "2-digit"
766
+ }).format(x)}
767
+ </em>
768
+ <small aria-hidden="true">
769
+ ${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
770
+ weekday: "short"
771
+ }).format(x)}
772
+ </small>
773
+ </h2>
774
+ </time>
775
+ </div>`
776
+ )}
777
+ </div>`;
741
778
  };
742
779
  const ColumnTemplate = index.html`
743
- <div role="gridcell" tabindex="-1">
744
- <slot name="day-${(_, c) => c.index}"></slot>
745
- </div>
746
- `;
780
+ <div role="gridcell" tabindex="-1">
781
+ <slot name="day-${(_, c) => c.index}"></slot>
782
+ </div>
783
+ `;
747
784
  const CalendarTemplate = () => index.html`
748
- <div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
749
- ${DaysTemplate}
750
- <div class="calendar-row" role="rowgroup">
751
- ${HoursTemplate}
752
- <div class="calendar-grid-presentation" role="presentation">
753
- <div class="hours" role="list">
754
- ${repeat.repeat((x) => Array.from({ length: x.hoursAsDatetime.length + 1 }), index.html`
755
- <div role="listitem"></div>`)}
756
- </div>
757
- <div class="columns" role="row">
758
- ${repeat.repeat((x) => Array.from(Array(x._days)), ColumnTemplate, { positioning: true })}
759
- </div>
760
- <slot></slot>
761
- </div>
762
- </div>
763
- </div>
785
+ <div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
786
+ ${DaysTemplate}
787
+ <div class="calendar-row" role="rowgroup">
788
+ ${HoursTemplate}
789
+ <div class="calendar-grid-presentation" role="presentation">
790
+ <div class="hours" role="list">
791
+ ${repeat.repeat(
792
+ (x) => Array.from({ length: x.hoursAsDatetime.length + 1 }),
793
+ index.html` <div role="listitem"></div>`
794
+ )}
795
+ </div>
796
+ <div class="columns" role="row">
797
+ ${repeat.repeat((x) => Array.from(Array(x._days)), ColumnTemplate, {
798
+ positioning: true
799
+ })}
800
+ </div>
801
+ <slot></slot>
802
+ </div>
803
+ </div>
804
+ </div>
764
805
  `;
765
806
 
766
- const calendarDefinition = Calendar.compose({
767
- baseName: "calendar",
768
- template: CalendarTemplate,
769
- styles,
770
- shadowOptions: {
771
- delegatesFocus: true
807
+ const calendarDefinition = Calendar.compose(
808
+ {
809
+ baseName: "calendar",
810
+ template: CalendarTemplate,
811
+ styles,
812
+ shadowOptions: {
813
+ delegatesFocus: true
814
+ }
772
815
  }
773
- });
816
+ );
774
817
  const calendarRegistries = [calendarDefinition()];
775
818
  const registerCalendar = index.registerFactory(calendarRegistries);
776
819