@vonage/vivid 5.23.0 → 5.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (507) hide show
  1. package/action-group/index.cjs +1 -1
  2. package/action-group/index.js +1 -1
  3. package/alert/definition.cjs +1 -1
  4. package/alert/definition.js +1 -1
  5. package/alert/index.cjs +7 -7
  6. package/alert/index.js +13 -14
  7. package/audio-player/definition.cjs +1 -1
  8. package/audio-player/definition.js +1 -1
  9. package/audio-player/index.cjs +18 -16
  10. package/audio-player/index.js +21 -19
  11. package/avatar/definition.cjs +1 -1
  12. package/avatar/definition.js +1 -1
  13. package/avatar/index.cjs +4 -4
  14. package/avatar/index.js +6 -6
  15. package/badge/definition.cjs +1 -1
  16. package/badge/definition.js +1 -1
  17. package/banner/definition.cjs +1 -1
  18. package/banner/definition.js +1 -1
  19. package/banner/index.cjs +3 -3
  20. package/banner/index.js +8 -8
  21. package/breadcrumb/definition.cjs +1 -1
  22. package/breadcrumb/definition.js +1 -1
  23. package/breadcrumb-item/definition.cjs +1 -1
  24. package/breadcrumb-item/definition.js +1 -1
  25. package/breadcrumb-item/index.cjs +2 -2
  26. package/breadcrumb-item/index.js +5 -5
  27. package/bundled/affix.cjs +1 -1
  28. package/bundled/affix.js +1 -1
  29. package/bundled/base-color-picker.cjs +2 -2
  30. package/bundled/base-color-picker.js +5 -5
  31. package/bundled/calendar-picker.template.cjs +1 -1
  32. package/bundled/calendar-picker.template.js +1 -1
  33. package/bundled/definition11.cjs +4 -4
  34. package/bundled/definition11.js +5 -5
  35. package/bundled/definition12.cjs +9 -7
  36. package/bundled/definition12.js +28 -26
  37. package/bundled/definition13.cjs +9 -7
  38. package/bundled/definition13.js +16 -15
  39. package/bundled/definition15.cjs +6 -6
  40. package/bundled/definition15.js +17 -17
  41. package/bundled/definition16.cjs +4 -2
  42. package/bundled/definition16.js +8 -6
  43. package/bundled/definition17.cjs +8 -6
  44. package/bundled/definition17.js +15 -14
  45. package/bundled/definition18.cjs +23 -23
  46. package/bundled/definition18.js +51 -52
  47. package/bundled/definition19.cjs +3 -1
  48. package/bundled/definition19.js +3 -1
  49. package/bundled/definition2.cjs +1 -13
  50. package/bundled/definition2.js +181 -48
  51. package/bundled/definition20.cjs +11 -9
  52. package/bundled/definition20.js +25 -23
  53. package/bundled/definition21.cjs +6 -6
  54. package/bundled/definition21.js +7 -8
  55. package/bundled/definition22.cjs +5 -3
  56. package/bundled/definition22.js +13 -11
  57. package/bundled/definition23.cjs +1 -1
  58. package/bundled/definition23.js +2 -2
  59. package/bundled/definition24.cjs +10 -10
  60. package/bundled/definition24.js +12 -12
  61. package/bundled/definition3.cjs +13 -1
  62. package/bundled/definition3.js +48 -181
  63. package/bundled/definition4.cjs +9 -7
  64. package/bundled/definition4.js +18 -16
  65. package/bundled/definition5.cjs +5 -5
  66. package/bundled/definition5.js +9 -9
  67. package/bundled/definition6.cjs +3 -3
  68. package/bundled/definition6.js +16 -16
  69. package/bundled/definition7.cjs +1 -1
  70. package/bundled/definition7.js +1 -1
  71. package/bundled/definition8.cjs +7 -7
  72. package/bundled/definition8.js +9 -7
  73. package/bundled/definition9.cjs +4 -4
  74. package/bundled/definition9.js +12 -12
  75. package/bundled/mixins.cjs +3 -3
  76. package/bundled/mixins.js +5 -5
  77. package/bundled/numberConverter.cjs +1 -1
  78. package/bundled/numberConverter.js +36 -1
  79. package/bundled/picker-field.template.cjs +13 -13
  80. package/bundled/picker-field.template.js +16 -16
  81. package/bundled/slider.template.cjs +8 -8
  82. package/bundled/slider.template.js +9 -9
  83. package/bundled/text-field.cjs +1 -1
  84. package/bundled/text-field.js +1 -1
  85. package/bundled/time-selection-picker.template.cjs +3 -3
  86. package/bundled/time-selection-picker.template.js +9 -9
  87. package/bundled/vivid-element.cjs +1 -1
  88. package/bundled/vivid-element.js +1 -1
  89. package/button/definition.cjs +1 -1
  90. package/button/definition.js +1 -1
  91. package/calendar/definition.cjs +1 -1
  92. package/calendar/definition.js +1 -1
  93. package/calendar/index.cjs +9 -9
  94. package/calendar/index.js +7 -7
  95. package/calendar-event/definition.cjs +1 -1
  96. package/calendar-event/definition.js +1 -1
  97. package/calendar-event/index.cjs +2 -2
  98. package/calendar-event/index.js +2 -2
  99. package/card/definition.cjs +1 -1
  100. package/card/definition.js +1 -1
  101. package/card/index.cjs +3 -3
  102. package/card/index.js +6 -6
  103. package/color-picker/index.cjs +10 -10
  104. package/color-picker/index.js +52 -52
  105. package/combobox/index.cjs +14 -11
  106. package/combobox/index.js +38 -36
  107. package/custom-elements.json +4235 -4883
  108. package/data-grid/index.cjs +8 -6
  109. package/data-grid/index.js +20 -18
  110. package/dial-pad/index.cjs +22 -20
  111. package/dial-pad/index.js +36 -34
  112. package/dialog/index.cjs +14 -14
  113. package/dialog/index.js +17 -18
  114. package/elevation/definition.cjs +1 -1
  115. package/elevation/definition.js +1 -1
  116. package/empty-state/index.cjs +4 -4
  117. package/empty-state/index.js +7 -11
  118. package/fab/index.cjs +4 -4
  119. package/fab/index.js +9 -13
  120. package/file-picker/index.cjs +8 -8
  121. package/file-picker/index.js +19 -19
  122. package/flag/index.cjs +5 -5
  123. package/flag/index.js +8 -12
  124. package/header/index.cjs +5 -5
  125. package/header/index.js +4 -8
  126. package/icon/index.cjs +1 -1
  127. package/icon/index.js +1 -1
  128. package/index.cjs +15 -14
  129. package/index.js +16 -16
  130. package/kbd-key/index.cjs +3 -3
  131. package/kbd-key/index.js +2 -6
  132. package/layout/index.cjs +3 -1
  133. package/layout/index.js +3 -1
  134. package/lib/accordion/variations.browser-spec.d.ts +1 -0
  135. package/lib/accordion-item/variations.browser-spec.d.ts +1 -0
  136. package/lib/action-group/variations.browser-spec.d.ts +1 -0
  137. package/lib/alert/variations.browser-spec.d.ts +1 -0
  138. package/lib/audio-player/variations.browser-spec.d.ts +1 -0
  139. package/lib/avatar/variations.browser-spec.d.ts +1 -0
  140. package/lib/badge/badge.d.ts +4 -4
  141. package/lib/badge/badge.template.d.ts +1 -2
  142. package/lib/badge/variations.browser-spec.d.ts +1 -0
  143. package/lib/banner/variations.browser-spec.d.ts +1 -0
  144. package/lib/breadcrumb-item/variations.browser-spec.d.ts +1 -0
  145. package/lib/button/variations.browser-spec.d.ts +1 -0
  146. package/lib/calendar/variations.browser-spec.d.ts +1 -0
  147. package/lib/calendar-event/variations.browser-spec.d.ts +1 -0
  148. package/lib/card/card.d.ts +4 -4
  149. package/lib/card/variations.browser-spec.d.ts +1 -0
  150. package/lib/checkbox/variations.browser-spec.d.ts +1 -0
  151. package/lib/color-picker/color-picker.d.ts +1 -1
  152. package/lib/color-picker/variations.browser-spec.d.ts +1 -0
  153. package/lib/combobox/variations.browser-spec.d.ts +1 -0
  154. package/lib/contextual-help/variations.browser-spec.d.ts +1 -0
  155. package/lib/country/variations.browser-spec.d.ts +1 -0
  156. package/lib/data-grid/variations.browser-spec.d.ts +1 -0
  157. package/lib/date-picker/variations.browser-spec.d.ts +1 -0
  158. package/lib/date-range-picker/variations.browser-spec.d.ts +1 -0
  159. package/lib/date-time-picker/variations.browser-spec.d.ts +1 -0
  160. package/lib/dial-pad/variations.browser-spec.d.ts +1 -0
  161. package/lib/dialog/variations.browser-spec.d.ts +1 -0
  162. package/lib/divider/variations.browser-spec.d.ts +1 -0
  163. package/lib/empty-state/variations.browser-spec.d.ts +1 -0
  164. package/lib/fab/fab.d.ts +5 -5
  165. package/lib/fab/variations.browser-spec.d.ts +1 -0
  166. package/lib/file-picker/variations.browser-spec.d.ts +1 -0
  167. package/lib/flag/variations.browser-spec.d.ts +1 -0
  168. package/lib/header/variations.browser-spec.d.ts +1 -0
  169. package/lib/icon/variations.browser-spec.d.ts +1 -0
  170. package/lib/kbd-key/variations.browser-spec.d.ts +1 -0
  171. package/lib/kbd-shortcut/variations.browser-spec.d.ts +1 -0
  172. package/lib/layout/variations.browser-spec.d.ts +1 -0
  173. package/lib/menu/variations.browser-spec.d.ts +1 -0
  174. package/lib/menu-item/variations.browser-spec.d.ts +1 -0
  175. package/lib/nav/variations.browser-spec.d.ts +1 -0
  176. package/lib/nav-disclosure/variations.browser-spec.d.ts +1 -0
  177. package/lib/nav-item/variations.browser-spec.d.ts +1 -0
  178. package/lib/note/variations.browser-spec.d.ts +1 -0
  179. package/lib/number-field/variations.browser-spec.d.ts +1 -0
  180. package/lib/option/variations.browser-spec.d.ts +1 -0
  181. package/lib/pagination/variations.browser-spec.d.ts +1 -0
  182. package/lib/popover/variations.browser-spec.d.ts +1 -0
  183. package/lib/progress/variations.browser-spec.d.ts +1 -0
  184. package/lib/progress-ring/variations.browser-spec.d.ts +1 -0
  185. package/lib/radio/variations.browser-spec.d.ts +1 -0
  186. package/lib/radio-group/variations.browser-spec.d.ts +1 -0
  187. package/lib/range-slider/variations.browser-spec.d.ts +1 -0
  188. package/lib/rich-text-editor/rte/features/internal/cursor-fix.d.ts +6 -1
  189. package/lib/rich-text-editor/variations.browser-spec.d.ts +1 -0
  190. package/lib/rich-text-view/variations.browser-spec.d.ts +1 -0
  191. package/lib/searchable-select/variations.browser-spec.d.ts +1 -0
  192. package/lib/select/variations.browser-spec.d.ts +1 -0
  193. package/lib/selectable-box/variations.browser-spec.d.ts +1 -0
  194. package/lib/side-drawer/variations.browser-spec.d.ts +1 -0
  195. package/lib/simple-color-picker/simple-color-picker.d.ts +2 -2
  196. package/lib/simple-color-picker/variations.browser-spec.d.ts +1 -0
  197. package/lib/slider/variations.browser-spec.d.ts +1 -0
  198. package/lib/split-button/variations.browser-spec.d.ts +1 -0
  199. package/lib/status/variations.browser-spec.d.ts +1 -0
  200. package/lib/switch/variations.browser-spec.d.ts +1 -0
  201. package/lib/tab/tab.d.ts +12 -12
  202. package/lib/table/variations.browser-spec.d.ts +1 -0
  203. package/lib/tabs/variations.browser-spec.d.ts +1 -0
  204. package/lib/tag/tag.d.ts +12 -12
  205. package/lib/tag/variations.browser-spec.d.ts +1 -0
  206. package/lib/text-area/text-area.template.d.ts +1 -2
  207. package/lib/text-area/variations.browser-spec.d.ts +1 -0
  208. package/lib/text-field/variations.browser-spec.d.ts +1 -0
  209. package/lib/time-picker/variations.browser-spec.d.ts +1 -0
  210. package/lib/toggletip/variations.browser-spec.d.ts +1 -0
  211. package/lib/tooltip/variations.browser-spec.d.ts +1 -0
  212. package/lib/tree-item/variations.browser-spec.d.ts +1 -0
  213. package/lib/video-player/variations.browser-spec.d.ts +1 -0
  214. package/menu/definition.cjs +1 -1
  215. package/menu/definition.js +1 -1
  216. package/menu-item/definition.cjs +1 -1
  217. package/menu-item/definition.js +1 -1
  218. package/nav-disclosure/index.cjs +6 -6
  219. package/nav-disclosure/index.js +11 -15
  220. package/nav-item/index.cjs +2 -2
  221. package/nav-item/index.js +11 -15
  222. package/note/index.cjs +5 -5
  223. package/note/index.js +10 -11
  224. package/number-field/index.cjs +12 -12
  225. package/number-field/index.js +34 -35
  226. package/package.json +19 -10
  227. package/popover/index.cjs +8 -8
  228. package/popover/index.js +11 -15
  229. package/popup/definition.cjs +1 -1
  230. package/popup/definition.js +1 -1
  231. package/progress/index.cjs +8 -8
  232. package/progress/index.js +9 -10
  233. package/range-slider/index.cjs +10 -8
  234. package/range-slider/index.js +26 -24
  235. package/rich-text-editor/index.cjs +3 -3
  236. package/rich-text-editor/index.js +758 -747
  237. package/searchable-select/definition.cjs +1 -0
  238. package/searchable-select/definition.js +2 -2
  239. package/searchable-select/index.cjs +30 -27
  240. package/searchable-select/index.js +80 -76
  241. package/selectable-box/index.cjs +8 -8
  242. package/selectable-box/index.js +8 -9
  243. package/side-drawer/index.cjs +3 -3
  244. package/side-drawer/index.js +3 -3
  245. package/simple-color-picker/index.cjs +4 -4
  246. package/simple-color-picker/index.js +6 -6
  247. package/slider/definition.cjs +1 -1
  248. package/slider/definition.js +1 -1
  249. package/slider/index.cjs +1 -1
  250. package/slider/index.js +1 -1
  251. package/split-button/index.cjs +4 -4
  252. package/split-button/index.js +9 -9
  253. package/status/index.cjs +7 -5
  254. package/status/index.js +14 -12
  255. package/styles/core/all.css +5 -7
  256. package/styles/core/theme.css +5 -7
  257. package/styles/core/typography.css +0 -3
  258. package/styles/tokens/vivid-2-compat.css +1 -6
  259. package/switch/index.cjs +3 -3
  260. package/switch/index.js +5 -5
  261. package/table/index.cjs +10 -10
  262. package/table/index.js +12 -12
  263. package/tabs/index.cjs +6 -4
  264. package/tabs/index.js +10 -9
  265. package/tag/index.cjs +6 -6
  266. package/tag/index.js +8 -8
  267. package/text-area/index.cjs +8 -6
  268. package/text-area/index.js +20 -19
  269. package/unbundled/affix.cjs +2 -7
  270. package/unbundled/affix.js +2 -7
  271. package/unbundled/anchored.cjs +2 -6
  272. package/unbundled/anchored.js +2 -6
  273. package/unbundled/aria-binding-directive.cjs +1 -3
  274. package/unbundled/aria-binding-directive.js +1 -3
  275. package/unbundled/base-color-picker.cjs +18 -52
  276. package/unbundled/base-color-picker.js +18 -52
  277. package/unbundled/base-progress.cjs +4 -14
  278. package/unbundled/base-progress.js +4 -14
  279. package/unbundled/button.cjs +2 -8
  280. package/unbundled/button.js +2 -8
  281. package/unbundled/calendar-picker.template.cjs +31 -85
  282. package/unbundled/calendar-picker.template.js +30 -84
  283. package/unbundled/char-count.cjs +2 -4
  284. package/unbundled/char-count.js +2 -4
  285. package/unbundled/data-grid.options.cjs +3 -19
  286. package/unbundled/data-grid.options.js +3 -19
  287. package/unbundled/definition.cjs +3 -8
  288. package/unbundled/definition.js +3 -8
  289. package/unbundled/definition10.cjs +316 -211
  290. package/unbundled/definition10.js +313 -202
  291. package/unbundled/definition11.cjs +262 -356
  292. package/unbundled/definition11.js +248 -354
  293. package/unbundled/definition12.cjs +243 -274
  294. package/unbundled/definition12.js +241 -260
  295. package/unbundled/definition13.cjs +341 -255
  296. package/unbundled/definition13.js +338 -252
  297. package/unbundled/definition14.cjs +61 -371
  298. package/unbundled/definition14.js +57 -367
  299. package/unbundled/definition15.cjs +32 -77
  300. package/unbundled/definition15.js +28 -73
  301. package/unbundled/definition16.cjs +120 -32
  302. package/unbundled/definition16.js +117 -29
  303. package/unbundled/definition17.cjs +24 -132
  304. package/unbundled/definition17.js +24 -126
  305. package/unbundled/definition18.cjs +74 -26
  306. package/unbundled/definition18.js +67 -25
  307. package/unbundled/definition19.cjs +33 -79
  308. package/unbundled/definition19.js +32 -73
  309. package/unbundled/definition2.cjs +3 -6
  310. package/unbundled/definition2.js +3 -6
  311. package/unbundled/definition20.cjs +272 -29
  312. package/unbundled/definition20.js +264 -27
  313. package/unbundled/definition21.cjs +135 -263
  314. package/unbundled/definition21.js +133 -260
  315. package/unbundled/definition22.cjs +17 -155
  316. package/unbundled/definition22.js +13 -151
  317. package/unbundled/definition23.cjs +8 -17
  318. package/unbundled/definition23.js +8 -17
  319. package/unbundled/definition24.cjs +4 -10
  320. package/unbundled/definition24.js +4 -10
  321. package/unbundled/definition25.cjs +2 -10
  322. package/unbundled/definition25.js +2 -10
  323. package/unbundled/definition26.cjs +28 -70
  324. package/unbundled/definition26.js +28 -70
  325. package/unbundled/definition27.cjs +6 -13
  326. package/unbundled/definition27.js +6 -13
  327. package/unbundled/definition28.cjs +30 -77
  328. package/unbundled/definition28.js +30 -77
  329. package/unbundled/definition29.cjs +7 -14
  330. package/unbundled/definition29.js +7 -14
  331. package/unbundled/definition3.cjs +5 -16
  332. package/unbundled/definition3.js +5 -16
  333. package/unbundled/definition30.cjs +20 -51
  334. package/unbundled/definition30.js +20 -51
  335. package/unbundled/definition31.cjs +2 -4
  336. package/unbundled/definition31.js +2 -4
  337. package/unbundled/definition32.cjs +7 -17
  338. package/unbundled/definition32.js +7 -17
  339. package/unbundled/definition33.cjs +4 -9
  340. package/unbundled/definition33.js +4 -9
  341. package/unbundled/definition34.cjs +51 -141
  342. package/unbundled/definition34.js +51 -141
  343. package/unbundled/definition35.cjs +4 -5
  344. package/unbundled/definition35.js +4 -5
  345. package/unbundled/definition36.cjs +16 -38
  346. package/unbundled/definition36.js +14 -36
  347. package/unbundled/definition37.cjs +33 -89
  348. package/unbundled/definition37.js +31 -87
  349. package/unbundled/definition38.cjs +18 -44
  350. package/unbundled/definition38.js +16 -42
  351. package/unbundled/definition39.cjs +16 -32
  352. package/unbundled/definition39.js +13 -29
  353. package/unbundled/definition4.cjs +2 -11
  354. package/unbundled/definition4.js +2 -7
  355. package/unbundled/definition40.cjs +9 -20
  356. package/unbundled/definition40.js +9 -20
  357. package/unbundled/definition41.cjs +3 -6
  358. package/unbundled/definition41.js +3 -6
  359. package/unbundled/definition42.cjs +3 -6
  360. package/unbundled/definition42.js +3 -6
  361. package/unbundled/definition43.cjs +24 -67
  362. package/unbundled/definition43.js +24 -67
  363. package/unbundled/definition44.cjs +3 -6
  364. package/unbundled/definition44.js +3 -6
  365. package/unbundled/definition45.cjs +1 -3
  366. package/unbundled/definition45.js +1 -3
  367. package/unbundled/definition46.cjs +5 -14
  368. package/unbundled/definition46.js +5 -14
  369. package/unbundled/definition47.cjs +4 -5
  370. package/unbundled/definition47.js +5 -11
  371. package/unbundled/definition48.cjs +5 -12
  372. package/unbundled/definition48.js +5 -12
  373. package/unbundled/definition49.cjs +3 -7
  374. package/unbundled/definition49.js +3 -7
  375. package/unbundled/definition5.cjs +2 -5
  376. package/unbundled/definition5.js +2 -5
  377. package/unbundled/definition50.cjs +1 -3
  378. package/unbundled/definition50.js +1 -3
  379. package/unbundled/definition51.cjs +2 -5
  380. package/unbundled/definition51.js +2 -5
  381. package/unbundled/definition52.cjs +19 -44
  382. package/unbundled/definition52.js +16 -41
  383. package/unbundled/definition53.cjs +5 -13
  384. package/unbundled/definition53.js +5 -13
  385. package/unbundled/definition54.cjs +2 -6
  386. package/unbundled/definition54.js +2 -6
  387. package/unbundled/definition55.cjs +23 -65
  388. package/unbundled/definition55.js +23 -65
  389. package/unbundled/definition56.cjs +2 -5
  390. package/unbundled/definition56.js +2 -5
  391. package/unbundled/definition57.cjs +11 -24
  392. package/unbundled/definition57.js +11 -26
  393. package/unbundled/definition58.cjs +10 -30
  394. package/unbundled/definition58.js +10 -30
  395. package/unbundled/definition59.cjs +19 -48
  396. package/unbundled/definition59.js +19 -48
  397. package/unbundled/definition6.cjs +179 -17
  398. package/unbundled/definition6.js +170 -14
  399. package/unbundled/definition60.cjs +70 -54
  400. package/unbundled/definition60.js +70 -54
  401. package/unbundled/definition61.cjs +22 -54
  402. package/unbundled/definition61.js +22 -54
  403. package/unbundled/definition62.cjs +3 -9
  404. package/unbundled/definition62.js +3 -9
  405. package/unbundled/definition63.cjs +62 -130
  406. package/unbundled/definition63.js +60 -131
  407. package/unbundled/definition64.cjs +5 -12
  408. package/unbundled/definition64.js +5 -12
  409. package/unbundled/definition65.cjs +6 -14
  410. package/unbundled/definition65.js +6 -19
  411. package/unbundled/definition66.cjs +13 -35
  412. package/unbundled/definition66.js +13 -35
  413. package/unbundled/definition67.cjs +3 -5
  414. package/unbundled/definition67.js +3 -5
  415. package/unbundled/definition68.cjs +4 -5
  416. package/unbundled/definition68.js +4 -5
  417. package/unbundled/definition69.cjs +6 -15
  418. package/unbundled/definition69.js +6 -17
  419. package/unbundled/definition7.cjs +31 -177
  420. package/unbundled/definition7.js +24 -170
  421. package/unbundled/definition70.cjs +1 -3
  422. package/unbundled/definition70.js +1 -3
  423. package/unbundled/definition71.cjs +7 -12
  424. package/unbundled/definition71.js +7 -12
  425. package/unbundled/definition72.cjs +11 -25
  426. package/unbundled/definition72.js +11 -25
  427. package/unbundled/definition73.cjs +15 -39
  428. package/unbundled/definition73.js +15 -39
  429. package/unbundled/definition74.cjs +1 -3
  430. package/unbundled/definition74.js +1 -3
  431. package/unbundled/definition75.cjs +5 -11
  432. package/unbundled/definition75.js +5 -11
  433. package/unbundled/definition76.cjs +24 -59
  434. package/unbundled/definition76.js +24 -59
  435. package/unbundled/definition77.cjs +6 -8
  436. package/unbundled/definition77.js +4 -6
  437. package/unbundled/definition78.cjs +7 -13
  438. package/unbundled/definition78.js +7 -13
  439. package/unbundled/definition79.cjs +5 -15
  440. package/unbundled/definition79.js +5 -15
  441. package/unbundled/definition8.cjs +152 -36
  442. package/unbundled/definition8.js +148 -31
  443. package/unbundled/definition80.cjs +9 -25
  444. package/unbundled/definition80.js +9 -25
  445. package/unbundled/definition9.cjs +200 -135
  446. package/unbundled/definition9.js +189 -130
  447. package/unbundled/delegates-aria.cjs +1 -3
  448. package/unbundled/delegates-aria.js +1 -3
  449. package/unbundled/divider.cjs +2 -7
  450. package/unbundled/divider.js +2 -7
  451. package/unbundled/form-associated.cjs +20 -60
  452. package/unbundled/form-associated.js +20 -60
  453. package/unbundled/form-element.cjs +5 -15
  454. package/unbundled/form-element.js +5 -15
  455. package/unbundled/host-semantics.cjs +1 -3
  456. package/unbundled/host-semantics.js +1 -3
  457. package/unbundled/kbd-shortcut.cjs +1 -3
  458. package/unbundled/kbd-shortcut.js +1 -3
  459. package/unbundled/linkable.cjs +1 -3
  460. package/unbundled/linkable.js +1 -3
  461. package/unbundled/listbox.cjs +6 -20
  462. package/unbundled/listbox.js +6 -20
  463. package/unbundled/localized.cjs +3 -9
  464. package/unbundled/localized.js +3 -9
  465. package/unbundled/mixins.cjs +9 -25
  466. package/unbundled/mixins.js +9 -25
  467. package/unbundled/numberConverter.cjs +39 -9
  468. package/unbundled/numberConverter.js +39 -9
  469. package/unbundled/picker-field.template.cjs +16 -36
  470. package/unbundled/picker-field.template.js +16 -36
  471. package/unbundled/platform.cjs +1 -3
  472. package/unbundled/platform.js +1 -3
  473. package/unbundled/playbackRates.cjs +1 -3
  474. package/unbundled/playbackRates.js +1 -3
  475. package/unbundled/randomId.cjs +1 -3
  476. package/unbundled/randomId.js +1 -3
  477. package/unbundled/single-date-picker.cjs +6 -18
  478. package/unbundled/single-date-picker.js +6 -18
  479. package/unbundled/single-value-picker.cjs +7 -21
  480. package/unbundled/single-value-picker.js +7 -21
  481. package/unbundled/slider.template.cjs +6 -14
  482. package/unbundled/slider.template.js +6 -14
  483. package/unbundled/slottable-request.cjs +2 -6
  484. package/unbundled/slottable-request.js +2 -6
  485. package/unbundled/text-field.cjs +1 -1
  486. package/unbundled/text-field.js +1 -1
  487. package/unbundled/time-selection-picker.template.cjs +27 -79
  488. package/unbundled/time-selection-picker.template.js +27 -79
  489. package/unbundled/trapped-focus.cjs +1 -3
  490. package/unbundled/trapped-focus.js +1 -3
  491. package/unbundled/vivid-element.cjs +7 -19
  492. package/unbundled/vivid-element.js +7 -19
  493. package/unbundled/with-contextual-help.cjs +4 -13
  494. package/unbundled/with-contextual-help.js +4 -13
  495. package/unbundled/with-error-text.cjs +2 -6
  496. package/unbundled/with-error-text.js +2 -6
  497. package/unbundled/with-success-text.cjs +1 -3
  498. package/unbundled/with-success-text.js +1 -3
  499. package/video-player/index.cjs +3 -3
  500. package/video-player/index.js +5 -5
  501. package/visually-hidden/definition.cjs +1 -1
  502. package/visually-hidden/definition.js +1 -1
  503. package/shared/color-picker/index.d.ts +0 -3
  504. package/shared/foundation/button/index.d.ts +0 -2
  505. package/shared/patterns/char-count/index.d.ts +0 -1
  506. package/shared/patterns/form-elements/index.d.ts +0 -4
  507. package/shared/patterns/index.d.ts +0 -7
