@vonage/vivid 5.14.0 → 5.15.1

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 (345) hide show
  1. package/README.md +1 -1
  2. package/accordion/definition.cjs +0 -5
  3. package/accordion/definition.js +0 -5
  4. package/accordion/index.cjs +1 -1
  5. package/accordion/index.js +3 -14
  6. package/accordion-item/definition.cjs +1 -1
  7. package/accordion-item/definition.js +1 -1
  8. package/alert/definition.cjs +2 -2
  9. package/alert/definition.js +2 -2
  10. package/alert/index.cjs +1 -1
  11. package/alert/index.js +1 -1
  12. package/audio-player/definition.cjs +2 -6
  13. package/audio-player/definition.js +2 -6
  14. package/audio-player/index.cjs +1 -1
  15. package/audio-player/index.js +2 -8
  16. package/banner/definition.cjs +1 -1
  17. package/banner/definition.js +1 -1
  18. package/breadcrumb/definition.cjs +0 -1
  19. package/breadcrumb/definition.js +0 -1
  20. package/breadcrumb/index.cjs +1 -1
  21. package/breadcrumb/index.js +0 -1
  22. package/breadcrumb-item/definition.cjs +1 -1
  23. package/breadcrumb-item/definition.js +1 -1
  24. package/breadcrumb-item/index.cjs +1 -1
  25. package/breadcrumb-item/index.js +1 -1
  26. package/bundled/attribute-binding-behaviour.cjs +1 -1
  27. package/bundled/attribute-binding-behaviour.js +1 -3
  28. package/bundled/base-color-picker.cjs +1 -1
  29. package/bundled/base-color-picker.js +4 -9
  30. package/bundled/base-progress.cjs +1 -1
  31. package/bundled/base-progress.js +0 -3
  32. package/bundled/button.cjs +1 -1
  33. package/bundled/button.js +1 -10
  34. package/bundled/calendar-picker.template.cjs +1 -1
  35. package/bundled/calendar-picker.template.js +90 -42
  36. package/bundled/children.js +1 -1
  37. package/bundled/definition.cjs +1 -1
  38. package/bundled/definition.js +1 -1
  39. package/bundled/definition10.cjs +1 -1
  40. package/bundled/definition10.js +0 -10
  41. package/bundled/definition11.cjs +1 -1
  42. package/bundled/definition11.js +0 -1
  43. package/bundled/definition12.cjs +2 -2
  44. package/bundled/definition12.js +1 -2
  45. package/bundled/definition13.cjs +1 -1
  46. package/bundled/definition13.js +1 -1
  47. package/bundled/definition17.cjs +1 -1
  48. package/bundled/definition17.js +1 -4
  49. package/bundled/definition18.cjs +1 -1
  50. package/bundled/definition18.js +6 -18
  51. package/bundled/definition19.cjs +2 -2
  52. package/bundled/definition19.js +8 -24
  53. package/bundled/definition2.cjs +5 -5
  54. package/bundled/definition2.js +26 -27
  55. package/bundled/definition20.cjs +1 -1
  56. package/bundled/definition20.js +1 -1
  57. package/bundled/definition22.cjs +5 -5
  58. package/bundled/definition22.js +2 -3
  59. package/bundled/definition3.cjs +1 -1
  60. package/bundled/definition3.js +1 -2
  61. package/bundled/definition5.cjs +1 -1
  62. package/bundled/definition5.js +1 -6
  63. package/bundled/definition6.cjs +1 -1
  64. package/bundled/definition6.js +1 -2
  65. package/bundled/definition7.cjs +1 -1
  66. package/bundled/definition7.js +2 -5
  67. package/bundled/definition8.cjs +1 -1
  68. package/bundled/definition8.js +2 -13
  69. package/bundled/definition9.js +9 -9
  70. package/bundled/delegates-aria.cjs +1 -1
  71. package/bundled/delegates-aria.js +1 -3
  72. package/bundled/floating-ui.dom.cjs +1 -1
  73. package/bundled/floating-ui.dom.js +491 -487
  74. package/bundled/form-associated.cjs +1 -1
  75. package/bundled/form-associated.js +9 -18
  76. package/bundled/key-codes.cjs +1 -1
  77. package/bundled/listbox.cjs +1 -1
  78. package/bundled/listbox.js +10 -27
  79. package/bundled/localized.cjs +1 -1
  80. package/bundled/localized.js +49 -48
  81. package/bundled/mixins.cjs +2 -2
  82. package/bundled/mixins.js +1 -4
  83. package/bundled/normalize.js +2 -2
  84. package/bundled/picker-field.template.cjs +1 -1
  85. package/bundled/picker-field.template.js +0 -1
  86. package/bundled/scrollIntoView.cjs +1 -1
  87. package/bundled/scrollIntoView.js +1 -4
  88. package/bundled/slider.template.cjs +1 -1
  89. package/bundled/slider.template.js +1 -1
  90. package/bundled/slottable-request.js +2 -1
  91. package/bundled/text-field.cjs +1 -1
  92. package/bundled/text-field.js +1 -1
  93. package/bundled/time-selection-picker.template.cjs +2 -2
  94. package/bundled/time-selection-picker.template.js +3 -6
  95. package/bundled/vivid-element.cjs +3 -3
  96. package/bundled/vivid-element.js +302 -293
  97. package/button/definition.cjs +1 -1
  98. package/button/definition.js +1 -1
  99. package/calendar/definition.cjs +0 -2
  100. package/calendar/definition.js +1 -3
  101. package/calendar/index.cjs +1 -1
  102. package/calendar/index.js +6 -8
  103. package/card/definition.cjs +1 -1
  104. package/card/definition.js +1 -1
  105. package/card/index.cjs +1 -1
  106. package/card/index.js +1 -1
  107. package/checkbox/definition.cjs +1 -2
  108. package/checkbox/definition.js +1 -2
  109. package/color-picker/definition.cjs +1 -6
  110. package/color-picker/definition.js +1 -6
  111. package/color-picker/index.cjs +1 -1
  112. package/color-picker/index.js +2 -7
  113. package/combobox/definition.cjs +2 -8
  114. package/combobox/definition.js +2 -8
  115. package/combobox/index.cjs +1 -1
  116. package/combobox/index.js +2 -9
  117. package/contextual-help/definition.cjs +1 -1
  118. package/contextual-help/definition.js +1 -1
  119. package/custom-elements.json +636 -1045
  120. package/data-grid/definition.cjs +72 -85
  121. package/data-grid/definition.js +75 -88
  122. package/data-grid/index.cjs +2 -2
  123. package/data-grid/index.js +7 -39
  124. package/date-picker/definition.cjs +1 -1
  125. package/date-picker/definition.js +1 -1
  126. package/date-range-picker/definition.cjs +1 -3
  127. package/date-range-picker/definition.js +1 -3
  128. package/date-range-picker/index.cjs +1 -1
  129. package/date-range-picker/index.js +1 -5
  130. package/date-time-picker/definition.cjs +1 -1
  131. package/date-time-picker/definition.js +1 -1
  132. package/dial-pad/definition.cjs +2 -11
  133. package/dial-pad/definition.js +3 -12
  134. package/dial-pad/index.cjs +1 -1
  135. package/dial-pad/index.js +14 -38
  136. package/dialog/definition.cjs +2 -3
  137. package/dialog/definition.js +2 -3
  138. package/dialog/index.cjs +1 -1
  139. package/dialog/index.js +1 -2
  140. package/empty-state/definition.js +1 -1
  141. package/fab/definition.cjs +1 -2
  142. package/fab/definition.js +1 -2
  143. package/fab/index.cjs +1 -1
  144. package/fab/index.js +1 -2
  145. package/file-picker/definition.cjs +2 -5
  146. package/file-picker/definition.js +3 -6
  147. package/file-picker/index.cjs +1 -1
  148. package/file-picker/index.js +1 -4
  149. package/icon/definition.cjs +7 -5
  150. package/icon/definition.js +7 -5
  151. package/index.cjs +95 -94
  152. package/index.js +18 -18
  153. package/layout/definition.cjs +1 -1
  154. package/layout/definition.js +1 -1
  155. package/layout/index.cjs +1 -1
  156. package/layout/index.js +1 -1
  157. package/lib/card/card.d.ts +0 -2
  158. package/lib/combobox/combobox.d.ts +1 -1
  159. package/lib/icon/icon.d.ts +0 -1
  160. package/lib/menu/menu.d.ts +0 -1
  161. package/lib/menu-item/menu-item.d.ts +0 -1
  162. package/lib/pagination/pagination.d.ts +0 -3
  163. package/lib/rich-text-editor/rte/exports.d.ts +1 -0
  164. package/lib/rich-text-editor/rte/features/keyboard-shortcuts.d.ts +16 -0
  165. package/lib/rich-text-editor/rte/instance.d.ts +2 -1
  166. package/lib/select/select.d.ts +2 -2
  167. package/lib/table/table-head.d.ts +1 -0
  168. package/lib/tabs/tabs.d.ts +0 -1
  169. package/lib/text-field/text-field.d.ts +0 -1
  170. package/locales/de-DE.cjs +95 -95
  171. package/locales/de-DE.js +95 -95
  172. package/locales/en-GB.cjs +1 -1
  173. package/locales/en-GB.js +1 -1
  174. package/locales/en-US.cjs +95 -95
  175. package/locales/en-US.js +95 -95
  176. package/locales/ja-JP.cjs +94 -94
  177. package/locales/ja-JP.js +94 -94
  178. package/locales/zh-CN.cjs +94 -94
  179. package/locales/zh-CN.js +94 -94
  180. package/menu/definition.cjs +2 -3
  181. package/menu/definition.js +2 -3
  182. package/menu-item/definition.cjs +1 -1
  183. package/menu-item/definition.js +1 -1
  184. package/nav-disclosure/definition.cjs +1 -1
  185. package/nav-disclosure/definition.js +1 -1
  186. package/nav-disclosure/index.cjs +1 -1
  187. package/nav-disclosure/index.js +1 -1
  188. package/nav-item/definition.cjs +1 -1
  189. package/nav-item/definition.js +1 -1
  190. package/nav-item/index.cjs +1 -1
  191. package/nav-item/index.js +1 -1
  192. package/number-field/definition.cjs +2 -2
  193. package/number-field/definition.js +2 -2
  194. package/number-field/index.cjs +1 -1
  195. package/number-field/index.js +1 -1
  196. package/package.json +19 -17
  197. package/pagination/definition.cjs +1 -3
  198. package/pagination/definition.js +3 -5
  199. package/pagination/index.cjs +3 -3
  200. package/pagination/index.js +4 -6
  201. package/popover/definition.cjs +1 -8
  202. package/popover/definition.js +1 -8
  203. package/popover/index.cjs +1 -1
  204. package/popover/index.js +6 -17
  205. package/popup/definition.cjs +1 -1
  206. package/popup/definition.js +1 -1
  207. package/radio/definition.cjs +1 -5
  208. package/radio/definition.js +1 -5
  209. package/radio-group/definition.js +2 -2
  210. package/range-slider/definition.cjs +1 -1
  211. package/range-slider/definition.js +2 -2
  212. package/range-slider/index.cjs +1 -1
  213. package/range-slider/index.js +1 -1
  214. package/rich-text-editor/definition.cjs +177 -63
  215. package/rich-text-editor/definition.js +177 -64
  216. package/rich-text-editor/index.cjs +12 -12
  217. package/rich-text-editor/index.js +1651 -1586
  218. package/rich-text-view/definition.js +1 -1
  219. package/searchable-select/definition.cjs +2 -5
  220. package/searchable-select/definition.js +2 -5
  221. package/searchable-select/index.cjs +1 -1
  222. package/searchable-select/index.js +2 -6
  223. package/select/definition.cjs +4 -14
  224. package/select/definition.js +5 -15
  225. package/selectable-box/definition.cjs +1 -1
  226. package/selectable-box/definition.js +2 -2
  227. package/selectable-box/index.cjs +1 -1
  228. package/selectable-box/index.js +1 -1
  229. package/side-drawer/definition.cjs +1 -1
  230. package/side-drawer/definition.js +2 -2
  231. package/side-drawer/index.cjs +1 -1
  232. package/side-drawer/index.js +2 -5
  233. package/simple-color-picker/definition.cjs +18 -9
  234. package/simple-color-picker/definition.js +19 -10
  235. package/simple-color-picker/index.cjs +5 -5
  236. package/simple-color-picker/index.js +23 -23
  237. package/slider/definition.cjs +1 -6
  238. package/slider/definition.js +3 -8
  239. package/split-button/definition.cjs +1 -1
  240. package/split-button/definition.js +2 -2
  241. package/split-button/index.cjs +1 -1
  242. package/split-button/index.js +1 -1
  243. package/status/definition.cjs +9 -3
  244. package/status/definition.js +11 -5
  245. package/status/index.cjs +10 -7
  246. package/status/index.js +46 -39
  247. package/styles/core/all.css +6 -5
  248. package/styles/core/theme.css +6 -5
  249. package/styles/core/typography.css +1 -2
  250. package/styles/tokens/theme-dark.css +17 -21
  251. package/styles/tokens/theme-light.css +17 -21
  252. package/styles/tokens/vivid-2-compat.css +1 -2
  253. package/switch/definition.cjs +1 -2
  254. package/switch/definition.js +2 -3
  255. package/switch/index.cjs +1 -1
  256. package/switch/index.js +1 -2
  257. package/tab/definition.cjs +1 -1
  258. package/tab/definition.js +2 -2
  259. package/tab-panel/definition.js +1 -1
  260. package/table/definition.cjs +17 -11
  261. package/table/definition.js +19 -13
  262. package/table/index.cjs +18 -14
  263. package/table/index.js +55 -48
  264. package/tabs/definition.cjs +0 -2
  265. package/tabs/definition.js +2 -4
  266. package/tabs/index.cjs +1 -1
  267. package/tabs/index.js +0 -2
  268. package/tag/definition.cjs +1 -1
  269. package/tag/definition.js +2 -2
  270. package/tag/index.cjs +1 -1
  271. package/tag/index.js +1 -1
  272. package/tag-group/definition.js +1 -1
  273. package/text-area/definition.cjs +1 -7
  274. package/text-area/definition.js +2 -8
  275. package/text-area/index.cjs +1 -1
  276. package/text-area/index.js +1 -7
  277. package/text-field/definition.cjs +0 -10
  278. package/text-field/definition.js +1 -11
  279. package/time-picker/definition.cjs +1 -1
  280. package/time-picker/definition.js +2 -2
  281. package/toggletip/definition.cjs +0 -2
  282. package/toggletip/definition.js +1 -3
  283. package/tooltip/definition.cjs +0 -1
  284. package/tooltip/definition.js +1 -2
  285. package/tree-view/definition.cjs +0 -16
  286. package/tree-view/definition.js +1 -17
  287. package/tree-view/index.cjs +1 -1
  288. package/tree-view/index.js +0 -16
  289. package/unbundled/_commonjsHelpers.cjs +6 -2
  290. package/unbundled/_commonjsHelpers.js +6 -2
  291. package/unbundled/anchored.js +1 -1
  292. package/unbundled/attribute-binding-behaviour.cjs +0 -1
  293. package/unbundled/attribute-binding-behaviour.js +0 -1
  294. package/unbundled/base-color-picker.cjs +2 -5
  295. package/unbundled/base-color-picker.js +2 -5
  296. package/unbundled/base-progress.cjs +0 -3
  297. package/unbundled/base-progress.js +0 -3
  298. package/unbundled/button.cjs +1 -10
  299. package/unbundled/button.js +1 -10
  300. package/unbundled/calendar-picker.template.cjs +2 -4
  301. package/unbundled/calendar-picker.template.js +2 -4
  302. package/unbundled/data-grid.options.js +1 -1
  303. package/unbundled/definition.cjs +349 -170
  304. package/unbundled/definition.js +348 -170
  305. package/unbundled/definition2.cjs +169 -351
  306. package/unbundled/definition2.js +169 -350
  307. package/unbundled/definition3.cjs +1 -2
  308. package/unbundled/definition3.js +1 -2
  309. package/unbundled/definition4.cjs +1 -2
  310. package/unbundled/definition4.js +3 -4
  311. package/unbundled/definition5.cjs +1 -1
  312. package/unbundled/definition5.js +2 -2
  313. package/unbundled/delegates-aria.cjs +1 -1
  314. package/unbundled/delegates-aria.js +1 -1
  315. package/unbundled/enums.js +1 -1
  316. package/unbundled/form-associated.cjs +4 -5
  317. package/unbundled/form-associated.js +4 -5
  318. package/unbundled/host-semantics.cjs +1 -0
  319. package/unbundled/host-semantics.js +2 -1
  320. package/unbundled/key-codes.js +1 -1
  321. package/unbundled/listbox.cjs +6 -14
  322. package/unbundled/listbox.js +6 -14
  323. package/unbundled/localized.cjs +1 -0
  324. package/unbundled/localized.js +1 -0
  325. package/unbundled/mixins.cjs +0 -2
  326. package/unbundled/mixins.js +2 -4
  327. package/unbundled/picker-field.template.cjs +1 -2
  328. package/unbundled/picker-field.template.js +1 -2
  329. package/unbundled/scrollIntoView.cjs +0 -1
  330. package/unbundled/scrollIntoView.js +0 -1
  331. package/unbundled/slider.template.js +1 -1
  332. package/unbundled/slottable-request.cjs +3 -2
  333. package/unbundled/slottable-request.js +3 -2
  334. package/unbundled/text-field.cjs +1 -1
  335. package/unbundled/text-field.js +1 -1
  336. package/unbundled/time-selection-picker.template.cjs +1 -4
  337. package/unbundled/time-selection-picker.template.js +1 -4
  338. package/unbundled/vivid-element.cjs +2 -1
  339. package/unbundled/vivid-element.js +2 -1
  340. package/video-player/definition.cjs +7953 -7720
  341. package/video-player/definition.js +7955 -7722
  342. package/video-player/index.cjs +38 -54
  343. package/video-player/index.js +12785 -12735
  344. package/visually-hidden/definition.js +1 -1
  345. package/vivid.api.json +48 -341
