@vonage/vivid 4.31.0 → 5.1.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 (676) hide show
  1. package/{shared/definition2.cjs → accordion/definition.cjs} +20 -20
  2. package/{shared/definition2.js → accordion/definition.js} +5 -7
  3. package/accordion/index.cjs +5 -5
  4. package/accordion/index.js +129 -3
  5. package/accordion-item/definition.cjs +145 -0
  6. package/accordion-item/definition.js +139 -0
  7. package/accordion-item/index.cjs +1 -5
  8. package/accordion-item/index.js +2 -3
  9. package/{shared/definition3.cjs → action-group/definition.cjs} +12 -9
  10. package/{shared/definition3.js → action-group/definition.js} +5 -4
  11. package/action-group/index.cjs +6 -5
  12. package/action-group/index.js +49 -3
  13. package/{shared/definition4.cjs → alert/definition.cjs} +33 -31
  14. package/{shared/definition4.js → alert/definition.js} +11 -11
  15. package/alert/index.cjs +30 -5
  16. package/alert/index.js +158 -3
  17. package/{shared/definition5.cjs → audio-player/definition.cjs} +58 -57
  18. package/{shared/definition5.js → audio-player/definition.js} +11 -12
  19. package/audio-player/index.cjs +68 -4
  20. package/audio-player/index.js +309 -2
  21. package/{shared/definition6.cjs → avatar/definition.cjs} +28 -26
  22. package/{shared/definition6.js → avatar/definition.js} +7 -7
  23. package/avatar/index.cjs +18 -5
  24. package/avatar/index.js +93 -3
  25. package/{shared/definition7.cjs → badge/definition.cjs} +18 -16
  26. package/{shared/definition7.js → badge/definition.js} +6 -6
  27. package/badge/index.cjs +4 -5
  28. package/badge/index.js +66 -3
  29. package/{shared/definition8.cjs → banner/definition.cjs} +26 -25
  30. package/{shared/definition8.js → banner/definition.js} +10 -11
  31. package/banner/index.cjs +29 -4
  32. package/banner/index.js +128 -2
  33. package/{shared/definition10.cjs → breadcrumb/definition.cjs} +11 -9
  34. package/{shared/definition10.js → breadcrumb/definition.js} +5 -5
  35. package/breadcrumb/index.cjs +12 -5
  36. package/breadcrumb/index.js +69 -3
  37. package/{shared/definition9.cjs → breadcrumb-item/definition.cjs} +18 -15
  38. package/{shared/definition9.js → breadcrumb-item/definition.js} +7 -7
  39. package/breadcrumb-item/index.cjs +5 -5
  40. package/breadcrumb-item/index.js +33 -3
  41. package/bundled/_has.cjs +1 -0
  42. package/bundled/_has.js +34 -0
  43. package/bundled/affix.cjs +13 -0
  44. package/bundled/affix.js +63 -0
  45. package/bundled/anchored.cjs +4 -0
  46. package/bundled/anchored.js +67 -0
  47. package/bundled/aria.cjs +1 -0
  48. package/bundled/aria.js +7 -0
  49. package/bundled/attribute-binding-behaviour.cjs +1 -0
  50. package/bundled/attribute-binding-behaviour.js +27 -0
  51. package/bundled/base-progress.cjs +1 -0
  52. package/bundled/base-progress.js +57 -0
  53. package/bundled/breadcrumb-item.cjs +1 -0
  54. package/bundled/breadcrumb-item.js +21 -0
  55. package/bundled/button.cjs +1 -0
  56. package/bundled/button.js +106 -0
  57. package/bundled/calendar-event.cjs +1 -0
  58. package/bundled/calendar-event.js +34 -0
  59. package/bundled/calendar-picker.template.cjs +148 -0
  60. package/bundled/calendar-picker.template.js +3371 -0
  61. package/bundled/char-count.cjs +13 -0
  62. package/bundled/char-count.js +54 -0
  63. package/bundled/children.cjs +1 -0
  64. package/bundled/children.js +38 -0
  65. package/bundled/class-names.cjs +1 -0
  66. package/bundled/class-names.js +9 -0
  67. package/bundled/definition.cjs +39 -0
  68. package/bundled/definition.js +122 -0
  69. package/bundled/definition10.cjs +19 -0
  70. package/bundled/definition10.js +73 -0
  71. package/bundled/definition11.cjs +10 -0
  72. package/bundled/definition11.js +44 -0
  73. package/bundled/definition12.cjs +1 -0
  74. package/bundled/definition12.js +20 -0
  75. package/bundled/definition13.cjs +73 -0
  76. package/bundled/definition13.js +359 -0
  77. package/bundled/definition14.cjs +5 -0
  78. package/bundled/definition14.js +29 -0
  79. package/bundled/definition15.cjs +30 -0
  80. package/bundled/definition15.js +80 -0
  81. package/bundled/definition16.cjs +19 -0
  82. package/bundled/definition16.js +103 -0
  83. package/bundled/definition17.cjs +13 -0
  84. package/bundled/definition17.js +137 -0
  85. package/bundled/definition18.cjs +12 -0
  86. package/bundled/definition18.js +94 -0
  87. package/bundled/definition19.cjs +67 -0
  88. package/bundled/definition19.js +666 -0
  89. package/bundled/definition2.cjs +20 -0
  90. package/bundled/definition2.js +180 -0
  91. package/bundled/definition20.cjs +20 -0
  92. package/bundled/definition20.js +106 -0
  93. package/bundled/definition21.cjs +5 -0
  94. package/bundled/definition21.js +19 -0
  95. package/bundled/definition22.cjs +24 -0
  96. package/bundled/definition22.js +151 -0
  97. package/bundled/definition3.cjs +29 -0
  98. package/bundled/definition3.js +195 -0
  99. package/bundled/definition4.cjs +6 -0
  100. package/bundled/definition4.js +42 -0
  101. package/bundled/definition5.cjs +1 -0
  102. package/bundled/definition5.js +345 -0
  103. package/bundled/definition6.cjs +31 -0
  104. package/bundled/definition6.js +265 -0
  105. package/bundled/definition7.cjs +30 -0
  106. package/bundled/definition7.js +288 -0
  107. package/bundled/definition8.cjs +19 -0
  108. package/bundled/definition8.js +145 -0
  109. package/bundled/definition9.cjs +14 -0
  110. package/bundled/definition9.js +1406 -0
  111. package/bundled/delegates-aria.cjs +1 -0
  112. package/bundled/delegates-aria.js +77 -0
  113. package/bundled/divider.cjs +1 -0
  114. package/bundled/divider.js +34 -0
  115. package/bundled/dom.cjs +1 -0
  116. package/bundled/dom.js +6 -0
  117. package/bundled/enums.cjs +1 -0
  118. package/bundled/enums.js +9 -0
  119. package/bundled/form-associated.cjs +1 -0
  120. package/bundled/form-associated.js +320 -0
  121. package/bundled/form-element.cjs +1 -0
  122. package/bundled/form-element.js +56 -0
  123. package/bundled/host-semantics.cjs +1 -0
  124. package/bundled/host-semantics.js +57 -0
  125. package/bundled/index.cjs +1 -0
  126. package/bundled/index.js +6 -0
  127. package/bundled/key-codes.cjs +1 -0
  128. package/bundled/key-codes.js +16 -0
  129. package/bundled/linkable.cjs +15 -0
  130. package/bundled/linkable.js +49 -0
  131. package/bundled/listbox.cjs +1 -0
  132. package/bundled/listbox.js +345 -0
  133. package/bundled/localized.cjs +1 -0
  134. package/bundled/localized.js +459 -0
  135. package/bundled/mixins.cjs +33 -0
  136. package/bundled/mixins.js +226 -0
  137. package/bundled/numbers.cjs +1 -0
  138. package/bundled/numbers.js +14 -0
  139. package/bundled/option.cjs +1 -0
  140. package/bundled/option.js +158 -0
  141. package/bundled/picker-field.template.cjs +62 -0
  142. package/bundled/picker-field.template.js +234 -0
  143. package/bundled/playbackRates.cjs +1 -0
  144. package/bundled/playbackRates.js +11 -0
  145. package/bundled/ref.cjs +1 -0
  146. package/bundled/ref.js +32 -0
  147. package/bundled/repeat.cjs +1 -0
  148. package/bundled/repeat.js +341 -0
  149. package/bundled/scrollIntoView.cjs +1 -0
  150. package/bundled/scrollIntoView.js +33 -0
  151. package/bundled/single-date-picker.cjs +1 -0
  152. package/bundled/single-date-picker.js +39 -0
  153. package/bundled/single-value-picker.cjs +1 -0
  154. package/bundled/single-value-picker.js +87 -0
  155. package/bundled/slider.template.cjs +41 -0
  156. package/bundled/slider.template.js +100 -0
  157. package/bundled/slotted.cjs +1 -0
  158. package/bundled/slotted.js +81 -0
  159. package/bundled/strings.cjs +1 -0
  160. package/bundled/strings.js +7 -0
  161. package/bundled/text-field.cjs +1 -0
  162. package/bundled/text-field.js +4 -0
  163. package/bundled/time-selection-picker.template.cjs +46 -0
  164. package/bundled/time-selection-picker.template.js +575 -0
  165. package/bundled/vivid-element.cjs +1 -0
  166. package/bundled/vivid-element.js +1761 -0
  167. package/bundled/when.cjs +1 -0
  168. package/bundled/when.js +11 -0
  169. package/bundled/with-contextual-help.cjs +1 -0
  170. package/bundled/with-contextual-help.js +22 -0
  171. package/bundled/with-error-text.cjs +1 -0
  172. package/bundled/with-error-text.js +39 -0
  173. package/bundled/with-success-text.cjs +1 -0
  174. package/bundled/with-success-text.js +16 -0
  175. package/button/definition.cjs +14 -0
  176. package/button/definition.js +4 -0
  177. package/button/index.cjs +1 -5
  178. package/button/index.js +2 -3
  179. package/{shared/definition13.cjs → calendar/definition.cjs} +27 -449
  180. package/{shared/definition13.js → calendar/definition.js} +7 -431
  181. package/calendar/index.cjs +53 -5
  182. package/calendar/index.js +431 -3
  183. package/{shared/definition12.cjs → calendar-event/definition.cjs} +12 -9
  184. package/{shared/definition12.js → calendar-event/definition.js} +6 -6
  185. package/calendar-event/index.cjs +9 -5
  186. package/calendar-event/index.js +43 -3
  187. package/card/definition.cjs +186 -0
  188. package/{shared/definition14.js → card/definition.js} +10 -11
  189. package/card/index.cjs +47 -5
  190. package/card/index.js +163 -3
  191. package/{shared/definition15.cjs → checkbox/definition.cjs} +35 -30
  192. package/{shared/definition15.js → checkbox/definition.js} +17 -14
  193. package/checkbox/index.cjs +1 -5
  194. package/checkbox/index.js +2 -3
  195. package/{shared/definition16.cjs → combobox/definition.cjs} +50 -52
  196. package/{shared/definition16.js → combobox/definition.js} +19 -23
  197. package/combobox/index.cjs +65 -5
  198. package/combobox/index.js +512 -3
  199. package/contextual-help/definition.cjs +62 -0
  200. package/contextual-help/definition.js +57 -0
  201. package/contextual-help/index.cjs +1 -0
  202. package/contextual-help/index.js +2 -0
  203. package/custom-elements.json +2735 -711
  204. package/{shared/definition17.cjs → data-grid/definition.cjs} +169 -196
  205. package/{shared/definition17.js → data-grid/definition.js} +71 -100
  206. package/data-grid/index.cjs +81 -5
  207. package/data-grid/index.js +1011 -3
  208. package/{shared/definition18.cjs → date-picker/definition.cjs} +20 -17
  209. package/{shared/definition18.js → date-picker/definition.js} +12 -11
  210. package/date-picker/index.cjs +1 -5
  211. package/date-picker/index.js +115 -3
  212. package/{shared/definition19.cjs → date-range-picker/definition.cjs} +26 -23
  213. package/{shared/definition19.js → date-range-picker/definition.js} +10 -9
  214. package/date-range-picker/index.cjs +1 -5
  215. package/date-range-picker/index.js +335 -3
  216. package/{shared/definition20.cjs → date-time-picker/definition.cjs} +27 -24
  217. package/{shared/definition20.js → date-time-picker/definition.js} +13 -12
  218. package/date-time-picker/index.cjs +8 -5
  219. package/date-time-picker/index.js +216 -3
  220. package/{shared/definition21.cjs → dial-pad/definition.cjs} +39 -40
  221. package/{shared/definition21.js → dial-pad/definition.js} +9 -12
  222. package/dial-pad/index.cjs +54 -5
  223. package/dial-pad/index.js +214 -3
  224. package/{shared/definition22.cjs → dialog/definition.cjs} +48 -47
  225. package/{shared/definition22.js → dialog/definition.js} +10 -11
  226. package/dialog/index.cjs +44 -5
  227. package/dialog/index.js +257 -3
  228. package/{shared/definition23.cjs → divider/definition.cjs} +10 -6
  229. package/{shared/definition23.js → divider/definition.js} +6 -5
  230. package/divider/index.cjs +1 -5
  231. package/divider/index.js +2 -3
  232. package/elevation/definition.cjs +11 -0
  233. package/elevation/definition.js +2 -0
  234. package/elevation/index.cjs +1 -5
  235. package/elevation/index.js +2 -3
  236. package/empty-state/definition.cjs +81 -0
  237. package/empty-state/definition.js +75 -0
  238. package/empty-state/index.cjs +14 -5
  239. package/empty-state/index.js +64 -3
  240. package/fab/definition.cjs +105 -0
  241. package/fab/definition.js +99 -0
  242. package/fab/index.cjs +20 -5
  243. package/fab/index.js +86 -3
  244. package/file-picker/definition.cjs +510 -0
  245. package/file-picker/definition.js +504 -0
  246. package/file-picker/index.cjs +58 -5
  247. package/file-picker/index.js +381 -3
  248. package/{shared/definition27.cjs → header/definition.cjs} +14 -11
  249. package/{shared/definition27.js → header/definition.js} +6 -5
  250. package/header/index.cjs +19 -5
  251. package/header/index.js +57 -3
  252. package/{shared/definition28.cjs → icon/definition.cjs} +25 -149
  253. package/{shared/definition28.js → icon/definition.js} +6 -132
  254. package/icon/index.cjs +1 -5
  255. package/icon/index.js +2 -3
  256. package/index.cjs +268 -264
  257. package/index.js +72 -71
  258. package/{shared/definition29.cjs → layout/definition.cjs} +13 -10
  259. package/{shared/definition29.js → layout/definition.js} +4 -3
  260. package/layout/index.cjs +3 -5
  261. package/layout/index.js +52 -3
  262. package/lib/accordion-item/accordion-item.d.ts +42 -2
  263. package/lib/action-group/action-group.d.ts +42 -2
  264. package/lib/alert/alert.d.ts +84 -4
  265. package/lib/audio-player/audio-player.d.ts +42 -2
  266. package/lib/avatar/avatar.d.ts +42 -2
  267. package/lib/badge/badge.d.ts +42 -2
  268. package/lib/banner/banner.d.ts +126 -6
  269. package/lib/breadcrumb/breadcrumb.d.ts +42 -2
  270. package/lib/breadcrumb-item/breadcrumb-item.d.ts +42 -2
  271. package/lib/button/button.d.ts +127 -6
  272. package/lib/calendar-event/calendar-event.d.ts +42 -2
  273. package/lib/card/card.d.ts +42 -2
  274. package/lib/checkbox/checkbox.d.ts +252 -13
  275. package/lib/combobox/combobox.d.ts +252 -12
  276. package/lib/components.d.ts +1 -0
  277. package/lib/contextual-help/contextual-help.d.ts +5 -0
  278. package/lib/contextual-help/contextual-help.template.d.ts +3 -0
  279. package/lib/contextual-help/definition.d.ts +1 -0
  280. package/lib/data-grid/data-grid-cell.d.ts +418 -3
  281. package/lib/data-grid/data-grid-row.d.ts +379 -1
  282. package/lib/date-picker/date-picker.d.ts +374 -54
  283. package/lib/date-range-picker/date-range-picker.d.ts +188 -28
  284. package/lib/date-time-picker/date-time-picker.d.ts +376 -56
  285. package/lib/dial-pad/dial-pad.d.ts +42 -2
  286. package/lib/dialog/dialog.d.ts +84 -4
  287. package/lib/divider/divider.d.ts +42 -2
  288. package/lib/fab/fab.d.ts +43 -2
  289. package/lib/file-picker/accept.d.ts +1 -0
  290. package/lib/file-picker/data-transfer.d.ts +1 -0
  291. package/lib/file-picker/file-picker.d.ts +259 -31
  292. package/lib/file-picker/locale.d.ts +1 -0
  293. package/lib/header/header.d.ts +42 -2
  294. package/lib/menu/menu.d.ts +84 -4
  295. package/lib/menu-item/menu-item.d.ts +84 -4
  296. package/lib/nav/nav.d.ts +42 -2
  297. package/lib/nav-disclosure/nav-disclosure.d.ts +84 -4
  298. package/lib/nav-item/nav-item.d.ts +84 -4
  299. package/lib/note/note.d.ts +42 -2
  300. package/lib/number-field/number-field.d.ts +840 -104
  301. package/lib/option/option.d.ts +85 -4
  302. package/lib/pagination/pagination.d.ts +42 -2
  303. package/lib/progress/progress.d.ts +42 -2
  304. package/lib/progress-ring/progress-ring.d.ts +42 -2
  305. package/lib/radio/radio.d.ts +126 -7
  306. package/lib/radio-group/radio-group.d.ts +42 -2
  307. package/lib/range-slider/range-slider.d.ts +126 -6
  308. package/lib/rich-text-editor/menubar/menubar.d.ts +42 -2
  309. package/lib/rich-text-editor/rich-text-editor.d.ts +42 -2
  310. package/lib/searchable-select/option-tag.d.ts +42 -2
  311. package/lib/searchable-select/searchable-select.d.ts +336 -16
  312. package/lib/select/select.d.ts +294 -14
  313. package/lib/selectable-box/selectable-box.d.ts +42 -3
  314. package/lib/simple-color-picker/definition.d.ts +4 -0
  315. package/lib/simple-color-picker/locale.d.ts +4 -0
  316. package/lib/simple-color-picker/simple-color-picker.d.ts +1600 -0
  317. package/lib/simple-color-picker/simple-color-picker.template.d.ts +3 -0
  318. package/lib/slider/slider.d.ts +126 -6
  319. package/lib/split-button/split-button.d.ts +128 -6
  320. package/lib/switch/switch.d.ts +84 -4
  321. package/lib/tab/tab.d.ts +126 -6
  322. package/lib/tab-panel/tab-panel.d.ts +42 -2
  323. package/lib/tag/tag.d.ts +126 -6
  324. package/lib/tag-group/tag-group.d.ts +42 -2
  325. package/lib/tag-name-map.d.ts +2 -1
  326. package/lib/text-area/text-area.d.ts +787 -91
  327. package/lib/text-field/text-field.d.ts +840 -104
  328. package/lib/time-picker/time-picker.d.ts +188 -28
  329. package/lib/toggletip/toggletip.d.ts +84 -4
  330. package/lib/tooltip/tooltip.d.ts +42 -2
  331. package/lib/tree-item/tree-item.d.ts +84 -4
  332. package/lib/tree-view/tree-view.d.ts +42 -2
  333. package/lib/video-player/video-player.d.ts +42 -2
  334. package/locales/de-DE.cjs +13 -1
  335. package/locales/de-DE.js +13 -1
  336. package/locales/en-GB.cjs +13 -1
  337. package/locales/en-GB.js +13 -1
  338. package/locales/en-US.cjs +13 -1
  339. package/locales/en-US.js +13 -1
  340. package/locales/ja-JP.cjs +13 -1
  341. package/locales/ja-JP.js +13 -1
  342. package/locales/zh-CN.cjs +13 -1
  343. package/locales/zh-CN.js +13 -1
  344. package/{shared/definition31.cjs → menu/definition.cjs} +46 -46
  345. package/{shared/definition31.js → menu/definition.js} +16 -18
  346. package/menu/index.cjs +1 -5
  347. package/menu/index.js +2 -3
  348. package/menu-item/definition.cjs +14 -0
  349. package/menu-item/definition.js +3 -0
  350. package/menu-item/index.cjs +1 -5
  351. package/menu-item/index.js +2 -3
  352. package/{shared/definition34.cjs → nav/definition.cjs} +7 -4
  353. package/{shared/definition34.js → nav/definition.js} +4 -3
  354. package/nav/index.cjs +5 -5
  355. package/nav/index.js +13 -3
  356. package/nav-disclosure/definition.cjs +122 -0
  357. package/nav-disclosure/definition.js +116 -0
  358. package/nav-disclosure/index.cjs +16 -5
  359. package/nav-disclosure/index.js +96 -3
  360. package/{shared/definition33.cjs → nav-item/definition.cjs} +19 -16
  361. package/{shared/definition33.js → nav-item/definition.js} +9 -8
  362. package/nav-item/index.cjs +2 -5
  363. package/nav-item/index.js +59 -3
  364. package/{shared/definition35.cjs → note/definition.cjs} +15 -13
  365. package/{shared/definition35.js → note/definition.js} +6 -6
  366. package/note/index.cjs +9 -5
  367. package/note/index.js +44 -3
  368. package/number-field/definition.cjs +438 -0
  369. package/{shared/definition36.js → number-field/definition.js} +31 -27
  370. package/number-field/index.cjs +60 -5
  371. package/number-field/index.js +369 -3
  372. package/option/definition.cjs +84 -0
  373. package/option/definition.js +78 -0
  374. package/option/index.cjs +1 -5
  375. package/option/index.js +2 -3
  376. package/package.json +15 -4
  377. package/{shared/definition38.cjs → pagination/definition.cjs} +31 -33
  378. package/{shared/definition38.js → pagination/definition.js} +7 -11
  379. package/pagination/index.cjs +43 -5
  380. package/pagination/index.js +194 -3
  381. package/popup/definition.cjs +13 -0
  382. package/popup/definition.js +4 -0
  383. package/popup/index.cjs +1 -5
  384. package/popup/index.js +2 -3
  385. package/{shared/definition40.cjs → progress/definition.cjs} +17 -15
  386. package/{shared/definition40.js → progress/definition.js} +6 -6
  387. package/progress/index.cjs +17 -5
  388. package/progress/index.js +69 -3
  389. package/{shared/definition39.cjs → progress-ring/definition.cjs} +17 -15
  390. package/{shared/definition39.js → progress-ring/definition.js} +7 -7
  391. package/progress-ring/index.cjs +1 -5
  392. package/progress-ring/index.js +2 -3
  393. package/{shared/definition42.cjs → radio/definition.cjs} +20 -23
  394. package/{shared/definition42.js → radio/definition.js} +8 -13
  395. package/radio/index.cjs +1 -5
  396. package/radio/index.js +2 -3
  397. package/{shared/definition41.cjs → radio-group/definition.cjs} +31 -30
  398. package/{shared/definition41.js → radio-group/definition.js} +8 -9
  399. package/radio-group/index.cjs +23 -5
  400. package/radio-group/index.js +255 -3
  401. package/{shared/definition43.cjs → range-slider/definition.cjs} +62 -61
  402. package/{shared/definition43.js → range-slider/definition.js} +13 -14
  403. package/range-slider/index.cjs +68 -5
  404. package/range-slider/index.js +456 -3
  405. package/rich-text-editor/definition.cjs +1206 -0
  406. package/rich-text-editor/definition.js +1200 -0
  407. package/rich-text-editor/index.cjs +133 -4
  408. package/rich-text-editor/index.js +10386 -2
  409. package/{shared/definition45.cjs → searchable-select/definition.cjs} +119 -116
  410. package/{shared/definition45.js → searchable-select/definition.js} +25 -24
  411. package/searchable-select/index.cjs +164 -5
  412. package/searchable-select/index.js +1025 -3
  413. package/{shared/definition46.cjs → select/definition.cjs} +80 -83
  414. package/{shared/definition46.js → select/definition.js} +19 -24
  415. package/select/index.cjs +1 -5
  416. package/select/index.js +2 -3
  417. package/{shared/definition47.cjs → selectable-box/definition.cjs} +26 -32
  418. package/{shared/definition47.js → selectable-box/definition.js} +9 -17
  419. package/selectable-box/index.cjs +28 -5
  420. package/selectable-box/index.js +136 -3
  421. package/shared/aria/aria-mixin.d.ts +43 -3
  422. package/shared/aria/attribute-removal.d.ts +3 -0
  423. package/shared/aria/delegate-aria-behavior.d.ts +0 -3
  424. package/shared/aria/delegates-aria.d.ts +42 -2
  425. package/shared/aria/host-semantics.d.ts +42 -2
  426. package/shared/color-picker/index.d.ts +2 -0
  427. package/shared/color-picker/types.d.ts +4 -0
  428. package/shared/color-picker/utils.d.ts +3 -0
  429. package/shared/feedback/feedback-message.d.ts +42 -2
  430. package/shared/feedback/mixins.d.ts +84 -4
  431. package/shared/foundation/button/button.d.ts +84 -4
  432. package/shared/foundation/form-associated/form-associated.d.ts +84 -4
  433. package/shared/foundation/vivid-element/vivid-element.d.ts +43 -3
  434. package/shared/localization/Locale.d.ts +2 -0
  435. package/shared/patterns/affix.d.ts +84 -4
  436. package/shared/patterns/anchored.d.ts +84 -4
  437. package/shared/patterns/char-count/char-count.d.ts +42 -2
  438. package/shared/patterns/form-elements/form-element.d.ts +84 -4
  439. package/shared/patterns/form-elements/with-contextual-help.d.ts +1238 -0
  440. package/shared/patterns/form-elements/with-error-text.d.ts +126 -6
  441. package/shared/patterns/form-elements/with-success-text.d.ts +42 -2
  442. package/shared/patterns/linkable.d.ts +42 -2
  443. package/shared/patterns/localized.d.ts +42 -2
  444. package/shared/patterns/trapped-focus.d.ts +42 -2
  445. package/shared/picker-field/mixins/calendar-picker.d.ts +94 -14
  446. package/shared/picker-field/mixins/calendar-picker.template.d.ts +94 -14
  447. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +42 -2
  448. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +188 -28
  449. package/shared/picker-field/mixins/single-date-picker.d.ts +280 -40
  450. package/shared/picker-field/mixins/single-value-picker.d.ts +92 -12
  451. package/shared/picker-field/mixins/time-selection-picker.d.ts +188 -28
  452. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +188 -28
  453. package/shared/picker-field/picker-field.d.ts +252 -12
  454. package/{shared/definition48.cjs → side-drawer/definition.cjs} +16 -14
  455. package/{shared/definition48.js → side-drawer/definition.js} +5 -5
  456. package/side-drawer/index.cjs +17 -3
  457. package/side-drawer/index.js +100 -2
  458. package/simple-color-picker/definition.cjs +398 -0
  459. package/simple-color-picker/definition.js +392 -0
  460. package/simple-color-picker/index.cjs +31 -0
  461. package/simple-color-picker/index.js +250 -0
  462. package/{shared/definition49.cjs → slider/definition.cjs} +46 -53
  463. package/{shared/definition49.js → slider/definition.js} +11 -20
  464. package/slider/index.cjs +1 -5
  465. package/slider/index.js +2 -3
  466. package/split-button/definition.cjs +176 -0
  467. package/split-button/definition.js +170 -0
  468. package/split-button/index.cjs +26 -5
  469. package/split-button/index.js +149 -3
  470. package/styles/core/all.css +1 -1
  471. package/styles/core/theme.css +1 -1
  472. package/styles/core/typography.css +1 -1
  473. package/styles/tokens/theme-dark.css +4 -4
  474. package/styles/tokens/theme-light.css +4 -4
  475. package/styles/tokens/vivid-2-compat.css +1 -1
  476. package/{shared/definition51.cjs → switch/definition.cjs} +20 -19
  477. package/{shared/definition51.js → switch/definition.js} +8 -9
  478. package/switch/index.cjs +16 -5
  479. package/switch/index.js +102 -3
  480. package/tab/definition.cjs +127 -0
  481. package/tab/definition.js +121 -0
  482. package/tab/index.cjs +1 -5
  483. package/tab/index.js +2 -3
  484. package/{shared/definition52.cjs → tab-panel/definition.cjs} +7 -4
  485. package/{shared/definition52.js → tab-panel/definition.js} +4 -3
  486. package/tab-panel/index.cjs +1 -5
  487. package/tab-panel/index.js +2 -3
  488. package/{shared/definition54.cjs → tabs/definition.cjs} +47 -40
  489. package/{shared/definition54.js → tabs/definition.js} +19 -14
  490. package/tabs/index.cjs +31 -5
  491. package/tabs/index.js +321 -3
  492. package/tag/definition.cjs +156 -0
  493. package/tag/definition.js +150 -0
  494. package/tag/index.cjs +19 -5
  495. package/tag/index.js +118 -3
  496. package/{shared/definition55.cjs → tag-group/definition.cjs} +9 -6
  497. package/{shared/definition55.js → tag-group/definition.js} +5 -4
  498. package/tag-group/index.cjs +8 -5
  499. package/tag-group/index.js +26 -3
  500. package/text-area/definition.cjs +355 -0
  501. package/text-area/definition.js +349 -0
  502. package/text-area/index.cjs +41 -5
  503. package/text-area/index.js +293 -3
  504. package/{shared/definition58.cjs → text-field/definition.cjs} +70 -52
  505. package/{shared/definition58.js → text-field/definition.js} +40 -24
  506. package/text-field/index.cjs +1 -5
  507. package/text-field/index.js +2 -3
  508. package/time-picker/definition.cjs +43 -0
  509. package/{shared/definition59.js → time-picker/definition.js} +9 -8
  510. package/time-picker/index.cjs +1 -5
  511. package/time-picker/index.js +29 -3
  512. package/{shared/definition60.cjs → toggletip/definition.cjs} +20 -18
  513. package/{shared/definition60.js → toggletip/definition.js} +8 -8
  514. package/toggletip/index.cjs +1 -5
  515. package/toggletip/index.js +2 -3
  516. package/{shared/definition61.cjs → tooltip/definition.cjs} +16 -13
  517. package/{shared/definition61.js → tooltip/definition.js} +7 -6
  518. package/tooltip/index.cjs +1 -5
  519. package/tooltip/index.js +2 -3
  520. package/tree-item/definition.cjs +13 -0
  521. package/tree-item/definition.js +3 -0
  522. package/tree-item/index.cjs +1 -5
  523. package/tree-item/index.js +2 -3
  524. package/{shared/definition63.cjs → tree-view/definition.cjs} +42 -44
  525. package/{shared/definition63.js → tree-view/definition.js} +7 -11
  526. package/tree-view/index.cjs +13 -5
  527. package/tree-view/index.js +171 -3
  528. package/{shared → unbundled}/affix.cjs +10 -11
  529. package/{shared → unbundled}/affix.js +2 -3
  530. package/{shared → unbundled}/anchored.cjs +7 -8
  531. package/{shared → unbundled}/anchored.js +1 -2
  532. package/{shared → unbundled}/attribute-binding-behaviour.cjs +3 -3
  533. package/{shared → unbundled}/attribute-binding-behaviour.js +1 -1
  534. package/{shared → unbundled}/base-progress.cjs +6 -5
  535. package/{shared → unbundled}/base-progress.js +2 -1
  536. package/{shared → unbundled}/breadcrumb-item.cjs +3 -2
  537. package/{shared → unbundled}/breadcrumb-item.js +2 -1
  538. package/{shared → unbundled}/button.cjs +10 -9
  539. package/{shared → unbundled}/button.js +2 -1
  540. package/{shared → unbundled}/calendar-event.cjs +8 -7
  541. package/{shared → unbundled}/calendar-event.js +2 -1
  542. package/unbundled/calendar-picker.template.cjs +917 -0
  543. package/unbundled/calendar-picker.template.js +906 -0
  544. package/{shared → unbundled}/char-count.cjs +6 -7
  545. package/{shared → unbundled}/char-count.js +2 -3
  546. package/unbundled/definition.cjs +225 -0
  547. package/unbundled/definition.js +220 -0
  548. package/{shared/definition30.cjs → unbundled/definition2.cjs} +49 -46
  549. package/{shared/definition30.js → unbundled/definition2.js} +14 -11
  550. package/unbundled/definition3.cjs +207 -0
  551. package/{shared/definition62.js → unbundled/definition3.js} +6 -10
  552. package/unbundled/definition4.cjs +298 -0
  553. package/unbundled/definition4.js +293 -0
  554. package/{shared/definition65.cjs → unbundled/definition5.cjs} +7 -6
  555. package/{shared/definition65.js → unbundled/definition5.js} +3 -2
  556. package/{shared → unbundled}/delegates-aria.cjs +8 -28
  557. package/{shared → unbundled}/delegates-aria.js +6 -26
  558. package/{shared → unbundled}/divider.cjs +13 -7
  559. package/{shared → unbundled}/divider.js +11 -5
  560. package/{shared → unbundled}/form-associated.cjs +13 -13
  561. package/{shared → unbundled}/form-associated.js +2 -2
  562. package/{shared → unbundled}/form-element.cjs +3 -3
  563. package/{shared → unbundled}/form-element.js +1 -1
  564. package/{shared → unbundled}/host-semantics.cjs +2 -1
  565. package/{shared → unbundled}/host-semantics.js +2 -1
  566. package/unbundled/key-codes.cjs +10 -0
  567. package/unbundled/key-codes.js +7 -0
  568. package/{shared → unbundled}/linkable.cjs +11 -12
  569. package/{shared → unbundled}/linkable.js +1 -2
  570. package/{shared → unbundled}/listbox.cjs +22 -38
  571. package/{shared → unbundled}/listbox.js +4 -20
  572. package/{shared → unbundled}/localized.cjs +2 -2
  573. package/{shared → unbundled}/localized.js +1 -1
  574. package/{shared → unbundled}/mixins.cjs +27 -83
  575. package/{shared → unbundled}/mixins.js +6 -62
  576. package/{shared → unbundled}/option.cjs +42 -17
  577. package/{shared → unbundled}/option.js +29 -4
  578. package/{shared → unbundled}/picker-field.template.cjs +21 -21
  579. package/{shared → unbundled}/picker-field.template.js +7 -7
  580. package/{shared → unbundled}/slider.template.cjs +15 -19
  581. package/{shared → unbundled}/slider.template.js +3 -7
  582. package/unbundled/text-field.cjs +5 -0
  583. package/unbundled/text-field.js +3 -0
  584. package/{shared → unbundled}/time-selection-picker.template.cjs +28 -30
  585. package/{shared → unbundled}/time-selection-picker.template.js +4 -6
  586. package/unbundled/vivid-element.cjs +283 -0
  587. package/unbundled/vivid-element.js +274 -0
  588. package/unbundled/with-contextual-help.cjs +29 -0
  589. package/unbundled/with-contextual-help.js +27 -0
  590. package/{shared → unbundled}/with-error-text.cjs +2 -2
  591. package/{shared → unbundled}/with-error-text.js +1 -1
  592. package/{shared → unbundled}/with-success-text.cjs +2 -2
  593. package/{shared → unbundled}/with-success-text.js +1 -1
  594. package/video-player/definition.cjs +536 -0
  595. package/video-player/definition.js +530 -0
  596. package/video-player/index.cjs +536 -3
  597. package/video-player/index.js +35912 -2
  598. package/{shared/definition66.cjs → visually-hidden/definition.cjs} +6 -3
  599. package/{shared/definition66.js → visually-hidden/definition.js} +3 -2
  600. package/visually-hidden/index.cjs +1 -5
  601. package/visually-hidden/index.js +2 -3
  602. package/vivid.api.json +716 -914
  603. package/shared/_has.cjs +0 -58
  604. package/shared/_has.js +0 -54
  605. package/shared/aria.cjs +0 -11
  606. package/shared/aria.js +0 -9
  607. package/shared/calendar-picker.template.cjs +0 -6377
  608. package/shared/calendar-picker.template.js +0 -6366
  609. package/shared/children.cjs +0 -61
  610. package/shared/children.js +0 -59
  611. package/shared/class-names.cjs +0 -17
  612. package/shared/class-names.js +0 -15
  613. package/shared/definition.cjs +0 -145
  614. package/shared/definition.js +0 -141
  615. package/shared/definition11.cjs +0 -220
  616. package/shared/definition11.js +0 -215
  617. package/shared/definition14.cjs +0 -185
  618. package/shared/definition24.cjs +0 -80
  619. package/shared/definition24.js +0 -76
  620. package/shared/definition25.cjs +0 -90
  621. package/shared/definition25.js +0 -86
  622. package/shared/definition26.cjs +0 -2514
  623. package/shared/definition26.js +0 -2510
  624. package/shared/definition32.cjs +0 -120
  625. package/shared/definition32.js +0 -116
  626. package/shared/definition36.cjs +0 -432
  627. package/shared/definition37.cjs +0 -71
  628. package/shared/definition37.js +0 -68
  629. package/shared/definition44.cjs +0 -14666
  630. package/shared/definition44.js +0 -14662
  631. package/shared/definition50.cjs +0 -148
  632. package/shared/definition50.js +0 -144
  633. package/shared/definition53.cjs +0 -124
  634. package/shared/definition53.js +0 -120
  635. package/shared/definition56.cjs +0 -154
  636. package/shared/definition56.js +0 -150
  637. package/shared/definition57.cjs +0 -335
  638. package/shared/definition57.js +0 -331
  639. package/shared/definition59.cjs +0 -39
  640. package/shared/definition62.cjs +0 -211
  641. package/shared/definition64.cjs +0 -69579
  642. package/shared/definition64.js +0 -69575
  643. package/shared/definition67.cjs +0 -2227
  644. package/shared/definition67.js +0 -2222
  645. package/shared/dom.cjs +0 -10
  646. package/shared/dom.js +0 -8
  647. package/shared/key-codes.cjs +0 -32
  648. package/shared/key-codes.js +0 -18
  649. package/shared/numbers.cjs +0 -38
  650. package/shared/numbers.js +0 -34
  651. package/shared/ref.cjs +0 -43
  652. package/shared/ref.js +0 -41
  653. package/shared/repeat.cjs +0 -767
  654. package/shared/repeat.js +0 -764
  655. package/shared/slotted.cjs +0 -123
  656. package/shared/slotted.js +0 -119
  657. package/shared/strings.cjs +0 -11
  658. package/shared/strings.js +0 -9
  659. package/shared/text-field.cjs +0 -5
  660. package/shared/text-field.js +0 -3
  661. package/shared/vivid-element.cjs +0 -2771
  662. package/shared/vivid-element.js +0 -2748
  663. package/shared/when.cjs +0 -31
  664. package/shared/when.js +0 -29
  665. /package/{shared → unbundled}/enums.cjs +0 -0
  666. /package/{shared → unbundled}/enums.js +0 -0
  667. /package/{shared → unbundled}/index.cjs +0 -0
  668. /package/{shared → unbundled}/index.js +0 -0
  669. /package/{shared → unbundled}/playbackRates.cjs +0 -0
  670. /package/{shared → unbundled}/playbackRates.js +0 -0
  671. /package/{shared → unbundled}/scrollIntoView.cjs +0 -0
  672. /package/{shared → unbundled}/scrollIntoView.js +0 -0
  673. /package/{shared → unbundled}/single-date-picker.cjs +0 -0
  674. /package/{shared → unbundled}/single-date-picker.js +0 -0
  675. /package/{shared → unbundled}/single-value-picker.cjs +0 -0
  676. /package/{shared → unbundled}/single-value-picker.js +0 -0
