@vonage/vivid 5.25.0 → 5.28.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 (747) hide show
  1. package/accordion/index.cjs +1 -1
  2. package/accordion/index.js +8 -8
  3. package/accordion-item/index.cjs +1 -1
  4. package/action-group/index.cjs +3 -3
  5. package/action-group/index.js +10 -5
  6. package/alert/index.cjs +7 -7
  7. package/alert/index.js +47 -35
  8. package/audio-player/index.cjs +18 -18
  9. package/audio-player/index.js +15 -11
  10. package/avatar/index.cjs +9 -9
  11. package/avatar/index.js +27 -18
  12. package/badge/index.cjs +1 -1
  13. package/banner/index.cjs +5 -5
  14. package/banner/index.js +33 -27
  15. package/breadcrumb/index.cjs +1 -1
  16. package/breadcrumb/index.js +5 -1
  17. package/breadcrumb-item/index.cjs +1 -1
  18. package/breadcrumb-item/index.js +6 -6
  19. package/bundled/affix.cjs +3 -3
  20. package/bundled/affix.js +1 -1
  21. package/bundled/anchored.cjs +2 -2
  22. package/bundled/anchored.js +13 -1
  23. package/bundled/aria-binding-directive.cjs +1 -1
  24. package/bundled/aria-binding-directive.js +2 -2
  25. package/bundled/aria.cjs +1 -1
  26. package/bundled/base-color-picker.cjs +2 -2
  27. package/bundled/base-color-picker.js +1 -1
  28. package/bundled/base-progress.cjs +1 -1
  29. package/bundled/breadcrumb-item.cjs +1 -1
  30. package/bundled/button.cjs +1 -1
  31. package/bundled/calendar-event.cjs +1 -1
  32. package/bundled/calendar-event.js +17 -4
  33. package/bundled/calendar-picker.template.cjs +5 -5
  34. package/bundled/calendar-picker.template.js +56 -58
  35. package/bundled/char-count.cjs +2 -2
  36. package/bundled/children.cjs +1 -1
  37. package/bundled/children.js +1 -1
  38. package/bundled/class-names.cjs +1 -1
  39. package/bundled/component-enum.cjs +1 -0
  40. package/bundled/component-enum.js +9 -0
  41. package/bundled/data-grid.options.cjs +1 -1
  42. package/bundled/data-grid.options.js +7 -6
  43. package/bundled/decorate.cjs +1 -1
  44. package/bundled/decorate.js +1 -1
  45. package/bundled/definition.cjs +1 -1
  46. package/bundled/definition10.cjs +12 -18
  47. package/bundled/definition10.js +24 -69
  48. package/bundled/definition11.cjs +74 -10
  49. package/bundled/definition11.js +194 -24
  50. package/bundled/definition12.cjs +18 -70
  51. package/bundled/definition12.js +48 -186
  52. package/bundled/definition13.cjs +5 -22
  53. package/bundled/definition13.js +9 -58
  54. package/bundled/definition14.cjs +1 -5
  55. package/bundled/definition14.js +9 -9
  56. package/bundled/definition15.cjs +3 -3
  57. package/bundled/definition15.js +18 -18
  58. package/bundled/definition16.cjs +3 -3
  59. package/bundled/definition16.js +23 -17
  60. package/bundled/definition17.cjs +6 -6
  61. package/bundled/definition17.js +8 -8
  62. package/bundled/definition18.cjs +2 -2
  63. package/bundled/definition19.cjs +21 -21
  64. package/bundled/definition19.js +66 -61
  65. package/bundled/definition2.cjs +13 -1
  66. package/bundled/definition2.js +22 -185
  67. package/bundled/definition20.cjs +3 -3
  68. package/bundled/definition20.js +6 -7
  69. package/bundled/definition21.cjs +7 -7
  70. package/bundled/definition21.js +22 -23
  71. package/bundled/definition22.cjs +3 -3
  72. package/bundled/definition22.js +25 -25
  73. package/bundled/definition23.cjs +8 -4
  74. package/bundled/definition23.js +31 -9
  75. package/bundled/definition24.cjs +2 -2
  76. package/bundled/definition24.js +1 -1
  77. package/bundled/definition25.cjs +5 -5
  78. package/bundled/definition25.js +16 -11
  79. package/bundled/definition3.cjs +25 -12
  80. package/bundled/definition3.js +90 -21
  81. package/bundled/definition4.cjs +29 -25
  82. package/bundled/definition4.js +50 -89
  83. package/bundled/definition5.cjs +28 -29
  84. package/bundled/definition5.js +144 -45
  85. package/bundled/definition6.cjs +6 -29
  86. package/bundled/definition6.js +20 -130
  87. package/bundled/definition7.cjs +14 -6
  88. package/bundled/definition7.js +159 -20
  89. package/bundled/definition8.cjs +24 -14
  90. package/bundled/definition8.js +90 -144
  91. package/bundled/definition9.cjs +20 -22
  92. package/bundled/definition9.js +54 -80
  93. package/bundled/delegates-aria.cjs +1 -1
  94. package/bundled/delegates-aria.js +3 -2
  95. package/bundled/dialog.cjs +1 -1
  96. package/bundled/dialog.js +1 -1
  97. package/bundled/divider.cjs +1 -1
  98. package/bundled/divider.js +9 -9
  99. package/bundled/dom.cjs +1 -1
  100. package/bundled/enums.cjs +1 -1
  101. package/bundled/extractOptions.cjs +1 -1
  102. package/bundled/feedback-message.cjs +8 -0
  103. package/bundled/feedback-message.js +41 -0
  104. package/bundled/floating-ui.dom.cjs +1 -1
  105. package/bundled/floating-ui.dom.js +163 -197
  106. package/bundled/form-associated.cjs +1 -1
  107. package/bundled/form-associated.js +3 -4
  108. package/bundled/form-element.cjs +1 -1
  109. package/bundled/host-semantics.cjs +1 -1
  110. package/bundled/icon.cjs +1 -1
  111. package/bundled/kbd-shortcut.cjs +1 -1
  112. package/bundled/key-codes.cjs +1 -1
  113. package/bundled/linkable.cjs +2 -2
  114. package/bundled/listbox.cjs +1 -1
  115. package/bundled/listbox.js +3 -5
  116. package/bundled/localized.cjs +1 -1
  117. package/bundled/localized.js +45 -32
  118. package/bundled/mixins.cjs +9 -16
  119. package/bundled/mixins.js +23 -57
  120. package/bundled/numberConverter.cjs +2 -2
  121. package/bundled/numberConverter.js +1 -1
  122. package/bundled/numbers.cjs +1 -1
  123. package/bundled/optgroup.cjs +1 -1
  124. package/bundled/option.cjs +1 -1
  125. package/bundled/option.js +9 -7
  126. package/bundled/picker-field.template.cjs +2 -2
  127. package/bundled/picker-field.template.js +8 -8
  128. package/bundled/platform.cjs +1 -1
  129. package/bundled/playbackRates.cjs +1 -1
  130. package/bundled/ref.cjs +1 -1
  131. package/bundled/ref.js +1 -1
  132. package/bundled/render-in-light-dom.cjs +1 -1
  133. package/bundled/render-in-light-dom.js +4 -4
  134. package/bundled/repeat.cjs +1 -1
  135. package/bundled/repeat.js +16 -15
  136. package/bundled/scrollIntoView.cjs +1 -1
  137. package/bundled/scrollIntoView.js +1 -3
  138. package/bundled/single-date-picker.cjs +1 -1
  139. package/bundled/single-value-picker.cjs +1 -1
  140. package/bundled/single-value-picker.js +1 -1
  141. package/bundled/slider.template.cjs +12 -12
  142. package/bundled/slider.template.js +209 -32
  143. package/bundled/slottable-request.cjs +3 -3
  144. package/bundled/slottable-request.js +26 -17
  145. package/bundled/slotted.cjs +1 -1
  146. package/bundled/slotted.js +1 -1
  147. package/bundled/text-field.cjs +1 -1
  148. package/bundled/text-field.js +1 -1
  149. package/bundled/time-selection-picker.template.cjs +4 -4
  150. package/bundled/time-selection-picker.template.js +10 -7
  151. package/bundled/trapped-focus.cjs +1 -1
  152. package/bundled/utils.cjs +1 -1
  153. package/bundled/vivid-element.cjs +3 -3
  154. package/bundled/vivid-element.js +397 -358
  155. package/bundled/when.cjs +1 -1
  156. package/bundled/when.js +1 -1
  157. package/bundled/with-contextual-help.cjs +1 -1
  158. package/bundled/with-contextual-help.js +1 -1
  159. package/bundled/with-error-text.cjs +1 -1
  160. package/bundled/with-success-text.cjs +1 -1
  161. package/button/index.cjs +1 -1
  162. package/button/index.js +1 -1
  163. package/calendar/index.cjs +1 -1
  164. package/calendar/index.js +7 -7
  165. package/calendar-event/index.cjs +2 -2
  166. package/calendar-event/index.js +10 -8
  167. package/card/index.cjs +4 -2
  168. package/card/index.js +12 -7
  169. package/checkbox/index.cjs +1 -1
  170. package/color-picker/index.cjs +17 -17
  171. package/color-picker/index.js +19 -17
  172. package/combobox/index.cjs +9 -9
  173. package/combobox/index.js +46 -44
  174. package/contextual-help/index.cjs +1 -1
  175. package/contextual-help/index.js +1 -1
  176. package/country/index.cjs +1 -1
  177. package/country-group/index.cjs +1 -1
  178. package/country-group/index.js +8 -4
  179. package/custom-elements.json +9302 -9180
  180. package/data-grid/index.cjs +6 -6
  181. package/data-grid/index.js +92 -99
  182. package/date-picker/index.cjs +1 -1
  183. package/date-picker/index.js +10 -6
  184. package/date-range-picker/index.cjs +1 -1
  185. package/date-range-picker/index.js +13 -9
  186. package/date-time-picker/index.cjs +1 -1
  187. package/date-time-picker/index.js +11 -7
  188. package/dial-pad/index.cjs +4 -3
  189. package/dial-pad/index.js +14 -9
  190. package/dialog/index.cjs +1 -1
  191. package/dialog/index.js +9 -6
  192. package/divider/index.cjs +1 -1
  193. package/elevation/definition.cjs +1 -0
  194. package/elevation/definition.js +2 -2
  195. package/elevation/index.cjs +1 -1
  196. package/elevation/index.js +1 -1
  197. package/empty-state/index.cjs +3 -3
  198. package/empty-state/index.js +18 -6
  199. package/fab/index.cjs +3 -3
  200. package/fab/index.js +14 -6
  201. package/file-picker/index.cjs +8 -10
  202. package/file-picker/index.js +25 -22
  203. package/flag/index.cjs +1 -1
  204. package/flag/index.js +7 -3
  205. package/form-field/definition.cjs +5 -0
  206. package/form-field/definition.js +2 -0
  207. package/form-field/index.cjs +29 -0
  208. package/form-field/index.js +57 -0
  209. package/header/definition.cjs +1 -1
  210. package/header/definition.js +1 -1
  211. package/header/index.cjs +1 -1
  212. package/header/index.js +9 -5
  213. package/icon/index.cjs +1 -1
  214. package/icon/index.js +1 -1
  215. package/index.cjs +159 -154
  216. package/index.js +42 -40
  217. package/kbd-key/definition.cjs +1 -1
  218. package/kbd-key/definition.js +1 -1
  219. package/kbd-key/index.cjs +3 -3
  220. package/kbd-key/index.js +22 -13
  221. package/kbd-shortcut/definition.cjs +1 -1
  222. package/kbd-shortcut/definition.js +1 -1
  223. package/kbd-shortcut/index.cjs +1 -1
  224. package/kbd-shortcut/index.js +6 -6
  225. package/layout/definition.cjs +1 -1
  226. package/layout/definition.js +1 -1
  227. package/layout/index.cjs +1 -1
  228. package/layout/index.js +7 -3
  229. package/lib/accordion-item/accordion-item.d.ts +11 -6
  230. package/lib/action-group/action-group.d.ts +10 -5
  231. package/lib/alert/alert.d.ts +15 -18
  232. package/lib/avatar/avatar.d.ts +16 -7
  233. package/lib/badge/badge.d.ts +18 -7
  234. package/lib/badge/badge.template.d.ts +2 -1
  235. package/lib/banner/banner.d.ts +18 -20
  236. package/lib/button/button.d.ts +25 -16
  237. package/lib/calendar-event/calendar-event.d.ts +14 -7
  238. package/lib/checkbox/checkbox.d.ts +31 -28
  239. package/lib/combobox/combobox.d.ts +37 -32
  240. package/lib/components.d.ts +1 -0
  241. package/lib/data-grid/data-grid.options.d.ts +6 -1
  242. package/lib/dial-pad/locale.d.ts +1 -0
  243. package/lib/divider/divider.d.ts +9 -6
  244. package/lib/elevation/definition.d.ts +2 -0
  245. package/lib/empty-state/empty-state.d.ts +7 -2
  246. package/lib/fab/fab.d.ts +3 -2
  247. package/lib/form-field/definition.d.ts +4 -0
  248. package/lib/form-field/form-field.d.ts +6 -0
  249. package/lib/form-field/form-field.template.d.ts +3 -0
  250. package/lib/icon/icon.d.ts +1 -1
  251. package/lib/kbd-key/kbd-key.d.ts +7 -2
  252. package/lib/listbox/listbox.d.ts +1 -0
  253. package/lib/menu-item/menu-item.d.ts +17 -14
  254. package/lib/nav-disclosure/nav-disclosure.d.ts +18 -11
  255. package/lib/nav-item/nav-item.d.ts +19 -12
  256. package/lib/note/note.d.ts +10 -6
  257. package/lib/number-field/number-field.d.ts +45 -40
  258. package/lib/option/option.d.ts +13 -10
  259. package/lib/popover/popover.d.ts +2 -1
  260. package/lib/popup/definition.d.ts +2 -0
  261. package/lib/progress/progress.d.ts +10 -5
  262. package/lib/progress-ring/progress-ring.d.ts +10 -6
  263. package/lib/radio/radio.d.ts +18 -15
  264. package/lib/range-slider/range-slider.d.ts +19 -15
  265. package/lib/rich-text-editor/rich-text-editor.d.ts +436 -5
  266. package/lib/rich-text-editor/rte/__tests__/async-generator.d.ts +1 -0
  267. package/lib/rich-text-editor/rte/features/atom.d.ts +6 -2
  268. package/lib/rich-text-editor/rte/instance.d.ts +2 -1
  269. package/lib/rich-text-editor/rte/utils/ui.d.ts +2 -1
  270. package/lib/searchable-select/option-tag.d.ts +12 -7
  271. package/lib/searchable-select/searchable-select.d.ts +7 -2
  272. package/lib/select/select.d.ts +45 -40
  273. package/lib/selectable-box/selectable-box.d.ts +9 -5
  274. package/lib/slider/slider.d.ts +18 -14
  275. package/lib/split-button/split-button.d.ts +24 -15
  276. package/lib/status/status.d.ts +10 -7
  277. package/lib/switch/switch.d.ts +13 -9
  278. package/lib/tab/tab.d.ts +19 -14
  279. package/lib/table/locale.d.ts +10 -0
  280. package/lib/table/table-sorting-button.d.ts +425 -0
  281. package/lib/tabs/tabs.d.ts +6 -3
  282. package/lib/tag/tag.d.ts +24 -15
  283. package/lib/tag-name-map.d.ts +2 -1
  284. package/lib/text-field/text-field.d.ts +46 -41
  285. package/lib/video-player/__tests__/video-fixtures.d.ts +3 -0
  286. package/listbox/definition.cjs +1 -1
  287. package/listbox/definition.js +1 -1
  288. package/listbox/index.cjs +7 -5
  289. package/listbox/index.js +24 -10
  290. package/locales/de-DE.cjs +46 -33
  291. package/locales/de-DE.js +46 -33
  292. package/locales/en-GB.cjs +46 -33
  293. package/locales/en-GB.js +46 -33
  294. package/locales/ja-JP.cjs +47 -33
  295. package/locales/ja-JP.js +47 -33
  296. package/locales/zh-CN.cjs +46 -33
  297. package/locales/zh-CN.js +46 -33
  298. package/menu/index.cjs +1 -1
  299. package/menu-item/index.cjs +1 -1
  300. package/nav/definition.cjs +1 -1
  301. package/nav/definition.js +1 -1
  302. package/nav/index.cjs +1 -1
  303. package/nav/index.js +6 -4
  304. package/nav-disclosure/definition.cjs +1 -1
  305. package/nav-disclosure/definition.js +1 -1
  306. package/nav-disclosure/index.cjs +3 -3
  307. package/nav-disclosure/index.js +13 -8
  308. package/nav-item/definition.cjs +1 -1
  309. package/nav-item/definition.js +1 -1
  310. package/nav-item/index.cjs +2 -2
  311. package/nav-item/index.js +15 -10
  312. package/note/definition.cjs +1 -1
  313. package/note/definition.js +1 -1
  314. package/note/index.cjs +6 -4
  315. package/note/index.js +22 -9
  316. package/number-field/definition.cjs +1 -1
  317. package/number-field/definition.js +1 -1
  318. package/number-field/index.cjs +11 -11
  319. package/number-field/index.js +41 -36
  320. package/optgroup/index.cjs +1 -1
  321. package/option/index.cjs +1 -1
  322. package/package.json +29 -36
  323. package/pagination/definition.cjs +1 -1
  324. package/pagination/definition.js +1 -1
  325. package/pagination/index.cjs +1 -1
  326. package/pagination/index.js +9 -9
  327. package/platform-switch/definition.cjs +1 -1
  328. package/platform-switch/definition.js +1 -1
  329. package/platform-switch/index.cjs +1 -1
  330. package/platform-switch/index.js +6 -2
  331. package/popover/definition.cjs +1 -1
  332. package/popover/definition.js +1 -1
  333. package/popover/index.cjs +2 -2
  334. package/popover/index.js +82 -41
  335. package/popup/definition.cjs +1 -0
  336. package/popup/definition.js +2 -2
  337. package/popup/index.cjs +1 -1
  338. package/popup/index.js +1 -1
  339. package/progress/definition.cjs +1 -1
  340. package/progress/definition.js +1 -1
  341. package/progress/index.cjs +7 -7
  342. package/progress/index.js +21 -11
  343. package/progress-ring/index.cjs +1 -1
  344. package/progress-ring/index.js +1 -1
  345. package/radio/definition.cjs +1 -1
  346. package/radio/definition.js +1 -1
  347. package/radio/index.cjs +1 -1
  348. package/radio-group/definition.cjs +1 -1
  349. package/radio-group/definition.js +1 -1
  350. package/radio-group/index.cjs +2 -2
  351. package/radio-group/index.js +14 -9
  352. package/range-slider/definition.cjs +1 -1
  353. package/range-slider/definition.js +1 -1
  354. package/range-slider/index.cjs +8 -8
  355. package/range-slider/index.js +31 -32
  356. package/rich-text-editor/definition.cjs +1 -1
  357. package/rich-text-editor/definition.js +1 -1
  358. package/rich-text-editor/index.cjs +25 -16
  359. package/rich-text-editor/index.js +2450 -2154
  360. package/rich-text-view/definition.cjs +1 -1
  361. package/rich-text-view/definition.js +1 -1
  362. package/rich-text-view/index.cjs +1 -1
  363. package/rich-text-view/index.js +6 -4
  364. package/searchable-select/definition.cjs +1 -1
  365. package/searchable-select/definition.js +1 -1
  366. package/searchable-select/index.cjs +22 -22
  367. package/searchable-select/index.js +97 -93
  368. package/select/definition.cjs +1 -1
  369. package/select/definition.js +1 -1
  370. package/select/index.cjs +1 -1
  371. package/selectable-box/definition.cjs +1 -1
  372. package/selectable-box/definition.js +1 -1
  373. package/selectable-box/index.cjs +8 -8
  374. package/selectable-box/index.js +24 -20
  375. package/shared/localization/Locale.d.ts +2 -0
  376. package/shared/patterns/anchored.d.ts +2 -0
  377. package/shared/styles/appearance.d.ts +2 -0
  378. package/shared/styles/connotation.d.ts +2 -0
  379. package/shared/styles/connotationOverrides.d.ts +1 -0
  380. package/shared/utils/component-enum.d.ts +7 -0
  381. package/side-drawer/definition.cjs +1 -1
  382. package/side-drawer/definition.js +1 -1
  383. package/side-drawer/index.cjs +1 -1
  384. package/side-drawer/index.js +10 -7
  385. package/simple-color-picker/definition.cjs +1 -1
  386. package/simple-color-picker/definition.js +1 -1
  387. package/simple-color-picker/index.cjs +2 -2
  388. package/simple-color-picker/index.js +20 -20
  389. package/slider/definition.cjs +2 -1
  390. package/slider/definition.js +2 -1
  391. package/slider/index.cjs +1 -1
  392. package/slider/index.js +1 -1
  393. package/split-button/definition.cjs +1 -1
  394. package/split-button/definition.js +1 -1
  395. package/split-button/index.cjs +9 -7
  396. package/split-button/index.js +58 -37
  397. package/status/definition.cjs +1 -1
  398. package/status/definition.js +1 -1
  399. package/status/index.cjs +5 -5
  400. package/status/index.js +22 -13
  401. package/switch/definition.cjs +1 -1
  402. package/switch/definition.js +1 -1
  403. package/switch/index.cjs +3 -3
  404. package/switch/index.js +22 -11
  405. package/tab/definition.cjs +1 -1
  406. package/tab/definition.js +1 -1
  407. package/tab/index.cjs +1 -1
  408. package/tab/index.js +1 -1
  409. package/tab-panel/definition.cjs +1 -1
  410. package/tab-panel/definition.js +1 -1
  411. package/tab-panel/index.cjs +1 -1
  412. package/tab-panel/index.js +1 -1
  413. package/table/definition.cjs +1 -1
  414. package/table/definition.js +1 -1
  415. package/table/index.cjs +20 -18
  416. package/table/index.js +54 -42
  417. package/tabs/definition.cjs +1 -1
  418. package/tabs/definition.js +1 -1
  419. package/tabs/index.cjs +4 -4
  420. package/tabs/index.js +32 -30
  421. package/tag/definition.cjs +1 -1
  422. package/tag/definition.js +1 -1
  423. package/tag/index.cjs +6 -6
  424. package/tag/index.js +28 -12
  425. package/tag-group/definition.cjs +1 -1
  426. package/tag-group/definition.js +1 -1
  427. package/tag-group/index.cjs +1 -1
  428. package/tag-group/index.js +6 -4
  429. package/text-area/definition.cjs +1 -1
  430. package/text-area/definition.js +1 -1
  431. package/text-area/index.cjs +5 -5
  432. package/text-area/index.js +18 -15
  433. package/text-field/index.cjs +1 -1
  434. package/text-field/index.js +1 -1
  435. package/time-picker/definition.cjs +1 -1
  436. package/time-picker/definition.js +1 -1
  437. package/time-picker/index.cjs +1 -1
  438. package/time-picker/index.js +9 -6
  439. package/toggletip/index.cjs +1 -1
  440. package/toggletip/index.js +1 -1
  441. package/tooltip/index.cjs +1 -1
  442. package/tooltip/index.js +1 -1
  443. package/tree-item/definition.cjs +1 -1
  444. package/tree-item/definition.js +1 -1
  445. package/tree-item/index.cjs +1 -1
  446. package/tree-item/index.js +1 -1
  447. package/tree-view/definition.cjs +1 -1
  448. package/tree-view/definition.js +1 -1
  449. package/tree-view/index.cjs +1 -1
  450. package/tree-view/index.js +7 -5
  451. package/unbundled/affix.cjs +0 -1
  452. package/unbundled/anchored.cjs +39 -1
  453. package/unbundled/anchored.js +28 -1
  454. package/unbundled/aria-binding-directive.cjs +2 -2
  455. package/unbundled/aria-binding-directive.js +2 -1
  456. package/unbundled/base-color-picker.cjs +0 -1
  457. package/unbundled/base-progress.cjs +0 -1
  458. package/unbundled/breadcrumb-item.cjs +0 -1
  459. package/unbundled/button.cjs +0 -1
  460. package/unbundled/calendar-event.cjs +29 -1
  461. package/unbundled/calendar-event.js +18 -1
  462. package/unbundled/calendar-picker.template.cjs +109 -91
  463. package/unbundled/calendar-picker.template.js +109 -90
  464. package/unbundled/char-count.cjs +0 -1
  465. package/unbundled/component-enum.cjs +18 -0
  466. package/unbundled/component-enum.js +13 -0
  467. package/unbundled/data-grid.options.cjs +8 -0
  468. package/unbundled/data-grid.options.js +3 -1
  469. package/unbundled/decorate.cjs +1 -1
  470. package/unbundled/decorate.js +1 -1
  471. package/unbundled/definition.cjs +1 -2
  472. package/unbundled/definition.js +1 -1
  473. package/unbundled/definition10.cjs +2 -343
  474. package/unbundled/definition10.js +4 -338
  475. package/unbundled/definition11.cjs +6 -7
  476. package/unbundled/definition11.js +6 -6
  477. package/unbundled/definition12.cjs +4 -4
  478. package/unbundled/definition12.js +5 -4
  479. package/unbundled/definition13.cjs +2 -2
  480. package/unbundled/definition13.js +2 -1
  481. package/unbundled/definition14.cjs +12 -4
  482. package/unbundled/definition14.js +12 -3
  483. package/unbundled/definition15.cjs +32 -6
  484. package/unbundled/definition15.js +32 -5
  485. package/unbundled/definition16.cjs +20 -14
  486. package/unbundled/definition16.js +20 -13
  487. package/unbundled/definition17.cjs +0 -1
  488. package/unbundled/definition18.cjs +4 -3
  489. package/unbundled/definition18.js +4 -2
  490. package/unbundled/definition19.cjs +2 -3
  491. package/unbundled/definition19.js +9 -8
  492. package/unbundled/definition2.cjs +9 -4
  493. package/unbundled/definition2.js +9 -3
  494. package/unbundled/definition20.cjs +1 -2
  495. package/unbundled/definition20.js +7 -6
  496. package/unbundled/definition21.cjs +4 -3
  497. package/unbundled/definition21.js +4 -2
  498. package/unbundled/definition22.cjs +0 -1
  499. package/unbundled/definition23.cjs +12 -6
  500. package/unbundled/definition23.js +11 -4
  501. package/unbundled/definition24.cjs +8 -8
  502. package/unbundled/definition24.js +9 -8
  503. package/unbundled/definition25.cjs +7 -4
  504. package/unbundled/definition25.js +7 -3
  505. package/unbundled/definition26.cjs +6 -4
  506. package/unbundled/definition26.js +5 -2
  507. package/unbundled/definition27.cjs +10 -7
  508. package/unbundled/definition27.js +10 -6
  509. package/unbundled/definition28.cjs +3 -3
  510. package/unbundled/definition28.js +2 -1
  511. package/unbundled/definition29.cjs +2 -3
  512. package/unbundled/definition29.js +3 -3
  513. package/unbundled/definition3.cjs +5 -6
  514. package/unbundled/definition3.js +5 -5
  515. package/unbundled/definition30.cjs +0 -1
  516. package/unbundled/definition31.cjs +15 -13
  517. package/unbundled/definition31.js +14 -11
  518. package/unbundled/definition32.cjs +0 -1
  519. package/unbundled/definition33.cjs +0 -1
  520. package/unbundled/definition34.cjs +0 -1
  521. package/unbundled/definition35.cjs +39 -51
  522. package/unbundled/definition35.js +40 -51
  523. package/unbundled/definition36.cjs +2 -3
  524. package/unbundled/definition36.js +9 -8
  525. package/unbundled/definition37.cjs +0 -1
  526. package/unbundled/definition38.cjs +0 -1
  527. package/unbundled/definition39.cjs +0 -1
  528. package/unbundled/definition4.cjs +4 -3
  529. package/unbundled/definition4.js +11 -6
  530. package/unbundled/definition40.cjs +5 -4
  531. package/unbundled/definition40.js +5 -3
  532. package/unbundled/definition41.cjs +0 -1
  533. package/unbundled/definition42.cjs +11 -3
  534. package/unbundled/definition42.js +11 -2
  535. package/unbundled/definition43.cjs +7 -3
  536. package/unbundled/definition43.js +7 -2
  537. package/unbundled/definition44.cjs +12 -11
  538. package/unbundled/definition44.js +11 -9
  539. package/unbundled/definition45.cjs +73 -52
  540. package/unbundled/definition45.js +69 -47
  541. package/unbundled/definition46.cjs +53 -46
  542. package/unbundled/definition46.js +49 -41
  543. package/unbundled/definition47.cjs +40 -165
  544. package/unbundled/definition47.js +36 -160
  545. package/unbundled/definition48.cjs +177 -32
  546. package/unbundled/definition48.js +174 -22
  547. package/unbundled/definition49.cjs +32 -596
  548. package/unbundled/definition49.js +29 -591
  549. package/unbundled/definition5.cjs +9 -3
  550. package/unbundled/definition5.js +15 -7
  551. package/unbundled/definition50.cjs +609 -78
  552. package/unbundled/definition50.js +605 -75
  553. package/unbundled/definition51.cjs +74 -34
  554. package/unbundled/definition51.js +70 -29
  555. package/unbundled/definition52.cjs +59 -24
  556. package/unbundled/definition52.js +57 -18
  557. package/unbundled/definition53.cjs +23 -40
  558. package/unbundled/definition53.js +19 -35
  559. package/unbundled/definition54.cjs +40 -316
  560. package/unbundled/definition54.js +38 -313
  561. package/unbundled/definition55.cjs +305 -196
  562. package/unbundled/definition55.js +301 -191
  563. package/unbundled/definition56.cjs +210 -41
  564. package/unbundled/definition56.js +206 -36
  565. package/unbundled/definition57.cjs +42 -271
  566. package/unbundled/definition57.js +38 -266
  567. package/unbundled/definition58.cjs +351 -51
  568. package/unbundled/definition58.js +348 -46
  569. package/unbundled/definition59.cjs +58 -147
  570. package/unbundled/definition59.js +59 -144
  571. package/unbundled/definition6.cjs +22 -7
  572. package/unbundled/definition6.js +22 -6
  573. package/unbundled/definition60.cjs +129 -226
  574. package/unbundled/definition60.js +126 -222
  575. package/unbundled/definition61.cjs +200 -420
  576. package/unbundled/definition61.js +197 -416
  577. package/unbundled/definition62.cjs +442 -3743
  578. package/unbundled/definition62.js +433 -3570
  579. package/unbundled/definition63.cjs +3788 -729
  580. package/unbundled/definition63.js +3617 -721
  581. package/unbundled/definition64.cjs +784 -98
  582. package/unbundled/definition64.js +781 -94
  583. package/unbundled/definition65.cjs +100 -1003
  584. package/unbundled/definition65.js +98 -997
  585. package/unbundled/definition66.cjs +996 -94
  586. package/unbundled/definition66.js +992 -89
  587. package/unbundled/definition67.cjs +111 -74
  588. package/unbundled/definition67.js +107 -63
  589. package/unbundled/definition68.cjs +69 -157
  590. package/unbundled/definition68.js +65 -152
  591. package/unbundled/definition69.cjs +156 -120
  592. package/unbundled/definition69.js +152 -115
  593. package/unbundled/definition7.cjs +0 -1
  594. package/unbundled/definition7.js +10 -4
  595. package/unbundled/definition70.cjs +154 -50
  596. package/unbundled/definition70.js +150 -45
  597. package/unbundled/definition71.cjs +58 -86
  598. package/unbundled/definition71.js +57 -81
  599. package/unbundled/definition72.cjs +99 -20
  600. package/unbundled/definition72.js +98 -15
  601. package/unbundled/definition73.cjs +20 -89
  602. package/unbundled/definition73.js +16 -84
  603. package/unbundled/definition74.cjs +79 -296
  604. package/unbundled/definition74.js +73 -217
  605. package/unbundled/definition75.cjs +304 -312
  606. package/unbundled/definition75.js +232 -304
  607. package/unbundled/definition76.cjs +328 -27
  608. package/unbundled/definition76.js +320 -23
  609. package/unbundled/definition77.cjs +27 -125
  610. package/unbundled/definition77.js +23 -120
  611. package/unbundled/definition78.cjs +120 -233
  612. package/unbundled/definition78.js +116 -228
  613. package/unbundled/definition79.cjs +258 -26
  614. package/unbundled/definition79.js +249 -23
  615. package/unbundled/definition8.cjs +19 -12
  616. package/unbundled/definition8.js +19 -11
  617. package/unbundled/definition80.cjs +29 -149
  618. package/unbundled/definition80.js +27 -134
  619. package/unbundled/definition81.cjs +118 -174
  620. package/unbundled/definition81.js +109 -169
  621. package/unbundled/definition82.cjs +180 -477
  622. package/unbundled/definition82.js +178 -472
  623. package/unbundled/definition83.cjs +517 -0
  624. package/unbundled/definition83.js +498 -0
  625. package/unbundled/definition9.cjs +4 -3
  626. package/unbundled/definition9.js +4 -2
  627. package/unbundled/delegates-aria.cjs +4 -2
  628. package/unbundled/delegates-aria.js +4 -2
  629. package/unbundled/divider.cjs +8 -3
  630. package/unbundled/divider.js +3 -3
  631. package/unbundled/en-US.cjs +46 -33
  632. package/unbundled/en-US.js +46 -33
  633. package/unbundled/feedback-message.cjs +59 -0
  634. package/unbundled/feedback-message.js +48 -0
  635. package/unbundled/form-associated.cjs +1 -4
  636. package/unbundled/form-associated.js +1 -3
  637. package/unbundled/form-element.cjs +0 -1
  638. package/unbundled/icon.cjs +0 -1
  639. package/unbundled/kbd-shortcut.cjs +0 -1
  640. package/unbundled/linkable.cjs +1 -2
  641. package/unbundled/linkable.js +1 -1
  642. package/unbundled/listbox.cjs +0 -2
  643. package/unbundled/listbox.js +0 -1
  644. package/unbundled/localized.cjs +0 -1
  645. package/unbundled/mixins.cjs +3 -54
  646. package/unbundled/mixins.js +3 -47
  647. package/unbundled/numberConverter.cjs +8 -3
  648. package/unbundled/numberConverter.js +8 -3
  649. package/unbundled/optgroup.cjs +0 -1
  650. package/unbundled/option.cjs +8 -1
  651. package/unbundled/option.js +3 -1
  652. package/unbundled/picker-field.template.cjs +1 -2
  653. package/unbundled/picker-field.template.js +1 -1
  654. package/unbundled/randomId.cjs +0 -1
  655. package/unbundled/{chunk.cjs → rolldown-runtime.cjs} +1 -1
  656. package/unbundled/scrollIntoView.cjs +0 -1
  657. package/unbundled/scrollIntoView.js +0 -1
  658. package/unbundled/slider.template.cjs +340 -2
  659. package/unbundled/slider.template.js +338 -5
  660. package/unbundled/text-field.cjs +1 -1
  661. package/unbundled/text-field.js +1 -1
  662. package/unbundled/time-selection-picker.template.cjs +2 -3
  663. package/unbundled/time-selection-picker.template.js +2 -2
  664. package/unbundled/vivid-element.cjs +63 -4
  665. package/unbundled/vivid-element.js +63 -3
  666. package/unbundled/with-contextual-help.cjs +0 -1
  667. package/unbundled/with-error-text.cjs +0 -1
  668. package/unbundled/with-success-text.cjs +0 -1
  669. package/video-player/definition.cjs +1 -1
  670. package/video-player/definition.js +1 -1
  671. package/video-player/index.cjs +31 -31
  672. package/video-player/index.js +2094 -2085
  673. package/visually-hidden/index.cjs +1 -1
  674. package/vivid.api.json +509 -1125
  675. package/lib/accordion/variations.browser-spec.d.ts +0 -1
  676. package/lib/action-group/variations.browser-spec.d.ts +0 -1
  677. package/lib/alert/variations.browser-spec.d.ts +0 -1
  678. package/lib/audio-player/variations.browser-spec.d.ts +0 -1
  679. package/lib/avatar/variations.browser-spec.d.ts +0 -1
  680. package/lib/badge/variations.browser-spec.d.ts +0 -1
  681. package/lib/banner/variations.browser-spec.d.ts +0 -1
  682. package/lib/breadcrumb-item/variations.browser-spec.d.ts +0 -1
  683. package/lib/button/variations.browser-spec.d.ts +0 -1
  684. package/lib/calendar/variations.browser-spec.d.ts +0 -1
  685. package/lib/calendar-event/variations.browser-spec.d.ts +0 -1
  686. package/lib/card/variations.browser-spec.d.ts +0 -1
  687. package/lib/checkbox/variations.browser-spec.d.ts +0 -1
  688. package/lib/color-picker/variations.browser-spec.d.ts +0 -1
  689. package/lib/combobox/variations.browser-spec.d.ts +0 -1
  690. package/lib/contextual-help/variations.browser-spec.d.ts +0 -1
  691. package/lib/country/variations.browser-spec.d.ts +0 -1
  692. package/lib/data-grid/variations.browser-spec.d.ts +0 -1
  693. package/lib/date-picker/variations.browser-spec.d.ts +0 -1
  694. package/lib/date-range-picker/variations.browser-spec.d.ts +0 -1
  695. package/lib/date-time-picker/variations.browser-spec.d.ts +0 -1
  696. package/lib/dial-pad/variations.browser-spec.d.ts +0 -1
  697. package/lib/dialog/variations.browser-spec.d.ts +0 -1
  698. package/lib/divider/variations.browser-spec.d.ts +0 -1
  699. package/lib/empty-state/variations.browser-spec.d.ts +0 -1
  700. package/lib/fab/variations.browser-spec.d.ts +0 -1
  701. package/lib/file-picker/variations.browser-spec.d.ts +0 -1
  702. package/lib/flag/variations.browser-spec.d.ts +0 -1
  703. package/lib/header/variations.browser-spec.d.ts +0 -1
  704. package/lib/icon/variations.browser-spec.d.ts +0 -1
  705. package/lib/kbd-key/variations.browser-spec.d.ts +0 -1
  706. package/lib/kbd-shortcut/variations.browser-spec.d.ts +0 -1
  707. package/lib/layout/variations.browser-spec.d.ts +0 -1
  708. package/lib/listbox/variations.browser-spec.d.ts +0 -1
  709. package/lib/menu/variations.browser-spec.d.ts +0 -1
  710. package/lib/menu-item/variations.browser-spec.d.ts +0 -1
  711. package/lib/nav/variations.browser-spec.d.ts +0 -1
  712. package/lib/nav-disclosure/variations.browser-spec.d.ts +0 -1
  713. package/lib/nav-item/variations.browser-spec.d.ts +0 -1
  714. package/lib/note/variations.browser-spec.d.ts +0 -1
  715. package/lib/number-field/variations.browser-spec.d.ts +0 -1
  716. package/lib/optgroup/variations.browser-spec.d.ts +0 -1
  717. package/lib/option/variations.browser-spec.d.ts +0 -1
  718. package/lib/pagination/variations.browser-spec.d.ts +0 -1
  719. package/lib/popover/variations.browser-spec.d.ts +0 -1
  720. package/lib/progress/variations.browser-spec.d.ts +0 -1
  721. package/lib/progress-ring/variations.browser-spec.d.ts +0 -1
  722. package/lib/radio/variations.browser-spec.d.ts +0 -1
  723. package/lib/radio-group/variations.browser-spec.d.ts +0 -1
  724. package/lib/range-slider/variations.browser-spec.d.ts +0 -1
  725. package/lib/rich-text-editor/variations.browser-spec.d.ts +0 -1
  726. package/lib/rich-text-view/variations.browser-spec.d.ts +0 -1
  727. package/lib/searchable-select/variations.browser-spec.d.ts +0 -1
  728. package/lib/select/variations.browser-spec.d.ts +0 -1
  729. package/lib/selectable-box/variations.browser-spec.d.ts +0 -1
  730. package/lib/side-drawer/variations.browser-spec.d.ts +0 -1
  731. package/lib/simple-color-picker/variations.browser-spec.d.ts +0 -1
  732. package/lib/slider/variations.browser-spec.d.ts +0 -1
  733. package/lib/split-button/variations.browser-spec.d.ts +0 -1
  734. package/lib/status/variations.browser-spec.d.ts +0 -1
  735. package/lib/switch/variations.browser-spec.d.ts +0 -1
  736. package/lib/table/variations.browser-spec.d.ts +0 -1
  737. package/lib/tabs/variations.browser-spec.d.ts +0 -1
  738. package/lib/tag/variations.browser-spec.d.ts +0 -1
  739. package/lib/text-area/variations.browser-spec.d.ts +0 -1
  740. package/lib/text-field/variations.browser-spec.d.ts +0 -1
  741. package/lib/time-picker/variations.browser-spec.d.ts +0 -1
  742. package/lib/toggletip/variations.browser-spec.d.ts +0 -1
  743. package/lib/tooltip/variations.browser-spec.d.ts +0 -1
  744. package/lib/tree-item/variations.browser-spec.d.ts +0 -1
  745. package/lib/video-player/variations.browser-spec.d.ts +0 -1
  746. /package/lib/{accordion-item/variations.browser-spec.d.ts → form-field/index.d.ts} +0 -0
  747. /package/unbundled/{chunk.js → rolldown-runtime.js} +0 -0
