@vonage/vivid 4.13.0 → 4.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (512) hide show
  1. package/custom-elements.json +3088 -1610
  2. package/elevation/index.cjs +1 -1
  3. package/elevation/index.js +1 -1
  4. package/index.cjs +70 -136
  5. package/index.d.ts +0 -1
  6. package/index.js +60 -62
  7. package/lib/accordion/accordion.d.ts +2 -2
  8. package/lib/accordion/accordion.template.d.ts +1 -2
  9. package/lib/accordion/definition.d.ts +1 -1
  10. package/lib/accordion-item/accordion-item.d.ts +2 -2
  11. package/lib/accordion-item/accordion-item.template.d.ts +2 -3
  12. package/lib/accordion-item/definition.d.ts +1 -1
  13. package/lib/action-group/action-group.d.ts +2 -2
  14. package/lib/action-group/action-group.template.d.ts +1 -3
  15. package/lib/action-group/definition.d.ts +1 -1
  16. package/lib/alert/alert.d.ts +2 -2
  17. package/lib/alert/alert.template.d.ts +2 -3
  18. package/lib/alert/definition.d.ts +1 -1
  19. package/lib/audio-player/audio-player.d.ts +2 -2
  20. package/lib/audio-player/audio-player.template.d.ts +2 -3
  21. package/lib/audio-player/definition.d.ts +1 -3
  22. package/lib/avatar/avatar.d.ts +2 -2
  23. package/lib/avatar/avatar.template.d.ts +2 -3
  24. package/lib/avatar/definition.d.ts +1 -1
  25. package/lib/badge/badge.d.ts +2 -2
  26. package/lib/badge/badge.template.d.ts +2 -3
  27. package/lib/badge/definition.d.ts +1 -3
  28. package/lib/banner/banner.d.ts +2 -2
  29. package/lib/banner/banner.template.d.ts +2 -3
  30. package/lib/banner/definition.d.ts +1 -1
  31. package/lib/breadcrumb/breadcrumb.d.ts +2 -2
  32. package/lib/breadcrumb/breadcrumb.template.d.ts +3 -4
  33. package/lib/breadcrumb/definition.d.ts +1 -1
  34. package/lib/breadcrumb-item/breadcrumb-item.d.ts +2 -2
  35. package/lib/breadcrumb-item/breadcrumb-item.template.d.ts +2 -3
  36. package/lib/breadcrumb-item/definition.d.ts +1 -1
  37. package/lib/button/button.d.ts +2 -2
  38. package/lib/button/button.template.d.ts +2 -4
  39. package/lib/button/definition.d.ts +1 -1
  40. package/lib/calendar/calendar.d.ts +2 -2
  41. package/lib/calendar/calendar.template.d.ts +1 -3
  42. package/lib/calendar/definition.d.ts +1 -1
  43. package/lib/calendar-event/calendar-event.d.ts +2 -2
  44. package/lib/calendar-event/calendar-event.template.d.ts +1 -3
  45. package/lib/calendar-event/definition.d.ts +1 -1
  46. package/lib/card/card.d.ts +2 -2
  47. package/lib/card/card.template.d.ts +2 -3
  48. package/lib/card/definition.d.ts +1 -1
  49. package/lib/checkbox/checkbox.form-associated.d.ts +3 -2
  50. package/lib/checkbox/checkbox.template.d.ts +2 -3
  51. package/lib/checkbox/definition.d.ts +1 -1
  52. package/lib/combobox/combobox.d.ts +17 -2
  53. package/lib/combobox/combobox.options.d.ts +7 -0
  54. package/lib/combobox/combobox.template.d.ts +2 -3
  55. package/lib/combobox/definition.d.ts +1 -2
  56. package/lib/data-grid/data-grid-cell.d.ts +16 -13
  57. package/lib/data-grid/data-grid-cell.template.d.ts +2 -3
  58. package/lib/data-grid/data-grid-row.d.ts +19 -2
  59. package/lib/data-grid/data-grid-row.template.d.ts +2 -2
  60. package/lib/data-grid/data-grid.d.ts +45 -4
  61. package/lib/data-grid/data-grid.template.d.ts +2 -2
  62. package/lib/data-grid/definition.d.ts +1 -6
  63. package/lib/date-picker/definition.d.ts +1 -3
  64. package/lib/date-range-picker/definition.d.ts +1 -3
  65. package/lib/dial-pad/definition.d.ts +1 -3
  66. package/lib/dial-pad/dial-pad.d.ts +2 -2
  67. package/lib/dial-pad/dial-pad.template.d.ts +2 -3
  68. package/lib/dialog/definition.d.ts +1 -1
  69. package/lib/dialog/dialog.d.ts +2 -2
  70. package/lib/dialog/dialog.template.d.ts +2 -3
  71. package/lib/divider/definition.d.ts +1 -1
  72. package/lib/divider/divider.d.ts +2 -2
  73. package/lib/divider/divider.template.d.ts +1 -3
  74. package/lib/elevation/definition.d.ts +1 -1
  75. package/lib/elevation/elevation.d.ts +3 -2
  76. package/lib/elevation/elevation.template.d.ts +1 -3
  77. package/lib/empty-state/definition.d.ts +1 -3
  78. package/lib/empty-state/empty-state.d.ts +2 -2
  79. package/lib/empty-state/empty-state.template.d.ts +2 -3
  80. package/lib/fab/definition.d.ts +1 -3
  81. package/lib/fab/fab.template.d.ts +2 -3
  82. package/lib/file-picker/definition.d.ts +1 -3
  83. package/lib/file-picker/file-picker.form-associated.d.ts +3 -2
  84. package/lib/file-picker/file-picker.template.d.ts +2 -3
  85. package/lib/header/definition.d.ts +1 -3
  86. package/lib/header/header.d.ts +2 -2
  87. package/lib/header/header.template.d.ts +2 -3
  88. package/lib/icon/definition.d.ts +1 -3
  89. package/lib/icon/icon.d.ts +2 -2
  90. package/lib/icon/icon.template.d.ts +1 -3
  91. package/lib/layout/definition.d.ts +1 -3
  92. package/lib/layout/layout.d.ts +2 -2
  93. package/lib/layout/layout.template.d.ts +1 -3
  94. package/lib/listbox/definition.d.ts +1 -3
  95. package/lib/listbox/listbox.template.d.ts +1 -3
  96. package/lib/menu/definition.d.ts +1 -11
  97. package/lib/menu/menu.d.ts +2 -2
  98. package/lib/menu/menu.template.d.ts +3 -3
  99. package/lib/menu-item/definition.d.ts +1 -3
  100. package/lib/menu-item/menu-item.d.ts +2 -2
  101. package/lib/menu-item/menu-item.template.d.ts +2 -3
  102. package/lib/nav/definition.d.ts +1 -3
  103. package/lib/nav/nav.d.ts +2 -2
  104. package/lib/nav/nav.template.d.ts +1 -3
  105. package/lib/nav-disclosure/definition.d.ts +1 -3
  106. package/lib/nav-disclosure/nav-disclosure.d.ts +2 -2
  107. package/lib/nav-disclosure/nav-disclosure.template.d.ts +2 -3
  108. package/lib/nav-item/definition.d.ts +1 -3
  109. package/lib/nav-item/nav-item.template.d.ts +2 -3
  110. package/lib/note/definition.d.ts +1 -3
  111. package/lib/note/note.d.ts +2 -2
  112. package/lib/note/note.template.d.ts +2 -3
  113. package/lib/number-field/definition.d.ts +1 -4
  114. package/lib/number-field/number-field.form-associated.d.ts +3 -2
  115. package/lib/number-field/number-field.template.d.ts +2 -3
  116. package/lib/option/definition.d.ts +1 -3
  117. package/lib/option/option.d.ts +3 -2
  118. package/lib/option/option.template.d.ts +2 -3
  119. package/lib/pagination/definition.d.ts +1 -3
  120. package/lib/pagination/pagination.d.ts +2 -2
  121. package/lib/pagination/pagination.template.d.ts +2 -3
  122. package/lib/popup/definition.d.ts +1 -3
  123. package/lib/popup/popup.template.d.ts +2 -3
  124. package/lib/progress/definition.d.ts +1 -3
  125. package/lib/progress/progress.d.ts +1 -1
  126. package/lib/progress/progress.template.d.ts +1 -4
  127. package/lib/progress-ring/definition.d.ts +1 -3
  128. package/lib/progress-ring/progress-ring.d.ts +1 -1
  129. package/lib/progress-ring/progress-ring.template.d.ts +1 -3
  130. package/lib/radio/definition.d.ts +1 -3
  131. package/lib/radio/radio.form-associated.d.ts +5 -2
  132. package/lib/radio/radio.template.d.ts +1 -3
  133. package/lib/radio-group/definition.d.ts +1 -11
  134. package/lib/radio-group/radio-group.d.ts +2 -2
  135. package/lib/radio-group/radio-group.template.d.ts +2 -3
  136. package/lib/range-slider/definition.d.ts +1 -3
  137. package/lib/range-slider/range-slider.form-associated.d.ts +3 -2
  138. package/lib/range-slider/range-slider.template.d.ts +2 -3
  139. package/lib/searchable-select/definition.d.ts +1 -4
  140. package/lib/searchable-select/option-tag.template.d.ts +2 -3
  141. package/lib/searchable-select/searchable-select.form-associated.d.ts +3 -2
  142. package/lib/searchable-select/searchable-select.template.d.ts +2 -3
  143. package/lib/select/definition.d.ts +1 -3
  144. package/lib/select/select.d.ts +14 -4
  145. package/lib/select/select.form-associated.d.ts +11 -0
  146. package/lib/select/select.template.d.ts +2 -3
  147. package/lib/selectable-box/definition.d.ts +1 -3
  148. package/lib/selectable-box/selectable-box.d.ts +2 -2
  149. package/lib/selectable-box/selectable-box.template.d.ts +2 -3
  150. package/lib/side-drawer/definition.d.ts +1 -3
  151. package/lib/side-drawer/side-drawer.d.ts +2 -2
  152. package/lib/side-drawer/side-drawer.template.d.ts +1 -3
  153. package/lib/slider/definition.d.ts +1 -3
  154. package/lib/slider/slider.form-associated.d.ts +3 -2
  155. package/lib/slider/slider.template.d.ts +3 -4
  156. package/lib/split-button/definition.d.ts +1 -1
  157. package/lib/split-button/split-button.d.ts +2 -2
  158. package/lib/split-button/split-button.template.d.ts +2 -3
  159. package/lib/switch/definition.d.ts +1 -3
  160. package/lib/switch/switch.form-associated.d.ts +3 -2
  161. package/lib/switch/switch.template.d.ts +1 -3
  162. package/lib/tab/definition.d.ts +1 -3
  163. package/lib/tab/tab.d.ts +2 -2
  164. package/lib/tab/tab.template.d.ts +2 -2
  165. package/lib/tab-panel/definition.d.ts +1 -3
  166. package/lib/tab-panel/tab-panel.d.ts +2 -2
  167. package/lib/tab-panel/tab-panel.template.d.ts +1 -1
  168. package/lib/tabs/definition.d.ts +1 -3
  169. package/lib/tabs/tabs.d.ts +3 -7
  170. package/lib/tabs/tabs.template.d.ts +1 -1
  171. package/lib/tag/definition.d.ts +1 -4
  172. package/lib/tag/tag.d.ts +2 -2
  173. package/lib/tag/tag.template.d.ts +2 -3
  174. package/lib/tag-group/definition.d.ts +1 -3
  175. package/lib/tag-group/tag-group.d.ts +2 -2
  176. package/lib/tag-group/tag-group.template.d.ts +1 -3
  177. package/lib/text-anchor/definition.d.ts +1 -3
  178. package/lib/text-anchor/text-anchor.d.ts +4 -3
  179. package/lib/text-anchor/text-anchor.template.d.ts +2 -3
  180. package/lib/text-area/definition.d.ts +1 -3
  181. package/lib/text-area/text-area.d.ts +1 -1
  182. package/lib/text-area/{text-field.form-associated.d.ts → text-area.form-associated.d.ts} +3 -2
  183. package/lib/text-area/text-area.template.d.ts +2 -3
  184. package/lib/text-field/definition.d.ts +1 -3
  185. package/lib/text-field/text-field.form-associated.d.ts +3 -2
  186. package/lib/text-field/text-field.template.d.ts +2 -3
  187. package/lib/time-picker/definition.d.ts +1 -3
  188. package/lib/time-picker/time-picker.form-associated.d.ts +3 -2
  189. package/lib/time-picker/time-picker.template.d.ts +2 -2
  190. package/lib/toggletip/definition.d.ts +1 -3
  191. package/lib/toggletip/toggletip.d.ts +2 -2
  192. package/lib/toggletip/toggletip.template.d.ts +2 -3
  193. package/lib/tooltip/definition.d.ts +1 -3
  194. package/lib/tooltip/tooltip.d.ts +2 -2
  195. package/lib/tooltip/tooltip.template.d.ts +2 -3
  196. package/lib/tree-item/definition.d.ts +1 -3
  197. package/lib/tree-item/tree-item.d.ts +11 -2
  198. package/lib/tree-item/tree-item.template.d.ts +3 -3
  199. package/lib/tree-view/definition.d.ts +1 -3
  200. package/lib/tree-view/tree-view.d.ts +16 -2
  201. package/lib/tree-view/tree-view.template.d.ts +1 -1
  202. package/lib/video-player/definition.d.ts +1 -3
  203. package/lib/video-player/video-player.d.ts +2 -2
  204. package/lib/video-player/video-player.template.d.ts +1 -3
  205. package/listbox/index.cjs +37 -39
  206. package/listbox/index.js +37 -39
  207. package/menu/index.cjs +1 -1
  208. package/menu/index.js +1 -1
  209. package/nav/index.cjs +1 -1
  210. package/nav/index.js +1 -1
  211. package/nav-disclosure/index.cjs +1 -1
  212. package/nav-disclosure/index.js +1 -1
  213. package/nav-item/index.cjs +1 -1
  214. package/nav-item/index.js +1 -1
  215. package/note/index.cjs +1 -1
  216. package/note/index.js +1 -1
  217. package/number-field/index.cjs +1 -1
  218. package/number-field/index.js +1 -1
  219. package/option/index.cjs +1 -1
  220. package/option/index.js +1 -1
  221. package/package.json +1 -1
  222. package/pagination/index.cjs +1 -1
  223. package/pagination/index.js +1 -1
  224. package/popup/index.cjs +1 -1
  225. package/popup/index.js +1 -1
  226. package/progress/index.cjs +1 -1
  227. package/progress/index.js +1 -1
  228. package/progress-ring/index.cjs +1 -1
  229. package/progress-ring/index.js +1 -1
  230. package/radio/index.cjs +1 -1
  231. package/radio/index.js +1 -1
  232. package/radio-group/index.cjs +1 -1
  233. package/radio-group/index.js +1 -1
  234. package/range-slider/index.cjs +1 -1
  235. package/range-slider/index.js +1 -1
  236. package/searchable-select/index.cjs +1 -1
  237. package/searchable-select/index.js +1 -1
  238. package/select/index.cjs +1 -1
  239. package/select/index.js +1 -1
  240. package/selectable-box/index.cjs +1 -1
  241. package/selectable-box/index.js +1 -1
  242. package/shared/affix.cjs +10 -10
  243. package/shared/affix.js +2 -2
  244. package/shared/anchor.cjs +59 -0
  245. package/shared/anchor.js +57 -0
  246. package/shared/anchored.cjs +6 -6
  247. package/shared/anchored.js +2 -2
  248. package/shared/apply-mixins.cjs +15 -17
  249. package/shared/apply-mixins.js +15 -17
  250. package/shared/apply-mixins2.cjs +25 -0
  251. package/shared/apply-mixins2.js +23 -0
  252. package/shared/applyMixinsWithObservables.cjs +4 -4
  253. package/shared/applyMixinsWithObservables.js +2 -2
  254. package/shared/aria-global.cjs +86 -67
  255. package/shared/aria-global.js +86 -67
  256. package/shared/aria-global2.cjs +68 -86
  257. package/shared/aria-global2.js +68 -86
  258. package/shared/base-progress.cjs +69 -63
  259. package/shared/base-progress.js +69 -63
  260. package/shared/breadcrumb-item.cjs +6 -58
  261. package/shared/breadcrumb-item.js +3 -55
  262. package/shared/button.cjs +177 -0
  263. package/shared/button.js +175 -0
  264. package/shared/calendar-event.cjs +9 -9
  265. package/shared/calendar-event.js +2 -2
  266. package/shared/children.cjs +2 -2
  267. package/shared/children.js +1 -1
  268. package/shared/date-picker/date-picker-base.form-associated.d.ts +3 -2
  269. package/shared/date-picker/date-picker-base.template.d.ts +2 -3
  270. package/shared/definition.cjs +25 -24
  271. package/shared/definition.js +16 -14
  272. package/shared/definition10.cjs +14 -12
  273. package/shared/definition10.js +14 -11
  274. package/shared/definition11.cjs +52 -248
  275. package/shared/definition11.js +24 -218
  276. package/shared/definition12.cjs +18 -14
  277. package/shared/definition12.js +17 -12
  278. package/shared/definition13.cjs +19 -19
  279. package/shared/definition13.js +10 -9
  280. package/shared/definition14.cjs +35 -38
  281. package/shared/definition14.js +15 -17
  282. package/shared/definition15.cjs +27 -26
  283. package/shared/definition15.js +16 -14
  284. package/shared/definition16.cjs +480 -612
  285. package/shared/definition16.js +473 -604
  286. package/shared/definition17.cjs +933 -1113
  287. package/shared/definition17.js +911 -1090
  288. package/shared/definition18.cjs +16 -20
  289. package/shared/definition18.js +19 -22
  290. package/shared/definition19.cjs +26 -30
  291. package/shared/definition19.js +21 -24
  292. package/shared/definition2.cjs +19 -22
  293. package/shared/definition2.js +20 -22
  294. package/shared/definition20.cjs +50 -52
  295. package/shared/definition20.js +34 -35
  296. package/shared/definition21.cjs +43 -47
  297. package/shared/definition21.js +19 -22
  298. package/shared/definition22.cjs +15 -13
  299. package/shared/definition22.js +14 -11
  300. package/shared/definition23.cjs +21 -20
  301. package/shared/definition23.js +14 -12
  302. package/shared/definition24.cjs +21 -173
  303. package/shared/definition24.js +18 -169
  304. package/shared/definition25.cjs +26 -28
  305. package/shared/definition25.js +18 -19
  306. package/shared/definition26.cjs +16 -14
  307. package/shared/definition26.js +14 -11
  308. package/shared/definition27.cjs +264 -12
  309. package/shared/definition27.js +261 -10
  310. package/shared/definition28.cjs +19 -17
  311. package/shared/definition28.js +15 -12
  312. package/shared/definition29.cjs +142 -68
  313. package/shared/definition29.js +101 -29
  314. package/shared/definition3.cjs +20 -16
  315. package/shared/definition3.js +16 -11
  316. package/shared/definition30.cjs +98 -76
  317. package/shared/definition30.js +97 -74
  318. package/shared/definition31.cjs +24 -97
  319. package/shared/definition31.js +25 -97
  320. package/shared/definition32.cjs +9 -25
  321. package/shared/definition32.js +8 -23
  322. package/shared/definition33.cjs +52 -14
  323. package/shared/definition33.js +51 -12
  324. package/shared/definition34.cjs +639 -34
  325. package/shared/definition34.js +636 -30
  326. package/shared/definition35.cjs +203 -596
  327. package/shared/definition35.js +197 -591
  328. package/shared/definition36.cjs +197 -233
  329. package/shared/definition36.js +192 -226
  330. package/shared/definition37.cjs +79 -206
  331. package/shared/definition37.js +75 -202
  332. package/shared/definition38.cjs +50 -56
  333. package/shared/definition38.js +48 -52
  334. package/shared/definition39.cjs +259 -56
  335. package/shared/definition39.js +258 -54
  336. package/shared/definition4.cjs +32 -35
  337. package/shared/definition4.js +19 -21
  338. package/shared/definition40.cjs +156 -225
  339. package/shared/definition40.js +152 -221
  340. package/shared/definition41.cjs +626 -36
  341. package/shared/definition41.js +625 -34
  342. package/shared/definition42.cjs +974 -487
  343. package/shared/definition42.js +971 -482
  344. package/shared/definition43.cjs +725 -932
  345. package/shared/definition43.js +713 -918
  346. package/shared/definition44.cjs +115 -734
  347. package/shared/definition44.js +113 -731
  348. package/shared/definition45.cjs +92 -116
  349. package/shared/definition45.js +92 -115
  350. package/shared/definition46.cjs +468 -89
  351. package/shared/definition46.js +465 -86
  352. package/shared/definition47.cjs +118 -470
  353. package/shared/definition47.js +115 -465
  354. package/shared/definition48.cjs +113 -120
  355. package/shared/definition48.js +111 -117
  356. package/shared/definition49.cjs +16 -134
  357. package/shared/definition49.js +15 -132
  358. package/shared/definition5.cjs +47 -49
  359. package/shared/definition5.js +18 -19
  360. package/shared/definition50.cjs +111 -15
  361. package/shared/definition50.js +109 -12
  362. package/shared/definition51.cjs +862 -84
  363. package/shared/definition51.js +858 -79
  364. package/shared/definition52.cjs +30 -873
  365. package/shared/definition52.js +28 -870
  366. package/shared/definition53.cjs +125 -28
  367. package/shared/definition53.js +123 -25
  368. package/shared/definition54.cjs +267 -107
  369. package/shared/definition54.js +261 -100
  370. package/shared/definition55.cjs +63 -278
  371. package/shared/definition55.js +61 -275
  372. package/shared/definition56.cjs +867 -76
  373. package/shared/definition56.js +866 -74
  374. package/shared/definition57.cjs +107 -826
  375. package/shared/definition57.js +105 -823
  376. package/shared/definition58.cjs +73 -100
  377. package/shared/definition58.js +69 -95
  378. package/shared/definition59.cjs +180 -106
  379. package/shared/definition59.js +174 -101
  380. package/shared/definition6.cjs +22 -21
  381. package/shared/definition6.js +14 -12
  382. package/shared/definition60.cjs +272 -70
  383. package/shared/definition60.js +272 -69
  384. package/shared/definition61.cjs +66154 -271
  385. package/shared/definition61.js +66153 -269
  386. package/shared/definition62.cjs +38 -66173
  387. package/shared/definition62.js +35 -66170
  388. package/shared/definition63.cjs +2153 -27
  389. package/shared/definition63.js +2150 -25
  390. package/shared/definition7.cjs +18 -15
  391. package/shared/definition7.js +13 -10
  392. package/shared/definition8.cjs +25 -27
  393. package/shared/definition8.js +16 -17
  394. package/shared/definition9.cjs +21 -21
  395. package/shared/definition9.js +18 -17
  396. package/shared/design-system/createRegisterFunction.d.ts +2 -0
  397. package/shared/design-system/defineVividComponent.d.ts +15 -0
  398. package/shared/{localization.js → direction.js} +11 -11
  399. package/shared/dom.cjs +0 -13
  400. package/shared/dom.js +1 -13
  401. package/shared/form-associated.cjs +422 -457
  402. package/shared/form-associated.js +422 -457
  403. package/shared/form-associated2.cjs +383 -0
  404. package/shared/form-associated2.js +381 -0
  405. package/shared/form-elements.cjs +15 -42
  406. package/shared/form-elements.js +2 -29
  407. package/shared/foundation/anchor/anchor.d.ts +1 -0
  408. package/shared/foundation/button/button.d.ts +3 -2
  409. package/shared/foundation/button/button.template.d.ts +2 -4
  410. package/shared/foundation/form-associated/form-associated.d.ts +51 -0
  411. package/shared/foundation/listbox/listbox.d.ts +22 -0
  412. package/shared/foundation/progress/base-progress.d.ts +9 -0
  413. package/shared/foundation/utilities/apply-mixins.d.ts +1 -0
  414. package/shared/foundation/vivid-element/vivid-element.d.ts +3 -0
  415. package/shared/index.cjs +7 -5097
  416. package/shared/index.js +7 -5079
  417. package/shared/key-codes.cjs +10 -0
  418. package/shared/key-codes.js +6 -1
  419. package/shared/key-codes2.cjs +1463 -6
  420. package/shared/key-codes2.js +1461 -4
  421. package/shared/listbox.cjs +427 -1195
  422. package/shared/listbox.js +411 -1176
  423. package/shared/listbox2.cjs +1267 -0
  424. package/shared/listbox2.js +1264 -0
  425. package/shared/localized.cjs +2 -2
  426. package/shared/localized.js +1 -1
  427. package/shared/numbers.cjs +12 -0
  428. package/shared/numbers.js +12 -1
  429. package/shared/patterns/affix.d.ts +2 -2
  430. package/shared/patterns/chevron.d.ts +2 -2
  431. package/shared/patterns/form-elements/form-elements.d.ts +2 -2
  432. package/shared/presentationDate.cjs +49 -49
  433. package/shared/presentationDate.js +6 -6
  434. package/shared/ref.cjs +2 -2
  435. package/shared/ref.js +1 -1
  436. package/shared/repeat.cjs +22 -22
  437. package/shared/repeat.js +1 -1
  438. package/shared/slider.template.cjs +5 -5
  439. package/shared/slider.template.js +2 -2
  440. package/shared/slotted.cjs +4 -4
  441. package/shared/slotted.js +1 -1
  442. package/shared/strings.cjs +0 -26
  443. package/shared/strings.js +1 -25
  444. package/shared/strings2.cjs +37 -0
  445. package/shared/strings2.js +33 -0
  446. package/shared/text-anchor.cjs +7 -89
  447. package/shared/text-anchor.js +4 -86
  448. package/shared/text-anchor.template.cjs +2 -2
  449. package/shared/text-anchor.template.js +1 -1
  450. package/shared/text-field2.cjs +28 -28
  451. package/shared/text-field2.js +5 -5
  452. package/shared/vivid-element.cjs +2616 -0
  453. package/shared/vivid-element.js +2595 -0
  454. package/side-drawer/index.cjs +1 -1
  455. package/side-drawer/index.js +1 -1
  456. package/slider/index.cjs +1 -1
  457. package/slider/index.js +1 -1
  458. package/split-button/index.cjs +1 -1
  459. package/split-button/index.js +1 -1
  460. package/styles/core/all.css +40 -1
  461. package/styles/core/theme.css +40 -1
  462. package/styles/core/typography.css +1 -1
  463. package/styles/tokens/theme-dark.css +25 -4
  464. package/styles/tokens/theme-light.css +25 -4
  465. package/styles/tokens/vivid-2-compat.css +1 -1
  466. package/switch/index.cjs +1 -1
  467. package/switch/index.js +1 -1
  468. package/tab/index.cjs +1 -1
  469. package/tab/index.js +1 -1
  470. package/tab-panel/index.cjs +1 -1
  471. package/tab-panel/index.js +1 -1
  472. package/tabs/index.cjs +1 -1
  473. package/tabs/index.js +1 -1
  474. package/tag/index.cjs +1 -1
  475. package/tag/index.js +1 -1
  476. package/tag-group/index.cjs +1 -1
  477. package/tag-group/index.js +1 -1
  478. package/text-anchor/index.cjs +10 -7
  479. package/text-anchor/index.js +10 -7
  480. package/text-area/index.cjs +1 -1
  481. package/text-area/index.js +1 -1
  482. package/text-field/index.cjs +1 -1
  483. package/text-field/index.js +1 -1
  484. package/time-picker/index.cjs +1 -1
  485. package/time-picker/index.js +1 -1
  486. package/toggletip/index.cjs +1 -1
  487. package/toggletip/index.js +1 -1
  488. package/tooltip/index.cjs +1 -1
  489. package/tooltip/index.js +1 -1
  490. package/tree-item/index.cjs +1 -1
  491. package/tree-item/index.js +1 -1
  492. package/tree-view/index.cjs +1 -1
  493. package/tree-view/index.js +1 -1
  494. package/video-player/index.cjs +1 -1
  495. package/video-player/index.js +1 -1
  496. package/vivid.api.json +2846 -7860
  497. package/shared/definition64.cjs +0 -2175
  498. package/shared/definition64.js +0 -2170
  499. package/shared/design-system/index.d.ts +0 -3
  500. package/shared/icon.cjs +0 -261
  501. package/shared/icon.js +0 -258
  502. package/shared/index2.cjs +0 -11
  503. package/shared/index2.js +0 -9
  504. package/shared/radio.cjs +0 -126
  505. package/shared/radio.js +0 -124
  506. package/shared/select.options.cjs +0 -12
  507. package/shared/select.options.js +0 -10
  508. package/shared/start-end.cjs +0 -52
  509. package/shared/start-end.js +0 -50
  510. package/shared/tree-item.cjs +0 -154
  511. package/shared/tree-item.js +0 -151
  512. package/shared/{localization.cjs → direction.cjs} +9 -9