package/{shared/definition51.cjs → switch/definition.cjs} RENAMED
@@ -1,14 +1,15 @@
1
1
  'use strict';
2
2
 
3
- const definition = require('./definition28.cjs');
4
- const vividElement = require('./vivid-element.cjs');
5
- const delegatesAria = require('./delegates-aria.cjs');
6
- const formAssociated = require('./form-associated.cjs');
7
- const keyCodes = require('./key-codes.cjs');
8
- const classNames = require('./class-names.cjs');
9
- const when = require('./when.cjs');
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
10
4
 
11
- 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}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,: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:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.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:where(.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(--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)}";
5
+ const icon_definition = require('../icon/definition.cjs');
6
+ const vividElement = require('../unbundled/vivid-element.cjs');
7
+ const fastElement = require('@microsoft/fast-element');
8
+ const fastWebUtilities = require('@microsoft/fast-web-utilities');
9
+ const delegatesAria = require('../unbundled/delegates-aria.cjs');
10
+ const formAssociated = require('../unbundled/form-associated.cjs');
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(--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
13
 
13
14
  var __defProp = Object.defineProperty;
14
15
  var __decorateClass = (decorators, target, key, kind) => {
@@ -39,7 +40,7 @@ class Switch extends delegatesAria.DelegatesAria(
39
40
  * @internal
40
41
  */
41
42
  this.keypressHandler = (e) => {
42
- if (e.key === keyCodes.keySpace || e.key === keyCodes.keyEnter) {
43
+ if (e.key === fastWebUtilities.keySpace || e.key === fastWebUtilities.keyEnter) {
43
44
  this.checked = !this.checked;
44
45
  }
45
46
  };
@@ -80,19 +81,19 @@ class Switch extends delegatesAria.DelegatesAria(
80
81
  }
81
82
  }
82
83
  __decorateClass([
83
- vividElement.attr
84
+ fastElement.attr
84
85
  ], Switch.prototype, "label");
85
86
  __decorateClass([
86
- vividElement.attr
87
+ fastElement.attr
87
88
  ], Switch.prototype, "connotation");
88
89
  __decorateClass([
89
- vividElement.attr({ attribute: "readonly", mode: "boolean" })
90
+ fastElement.attr({ attribute: "readonly", mode: "boolean" })
90
91
  ], Switch.prototype, "readOnly");
91
92
  __decorateClass([
92
- vividElement.observable
93
+ fastElement.observable
93
94
  ], Switch.prototype, "defaultSlottedNodes");
94
95
 
95
- const getClasses = (_) => classNames.classNames(
96
+ const getClasses = (_) => fastWebUtilities.classNames(
96
97
  "control",
97
98
  ["appearance-filled", _.checked],
98
99
  ["checked", _.checked],
@@ -103,7 +104,7 @@ const getClasses = (_) => classNames.classNames(
103
104
  Boolean(_.checked) && Boolean(_.connotation)
104
105
  ]
105
106
  );
106
- const SwitchTemplate = vividElement.html`
107
+ const SwitchTemplate = fastElement.html`
107
108
  <template>
108
109
  <div
109
110
  class="${getClasses}"
@@ -120,9 +121,9 @@ const SwitchTemplate = vividElement.html`
120
121
  <div class="switch">
121
122
  <span class="checked-indicator"></span>
122
123
  </div>
123
- ${when.when(
124
+ ${fastElement.when(
124
125
  (x) => x.label,
125
- vividElement.html`<div class="label">${(x) => x.label}</div>`
126
+ fastElement.html`<div class="label">${(x) => x.label}</div>`
126
127
  )}
127
128
  </div>
128
129
  </template>
@@ -132,7 +133,7 @@ const switchDefinition = vividElement.defineVividComponent(
132
133
  "switch",
133
134
  Switch,
134
135
  SwitchTemplate,
135
- [definition.iconDefinition],
136
+ [icon_definition.iconDefinition],
136
137
  {
137
138
  styles,
138
139
  shadowOptions: {
@@ -142,6 +143,6 @@ const switchDefinition = vividElement.defineVividComponent(
142
143
  );
143
144
  const registerSwitch = vividElement.createRegisterFunction(switchDefinition);
144
145
 
145
- exports.Switch = Switch;
146
+ exports.VwcSwitchElement = Switch;
146
147
  exports.registerSwitch = registerSwitch;
147
148
  exports.switchDefinition = switchDefinition;
package/{shared/definition51.js → switch/definition.js} RENAMED
@@ -1,12 +1,11 @@
1
- import { i as iconDefinition } from './definition28.js';
2
- import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
3
- import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
4
- import { C as CheckableFormAssociated } from './form-associated.js';
5
- import { a as keySpace, k as keyEnter } from './key-codes.js';
6
- import { c as classNames } from './class-names.js';
7
- import { w as when } from './when.js';
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, observable, when, html } from '@microsoft/fast-element';
4
+ import { keySpace, keyEnter, classNames } from '@microsoft/fast-web-utilities';
5
+ import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
6
+ import { C as CheckableFormAssociated } from '../unbundled/form-associated.js';
8
7
 
9
- 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}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,: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:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.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:where(.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(--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)}";
8
+ 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(--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)}";
10
9
 
11
10
  var __defProp = Object.defineProperty;
12
11
  var __decorateClass = (decorators, target, key, kind) => {
@@ -140,4 +139,4 @@ const switchDefinition = defineVividComponent(
140
139
  );
141
140
  const registerSwitch = createRegisterFunction(switchDefinition);
142
141
 
143
- export { Switch as S, registerSwitch as r, switchDefinition as s };
142
+ export { Switch as VwcSwitchElement, registerSwitch, switchDefinition };
package/switch/index.cjs CHANGED
@@ -1,5 +1,16 @@
1
- 'use strict';
2
-
3
- const definition = require('../shared/definition51.cjs');
4
-
5
- definition.registerSwitch();
1
+ "use strict";const d=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),p=require("../bundled/form-associated.cjs"),v=require("../bundled/key-codes.cjs"),h=require("../bundled/class-names.cjs"),u=require("../bundled/when.cjs"),m=':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(--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)}';var _=Object.defineProperty,t=(o,r,i,x)=>{for(var a=void 0,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=l(r,i,a)||a);return a&&_(r,i,a),a};class c extends s.DelegatesAria(p.CheckableFormAssociated(e.VividElement)){constructor(){super(),this.proxy=document.createElement("input"),this.initialValue="on",this.keypressHandler=r=>{(r.key===v.keySpace||r.key===v.keyEnter)&&(this.checked=!this.checked)},this.clickHandler=()=>{!this.disabled&&!this.readOnly&&(this.checked=!this.checked)},this.checked=this.defaultChecked}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly),this.readOnly?this.classList.add("readonly"):this.classList.remove("readonly")}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","checkbox"),this.updateForm()}updateForm(){const r=this.checked?this.value:null;this.setFormValue(r,r)}}t([e.attr],c.prototype,"label");t([e.attr],c.prototype,"connotation");t([e.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");t([e.observable],c.prototype,"defaultSlottedNodes");const y=o=>h.classNames("control",["appearance-filled",o.checked],["checked",o.checked],["disabled",o.disabled],["readonly",o.readOnly],[`connotation-${o.connotation}`,!!o.checked&&!!o.connotation]),f=e.html`
2
+ <template>
3
+ <div
4
+ class="${y}"
5
+ ${s.delegateAria({role:"switch",ariaChecked:o=>o.checked,ariaDisabled:o=>o.disabled,ariaReadOnly:o=>o.readOnly})}
6
+ tabindex="${o=>o.disabled?null:0}"
7
+ @keypress="${(o,r)=>o.keypressHandler(r.event)}"
8
+ @click="${o=>o.clickHandler()}"
9
+ >
10
+ <div class="switch">
11
+ <span class="checked-indicator"></span>
12
+ </div>
13
+ ${u.when(o=>o.label,e.html`<div class="label">${o=>o.label}</div>`)}
14
+ </div>
15
+ </template>
16
+ `,b=e.defineVividComponent("switch",c,f,[d.iconDefinition],{styles:m,shadowOptions:{delegatesFocus:!0}}),w=e.createRegisterFunction(b);w();
package/switch/index.js CHANGED
@@ -1,3 +1,102 @@
1
- import { r as registerSwitch } from '../shared/definition51.js';
2
-
3
- registerSwitch();
1
+ import { i as s } from "../bundled/definition2.js";
2
+ import { V as d, a as n, o as p, h as v, c as h, d as u } from "../bundled/vivid-element.js";
3
+ import { D as m, d as f } from "../bundled/delegates-aria.js";
4
+ import { C as _ } from "../bundled/form-associated.js";
5
+ import { l as y, f as b } from "../bundled/key-codes.js";
6
+ import { c as w } from "../bundled/class-names.js";
7
+ import { w as x } from "../bundled/when.js";
8
+ const k = ':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(--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)}';
9
+ var g = Object.defineProperty, c = (o, a, i, F) => {
10
+ for (var r = void 0, t = o.length - 1, l; t >= 0; t--)
11
+ (l = o[t]) && (r = l(a, i, r) || r);
12
+ return r && g(a, i, r), r;
13
+ };
14
+ class e extends m(
15
+ _(d)
16
+ ) {
17
+ constructor() {
18
+ super(), this.proxy = document.createElement("input"), this.initialValue = "on", this.keypressHandler = (a) => {
19
+ (a.key === y || a.key === b) && (this.checked = !this.checked);
20
+ }, this.clickHandler = () => {
21
+ !this.disabled && !this.readOnly && (this.checked = !this.checked);
22
+ }, this.checked = this.defaultChecked;
23
+ }
24
+ // Map to proxy element
25
+ /**
26
+ * @internal
27
+ */
28
+ readOnlyChanged() {
29
+ this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly), this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
30
+ }
31
+ /**
32
+ * @internal
33
+ */
34
+ connectedCallback() {
35
+ super.connectedCallback(), this.proxy.setAttribute("type", "checkbox"), this.updateForm();
36
+ }
37
+ /**
38
+ * @internal
39
+ */
40
+ updateForm() {
41
+ const a = this.checked ? this.value : null;
42
+ this.setFormValue(a, a);
43
+ }
44
+ }
45
+ c([
46
+ n
47
+ ], e.prototype, "label");
48
+ c([
49
+ n
50
+ ], e.prototype, "connotation");
51
+ c([
52
+ n({ attribute: "readonly", mode: "boolean" })
53
+ ], e.prototype, "readOnly");
54
+ c([
55
+ p
56
+ ], e.prototype, "defaultSlottedNodes");
57
+ const z = (o) => w(
58
+ "control",
59
+ ["appearance-filled", o.checked],
60
+ ["checked", o.checked],
61
+ ["disabled", o.disabled],
62
+ ["readonly", o.readOnly],
63
+ [
64
+ `connotation-${o.connotation}`,
65
+ !!o.checked && !!o.connotation
66
+ ]
67
+ ), C = v`
68
+ <template>
69
+ <div
70
+ class="${z}"
71
+ ${f({
72
+ role: "switch",
73
+ ariaChecked: (o) => o.checked,
74
+ ariaDisabled: (o) => o.disabled,
75
+ ariaReadOnly: (o) => o.readOnly
76
+ })}
77
+ tabindex="${(o) => o.disabled ? null : 0}"
78
+ @keypress="${(o, a) => o.keypressHandler(a.event)}"
79
+ @click="${(o) => o.clickHandler()}"
80
+ >
81
+ <div class="switch">
82
+ <span class="checked-indicator"></span>
83
+ </div>
84
+ ${x(
85
+ (o) => o.label,
86
+ v`<div class="label">${(o) => o.label}</div>`
87
+ )}
88
+ </div>
89
+ </template>
90
+ `, O = u(
91
+ "switch",
92
+ e,
93
+ C,
94
+ [s],
95
+ {
96
+ styles: k,
97
+ shadowOptions: {
98
+ delegatesFocus: !0
99
+ }
100
+ }
101
+ ), $ = h(O);
102
+ $();
package/tab/definition.cjs ADDED
@@ -0,0 +1,127 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const icon_definition = require('../icon/definition.cjs');
6
+ const vividElement = require('../unbundled/vivid-element.cjs');
7
+ const fastElement = require('@microsoft/fast-element');
8
+ const affix = require('../unbundled/affix.cjs');
9
+ const hostSemantics = require('../unbundled/host-semantics.cjs');
10
+ const localized = require('../unbundled/localized.cjs');
11
+ const fastWebUtilities = require('@microsoft/fast-web-utilities');
12
+
13
+ const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
14
+
15
+ var __defProp = Object.defineProperty;
16
+ var __decorateClass = (decorators, target, key, kind) => {
17
+ var result = void 0 ;
18
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
19
+ if (decorator = decorators[i])
20
+ result = (decorator(target, key, result) ) || result;
21
+ if (result) __defProp(target, key, result);
22
+ return result;
23
+ };
24
+ class Tab extends hostSemantics.HostSemantics(
25
+ affix.AffixIconWithTrailing(localized.Localized(vividElement.VividElement))
26
+ ) {
27
+ constructor() {
28
+ super(...arguments);
29
+ this.removable = false;
30
+ this.tabIndex = "-1";
31
+ this.active = false;
32
+ }
33
+ _handleCloseClick(e) {
34
+ e.stopImmediatePropagation();
35
+ this.$emit("close");
36
+ }
37
+ _onKeyDown(e) {
38
+ if (!this.removable || e.key !== "Delete") return true;
39
+ e.stopImmediatePropagation();
40
+ this.$emit("close");
41
+ return false;
42
+ }
43
+ }
44
+ __decorateClass([
45
+ fastElement.attr({ mode: "boolean" })
46
+ ], Tab.prototype, "disabled");
47
+ __decorateClass([
48
+ fastElement.attr
49
+ ], Tab.prototype, "connotation");
50
+ __decorateClass([
51
+ fastElement.attr
52
+ ], Tab.prototype, "shape");
53
+ __decorateClass([
54
+ fastElement.attr
55
+ ], Tab.prototype, "label");
56
+ __decorateClass([
57
+ fastElement.attr({ mode: "boolean" })
58
+ ], Tab.prototype, "removable");
59
+ __decorateClass([
60
+ fastElement.attr({ mode: "fromView" })
61
+ ], Tab.prototype, "tabIndex");
62
+ __decorateClass([
63
+ fastElement.observable
64
+ ], Tab.prototype, "active");
65
+
66
+ const getClasses = ({
67
+ connotation,
68
+ disabled,
69
+ active,
70
+ iconTrailing,
71
+ shape,
72
+ removable
73
+ }) => fastWebUtilities.classNames(
74
+ "base",
75
+ [`connotation-${connotation}`, Boolean(connotation) && Boolean(active)],
76
+ [`shape-${shape}`, Boolean(shape)],
77
+ ["disabled", Boolean(disabled)],
78
+ ["selected", Boolean(active)],
79
+ ["icon-trailing", iconTrailing],
80
+ ["removable", removable]
81
+ );
82
+ function renderDismissButton(context) {
83
+ const affixIconTemplate = affix.affixIconTemplateFactory(context);
84
+ return fastElement.html`<button
85
+ aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
86
+ class="close"
87
+ id="close-btn"
88
+ @click="${(x, c) => x._handleCloseClick(c.event)}"
89
+ >
90
+ ${() => affixIconTemplate("close-line", affix.IconWrapper.Span)}
91
+ </button>`;
92
+ }
93
+ const TabTemplate = (context) => {
94
+ const affixIconTemplate = affix.affixIconTemplateFactory(context);
95
+ return fastElement.html`
96
+ <template
97
+ slot="tab"
98
+ ?active="${(x) => x.active}"
99
+ ${hostSemantics.applyHostSemantics({
100
+ role: "tab",
101
+ ariaDisabled: (x) => x.disabled,
102
+ ariaSelected: (x) => x.active
103
+ })}
104
+ @keydown="${(x, c) => x._onKeyDown(c.event)}"
105
+ >
106
+ <div class="${getClasses}">
107
+ ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
108
+ ${(x) => x.removable ? renderDismissButton(context) : null}
109
+ </div>
110
+ </template>
111
+ `;
112
+ };
113
+
114
+ const tabDefinition = vividElement.defineVividComponent(
115
+ "tab",
116
+ Tab,
117
+ TabTemplate,
118
+ [icon_definition.iconDefinition],
119
+ {
120
+ styles
121
+ }
122
+ );
123
+ const registerTab = vividElement.createRegisterFunction(tabDefinition);
124
+
125
+ exports.VwcTabElement = Tab;
126
+ exports.registerTab = registerTab;
127
+ exports.tabDefinition = tabDefinition;
package/tab/definition.js ADDED
@@ -0,0 +1,121 @@
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, observable, html } from '@microsoft/fast-element';
4
+ import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
5
+ import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
6
+ import { L as Localized } from '../unbundled/localized.js';
7
+ import { classNames } from '@microsoft/fast-web-utilities';
8
+
9
+ const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
10
+
11
+ var __defProp = Object.defineProperty;
12
+ var __decorateClass = (decorators, target, key, kind) => {
13
+ var result = void 0 ;
14
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
+ if (decorator = decorators[i])
16
+ result = (decorator(target, key, result) ) || result;
17
+ if (result) __defProp(target, key, result);
18
+ return result;
19
+ };
20
+ class Tab extends HostSemantics(
21
+ AffixIconWithTrailing(Localized(VividElement))
22
+ ) {
23
+ constructor() {
24
+ super(...arguments);
25
+ this.removable = false;
26
+ this.tabIndex = "-1";
27
+ this.active = false;
28
+ }
29
+ _handleCloseClick(e) {
30
+ e.stopImmediatePropagation();
31
+ this.$emit("close");
32
+ }
33
+ _onKeyDown(e) {
34
+ if (!this.removable || e.key !== "Delete") return true;
35
+ e.stopImmediatePropagation();
36
+ this.$emit("close");
37
+ return false;
38
+ }
39
+ }
40
+ __decorateClass([
41
+ attr({ mode: "boolean" })
42
+ ], Tab.prototype, "disabled");
43
+ __decorateClass([
44
+ attr
45
+ ], Tab.prototype, "connotation");
46
+ __decorateClass([
47
+ attr
48
+ ], Tab.prototype, "shape");
49
+ __decorateClass([
50
+ attr
51
+ ], Tab.prototype, "label");
52
+ __decorateClass([
53
+ attr({ mode: "boolean" })
54
+ ], Tab.prototype, "removable");
55
+ __decorateClass([
56
+ attr({ mode: "fromView" })
57
+ ], Tab.prototype, "tabIndex");
58
+ __decorateClass([
59
+ observable
60
+ ], Tab.prototype, "active");
61
+
62
+ const getClasses = ({
63
+ connotation,
64
+ disabled,
65
+ active,
66
+ iconTrailing,
67
+ shape,
68
+ removable
69
+ }) => classNames(
70
+ "base",
71
+ [`connotation-${connotation}`, Boolean(connotation) && Boolean(active)],
72
+ [`shape-${shape}`, Boolean(shape)],
73
+ ["disabled", Boolean(disabled)],
74
+ ["selected", Boolean(active)],
75
+ ["icon-trailing", iconTrailing],
76
+ ["removable", removable]
77
+ );
78
+ function renderDismissButton(context) {
79
+ const affixIconTemplate = affixIconTemplateFactory(context);
80
+ return html`<button
81
+ aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
82
+ class="close"
83
+ id="close-btn"
84
+ @click="${(x, c) => x._handleCloseClick(c.event)}"
85
+ >
86
+ ${() => affixIconTemplate("close-line", IconWrapper.Span)}
87
+ </button>`;
88
+ }
89
+ const TabTemplate = (context) => {
90
+ const affixIconTemplate = affixIconTemplateFactory(context);
91
+ return html`
92
+ <template
93
+ slot="tab"
94
+ ?active="${(x) => x.active}"
95
+ ${applyHostSemantics({
96
+ role: "tab",
97
+ ariaDisabled: (x) => x.disabled,
98
+ ariaSelected: (x) => x.active
99
+ })}
100
+ @keydown="${(x, c) => x._onKeyDown(c.event)}"
101
+ >
102
+ <div class="${getClasses}">
103
+ ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
104
+ ${(x) => x.removable ? renderDismissButton(context) : null}
105
+ </div>
106
+ </template>
107
+ `;
108
+ };
109
+
110
+ const tabDefinition = defineVividComponent(
111
+ "tab",
112
+ Tab,
113
+ TabTemplate,
114
+ [iconDefinition],
115
+ {
116
+ styles
117
+ }
118
+ );
119
+ const registerTab = createRegisterFunction(tabDefinition);
120
+
121
+ export { Tab as VwcTabElement, registerTab, tabDefinition };
package/tab/index.cjs CHANGED
@@ -1,5 +1 @@
1
- 'use strict';
2
-
3
- const definition = require('../shared/definition53.cjs');
4
-
5
- definition.registerTab();
1
+ "use strict";const e=require("../bundled/definition20.cjs");e.registerTab();
package/tab/index.js CHANGED
@@ -1,3 +1,2 @@
1
- import { r as registerTab } from '../shared/definition53.js';
2
-
3
- registerTab();
1
+ import { r } from "../bundled/definition20.js";
2
+ r();