package/unbundled/vivid-element.cjs CHANGED
@@ -1,4 +1,3 @@
1
- require("./chunk.cjs");
2
1
  let _microsoft_fast_element = require("@microsoft/fast-element");
3
2
  //#region src/shared/design-system/createRegisterFunction.ts
4
3
  function resolve(templateOrResolveFunction, ctx) {
@@ -40,13 +39,73 @@ var createRegisterFunction = (definition) => (prefix = "vwc") => {
40
39
  registerComponent(definition);
41
40
  };
42
41
  //#endregion
42
+ //#region src/shared/styles/connotation.ts
43
+ var CONNOTATIONS = [
44
+ "accent",
45
+ "warning",
46
+ "cta",
47
+ "success",
48
+ "alert",
49
+ "information",
50
+ "announcement"
51
+ ];
52
+ var CONNOTATION_SHADES = [
53
+ "faint",
54
+ "soft",
55
+ "dim",
56
+ "pale",
57
+ "light",
58
+ "intermediate",
59
+ "firm",
60
+ "firm-all",
61
+ "fierce",
62
+ "fierce-primary",
63
+ "contrast",
64
+ "primary",
65
+ "primary-increment",
66
+ "primary-text"
67
+ ];
68
+ //#endregion
69
+ //#region src/shared/styles/connotationOverrides.ts
70
+ var cache = /* @__PURE__ */ new Map();
71
+ /**
72
+ * Generates a tiny stylesheet that forwards the public,
73
+ * `--vvd-<component>-<connotation>-<shade>` override API into the private
74
+ * `--_connotation-override-<shade>` variable consumed by the shared
75
+ * `styles.scss` prototype stylesheet.
76
+ *
77
+ * This lets every component keep supporting per-component connotation
78
+ * overrides without duplicating the (much larger) color-mapping stylesheet
79
+ * per component. It's generated once per component definition (not per
80
+ * instance), so there's no runtime cost per element.
81
+ */
82
+ function generateConnotationOverridesStylesheet(component) {
83
+ const cached = cache.get(component);
84
+ if (cached !== void 0) return cached;
85
+ const stylesheet = CONNOTATIONS.map((connotation) => {
86
+ return `.connotation-${connotation}{${CONNOTATION_SHADES.map((shade) => `--_connotation-override-${shade}:var(--vvd-${component}-${connotation}-${shade});`).join("")}}`;
87
+ }).join("");
88
+ cache.set(component, stylesheet);
89
+ return stylesheet;
90
+ }
91
+ //#endregion
92
+ //#region src/shared/styles/styles.scss?inline
93
+ var styles_default = ".connotation-accent{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-neutral-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-neutral-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-neutral-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-warning{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-warning-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-warning-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-warning-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-warning-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-warning-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-warning-300));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-warning-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-warning-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-warning-300));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-warning-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-warning-300));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-warning-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas-text))}.connotation-cta{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-cta-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-cta-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-cta-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-cta-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-cta-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-cta-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-cta-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-success{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-success-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-success-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-success-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-success-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-success-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-success-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-success-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-success-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-success-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-success-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-success-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-success-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-alert{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-alert-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-alert-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-alert-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-alert-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-alert-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-alert-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-alert-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-alert-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-alert-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-alert-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-alert-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-information{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-information-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-information-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-information-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-information-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-information-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-information-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-information-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-information-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-information-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-information-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-information-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-information-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-announcement{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-announcement-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-announcement-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-announcement-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-announcement-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-announcement-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-announcement-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-announcement-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-announcement-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-announcement-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.appearance-filled{--_appearance-idle-text:var(--_connotation-color-primary-text);--_appearance-idle-fill:var(--_connotation-color-primary);--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-primary-text);--_appearance-hover-fill:var(--_connotation-color-primary-increment);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-primary-text);--_appearance-active-fill:var(--_connotation-color-fierce);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-800);--_appearance-readonly-fill:var(--vvd-color-neutral-500);--_appearance-readonly-outline:transparent;--_appearance-selected-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-100);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-outline:transparent}.appearance-ghost{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-firm);--_appearance-hover-fill:var(--_connotation-color-faint);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-firm);--_appearance-active-fill:var(--_connotation-color-soft);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:transparent;--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:var(--_connotation-color-primary);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-selectedAndHover-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-200);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:var(--_connotation-color-primary);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-checkedAndHover-outline:transparent;--_appearance-error-fill:var(--vvd-color-alert-50);--_appearance-error-outline:transparent;--_appearance-success-fill:var(--vvd-color-success-50);--_appearance-success-outline:transparent}.appearance-ghost-light{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-fierce-primary);--_appearance-hover-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-fierce-primary);--_appearance-active-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:transparent;--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-selectedAndHover-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-200);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-checkedAndHover-outline:transparent}.appearance-outlined{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:var(--vvd-color-neutral-300);--_appearance-hover-text:var(--_connotation-color-firm);--_appearance-hover-fill:var(--_connotation-color-faint);--_appearance-hover-outline:var(--vvd-color-neutral-300);--_appearance-active-text:var(--_connotation-color-firm);--_appearance-active-fill:var(--_connotation-color-soft);--_appearance-active-outline:var(--vvd-color-neutral-300);--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:var(--vvd-color-neutral-300);--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:var(--vvd-color-neutral-300)}.appearance-outlined-light{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:var(--vvd-color-neutral-300);--_appearance-hover-text:var(--_connotation-color-fierce-primary);--_appearance-hover-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-hover-outline:var(--vvd-color-neutral-300);--_appearance-active-text:var(--_connotation-color-fierce-primary);--_appearance-active-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-active-outline:var(--vvd-color-neutral-300);--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:var(--vvd-color-neutral-300);--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:var(--vvd-color-neutral-300);--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-selected-outline:var(--vvd-color-neutral-300);--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-selectedAndHover-outline:var(--vvd-color-neutral-300)}.appearance-duotone{--_appearance-idle-text:var(--_connotation-color-firm-all);--_appearance-idle-fill:transparent;--_appearance-idle-outline:var(--_connotation-color-pale);--_appearance-hover-text:var(--_connotation-color-firm-all);--_appearance-hover-fill:transparent;--_appearance-hover-outline:var(--_connotation-color-firm-all);--_appearance-active-text:var(--_connotation-color-firm-all);--_appearance-active-fill:var(--_connotation-color-faint);--_appearance-active-outline:var(--_connotation-color-pale);--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:var(--vvd-color-neutral-100);--_appearance-selected-text:var(--_connotation-color-firm-all);--_appearance-selected-fill:var(--_connotation-color-soft);--_appearance-selected-outline:var(--_connotation-color-pale);--_appearance-selectedAndHover-text:var(--_connotation-color-firm-all);--_appearance-selectedAndHover-fill:var(--_connotation-color-faint);--_appearance-selectedAndHover-outline:var(--_connotation-color-firm-all);--_appearance-checked-text:var(--_connotation-color-firm-all);--_appearance-checked-fill:var(--_connotation-color-soft);--_appearance-checked-outline:var(--_connotation-color-pale);--_appearance-checkedAndHover-text:var(--_connotation-color-firm-all);--_appearance-checkedAndHover-fill:var(--_connotation-color-faint);--_appearance-checkedAndHover-outline:var(--_connotation-color-firm-all)}.appearance-fieldset{--_appearance-idle-text:var(--vvd-color-canvas-text);--_appearance-idle-fill:var(--vvd-color-canvas);--_appearance-idle-outline:var(--vvd-color-neutral-500);--_appearance-hover-text:var(--vvd-color-canvas-text);--_appearance-hover-fill:var(--vvd-color-canvas);--_appearance-hover-outline:var(--vvd-color-neutral-700);--_appearance-active-text:var(--vvd-color-canvas-text);--_appearance-active-fill:var(--vvd-color-canvas);--_appearance-active-outline:var(--_connotation-color-firm);--_appearance-disabled-text:var(--vvd-color-neutral-600);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:var(--vvd-color-neutral-300);--_appearance-readonly-text:var(--vvd-color-canvas-text);--_appearance-readonly-fill:var(--vvd-color-neutral-200);--_appearance-readonly-outline:var(--vvd-color-neutral-400);--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:var(--_connotation-color-primary);--_appearance-selected-outline:var(--_connotation-color-primary);--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-selectedAndHover-outline:var(--_connotation-color-primary-increment);--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-100);--_appearance-selectedAndDisabled-outline:var(--vvd-color-neutral-300);--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:var(--_connotation-color-primary);--_appearance-checked-outline:var(--_connotation-color-primary);--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-checkedAndHover-outline:var(--_connotation-color-primary-increment);--_appearance-error-fill:var(--vvd-color-alert-50);--_appearance-error-outline:var(--vvd-color-alert-500);--_appearance-success-fill:var(--vvd-color-success-50);--_appearance-success-outline:var(--vvd-color-success-500)}.appearance-subtle{--_appearance-idle-text:var(--_connotation-color-contrast);--_appearance-idle-fill:var(--_connotation-color-soft);--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-contrast);--_appearance-hover-fill:var(--_connotation-color-dim);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-contrast);--_appearance-active-fill:var(--_connotation-color-pale);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:transparent;--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:var(--_connotation-color-primary);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-selectedAndHover-outline:transparent;--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:var(--_connotation-color-primary);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-checkedAndHover-outline:transparent}.appearance-subtle-light{--_appearance-idle-text:var(--_connotation-color-contrast);--_appearance-idle-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-contrast);--_appearance-hover-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-contrast);--_appearance-active-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:transparent;--_appearance-selected-text:var(--vvd-color-canvas);--_appearance-selected-fill:var(--_connotation-color-firm);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 10%);--_appearance-selectedAndHover-outline:transparent;--_appearance-checked-text:var(--vvd-color-canvas);--_appearance-checked-fill:var(--_connotation-color-firm);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 10%);--_appearance-checkedAndHover-outline:transparent}.appearance-listitem{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-firm);--_appearance-hover-fill:var(--_connotation-color-faint);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-firm);--_appearance-active-fill:var(--_connotation-color-soft);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:transparent;--_appearance-selected-text:var(--_connotation-color-firm);--_appearance-selected-fill:var(--_connotation-color-soft);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-firm);--_appearance-selectedAndHover-fill:var(--_connotation-color-dim);--_appearance-selectedAndHover-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-200);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-text:var(--_connotation-color-firm);--_appearance-checked-fill:var(--_connotation-color-soft);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-firm);--_appearance-checkedAndHover-fill:var(--_connotation-color-dim);--_appearance-checkedAndHover-outline:transparent}.appearance-harmony{--_appearance-idle-text:var(--_connotation-color-fierce);--_appearance-idle-fill:var(--_connotation-color-faint);--_appearance-idle-outline:var(--_connotation-color-intermediate)}.state-idle{--_appearance-color-text:var(--_appearance-idle-text);--_appearance-color-fill:var(--_appearance-idle-fill);--_appearance-color-outline:var(--_appearance-idle-outline)}.state-hover{--_appearance-color-text:var(--_appearance-hover-text);--_appearance-color-fill:var(--_appearance-hover-fill);--_appearance-color-outline:var(--_appearance-hover-outline)}.state-active{--_appearance-color-text:var(--_appearance-active-text);--_appearance-color-fill:var(--_appearance-active-fill);--_appearance-color-outline:var(--_appearance-active-outline)}.state-disabled{--_appearance-color-text:var(--_appearance-disabled-text);--_appearance-color-fill:var(--_appearance-disabled-fill);--_appearance-color-outline:var(--_appearance-disabled-outline)}.state-readonly{--_appearance-color-text:var(--_appearance-readonly-text);--_appearance-color-fill:var(--_appearance-readonly-fill);--_appearance-color-outline:var(--_appearance-readonly-outline)}.state-selected{--_appearance-color-text:var(--_appearance-selected-text);--_appearance-color-fill:var(--_appearance-selected-fill);--_appearance-color-outline:var(--_appearance-selected-outline)}.state-selectedAndHover{--_appearance-color-text:var(--_appearance-selectedAndHover-text);--_appearance-color-fill:var(--_appearance-selectedAndHover-fill);--_appearance-color-outline:var(--_appearance-selectedAndHover-outline)}.state-selectedAndDisabled{--_appearance-color-text:var(--_appearance-selectedAndDisabled-text);--_appearance-color-fill:var(--_appearance-selectedAndDisabled-fill);--_appearance-color-outline:var(--_appearance-selectedAndDisabled-outline)}.state-checked{--_appearance-color-text:var(--_appearance-checked-text);--_appearance-color-fill:var(--_appearance-checked-fill);--_appearance-color-outline:var(--_appearance-checked-outline)}.state-checkedAndHover{--_appearance-color-text:var(--_appearance-checkedAndHover-text);--_appearance-color-fill:var(--_appearance-checkedAndHover-fill);--_appearance-color-outline:var(--_appearance-checkedAndHover-outline)}.state-error{--_appearance-color-text:var(--_appearance-error-text);--_appearance-color-fill:var(--_appearance-error-fill);--_appearance-color-outline:var(--_appearance-error-outline)}.state-success{--_appearance-color-text:var(--_appearance-success-text);--_appearance-color-fill:var(--_appearance-success-fill);--_appearance-color-outline:var(--_appearance-success-outline)}.with-idle{--_appearance-color-text:var(--_appearance-idle-text);--_appearance-color-fill:var(--_appearance-idle-fill);--_appearance-color-outline:var(--_appearance-idle-outline)}@media (hover:hover){.with-hover:where(:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-hover-text);--_appearance-color-fill:var(--_appearance-hover-fill);--_appearance-color-outline:var(--_appearance-hover-outline)}}.with-hover:where(.hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-hover-text);--_appearance-color-fill:var(--_appearance-hover-fill);--_appearance-color-outline:var(--_appearance-hover-outline)}.with-active:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-active-text);--_appearance-color-fill:var(--_appearance-active-fill);--_appearance-color-outline:var(--_appearance-active-outline)}.with-disabled:where(.disabled,:disabled){--_appearance-color-text:var(--_appearance-disabled-text);--_appearance-color-fill:var(--_appearance-disabled-fill);--_appearance-color-outline:var(--_appearance-disabled-outline)}.with-readonly:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-readonly-text);--_appearance-color-fill:var(--_appearance-readonly-fill);--_appearance-color-outline:var(--_appearance-readonly-outline)}.with-selected:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-selected-text);--_appearance-color-fill:var(--_appearance-selected-fill);--_appearance-color-outline:var(--_appearance-selected-outline)}@media (hover:hover){.with-selectedAndHover:where(.selected):where(:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-selectedAndHover-text);--_appearance-color-fill:var(--_appearance-selectedAndHover-fill);--_appearance-color-outline:var(--_appearance-selectedAndHover-outline)}}.with-selectedAndHover:where(.selected):where(.hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-selectedAndHover-text);--_appearance-color-fill:var(--_appearance-selectedAndHover-fill);--_appearance-color-outline:var(--_appearance-selectedAndHover-outline)}.with-selectedAndDisabled:where(.selected):where(.disabled,:disabled){--_appearance-color-text:var(--_appearance-selectedAndDisabled-text);--_appearance-color-fill:var(--_appearance-selectedAndDisabled-fill);--_appearance-color-outline:var(--_appearance-selectedAndDisabled-outline)}.with-checked:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-checked-text);--_appearance-color-fill:var(--_appearance-checked-fill);--_appearance-color-outline:var(--_appearance-checked-outline)}@media (hover:hover){.with-checkedAndHover:where(.checked,:checked):where(:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-checkedAndHover-text);--_appearance-color-fill:var(--_appearance-checkedAndHover-fill);--_appearance-color-outline:var(--_appearance-checkedAndHover-outline)}}.with-checkedAndHover:where(.checked,:checked):where(.hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-checkedAndHover-text);--_appearance-color-fill:var(--_appearance-checkedAndHover-fill);--_appearance-color-outline:var(--_appearance-checkedAndHover-outline)}.with-error:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-error-text);--_appearance-color-fill:var(--_appearance-error-fill);--_appearance-color-outline:var(--_appearance-error-outline)}.with-success:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-success-text);--_appearance-color-fill:var(--_appearance-success-fill);--_appearance-color-outline:var(--_appearance-success-outline)}";
94
+ //#endregion
43
95
  //#region src/shared/design-system/defineVividComponent.ts
44
96
  var defineVividComponent = (name, type, template, dependencies, options) => ({
45
97
  name,
46
98
  type,
47
99
  template,
48
100
  dependencies,
49
- options
101
+ options: {
102
+ ...options,
103
+ styles: [
104
+ styles_default,
105
+ generateConnotationOverridesStylesheet(name),
106
+ ...options.styles ? [options.styles].flat() : []
107
+ ]
108
+ }
50
109
  });
51
110
  //#endregion
52
111
  //#region src/shared/aria/aria-change-subscription.ts
@@ -85,7 +144,7 @@ var reflectAriaProperty = (element, ariaProperty) => {
85
144
  var changedAriaProperties = /* @__PURE__ */ new WeakMap();
86
145
  var recordAriaPropertyChange = (element, ariaProperty) => {
87
146
  const changedProperties = changedAriaProperties.get(element);
88
- if (!changedProperties) changedAriaProperties.set(element, new Set([ariaProperty]));
147
+ if (!changedProperties) changedAriaProperties.set(element, /* @__PURE__ */ new Set([ariaProperty]));
89
148
  else changedProperties.add(ariaProperty);
90
149
  };
91
150
  var handleAriaPropertyChange = (element, ariaProperty) => {
@@ -287,7 +346,7 @@ var ReplacedPropHandling = (Base) => {
287
346
  */
288
347
  var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
289
348
  static {
290
- this.VIVID_VERSION = "5.25.0";
349
+ this.VIVID_VERSION = "5.28.0";
291
350
  }
292
351
  /**
293
352
  * Add data-vvd-component attribute with component name globally,
package/unbundled/vivid-element.js CHANGED
@@ -39,13 +39,73 @@ var createRegisterFunction = (definition) => (prefix = "vwc") => {
39
39
  registerComponent(definition);
40
40
  };
41
41
  //#endregion
42
+ //#region src/shared/styles/connotation.ts
43
+ var CONNOTATIONS = [
44
+ "accent",
45
+ "warning",
46
+ "cta",
47
+ "success",
48
+ "alert",
49
+ "information",
50
+ "announcement"
51
+ ];
52
+ var CONNOTATION_SHADES = [
53
+ "faint",
54
+ "soft",
55
+ "dim",
56
+ "pale",
57
+ "light",
58
+ "intermediate",
59
+ "firm",
60
+ "firm-all",
61
+ "fierce",
62
+ "fierce-primary",
63
+ "contrast",
64
+ "primary",
65
+ "primary-increment",
66
+ "primary-text"
67
+ ];
68
+ //#endregion
69
+ //#region src/shared/styles/connotationOverrides.ts
70
+ var cache = /* @__PURE__ */ new Map();
71
+ /**
72
+ * Generates a tiny stylesheet that forwards the public,
73
+ * `--vvd-<component>-<connotation>-<shade>` override API into the private
74
+ * `--_connotation-override-<shade>` variable consumed by the shared
75
+ * `styles.scss` prototype stylesheet.
76
+ *
77
+ * This lets every component keep supporting per-component connotation
78
+ * overrides without duplicating the (much larger) color-mapping stylesheet
79
+ * per component. It's generated once per component definition (not per
80
+ * instance), so there's no runtime cost per element.
81
+ */
82
+ function generateConnotationOverridesStylesheet(component) {
83
+ const cached = cache.get(component);
84
+ if (cached !== void 0) return cached;
85
+ const stylesheet = CONNOTATIONS.map((connotation) => {
86
+ return `.connotation-${connotation}{${CONNOTATION_SHADES.map((shade) => `--_connotation-override-${shade}:var(--vvd-${component}-${connotation}-${shade});`).join("")}}`;
87
+ }).join("");
88
+ cache.set(component, stylesheet);
89
+ return stylesheet;
90
+ }
91
+ //#endregion
92
+ //#region src/shared/styles/styles.scss?inline
93
+ var styles_default = ".connotation-accent{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-neutral-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-neutral-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-neutral-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-warning{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-warning-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-warning-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-warning-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-warning-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-warning-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-warning-300));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-warning-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-warning-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-warning-300));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-warning-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-warning-300));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-warning-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas-text))}.connotation-cta{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-cta-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-cta-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-cta-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-cta-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-cta-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-cta-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-cta-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-success{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-success-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-success-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-success-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-success-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-success-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-success-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-success-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-success-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-success-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-success-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-success-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-success-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-alert{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-alert-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-alert-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-alert-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-alert-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-alert-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-alert-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-alert-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-alert-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-alert-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-alert-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-alert-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-information{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-information-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-information-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-information-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-information-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-information-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-information-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-information-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-information-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-information-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-information-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-information-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-information-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.connotation-announcement{--_connotation-color-faint:var(--_connotation-override-faint,var(--vvd-color-announcement-50));--_connotation-color-soft:var(--_connotation-override-soft,var(--vvd-color-announcement-100));--_connotation-color-dim:var(--_connotation-override-dim,var(--vvd-color-announcement-200));--_connotation-color-pale:var(--_connotation-override-pale,var(--vvd-color-announcement-300));--_connotation-color-light:var(--_connotation-override-light,var(--vvd-color-announcement-400));--_connotation-color-intermediate:var(--_connotation-override-intermediate,var(--vvd-color-announcement-500));--_connotation-color-firm:var(--_connotation-override-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--_connotation-override-firm-all,var(--vvd-color-announcement-600));--_connotation-color-fierce:var(--_connotation-override-fierce,var(--vvd-color-announcement-700));--_connotation-color-fierce-primary:var(--_connotation-override-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-contrast:var(--_connotation-override-contrast,var(--vvd-color-announcement-800));--_connotation-color-primary:var(--_connotation-override-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-increment:var(--_connotation-override-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-primary-text:var(--_connotation-override-primary-text,var(--vvd-color-canvas))}.appearance-filled{--_appearance-idle-text:var(--_connotation-color-primary-text);--_appearance-idle-fill:var(--_connotation-color-primary);--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-primary-text);--_appearance-hover-fill:var(--_connotation-color-primary-increment);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-primary-text);--_appearance-active-fill:var(--_connotation-color-fierce);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-800);--_appearance-readonly-fill:var(--vvd-color-neutral-500);--_appearance-readonly-outline:transparent;--_appearance-selected-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-100);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-outline:transparent}.appearance-ghost{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-firm);--_appearance-hover-fill:var(--_connotation-color-faint);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-firm);--_appearance-active-fill:var(--_connotation-color-soft);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:transparent;--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:var(--_connotation-color-primary);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-selectedAndHover-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-200);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:var(--_connotation-color-primary);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-checkedAndHover-outline:transparent;--_appearance-error-fill:var(--vvd-color-alert-50);--_appearance-error-outline:transparent;--_appearance-success-fill:var(--vvd-color-success-50);--_appearance-success-outline:transparent}.appearance-ghost-light{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-fierce-primary);--_appearance-hover-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-fierce-primary);--_appearance-active-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:transparent;--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-selectedAndHover-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-200);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-checkedAndHover-outline:transparent}.appearance-outlined{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:var(--vvd-color-neutral-300);--_appearance-hover-text:var(--_connotation-color-firm);--_appearance-hover-fill:var(--_connotation-color-faint);--_appearance-hover-outline:var(--vvd-color-neutral-300);--_appearance-active-text:var(--_connotation-color-firm);--_appearance-active-fill:var(--_connotation-color-soft);--_appearance-active-outline:var(--vvd-color-neutral-300);--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:var(--vvd-color-neutral-300);--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:var(--vvd-color-neutral-300)}.appearance-outlined-light{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:var(--vvd-color-neutral-300);--_appearance-hover-text:var(--_connotation-color-fierce-primary);--_appearance-hover-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-hover-outline:var(--vvd-color-neutral-300);--_appearance-active-text:var(--_connotation-color-fierce-primary);--_appearance-active-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-active-outline:var(--vvd-color-neutral-300);--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:var(--vvd-color-neutral-300);--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:var(--vvd-color-neutral-300);--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:color-mix(in sRGB, var(--_connotation-color-firm), transparent 10%);--_appearance-selected-outline:var(--vvd-color-neutral-300);--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-selectedAndHover-outline:var(--vvd-color-neutral-300)}.appearance-duotone{--_appearance-idle-text:var(--_connotation-color-firm-all);--_appearance-idle-fill:transparent;--_appearance-idle-outline:var(--_connotation-color-pale);--_appearance-hover-text:var(--_connotation-color-firm-all);--_appearance-hover-fill:transparent;--_appearance-hover-outline:var(--_connotation-color-firm-all);--_appearance-active-text:var(--_connotation-color-firm-all);--_appearance-active-fill:var(--_connotation-color-faint);--_appearance-active-outline:var(--_connotation-color-pale);--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:var(--vvd-color-neutral-100);--_appearance-selected-text:var(--_connotation-color-firm-all);--_appearance-selected-fill:var(--_connotation-color-soft);--_appearance-selected-outline:var(--_connotation-color-pale);--_appearance-selectedAndHover-text:var(--_connotation-color-firm-all);--_appearance-selectedAndHover-fill:var(--_connotation-color-faint);--_appearance-selectedAndHover-outline:var(--_connotation-color-firm-all);--_appearance-checked-text:var(--_connotation-color-firm-all);--_appearance-checked-fill:var(--_connotation-color-soft);--_appearance-checked-outline:var(--_connotation-color-pale);--_appearance-checkedAndHover-text:var(--_connotation-color-firm-all);--_appearance-checkedAndHover-fill:var(--_connotation-color-faint);--_appearance-checkedAndHover-outline:var(--_connotation-color-firm-all)}.appearance-fieldset{--_appearance-idle-text:var(--vvd-color-canvas-text);--_appearance-idle-fill:var(--vvd-color-canvas);--_appearance-idle-outline:var(--vvd-color-neutral-500);--_appearance-hover-text:var(--vvd-color-canvas-text);--_appearance-hover-fill:var(--vvd-color-canvas);--_appearance-hover-outline:var(--vvd-color-neutral-700);--_appearance-active-text:var(--vvd-color-canvas-text);--_appearance-active-fill:var(--vvd-color-canvas);--_appearance-active-outline:var(--_connotation-color-firm);--_appearance-disabled-text:var(--vvd-color-neutral-600);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:var(--vvd-color-neutral-300);--_appearance-readonly-text:var(--vvd-color-canvas-text);--_appearance-readonly-fill:var(--vvd-color-neutral-200);--_appearance-readonly-outline:var(--vvd-color-neutral-400);--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:var(--_connotation-color-primary);--_appearance-selected-outline:var(--_connotation-color-primary);--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-selectedAndHover-outline:var(--_connotation-color-primary-increment);--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-100);--_appearance-selectedAndDisabled-outline:var(--vvd-color-neutral-300);--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:var(--_connotation-color-primary);--_appearance-checked-outline:var(--_connotation-color-primary);--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-checkedAndHover-outline:var(--_connotation-color-primary-increment);--_appearance-error-fill:var(--vvd-color-alert-50);--_appearance-error-outline:var(--vvd-color-alert-500);--_appearance-success-fill:var(--vvd-color-success-50);--_appearance-success-outline:var(--vvd-color-success-500)}.appearance-subtle{--_appearance-idle-text:var(--_connotation-color-contrast);--_appearance-idle-fill:var(--_connotation-color-soft);--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-contrast);--_appearance-hover-fill:var(--_connotation-color-dim);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-contrast);--_appearance-active-fill:var(--_connotation-color-pale);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:transparent;--_appearance-selected-text:var(--_connotation-color-primary-text);--_appearance-selected-fill:var(--_connotation-color-primary);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-selectedAndHover-outline:transparent;--_appearance-checked-text:var(--_connotation-color-primary-text);--_appearance-checked-fill:var(--_connotation-color-primary);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:var(--_connotation-color-primary-increment);--_appearance-checkedAndHover-outline:transparent}.appearance-subtle-light{--_appearance-idle-text:var(--_connotation-color-contrast);--_appearance-idle-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-contrast);--_appearance-hover-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 75%);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-contrast);--_appearance-active-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 65%);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:var(--vvd-color-neutral-100);--_appearance-disabled-outline:transparent;--_appearance-selected-text:var(--vvd-color-canvas);--_appearance-selected-fill:var(--_connotation-color-firm);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-primary-text);--_appearance-selectedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 10%);--_appearance-selectedAndHover-outline:transparent;--_appearance-checked-text:var(--vvd-color-canvas);--_appearance-checked-fill:var(--_connotation-color-firm);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-primary-text);--_appearance-checkedAndHover-fill:color-mix(in sRGB, var(--_connotation-color-fierce-primary), transparent 10%);--_appearance-checkedAndHover-outline:transparent}.appearance-listitem{--_appearance-idle-text:var(--_connotation-color-firm);--_appearance-idle-fill:transparent;--_appearance-idle-outline:transparent;--_appearance-hover-text:var(--_connotation-color-firm);--_appearance-hover-fill:var(--_connotation-color-faint);--_appearance-hover-outline:transparent;--_appearance-active-text:var(--_connotation-color-firm);--_appearance-active-fill:var(--_connotation-color-soft);--_appearance-active-outline:transparent;--_appearance-disabled-text:var(--vvd-color-neutral-300);--_appearance-disabled-fill:transparent;--_appearance-disabled-outline:transparent;--_appearance-readonly-text:var(--vvd-color-neutral-600);--_appearance-readonly-fill:transparent;--_appearance-readonly-outline:transparent;--_appearance-selected-text:var(--_connotation-color-firm);--_appearance-selected-fill:var(--_connotation-color-soft);--_appearance-selected-outline:transparent;--_appearance-selectedAndHover-text:var(--_connotation-color-firm);--_appearance-selectedAndHover-fill:var(--_connotation-color-dim);--_appearance-selectedAndHover-outline:transparent;--_appearance-selectedAndDisabled-text:var(--vvd-color-neutral-300);--_appearance-selectedAndDisabled-fill:var(--vvd-color-neutral-200);--_appearance-selectedAndDisabled-outline:transparent;--_appearance-checked-text:var(--_connotation-color-firm);--_appearance-checked-fill:var(--_connotation-color-soft);--_appearance-checked-outline:transparent;--_appearance-checkedAndHover-text:var(--_connotation-color-firm);--_appearance-checkedAndHover-fill:var(--_connotation-color-dim);--_appearance-checkedAndHover-outline:transparent}.appearance-harmony{--_appearance-idle-text:var(--_connotation-color-fierce);--_appearance-idle-fill:var(--_connotation-color-faint);--_appearance-idle-outline:var(--_connotation-color-intermediate)}.state-idle{--_appearance-color-text:var(--_appearance-idle-text);--_appearance-color-fill:var(--_appearance-idle-fill);--_appearance-color-outline:var(--_appearance-idle-outline)}.state-hover{--_appearance-color-text:var(--_appearance-hover-text);--_appearance-color-fill:var(--_appearance-hover-fill);--_appearance-color-outline:var(--_appearance-hover-outline)}.state-active{--_appearance-color-text:var(--_appearance-active-text);--_appearance-color-fill:var(--_appearance-active-fill);--_appearance-color-outline:var(--_appearance-active-outline)}.state-disabled{--_appearance-color-text:var(--_appearance-disabled-text);--_appearance-color-fill:var(--_appearance-disabled-fill);--_appearance-color-outline:var(--_appearance-disabled-outline)}.state-readonly{--_appearance-color-text:var(--_appearance-readonly-text);--_appearance-color-fill:var(--_appearance-readonly-fill);--_appearance-color-outline:var(--_appearance-readonly-outline)}.state-selected{--_appearance-color-text:var(--_appearance-selected-text);--_appearance-color-fill:var(--_appearance-selected-fill);--_appearance-color-outline:var(--_appearance-selected-outline)}.state-selectedAndHover{--_appearance-color-text:var(--_appearance-selectedAndHover-text);--_appearance-color-fill:var(--_appearance-selectedAndHover-fill);--_appearance-color-outline:var(--_appearance-selectedAndHover-outline)}.state-selectedAndDisabled{--_appearance-color-text:var(--_appearance-selectedAndDisabled-text);--_appearance-color-fill:var(--_appearance-selectedAndDisabled-fill);--_appearance-color-outline:var(--_appearance-selectedAndDisabled-outline)}.state-checked{--_appearance-color-text:var(--_appearance-checked-text);--_appearance-color-fill:var(--_appearance-checked-fill);--_appearance-color-outline:var(--_appearance-checked-outline)}.state-checkedAndHover{--_appearance-color-text:var(--_appearance-checkedAndHover-text);--_appearance-color-fill:var(--_appearance-checkedAndHover-fill);--_appearance-color-outline:var(--_appearance-checkedAndHover-outline)}.state-error{--_appearance-color-text:var(--_appearance-error-text);--_appearance-color-fill:var(--_appearance-error-fill);--_appearance-color-outline:var(--_appearance-error-outline)}.state-success{--_appearance-color-text:var(--_appearance-success-text);--_appearance-color-fill:var(--_appearance-success-fill);--_appearance-color-outline:var(--_appearance-success-outline)}.with-idle{--_appearance-color-text:var(--_appearance-idle-text);--_appearance-color-fill:var(--_appearance-idle-fill);--_appearance-color-outline:var(--_appearance-idle-outline)}@media (hover:hover){.with-hover:where(:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-hover-text);--_appearance-color-fill:var(--_appearance-hover-fill);--_appearance-color-outline:var(--_appearance-hover-outline)}}.with-hover:where(.hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-hover-text);--_appearance-color-fill:var(--_appearance-hover-fill);--_appearance-color-outline:var(--_appearance-hover-outline)}.with-active:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-active-text);--_appearance-color-fill:var(--_appearance-active-fill);--_appearance-color-outline:var(--_appearance-active-outline)}.with-disabled:where(.disabled,:disabled){--_appearance-color-text:var(--_appearance-disabled-text);--_appearance-color-fill:var(--_appearance-disabled-fill);--_appearance-color-outline:var(--_appearance-disabled-outline)}.with-readonly:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-readonly-text);--_appearance-color-fill:var(--_appearance-readonly-fill);--_appearance-color-outline:var(--_appearance-readonly-outline)}.with-selected:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-selected-text);--_appearance-color-fill:var(--_appearance-selected-fill);--_appearance-color-outline:var(--_appearance-selected-outline)}@media (hover:hover){.with-selectedAndHover:where(.selected):where(:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-selectedAndHover-text);--_appearance-color-fill:var(--_appearance-selectedAndHover-fill);--_appearance-color-outline:var(--_appearance-selectedAndHover-outline)}}.with-selectedAndHover:where(.selected):where(.hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-selectedAndHover-text);--_appearance-color-fill:var(--_appearance-selectedAndHover-fill);--_appearance-color-outline:var(--_appearance-selectedAndHover-outline)}.with-selectedAndDisabled:where(.selected):where(.disabled,:disabled){--_appearance-color-text:var(--_appearance-selectedAndDisabled-text);--_appearance-color-fill:var(--_appearance-selectedAndDisabled-fill);--_appearance-color-outline:var(--_appearance-selectedAndDisabled-outline)}.with-checked:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-checked-text);--_appearance-color-fill:var(--_appearance-checked-fill);--_appearance-color-outline:var(--_appearance-checked-outline)}@media (hover:hover){.with-checkedAndHover:where(.checked,:checked):where(:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-checkedAndHover-text);--_appearance-color-fill:var(--_appearance-checkedAndHover-fill);--_appearance-color-outline:var(--_appearance-checkedAndHover-outline)}}.with-checkedAndHover:where(.checked,:checked):where(.hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_appearance-checkedAndHover-text);--_appearance-color-fill:var(--_appearance-checkedAndHover-fill);--_appearance-color-outline:var(--_appearance-checkedAndHover-outline)}.with-error:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-error-text);--_appearance-color-fill:var(--_appearance-error-fill);--_appearance-color-outline:var(--_appearance-error-outline)}.with-success:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_appearance-success-text);--_appearance-color-fill:var(--_appearance-success-fill);--_appearance-color-outline:var(--_appearance-success-outline)}";
94
+ //#endregion
42
95
  //#region src/shared/design-system/defineVividComponent.ts
43
96
  var defineVividComponent = (name, type, template, dependencies, options) => ({
44
97
  name,
45
98
  type,
46
99
  template,
47
100
  dependencies,
48
- options
101
+ options: {
102
+ ...options,
103
+ styles: [
104
+ styles_default,
105
+ generateConnotationOverridesStylesheet(name),
106
+ ...options.styles ? [options.styles].flat() : []
107
+ ]
108
+ }
49
109
  });
50
110
  //#endregion
51
111
  //#region src/shared/aria/aria-change-subscription.ts
@@ -84,7 +144,7 @@ var reflectAriaProperty = (element, ariaProperty) => {
84
144
  var changedAriaProperties = /* @__PURE__ */ new WeakMap();
85
145
  var recordAriaPropertyChange = (element, ariaProperty) => {
86
146
  const changedProperties = changedAriaProperties.get(element);
87
- if (!changedProperties) changedAriaProperties.set(element, new Set([ariaProperty]));
147
+ if (!changedProperties) changedAriaProperties.set(element, /* @__PURE__ */ new Set([ariaProperty]));
88
148
  else changedProperties.add(ariaProperty);
89
149
  };
90
150
  var handleAriaPropertyChange = (element, ariaProperty) => {
@@ -286,7 +346,7 @@ var ReplacedPropHandling = (Base) => {
286
346
  */
287
347
  var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(FASTElement))) {
288
348
  static {
289
- this.VIVID_VERSION = "5.25.0";
349
+ this.VIVID_VERSION = "5.28.0";
290
350
  }
291
351
  /**
292
352
  * Add data-vvd-component attribute with component name globally,
package/unbundled/with-contextual-help.cjs CHANGED
@@ -1,4 +1,3 @@
1
- require("./chunk.cjs");
2
1
  const require_decorate = require("./decorate.cjs");
3
2
  let _microsoft_fast_element = require("@microsoft/fast-element");
4
3
  //#region src/shared/patterns/form-elements/with-contextual-help.ts
package/unbundled/with-error-text.cjs CHANGED
@@ -1,4 +1,3 @@
1
- require("./chunk.cjs");
2
1
  const require_decorate = require("./decorate.cjs");
3
2
  let _microsoft_fast_element = require("@microsoft/fast-element");
4
3
  //#region src/shared/patterns/form-elements/with-error-text.ts
package/unbundled/with-success-text.cjs CHANGED
@@ -1,4 +1,3 @@
1
- require("./chunk.cjs");
2
1
  const require_decorate = require("./decorate.cjs");
3
2
  let _microsoft_fast_element = require("@microsoft/fast-element");
4
3
  //#region src/shared/patterns/form-elements/with-success-text.ts
package/video-player/definition.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
- const require_definition = require("../unbundled/definition82.cjs");
2
+ const require_definition = require("../unbundled/definition83.cjs");
3
3
  exports.VwcVideoPlayerElement = require_definition.VideoPlayer;
4
4
  exports.registerVideoPlayer = require_definition.registerVideoPlayer;
5
5
  exports.videoPlayerDefinition = require_definition.videoPlayerDefinition;
package/video-player/definition.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as videoPlayerDefinition, r as VideoPlayer, t as registerVideoPlayer } from "../unbundled/definition82.js";
1
+ import { n as videoPlayerDefinition, r as VideoPlayer, t as registerVideoPlayer } from "../unbundled/definition83.js";
2
2
  export { VideoPlayer as VwcVideoPlayerElement, registerVideoPlayer, videoPlayerDefinition };