@@ -1,10 +1,12 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./definition2.cjs`),s=require(`./affix.cjs`),c=require(`./form-element.cjs`),l=require(`./with-success-text.cjs`),u=require(`./with-error-text.cjs`),d=require(`./with-contextual-help.cjs`),f=require(`./class-names.cjs`),p=require(`./delegates-aria.cjs`),m=require(`./char-count.cjs`),h=require(`./form-associated.cjs`),g=require(`./render-in-light-dom.cjs`),_=require(`./mixins.cjs`),v=require(`./definition11.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./affix.cjs`),l=require(`./delegates-aria.cjs`),u=require(`./form-associated.cjs`),d=require(`./render-in-light-dom.cjs`),f=require(`./mixins.cjs`),p=require(`./definition11.cjs`),m=require(`./form-element.cjs`),h=require(`./char-count.cjs`),g=require(`./with-contextual-help.cjs`),_=require(`./with-error-text.cjs`),v=require(`./with-success-text.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
2
2
  ._vvd-3-text-field-safari-workaround::placeholder {
3
3
  opacity: 1 !important;
4
4
  -webkit-text-fill-color: var(--_low-ink-color) !important;
5
5
  }
6
- `]),S=e=>{let t=e.getRootNode();x.isAttachedTo(t)||x.addStylesTo(t)},C=class extends d.t(_.n(m.t(u.t(l.t(c.t(s.t(p.t(h.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=b.text,this.#e=g.n()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),S(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}};a.t([e.m({attribute:`readonly`,mode:`boolean`})],C.prototype,`readOnly`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`autofocus`,void 0),a.t([e.m],C.prototype,`placeholder`,void 0),a.t([e.m],C.prototype,`type`,void 0),a.t([e.m],C.prototype,`list`,void 0),a.t([e.m({converter:e.h})],C.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],C.prototype,`minlength`,void 0),a.t([e.m],C.prototype,`pattern`,void 0),a.t([e.m({converter:e.h})],C.prototype,`size`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`spellcheck`,void 0),a.t([e.m],C.prototype,`appearance`,void 0),a.t([e.m],C.prototype,`shape`,void 0),a.t([e.m],C.prototype,`autoComplete`,void 0),a.t([e.m()],C.prototype,`scale`,void 0),a.t([e.m({attribute:`inputmode`})],C.prototype,`inputMode`,void 0),a.t([e.A],C.prototype,`actionItemsSlottedContent`,void 0),a.t([e.A],C.prototype,`leadingActionItemsSlottedContent`,void 0);var w=e=>`vvd-text-field-control-${e}`,T=({errorValidationMessage:e,disabled:t,value:n,readOnly:r,placeholder:i,appearance:a,shape:o,label:s,successText:c,actionItemsSlottedContent:l,leadingActionItemsSlottedContent:u,icon:d,scale:p})=>f.t([`error`,!!e],[`disabled`,t],[`has-value`,!!n],[`readonly`,r],[`placeholder`,!!i],[`appearance-${a}`,!!a],[`shape-${o}`,!!o],[`no-label`,!s],[`has-icon`,!!d],[`success`,!!c],[`action-items`,!!l?.length],[`leading-action-items`,!!u?.length],[`no-leading`,!(u?.length||d)],[`size-${p}`,!!p]),E=e.u(`text-field`,C,i=>{let a=s.a(i);return e.p`
7
- <div class="base ${T}">
6
+ `]),S=e=>{let t=e.getRootNode();x.isAttachedTo(t)||x.addStylesTo(t)},C=class extends g.t(f.n(h.t(_.t(v.t(m.t(c.t(l.t(u.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=b.text,this.#e=d.n()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),S(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}};a.t([e.m({attribute:`readonly`,mode:`boolean`})],C.prototype,`readOnly`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`autofocus`,void 0),a.t([e.m],C.prototype,`placeholder`,void 0),a.t([e.m],C.prototype,`type`,void 0),a.t([e.m],C.prototype,`list`,void 0),a.t([e.m({converter:e.h})],C.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],C.prototype,`minlength`,void 0),a.t([e.m],C.prototype,`pattern`,void 0),a.t([e.m({converter:e.h})],C.prototype,`size`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`spellcheck`,void 0),a.t([e.m],C.prototype,`appearance`,void 0),a.t([e.m],C.prototype,`shape`,void 0),a.t([e.m],C.prototype,`autoComplete`,void 0),a.t([e.m()],C.prototype,`scale`,void 0),a.t([e.m({attribute:`inputmode`})],C.prototype,`inputMode`,void 0),a.t([e.A],C.prototype,`actionItemsSlottedContent`,void 0),a.t([e.A],C.prototype,`leadingActionItemsSlottedContent`,void 0);var w=e=>`vvd-text-field-control-${e}`,T=e.u(`text-field`,C,i=>{let a=c.a(i);return e.p`
7
+ <div
8
+ class="base ${e=>o.t([`error`,!!e.errorValidationMessage],[`disabled`,e.disabled],[`has-value`,!!e.value],[`readonly`,e.readOnly],[`placeholder`,!!e.placeholder],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`no-label`,!e.label],[`has-icon`,!!e.icon],[`success`,!!e.successText],[`action-items`,!!e.actionItemsSlottedContent?.length],[`leading-action-items`,!!e.leadingActionItemsSlottedContent?.length],[`no-leading`,!(e.leadingActionItemsSlottedContent?.length||e.icon)],[`size-${e.scale}`,!!e.scale])}"
9
+ >
8
10
  ${r.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
9
11
  <div
10
12
  class="label-wrapper"
@@ -16,7 +18,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
16
18
  ${t.t(`_contextualHelpSlottedContent`)}
17
19
  ></slot>
18
20
  </div>
19
- ${g.t(e.p`
21
+ ${d.t(e.p`
20
22
  ${r.t(e=>e.label,e.p`
21
23
  <label slot="_label" for="${e=>w(e._uniqueId)}">
22
24
  ${e=>e.label}
@@ -33,7 +35,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
33
35
  </div>
34
36
  <div class="wrapper">
35
37
  <slot class="control" name="_control"></slot>
36
- ${g.t(e.p`<input
38
+ ${d.t(e.p`<input
37
39
  slot="_control"
38
40
  id="${e=>w(e._uniqueId)}"
39
41
  class="_vvd-3-text-field-safari-workaround"
@@ -56,7 +58,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
56
58
  type="${e=>e.type}"
57
59
  inputmode="${e=>e.inputMode}"
58
60
  value="${e=>e.initialValue}"
59
- ${p.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
61
+ ${l.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
60
62
  ${n.t(`control`)}
61
63
  />`)}
62
64
  </div>
@@ -69,4 +71,4 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
69
71
  </div>
70
72
  ${e=>e._getFeedbackTemplate(i)}
71
73
  </div>
72
- `},[o.t,_.r,i.n,v.t],{styles:y.t,shadowOptions:{delegatesFocus:!0}}),D=e.d(E);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return D}});
74
+ `},[s.t,f.r,i.n,p.t],{styles:y.t,shadowOptions:{delegatesFocus:!0}}),E=e.d(T);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
@@ -4,19 +4,19 @@ import { t as u } from "./ref.js";
4
4
  import { t as d } from "./when.js";
5
5
  import { n as f } from "./definition.js";
6
6
  import { t as p } from "./decorate.js";
7
- import { t as m } from "./definition2.js";
8
- import { a as h, t as g } from "./affix.js";
9
- import { t as _ } from "./form-element.js";
10
- import { t as v } from "./with-success-text.js";
11
- import { t as y } from "./with-error-text.js";
12
- import { t as b } from "./with-contextual-help.js";
13
- import { t as x } from "./class-names.js";
14
- import { n as S, t as C } from "./delegates-aria.js";
15
- import { t as w } from "./char-count.js";
16
- import { n as T } from "./form-associated.js";
17
- import { n as E, t as D } from "./render-in-light-dom.js";
18
- import { n as O, r as k } from "./mixins.js";
19
- import { t as A } from "./definition11.js";
7
+ import { t as m } from "./class-names.js";
8
+ import { t as h } from "./definition3.js";
9
+ import { a as g, t as _ } from "./affix.js";
10
+ import { n as v, t as y } from "./delegates-aria.js";
11
+ import { n as b } from "./form-associated.js";
12
+ import { n as x, t as S } from "./render-in-light-dom.js";
13
+ import { n as C, r as w } from "./mixins.js";
14
+ import { t as T } from "./definition11.js";
15
+ import { t as E } from "./form-element.js";
16
+ import { t as D } from "./char-count.js";
17
+ import { t as O } from "./with-contextual-help.js";
18
+ import { t as k } from "./with-error-text.js";
19
+ import { t as A } from "./with-success-text.js";
20
20
  import { t as j } from "./text-field.js";
21
21
  //#region src/lib/text-field/text-field.ts
22
22
  var M = {
@@ -28,9 +28,9 @@ var M = {
28
28
  }, N = new c(["\n ._vvd-3-text-field-safari-workaround::placeholder {\n opacity: 1 !important;\n -webkit-text-fill-color: var(--_low-ink-color) !important;\n }\n"]), P = (e) => {
29
29
  let t = e.getRootNode();
30
30
  N.isAttachedTo(t) || N.addStylesTo(t);
31
- }, F = class extends b(O(w(y(v(_(g(C(T(o))))))))) {
31
+ }, F = class extends O(C(D(k(A(E(_(y(b(o))))))))) {
32
32
  constructor(...e) {
33
- super(...e), this.proxy = document.createElement("input"), this.type = M.text, this.#e = E();
33
+ super(...e), this.proxy = document.createElement("input"), this.type = M.text, this.#e = x();
34
34
  }
35
35
  readOnlyChanged() {
36
36
  /* v8 ignore if -- @preserve */
@@ -109,10 +109,12 @@ p([i({
109
109
  })], F.prototype, "readOnly", void 0), p([i({ mode: "boolean" })], F.prototype, "autofocus", void 0), p([i], F.prototype, "placeholder", void 0), p([i], F.prototype, "type", void 0), p([i], F.prototype, "list", void 0), p([i({ converter: r })], F.prototype, "maxlength", void 0), p([i({ converter: r })], F.prototype, "minlength", void 0), p([i], F.prototype, "pattern", void 0), p([i({ converter: r })], F.prototype, "size", void 0), p([i({ mode: "boolean" })], F.prototype, "spellcheck", void 0), p([i], F.prototype, "appearance", void 0), p([i], F.prototype, "shape", void 0), p([i], F.prototype, "autoComplete", void 0), p([i()], F.prototype, "scale", void 0), p([i({ attribute: "inputmode" })], F.prototype, "inputMode", void 0), p([e], F.prototype, "actionItemsSlottedContent", void 0), p([e], F.prototype, "leadingActionItemsSlottedContent", void 0);
110
110
  //#endregion
111
111
  //#region src/lib/text-field/text-field.template.ts
112
- var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e, disabled: t, value: n, readOnly: r, placeholder: i, appearance: a, shape: o, label: s, successText: c, actionItemsSlottedContent: l, leadingActionItemsSlottedContent: u, icon: d, scale: f }) => x(["error", !!e], ["disabled", t], ["has-value", !!n], ["readonly", r], ["placeholder", !!i], [`appearance-${a}`, !!a], [`shape-${o}`, !!o], ["no-label", !s], ["has-icon", !!d], ["success", !!c], ["action-items", !!l?.length], ["leading-action-items", !!u?.length], ["no-leading", !(u?.length || d)], [`size-${f}`, !!f]), R = s("text-field", F, (e) => {
113
- let t = h(e);
112
+ var I = (e) => `vvd-text-field-control-${e}`, L = s("text-field", F, (e) => {
113
+ let t = g(e);
114
114
  return a`
115
- <div class="base ${L}">
115
+ <div
116
+ class="base ${(e) => m(["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["has-icon", !!e.icon], ["success", !!e.successText], ["action-items", !!e.actionItemsSlottedContent?.length], ["leading-action-items", !!e.leadingActionItemsSlottedContent?.length], ["no-leading", !(e.leadingActionItemsSlottedContent?.length || e.icon)], [`size-${e.scale}`, !!e.scale])}"
117
+ >
116
118
  ${d((e) => e.charCount && e.maxlength, (t) => t._getCharCountTemplate(e))}
117
119
  <div
118
120
  class="label-wrapper"
@@ -124,7 +126,7 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
124
126
  ${l("_contextualHelpSlottedContent")}
125
127
  ></slot>
126
128
  </div>
127
- ${D(a`
129
+ ${S(a`
128
130
  ${d((e) => e.label, a`
129
131
  <label slot="_label" for="${(e) => I(e._uniqueId)}">
130
132
  ${(e) => e.label}
@@ -141,7 +143,7 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
141
143
  </div>
142
144
  <div class="wrapper">
143
145
  <slot class="control" name="_control"></slot>
144
- ${D(a`<input
146
+ ${S(a`<input
145
147
  slot="_control"
146
148
  id="${(e) => I(e._uniqueId)}"
147
149
  class="_vvd-3-text-field-safari-workaround"
@@ -168,7 +170,7 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
168
170
  type="${(e) => e.type}"
169
171
  inputmode="${(e) => e.inputMode}"
170
172
  value="${(e) => e.initialValue}"
171
- ${S({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
173
+ ${v({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
172
174
  ${u("control")}
173
175
  />`)}
174
176
  </div>
@@ -183,13 +185,13 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
183
185
  </div>
184
186
  `;
185
187
  }, [
186
- m,
187
- k,
188
+ h,
189
+ w,
188
190
  f,
189
- A
191
+ T
190
192
  ], {
191
193
  styles: j,
192
194
  shadowOptions: { delegatesFocus: !0 }
193
- }), z = n(R);
195
+ }), R = n(L);
194
196
  //#endregion
195
- export { R as n, F as r, z as t };
197
+ export { L as n, F as r, R as t };
@@ -1,20 +1,22 @@
1
- const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./decorate.cjs`),r=require(`./definition2.cjs`),i=require(`./affix.cjs`),a=require(`./class-names.cjs`),o=require(`./host-semantics.cjs`);var s=`: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){grid-column:1;justify-content:end}: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,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.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{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);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}: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]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}`,c=class extends o.t(i.n(e.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.tabIndex=`-1`,this.active=!1}_handleCloseClick(e){e.stopImmediatePropagation(),this.$emit(`close`)}_onKeyDown(e){return!this.removable||e.key!==`Delete`?!0:(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};n.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),n.t([t.m],c.prototype,`connotation`,void 0),n.t([t.m],c.prototype,`shape`,void 0),n.t([t.m],c.prototype,`label`,void 0),n.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),n.t([t.m({mode:`fromView`})],c.prototype,`tabIndex`,void 0),n.t([t.A],c.prototype,`active`,void 0);var l=({connotation:e,disabled:t,active:n,iconTrailing:r,shape:i,removable:o})=>a.t(`base`,[`connotation-${e}`,!!e&&n],[`shape-${i}`,!!i],[`disabled`,t],[`selected`,n],[`icon-trailing`,r],[`removable`,o]);function u(e){let n=i.a(e);return t.p`<button
1
+ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./definition3.cjs`),a=require(`./affix.cjs`),o=require(`./host-semantics.cjs`);var s=`: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){grid-column:1;justify-content:end}: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,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.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{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);vertical-align:middle;white-space:nowrap;user-select:none;min-block-size:40px;display:flex;position:relative}.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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}: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]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}`,c=class extends o.t(a.n(e.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.tabIndex=`-1`,this.active=!1}_handleCloseClick(e){e.stopImmediatePropagation(),this.$emit(`close`)}_onKeyDown(e){return!this.removable||e.key!==`Delete`?!0:(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};n.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),n.t([t.m],c.prototype,`connotation`,void 0),n.t([t.m],c.prototype,`shape`,void 0),n.t([t.m],c.prototype,`label`,void 0),n.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),n.t([t.m({mode:`fromView`})],c.prototype,`tabIndex`,void 0),n.t([t.A],c.prototype,`active`,void 0);function l(e){let n=a.a(e);return t.p`<button
2
2
  aria-label="${e=>e.locale.tab.dismissButtonLabel}"
3
3
  class="close"
4
4
  id="close-btn"
5
5
  @click="${(e,t)=>e._handleCloseClick(t.event)}"
6
6
  >
7
- ${()=>n(`close-line`,i.i.Span)}
8
- </button>`}var d=t.u(`tab`,c,e=>{let n=i.a(e);return t.p`
7
+ ${()=>n(`close-line`,a.i.Span)}
8
+ </button>`}var u=t.u(`tab`,c,e=>{let n=a.a(e);return t.p`
9
9
  <template
10
10
  slot="tab"
11
11
  ?active="${e=>e.active}"
12
12
  ${o.n({role:`tab`,ariaDisabled:e=>e.disabled,ariaSelected:e=>e.active})}
13
13
  @keydown="${(e,t)=>e._onKeyDown(t.event)}"
14
14
  >
15
- <div class="${l}">
16
- ${e=>n(e.icon,i.i.Slot)} ${e=>e.label}
17
- ${t=>t.removable?u(e):null}
15
+ <div
16
+ class="${e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation&&e.active],[`shape-${e.shape}`,!!e.shape],[`disabled`,e.disabled],[`selected`,e.active],[`icon-trailing`,e.iconTrailing],[`removable`,e.removable])}"
17
+ >
18
+ ${e=>n(e.icon,a.i.Slot)} ${e=>e.label}
19
+ ${t=>t.removable?l(e):null}
18
20
  </div>
19
21
  </template>
20
- `},[r.t],{styles:s}),f=t.d(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
22
+ `},[i.t],{styles:s}),d=t.d(u);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
@@ -1,12 +1,12 @@
1
1
  import { t as e } from "./localized.js";
2
2
  import { A as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
3
3
  import { t as s } from "./decorate.js";
4
- import { t as c } from "./definition2.js";
5
- import { a as l, i as u, n as d } from "./affix.js";
6
- import { t as f } from "./class-names.js";
4
+ import { t as c } from "./class-names.js";
5
+ import { t as l } from "./definition3.js";
6
+ import { a as u, i as d, n as f } from "./affix.js";
7
7
  import { n as p, t as m } from "./host-semantics.js";
8
8
  //#region src/lib/tab/tab.scss?inline
9
- var h = ":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){grid-column:1;justify-content:end}: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,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.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{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);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}: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]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}", g = class extends m(d(e(a))) {
9
+ var h = ":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){grid-column:1;justify-content:end}: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,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.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{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);vertical-align:middle;white-space:nowrap;user-select:none;min-block-size:40px;display:flex;position:relative}.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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}: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]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}", g = class extends m(f(e(a))) {
10
10
  constructor(...e) {
11
11
  super(...e), this.removable = !1, this.tabIndex = "-1", this.active = !1;
12
12
  }
@@ -20,22 +20,21 @@ var h = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-
20
20
  s([r({ mode: "boolean" })], g.prototype, "disabled", void 0), s([r], g.prototype, "connotation", void 0), s([r], g.prototype, "shape", void 0), s([r], g.prototype, "label", void 0), s([r({ mode: "boolean" })], g.prototype, "removable", void 0), s([r({ mode: "fromView" })], g.prototype, "tabIndex", void 0), s([t], g.prototype, "active", void 0);
21
21
  //#endregion
22
22
  //#region src/lib/tab/tab.template.ts
23
- var _ = ({ connotation: e, disabled: t, active: n, iconTrailing: r, shape: i, removable: a }) => f("base", [`connotation-${e}`, !!e && n], [`shape-${i}`, !!i], ["disabled", t], ["selected", n], ["icon-trailing", r], ["removable", a]);
24
- function v(e) {
25
- let t = l(e);
23
+ function _(e) {
24
+ let t = u(e);
26
25
  return i`<button
27
26
  aria-label="${(e) => e.locale.tab.dismissButtonLabel}"
28
27
  class="close"
29
28
  id="close-btn"
30
29
  @click="${(e, t) => e._handleCloseClick(t.event)}"
31
30
  >
32
- ${() => t("close-line", u.Span)}
31
+ ${() => t("close-line", d.Span)}
33
32
  </button>`;
34
33
  }
35
34
  //#endregion
36
35
  //#region src/lib/tab/definition.ts
37
- var y = o("tab", g, (e) => {
38
- let t = l(e);
36
+ var v = o("tab", g, (e) => {
37
+ let t = u(e);
39
38
  return i`
40
39
  <template
41
40
  slot="tab"
@@ -47,12 +46,14 @@ var y = o("tab", g, (e) => {
47
46
  })}
48
47
  @keydown="${(e, t) => e._onKeyDown(t.event)}"
49
48
  >
50
- <div class="${_}">
51
- ${(e) => t(e.icon, u.Slot)} ${(e) => e.label}
52
- ${(t) => t.removable ? v(e) : null}
49
+ <div
50
+ class="${(e) => c("base", [`connotation-${e.connotation}`, !!e.connotation && e.active], [`shape-${e.shape}`, !!e.shape], ["disabled", e.disabled], ["selected", e.active], ["icon-trailing", e.iconTrailing], ["removable", e.removable])}"
51
+ >
52
+ ${(e) => t(e.icon, d.Slot)} ${(e) => e.label}
53
+ ${(t) => t.removable ? _(e) : null}
53
54
  </div>
54
55
  </template>
55
56
  `;
56
- }, [c], { styles: h }), b = n(y);
57
+ }, [l], { styles: h }), y = n(v);
57
58
  //#endregion
58
- export { y as n, g as r, b as t };
59
+ export { v as n, g as r, y as t };
@@ -1,18 +1,18 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./definition2.cjs`),a=require(`./form-element.cjs`),o=require(`./with-success-text.cjs`),s=require(`./with-error-text.cjs`),c=require(`./class-names.cjs`),l=require(`./delegates-aria.cjs`),u=require(`./form-associated.cjs`),d=require(`./mixins.cjs`);var f=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,p=class extends l.t(d.t(s.t(o.t(a.t(u.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t?`true`:`false`,e!==void 0&&this.$emit(`input`)}};r.t([e.m({attribute:`tabindex`})],p.prototype,`tabindex`,void 0),r.t([e.m],p.prototype,`connotation`,void 0),r.t([e.m({attribute:`readonly`,mode:`boolean`})],p.prototype,`readOnly`,void 0),r.t([e.A],p.prototype,`defaultSlottedNodes`,void 0),r.t([e.m({attribute:`indeterminate`,mode:`boolean`})],p.prototype,`indeterminate`,void 0),r.t([e.A],p.prototype,`slottedContent`,void 0);var m=({connotation:e,readOnly:t,checked:n,disabled:r,indeterminate:i,errorValidationMessage:a,successText:o,label:s,slottedContent:l})=>c.t(`base`,[`connotation-${e}`,!!e],[`readonly`,t],[`checked`,n||i],[`disabled`,r],[`error connotation-alert`,!!a],[`success connotation-success`,!!o],[`hide-label`,!s&&!l?.length]),h=e.u(`checkbox`,p,r=>{let a=r.tagFor(i.r);return e.p`<template>
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition3.cjs`),o=require(`./delegates-aria.cjs`),s=require(`./form-associated.cjs`),c=require(`./mixins.cjs`),l=require(`./form-element.cjs`),u=require(`./with-error-text.cjs`),d=require(`./with-success-text.cjs`);var f=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,p=class extends o.t(c.t(u.t(d.t(l.t(s.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t?`true`:`false`,e!==void 0&&this.$emit(`input`)}};r.t([e.m({attribute:`tabindex`})],p.prototype,`tabindex`,void 0),r.t([e.m],p.prototype,`connotation`,void 0),r.t([e.m({attribute:`readonly`,mode:`boolean`})],p.prototype,`readOnly`,void 0),r.t([e.A],p.prototype,`defaultSlottedNodes`,void 0),r.t([e.m({attribute:`indeterminate`,mode:`boolean`})],p.prototype,`indeterminate`,void 0),r.t([e.A],p.prototype,`slottedContent`,void 0);var m=e.u(`checkbox`,p,r=>{let s=r.tagFor(a.r);return e.p`<template>
2
2
  <div
3
- class="${m}"
4
- ${l.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly,ariaDescribedBy:e=>e._feedbackDescribedBy})}
3
+ class="${e=>i.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`readonly`,e.readOnly],[`checked`,e.checked||e.indeterminate],[`disabled`,e.disabled],[`error connotation-alert`,!!e.errorValidationMessage],[`success connotation-success`,!!e.successText],[`hide-label`,!e.label&&!e.slottedContent?.length])}"
4
+ ${o.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly,ariaDescribedBy:e=>e._feedbackDescribedBy})}
5
5
  tabindex="${e=>e.tabindex===null?e.disabled?null:0:e.tabindex}"
6
6
  @keypress="${(e,t)=>e.keypressHandler(t.event)}"
7
7
  @click="${(e,t)=>e.clickHandler(t.event)}"
8
8
  >
9
9
  <div class="control">
10
- ${n.t(e=>e.checked&&!e.indeterminate,e.p`<${a} name="check-solid" class="icon"></${a}>`)}
11
- ${n.t(e=>e.indeterminate,e.p`<${a} name="minus-solid" class="icon"></${a}>`)}
10
+ ${n.t(e=>e.checked&&!e.indeterminate,e.p`<${s} name="check-solid" class="icon"></${s}>`)}
11
+ ${n.t(e=>e.indeterminate,e.p`<${s} name="minus-solid" class="icon"></${s}>`)}
12
12
  </div>
13
13
  ${e.p`<label
14
14
  >${e=>e.label}<slot ${t.t(`slottedContent`)}></slot
15
15
  ></label>`}
16
16
  </div>
17
17
  ${e=>e._getFeedbackTemplate(r)}
18
- </template>`},[i.t,d.r],{styles:f,shadowOptions:{delegatesFocus:!0}}),g=e.d(h);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});
18
+ </template>`},[a.t,c.r],{styles:f,shadowOptions:{delegatesFocus:!0}}),h=e.d(m);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return m}});
@@ -2,16 +2,16 @@ import { A as e, d as t, m as n, p as r, t as i, u as a } from "./vivid-element.
2
2
  import { t as o } from "./slotted.js";