package/shared/definition31.cjs CHANGED
@@ -1,109 +1,36 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index.cjs');
4
3
  const definition = require('./definition27.cjs');
4
+ const vividElement = require('./vivid-element.cjs');
5
5
  const affix = require('./affix.cjs');
6
6
  const applyMixins = require('./apply-mixins.cjs');
7
- const icon = require('./icon.cjs');
8
- const ref = require('./ref.cjs');
9
- const classNames = require('./class-names.cjs');
7
+ const textAnchor = require('./text-anchor.cjs');
8
+ const textAnchor_template = require('./text-anchor.template.cjs');
10
9
 
11
- const styles = ".control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-disclosure-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-disclosure-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-disclosure-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-disclosure-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-disclosure-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-disclosure-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-disclosure-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-disclosure-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,: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: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:where([aria-current=true][open])) .control,:host(:not([aria-current=true])) .control{--focus-stroke-gap-color: transparent}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
10
+ const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,: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: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
12
11
 
13
- var __defProp = Object.defineProperty;
14
- var __decorateClass = (decorators, target, key, kind) => {
15
- var result = void 0 ;
16
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
17
- if (decorator = decorators[i])
18
- result = (decorator(target, key, result) ) || result;
19
- if (result) __defProp(target, key, result);
20
- return result;
21
- };
22
- class NavDisclosure extends index.FoundationElement {
23
- constructor() {
24
- super(...arguments);
25
- this.open = false;
26
- this.ariaCurrent = null;
27
- this.#onToggle = () => {
28
- this.open = this.details.open;
29
- this.$emit("toggle", void 0, { bubbles: false });
30
- };
12
+ class NavItem extends textAnchor.TextAnchor {
13
+ getBodyTemplate() {
14
+ return vividElement.html`<slot name="meta"></slot>`;
31
15
  }
32
- /**
33
- * @internal
34
- */
35
- connectedCallback() {
36
- super.connectedCallback();
37
- this.details.addEventListener("toggle", this.#onToggle);
38
- this.details.open = this.open;
39
- }
40
- /**
41
- * @internal
42
- */
43
- disconnectedCallback() {
44
- super.disconnectedCallback();
45
- this.details.removeEventListener("toggle", this.#onToggle);
46
- }
47
- #onToggle;
48
16
  }
49
- __decorateClass([
50
- index.attr
51
- ], NavDisclosure.prototype, "label");
52
- __decorateClass([
53
- index.attr
54
- ], NavDisclosure.prototype, "appearance");
55
- __decorateClass([
56
- index.attr
57
- ], NavDisclosure.prototype, "connotation");
58
- __decorateClass([
59
- index.attr({ mode: "boolean" })
60
- ], NavDisclosure.prototype, "open");
61
- __decorateClass([
62
- index.attr({ attribute: "aria-current" })
63
- ], NavDisclosure.prototype, "ariaCurrent");
64
- applyMixins.applyMixins(NavDisclosure, affix.AffixIcon);
17
+ applyMixins.applyMixins(NavItem, affix.AffixIcon);
65
18
 
66
- function getAriaCurrent(ariaCurrent, open) {
67
- return ariaCurrent && !open;
68
- }
69
- const getClasses = ({ appearance, connotation }) => classNames.classNames(
70
- "control",
71
- [`appearance-${appearance}`, Boolean(appearance)],
72
- [`connotation-${connotation}`, Boolean(connotation)]
73
- );
74
- const NavDisclosureTemplate = (context) => {
75
- const affixIconTemplate = affix.affixIconTemplateFactory(context);
76
- const iconTag = context.tagFor(icon.Icon);
77
- return index.html`<details class="base" ${ref.ref("details")} ?open=${(x) => x.open}>
78
- <summary class="${getClasses}"
79
- role="button"
80
- aria-controls="disclosure-content"
81
- aria-expanded="${(x) => x.open}"
82
- ?aria-current=${(x) => getAriaCurrent(x.ariaCurrent, x.open)}>
83
- ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
84
- ${(x) => x.label}
85
- <slot name="meta"></slot>
86
- <${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-solid" : "chevron-down-solid"}
87
- aria-hidden="true"></${iconTag}>
88
- </summary>
89
- <div class="content" id="disclosure-content">
90
- <slot></slot>
91
- </div>
92
- </details>
93
- `;
94
- };
19
+ const NavItemTemplate = (context) => vividElement.html` ${textAnchor_template.textAnchorTemplate(context)} `;
95
20
 
96
- const navDisclosureDefinition = NavDisclosure.compose({
97
- baseName: "nav-disclosure",
98
- template: NavDisclosureTemplate,
99
- styles
100
- });
101
- const navDisclosureRegistries = [
102
- navDisclosureDefinition(),
103
- ...definition.iconRegistries
104
- ];
105
- const registerNavDisclosure = index.registerFactory(navDisclosureRegistries);
21
+ const navItemDefinition = vividElement.defineVividComponent(
22
+ "nav-item",
23
+ NavItem,
24
+ NavItemTemplate,
25
+ [definition.iconDefinition],
26
+ {
27
+ styles,
28
+ shadowOptions: {
29
+ delegatesFocus: true
30
+ }
31
+ }
32
+ );
33
+ const registerNavItem = vividElement.createRegisterFunction(navItemDefinition);
106
34
 
107
- exports.navDisclosureDefinition = navDisclosureDefinition;
108
- exports.navDisclosureRegistries = navDisclosureRegistries;
109
- exports.registerNavDisclosure = registerNavDisclosure;
35
+ exports.navItemDefinition = navItemDefinition;
36
+ exports.registerNavItem = registerNavItem;
package/shared/definition31.js CHANGED
@@ -1,105 +1,33 @@
1
- import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
2
- import { a as iconRegistries } from './definition27.js';
3
- import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
1
+ import { i as iconDefinition } from './definition27.js';
2
+ import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
3
+ import { A as AffixIcon } from './affix.js';
4
4
  import { a as applyMixins } from './apply-mixins.js';
5
- import { I as Icon } from './icon.js';
6
- import { r as ref } from './ref.js';
7
- import { c as classNames } from './class-names.js';
5
+ import { T as TextAnchor } from './text-anchor.js';
6
+ import { t as textAnchorTemplate } from './text-anchor.template.js';
8
7
 
9
- const styles = ".control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-disclosure-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-disclosure-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-disclosure-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-disclosure-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-disclosure-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-disclosure-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-disclosure-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-disclosure-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,: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: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:where([aria-current=true][open])) .control,:host(:not([aria-current=true])) .control{--focus-stroke-gap-color: transparent}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
8
+ const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,: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: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
10
9
 
11
- var __defProp = Object.defineProperty;
12
- var __decorateClass = (decorators, target, key, kind) => {
13
- var result = void 0 ;
14
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
- if (decorator = decorators[i])
16
- result = (decorator(target, key, result) ) || result;
17
- if (result) __defProp(target, key, result);
18
- return result;
19
- };
20
- class NavDisclosure extends FoundationElement {
21
- constructor() {
22
- super(...arguments);
23
- this.open = false;
24
- this.ariaCurrent = null;
25
- this.#onToggle = () => {
26
- this.open = this.details.open;
27
- this.$emit("toggle", void 0, { bubbles: false });
28
- };
10
+ class NavItem extends TextAnchor {
11
+ getBodyTemplate() {
12
+ return html`<slot name="meta"></slot>`;
29
13
  }
30
- /**
31
- * @internal
32
- */
33
- connectedCallback() {
34
- super.connectedCallback();
35
- this.details.addEventListener("toggle", this.#onToggle);
36
- this.details.open = this.open;
37
- }
38
- /**
39
- * @internal
40
- */
41
- disconnectedCallback() {
42
- super.disconnectedCallback();
43
- this.details.removeEventListener("toggle", this.#onToggle);
44
- }
45
- #onToggle;
46
14
  }
47
- __decorateClass([
48
- attr
49
- ], NavDisclosure.prototype, "label");
50
- __decorateClass([
51
- attr
52
- ], NavDisclosure.prototype, "appearance");
53
- __decorateClass([
54
- attr
55
- ], NavDisclosure.prototype, "connotation");
56
- __decorateClass([
57
- attr({ mode: "boolean" })
58
- ], NavDisclosure.prototype, "open");
59
- __decorateClass([
60
- attr({ attribute: "aria-current" })
61
- ], NavDisclosure.prototype, "ariaCurrent");
62
- applyMixins(NavDisclosure, AffixIcon);
15
+ applyMixins(NavItem, AffixIcon);
63
16
 
64
- function getAriaCurrent(ariaCurrent, open) {
65
- return ariaCurrent && !open;
66
- }
67
- const getClasses = ({ appearance, connotation }) => classNames(
68
- "control",
69
- [`appearance-${appearance}`, Boolean(appearance)],
70
- [`connotation-${connotation}`, Boolean(connotation)]
71
- );
72
- const NavDisclosureTemplate = (context) => {
73
- const affixIconTemplate = affixIconTemplateFactory(context);
74
- const iconTag = context.tagFor(Icon);
75
- return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
76
- <summary class="${getClasses}"
77
- role="button"
78
- aria-controls="disclosure-content"
79
- aria-expanded="${(x) => x.open}"
80
- ?aria-current=${(x) => getAriaCurrent(x.ariaCurrent, x.open)}>
81
- ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
82
- ${(x) => x.label}
83
- <slot name="meta"></slot>
84
- <${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-solid" : "chevron-down-solid"}
85
- aria-hidden="true"></${iconTag}>
86
- </summary>
87
- <div class="content" id="disclosure-content">
88
- <slot></slot>
89
- </div>
90
- </details>
91
- `;
92
- };
17
+ const NavItemTemplate = (context) => html` ${textAnchorTemplate(context)} `;
93
18
 
94
- const navDisclosureDefinition = NavDisclosure.compose({
95
- baseName: "nav-disclosure",
96
- template: NavDisclosureTemplate,
97
- styles
98
- });
99
- const navDisclosureRegistries = [
100
- navDisclosureDefinition(),
101
- ...iconRegistries
102
- ];
103
- const registerNavDisclosure = registerFactory(navDisclosureRegistries);
19
+ const navItemDefinition = defineVividComponent(
20
+ "nav-item",
21
+ NavItem,
22
+ NavItemTemplate,
23
+ [iconDefinition],
24
+ {
25
+ styles,
26
+ shadowOptions: {
27
+ delegatesFocus: true
28
+ }
29
+ }
30
+ );
31
+ const registerNavItem = createRegisterFunction(navItemDefinition);
104
32
 
105
- export { navDisclosureRegistries as a, navDisclosureDefinition as n, registerNavDisclosure as r };
33
+ export { navItemDefinition as n, registerNavItem as r };
package/shared/definition32.cjs CHANGED
@@ -1,34 +1,18 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index.cjs');
4
- const definition = require('./definition27.cjs');
5
- const affix = require('./affix.cjs');
6
- const textAnchor = require('./text-anchor.cjs');
7
- const applyMixins = require('./apply-mixins.cjs');
8
- const textAnchor_template = require('./text-anchor.template.cjs');
3
+ const vividElement = require('./vivid-element.cjs');
9
4
 
10
- const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,: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: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
5
+ const styles = "nav{display:flex;flex-direction:column;gap:4px}";
11
6
 
12
- class NavItem extends textAnchor.TextAnchor {
13
- getBodyTemplate() {
14
- return index.html`<slot name="meta"></slot>`;
15
- }
7
+ class Nav extends vividElement.VividElement {
16
8
  }
17
- applyMixins.applyMixins(NavItem, affix.AffixIcon);
18
9
 
19
- const NavItemTemplate = (context, definition) => index.html` ${textAnchor_template.textAnchorTemplate(context)} `;
10
+ const NavTemplate = vividElement.html` <nav><slot></slot></nav> `;
20
11
 
21
- const navItemDefinition = NavItem.compose({
22
- baseName: "nav-item",
23
- template: NavItemTemplate,
24
- styles,
25
- shadowOptions: {
26
- delegatesFocus: true
27
- }
12
+ const navDefinition = vividElement.defineVividComponent("nav", Nav, NavTemplate, [], {
13
+ styles
28
14
  });
29
- const navItemRegistries = [navItemDefinition(), ...definition.iconRegistries];
30
- const registerNavItem = index.registerFactory(navItemRegistries);
15
+ const registerNav = vividElement.createRegisterFunction(navDefinition);
31
16
 
32
- exports.navItemDefinition = navItemDefinition;
33
- exports.navItemRegistries = navItemRegistries;
34
- exports.registerNavItem = registerNavItem;
17
+ exports.navDefinition = navDefinition;
18
+ exports.registerNav = registerNav;
package/shared/definition32.js CHANGED
@@ -1,30 +1,15 @@
1
- import { h as html, r as registerFactory } from './index.js';
2
- import { a as iconRegistries } from './definition27.js';
3
- import { A as AffixIcon } from './affix.js';
4
- import { T as TextAnchor } from './text-anchor.js';
5
- import { a as applyMixins } from './apply-mixins.js';
6
- import { t as textAnchorTemplate } from './text-anchor.template.js';
1
+ import { V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
7
2
 
8
- const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control[aria-current]{background-color:var(--_connotation-color-primary)}}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,: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:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(.hover,: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: transparent}.control:where([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
3
+ const styles = "nav{display:flex;flex-direction:column;gap:4px}";
9
4
 
10
- class NavItem extends TextAnchor {
11
- getBodyTemplate() {
12
- return html`<slot name="meta"></slot>`;
13
- }
5
+ class Nav extends VividElement {
14
6
  }
15
- applyMixins(NavItem, AffixIcon);
16
7
 
17
- const NavItemTemplate = (context, definition) => html` ${textAnchorTemplate(context)} `;
8
+ const NavTemplate = html` <nav><slot></slot></nav> `;
18
9
 
19
- const navItemDefinition = NavItem.compose({
20
- baseName: "nav-item",
21
- template: NavItemTemplate,
22
- styles,
23
- shadowOptions: {
24
- delegatesFocus: true
25
- }
10
+ const navDefinition = defineVividComponent("nav", Nav, NavTemplate, [], {
11
+ styles
26
12
  });
27
- const navItemRegistries = [navItemDefinition(), ...iconRegistries];
28
- const registerNavItem = registerFactory(navItemRegistries);
13
+ const registerNav = createRegisterFunction(navDefinition);
29
14
 
30
- export { navItemRegistries as a, navItemDefinition as n, registerNavItem as r };
15
+ export { navDefinition as n, registerNav as r };
package/shared/definition33.cjs CHANGED
@@ -1,22 +1,60 @@
1
1
  'use strict';
2
2
 
3
- const index = require('./index.cjs');
3
+ const definition = require('./definition27.cjs');
4
+ const vividElement = require('./vivid-element.cjs');
5
+ const applyMixins = require('./apply-mixins2.cjs');
6
+ const affix = require('./affix.cjs');
7
+ const when = require('./when.cjs');
8
+ const classNames = require('./class-names.cjs');
4
9
 
5
- const styles = "nav{display:flex;flex-direction:column;gap:4px}";
10
+ const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
6
11
 
7
- class Nav extends index.FoundationElement {
12
+ var __defProp = Object.defineProperty;
13
+ var __decorateClass = (decorators, target, key, kind) => {
14
+ var result = void 0 ;
15
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
16
+ if (decorator = decorators[i])
17
+ result = (decorator(target, key, result) ) || result;
18
+ if (result) __defProp(target, key, result);
19
+ return result;
20
+ };
21
+ class Note extends vividElement.VividElement {
8
22
  }
23
+ __decorateClass([
24
+ vividElement.attr
25
+ ], Note.prototype, "headline");
26
+ __decorateClass([
27
+ vividElement.attr
28
+ ], Note.prototype, "connotation");
29
+ applyMixins.applyMixins(Note, affix.AffixIcon);
9
30
 
10
- const NavTemplate = () => index.html` <nav><slot></slot></nav> `;
31
+ const getClasses = ({ connotation }) => classNames.classNames("base", `connotation-${connotation}`);
32
+ function getHeaderTemplate() {
33
+ return vividElement.html`<div class="headline">${(x) => x.headline}</div>`;
34
+ }
35
+ const NoteTemplate = (context) => {
36
+ const affixIconTemplate = affix.affixIconTemplateFactory(context);
37
+ return vividElement.html`
38
+ <div class="${getClasses}">
39
+ ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
40
+ <div class="text">
41
+ ${when.when((x) => x.headline, getHeaderTemplate())}
42
+ <slot class="message"></slot>
43
+ </div>
44
+ </div>
45
+ `;
46
+ };
11
47
 
12
- const navDefinition = Nav.compose({
13
- baseName: "nav",
14
- template: NavTemplate,
15
- styles
16
- });
17
- const navRegistries = [navDefinition()];
18
- const registerNav = index.registerFactory(navRegistries);
48
+ const noteDefinition = vividElement.defineVividComponent(
49
+ "note",
50
+ Note,
51
+ NoteTemplate,
52
+ [definition.iconDefinition],
53
+ {
54
+ styles
55
+ }
56
+ );
57
+ const registerNote = vividElement.createRegisterFunction(noteDefinition);
19
58
 
20
- exports.navDefinition = navDefinition;
21
- exports.navRegistries = navRegistries;
22
- exports.registerNav = registerNav;
59
+ exports.noteDefinition = noteDefinition;
60
+ exports.registerNote = registerNote;
package/shared/definition33.js CHANGED
@@ -1,18 +1,57 @@
1
- import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
1
+ import { i as iconDefinition } from './definition27.js';
2
+ import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
3
+ import { a as applyMixins } from './apply-mixins2.js';
4
+ import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
5
+ import { w as when } from './when.js';
6
+ import { c as classNames } from './class-names.js';
2
7
 
3
- const styles = "nav{display:flex;flex-direction:column;gap:4px}";
8
+ const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
4
9
 
5
- class Nav extends FoundationElement {
10
+ var __defProp = Object.defineProperty;
11
+ var __decorateClass = (decorators, target, key, kind) => {
12
+ var result = void 0 ;
13
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
14
+ if (decorator = decorators[i])
15
+ result = (decorator(target, key, result) ) || result;
16
+ if (result) __defProp(target, key, result);
17
+ return result;
18
+ };
19
+ class Note extends VividElement {
6
20
  }
21
+ __decorateClass([
22
+ attr
23
+ ], Note.prototype, "headline");
24
+ __decorateClass([
25
+ attr
26
+ ], Note.prototype, "connotation");
27
+ applyMixins(Note, AffixIcon);
7
28
 
8
- const NavTemplate = () => html` <nav><slot></slot></nav> `;
29
+ const getClasses = ({ connotation }) => classNames("base", `connotation-${connotation}`);
30
+ function getHeaderTemplate() {
31
+ return html`<div class="headline">${(x) => x.headline}</div>`;
32
+ }
33
+ const NoteTemplate = (context) => {
34
+ const affixIconTemplate = affixIconTemplateFactory(context);
35
+ return html`
36
+ <div class="${getClasses}">
37
+ ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
38
+ <div class="text">
39
+ ${when((x) => x.headline, getHeaderTemplate())}
40
+ <slot class="message"></slot>
41
+ </div>
42
+ </div>
43
+ `;
44
+ };
9
45
 
10
- const navDefinition = Nav.compose({
11
- baseName: "nav",
12
- template: NavTemplate,
13
- styles
14
- });
15
- const navRegistries = [navDefinition()];
16
- const registerNav = registerFactory(navRegistries);
46
+ const noteDefinition = defineVividComponent(
47
+ "note",
48
+ Note,
49
+ NoteTemplate,
50
+ [iconDefinition],
51
+ {
52
+ styles
53
+ }
54
+ );
55
+ const registerNote = createRegisterFunction(noteDefinition);
17
56
 
18
- export { navRegistries as a, navDefinition as n, registerNav as r };
57
+ export { noteDefinition as n, registerNote as r };