@vonage/vivid 4.24.0 → 4.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (392) hide show
  1. package/custom-elements.json +12314 -4711
  2. package/elevation/index.cjs +1 -1
  3. package/elevation/index.js +1 -1
  4. package/index.cjs +112 -150
  5. package/index.js +37 -35
  6. package/lib/accordion-item/accordion-item.d.ts +6 -0
  7. package/lib/action-group/action-group.d.ts +6 -0
  8. package/lib/alert/alert.d.ts +20 -0
  9. package/lib/audio-player/audio-player.d.ts +6 -0
  10. package/lib/badge/badge.d.ts +9 -1
  11. package/lib/banner/banner.d.ts +25 -0
  12. package/lib/breadcrumb/breadcrumb.d.ts +6 -0
  13. package/lib/breadcrumb-item/breadcrumb-item.d.ts +63 -7
  14. package/lib/button/button.d.ts +732 -7
  15. package/lib/button/locale.d.ts +3 -0
  16. package/lib/calendar-event/calendar-event.d.ts +6 -0
  17. package/lib/card/card.d.ts +394 -2
  18. package/lib/card/card.template.d.ts +2 -1
  19. package/lib/checkbox/checkbox.d.ts +1822 -5
  20. package/lib/combobox/combobox.d.ts +1827 -20
  21. package/lib/data-grid/data-grid-cell.d.ts +339 -1
  22. package/lib/data-grid/locale.d.ts +5 -0
  23. package/lib/date-picker/date-picker.d.ts +1676 -207
  24. package/lib/date-range-picker/date-range-picker.d.ts +840 -107
  25. package/lib/date-time-picker/date-time-picker.d.ts +1678 -209
  26. package/lib/dial-pad/dial-pad.d.ts +8 -0
  27. package/lib/dialog/dialog.d.ts +12 -0
  28. package/lib/divider/divider.d.ts +6 -0
  29. package/lib/fab/fab.d.ts +6 -0
  30. package/lib/file-picker/file-picker.d.ts +1508 -30
  31. package/lib/header/header.d.ts +6 -0
  32. package/lib/icon/icon.d.ts +1 -0
  33. package/lib/icon/icon.template.d.ts +2 -1
  34. package/lib/menu/menu.d.ts +16 -7
  35. package/lib/menu/name.d.ts +1 -0
  36. package/lib/menu-item/menu-item.d.ts +14 -2
  37. package/lib/nav/nav.d.ts +6 -0
  38. package/lib/nav-disclosure/nav-disclosure.d.ts +13 -0
  39. package/lib/nav-item/nav-item.d.ts +405 -3
  40. package/lib/note/note.d.ts +6 -0
  41. package/lib/number-field/number-field.d.ts +1857 -36
  42. package/lib/option/option.d.ts +12 -0
  43. package/lib/progress/progress.d.ts +6 -0
  44. package/lib/progress-ring/progress-ring.d.ts +6 -0
  45. package/lib/radio/radio.d.ts +1137 -4
  46. package/lib/radio-group/radio-group.d.ts +20 -2
  47. package/lib/range-slider/range-slider.d.ts +752 -5
  48. package/lib/rich-text-editor/definition.d.ts +2 -2
  49. package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +3 -1
  50. package/lib/rich-text-editor/locale.d.ts +1 -0
  51. package/lib/rich-text-editor/menubar/menubar.d.ts +6 -0
  52. package/lib/rich-text-editor/rich-text-editor.d.ts +352 -2
  53. package/lib/searchable-select/option-tag.d.ts +6 -0
  54. package/lib/searchable-select/searchable-select.d.ts +1857 -36
  55. package/lib/select/select.d.ts +1843 -28
  56. package/lib/selectable-box/selectable-box.d.ts +6 -0
  57. package/lib/slider/slider.d.ts +384 -2
  58. package/lib/split-button/split-button.d.ts +18 -0
  59. package/lib/switch/switch.d.ts +386 -3
  60. package/lib/tab/tab.d.ts +18 -1
  61. package/lib/tab-panel/tab-panel.d.ts +6 -0
  62. package/lib/tag/tag.d.ts +12 -0
  63. package/lib/tag-group/tag-group.d.ts +6 -0
  64. package/lib/text-area/text-area.d.ts +2174 -19
  65. package/lib/text-field/text-field.d.ts +2195 -31
  66. package/lib/time-picker/time-picker.d.ts +839 -106
  67. package/lib/toggletip/toggletip.d.ts +10 -4
  68. package/lib/tooltip/tooltip.d.ts +10 -4
  69. package/lib/tree-item/tree-item.d.ts +12 -0
  70. package/lib/tree-view/tree-view.d.ts +6 -0
  71. package/lib/video-player/video-player.d.ts +6 -0
  72. package/lib/visually-hidden/definition.d.ts +4 -0
  73. package/lib/visually-hidden/visually-hidden.d.ts +3 -0
  74. package/lib/visually-hidden/visually-hidden.template.d.ts +3 -0
  75. package/locales/de-DE.cjs +33 -1
  76. package/locales/de-DE.js +33 -1
  77. package/locales/en-GB.cjs +33 -1
  78. package/locales/en-GB.js +33 -1
  79. package/locales/en-US.cjs +33 -1
  80. package/locales/en-US.js +33 -1
  81. package/locales/ja-JP.cjs +33 -1
  82. package/locales/ja-JP.js +33 -1
  83. package/locales/zh-CN.cjs +33 -1
  84. package/locales/zh-CN.js +33 -1
  85. package/menu/index.cjs +1 -1
  86. package/menu/index.js +1 -1
  87. package/nav/index.cjs +1 -1
  88. package/nav/index.js +1 -1
  89. package/nav-disclosure/index.cjs +1 -1
  90. package/nav-disclosure/index.js +1 -1
  91. package/nav-item/index.cjs +1 -1
  92. package/nav-item/index.js +1 -1
  93. package/note/index.cjs +1 -1
  94. package/note/index.js +1 -1
  95. package/number-field/index.cjs +1 -1
  96. package/number-field/index.js +1 -1
  97. package/option/index.cjs +1 -1
  98. package/option/index.js +1 -1
  99. package/package.json +1 -1
  100. package/pagination/index.cjs +1 -1
  101. package/pagination/index.js +1 -1
  102. package/popup/index.cjs +1 -1
  103. package/popup/index.js +1 -1
  104. package/progress/index.cjs +1 -1
  105. package/progress/index.js +1 -1
  106. package/progress-ring/index.cjs +1 -1
  107. package/progress-ring/index.js +1 -1
  108. package/radio/index.cjs +1 -1
  109. package/radio/index.js +1 -1
  110. package/radio-group/index.cjs +1 -1
  111. package/radio-group/index.js +1 -1
  112. package/range-slider/index.cjs +1 -1
  113. package/range-slider/index.js +1 -1
  114. package/rich-text-editor/index.cjs +1 -1
  115. package/rich-text-editor/index.js +1 -1
  116. package/searchable-select/index.cjs +1 -1
  117. package/searchable-select/index.js +1 -1
  118. package/select/index.cjs +1 -1
  119. package/select/index.js +1 -1
  120. package/selectable-box/index.cjs +1 -1
  121. package/selectable-box/index.js +1 -1
  122. package/shared/affix.cjs +13 -7
  123. package/shared/affix.js +13 -8
  124. package/shared/aria/delegates-aria.d.ts +6 -0
  125. package/shared/aria/host-semantics.d.ts +6 -0
  126. package/shared/breadcrumb-item.cjs +2 -5
  127. package/shared/breadcrumb-item.js +2 -5
  128. package/shared/button.cjs +13 -11
  129. package/shared/button.js +13 -11
  130. package/shared/calendar-picker.template.cjs +3 -3
  131. package/shared/calendar-picker.template.js +1 -1
  132. package/shared/char-count.cjs +92 -0
  133. package/shared/char-count.js +90 -0
  134. package/shared/definition.js +1 -1
  135. package/shared/definition10.js +1 -1
  136. package/shared/definition11.cjs +27 -44
  137. package/shared/definition11.js +28 -45
  138. package/shared/definition12.js +1 -1
  139. package/shared/definition13.js +1 -1
  140. package/shared/definition14.cjs +53 -22
  141. package/shared/definition14.js +54 -23
  142. package/shared/definition15.cjs +31 -36
  143. package/shared/definition15.js +30 -36
  144. package/shared/definition16.cjs +43 -63
  145. package/shared/definition16.js +42 -63
  146. package/shared/definition17.cjs +8 -4
  147. package/shared/definition17.js +8 -4
  148. package/shared/definition18.cjs +10 -14
  149. package/shared/definition18.js +9 -14
  150. package/shared/definition19.cjs +85 -100
  151. package/shared/definition19.js +75 -91
  152. package/shared/definition2.js +1 -1
  153. package/shared/definition20.cjs +15 -20
  154. package/shared/definition20.js +14 -20
  155. package/shared/definition21.cjs +22 -3
  156. package/shared/definition21.js +23 -4
  157. package/shared/definition22.cjs +4 -4
  158. package/shared/definition22.js +5 -5
  159. package/shared/definition23.cjs +5 -38
  160. package/shared/definition23.js +5 -37
  161. package/shared/definition24.cjs +2 -7
  162. package/shared/definition24.js +3 -8
  163. package/shared/definition25.js +1 -1
  164. package/shared/definition26.cjs +157 -171
  165. package/shared/definition26.js +156 -171
  166. package/shared/definition27.cjs +1 -1
  167. package/shared/definition27.js +2 -2
  168. package/shared/definition28.cjs +32 -17
  169. package/shared/definition28.js +33 -18
  170. package/shared/definition29.js +1 -1
  171. package/shared/definition3.js +1 -1
  172. package/shared/definition30.cjs +96 -482
  173. package/shared/definition30.js +99 -482
  174. package/shared/definition31.cjs +334 -57
  175. package/shared/definition31.js +333 -56
  176. package/shared/definition32.cjs +104 -19
  177. package/shared/definition32.js +105 -20
  178. package/shared/definition33.cjs +67 -15
  179. package/shared/definition33.js +66 -14
  180. package/shared/definition34.cjs +15 -50
  181. package/shared/definition34.js +14 -49
  182. package/shared/definition35.cjs +28 -397
  183. package/shared/definition35.js +27 -397
  184. package/shared/definition36.cjs +404 -54
  185. package/shared/definition36.js +404 -55
  186. package/shared/definition37.cjs +57 -234
  187. package/shared/definition37.js +57 -233
  188. package/shared/definition38.cjs +221 -66
  189. package/shared/definition38.js +220 -65
  190. package/shared/definition39.cjs +52 -44
  191. package/shared/definition39.js +51 -43
  192. package/shared/definition4.cjs +31 -24
  193. package/shared/definition4.js +33 -26
  194. package/shared/definition40.cjs +56 -266
  195. package/shared/definition40.js +55 -265
  196. package/shared/definition41.cjs +285 -142
  197. package/shared/definition41.js +285 -142
  198. package/shared/definition42.cjs +156 -564
  199. package/shared/definition42.js +156 -565
  200. package/shared/definition43.cjs +554 -14378
  201. package/shared/definition43.js +553 -14377
  202. package/shared/definition44.cjs +14418 -1155
  203. package/shared/definition44.js +14417 -1156
  204. package/shared/definition45.cjs +1049 -677
  205. package/shared/definition45.js +1050 -678
  206. package/shared/definition46.cjs +848 -113
  207. package/shared/definition46.js +847 -112
  208. package/shared/definition47.cjs +125 -90
  209. package/shared/definition47.js +124 -89
  210. package/shared/definition48.cjs +88 -455
  211. package/shared/definition48.js +87 -454
  212. package/shared/definition49.cjs +466 -109
  213. package/shared/definition49.js +466 -109
  214. package/shared/definition5.cjs +8 -7
  215. package/shared/definition5.js +6 -5
  216. package/shared/definition50.cjs +106 -106
  217. package/shared/definition50.js +105 -105
  218. package/shared/definition51.cjs +136 -15
  219. package/shared/definition51.js +135 -14
  220. package/shared/definition52.cjs +16 -115
  221. package/shared/definition52.js +15 -114
  222. package/shared/definition53.cjs +78 -412
  223. package/shared/definition53.js +77 -410
  224. package/shared/definition54.cjs +445 -23
  225. package/shared/definition54.js +443 -22
  226. package/shared/definition55.cjs +22 -136
  227. package/shared/definition55.js +21 -135
  228. package/shared/definition56.cjs +95 -291
  229. package/shared/definition56.js +95 -292
  230. package/shared/definition57.cjs +192 -480
  231. package/shared/definition57.js +190 -479
  232. package/shared/definition58.cjs +411 -24
  233. package/shared/definition58.js +410 -24
  234. package/shared/definition59.cjs +27 -144
  235. package/shared/definition59.js +27 -143
  236. package/shared/definition6.js +1 -1
  237. package/shared/definition60.cjs +83 -54
  238. package/shared/definition60.js +82 -53
  239. package/shared/definition61.cjs +78 -166
  240. package/shared/definition61.js +77 -164
  241. package/shared/definition62.cjs +143 -232
  242. package/shared/definition62.js +141 -231
  243. package/shared/definition63.cjs +234 -69417
  244. package/shared/definition63.js +233 -69416
  245. package/shared/definition64.cjs +69454 -28
  246. package/shared/definition64.js +69453 -27
  247. package/shared/definition65.cjs +28 -2168
  248. package/shared/definition65.js +27 -2166
  249. package/shared/definition66.cjs +27 -0
  250. package/shared/definition66.js +23 -0
  251. package/shared/definition67.cjs +2195 -0
  252. package/shared/definition67.js +2190 -0
  253. package/shared/definition7.cjs +11 -2
  254. package/shared/definition7.js +12 -3
  255. package/shared/definition8.cjs +24 -11
  256. package/shared/definition8.js +26 -13
  257. package/shared/definition9.cjs +1 -2
  258. package/shared/definition9.js +2 -3
  259. package/shared/delegates-aria.js +1 -1
  260. package/shared/deprecation/replaced-props.d.ts +20 -0
  261. package/shared/divider.cjs +41 -0
  262. package/shared/divider.js +38 -0
  263. package/shared/feedback/feedback-message.d.ts +345 -0
  264. package/shared/feedback/locale.d.ts +4 -0
  265. package/{lib/text-anchor/text-anchor.d.ts → shared/feedback/mixins.d.ts} +62 -39
  266. package/shared/form-associated.cjs +124 -100
  267. package/shared/form-associated.js +125 -101
  268. package/shared/form-element.cjs +84 -0
  269. package/shared/form-element.js +82 -0
  270. package/shared/foundation/button/button.d.ts +378 -2
  271. package/shared/foundation/form-associated/form-associated.d.ts +753 -49
  272. package/shared/foundation/listbox/listbox.d.ts +1 -1
  273. package/shared/foundation/vivid-element/vivid-element.d.ts +14 -0
  274. package/shared/host-semantics.js +1 -1
  275. package/shared/key-codes.js +1 -1
  276. package/shared/linkable.cjs +70 -0
  277. package/shared/linkable.js +68 -0
  278. package/shared/localization/Locale.d.ts +14 -0
  279. package/shared/mixins.cjs +306 -0
  280. package/shared/mixins.js +300 -0
  281. package/shared/patterns/affix.d.ts +16 -1
  282. package/shared/patterns/anchored.d.ts +20 -8
  283. package/shared/patterns/char-count/char-count.d.ts +351 -0
  284. package/shared/patterns/char-count/index.d.ts +1 -0
  285. package/shared/patterns/char-count/locale.d.ts +4 -0
  286. package/shared/patterns/form-elements/form-element.d.ts +744 -0
  287. package/shared/patterns/form-elements/index.d.ts +3 -1
  288. package/shared/patterns/form-elements/with-error-text.d.ts +1122 -0
  289. package/shared/patterns/form-elements/with-success-text.d.ts +341 -0
  290. package/shared/patterns/index.d.ts +2 -0
  291. package/shared/patterns/linkable.d.ts +394 -0
  292. package/shared/patterns/localized.d.ts +6 -0
  293. package/shared/patterns/trapped-focus.d.ts +6 -0
  294. package/shared/picker-field/mixins/calendar-picker.d.ts +420 -52
  295. package/shared/picker-field/mixins/calendar-picker.template.d.ts +420 -52
  296. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +6 -0
  297. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +843 -107
  298. package/shared/picker-field/mixins/single-date-picker.d.ts +1259 -155
  299. package/shared/picker-field/mixins/single-value-picker.d.ts +417 -49
  300. package/shared/picker-field/mixins/time-selection-picker.d.ts +842 -106
  301. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +839 -103
  302. package/shared/picker-field/picker-field.d.ts +1491 -15
  303. package/shared/picker-field.template.cjs +13 -22
  304. package/shared/picker-field.template.js +14 -23
  305. package/shared/repeat.js +1 -1
  306. package/shared/slider.template.cjs +1 -1
  307. package/shared/slider.template.js +1 -1
  308. package/shared/time-selection-picker.template.cjs +10 -15
  309. package/shared/time-selection-picker.template.js +10 -16
  310. package/shared/vivid-element.cjs +53 -4
  311. package/shared/vivid-element.js +53 -3
  312. package/shared/with-error-text.cjs +56 -0
  313. package/shared/with-error-text.js +54 -0
  314. package/shared/with-success-text.cjs +23 -0
  315. package/shared/with-success-text.js +21 -0
  316. package/side-drawer/index.cjs +1 -1
  317. package/side-drawer/index.js +1 -1
  318. package/slider/index.cjs +1 -1
  319. package/slider/index.js +1 -1
  320. package/split-button/index.cjs +1 -1
  321. package/split-button/index.js +1 -1
  322. package/styles/core/all.css +1 -1
  323. package/styles/core/theme.css +1 -1
  324. package/styles/core/typography.css +1 -1
  325. package/styles/tokens/theme-dark.css +4 -4
  326. package/styles/tokens/theme-light.css +4 -4
  327. package/styles/tokens/vivid-2-compat.css +1 -1
  328. package/switch/index.cjs +1 -1
  329. package/switch/index.js +1 -1
  330. package/tab/index.cjs +1 -1
  331. package/tab/index.js +1 -1
  332. package/tab-panel/index.cjs +1 -1
  333. package/tab-panel/index.js +1 -1
  334. package/tabs/index.cjs +1 -1
  335. package/tabs/index.js +1 -1
  336. package/tag/index.cjs +1 -1
  337. package/tag/index.js +1 -1
  338. package/tag-group/index.cjs +1 -1
  339. package/tag-group/index.js +1 -1
  340. package/text-area/index.cjs +1 -1
  341. package/text-area/index.js +1 -1
  342. package/text-field/index.cjs +1 -1
  343. package/text-field/index.js +1 -1
  344. package/time-picker/index.cjs +1 -1
  345. package/time-picker/index.js +1 -1
  346. package/toggletip/index.cjs +1 -1
  347. package/toggletip/index.js +1 -1
  348. package/tooltip/index.cjs +1 -1
  349. package/tooltip/index.js +1 -1
  350. package/tree-item/index.cjs +1 -1
  351. package/tree-item/index.js +1 -1
  352. package/tree-view/index.cjs +1 -1
  353. package/tree-view/index.js +1 -1
  354. package/video-player/index.cjs +1 -1
  355. package/video-player/index.js +1 -1
  356. package/visually-hidden/index.cjs +5 -0
  357. package/visually-hidden/index.js +3 -0
  358. package/vivid.api.json +744 -1490
  359. package/lib/checkbox/checkbox.form-associated.d.ts +0 -11
  360. package/lib/file-picker/file-picker.form-associated.d.ts +0 -11
  361. package/lib/number-field/number-field.form-associated.d.ts +0 -11
  362. package/lib/radio/radio.form-associated.d.ts +0 -13
  363. package/lib/range-slider/range-slider.form-associated.d.ts +0 -11
  364. package/lib/searchable-select/searchable-select.form-associated.d.ts +0 -11
  365. package/lib/select/select.form-associated.d.ts +0 -11
  366. package/lib/slider/slider.form-associated.d.ts +0 -11
  367. package/lib/switch/switch.form-associated.d.ts +0 -11
  368. package/lib/text-anchor/definition.d.ts +0 -2
  369. package/lib/text-anchor/text-anchor.template.d.ts +0 -3
  370. package/lib/text-area/text-area.form-associated.d.ts +0 -11
  371. package/lib/text-field/text-field.form-associated.d.ts +0 -11
  372. package/shared/anchor.cjs +0 -49
  373. package/shared/anchor.js +0 -47
  374. package/shared/apply-mixins.cjs +0 -23
  375. package/shared/apply-mixins.js +0 -21
  376. package/shared/applyMixinsWithObservables.cjs +0 -15
  377. package/shared/applyMixinsWithObservables.js +0 -13
  378. package/shared/direction.cjs +0 -17
  379. package/shared/direction.js +0 -15
  380. package/shared/form-elements.cjs +0 -209
  381. package/shared/form-elements.js +0 -202
  382. package/shared/foundation/anchor/anchor.d.ts +0 -11
  383. package/shared/foundation/utilities/apply-mixins.d.ts +0 -1
  384. package/shared/patterns/form-elements/form-elements.d.ts +0 -58
  385. package/shared/picker-field/picker-field.form-associated.d.ts +0 -11
  386. package/shared/text-anchor.cjs +0 -38
  387. package/shared/text-anchor.js +0 -36
  388. package/shared/text-anchor.template.cjs +0 -35
  389. package/shared/text-anchor.template.js +0 -33
  390. package/shared/utils/applyMixinsWithObservables.d.ts +0 -1
  391. package/text-anchor/index.cjs +0 -17
  392. package/text-anchor/index.js +0 -15