3
3
  import { t as s } from "./when.js";
4
4
  import { t as c } from "./decorate.js";
5
- import { r as l, t as u } from "./definition2.js";
6
- import { t as d } from "./form-element.js";
7
- import { t as f } from "./with-success-text.js";
8
- import { t as p } from "./with-error-text.js";
9
- import { t as m } from "./class-names.js";
10
- import { n as h, t as g } from "./delegates-aria.js";
11
- import { t as _ } from "./form-associated.js";
12
- import { r as v, t as y } from "./mixins.js";
5
+ import { t as l } from "./class-names.js";
6
+ import { r as u, t as d } from "./definition3.js";
7
+ import { n as f, t as p } from "./delegates-aria.js";
8
+ import { t as m } from "./form-associated.js";
9
+ import { r as h, t as g } from "./mixins.js";
10
+ import { t as _ } from "./form-element.js";
11
+ import { t as v } from "./with-error-text.js";
12
+ import { t as y } from "./with-success-text.js";
13
13
  //#region src/lib/checkbox/checkbox.scss?inline
14
- var b = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}", x = class extends g(y(p(f(d(_(i)))))) {
14
+ var b = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}", x = class extends p(g(v(y(_(m(i)))))) {
15
15
  readOnlyChanged() {
16
16
  /* v8 ignore if -- @preserve */
17
17
  this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
@@ -42,13 +42,13 @@ c([n({ attribute: "tabindex" })], x.prototype, "tabindex", void 0), c([n], x.pro
42
42
  mode: "boolean"
43
43
  })], x.prototype, "indeterminate", void 0), c([e], x.prototype, "slottedContent", void 0);
