@vonage/vivid 5.23.1 → 5.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (522) hide show
  1. package/README.md +1 -1
  2. package/accordion/index.cjs +1 -1
  3. package/accordion/index.js +1 -1
  4. package/accordion-item/index.cjs +1 -1
  5. package/accordion-item/index.js +1 -1
  6. package/audio-player/index.cjs +2 -2
  7. package/audio-player/index.js +3 -3
  8. package/avatar/index.cjs +10 -10
  9. package/avatar/index.js +4 -3
  10. package/badge/index.cjs +1 -1
  11. package/badge/index.js +1 -1
  12. package/breadcrumb-item/index.cjs +9 -5
  13. package/breadcrumb-item/index.js +11 -6
  14. package/bundled/affix.cjs +1 -1
  15. package/bundled/affix.js +1 -1
  16. package/bundled/definition10.cjs +2 -1
  17. package/bundled/definition10.js +3 -2
  18. package/bundled/definition11.cjs +4 -4
  19. package/bundled/definition11.js +4 -3
  20. package/bundled/definition12.cjs +1 -1
  21. package/bundled/definition12.js +1 -0
  22. package/bundled/definition15.cjs +8 -7
  23. package/bundled/definition15.js +27 -24
  24. package/bundled/definition17.cjs +7 -7
  25. package/bundled/definition17.js +22 -109
  26. package/bundled/definition18.cjs +12 -83
  27. package/bundled/definition18.js +20 -426
  28. package/bundled/definition19.cjs +87 -7
  29. package/bundled/definition19.js +433 -16
  30. package/bundled/definition20.cjs +7 -37
  31. package/bundled/definition20.js +17 -172
  32. package/bundled/definition21.cjs +35 -27
  33. package/bundled/definition21.js +155 -154
  34. package/bundled/definition22.cjs +29 -6
  35. package/bundled/definition22.js +172 -20
  36. package/bundled/definition23.cjs +6 -12
  37. package/bundled/definition23.js +17 -32
  38. package/bundled/definition24.cjs +12 -39
  39. package/bundled/definition24.js +33 -67
  40. package/bundled/definition25.cjs +44 -0
  41. package/bundled/definition25.js +81 -0
  42. package/bundled/definition3.cjs +5 -5
  43. package/bundled/definition3.js +10 -40
  44. package/bundled/definition4.cjs +6 -6
  45. package/bundled/definition4.js +4 -3
  46. package/bundled/definition6.cjs +11 -11
  47. package/bundled/definition6.js +4 -3
  48. package/bundled/definition9.cjs +12 -6
  49. package/bundled/definition9.js +66 -43
  50. package/bundled/extractOptions.cjs +1 -0
  51. package/bundled/extractOptions.js +11 -0
  52. package/bundled/icon.cjs +1 -0
  53. package/bundled/icon.js +34 -0
  54. package/bundled/listbox.cjs +1 -1
  55. package/bundled/listbox.js +28 -12
  56. package/bundled/mixins.cjs +8 -8
  57. package/bundled/mixins.js +4 -3
  58. package/bundled/optgroup.cjs +1 -0
  59. package/bundled/optgroup.js +27 -0
  60. package/bundled/option.cjs +1 -0
  61. package/bundled/option.js +93 -0
  62. package/bundled/render-in-light-dom.cjs +1 -1
  63. package/bundled/render-in-light-dom.js +16 -19
  64. package/bundled/vivid-element.cjs +1 -1
  65. package/bundled/vivid-element.js +9 -1
  66. package/card/index.cjs +22 -22
  67. package/card/index.js +4 -3
  68. package/color-picker/index.cjs +18 -18
  69. package/color-picker/index.js +4 -3
  70. package/combobox/definition.cjs +1 -1
  71. package/combobox/definition.js +1 -1
  72. package/combobox/index.cjs +7 -7
  73. package/combobox/index.js +31 -21
  74. package/country/definition.cjs +1 -1
  75. package/country/definition.js +1 -1
  76. package/country/index.cjs +1 -1
  77. package/country/index.js +1 -1
  78. package/country-group/definition.cjs +1 -1
  79. package/country-group/definition.js +1 -1
  80. package/country-group/index.cjs +1 -1
  81. package/country-group/index.js +2 -2
  82. package/custom-elements.json +8438 -7866
  83. package/data-grid/definition.cjs +1 -1
  84. package/data-grid/definition.js +1 -1
  85. package/data-grid/index.cjs +26 -26
  86. package/data-grid/index.js +9 -8
  87. package/date-picker/definition.cjs +1 -1
  88. package/date-picker/definition.js +1 -1
  89. package/date-picker/index.cjs +1 -1
  90. package/date-picker/index.js +1 -1
  91. package/date-range-picker/definition.cjs +1 -1
  92. package/date-range-picker/definition.js +1 -1
  93. package/date-range-picker/index.cjs +1 -1
  94. package/date-range-picker/index.js +1 -1
  95. package/date-time-picker/definition.cjs +1 -1
  96. package/date-time-picker/definition.js +1 -1
  97. package/date-time-picker/index.cjs +1 -1
  98. package/date-time-picker/index.js +1 -1
  99. package/dial-pad/definition.cjs +1 -1
  100. package/dial-pad/definition.js +1 -1
  101. package/dial-pad/index.cjs +7 -7
  102. package/dial-pad/index.js +124 -54
  103. package/dialog/definition.cjs +1 -1
  104. package/dialog/definition.js +1 -1
  105. package/dialog/index.cjs +14 -14
  106. package/dialog/index.js +4 -3
  107. package/divider/definition.cjs +1 -1
  108. package/divider/definition.js +1 -1
  109. package/divider/index.cjs +1 -1
  110. package/divider/index.js +1 -1
  111. package/empty-state/definition.cjs +1 -1
  112. package/empty-state/definition.js +1 -1
  113. package/empty-state/index.cjs +3 -3
  114. package/empty-state/index.js +4 -3
  115. package/fab/definition.cjs +1 -1
  116. package/fab/definition.js +1 -1
  117. package/file-picker/definition.cjs +1 -1
  118. package/file-picker/definition.js +1 -1
  119. package/file-picker/index.cjs +7 -7
  120. package/file-picker/index.js +4 -3
  121. package/flag/definition.cjs +1 -1
  122. package/flag/definition.js +1 -1
  123. package/header/definition.cjs +1 -1
  124. package/header/definition.js +1 -1
  125. package/header/index.cjs +3 -3
  126. package/header/index.js +3 -3
  127. package/icon/definition.cjs +2 -1
  128. package/icon/definition.js +2 -1
  129. package/index.cjs +209 -198
  130. package/index.js +59 -54
  131. package/kbd-key/definition.cjs +1 -1
  132. package/kbd-key/definition.js +1 -1
  133. package/kbd-shortcut/definition.cjs +1 -1
  134. package/kbd-shortcut/definition.js +1 -1
  135. package/layout/definition.cjs +1 -1
  136. package/layout/definition.js +1 -1
  137. package/lib/accordion-item/accordion-item.d.ts +3 -1
  138. package/lib/action-group/action-group.d.ts +1 -1
  139. package/lib/alert/alert.d.ts +2 -2
  140. package/lib/audio-player/audio-player.d.ts +1 -1
  141. package/lib/avatar/avatar.d.ts +1 -1
  142. package/lib/badge/badge.d.ts +1 -1
  143. package/lib/banner/banner.d.ts +3 -3
  144. package/lib/breadcrumb/breadcrumb.d.ts +1 -1
  145. package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
  146. package/lib/button/button.d.ts +3 -3
  147. package/lib/calendar-event/calendar-event.d.ts +1 -1
  148. package/lib/card/card.d.ts +1 -1
  149. package/lib/checkbox/checkbox.d.ts +6 -6
  150. package/lib/color-picker/color-picker.d.ts +7 -7
  151. package/lib/combobox/combobox.d.ts +8 -8
  152. package/lib/components.d.ts +2 -0
  153. package/lib/country-group/country-group.d.ts +2 -2
  154. package/lib/data-grid/data-grid-cell.d.ts +4 -3
  155. package/lib/data-grid/data-grid-row.d.ts +3 -2
  156. package/lib/data-grid/data-grid.options.d.ts +5 -0
  157. package/lib/date-picker/date-picker.d.ts +8 -8
  158. package/lib/date-range-picker/date-range-picker.d.ts +4 -4
  159. package/lib/date-time-picker/date-time-picker.d.ts +8 -8
  160. package/lib/dial-pad/dial-pad.d.ts +2 -2
  161. package/lib/dialog/dialog.d.ts +2 -2
  162. package/lib/divider/divider.d.ts +1 -1
  163. package/lib/fab/fab.d.ts +1 -1
  164. package/lib/file-picker/file-picker.d.ts +7 -7
  165. package/lib/header/header.d.ts +1 -1
  166. package/lib/listbox/definition.d.ts +3 -0
  167. package/lib/listbox/index.d.ts +1 -0
  168. package/lib/listbox/listbox.d.ts +1302 -0
  169. package/lib/listbox/listbox.template.d.ts +3 -0
  170. package/lib/listbox/variations.browser-spec.d.ts +1 -0
  171. package/lib/menu/menu.d.ts +2 -3
  172. package/lib/menu-item/menu-item.d.ts +3 -3
  173. package/lib/nav/nav.d.ts +1 -1
  174. package/lib/nav-disclosure/nav-disclosure.d.ts +2 -2
  175. package/lib/nav-item/nav-item.d.ts +2 -2
  176. package/lib/note/note.d.ts +1 -1
  177. package/lib/number-field/number-field.d.ts +9 -10
  178. package/lib/optgroup/definition.d.ts +3 -0
  179. package/lib/optgroup/index.d.ts +1 -0
  180. package/lib/optgroup/optgroup.d.ts +430 -0
  181. package/lib/optgroup/optgroup.template.d.ts +2 -0
  182. package/lib/optgroup/variations.browser-spec.d.ts +1 -0
  183. package/lib/option/option.d.ts +2 -2
  184. package/lib/pagination/pagination.d.ts +1 -1
  185. package/lib/popover/popover.d.ts +2 -2
  186. package/lib/progress/progress.d.ts +1 -1
  187. package/lib/progress-ring/progress-ring.d.ts +1 -1
  188. package/lib/radio/radio.d.ts +3 -3
  189. package/lib/radio-group/radio-group.d.ts +1 -1
  190. package/lib/range-slider/range-slider.d.ts +3 -3
  191. package/lib/rich-text-editor/rich-text-editor.d.ts +1 -1
  192. package/lib/rich-text-editor/rte/features/base.d.ts +1 -0
  193. package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -2
  194. package/lib/searchable-select/option-tag.d.ts +1 -1
  195. package/lib/searchable-select/searchable-select.d.ts +47 -47
  196. package/lib/select/select.d.ts +9 -9
  197. package/lib/selectable-box/selectable-box.d.ts +1 -1
  198. package/lib/simple-color-picker/simple-color-picker.d.ts +2 -2
  199. package/lib/slider/slider.d.ts +3 -3
  200. package/lib/split-button/split-button.d.ts +3 -3
  201. package/lib/status/status.d.ts +1 -1
  202. package/lib/switch/switch.d.ts +2 -2
  203. package/lib/tab/tab.d.ts +3 -3
  204. package/lib/tab-panel/tab-panel.d.ts +1 -1
  205. package/lib/table/table-cell.d.ts +1 -1
  206. package/lib/table/table-header-cell.d.ts +1 -1
  207. package/lib/table/table-row.d.ts +1 -1
  208. package/lib/table/table-sorting-button.d.ts +1 -1
  209. package/lib/tag/tag.d.ts +3 -3
  210. package/lib/tag-group/tag-group.d.ts +1 -1
  211. package/lib/tag-name-map.d.ts +3 -1
  212. package/lib/text-area/text-area.d.ts +8 -8
  213. package/lib/text-field/text-field.d.ts +10 -9
  214. package/lib/time-picker/time-picker.d.ts +4 -4
  215. package/lib/toggletip/toggletip.d.ts +3 -2
  216. package/lib/tooltip/tooltip.d.ts +3 -2
  217. package/lib/tree-item/tree-item.d.ts +2 -2
  218. package/lib/tree-view/tree-view.d.ts +1 -1
  219. package/lib/video-player/video-player.d.ts +1 -1
  220. package/listbox/definition.cjs +5 -0
  221. package/listbox/definition.js +2 -0
  222. package/listbox/index.cjs +11 -0
  223. package/listbox/index.js +540 -0
  224. package/menu/index.cjs +1 -1
  225. package/menu/index.js +1 -1
  226. package/menu-item/index.cjs +1 -1
  227. package/menu-item/index.js +1 -1
  228. package/nav/definition.cjs +1 -1
  229. package/nav/definition.js +1 -1
  230. package/nav-disclosure/definition.cjs +1 -1
  231. package/nav-disclosure/definition.js +1 -1
  232. package/nav-disclosure/index.cjs +4 -4
  233. package/nav-disclosure/index.js +4 -3
  234. package/nav-item/definition.cjs +1 -1
  235. package/nav-item/definition.js +1 -1
  236. package/note/definition.cjs +1 -1
  237. package/note/definition.js +1 -1
  238. package/number-field/definition.cjs +1 -1
  239. package/number-field/definition.js +1 -1
  240. package/number-field/index.cjs +1 -1
  241. package/number-field/index.js +1 -1
  242. package/optgroup/definition.cjs +6 -0
  243. package/optgroup/definition.js +3 -0
  244. package/optgroup/index.cjs +1 -0
  245. package/optgroup/index.js +4 -0
  246. package/option/definition.cjs +2 -1
  247. package/option/definition.js +2 -1
  248. package/package.json +9 -8
  249. package/pagination/definition.cjs +1 -1
  250. package/pagination/definition.js +1 -1
  251. package/platform-switch/definition.cjs +1 -1
  252. package/platform-switch/definition.js +1 -1
  253. package/popover/definition.cjs +1 -1
  254. package/popover/definition.js +1 -1
  255. package/popover/index.cjs +5 -5
  256. package/popover/index.js +4 -3
  257. package/progress/definition.cjs +1 -1
  258. package/progress/definition.js +1 -1
  259. package/radio/definition.cjs +1 -1
  260. package/radio/definition.js +1 -1
  261. package/radio-group/definition.cjs +1 -1
  262. package/radio-group/definition.js +1 -1
  263. package/range-slider/definition.cjs +1 -1
  264. package/range-slider/definition.js +1 -1
  265. package/rich-text-editor/definition.cjs +1 -1
  266. package/rich-text-editor/definition.js +1 -1
  267. package/rich-text-editor/index.cjs +13 -13
  268. package/rich-text-editor/index.js +26 -23
  269. package/rich-text-view/definition.cjs +1 -1
  270. package/rich-text-view/definition.js +1 -1
  271. package/searchable-select/definition.cjs +1 -1
  272. package/searchable-select/definition.js +1 -1
  273. package/searchable-select/index.cjs +23 -23
  274. package/searchable-select/index.js +67 -49
  275. package/select/definition.cjs +1 -1
  276. package/select/definition.js +1 -1
  277. package/select/index.cjs +1 -1
  278. package/select/index.js +1 -1
  279. package/selectable-box/definition.cjs +1 -1
  280. package/selectable-box/definition.js +1 -1
  281. package/shared/aria/delegates-aria.d.ts +1 -1
  282. package/shared/aria/host-semantics.d.ts +1 -1
  283. package/shared/color-picker/base-color-picker.d.ts +1 -1
  284. package/shared/feedback/feedback-message.d.ts +1 -1
  285. package/shared/feedback/mixins.d.ts +2 -2
  286. package/shared/foundation/button/button.d.ts +2 -2
  287. package/shared/foundation/form-associated/form-associated.d.ts +2 -2
  288. package/shared/foundation/listbox/extractOptions.d.ts +2 -0
  289. package/shared/foundation/listbox/listbox.d.ts +2 -0
  290. package/shared/listbox/commands.d.ts +17 -0
  291. package/shared/listbox/move.d.ts +6 -0
  292. package/shared/listbox/options.d.ts +12 -0
  293. package/shared/listbox/selection.d.ts +28 -0
  294. package/shared/listbox/state.d.ts +26 -0
  295. package/shared/listbox/typeahead.d.ts +8 -0
  296. package/shared/listbox/with-options-filter.d.ts +440 -0
  297. package/shared/listbox/with-options.d.ts +862 -0
  298. package/shared/patterns/affix.d.ts +2 -2
  299. package/shared/patterns/anchored.d.ts +2 -2
  300. package/shared/patterns/char-count/char-count.d.ts +1 -1
  301. package/shared/patterns/form-elements/form-element.d.ts +1 -1
  302. package/shared/patterns/form-elements/with-contextual-help.d.ts +1 -1
  303. package/shared/patterns/form-elements/with-error-text.d.ts +1 -1
  304. package/shared/patterns/form-elements/with-success-text.d.ts +1 -1
  305. package/shared/patterns/kbd-shortcut.d.ts +1 -1
  306. package/shared/patterns/linkable.d.ts +1 -1
  307. package/shared/patterns/localized.d.ts +2 -2
  308. package/shared/patterns/trapped-focus.d.ts +1 -1
  309. package/shared/picker-field/mixins/calendar-picker.d.ts +2 -2
  310. package/shared/picker-field/mixins/calendar-picker.template.d.ts +2 -2
  311. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +1 -1
  312. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +2 -2
  313. package/shared/picker-field/mixins/single-date-picker.d.ts +2 -2
  314. package/shared/picker-field/mixins/single-value-picker.d.ts +2 -2
  315. package/shared/picker-field/mixins/time-selection-picker.d.ts +2 -2
  316. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +4 -4
  317. package/shared/picker-field/picker-field.d.ts +7 -7
  318. package/side-drawer/definition.cjs +1 -1
  319. package/side-drawer/definition.js +1 -1
  320. package/simple-color-picker/definition.cjs +1 -1
  321. package/simple-color-picker/definition.js +1 -1
  322. package/simple-color-picker/index.cjs +6 -6
  323. package/simple-color-picker/index.js +4 -3
  324. package/split-button/definition.cjs +1 -1
  325. package/split-button/definition.js +1 -1
  326. package/split-button/index.cjs +1 -0
  327. package/split-button/index.js +1 -0
  328. package/status/definition.cjs +1 -1
  329. package/status/definition.js +1 -1
  330. package/switch/definition.cjs +1 -1
  331. package/switch/definition.js +1 -1
  332. package/switch/index.cjs +6 -5
  333. package/switch/index.js +16 -14
  334. package/tab/definition.cjs +1 -1
  335. package/tab/definition.js +1 -1
  336. package/tab-panel/definition.cjs +1 -1
  337. package/tab-panel/definition.js +1 -1
  338. package/table/definition.cjs +1 -1
  339. package/table/definition.js +1 -1
  340. package/table/index.cjs +13 -13
  341. package/table/index.js +4 -3
  342. package/tabs/definition.cjs +1 -1
  343. package/tabs/definition.js +1 -1
  344. package/tag/definition.cjs +1 -1
  345. package/tag/definition.js +1 -1
  346. package/tag/index.cjs +11 -11
  347. package/tag/index.js +4 -3
  348. package/tag-group/definition.cjs +1 -1
  349. package/tag-group/definition.js +1 -1
  350. package/text-area/definition.cjs +1 -1
  351. package/text-area/definition.js +1 -1
  352. package/time-picker/definition.cjs +1 -1
  353. package/time-picker/definition.js +1 -1
  354. package/tree-item/definition.cjs +1 -1
  355. package/tree-item/definition.js +1 -1
  356. package/tree-view/definition.cjs +1 -1
  357. package/tree-view/definition.js +1 -1
  358. package/unbundled/affix.cjs +2 -2
  359. package/unbundled/affix.js +1 -1
  360. package/unbundled/base-progress.cjs +1 -1
  361. package/unbundled/base-progress.js +1 -1
  362. package/unbundled/button.cjs +2 -2
  363. package/unbundled/button.js +2 -2
  364. package/unbundled/definition.cjs +2 -65
  365. package/unbundled/definition.js +4 -61
  366. package/unbundled/definition11.cjs +4 -3
  367. package/unbundled/definition11.js +3 -2
  368. package/unbundled/definition12.cjs +3 -2
  369. package/unbundled/definition12.js +3 -2
  370. package/unbundled/definition13.cjs +1 -1
  371. package/unbundled/definition13.js +1 -1
  372. package/unbundled/definition14.cjs +2 -1
  373. package/unbundled/definition14.js +2 -1
  374. package/unbundled/definition17.cjs +9 -4
  375. package/unbundled/definition17.js +9 -4
  376. package/unbundled/definition2.cjs +14 -3
  377. package/unbundled/definition2.js +15 -4
  378. package/unbundled/definition21.cjs +2 -1
  379. package/unbundled/definition21.js +2 -1
  380. package/unbundled/definition23.cjs +3 -1
  381. package/unbundled/definition23.js +4 -2
  382. package/unbundled/definition24.cjs +6 -4
  383. package/unbundled/definition24.js +6 -4
  384. package/unbundled/definition25.cjs +2 -1
  385. package/unbundled/definition25.js +2 -1
  386. package/unbundled/definition26.cjs +7 -4
  387. package/unbundled/definition26.js +7 -4
  388. package/unbundled/definition27.cjs +39 -5
  389. package/unbundled/definition27.js +40 -6
  390. package/unbundled/definition28.cjs +4 -3
  391. package/unbundled/definition28.js +4 -3
  392. package/unbundled/definition29.cjs +5 -168
  393. package/unbundled/definition29.js +11 -162
  394. package/unbundled/definition30.cjs +26 -506
  395. package/unbundled/definition30.js +24 -498
  396. package/unbundled/definition31.cjs +503 -39
  397. package/unbundled/definition31.js +501 -37
  398. package/unbundled/definition32.cjs +39 -239
  399. package/unbundled/definition32.js +36 -236
  400. package/unbundled/definition33.cjs +236 -74
  401. package/unbundled/definition33.js +233 -71
  402. package/unbundled/definition34.cjs +74 -1968
  403. package/unbundled/definition34.js +70 -1940
  404. package/unbundled/definition35.cjs +1993 -26
  405. package/unbundled/definition35.js +1965 -27
  406. package/unbundled/definition36.cjs +26 -111
  407. package/unbundled/definition36.js +23 -103
  408. package/unbundled/definition37.cjs +53 -294
  409. package/unbundled/definition37.js +50 -291
  410. package/unbundled/definition38.cjs +282 -132
  411. package/unbundled/definition38.js +279 -129
  412. package/unbundled/definition39.cjs +165 -339
  413. package/unbundled/definition39.js +163 -337
  414. package/unbundled/definition40.cjs +395 -227
  415. package/unbundled/definition40.js +393 -225
  416. package/unbundled/definition41.cjs +269 -47
  417. package/unbundled/definition41.js +264 -42
  418. package/unbundled/definition42.cjs +48 -67
  419. package/unbundled/definition42.js +45 -64
  420. package/unbundled/definition43.cjs +56 -383
  421. package/unbundled/definition43.js +55 -382
  422. package/unbundled/definition44.cjs +387 -44
  423. package/unbundled/definition44.js +383 -40
  424. package/unbundled/definition45.cjs +53 -45
  425. package/unbundled/definition45.js +49 -41
  426. package/unbundled/definition46.cjs +40 -164
  427. package/unbundled/definition46.js +36 -160
  428. package/unbundled/definition47.cjs +171 -31
  429. package/unbundled/definition47.js +168 -22
  430. package/unbundled/definition48.cjs +30 -89
  431. package/unbundled/definition48.js +22 -87
  432. package/unbundled/definition49.cjs +589 -48
  433. package/unbundled/definition49.js +587 -47
  434. package/unbundled/definition50.cjs +90 -21
  435. package/unbundled/definition50.js +88 -16
  436. package/unbundled/definition51.cjs +47 -32
  437. package/unbundled/definition51.js +44 -29
  438. package/unbundled/definition52.cjs +22 -323
  439. package/unbundled/definition52.js +16 -320
  440. package/unbundled/definition53.cjs +33 -212
  441. package/unbundled/definition53.js +29 -208
  442. package/unbundled/definition54.cjs +318 -41
  443. package/unbundled/definition54.js +314 -37
  444. package/unbundled/definition55.cjs +199 -253
  445. package/unbundled/definition55.js +193 -247
  446. package/unbundled/definition56.cjs +45 -53
  447. package/unbundled/definition56.js +42 -49
  448. package/unbundled/definition57.cjs +255 -133
  449. package/unbundled/definition57.js +253 -128
  450. package/unbundled/definition58.cjs +49 -245
  451. package/unbundled/definition58.js +47 -244
  452. package/unbundled/definition59.cjs +127 -444
  453. package/unbundled/definition59.js +124 -444
  454. package/unbundled/definition6.cjs +2 -1
  455. package/unbundled/definition6.js +2 -1
  456. package/unbundled/definition60.cjs +230 -3746
  457. package/unbundled/definition60.js +223 -3576
  458. package/unbundled/definition61.cjs +427 -739
  459. package/unbundled/definition61.js +425 -737
  460. package/unbundled/definition62.cjs +3762 -103
  461. package/unbundled/definition62.js +3593 -97
  462. package/unbundled/definition63.cjs +678 -886
  463. package/unbundled/definition63.js +672 -877
  464. package/unbundled/definition64.cjs +104 -108
  465. package/unbundled/definition64.js +100 -104
  466. package/unbundled/definition65.cjs +999 -65
  467. package/unbundled/definition65.js +995 -58
  468. package/unbundled/definition66.cjs +105 -155
  469. package/unbundled/definition66.js +101 -151
  470. package/unbundled/definition67.cjs +71 -121
  471. package/unbundled/definition67.js +63 -119
  472. package/unbundled/definition68.cjs +162 -51
  473. package/unbundled/definition68.js +158 -47
  474. package/unbundled/definition69.cjs +117 -75
  475. package/unbundled/definition69.js +116 -71
  476. package/unbundled/definition70.cjs +59 -21
  477. package/unbundled/definition70.js +56 -15
  478. package/unbundled/definition71.cjs +80 -75
  479. package/unbundled/definition71.js +76 -74
  480. package/unbundled/definition72.cjs +20 -305
  481. package/unbundled/definition72.js +14 -230
  482. package/unbundled/definition73.cjs +75 -315
  483. package/unbundled/definition73.js +74 -307
  484. package/unbundled/definition74.cjs +308 -30
  485. package/unbundled/definition74.js +231 -24
  486. package/unbundled/definition75.cjs +314 -109
  487. package/unbundled/definition75.js +304 -106
  488. package/unbundled/definition76.cjs +26 -250
  489. package/unbundled/definition76.js +21 -246
  490. package/unbundled/definition77.cjs +133 -27
  491. package/unbundled/definition77.js +124 -25
  492. package/unbundled/definition78.cjs +230 -116
  493. package/unbundled/definition78.js +227 -107
  494. package/unbundled/definition79.cjs +28 -203
  495. package/unbundled/definition79.js +26 -193
  496. package/unbundled/definition80.cjs +126 -477
  497. package/unbundled/definition80.js +118 -473
  498. package/unbundled/definition81.cjs +221 -0
  499. package/unbundled/definition81.js +202 -0
  500. package/unbundled/definition82.cjs +517 -0
  501. package/unbundled/definition82.js +497 -0
  502. package/unbundled/extractOptions.cjs +21 -0
  503. package/unbundled/extractOptions.js +16 -0
  504. package/unbundled/icon.cjs +67 -0
  505. package/unbundled/icon.js +61 -0
  506. package/unbundled/linkable.cjs +1 -1
  507. package/unbundled/linkable.js +1 -1
  508. package/unbundled/listbox.cjs +29 -7
  509. package/unbundled/listbox.js +29 -7
  510. package/unbundled/mixins.cjs +2 -1
  511. package/unbundled/mixins.js +2 -1
  512. package/unbundled/optgroup.cjs +66 -0
  513. package/unbundled/optgroup.js +54 -0
  514. package/unbundled/option.cjs +176 -0
  515. package/unbundled/option.js +164 -0
  516. package/unbundled/time-selection-picker.template.cjs +1 -1
  517. package/unbundled/time-selection-picker.template.js +1 -1
  518. package/unbundled/vivid-element.cjs +10 -1
  519. package/unbundled/vivid-element.js +10 -1
  520. package/video-player/definition.cjs +1 -1
  521. package/video-player/definition.js +1 -1
  522. package/vivid.api.json +568 -231