package/split-button/index.js CHANGED
@@ -73,7 +73,7 @@ i([
73
73
  i([
74
74
  e({ attribute: "indicator-aria-label" })
75
75
  ], n.prototype, "indicatorAriaLabel");
76
- const I = ':host{--_vvd-split-button-accent-firm-wrapper: var( --vvd-split-button-accent-firm );--_vvd-split-button-cta-firm-wrapper: var( --vvd-split-button-cta-firm );--_vvd-split-button-success-firm-wrapper: var( --vvd-split-button-success-firm );--_vvd-split-button-alert-firm-wrapper: var( --vvd-split-button-alert-firm );--_vvd-split-button-announcement-firm-wrapper: var( --vvd-split-button-announcement-firm )}:where(.control,.indicator):not(.appearance-filled,.appearance-outlined,.appearance-outlined-light){--vvd-split-button-accent-firm: var( --_vvd-split-button-accent-firm-wrapper, var(--vvd-split-button-accent-primary) );--vvd-split-button-cta-firm: var( --_vvd-split-button-cta-firm-wrapper, var(--vvd-split-button-cta-primary) );--vvd-split-button-success-firm: var( --_vvd-split-button-success-firm-wrapper, var(--vvd-split-button-success-primary) );--vvd-split-button-alert-firm: var( --_vvd-split-button-alert-firm-wrapper, var(--vvd-split-button-alert-primary) );--vvd-split-button-announcement-firm: var( --_vvd-split-button-announcement-firm-wrapper, var(--vvd-split-button-announcement-primary) )}:host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-split-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-split-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-split-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement,.indicator.connotation-announcement{--_connotation-color-primary: var(--vvd-split-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-split-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-split-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-split-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-split-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-split-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-split-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-split-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-split-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light,.indicator.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)),.indicator:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)),.indicator.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled,.indicator:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:disabled.appearance-outlined,.indicator:disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled,.indicator:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-outlined-light,.indicator:disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled,.indicator.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled.appearance-outlined,.indicator.disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled,.indicator.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled.appearance-outlined-light,.indicator.disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-filled,.indicator:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)),.indicator:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-filled,.indicator.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)),.indicator.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:not(.disabled){cursor:pointer}.control.disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined,.indicator.appearance-outlined-light{--focus-inset: 1px}.indicator:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:"";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined,.appearance-outlined-light):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined,.appearance-outlined-light):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}', b = ({
76
+ const I = ':host{--_vvd-split-button-accent-firm-wrapper: var( --vvd-split-button-accent-firm );--_vvd-split-button-cta-firm-wrapper: var( --vvd-split-button-cta-firm );--_vvd-split-button-success-firm-wrapper: var( --vvd-split-button-success-firm );--_vvd-split-button-alert-firm-wrapper: var( --vvd-split-button-alert-firm );--_vvd-split-button-announcement-firm-wrapper: var( --vvd-split-button-announcement-firm )}:where(.control,.indicator):not(.appearance-filled,.appearance-outlined,.appearance-outlined-light){--vvd-split-button-accent-firm: var( --_vvd-split-button-accent-firm-wrapper, var(--vvd-split-button-accent-primary) );--vvd-split-button-cta-firm: var( --_vvd-split-button-cta-firm-wrapper, var(--vvd-split-button-cta-primary) );--vvd-split-button-success-firm: var( --_vvd-split-button-success-firm-wrapper, var(--vvd-split-button-success-primary) );--vvd-split-button-alert-firm: var( --_vvd-split-button-alert-firm-wrapper, var(--vvd-split-button-alert-primary) );--vvd-split-button-announcement-firm: var( --_vvd-split-button-announcement-firm-wrapper, var(--vvd-split-button-announcement-primary) )}:host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-split-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-split-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-split-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement,.indicator.connotation-announcement{--_connotation-color-primary: var(--vvd-split-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-split-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-split-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-split-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-split-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-split-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-split-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-split-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-split-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light,.indicator.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}@media(hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)),.indicator:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)),.indicator.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light,.indicator.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled,.indicator:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:disabled.appearance-outlined,.indicator:disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled,.indicator:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled.appearance-outlined-light,.indicator:disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled,.indicator.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled.appearance-outlined,.indicator.disabled.appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled,.indicator.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled.appearance-outlined-light,.indicator.disabled.appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-filled,.indicator:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)),.indicator:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator:active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-filled,.indicator.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined,.indicator.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)),.indicator.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-light,.indicator.active:where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.control:not(.disabled){cursor:pointer}.control.disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined,.indicator.appearance-outlined-light{--focus-inset: 1px}.indicator:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:"";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined,.appearance-outlined-light):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined,.appearance-outlined-light):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}', b = ({
77
77
  connotation: r,
78
78
  appearance: a,
79
79
  shape: o,
package/status/definition.cjs CHANGED
@@ -9,7 +9,7 @@ const affix = require('../unbundled/affix.cjs');
9
9
  const fastWebUtilities = require('@microsoft/fast-web-utilities');
10
10
  const enums = require('../unbundled/enums.cjs');
11
11
 
12
- const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
12
+ const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";
13
13
 
14
14
  var __defProp = Object.defineProperty;
15
15
  var __decorateClass = (decorators, target, key, kind) => {
@@ -28,6 +28,9 @@ __decorateClass([
28
28
  __decorateClass([
29
29
  fastElement.attr
30
30
  ], Status.prototype, "connotation");
31
+ __decorateClass([
32
+ fastElement.observable
33
+ ], Status.prototype, "descriptionSlottedContent");
31
34
 
32
35
  const DEFAULT_ICON_BY_CONNOTATION = {
33
36
  [enums.Connotation.Success]: "check-circle-solid",
@@ -52,8 +55,11 @@ const StatusTemplate = (context) => {
52
55
  ${(x) => affixIconTemplate(getEffectiveIcon(x), affix.IconWrapper.Slot)}
53
56
  <div class="text">
54
57
  ${fastElement.when((x) => x.status, getHeaderTemplate())}
55
- <div class="description">
56
- <slot></slot>
58
+ <div
59
+ class="description"
60
+ data-has-description="${(x) => (x.descriptionSlottedContent?.length ?? 0) > 0}"
61
+ >
62
+ <slot ${fastElement.slotted("descriptionSlottedContent")}></slot>
57
63
  </div>
58
64
  </div>
59
65
  </div>
package/status/definition.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { iconDefinition } from '../icon/definition.js';
2
- import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
3
- import { attr, when, html } from '@microsoft/fast-element';
2
+ import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
3
+ import { attr, observable, when, slotted, html } from '@microsoft/fast-element';
4
4
  import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
5
5
  import { classNames } from '@microsoft/fast-web-utilities';
6
6
  import { C as Connotation } from '../unbundled/enums.js';
7
7
 
8
- const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
8
+ const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";
9
9
 
10
10
  var __defProp = Object.defineProperty;
11
11
  var __decorateClass = (decorators, target, key, kind) => {
@@ -24,6 +24,9 @@ __decorateClass([
24
24
  __decorateClass([
25
25
  attr
26
26
  ], Status.prototype, "connotation");
27
+ __decorateClass([
28
+ observable
29
+ ], Status.prototype, "descriptionSlottedContent");
27
30
 
28
31
  const DEFAULT_ICON_BY_CONNOTATION = {
29
32
  [Connotation.Success]: "check-circle-solid",
@@ -48,8 +51,11 @@ const StatusTemplate = (context) => {
48
51
  ${(x) => affixIconTemplate(getEffectiveIcon(x), IconWrapper.Slot)}
49
52
  <div class="text">
50
53
  ${when((x) => x.status, getHeaderTemplate())}
51
- <div class="description">
52
- <slot></slot>
54
+ <div
55
+ class="description"
56
+ data-has-description="${(x) => (x.descriptionSlottedContent?.length ?? 0) > 0}"
57
+ >
58
+ <slot ${slotted("descriptionSlottedContent")}></slot>
53
59
  </div>
54
60
  </div>
55
61
  </div>
package/status/index.cjs CHANGED
@@ -1,11 +1,14 @@
1
- "use strict";const d=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),c=require("../bundled/affix.cjs"),i=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),m=".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";var p=Object.defineProperty,l=(o,e,t,C)=>{for(var a=void 0,r=o.length-1,v;r>=0;r--)(v=o[r])&&(a=v(e,t,a)||a);return a&&p(e,t,a),a};class s extends c.AffixIcon(n.VividElement){}l([n.attr],s.prototype,"status");l([n.attr],s.prototype,"connotation");const _={[i.Connotation.Success]:"check-circle-solid",[i.Connotation.Information]:"info-solid",[i.Connotation.Warning]:"warning-solid",[i.Connotation.Alert]:"error-solid"},g=({connotation:o})=>u.classNames("base",o?`connotation-${o}`:"");function x(o){return o.icon?o.icon:o.connotation?_[o.connotation]:void 0}function w(){return n.html`<div class="headline">${o=>o.status}</div>`}const y=o=>{const e=c.affixIconTemplateFactory(o);return n.html`
2
- <div class="${g}">
3
- ${t=>e(x(t),c.IconWrapper.Slot)}
1
+ "use strict";const d=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),s=require("../bundled/affix.cjs"),i=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/slotted.cjs"),p=require("../bundled/class-names.cjs"),m=".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";var _=Object.defineProperty,v=(o,a,t,I)=>{for(var e=void 0,c=o.length-1,l;c>=0;c--)(l=o[c])&&(e=l(a,t,e)||e);return e&&_(a,t,e),e};class r extends s.AffixIcon(n.VividElement){}v([n.attr],r.prototype,"status");v([n.attr],r.prototype,"connotation");v([n.observable],r.prototype,"descriptionSlottedContent");const g={[i.Connotation.Success]:"check-circle-solid",[i.Connotation.Information]:"info-solid",[i.Connotation.Warning]:"warning-solid",[i.Connotation.Alert]:"error-solid"},x=({connotation:o})=>p.classNames("base",o?`connotation-${o}`:"");function h(o){return o.icon?o.icon:o.connotation?g[o.connotation]:void 0}function y(){return n.html`<div class="headline">${o=>o.status}</div>`}const b=o=>{const a=s.affixIconTemplateFactory(o);return n.html`
2
+ <div class="${x}">
3
+ ${t=>a(h(t),s.IconWrapper.Slot)}
4
4
  <div class="text">
5
- ${f.when(t=>t.status,w())}
6
- <div class="description">
7
- <slot></slot>
5
+ ${f.when(t=>t.status,y())}
6
+ <div
7
+ class="description"
8
+ data-has-description="${t=>(t.descriptionSlottedContent?.length??0)>0}"
9
+ >
10
+ <slot ${u.slotted("descriptionSlottedContent")}></slot>
8
11
  </div>
9
12
  </div>
10
13
  </div>
11
- `},b=n.defineVividComponent("status",s,y,[d.iconDefinition],{styles:m}),h=n.createRegisterFunction(b);h();
14
+ `},w=n.defineVividComponent("status",r,b,[d.iconDefinition],{styles:m}),C=n.createRegisterFunction(w);C();
package/status/index.js CHANGED
@@ -1,55 +1,62 @@
1
1
  import { i as d } from "../bundled/definition2.js";
2
- import { V as f, a as s, h as v, c as m, d as p } from "../bundled/vivid-element.js";
3
- import { b as u, a as _, I as g } from "../bundled/affix.js";
4
- import { C as r } from "../bundled/enums.js";
5
- import { w as x } from "../bundled/when.js";
6
- import { c as w } from "../bundled/class-names.js";
7
- const b = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
8
- var y = Object.defineProperty, l = (o, a, t, $) => {
9
- for (var n = void 0, e = o.length - 1, c; e >= 0; e--)
10
- (c = o[e]) && (n = c(a, t, n) || n);
11
- return n && y(a, t, n), n;
2
+ import { V as f, a as v, o as p, h as l, c as m, d as u } from "../bundled/vivid-element.js";
3
+ import { b as _, a as g, I as x } from "../bundled/affix.js";
4
+ import { C as e } from "../bundled/enums.js";
5
+ import { w as b } from "../bundled/when.js";
6
+ import { s as y } from "../bundled/slotted.js";
7
+ import { c as h } from "../bundled/class-names.js";
8
+ const w = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";
9
+ var C = Object.defineProperty, c = (o, a, t, D) => {
10
+ for (var n = void 0, i = o.length - 1, s; i >= 0; i--)
11
+ (s = o[i]) && (n = s(a, t, n) || n);
12
+ return n && C(a, t, n), n;
12
13
  };
13
- class i extends u(f) {
14
+ class r extends _(f) {
14
15
  }
15
- l([
16
- s
17
- ], i.prototype, "status");
18
- l([
19
- s
20
- ], i.prototype, "connotation");
21
- const h = {
22
- [r.Success]: "check-circle-solid",
23
- [r.Information]: "info-solid",
24
- [r.Warning]: "warning-solid",
25
- [r.Alert]: "error-solid"
26
- }, I = ({ connotation: o }) => w("base", o ? `connotation-${o}` : "");
27
- function C(o) {
28
- return o.icon ? o.icon : o.connotation ? h[o.connotation] : void 0;
16
+ c([
17
+ v
18
+ ], r.prototype, "status");
19
+ c([
20
+ v
21
+ ], r.prototype, "connotation");
22
+ c([
23
+ p
24
+ ], r.prototype, "descriptionSlottedContent");
25
+ const I = {
26
+ [e.Success]: "check-circle-solid",
27
+ [e.Information]: "info-solid",
28
+ [e.Warning]: "warning-solid",
29
+ [e.Alert]: "error-solid"
30
+ }, S = ({ connotation: o }) => h("base", o ? `connotation-${o}` : "");
31
+ function T(o) {
32
+ return o.icon ? o.icon : o.connotation ? I[o.connotation] : void 0;
29
33
  }
30
- function T() {
31
- return v`<div class="headline">${(o) => o.status}</div>`;
34
+ function $() {
35
+ return l`<div class="headline">${(o) => o.status}</div>`;
32
36
  }
33
37
  const N = (o) => {
34
- const a = _(o);
35
- return v`
36
- <div class="${I}">
37
- ${(t) => a(C(t), g.Slot)}
38
+ const a = g(o);
39
+ return l`
40
+ <div class="${S}">
41
+ ${(t) => a(T(t), x.Slot)}
38
42
  <div class="text">
39
- ${x((t) => t.status, T())}
40
- <div class="description">
41
- <slot></slot>
43
+ ${b((t) => t.status, $())}
44
+ <div
45
+ class="description"
46
+ data-has-description="${(t) => (t.descriptionSlottedContent?.length ?? 0) > 0}"
47
+ >
48
+ <slot ${y("descriptionSlottedContent")}></slot>
42
49
  </div>
43
50
  </div>
44
51
  </div>
45
52
  `;
46
- }, O = p(
53
+ }, O = u(
47
54
  "status",
48
- i,
55
+ r,
49
56
  N,
50
57
  [d],
51
58
  {
52
- styles: b
59
+ styles: w
53
60
  }
54
- ), S = m(O);
55
- S();
61
+ ), A = m(O);
62
+ A();
package/styles/core/all.css CHANGED
@@ -1,17 +1,18 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
  /**
6
- * Do not edit directly
7
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
5
+ * Do not edit directly, this file was auto-generated.
8
6
  */
9
7
  .vvd-root {
10
- background-color: var(--vvd-color-canvas);
11
8
  color: var(--vvd-color-canvas-text);
12
9
  color-scheme: var(--vvd-color-scheme);
13
10
  }
14
11
 
12
+ :root.vvd-root {
13
+ background-color: var(--vvd-color-canvas);
14
+ }
15
+
15
16
  .vvd-scrollbar {
16
17
  --scrollbar-track-color: transparent;
17
18
  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);
package/styles/core/theme.css CHANGED
@@ -1,17 +1,18 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
  /**
6
- * Do not edit directly
7
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
5
+ * Do not edit directly, this file was auto-generated.
8
6
  */
9
7
  .vvd-root {
10
- background-color: var(--vvd-color-canvas);
11
8
  color: var(--vvd-color-canvas-text);
12
9
  color-scheme: var(--vvd-color-scheme);
13
10
  }
14
11
 
12
+ :root.vvd-root {
13
+ background-color: var(--vvd-color-canvas);
14
+ }
15
+
15
16
  .vvd-scrollbar {
16
17
  --scrollbar-track-color: transparent;
17
18
  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);
package/styles/core/typography.css CHANGED
@@ -1,6 +1,5 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
  .vvd-root:root {
6
5
  --vvd-size-font-scale-base: 1rem;
package/styles/tokens/theme-dark.css CHANGED
@@ -1,18 +1,14 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
  /**
6
- * Do not edit directly
7
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
5
+ * Do not edit directly, this file was auto-generated.
8
6
  */
9
7
  /**
10
- * Do not edit directly
11
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
8
+ * Do not edit directly, this file was auto-generated.
12
9
  */
13
10
  /**
14
- * Do not edit directly
15
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
11
+ * Do not edit directly, this file was auto-generated.
16
12
  */
17
13
  @property --vvd-size-density {
18
14
  syntax: "<integer>";
@@ -137,19 +133,19 @@
137
133
  --vvd-neutral-tint-shadow-surface-12dp: none;
138
134
  --vvd-neutral-tint-shadow-surface-16dp: none;
139
135
  --vvd-neutral-tint-shadow-surface-24dp: none;
140
- --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;
141
- --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;
142
- --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;
143
- --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;
144
- --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;
145
- --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;
146
- --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;
147
- --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;
148
- --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;
149
- --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;
150
- --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;
151
- --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;
152
- --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;
136
+ --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16) * 4.125)/1.3333333333333333 Montserrat;
137
+ --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16) * 3.25)/1.3076923076923077 Montserrat;
138
+ --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16) * 2.5)/1.3 Montserrat;
139
+ --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16) * 2)/1.375 Montserrat;
140
+ --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.625)/1.3846153846153846 Montserrat;
141
+ --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.25)/1.4 Montserrat;
142
+ --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
143
+ --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
144
+ --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Roboto Mono;
145
+ --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
146
+ --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
147
+ --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
148
+ --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
153
149
  }
154
150
 
155
151
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/styles/tokens/theme-light.css CHANGED
@@ -1,18 +1,14 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
  /**
6
- * Do not edit directly
7
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
5
+ * Do not edit directly, this file was auto-generated.
8
6
  */
9
7
  /**
10
- * Do not edit directly
11
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
8
+ * Do not edit directly, this file was auto-generated.
12
9
  */
13
10
  /**
14
- * Do not edit directly
15
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
11
+ * Do not edit directly, this file was auto-generated.
16
12
  */
17
13
  @property --vvd-size-density {
18
14
  syntax: "<integer>";
@@ -137,19 +133,19 @@
137
133
  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);
138
134
  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);
139
135
  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);
140
- --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;
141
- --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;
142
- --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;
143
- --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;
144
- --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;
145
- --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;
146
- --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;
147
- --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;
148
- --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;
149
- --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;
150
- --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;
151
- --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;
152
- --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;
136
+ --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16) * 4.125)/1.3333333333333333 Montserrat;
137
+ --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16) * 3.25)/1.3076923076923077 Montserrat;
138
+ --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16) * 2.5)/1.3 Montserrat;
139
+ --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16) * 2)/1.375 Montserrat;
140
+ --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.625)/1.3846153846153846 Montserrat;
141
+ --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16) * 1.25)/1.4 Montserrat;
142
+ --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
143
+ --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Montserrat;
144
+ --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.875)/1.4285714285714286 Roboto Mono;
145
+ --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
146
+ --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16) * 0.75)/1.3333333333333333 Montserrat;
147
+ --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
148
+ --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16))/1.5 Montserrat;
153
149
  }
154
150
 
155
151
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/styles/tokens/vivid-2-compat.css CHANGED
@@ -1,6 +1,5 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 25 Feb 2026 12:47:07 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
  .vvd-root, ::part(vvd-root),
6
5
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/switch/definition.cjs CHANGED
@@ -9,7 +9,7 @@ const fastWebUtilities = require('@microsoft/fast-web-utilities');
9
9
  const delegatesAria = require('../unbundled/delegates-aria.cjs');
10
10
  const formAssociated = require('../unbundled/form-associated.cjs');
11
11
 
12
- const styles = ":host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;outline:none}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;flex-shrink:0;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
12
+ const styles = ":host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media(hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;outline:none}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;flex-shrink:0;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
13
13
 
14
14
  var __defProp = Object.defineProperty;
15
15
  var __decorateClass = (decorators, target, key, kind) => {
@@ -59,7 +59,6 @@ class Switch extends delegatesAria.DelegatesAria(
59
59
  * @internal
60
60
  */
61
61
  readOnlyChanged() {
62
- /* v8 ignore if -- @preserve */
63
62
  if (this.proxy instanceof HTMLInputElement) {
64
63
  this.proxy.readOnly = this.readOnly;
65
64
  }