44
44
  //#endregion
45
- //#region src/lib/checkbox/checkbox.template.ts
46
- var S = ({ connotation: e, readOnly: t, checked: n, disabled: r, indeterminate: i, errorValidationMessage: a, successText: o, label: s, slottedContent: c }) => m("base", [`connotation-${e}`, !!e], ["readonly", t], ["checked", n || i], ["disabled", r], ["error connotation-alert", !!a], ["success connotation-success", !!o], ["hide-label", !s && !c?.length]), C = a("checkbox", x, (e) => {
47
- let t = e.tagFor(l);
45
+ //#region src/lib/checkbox/definition.ts
46
+ var S = a("checkbox", x, (e) => {
47
+ let t = e.tagFor(u);
48
48
  return r`<template>
49
49
  <div
50
- class="${S}"
51
- ${h({
50
+ class="${(e) => l("base", [`connotation-${e.connotation}`, !!e.connotation], ["readonly", e.readOnly], ["checked", e.checked || e.indeterminate], ["disabled", e.disabled], ["error connotation-alert", !!e.errorValidationMessage], ["success connotation-success", !!e.successText], ["hide-label", !e.label && !e.slottedContent?.length])}"
51
+ ${f({
52
52
  role: "checkbox",
53
53
  ariaChecked: (e) => e.indeterminate ? "mixed" : e.checked,
54
54
  ariaRequired: (e) => e.required,
@@ -70,9 +70,9 @@ var S = ({ connotation: e, readOnly: t, checked: n, disabled: r, indeterminate:
70
70
  </div>
71
71
  ${(t) => t._getFeedbackTemplate(e)}
72
72
  </template>`;
73
- }, [u, v], {
73
+ }, [d, h], {
74
74
  styles: b,
75
75
  shadowOptions: { delegatesFocus: !0 }
76
- }), w = t(C);
76
+ }), C = t(S);
77
77
  //#endregion