package/README.md CHANGED
@@ -2,4 +2,4 @@
2
2
 
3
3
  The component library of the Vivid design system, provided as a set of web components.
4
4
 
5
- [View Documentation](https://vivid.vonage.com/)
5
+ [View Documentation](https://apps.vivid.vonage.com/)
@@ -1,4 +1,4 @@
1
- const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/key-codes.cjs`),a=require(`../bundled/numbers.cjs`),o=require(`../bundled/definition24.cjs`);var s=`.base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}`,c={single:`single`,multi:`multi`},l=class extends e.t{constructor(...e){super(...e),this.expandmode=c.single,this.activeItemIndex=0,this.change=()=>{this.$emit(`change`,this.activeid)},this.setItems=()=>{this.accordionItems.length!==0&&(this.accordionIds=this.getItemIds(),this.activeid=this.accordionIds[this.activeItemIndex],this.accordionItems.forEach((e,t)=>{e instanceof o.r&&(e.addEventListener(`change`,this.activeItemChange),this.isSingleExpandMode()&&(this.findExpandedItem()===null&&t===0?e.expanded=!0:e.expanded=e===this.findExpandedItem()));let n=this.accordionIds[t];e.setAttribute(`id`,typeof n==`string`?n:`accordion-${t+1}`),e.addEventListener(`keydown`,this.handleItemKeyDown)}),this.isSingleExpandMode()&&(this.findExpandedItem()??this.accordionItems[0]).setAttribute(`aria-disabled`,`true`))},this.removeItemListeners=e=>{e.forEach(e=>{e.removeEventListener(`change`,this.activeItemChange),e.removeEventListener(`keydown`,this.handleItemKeyDown)})},this.activeItemChange=e=>{if(e.defaultPrevented||e.target!==e.currentTarget)return;e.preventDefault();let t=e.target;this.activeid=t.getAttribute(`id`),this.isSingleExpandMode()&&(this.resetItems(),t.expanded=!0,t.setAttribute(`aria-disabled`,`true`),this.accordionItems.forEach(e=>{!e.hasAttribute(`disabled`)&&e.id!==this.activeid&&e.removeAttribute(`aria-disabled`)})),this.activeItemIndex=Array.from(this.accordionItems).indexOf(t),this.change()},this.handleItemKeyDown=e=>{if(e.target===e.currentTarget)switch(this.accordionIds=this.getItemIds(),e.key){case i.i:e.preventDefault(),this.adjust(e.target,-1);break;case i.t:e.preventDefault(),this.adjust(e.target,1);break;case i.s:this.focusItem(0);break;case`End`:this.focusItem(this.accordionItems.length-1);break}}}accordionItemsChanged(e){this.$fastController.isConnected&&(this.removeItemListeners(e),this.setItems())}findExpandedItem(){for(let e=0;e<this.accordionItems.length;e++)if(this.accordionItems[e].hasAttribute(`expanded`))return this.accordionItems[e];return null}resetItems(){this.accordionItems.forEach(e=>{e.expanded=!1})}getItemIds(){return this.accordionItems.map(e=>e.getAttribute(`id`))}isSingleExpandMode(){return this.expandmode!==c.multi}adjust(e,t){this.focusItem(a.r(0,this.accordionItems.length-1,this.accordionItems.indexOf(e)+t))}focusItem(e){let t=this.accordionItems[e];t instanceof o.r&&t.expandbutton.focus()}closeAll(){this.expandmode===c.multi&&this.accordionItems.forEach(e=>{e.expanded=!1})}};n.t([e.m({attribute:`expand-mode`})],l.prototype,`expandmode`,void 0),n.t([e.A],l.prototype,`accordionItems`,void 0);var u=e.p`
1
+ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/key-codes.cjs`),a=require(`../bundled/numbers.cjs`),o=require(`../bundled/definition25.cjs`);var s=`.base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}`,c={single:`single`,multi:`multi`},l=class extends e.t{constructor(...e){super(...e),this.expandmode=c.single,this.activeItemIndex=0,this.change=()=>{this.$emit(`change`,this.activeid)},this.setItems=()=>{this.accordionItems.length!==0&&(this.accordionIds=this.getItemIds(),this.activeid=this.accordionIds[this.activeItemIndex],this.accordionItems.forEach((e,t)=>{e instanceof o.r&&(e.addEventListener(`change`,this.activeItemChange),this.isSingleExpandMode()&&(this.findExpandedItem()===null&&t===0?e.expanded=!0:e.expanded=e===this.findExpandedItem()));let n=this.accordionIds[t];e.setAttribute(`id`,typeof n==`string`?n:`accordion-${t+1}`),e.addEventListener(`keydown`,this.handleItemKeyDown)}),this.isSingleExpandMode()&&(this.findExpandedItem()??this.accordionItems[0]).setAttribute(`aria-disabled`,`true`))},this.removeItemListeners=e=>{e.forEach(e=>{e.removeEventListener(`change`,this.activeItemChange),e.removeEventListener(`keydown`,this.handleItemKeyDown)})},this.activeItemChange=e=>{if(e.defaultPrevented||e.target!==e.currentTarget)return;e.preventDefault();let t=e.target;this.activeid=t.getAttribute(`id`),this.isSingleExpandMode()&&(this.resetItems(),t.expanded=!0,t.setAttribute(`aria-disabled`,`true`),this.accordionItems.forEach(e=>{!e.hasAttribute(`disabled`)&&e.id!==this.activeid&&e.removeAttribute(`aria-disabled`)})),this.activeItemIndex=Array.from(this.accordionItems).indexOf(t),this.change()},this.handleItemKeyDown=e=>{if(e.target===e.currentTarget)switch(this.accordionIds=this.getItemIds(),e.key){case i.i:e.preventDefault(),this.adjust(e.target,-1);break;case i.t:e.preventDefault(),this.adjust(e.target,1);break;case i.s:this.focusItem(0);break;case`End`:this.focusItem(this.accordionItems.length-1);break}}}accordionItemsChanged(e){this.$fastController.isConnected&&(this.removeItemListeners(e),this.setItems())}findExpandedItem(){for(let e=0;e<this.accordionItems.length;e++)if(this.accordionItems[e].hasAttribute(`expanded`))return this.accordionItems[e];return null}resetItems(){this.accordionItems.forEach(e=>{e.expanded=!1})}getItemIds(){return this.accordionItems.map(e=>e.getAttribute(`id`))}isSingleExpandMode(){return this.expandmode!==c.multi}adjust(e,t){this.focusItem(a.r(0,this.accordionItems.length-1,this.accordionItems.indexOf(e)+t))}focusItem(e){let t=this.accordionItems[e];t instanceof o.r&&t.expandbutton.focus()}closeAll(){this.expandmode===c.multi&&this.accordionItems.forEach(e=>{e.expanded=!1})}};n.t([e.m({attribute:`expand-mode`})],l.prototype,`expandmode`,void 0),n.t([e.A],l.prototype,`accordionItems`,void 0);var u=e.p`
2
2
  <div class="${e=>r.t(`base`)}">