package/shared/definition7.cjs CHANGED
@@ -23,6 +23,9 @@ __decorateClass([
23
23
  __decorateClass([
24
24
  vividElement.attr
25
25
  ], Badge.prototype, "shape");
26
+ __decorateClass([
27
+ vividElement.attr
28
+ ], Badge.prototype, "size");
26
29
  __decorateClass([
27
30
  vividElement.attr
28
31
  ], Badge.prototype, "appearance");
@@ -30,12 +33,14 @@ __decorateClass([
30
33
  vividElement.attr
31
34
  ], Badge.prototype, "text");
32
35
 
33
- const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
36
+ const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.size-expanded){--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded{--_badge-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
34
37
 
35
38
  const getClasses = ({
39
+ iconSlottedContent,
36
40
  connotation,
37
41
  appearance,
38
42
  shape,
43
+ size,
39
44
  iconTrailing,
40
45
  text,
41
46
  icon
@@ -44,8 +49,12 @@ const getClasses = ({
44
49
  [`connotation-${connotation}`, Boolean(connotation)],
45
50
  [`appearance-${appearance}`, Boolean(appearance)],
46
51
  [`shape-${shape}`, Boolean(shape)],
52
+ [`size-${size}`, Boolean(size)],
47
53
  ["icon-trailing", iconTrailing],
48
- ["icon-only", !text && Boolean(icon)]
54
+ [
55
+ "icon-only",
56
+ !text && (Boolean(icon) || Boolean(iconSlottedContent?.length))
57
+ ]
49
58
  );
50
59
  const badgeTemplate = (context) => {
51
60
  const affixIconTemplate = affix.affixIconTemplateFactory(context);
package/shared/definition7.js CHANGED
@@ -1,4 +1,4 @@
1
- import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
1
+ import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
2
2
  import { i as iconDefinition } from './definition28.js';
3
3
  import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
4
4
  import { c as classNames } from './class-names.js';
@@ -21,6 +21,9 @@ __decorateClass([
21
21
  __decorateClass([
22
22
  attr
23
23
  ], Badge.prototype, "shape");
24
+ __decorateClass([
25
+ attr
26
+ ], Badge.prototype, "size");
24
27
  __decorateClass([
25
28
  attr
26
29
  ], Badge.prototype, "appearance");
@@ -28,12 +31,14 @@ __decorateClass([
28
31
  attr
29
32
  ], Badge.prototype, "text");
30
33
 
31
- const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
34
+ const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.size-expanded){--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded{--_badge-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
32
35
 
33
36
  const getClasses = ({
37
+ iconSlottedContent,
34
38
  connotation,
35
39
  appearance,
36
40
  shape,
41
+ size,
37
42
  iconTrailing,
38
43
  text,
39
44
  icon
@@ -42,8 +47,12 @@ const getClasses = ({
42
47
  [`connotation-${connotation}`, Boolean(connotation)],
43
48
  [`appearance-${appearance}`, Boolean(appearance)],
44
49
  [`shape-${shape}`, Boolean(shape)],
50
+ [`size-${size}`, Boolean(size)],
45
51
  ["icon-trailing", iconTrailing],
46
- ["icon-only", !text && Boolean(icon)]
52
+ [
53
+ "icon-only",
54
+ !text && (Boolean(icon) || Boolean(iconSlottedContent?.length))
55
+ ]
47
56
  );
48
57
  const badgeTemplate = (context) => {
49
58
  const affixIconTemplate = affixIconTemplateFactory(context);
package/shared/definition8.cjs CHANGED
@@ -22,14 +22,14 @@ var __decorateClass = (decorators, target, key, kind) => {
22
22
  if (result) __defProp(target, key, result);
23
23
  return result;
24
24
  };
25
- const connotationIconMap = /* @__PURE__ */ new Map([
26
- [enums.Connotation.Information, "info-solid"],
27
- [enums.Connotation.Announcement, "megaphone-solid"],
28
- [enums.Connotation.Success, "check-circle-solid"],
29
- [enums.Connotation.Warning, "warning-solid"],
30
- [enums.Connotation.Alert, "error-solid"]
31
- ]);
32
- const defaultConnotation = (connotation = enums.Connotation.Information) => connotationIconMap.get(connotation);
25
+ const CONNOTATION_ICON_MAP = {
26
+ [enums.Connotation.Information]: "info-solid",
27
+ [enums.Connotation.Announcement]: "megaphone-solid",
28
+ [enums.Connotation.Success]: "check-circle-solid",
29
+ [enums.Connotation.Warning]: "warning-solid",
30
+ [enums.Connotation.Alert]: "error-solid"
31
+ };
32
+ const getConnotationIcon = (connotation = enums.Connotation.Information) => CONNOTATION_ICON_MAP[connotation];
33
33
  class Banner extends affix.AffixIcon(localized.Localized(delegatesAria.DelegatesAria(vividElement.VividElement))) {
34
34
  constructor() {
35
35
  super(...arguments);
@@ -47,7 +47,7 @@ class Banner extends affix.AffixIcon(localized.Localized(delegatesAria.Delegates
47
47
  };
48
48
  }
49
49
  get conditionedIcon() {
50
- return this.icon ?? defaultConnotation(this.connotation);
50
+ return this.icon ?? getConnotationIcon(this.connotation);
51
51
  }
52
52
  connectedCallback() {
53
53
  super.connectedCallback();
@@ -102,14 +102,27 @@ function renderDismissButton(buttonTag) {
102
102
  @click="${(x) => x.remove()}">
103
103
  </${buttonTag}>`;
104
104
  }
105
+ const renderIcon = (c, x) => {
106
+ const affixIconTemplate = affix.affixIconTemplateFactory(c);
107
+ const icon = x.conditionedIcon;
108
+ const announcement = !x.icon && x.connotation ? {
109
+ label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
110
+ announceOnUpdate: false
111
+ } : void 0;
112
+ return affixIconTemplate(
113
+ icon,
114
+ affix.IconWrapper.Slot,
115
+ affix.IconAriaHidden.Hidden,
116
+ announcement
117
+ );
118
+ };
105
119
  const BannerTemplate = (context) => {
106
- const affixIconTemplate = affix.affixIconTemplateFactory(context);
107
120
  const buttonTag = context.tagFor(definition.Button);
108
121
  return vividElement.html`
109
122
  <div class="${getClasses}">
110
123
  <header class="header">
111
124
  <div class="content">
112
- ${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}
125
+ ${(x) => renderIcon(context, x)}
113
126
  <div
114
127
  class="banner-message"
115
128
  ${delegatesAria.delegateAria({
package/shared/definition8.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { B as Button, b as buttonDefinition } from './definition11.js';
2
2
  import { i as iconDefinition } from './definition28.js';
3
- import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
3
+ import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
4
4
  import { C as Connotation } from './enums.js';
5
5
  import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
6
- import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
6
+ import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper, c as IconAriaHidden } from './affix.js';
7
7
  import { L as Localized } from './localized.js';
8
8
  import { c as classNames } from './class-names.js';
9
9
  import { s as slotted } from './slotted.js';
@@ -20,14 +20,14 @@ var __decorateClass = (decorators, target, key, kind) => {
20
20
  if (result) __defProp(target, key, result);
21
21
  return result;
22
22
  };
23
- const connotationIconMap = /* @__PURE__ */ new Map([
24
- [Connotation.Information, "info-solid"],
25
- [Connotation.Announcement, "megaphone-solid"],
26
- [Connotation.Success, "check-circle-solid"],
27
- [Connotation.Warning, "warning-solid"],
28
- [Connotation.Alert, "error-solid"]
29
- ]);
30
- const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
23
+ const CONNOTATION_ICON_MAP = {
24
+ [Connotation.Information]: "info-solid",
25
+ [Connotation.Announcement]: "megaphone-solid",
26
+ [Connotation.Success]: "check-circle-solid",
27
+ [Connotation.Warning]: "warning-solid",
28
+ [Connotation.Alert]: "error-solid"
29
+ };
30
+ const getConnotationIcon = (connotation = Connotation.Information) => CONNOTATION_ICON_MAP[connotation];
31
31
  class Banner extends AffixIcon(Localized(DelegatesAria(VividElement))) {
32
32
  constructor() {
33
33
  super(...arguments);
@@ -45,7 +45,7 @@ class Banner extends AffixIcon(Localized(DelegatesAria(VividElement))) {
45
45
  };
46
46
  }
47
47
  get conditionedIcon() {
48
- return this.icon ?? defaultConnotation(this.connotation);
48
+ return this.icon ?? getConnotationIcon(this.connotation);
49
49
  }
50
50
  connectedCallback() {
51
51
  super.connectedCallback();
@@ -100,14 +100,27 @@ function renderDismissButton(buttonTag) {
100
100
  @click="${(x) => x.remove()}">
101
101
  </${buttonTag}>`;
102
102
  }
103
+ const renderIcon = (c, x) => {
104
+ const affixIconTemplate = affixIconTemplateFactory(c);
105
+ const icon = x.conditionedIcon;
106
+ const announcement = !x.icon && x.connotation ? {
107
+ label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
108
+ announceOnUpdate: false
109
+ } : void 0;
110
+ return affixIconTemplate(
111
+ icon,
112
+ IconWrapper.Slot,
113
+ IconAriaHidden.Hidden,
114
+ announcement
115
+ );
116
+ };
103
117
  const BannerTemplate = (context) => {
104
- const affixIconTemplate = affixIconTemplateFactory(context);
105
118
  const buttonTag = context.tagFor(Button);
106
119
  return html`
107
120
  <div class="${getClasses}">
108
121
  <header class="header">
109
122
  <div class="content">
110
- ${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}
123
+ ${(x) => renderIcon(context, x)}
111
124
  <div
112
125
  class="banner-message"
113
126
  ${delegateAria({
package/shared/definition9.cjs CHANGED
@@ -3,7 +3,6 @@
3
3
  const definition = require('./definition28.cjs');
4
4
  const vividElement = require('./vivid-element.cjs');
5
5
  const breadcrumbItem = require('./breadcrumb-item.cjs');
6
- const textAnchor_template = require('./text-anchor.template.cjs');
7
6
  const classNames = require('./class-names.cjs');
8
7
  const when = require('./when.cjs');
9
8
 
@@ -16,7 +15,7 @@ const BreadcrumbItemTemplate = (context) => {
16
15
  ${when.when((x) => x.text && !x.href, vividElement.html`${(x) => x.text}`)}
17
16
  ${when.when(
18
17
  (x) => x.text && x.href && x.href.length > 0,
19
- vividElement.html`${textAnchor_template.textAnchorTemplate(context)}`
18
+ vividElement.html`${(x) => x._renderLinkElement(vividElement.html`${(x2) => x2.text}`, "control")}`
20
19
  )}
21
20
  ${when.when(
22
21
  (x) => x.separator,
package/shared/definition9.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { I as Icon, i as iconDefinition } from './definition28.js';
2
- import { h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
2
+ import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
3
3
  import { B as BreadcrumbItem } from './breadcrumb-item.js';
4
- import { t as textAnchorTemplate } from './text-anchor.template.js';
5
4
  import { c as classNames } from './class-names.js';
6
5
  import { w as when } from './when.js';
7
6
 
@@ -14,7 +13,7 @@ const BreadcrumbItemTemplate = (context) => {
14
13
  ${when((x) => x.text && !x.href, html`${(x) => x.text}`)}
15
14
  ${when(
16
15
  (x) => x.text && x.href && x.href.length > 0,
17
- html`${textAnchorTemplate(context)}`
16
+ html`${(x) => x._renderLinkElement(html`${(x2) => x2.text}`, "control")}`
18
17
  )}
19
18
  ${when(
20
19
  (x) => x.separator,
package/shared/delegates-aria.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
2
- import { O as Observable, d as ariaAttributeName, s as subscribeToAriaPropertyChanges, u as unsubscribeFromAriaPropertyChanges, D as DOM, f as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
2
+ import { O as Observable, b as ariaAttributeName, s as subscribeToAriaPropertyChanges, u as unsubscribeFromAriaPropertyChanges, D as DOM, c as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
3
3
 
4
4
  class DelegateAriaBehavior {
5
5
  constructor(target, params) {
package/shared/deprecation/replaced-props.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { type FASTElement } from '@microsoft/fast-element';
2
+ import type { Constructor } from '../utils/mixins';
3
+ type ReplacedPropConfiguration<PropertyT, DeprecatedT> = {
4
+ newPropertyName: string;
5
+ deprecatedPropertyName: string;
6
+ fromDeprecated: (v: DeprecatedT) => PropertyT;
7
+ toDeprecated?: (v: PropertyT) => DeprecatedT;
8
+ };
9
+ export declare const replaces: <PropertyT, DeprecatedT = PropertyT>(config: Omit<ReplacedPropConfiguration<PropertyT, DeprecatedT>, "newPropertyName">) => ($target: object, $prop: string) => void;
10
+ export declare const ReplacedPropHandling: <T extends Constructor<FASTElement>>(Base: T) => {
11
+ new (...args: any[]): {
12
+ "__#1@#handleReplacedProp"(replacedProp: ReplacedPropConfiguration<any, any>): void;
13
+ readonly $fastController: import("@microsoft/fast-element").Controller;
14
+ $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
15
+ connectedCallback(): void;
16
+ disconnectedCallback(): void;
17
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
18
+ };
19
+ } & T;
20
+ export {};
package/shared/divider.cjs ADDED
@@ -0,0 +1,41 @@
1
+ 'use strict';
2
+
3
+ const vividElement = require('./vivid-element.cjs');
4
+ const delegatesAria = require('./delegates-aria.cjs');
5
+ const aria = require('./aria.cjs');
6
+
7
+ var __defProp = Object.defineProperty;
8
+ var __decorateClass = (decorators, target, key, kind) => {
9
+ var result = void 0 ;
10
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
+ if (decorator = decorators[i])
12
+ result = (decorator(target, key, result) ) || result;
13
+ if (result) __defProp(target, key, result);
14
+ return result;
15
+ };
16
+ const DividerRole = {
17
+ /**
18
+ * The divider semantically separates content
19
+ */
20
+ separator: "separator",
21
+ /**
22
+ * The divider has no semantic value and is for visual presentation only.
23
+ */
24
+ presentation: "presentation"
25
+ };
26
+ class Divider extends delegatesAria.DelegatesAria(vividElement.VividElement) {
27
+ constructor() {
28
+ super(...arguments);
29
+ this.role = DividerRole.separator;
30
+ this.orientation = aria.Orientation.horizontal;
31
+ }
32
+ }
33
+ __decorateClass([
34
+ vividElement.attr
35
+ ], Divider.prototype, "role");
36
+ __decorateClass([
37
+ vividElement.attr
38
+ ], Divider.prototype, "orientation");
39
+
40
+ exports.Divider = Divider;
41
+ exports.DividerRole = DividerRole;
package/shared/divider.js ADDED
@@ -0,0 +1,38 @@
1
+ import { V as VividElement, a as attr } from './vivid-element.js';
2
+ import { D as DelegatesAria } from './delegates-aria.js';
3
+ import { O as Orientation } from './aria.js';
4
+
5
+ var __defProp = Object.defineProperty;
6
+ var __decorateClass = (decorators, target, key, kind) => {
7
+ var result = void 0 ;
8
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
9
+ if (decorator = decorators[i])
10
+ result = (decorator(target, key, result) ) || result;
11
+ if (result) __defProp(target, key, result);
12
+ return result;
13
+ };
14
+ const DividerRole = {
15
+ /**
16
+ * The divider semantically separates content
17
+ */
18
+ separator: "separator",
19
+ /**
20
+ * The divider has no semantic value and is for visual presentation only.
21
+ */
22
+ presentation: "presentation"
23
+ };
24
+ class Divider extends DelegatesAria(VividElement) {
25
+ constructor() {
26
+ super(...arguments);
27
+ this.role = DividerRole.separator;
28
+ this.orientation = Orientation.horizontal;
29
+ }
30
+ }
31
+ __decorateClass([
32
+ attr
33
+ ], Divider.prototype, "role");
34
+ __decorateClass([
35
+ attr
36
+ ], Divider.prototype, "orientation");
37
+
38
+ export { Divider as D, DividerRole as a };