78
- export { w as n, x as r, C as t };
78
+ export { C as n, x as r, S as t };
@@ -1,4 +1,4 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./form-element.cjs`),i=require(`./with-error-text.cjs`),a=require(`./class-names.cjs`),o=require(`./form-associated.cjs`);var s=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{cursor:pointer;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}`,c=class extends i.t(r.t(o.t(e.t))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){this.$fastController.isConnected&&!this.dirtyChecked&&(this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}constructor(){super(),this.initialValue=`on`,this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case` `:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement(`input`),this.#n=()=>{let e=this.#e,t=this.#t;e&&e.length>1&&e.some(e=>e.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage=``,t&&(t.errorValidationMessage=``))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){let e=this.#e,t=this.#t;e&&e.length>1&&e.forEach(e=>{e.elementInternals.setValidity({valueMissing:!1}),e.errorValidationMessage=``,t&&(t.errorValidationMessage=``)})}},this.proxy.setAttribute(`type`,`radio`),this.proxy.setAttribute(`name`,this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}nameChanged(t,n){super.nameChanged(t,n),n===null?this.proxy.removeAttribute(`name`):this.proxy.setAttribute(`name`,this.name),e.M.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),e.M.enqueue(this.validate),this.parentElement.getAttribute(`data-vvd-component`)!==`radio-group`&&this.getAttribute(`tabindex`)===null&&(this.disabled||this.setAttribute(`tabindex`,`0`)),this.defaultChecked&&(this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}isInsideRadioGroup(){return this.closest(`[data-vvd-component="radio-group"]`)!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){let e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#t(){return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`)}#n;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||``,this.validity.valueMissing?this.#n():this.#r())}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({attribute:`readonly`,mode:`boolean`})],c.prototype,`readOnly`,void 0),n.t([e.A],c.prototype,`defaultSlottedNodes`,void 0);var l=e.p`<template
1
+ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./form-associated.cjs`),a=require(`./form-element.cjs`),o=require(`./with-error-text.cjs`);var s=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{cursor:pointer;user-select:none;align-items:center;gap:8px;display:inline-flex}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}`,c=class extends o.t(a.t(i.t(e.t))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){this.$fastController.isConnected&&!this.dirtyChecked&&(this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}constructor(){super(),this.initialValue=`on`,this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case` `:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement(`input`),this.#n=()=>{let e=this.#e,t=this.#t;e&&e.length>1&&e.some(e=>e.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage=``,t&&(t.errorValidationMessage=``))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){let e=this.#e,t=this.#t;e&&e.length>1&&e.forEach(e=>{e.elementInternals.setValidity({valueMissing:!1}),e.errorValidationMessage=``,t&&(t.errorValidationMessage=``)})}},this.proxy.setAttribute(`type`,`radio`),this.proxy.setAttribute(`name`,this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}nameChanged(t,n){super.nameChanged(t,n),n===null?this.proxy.removeAttribute(`name`):this.proxy.setAttribute(`name`,this.name),e.M.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),e.M.enqueue(this.validate),this.parentElement.getAttribute(`data-vvd-component`)!==`radio-group`&&this.getAttribute(`tabindex`)===null&&(this.disabled||this.setAttribute(`tabindex`,`0`)),this.defaultChecked&&(this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}isInsideRadioGroup(){return this.closest(`[data-vvd-component="radio-group"]`)!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){let e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#t(){return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`)}#n;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||``,this.validity.valueMissing?this.#n():this.#r())}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({attribute:`readonly`,mode:`boolean`})],c.prototype,`readOnly`,void 0),n.t([e.A],c.prototype,`defaultSlottedNodes`,void 0);var l=e.p`<template
2
2
  aria-checked="${e=>e?.checked}"
3
3
  aria-disabled="${e=>e?.disabled}"
4
4
  aria-required="${e=>e?.required}"
@@ -6,7 +6,9 @@ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./deco
6
6
  @click="${(e,t)=>e?.clickHandler(t.event)}"
7
7
  role="radio"
8
8
  >
9
- <div class="${({connotation:e,checked:t,readOnly:n,disabled:r})=>a.t(`base`,[`connotation-${e}`,!!e],[`checked`,t],[`readonly`,n],[`disabled`,r])}">
9
+ <div
10
+ class="${e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`checked`,e.checked],[`readonly`,e.readOnly],[`disabled`,e.disabled])}"
11
+ >
10
12
  <div class="control"></div>
11
13
  ${t.t(e=>e?.label,e.p`<label class="label">${e=>e?.label}</label>`)}
12
14
  </div>
@@ -1,12 +1,12 @@
1
1
  import { A as e, M as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
2
2
  import { t as s } from "./when.js";
3
3
  import { t as c } from "./decorate.js";
4
- import { t as l } from "./form-element.js";
5
- import { t as u } from "./with-error-text.js";
6
- import { t as d } from "./class-names.js";
7
- import { t as f } from "./form-associated.js";
4
+ import { t as l } from "./class-names.js";
5
+ import { t as u } from "./form-associated.js";
6
+ import { t as d } from "./form-element.js";
7
+ import { t as f } from "./with-error-text.js";
8
8
  //#region src/lib/radio/radio.scss?inline
9
- var p = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{cursor:pointer;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}", m = class extends u(l(f(a))) {
9
+ var p = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.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)}.base{cursor:pointer;user-select:none;align-items:center;gap:8px;display:inline-flex}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));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));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}", m = class extends f(d(u(a))) {
10
10
  readOnlyChanged() {
11
11
  /* v8 ignore if -- @preserve */
12
12
  this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
@@ -73,7 +73,9 @@ var h = o("radio", m, i`<template
73
73
  @click="${(e, t) => e?.clickHandler(t.event)}"
74
74
  role="radio"
75
75
  >
76
- <div class="${({ connotation: e, checked: t, readOnly: n, disabled: r }) => d("base", [`connotation-${e}`, !!e], ["checked", t], ["readonly", n], ["disabled", r])}">
76
+ <div
77
+ class="${(e) => l("base", [`connotation-${e.connotation}`, !!e.connotation], ["checked", e.checked], ["readonly", e.readOnly], ["disabled", e.disabled])}"
78
+ >
77
79
  <div class="control"></div>
78
80
  ${s((e) => e?.label, i`<label class="label">${(e) => e?.label}</label>`)}
79
81
  </div>