3
3
  <slot ${t.t({property:`accordionItems`,filter:t.r()})}></slot>
4
4
  </div>
@@ -4,7 +4,7 @@ import { t as c } from "../bundled/decorate.js";
4
4
  import { t as l } from "../bundled/class-names.js";
5
5
  import { i as u, s as d, t as f } from "../bundled/key-codes.js";
6
6
  import { r as p } from "../bundled/numbers.js";
7
- import { r as m, t as h } from "../bundled/definition24.js";
7
+ import { r as m, t as h } from "../bundled/definition25.js";
8
8
  //#region src/lib/accordion/accordion.scss?inline
9
9
  var g = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}", _ = {
10
10
  single: "single",
@@ -1 +1 @@
1
- require(`../bundled/definition24.cjs`).n();
1
+ require(`../bundled/definition25.cjs`).n();
@@ -1,4 +1,4 @@
1
- import { n as e } from "../bundled/definition24.js";
1
+ import { n as e } from "../bundled/definition25.js";
2
2
  //#region src/lib/accordion-item/index.ts
3
3
  e();
4
4
  //#endregion
@@ -1,4 +1,4 @@
1
- const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/playbackRates.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition2.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition20.cjs`),d=require(`../bundled/definition21.cjs`);var f=`:host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:"slider""controls"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:"slider slider""controls playback"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}`,p={FORWARD:1,BACKWARD:-1};function m(e){if(!e||Number.isNaN(e))return`0:00`;let t=Math.floor(e/60),n=Math.floor(e%60);return`${t}:${n<10?`0${n}`:n}`}var h=!0,g=!1,_={toView(e){return e},fromView(e){return Object.values(i.r).includes(e)?e:void 0}},v=class extends e.t(t.t){constructor(...e){super(...e),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#i=new Audio,this.#a=!1,this.durationFallback=!1,this.#o=()=>{this.#r?.isDragging||this.$emit(`play`,void 0,{bubbles:!1})},this.#s=()=>{this.#r?.isDragging||this.$emit(`pause`,void 0,{bubbles:!1})},this.#l=e=>{if(e===this.paused){this.#m();return}this.paused?(this.#u(),this.#i.play()):this.#i.pause(),this.#m()},this.#u=()=>{t.k.notify(this,`currentTime`);let e=this.duration,n=this.currentTime,r=Number.isFinite(e)&&e>0&&Number.isFinite(n)&&n>=0,i=r?n/e*100:0;this.#r&&(this.#a=!0,this.#r.value=i.toString(),this.#a=!1),r&&i===100&&this.pause()},this.#d=()=>{t.k.notify(this,`duration`),(!Number.isFinite(this.#i.duration)||this.#i.duration<=0)&&this.durationFallback&&this.#n()},this.#p=()=>{!this.paused&&this.#r.isDragging&&(this.pause(),this.#f=window.setInterval(()=>{(!this.#r.isDragging||!this.isConnected)&&(clearInterval(this.#f),this.isConnected&&this.play())},0)),!this.#a&&(this.currentTime=this.duration*Number(this.#r.value)/100)},this.#m=()=>{t.k.notify(this,`paused`)}}srcChanged(){this.src===void 0?this.setSrc(``):this.setSrc(this.src)}revokeSrc(){let e=this.getCurrentSrc();e&&e.startsWith(`blob:`)&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#i.currentSrc||this.#i.src||``}canPlayType(e){return this.#i.canPlayType(e)!==``}setSrc(e,t){let n=this.getCurrentSrc();this.revokeSrc(),this.#e=void 0,this.#t&&=(this.#t.abort(),void 0);let r=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(n&&this.#i.removeAttribute(`src`),r||e)try{this.#i.src=r}catch(t){console.log(`Falling back to original URL due to error:`,t),this.#i.src=e}}get playbackRate(){return t.k.track(this,`playbackRate`),this.#i.playbackRate}set playbackRate(e){this.#i.playbackRate=e,t.k.notify(this,`playbackRate`)}get paused(){return t.k.track(this,`paused`),this.#i.paused}set paused(e){}#e;#t;async#n(){if(this.#e||!this.src)return;this.#t=new AbortController;let e=this.#t.signal;try{let n=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,n);let r=await n.arrayBuffer(),i=new window.AudioContext,a=await i.decodeAudioData(r);i.close(),this.#e=a,t.k.notify(this,`duration`)}catch(e){e instanceof Error&&e.name!==`AbortError`&&console.error(`Error loading audio:`,e)}finally{this.#t=void 0}}get duration(){t.k.track(this,`duration`);let e=this.#i.duration;return Number.isFinite(e)&&e>0?e:this.#e&&this.#e.duration>0?this.#e.duration:e}set duration(e){}get currentTime(){return t.k.track(this,`currentTime`),this.#i.currentTime}set currentTime(e){this.#i.currentTime=e}get#r(){return this.shadowRoot.querySelector(`.slider`)}#i;#a;connectedCallback(){super.connectedCallback(),this.#i.addEventListener(`timeupdate`,this.#u),this.#i.addEventListener(`loadedmetadata`,this.#d),this.#i.addEventListener(`durationchange`,this.#d),this.#i.addEventListener(`play`,this.#o),this.#i.addEventListener(`pause`,this.#s),this.#c(),this.#m(),this.#u()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#i.removeEventListener(`timeupdate`,this.#u),this.#i.removeEventListener(`loadedmetadata`,this.#d),this.#i.removeEventListener(`durationchange`,this.#d),this.#i.removeEventListener(`play`,this.#o),this.#i.removeEventListener(`pause`,this.#s)}play(){this.#l(g)}pause(){this.#l(h)}#o;#s;#c(e=!0){let t=e?`addEventListener`:`removeEventListener`;this.#r&&this.#r[t](`change`,this.#p)}#l;#u;#d;#f;#p;#m;skip(e){let t=this.currentTime+parseInt(this.skipBy)*e;this.currentTime=Math.max(0,Math.min(this.duration,t))}};a.t([t.m({attribute:`play-button-aria-label`})],v.prototype,`playButtonAriaLabel`,void 0),a.t([t.m({attribute:`pause-button-aria-label`})],v.prototype,`pauseButtonAriaLabel`,void 0),a.t([t.m({attribute:`slider-aria-label`})],v.prototype,`sliderAriaLabel`,void 0),a.t([t.m({attribute:`skip-forward-aria-label`})],v.prototype,`skipForwardButtonAriaLabel`,void 0),a.t([t.m({attribute:`skip-backward-aria-label`})],v.prototype,`skipBackwardButtonAriaLabel`,void 0),a.t([t.m],v.prototype,`connotation`,void 0),a.t([t.m],v.prototype,`src`,void 0),a.t([t.m({mode:`boolean`})],v.prototype,`disabled`,void 0),a.t([t.m({mode:`boolean`})],v.prototype,`notime`,void 0),a.t([t.m({attribute:`skip-by`,converter:_})],v.prototype,`skipBy`,void 0),a.t([t.m({attribute:`playback-rates`})],v.prototype,`playbackRates`,void 0),a.t([t.m({mode:`boolean`,attribute:`duration-fallback`})],v.prototype,`durationFallback`,void 0);var y=(e,{parent:t})=>e===t.playbackRate;function b(e){let n=e.tagFor(l.i);return t.p`<${n} class="pause" @click="${e=>e.paused?e.play():e.pause()}"
1
+ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/enums.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/playbackRates.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition2.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition21.cjs`),d=require(`../bundled/definition22.cjs`);var f=`:host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:"slider""controls"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:"slider slider""controls playback"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}`,p={FORWARD:1,BACKWARD:-1};function m(e){if(!e||Number.isNaN(e))return`0:00`;let t=Math.floor(e/60),n=Math.floor(e%60);return`${t}:${n<10?`0${n}`:n}`}var h=!0,g=!1,_={toView(e){return e},fromView(e){return Object.values(i.r).includes(e)?e:void 0}},v=class extends e.t(t.t){constructor(...e){super(...e),this.playButtonAriaLabel=null,this.pauseButtonAriaLabel=null,this.sliderAriaLabel=null,this.skipForwardButtonAriaLabel=null,this.skipBackwardButtonAriaLabel=null,this.disabled=!1,this.notime=!1,this.playbackRates=null,this.#i=new Audio,this.#a=!1,this.durationFallback=!1,this.#o=()=>{this.#r?.isDragging||this.$emit(`play`,void 0,{bubbles:!1})},this.#s=()=>{this.#r?.isDragging||this.$emit(`pause`,void 0,{bubbles:!1})},this.#l=e=>{if(e===this.paused){this.#m();return}this.paused?(this.#u(),this.#i.play()):this.#i.pause(),this.#m()},this.#u=()=>{t.k.notify(this,`currentTime`);let e=this.duration,n=this.currentTime,r=Number.isFinite(e)&&e>0&&Number.isFinite(n)&&n>=0,i=r?n/e*100:0;this.#r&&(this.#a=!0,this.#r.value=i.toString(),this.#a=!1),r&&i===100&&this.pause()},this.#d=()=>{t.k.notify(this,`duration`),(!Number.isFinite(this.#i.duration)||this.#i.duration<=0)&&this.durationFallback&&this.#n()},this.#p=()=>{!this.paused&&this.#r.isDragging&&(this.pause(),this.#f=window.setInterval(()=>{(!this.#r.isDragging||!this.isConnected)&&(clearInterval(this.#f),this.isConnected&&this.play())},0)),!this.#a&&(this.currentTime=this.duration*Number(this.#r.value)/100)},this.#m=()=>{t.k.notify(this,`paused`)}}srcChanged(){this.src===void 0?this.setSrc(``):this.setSrc(this.src)}revokeSrc(){let e=this.getCurrentSrc();e&&e.startsWith(`blob:`)&&URL.revokeObjectURL(e)}getCurrentSrc(){return this.#i.currentSrc||this.#i.src||``}canPlayType(e){return this.#i.canPlayType(e)!==``}setSrc(e,t){let n=this.getCurrentSrc();this.revokeSrc(),this.#e=void 0,this.#t&&=(this.#t.abort(),void 0);let r=t&&(this.canPlayType(t.type)||!e)?URL.createObjectURL(t):e;if(n&&this.#i.removeAttribute(`src`),r||e)try{this.#i.src=r}catch(t){console.log(`Falling back to original URL due to error:`,t),this.#i.src=e}}get playbackRate(){return t.k.track(this,`playbackRate`),this.#i.playbackRate}set playbackRate(e){this.#i.playbackRate=e,t.k.notify(this,`playbackRate`)}get paused(){return t.k.track(this,`paused`),this.#i.paused}set paused(e){}#e;#t;async#n(){if(this.#e||!this.src)return;this.#t=new AbortController;let e=this.#t.signal;try{let n=await(await fetch(this.src,{signal:e})).blob();this.setSrc(this.src,n);let r=await n.arrayBuffer(),i=new window.AudioContext,a=await i.decodeAudioData(r);i.close(),this.#e=a,t.k.notify(this,`duration`)}catch(e){e instanceof Error&&e.name!==`AbortError`&&console.error(`Error loading audio:`,e)}finally{this.#t=void 0}}get duration(){t.k.track(this,`duration`);let e=this.#i.duration;return Number.isFinite(e)&&e>0?e:this.#e&&this.#e.duration>0?this.#e.duration:e}set duration(e){}get currentTime(){return t.k.track(this,`currentTime`),this.#i.currentTime}set currentTime(e){this.#i.currentTime=e}get#r(){return this.shadowRoot.querySelector(`.slider`)}#i;#a;connectedCallback(){super.connectedCallback(),this.#i.addEventListener(`timeupdate`,this.#u),this.#i.addEventListener(`loadedmetadata`,this.#d),this.#i.addEventListener(`durationchange`,this.#d),this.#i.addEventListener(`play`,this.#o),this.#i.addEventListener(`pause`,this.#s),this.#c(),this.#m(),this.#u()}disconnectedCallback(){super.disconnectedCallback(),this.#c(!1),this.pause(),this.#i.removeEventListener(`timeupdate`,this.#u),this.#i.removeEventListener(`loadedmetadata`,this.#d),this.#i.removeEventListener(`durationchange`,this.#d),this.#i.removeEventListener(`play`,this.#o),this.#i.removeEventListener(`pause`,this.#s)}play(){this.#l(g)}pause(){this.#l(h)}#o;#s;#c(e=!0){let t=e?`addEventListener`:`removeEventListener`;this.#r&&this.#r[t](`change`,this.#p)}#l;#u;#d;#f;#p;#m;skip(e){let t=this.currentTime+parseInt(this.skipBy)*e;this.currentTime=Math.max(0,Math.min(this.duration,t))}};a.t([t.m({attribute:`play-button-aria-label`})],v.prototype,`playButtonAriaLabel`,void 0),a.t([t.m({attribute:`pause-button-aria-label`})],v.prototype,`pauseButtonAriaLabel`,void 0),a.t([t.m({attribute:`slider-aria-label`})],v.prototype,`sliderAriaLabel`,void 0),a.t([t.m({attribute:`skip-forward-aria-label`})],v.prototype,`skipForwardButtonAriaLabel`,void 0),a.t([t.m({attribute:`skip-backward-aria-label`})],v.prototype,`skipBackwardButtonAriaLabel`,void 0),a.t([t.m],v.prototype,`connotation`,void 0),a.t([t.m],v.prototype,`src`,void 0),a.t([t.m({mode:`boolean`})],v.prototype,`disabled`,void 0),a.t([t.m({mode:`boolean`})],v.prototype,`notime`,void 0),a.t([t.m({attribute:`skip-by`,converter:_})],v.prototype,`skipBy`,void 0),a.t([t.m({attribute:`playback-rates`})],v.prototype,`playbackRates`,void 0),a.t([t.m({mode:`boolean`,attribute:`duration-fallback`})],v.prototype,`durationFallback`,void 0);var y=(e,{parent:t})=>e===t.playbackRate;function b(e){let n=e.tagFor(l.i);return t.p`<${n} class="pause" @click="${e=>e.paused?e.play():e.pause()}"
2
2
  icon="${e=>e.paused?`play-solid`:`pause-solid`}"
3
3
  aria-label="${e=>e.paused?e.playButtonAriaLabel||e.locale.audioPlayer.playButtonLabel:e.pauseButtonAriaLabel||e.locale.audioPlayer.pauseButtonLabel}"
4
4
  size='condensed'
@@ -49,7 +49,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
49
49
  </div>
50
50
  ${C(e)}
51
51
  ${r.t(e=>!!e.playbackRates,t.p`
52
- <${a} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
52
+ <${a} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu">
53
53
  <${c} id="playback-open-button"
54
54
  class="playback-button"
55
55
  slot="anchor"
@@ -8,8 +8,8 @@ import { t as d } from "../bundled/playbackRates.js";
8
8
  import { t as f } from "../bundled/class-names.js";
9
9
  import { n as p, r as m } from "../bundled/definition2.js";
10
10
  import { i as h, t as g } from "../bundled/definition6.js";
11
- import { i as _, t as v } from "../bundled/definition20.js";
12
- import { r as y, t as b } from "../bundled/definition21.js";
11
+ import { i as _, t as v } from "../bundled/definition21.js";
12
+ import { r as y, t as b } from "../bundled/definition22.js";
13
13
  //#region src/lib/audio-player/audio-player.scss?inline
14
14
  var x = ":host{display:block}.wrapper{container-type:inline-size}.base{box-sizing:border-box;color:var(--vvd-color-canvas-text);user-select:none;align-items:center;gap:8px;inline-size:100%;padding:8px;display:inline-flex}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{grid-area:controls;justify-content:center;align-items:center;gap:8px;display:flex}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{min-inline-size:32px;margin-inline:6px}.base .playback-button{grid-area:playback}@container (width<=500px){.base.two-lines{grid-template:\"slider\"\"controls\"/1fr;row-gap:4px;inline-size:100%;display:inline-grid}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-columns:1fr auto;grid-template-areas:\"slider slider\"\"controls playback\"}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}", S = {
15
15
  FORWARD: 1,
@@ -239,7 +239,7 @@ t(o("audio-player", D, (e) => {
239
239
  </div>
240
240
  ${M(e)}
241
241
  ${c((e) => !!e.playbackRates, i`
242
- <${t} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
242
+ <${t} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu">
243
243
  <${n} id="playback-open-button"
244
244
  class="playback-button"
245
245
  slot="anchor"
package/avatar/index.cjs CHANGED
@@ -1,18 +1,18 @@
1
- const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/definition3.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/linkable.cjs`);var s=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,c=class extends o.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m],c.prototype,`shape`,void 0),n.t([e.m],c.prototype,`appearance`,void 0),n.t([e.m],c.prototype,`size`,void 0),n.t([e.m],c.prototype,`icon`,void 0),n.t([e.m],c.prototype,`initials`,void 0),n.t([e.m({mode:`boolean`,attribute:`clickable`})],c.prototype,`clickable`,void 0);var l=e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size]);function u(t){return e.p`
1
+ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/definition3.cjs`),a=require(`../bundled/icon.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/linkable.cjs`);var c=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,l=class extends s.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.m],l.prototype,`connotation`,void 0),n.t([e.m],l.prototype,`shape`,void 0),n.t([e.m],l.prototype,`appearance`,void 0),n.t([e.m],l.prototype,`size`,void 0),n.t([e.m],l.prototype,`icon`,void 0),n.t([e.m],l.prototype,`initials`,void 0),n.t([e.m({mode:`boolean`,attribute:`clickable`})],l.prototype,`clickable`,void 0);var u=e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size]);function d(t){return e.p`
2
2
  <${t} name="${e=>e.icon?e.icon:`user-line`}"></${t}>
3
- `}function d(){return e.p`
3
+ `}function f(){return e.p`
4
4
  <span class="initials">${({initials:e})=>e.substring(0,2)}</span>
5
- `}function f(t,n){return t.href?t._renderLinkElement(n,l):t.clickable?e.p`<button
5
+ `}function p(t,n){return t.href?t._renderLinkElement(n,u):t.clickable?e.p`<button
6
6
  type="button"
7
- class="${l}"
8
- ${a.n()}
7
+ class="${u}"
8
+ ${o.n()}
9
9
  >
10
10
  ${n}
11
- </button>`:e.p`<span class="${l}">${n}</span>`}var p=e.u(`avatar`,c,n=>{let r=n.tagFor(i.r);return e.p`
12
- ${n=>f(n,e.p`<slot name="graphic">
13
- ${t.t(e=>e.initials,d())}
11
+ </button>`:e.p`<span class="${u}">${n}</span>`}var m=e.u(`avatar`,l,n=>{let r=n.tagFor(a.t);return e.p`
12
+ ${n=>p(n,e.p`<slot name="graphic">
13
+ ${t.t(e=>e.initials,f())}
14
14
  ${t.t(e=>!e.initials,e.p`<span class="icon"
15
- ><slot name="icon">${u(r)}</slot></span
15
+ ><slot name="icon">${d(r)}</slot></span
16
16
  >`)}</slot
17
17
  >`)}
18
- `},[i.t],{styles:s});e.d(p)();
18
+ `},[i.t],{styles:c});e.d(m)();
package/avatar/index.js CHANGED
@@ -2,7 +2,8 @@ import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element
2
2
  import { t as a } from "../bundled/when.js";
3
3
  import { t as o } from "../bundled/decorate.js";
4
4
  import { t as s } from "../bundled/class-names.js";
5
- import { r as c, t as l } from "../bundled/definition3.js";
5
+ import { t as c } from "../bundled/definition3.js";
6
+ import { t as l } from "../bundled/icon.js";
6
7
  import { n as u } from "../bundled/delegates-aria.js";
7
8
  import { t as d } from "../bundled/linkable.js";
8
9
  //#region src/lib/avatar/avatar.scss?inline
@@ -40,7 +41,7 @@ function _(e, t) {
40
41
  //#endregion
41
42
  //#region src/lib/avatar/index.ts
42
43
  e(i("avatar", p, (e) => {
43
- let t = e.tagFor(c);
44
+ let t = e.tagFor(l);
44
45
  return n`
45
46
  ${(e) => _(e, n`<slot name="graphic">
46
47
  ${a((e) => e.initials, g())}
@@ -49,5 +50,5 @@ e(i("avatar", p, (e) => {
49
50
  >`)}</slot
50
51
  >`)}
51
52
  `;
52
- }, [l], { styles: f }))();
53
+ }, [c], { styles: f }))();
53
54
  //#endregion
package/badge/index.cjs CHANGED
@@ -1 +1 @@
1
- require(`../bundled/definition22.cjs`).n();
1
+ require(`../bundled/definition23.cjs`).n();
package/badge/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as e } from "../bundled/definition22.js";
1
+ import { n as e } from "../bundled/definition23.js";
2
2
  //#region src/lib/badge/index.ts
3
3
  e();
4
4
  //#endregion
@@ -1,5 +1,9 @@
1
- const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/definition3.cjs`),i=require(`../bundled/breadcrumb-item.cjs`);var a=`.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}`,o=e=>n.t(`base`),s=e.u(`breadcrumb-item`,i.t,n=>{let i=n.tagFor(r.r);return e.p` <div role="listitem" class="${o}">
2
- ${t.t(e=>e.text&&!e.href,e.p`${e=>e.text}`)}
3
- ${t.t(e=>e.text&&e.href&&e.href.length>0,e.p`${t=>t._renderLinkElement(e.p`${e=>e.text}`,`control`)}`)}
4
- ${t.t(e=>e.separator,e.p`<${i} class="separator" name="chevron-right-solid"></${i}>`)}
5
- </div>`},[r.t],{styles:a,shadowOptions:{delegatesFocus:!0}});e.d(s)();
1
+ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/definition3.cjs`),i=require(`../bundled/icon.cjs`),a=require(`../bundled/breadcrumb-item.cjs`);var o=`:host{flex:0 auto;min-inline-size:0}.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;min-inline-size:0;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;display:block;overflow:hidden}.control{font:inherit;min-inline-size:0;display:block}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}`,s=e=>n.t(`base`),c=e.u(`breadcrumb-item`,a.t,n=>{let r=n.tagFor(i.t);return e.p` <div role="listitem" class="${s}">
2
+ ${t.t(e=>e.text&&!e.href,e.p`<span class="text" title="${e=>e.text}"
3
+ >${e=>e.text}</span
4
+ >`)}
5
+ ${t.t(e=>e.text&&e.href&&e.href.length>0,e.p`${t=>t._renderLinkElement(e.p`<span class="text" title="${e=>e.text}"
6
+ >${e=>e.text}</span
7
+ >`,`control`)}`)}
8
+ ${t.t(e=>e.separator,e.p`<${r} class="separator" name="chevron-right-solid"></${r}>`)}
9
+ </div>`},[r.t],{styles:o,shadowOptions:{delegatesFocus:!0}});e.d(c)();
@@ -1,20 +1,25 @@
1
1
  import { d as e, p as t, u as n } from "../bundled/vivid-element.js";
2
2
  import { t as r } from "../bundled/when.js";
3
3
  import { t as i } from "../bundled/class-names.js";
4
- import { r as a, t as o } from "../bundled/definition3.js";
4
+ import { t as a } from "../bundled/definition3.js";
5
+ import { t as o } from "../bundled/icon.js";
5
6
  import { t as s } from "../bundled/breadcrumb-item.js";
6
7
  //#region src/lib/breadcrumb-item/breadcrumb-item.scss?inline
7
- var c = ".base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}", l = (e) => i("base");
8
+ var c = ":host{flex:0 auto;min-inline-size:0}.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;min-inline-size:0;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;display:block;overflow:hidden}.control{font:inherit;min-inline-size:0;display:block}.control:focus-visible{outline:none;position:relative}.control:focus-visible: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));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}", l = (e) => i("base");
8
9
  //#endregion
9
10
  //#region src/lib/breadcrumb-item/index.ts
10
11
  e(n("breadcrumb-item", s, (e) => {
11
- let n = e.tagFor(a);
12
+ let n = e.tagFor(o);
12
13
  return t` <div role="listitem" class="${l}">
13
- ${r((e) => e.text && !e.href, t`${(e) => e.text}`)}
14
- ${r((e) => e.text && e.href && e.href.length > 0, t`${(e) => e._renderLinkElement(t`${(e) => e.text}`, "control")}`)}
14
+ ${r((e) => e.text && !e.href, t`<span class="text" title="${(e) => e.text}"
15
+ >${(e) => e.text}</span
16
+ >`)}
17
+ ${r((e) => e.text && e.href && e.href.length > 0, t`${(e) => e._renderLinkElement(t`<span class="text" title="${(e) => e.text}"
18
+ >${(e) => e.text}</span
19
+ >`, "control")}`)}
15
20
  ${r((e) => e.separator, t`<${n} class="separator" name="chevron-right-solid"></${n}>`)}
16
21
  </div>`;
17
- }, [o], {
22
+ }, [a], {
18
23
  styles: c,
19
24
  shadowOptions: { delegatesFocus: !0 }
20
25
  }))();
package/bundled/affix.cjs CHANGED
@@ -1,4 +1,4 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./definition3.cjs`);var i=t=>{class r extends t{}return n.t([e.m],r.prototype,`icon`,void 0),n.t([e.A],r.prototype,`iconSlottedContent`,void 0),r},a=t=>{class r extends i(t){constructor(...e){super(...e),this.iconTrailing=!1}}return n.t([e.m({mode:`boolean`,attribute:`icon-trailing`})],r.prototype,`iconTrailing`,void 0),r},o={Slot:!1,Span:!0},s={Hidden:`true`,Visible:`false`},c=n=>{let i=n.tagFor(r.r);return(n,r=o.Span,a=s.Hidden,c={label:``,announceOnUpdate:!1})=>{if(!n&&!r)return e.p`<slot
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./icon.cjs`);var i=t=>{class r extends t{}return n.t([e.m],r.prototype,`icon`,void 0),n.t([e.A],r.prototype,`iconSlottedContent`,void 0),r},a=t=>{class r extends i(t){constructor(...e){super(...e),this.iconTrailing=!1}}return n.t([e.m({mode:`boolean`,attribute:`icon-trailing`})],r.prototype,`iconTrailing`,void 0),r},o={Slot:!1,Span:!0},s={Hidden:`true`,Visible:`false`},c=n=>{let i=n.tagFor(r.t);return(n,r=o.Span,a=s.Hidden,c={label:``,announceOnUpdate:!1})=>{if(!n&&!r)return e.p`<slot
2
2
  name="icon"
3
3
  aria-hidden="${()=>a}"
4
4
  ${t.t(`iconSlottedContent`)}
package/bundled/affix.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { A as e, m as t, p as n } from "./vivid-element.js";
2
2
  import { t as r } from "./slotted.js";
3
3
  import { t as i } from "./decorate.js";
4
- import { r as a } from "./definition3.js";
4
+ import { t as a } from "./icon.js";
5
5
  //#region src/shared/patterns/affix.ts
6
6
  var o = (n) => {
7
7
  class r extends n {}
@@ -1,4 +1,4 @@
1
- const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition8.cjs`),o=require(`./anchored.cjs`),s=require(`./dialog.cjs`);var c=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}`,l=class extends e.t(o.t(t.t)){constructor(...e){super(...e),this.#e=null,this.alternate=!1,this.placement=`right`,this.open=!1,this.#i=()=>{this.open||t.M.enqueue(()=>this.open=!0)},this.#o=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this.#s=e=>{e.key===`Escape`&&(this.open=!1)}}#e;openChanged(e,t){e!==void 0&&(t?this.setAttribute(`role`,`status`):this.removeAttribute(`role`),this.#a(),this._anchorEl&&this.#n(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),this.#e=e.ariaLabel,e.ariaLabel=this.locale.toggletip.anchorLabel(e.ariaLabel||``),this.#n(e)}#n(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.ariaLabel&&=this.#e}#i;#a(){document.removeEventListener(`click`,this.#o),document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&(document.addEventListener(`click`,this.#o),document.addEventListener(`keydown`,this.#s))}#o;#s};r.t([t.m],l.prototype,`headline`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`alternate`,void 0),r.t([t.m({mode:`fromView`})],l.prototype,`placement`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`open`,void 0);var u=e=>i.t(`control`),d=t.u(`toggletip`,l,e=>{let r=e.tagFor(a.i);return t.p`
1
+ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition8.cjs`),o=require(`./anchored.cjs`),s=require(`./dialog.cjs`);var c=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}`,l=class extends e.t(o.t(t.t)){constructor(...e){super(...e),this.#e=null,this.alternate=!1,this.placement=`right`,this.open=!1,this.#i=()=>{this.open||t.M.enqueue(()=>this.open=!0)},this.#o=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this.#s=e=>{e.key===`Escape`&&(this.open=!1)}}#e;openChanged(e,t){e!==void 0&&(t?this.setAttribute(`role`,`status`):this.removeAttribute(`role`),this.#a(),this._anchorEl&&this.#n(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),this.#e=e.ariaLabel,e.ariaLabel=this.locale.toggletip.anchorLabel(e.ariaLabel||``),this.#n(e)}#n(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.ariaLabel&&=this.#e}#i;#a(){document.removeEventListener(`click`,this.#o),document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&(document.addEventListener(`click`,this.#o),document.addEventListener(`keydown`,this.#s))}#o;#s};r.t([t.m],l.prototype,`headline`,void 0),r.t([t.m({attribute:`text-secondary`})],l.prototype,`textSecondary`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`alternate`,void 0),r.t([t.m({mode:`fromView`})],l.prototype,`placement`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`open`,void 0);var u=e=>i.t(`control`),d=t.u(`toggletip`,l,e=>{let r=e.tagFor(a.i);return t.p`
2
2
  ${o.n()}
3
3
  <${r}
4
4
  @keydown="${(e,{event:t})=>!(e.open&&s.t(t))}"
@@ -12,6 +12,7 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
12
12
  >
13
13
  <div class="content-wrapper">
14
14
  ${n.t(e=>e.headline,t.p`<h2 class="headline">${e=>e.headline}</h2>`)}
15
+ ${n.t(e=>e.textSecondary,t.p`<p class="text-secondary">${e=>e.textSecondary}</p>`)}
15
16
  <slot></slot>
16
17
  <div class="action-items"><slot name="action-items"></slot></div>
17
18
  </div>
@@ -7,7 +7,7 @@ import { i as u, t as d } from "./definition8.js";
7
7
  import { n as f, t as p } from "./anchored.js";
8
8
  import { t as m } from "./dialog.js";
9
9
  //#region src/lib/toggletip/toggletip.scss?inline
10
- var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(p(a)) {
10
+ var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(p(a)) {
11
11
  constructor(...e) {
12
12
  super(...e), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#i = () => {
13
13
  this.open || t.enqueue(() => this.open = !0);
@@ -49,7 +49,7 @@ var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-a
49
49
  #o;
50
50
  #s;
51
51
  };
52
- c([r], g.prototype, "headline", void 0), c([r({ mode: "boolean" })], g.prototype, "alternate", void 0), c([r({ mode: "fromView" })], g.prototype, "placement", void 0), c([r({ mode: "boolean" })], g.prototype, "open", void 0);
52
+ c([r], g.prototype, "headline", void 0), c([r({ attribute: "text-secondary" })], g.prototype, "textSecondary", void 0), c([r({ mode: "boolean" })], g.prototype, "alternate", void 0), c([r({ mode: "fromView" })], g.prototype, "placement", void 0), c([r({ mode: "boolean" })], g.prototype, "open", void 0);
53
53
  //#endregion
54
54
  //#region src/lib/toggletip/toggletip.template.ts
55
55
  var _ = (e) => l("control"), v = o("toggletip", g, (e) => {
@@ -68,6 +68,7 @@ var _ = (e) => l("control"), v = o("toggletip", g, (e) => {
68
68
  >
69
69
  <div class="content-wrapper">
70
70
  ${s((e) => e.headline, i`<h2 class="headline">${(e) => e.headline}</h2>`)}
71
+ ${s((e) => e.textSecondary, i`<p class="text-secondary">${(e) => e.textSecondary}</p>`)}
71
72
  <slot></slot>
72
73
  <div class="action-items"><slot name="action-items"></slot></div>
73
74
  </div>
@@ -1,10 +1,10 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`),r=require(`./definition3.cjs`),i=require(`./definition10.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};t.t([e.m({mode:`fromView`})],a.prototype,`placement`,void 0);var o=e=>n.t(`control`),s=e.u(`contextual-help`,a,t=>{let n=t.tagFor(i.r),a=t.tagFor(r.r);return e.p`
1
+ const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`),r=require(`./definition3.cjs`),i=require(`./icon.cjs`),a=require(`./definition10.cjs`);var o=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};t.t([e.m({mode:`fromView`})],o.prototype,`placement`,void 0);var s=e=>n.t(`control`),c=e.u(`contextual-help`,o,t=>{let n=t.tagFor(a.r),r=t.tagFor(i.t);return e.p`
2
2
  <${n} class="base" exportparts="vvd-theme-alternate">
3
- <button class="${o}" slot="anchor">
3
+ <button class="${s}" slot="anchor">
4
4
  <slot name="icon" slot="icon">
5
- <${a} name="help-solid"></${a}>
5
+ <${r} name="help-solid"></${r}>
6
6
  </slot>
7
7
  </button>
8
8
  <slot></slot>
9
9
  </${n}>
10
- `},[r.t,i.n],{styles:`.control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),c=e.d(s);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
10
+ `},[r.t,a.n],{styles:`.control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),l=e.d(c);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});
@@ -1,7 +1,8 @@
1
1
  import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
2
2
  import { t as a } from "./decorate.js";
3
3
  import { t as o } from "./class-names.js";
4
- import { r as s, t as c } from "./definition3.js";
4
+ import { t as s } from "./definition3.js";
5
+ import { t as c } from "./icon.js";
5
6
  import { n as l, r as u } from "./definition10.js";
6
7
  //#region src/lib/contextual-help/contextual-help.ts
7
8
  var d = class extends r {
@@ -13,7 +14,7 @@ a([t({ mode: "fromView" })], d.prototype, "placement", void 0);
13
14
  //#endregion
14
15
  //#region src/lib/contextual-help/contextual-help.template.ts
15
16
  var f = (e) => o("control"), p = i("contextual-help", d, (e) => {
16
- let t = e.tagFor(u), r = e.tagFor(s);
17
+ let t = e.tagFor(u), r = e.tagFor(c);
17
18
  return n`
18
19
  <${t} class="base" exportparts="vvd-theme-alternate">
19
20
  <button class="${f}" slot="anchor">
@@ -24,6 +25,6 @@ var f = (e) => o("control"), p = i("contextual-help", d, (e) => {
24
25
  <slot></slot>
25
26
  </${t}>
26
27
  `;
27
- }, [c, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
28
+ }, [s, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
28
29
  //#endregion
29
30
  export { m as n, p as t };
@@ -1,4 +1,4 @@
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([`
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`,search:`search`,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;
@@ -22,6 +22,7 @@ import { t as j } from "./text-field.js";
22
22
  var M = {
23
23
  email: "email",
24
24
  password: "password",
25
+ search: "search",
25
26
  tel: "tel",
26
27
  text: "text",
27
28
  url: "url"
@@ -1,18 +1,19 @@
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>
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./definition3.cjs`),s=require(`./icon.cjs`),c=require(`./delegates-aria.cjs`),l=require(`./form-associated.cjs`),u=require(`./mixins.cjs`),d=require(`./form-element.cjs`),f=require(`./with-error-text.cjs`),p=require(`./with-success-text.cjs`);var m=`: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}`,h=class extends c.t(u.t(f.t(p.t(d.t(l.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`)}};i.t([e.m({attribute:`tabindex`})],h.prototype,`tabindex`,void 0),i.t([e.m],h.prototype,`connotation`,void 0),i.t([e.m({attribute:`readonly`,mode:`boolean`})],h.prototype,`readOnly`,void 0),i.t([e.A],h.prototype,`defaultSlottedNodes`,void 0),i.t([e.m({attribute:`indeterminate`,mode:`boolean`})],h.prototype,`indeterminate`,void 0),i.t([e.A],h.prototype,`slottedContent`,void 0);var g=e.u(`checkbox`,h,i=>{let o=i.tagFor(s.t);return e.p`<template>
2
2
  <div
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})}
3
+ ${n.t(`control`)}
4
+ class="${e=>a.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])}"
5
+ ${c.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
6
  tabindex="${e=>e.tabindex===null?e.disabled?null:0:e.tabindex}"
6
7
  @keypress="${(e,t)=>e.keypressHandler(t.event)}"
7
8
  @click="${(e,t)=>e.clickHandler(t.event)}"
8
9
  >
9
10
  <div class="control">
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}>`)}
11
+ ${r.t(e=>e.checked&&!e.indeterminate,e.p`<${o} name="check-solid" class="icon"></${o}>`)}
12
+ ${r.t(e=>e.indeterminate,e.p`<${o} name="minus-solid" class="icon"></${o}>`)}
12
13
  </div>
13
14
  ${e.p`<label
14
15
  >${e=>e.label}<slot ${t.t(`slottedContent`)}></slot
15
16
  ></label>`}
16
17
  </div>
17
- ${e=>e._getFeedbackTemplate(r)}
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}});
18
+ ${e=>e._getFeedbackTemplate(i)}
19
+ </template>`},[o.t,u.r],{styles:m,shadowOptions:{delegatesFocus:!0}}),_=e.d(g);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});