@momentum-design/components 0.134.19 → 0.134.21

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 (379) hide show
  1. package/dist/browser/index.js +1 -1
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/accordion/accordion.component.d.ts +15 -5
  4. package/dist/components/accordionbutton/accordionbutton.component.d.ts +14 -26
  5. package/dist/components/accordionbutton/accordionbutton.component.js +0 -22
  6. package/dist/components/accordiongroup/accordiongroup.component.d.ts +12 -16
  7. package/dist/components/accordiongroup/accordiongroup.component.js +0 -14
  8. package/dist/components/alertchip/alertchip.component.d.ts +15 -11
  9. package/dist/components/alertchip/alertchip.component.js +0 -7
  10. package/dist/components/animation/animation.component.d.ts +14 -6
  11. package/dist/components/animation/animation.component.js +0 -5
  12. package/dist/components/announcementdialog/announcementdialog.component.d.ts +18 -25
  13. package/dist/components/announcementdialog/announcementdialog.component.js +1 -20
  14. package/dist/components/appheader/appheader.component.d.ts +13 -12
  15. package/dist/components/appheader/appheader.component.js +0 -9
  16. package/dist/components/avatar/avatar.component.d.ts +14 -34
  17. package/dist/components/avatar/avatar.component.js +1 -31
  18. package/dist/components/avatarbutton/avatarbutton.component.d.ts +15 -14
  19. package/dist/components/avatarbutton/avatarbutton.component.js +1 -10
  20. package/dist/components/badge/badge.component.d.ts +16 -20
  21. package/dist/components/badge/badge.component.js +1 -17
  22. package/dist/components/banner/banner.component.d.ts +17 -17
  23. package/dist/components/banner/banner.component.js +1 -13
  24. package/dist/components/brandvisual/brandvisual.component.d.ts +15 -12
  25. package/dist/components/brandvisual/brandvisual.component.js +0 -10
  26. package/dist/components/bullet/bullet.component.d.ts +15 -16
  27. package/dist/components/bullet/bullet.component.js +0 -15
  28. package/dist/components/button/button.component.d.ts +21 -52
  29. package/dist/components/button/button.component.js +1 -47
  30. package/dist/components/buttongroup/buttongroup.component.d.ts +17 -20
  31. package/dist/components/buttongroup/buttongroup.component.js +0 -17
  32. package/dist/components/buttonlink/buttonlink.component.d.ts +19 -16
  33. package/dist/components/buttonlink/buttonlink.component.js +1 -11
  34. package/dist/components/buttonsimple/buttonsimple.component.d.ts +16 -25
  35. package/dist/components/buttonsimple/buttonsimple.component.js +0 -22
  36. package/dist/components/calendar/calendar.component.d.ts +17 -11
  37. package/dist/components/calendar/calendar.component.js +0 -8
  38. package/dist/components/card/card.component.d.ts +18 -17
  39. package/dist/components/card/card.component.js +0 -13
  40. package/dist/components/cardbutton/cardbutton.component.d.ts +20 -14
  41. package/dist/components/cardbutton/cardbutton.component.js +0 -9
  42. package/dist/components/cardcheckbox/cardcheckbox.component.d.ts +20 -19
  43. package/dist/components/cardcheckbox/cardcheckbox.component.js +0 -14
  44. package/dist/components/cardradio/cardradio.component.d.ts +20 -20
  45. package/dist/components/cardradio/cardradio.component.js +0 -15
  46. package/dist/components/checkbox/checkbox.component.d.ts +22 -26
  47. package/dist/components/checkbox/checkbox.component.js +1 -22
  48. package/dist/components/chip/chip.component.d.ts +20 -13
  49. package/dist/components/chip/chip.component.js +0 -9
  50. package/dist/components/coachmark/coachmark.component.d.ts +22 -22
  51. package/dist/components/coachmark/coachmark.component.js +1 -18
  52. package/dist/components/combobox/combobox.component.d.ts +27 -37
  53. package/dist/components/combobox/combobox.component.js +1 -32
  54. package/dist/components/controltypeprovider/controltypeprovider.component.d.ts +19 -11
  55. package/dist/components/controltypeprovider/controltypeprovider.component.js +0 -10
  56. package/dist/components/datepicker/datepicker.component.d.ts +20 -14
  57. package/dist/components/datepicker/datepicker.component.js +0 -9
  58. package/dist/components/dialog/dialog.component.d.ts +25 -40
  59. package/dist/components/dialog/dialog.component.js +1 -35
  60. package/dist/components/divider/divider.component.d.ts +23 -25
  61. package/dist/components/divider/divider.component.js +0 -23
  62. package/dist/components/filterchip/filterchip.component.d.ts +20 -9
  63. package/dist/components/filterchip/filterchip.component.js +0 -5
  64. package/dist/components/formfieldgroup/formfieldgroup.component.d.ts +18 -19
  65. package/dist/components/formfieldgroup/formfieldgroup.component.js +0 -15
  66. package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts +16 -8
  67. package/dist/components/formfieldwrapper/formfieldwrapper.component.js +0 -4
  68. package/dist/components/icon/icon.component.d.ts +16 -41
  69. package/dist/components/icon/icon.component.js +0 -39
  70. package/dist/components/iconprovider/iconprovider.component.d.ts +14 -24
  71. package/dist/components/iconprovider/iconprovider.component.js +0 -23
  72. package/dist/components/illustration/illustration.component.d.ts +16 -32
  73. package/dist/components/illustration/illustration.component.js +0 -30
  74. package/dist/components/illustrationprovider/illustrationprovider.component.d.ts +14 -24
  75. package/dist/components/illustrationprovider/illustrationprovider.component.js +0 -23
  76. package/dist/components/input/input.component.d.ts +21 -16
  77. package/dist/components/input/input.component.js +0 -11
  78. package/dist/components/inputchip/inputchip.component.d.ts +19 -13
  79. package/dist/components/inputchip/inputchip.component.js +0 -7
  80. package/dist/components/link/link.component.d.ts +18 -12
  81. package/dist/components/link/link.component.js +1 -9
  82. package/dist/components/linkbutton/linkbutton.component.d.ts +19 -12
  83. package/dist/components/linkbutton/linkbutton.component.js +1 -8
  84. package/dist/components/linksimple/linksimple.component.d.ts +17 -10
  85. package/dist/components/linksimple/linksimple.component.js +0 -7
  86. package/dist/components/list/list.component.d.ts +17 -7
  87. package/dist/components/list/list.component.js +0 -5
  88. package/dist/components/listbox/listbox.component.d.ts +21 -16
  89. package/dist/components/listbox/listbox.component.js +1 -11
  90. package/dist/components/listheader/listheader.component.d.ts +14 -6
  91. package/dist/components/listheader/listheader.component.js +0 -3
  92. package/dist/components/listitem/listitem.component.d.ts +20 -18
  93. package/dist/components/listitem/listitem.component.js +0 -13
  94. package/dist/components/marker/marker.component.d.ts +15 -16
  95. package/dist/components/marker/marker.component.js +0 -15
  96. package/dist/components/menubar/menubar.component.d.ts +12 -19
  97. package/dist/components/menubar/menubar.component.js +0 -19
  98. package/dist/components/menuitem/menuitem.component.d.ts +18 -19
  99. package/dist/components/menuitem/menuitem.component.js +1 -15
  100. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +19 -30
  101. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +1 -25
  102. package/dist/components/menuitemradio/menuitemradio.component.d.ts +18 -31
  103. package/dist/components/menuitemradio/menuitemradio.component.js +1 -26
  104. package/dist/components/menupopover/menupopover.component.d.ts +16 -38
  105. package/dist/components/menupopover/menupopover.component.js +0 -34
  106. package/dist/components/menusection/menusection.component.d.ts +16 -12
  107. package/dist/components/menusection/menusection.component.js +0 -8
  108. package/dist/components/navmenuitem/navmenuitem.component.d.ts +16 -15
  109. package/dist/components/navmenuitem/navmenuitem.component.js +0 -11
  110. package/dist/components/optgroup/optgroup.component.d.ts +17 -7
  111. package/dist/components/optgroup/optgroup.component.js +1 -3
  112. package/dist/components/option/option.component.d.ts +17 -19
  113. package/dist/components/option/option.component.js +1 -15
  114. package/dist/components/password/password.component.d.ts +18 -17
  115. package/dist/components/password/password.component.js +0 -11
  116. package/dist/components/popover/popover.component.d.ts +20 -52
  117. package/dist/components/popover/popover.component.js +1 -47
  118. package/dist/components/presence/presence.component.d.ts +17 -10
  119. package/dist/components/presence/presence.component.js +1 -7
  120. package/dist/components/progressbar/progressbar.component.d.ts +17 -13
  121. package/dist/components/progressbar/progressbar.component.js +0 -9
  122. package/dist/components/progressspinner/progressspinner.component.d.ts +14 -19
  123. package/dist/components/progressspinner/progressspinner.component.js +0 -17
  124. package/dist/components/radio/radio.component.d.ts +19 -41
  125. package/dist/components/radio/radio.component.js +1 -37
  126. package/dist/components/radiogroup/radiogroup.component.d.ts +12 -5
  127. package/dist/components/radiogroup/radiogroup.component.js +0 -4
  128. package/dist/components/responsivesettingsprovider/responsivesettingsprovider.component.d.ts +11 -29
  129. package/dist/components/responsivesettingsprovider/responsivesettingsprovider.component.js +0 -29
  130. package/dist/components/screenreaderannouncer/screenreaderannouncer.component.d.ts +12 -51
  131. package/dist/components/screenreaderannouncer/screenreaderannouncer.component.js +0 -51
  132. package/dist/components/searchfield/searchfield.component.d.ts +16 -24
  133. package/dist/components/searchfield/searchfield.component.js +0 -20
  134. package/dist/components/searchpopover/searchpopover.component.d.ts +16 -20
  135. package/dist/components/searchpopover/searchpopover.component.js +0 -16
  136. package/dist/components/select/select.component.d.ts +23 -19
  137. package/dist/components/select/select.component.js +1 -14
  138. package/dist/components/selectlistbox/selectlistbox.component.d.ts +12 -8
  139. package/dist/components/selectlistbox/selectlistbox.component.js +0 -7
  140. package/dist/components/sidenavigation/sidenavigation.component.d.ts +21 -41
  141. package/dist/components/sidenavigation/sidenavigation.component.js +1 -35
  142. package/dist/components/skeleton/skeleton.component.d.ts +14 -15
  143. package/dist/components/skeleton/skeleton.component.js +0 -13
  144. package/dist/components/slider/slider.component.d.ts +17 -15
  145. package/dist/components/slider/slider.component.js +0 -11
  146. package/dist/components/spatialnavigationprovider/spatialnavigationprovider.component.d.ts +15 -215
  147. package/dist/components/spatialnavigationprovider/spatialnavigationprovider.component.js +1 -215
  148. package/dist/components/spinner/spinner.component.d.ts +15 -27
  149. package/dist/components/spinner/spinner.component.js +0 -25
  150. package/dist/components/staticcheckbox/staticcheckbox.component.d.ts +16 -21
  151. package/dist/components/staticcheckbox/staticcheckbox.component.js +0 -17
  152. package/dist/components/staticchip/staticchip.component.d.ts +17 -8
  153. package/dist/components/staticchip/staticchip.component.js +0 -5
  154. package/dist/components/staticradio/staticradio.component.d.ts +15 -19
  155. package/dist/components/staticradio/staticradio.component.js +0 -16
  156. package/dist/components/statictoggle/statictoggle.component.d.ts +16 -21
  157. package/dist/components/statictoggle/statictoggle.component.js +0 -17
  158. package/dist/components/stepper/stepper.component.d.ts +13 -5
  159. package/dist/components/stepper/stepper.component.js +0 -3
  160. package/dist/components/stepperconnector/stepperconnector.component.d.ts +13 -6
  161. package/dist/components/stepperconnector/stepperconnector.component.js +0 -4
  162. package/dist/components/stepperitem/stepperitem.component.d.ts +16 -14
  163. package/dist/components/stepperitem/stepperitem.component.js +1 -10
  164. package/dist/components/tab/tab.component.d.ts +20 -23
  165. package/dist/components/tab/tab.component.js +1 -16
  166. package/dist/components/tablist/tablist.component.d.ts +18 -30
  167. package/dist/components/tablist/tablist.component.js +0 -24
  168. package/dist/components/text/text.component.d.ts +12 -13
  169. package/dist/components/text/text.component.js +0 -12
  170. package/dist/components/textarea/textarea.component.d.ts +17 -39
  171. package/dist/components/textarea/textarea.component.js +0 -34
  172. package/dist/components/themeprovider/themeprovider.component.d.ts +13 -27
  173. package/dist/components/themeprovider/themeprovider.component.js +0 -25
  174. package/dist/components/timepicker/timepicker.component.d.ts +17 -19
  175. package/dist/components/timepicker/timepicker.component.js +0 -14
  176. package/dist/components/toast/toast.component.d.ts +20 -12
  177. package/dist/components/toast/toast.component.js +1 -7
  178. package/dist/components/toggle/toggle.component.d.ts +18 -24
  179. package/dist/components/toggle/toggle.component.js +1 -21
  180. package/dist/components/toggletip/toggletip.component.d.ts +18 -28
  181. package/dist/components/toggletip/toggletip.component.js +1 -24
  182. package/dist/components/tooltip/tooltip.component.d.ts +16 -16
  183. package/dist/components/tooltip/tooltip.component.js +0 -13
  184. package/dist/components/typewriter/typewriter.component.d.ts +18 -34
  185. package/dist/components/typewriter/typewriter.component.js +1 -31
  186. package/dist/components/verticaltablist/verticaltablist.component.d.ts +17 -30
  187. package/dist/components/verticaltablist/verticaltablist.component.js +0 -26
  188. package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +16 -58
  189. package/dist/components/virtualizedlist/virtualizedlist.component.js +0 -55
  190. package/dist/custom-elements.json +190 -190
  191. package/dist/react/accordion/index.d.ts +15 -5
  192. package/dist/react/accordionbutton/index.d.ts +14 -26
  193. package/dist/react/accordionbutton/index.js +0 -22
  194. package/dist/react/accordiongroup/index.d.ts +12 -16
  195. package/dist/react/accordiongroup/index.js +0 -14
  196. package/dist/react/alertchip/index.d.ts +15 -11
  197. package/dist/react/alertchip/index.js +0 -7
  198. package/dist/react/animation/index.d.ts +14 -6
  199. package/dist/react/animation/index.js +0 -5
  200. package/dist/react/announcementdialog/index.d.ts +18 -25
  201. package/dist/react/announcementdialog/index.js +1 -20
  202. package/dist/react/appheader/index.d.ts +13 -12
  203. package/dist/react/appheader/index.js +0 -9
  204. package/dist/react/avatar/index.d.ts +14 -34
  205. package/dist/react/avatar/index.js +1 -31
  206. package/dist/react/avatarbutton/index.d.ts +15 -14
  207. package/dist/react/avatarbutton/index.js +1 -10
  208. package/dist/react/badge/index.d.ts +16 -20
  209. package/dist/react/badge/index.js +1 -17
  210. package/dist/react/banner/index.d.ts +17 -17
  211. package/dist/react/banner/index.js +1 -13
  212. package/dist/react/brandvisual/index.d.ts +15 -12
  213. package/dist/react/brandvisual/index.js +0 -10
  214. package/dist/react/bullet/index.d.ts +15 -16
  215. package/dist/react/bullet/index.js +0 -15
  216. package/dist/react/button/index.d.ts +21 -52
  217. package/dist/react/button/index.js +1 -47
  218. package/dist/react/buttongroup/index.d.ts +17 -20
  219. package/dist/react/buttongroup/index.js +0 -17
  220. package/dist/react/buttonlink/index.d.ts +19 -16
  221. package/dist/react/buttonlink/index.js +1 -11
  222. package/dist/react/buttonsimple/index.d.ts +16 -25
  223. package/dist/react/buttonsimple/index.js +0 -22
  224. package/dist/react/calendar/index.d.ts +17 -11
  225. package/dist/react/calendar/index.js +0 -8
  226. package/dist/react/card/index.d.ts +18 -17
  227. package/dist/react/card/index.js +0 -13
  228. package/dist/react/cardbutton/index.d.ts +20 -14
  229. package/dist/react/cardbutton/index.js +0 -9
  230. package/dist/react/cardcheckbox/index.d.ts +20 -19
  231. package/dist/react/cardcheckbox/index.js +0 -14
  232. package/dist/react/cardradio/index.d.ts +20 -20
  233. package/dist/react/cardradio/index.js +0 -15
  234. package/dist/react/checkbox/index.d.ts +22 -26
  235. package/dist/react/checkbox/index.js +1 -22
  236. package/dist/react/chip/index.d.ts +20 -13
  237. package/dist/react/chip/index.js +0 -9
  238. package/dist/react/coachmark/index.d.ts +22 -22
  239. package/dist/react/coachmark/index.js +1 -18
  240. package/dist/react/combobox/index.d.ts +27 -37
  241. package/dist/react/combobox/index.js +1 -32
  242. package/dist/react/controltypeprovider/index.d.ts +19 -11
  243. package/dist/react/controltypeprovider/index.js +0 -10
  244. package/dist/react/datepicker/index.d.ts +20 -14
  245. package/dist/react/datepicker/index.js +0 -9
  246. package/dist/react/dialog/index.d.ts +25 -40
  247. package/dist/react/dialog/index.js +1 -35
  248. package/dist/react/divider/index.d.ts +23 -25
  249. package/dist/react/divider/index.js +0 -23
  250. package/dist/react/filterchip/index.d.ts +20 -9
  251. package/dist/react/filterchip/index.js +0 -5
  252. package/dist/react/formfieldgroup/index.d.ts +18 -19
  253. package/dist/react/formfieldgroup/index.js +0 -15
  254. package/dist/react/formfieldwrapper/index.d.ts +16 -8
  255. package/dist/react/formfieldwrapper/index.js +0 -4
  256. package/dist/react/icon/index.d.ts +16 -41
  257. package/dist/react/icon/index.js +0 -39
  258. package/dist/react/iconprovider/index.d.ts +14 -24
  259. package/dist/react/iconprovider/index.js +0 -23
  260. package/dist/react/illustration/index.d.ts +16 -32
  261. package/dist/react/illustration/index.js +0 -30
  262. package/dist/react/illustrationprovider/index.d.ts +14 -24
  263. package/dist/react/illustrationprovider/index.js +0 -23
  264. package/dist/react/input/index.d.ts +21 -16
  265. package/dist/react/input/index.js +0 -11
  266. package/dist/react/inputchip/index.d.ts +19 -13
  267. package/dist/react/inputchip/index.js +0 -7
  268. package/dist/react/link/index.d.ts +18 -12
  269. package/dist/react/link/index.js +1 -9
  270. package/dist/react/linkbutton/index.d.ts +19 -12
  271. package/dist/react/linkbutton/index.js +1 -8
  272. package/dist/react/linksimple/index.d.ts +17 -10
  273. package/dist/react/linksimple/index.js +0 -7
  274. package/dist/react/list/index.d.ts +17 -7
  275. package/dist/react/list/index.js +0 -5
  276. package/dist/react/listbox/index.d.ts +21 -16
  277. package/dist/react/listbox/index.js +1 -11
  278. package/dist/react/listheader/index.d.ts +14 -6
  279. package/dist/react/listheader/index.js +0 -3
  280. package/dist/react/listitem/index.d.ts +20 -18
  281. package/dist/react/listitem/index.js +0 -13
  282. package/dist/react/marker/index.d.ts +15 -16
  283. package/dist/react/marker/index.js +0 -15
  284. package/dist/react/menubar/index.d.ts +12 -19
  285. package/dist/react/menubar/index.js +0 -19
  286. package/dist/react/menuitem/index.d.ts +18 -19
  287. package/dist/react/menuitem/index.js +1 -15
  288. package/dist/react/menuitemcheckbox/index.d.ts +19 -30
  289. package/dist/react/menuitemcheckbox/index.js +1 -25
  290. package/dist/react/menuitemradio/index.d.ts +18 -31
  291. package/dist/react/menuitemradio/index.js +1 -26
  292. package/dist/react/menupopover/index.d.ts +16 -38
  293. package/dist/react/menupopover/index.js +0 -34
  294. package/dist/react/menusection/index.d.ts +16 -12
  295. package/dist/react/menusection/index.js +0 -8
  296. package/dist/react/navmenuitem/index.d.ts +16 -15
  297. package/dist/react/navmenuitem/index.js +0 -11
  298. package/dist/react/optgroup/index.d.ts +17 -7
  299. package/dist/react/optgroup/index.js +1 -3
  300. package/dist/react/option/index.d.ts +17 -19
  301. package/dist/react/option/index.js +1 -15
  302. package/dist/react/password/index.d.ts +18 -17
  303. package/dist/react/password/index.js +0 -11
  304. package/dist/react/popover/index.d.ts +20 -52
  305. package/dist/react/popover/index.js +1 -47
  306. package/dist/react/presence/index.d.ts +17 -10
  307. package/dist/react/presence/index.js +1 -7
  308. package/dist/react/progressbar/index.d.ts +17 -13
  309. package/dist/react/progressbar/index.js +0 -9
  310. package/dist/react/progressspinner/index.d.ts +14 -19
  311. package/dist/react/progressspinner/index.js +0 -17
  312. package/dist/react/radio/index.d.ts +19 -41
  313. package/dist/react/radio/index.js +1 -37
  314. package/dist/react/radiogroup/index.d.ts +12 -5
  315. package/dist/react/radiogroup/index.js +0 -4
  316. package/dist/react/responsivesettingsprovider/index.d.ts +11 -29
  317. package/dist/react/responsivesettingsprovider/index.js +0 -29
  318. package/dist/react/screenreaderannouncer/index.d.ts +12 -51
  319. package/dist/react/screenreaderannouncer/index.js +0 -51
  320. package/dist/react/searchfield/index.d.ts +16 -24
  321. package/dist/react/searchfield/index.js +0 -20
  322. package/dist/react/searchpopover/index.d.ts +16 -20
  323. package/dist/react/searchpopover/index.js +0 -16
  324. package/dist/react/select/index.d.ts +23 -19
  325. package/dist/react/select/index.js +1 -14
  326. package/dist/react/selectlistbox/index.d.ts +12 -8
  327. package/dist/react/selectlistbox/index.js +0 -7
  328. package/dist/react/sidenavigation/index.d.ts +21 -41
  329. package/dist/react/sidenavigation/index.js +1 -35
  330. package/dist/react/skeleton/index.d.ts +14 -15
  331. package/dist/react/skeleton/index.js +0 -13
  332. package/dist/react/slider/index.d.ts +17 -15
  333. package/dist/react/slider/index.js +0 -11
  334. package/dist/react/spatialnavigationprovider/index.d.ts +15 -215
  335. package/dist/react/spatialnavigationprovider/index.js +1 -214
  336. package/dist/react/spinner/index.d.ts +15 -27
  337. package/dist/react/spinner/index.js +0 -25
  338. package/dist/react/staticcheckbox/index.d.ts +16 -21
  339. package/dist/react/staticcheckbox/index.js +0 -17
  340. package/dist/react/staticchip/index.d.ts +17 -8
  341. package/dist/react/staticchip/index.js +0 -5
  342. package/dist/react/staticradio/index.d.ts +15 -19
  343. package/dist/react/staticradio/index.js +0 -16
  344. package/dist/react/statictoggle/index.d.ts +16 -21
  345. package/dist/react/statictoggle/index.js +0 -17
  346. package/dist/react/stepper/index.d.ts +13 -5
  347. package/dist/react/stepper/index.js +0 -3
  348. package/dist/react/stepperconnector/index.d.ts +13 -6
  349. package/dist/react/stepperconnector/index.js +0 -4
  350. package/dist/react/stepperitem/index.d.ts +16 -14
  351. package/dist/react/stepperitem/index.js +1 -10
  352. package/dist/react/tab/index.d.ts +20 -23
  353. package/dist/react/tab/index.js +1 -16
  354. package/dist/react/tablist/index.d.ts +18 -30
  355. package/dist/react/tablist/index.js +0 -24
  356. package/dist/react/text/index.d.ts +12 -13
  357. package/dist/react/text/index.js +0 -12
  358. package/dist/react/textarea/index.d.ts +17 -39
  359. package/dist/react/textarea/index.js +0 -34
  360. package/dist/react/themeprovider/index.d.ts +13 -27
  361. package/dist/react/themeprovider/index.js +0 -25
  362. package/dist/react/timepicker/index.d.ts +17 -19
  363. package/dist/react/timepicker/index.js +0 -14
  364. package/dist/react/toast/index.d.ts +20 -12
  365. package/dist/react/toast/index.js +1 -7
  366. package/dist/react/toggle/index.d.ts +18 -24
  367. package/dist/react/toggle/index.js +1 -21
  368. package/dist/react/toggletip/index.d.ts +18 -28
  369. package/dist/react/toggletip/index.js +1 -24
  370. package/dist/react/tooltip/index.d.ts +16 -16
  371. package/dist/react/tooltip/index.js +0 -13
  372. package/dist/react/typewriter/index.d.ts +18 -34
  373. package/dist/react/typewriter/index.js +1 -31
  374. package/dist/react/verticaltablist/index.d.ts +17 -30
  375. package/dist/react/verticaltablist/index.js +0 -26
  376. package/dist/react/virtualizedlist/index.d.ts +16 -58
  377. package/dist/react/virtualizedlist/index.js +0 -55
  378. package/dist/utils/dom.js +1 -1
  379. package/package.json +1 -1
@@ -173,8 +173,8 @@
173
173
  "attribute": "disabled",
174
174
  "reflects": true,
175
175
  "inheritedFrom": {
176
- "name": "DisabledMixin",
177
- "module": "utils/mixins/DisabledMixin.js"
176
+ "name": "AccordionButton",
177
+ "module": "components/accordionbutton/accordionbutton.component.js"
178
178
  }
179
179
  },
180
180
  {
@@ -493,8 +493,8 @@
493
493
  "default": "undefined",
494
494
  "fieldName": "disabled",
495
495
  "inheritedFrom": {
496
- "name": "DisabledMixin",
497
- "module": "src/utils/mixins/DisabledMixin.ts"
496
+ "name": "AccordionButton",
497
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
498
498
  }
499
499
  },
500
500
  {
@@ -613,7 +613,7 @@
613
613
  "declarations": [
614
614
  {
615
615
  "kind": "class",
616
- "description": "An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.\nThe entire header is clickable to toggle the visibility of the body content.\n\n## Header contains\n- Optional prefix icon\n- Header text (default H3, customizable via `data-aria-level`)\n- Expand/collapse arrow icon (visual indicator)\n\n## Body contains\n- Default slot for any content\n\nThe accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.\nAn accordion button can be disabled, which prevents the header from being clickable.\n\n## When to use\n- Use `mdc-accordionbutton` for simple clickable headers without additional controls.\n- Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.\n\n## Accessibility\n- Adjust `data-aria-level` based on heading hierarchy in your page.\n- Note: Screen readers may lose focus when toggling if accordion button is expanded by default.",
616
+ "description": "",
617
617
  "name": "AccordionButton",
618
618
  "cssProperties": [
619
619
  {
@@ -979,7 +979,7 @@
979
979
  "module": "/src/models"
980
980
  },
981
981
  "tagName": "mdc-accordionbutton",
982
- "jsDoc": "/**\n * An accordion button is a vertically stacked component with a clickable header and expandable/collapsible body section.\n * The entire header is clickable to toggle the visibility of the body content.\n *\n * ## Header contains\n * - Optional prefix icon\n * - Header text (default H3, customizable via `data-aria-level`)\n * - Expand/collapse arrow icon (visual indicator)\n *\n * ## Body contains\n * - Default slot for any content\n *\n * The accordion button supports different border styles through the `variant` attribute and different spacing through the `size` attribute.\n * An accordion button can be disabled, which prevents the header from being clickable.\n *\n * ## When to use\n * - Use `mdc-accordionbutton` for simple clickable headers without additional controls.\n * - Use `mdc-accordion` instead if you need extra controls (chips, badges, icons) in the header.\n *\n * ## Accessibility\n * - Adjust `data-aria-level` based on heading hierarchy in your page.\n * - Note: Screen readers may lose focus when toggling if accordion button is expanded by default.\n *\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover background color of the accordion button header.\n * @cssproperty --mdc-accordionbutton-active-color - The active background color of the accordion button header.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart leading-header-text - The leading header text of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart toggle-icon - The expand/collapse toggle icon of the accordion button.\n */",
982
+ "jsDoc": "/**\n * @tagname mdc-accordionbutton\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot default - The default slot contains the body section of the accordion. User can place anything inside this body slot.\n *\n * @event shown - (React: onShown) This event is triggered when the accordion button is toggled (expanded or collapsed).\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover background color of the accordion button header.\n * @cssproperty --mdc-accordionbutton-active-color - The active background color of the accordion button header.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled text color of the accordion button.\n *\n * @csspart body-section - The body section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart header-section - The header section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart leading-header-text - The leading header text of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart toggle-icon - The expand/collapse toggle icon of the accordion button.\n */",
983
983
  "customElement": true
984
984
  }
985
985
  ],
@@ -1000,7 +1000,7 @@
1000
1000
  "declarations": [
1001
1001
  {
1002
1002
  "kind": "class",
1003
- "description": "An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.\nIt controls the visual styling, spacing, and expansion behavior of all child accordions.\n\nThe group applies consistent `variant` and `size` attributes to all children automatically.\nBy default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.\n\n## Accepted children\n- Use `mdc-accordionbutton` children for simple clickable headers.\n- Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.\n- Other elements in the slot are ignored.\n\n## Accessibility\n- Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.",
1003
+ "description": "",
1004
1004
  "name": "AccordionGroup",
1005
1005
  "cssProperties": [
1006
1006
  {
@@ -1130,7 +1130,7 @@
1130
1130
  "module": "/src/models"
1131
1131
  },
1132
1132
  "tagName": "mdc-accordiongroup",
1133
- "jsDoc": "/**\n * An accordion group is a container that manages multiple accordion or accordionbutton components as a unified set.\n * It controls the visual styling, spacing, and expansion behavior of all child accordions.\n *\n * The group applies consistent `variant` and `size` attributes to all children automatically.\n * By default, expanding one accordion collapses others (`allow-multiple` is false). Set `allow-multiple` to true to allow multiple expanded items.\n *\n * ## Accepted children\n * - Use `mdc-accordionbutton` children for simple clickable headers.\n * - Use `mdc-accordion` children when you need additional controls (chips, badges, icons) in the headers.\n * - Other elements in the slot are ignored.\n *\n * ## Accessibility\n * - Note: Screen readers may lose focus when toggling if the first accordion is expanded by default.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-items-border-color - The border color applied to all child accordion items and their separators.\n */",
1133
+ "jsDoc": "/**\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-items-border-color - The border color applied to all child accordion items and their separators.\n */",
1134
1134
  "customElement": true
1135
1135
  }
1136
1136
  ],
@@ -1151,7 +1151,7 @@
1151
1151
  "declarations": [
1152
1152
  {
1153
1153
  "kind": "class",
1154
- "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - error, informational, neutral, success and warning.\n\nThis component is built by extending Buttonsimple.",
1154
+ "description": "",
1155
1155
  "name": "AlertChip",
1156
1156
  "cssProperties": [
1157
1157
  {
@@ -1781,7 +1781,7 @@
1781
1781
  "module": "/src/components/buttonsimple/buttonsimple.component"
1782
1782
  },
1783
1783
  "tagName": "mdc-alertchip",
1784
- "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - error, informational, neutral, success and warning.\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n *\n * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.\n * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.\n */",
1784
+ "jsDoc": "/**\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n *\n * @event click - (React: onClick) This event is dispatched when the alertchip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the alertchip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the alertchip.\n * @event focus - (React: onFocus) This event is dispatched when the alertchip receives focus.\n */",
1785
1785
  "customElement": true,
1786
1786
  "slots": [
1787
1787
  {
@@ -1812,7 +1812,7 @@
1812
1812
  "declarations": [
1813
1813
  {
1814
1814
  "kind": "class",
1815
- "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
1815
+ "description": "",
1816
1816
  "name": "Animation",
1817
1817
  "members": [
1818
1818
  {
@@ -2058,7 +2058,7 @@
2058
2058
  "module": "/src/models"
2059
2059
  },
2060
2060
  "tagName": "mdc-animation",
2061
- "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
2061
+ "jsDoc": "/**\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
2062
2062
  "customElement": true
2063
2063
  }
2064
2064
  ],
@@ -2079,7 +2079,7 @@
2079
2079
  "declarations": [
2080
2080
  {
2081
2081
  "kind": "class",
2082
- "description": "AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\nIt can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\nThe dialog is available in 4 sizes: medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\n## Accessibility\n- You have to be explicitly set the following attributes:\n * The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.",
2082
+ "description": "",
2083
2083
  "name": "AnnouncementDialog",
2084
2084
  "cssProperties": [
2085
2085
  {
@@ -2974,7 +2974,7 @@
2974
2974
  "module": "/src/components/dialog/dialog.component"
2975
2975
  },
2976
2976
  "tagName": "mdc-announcementdialog",
2977
- "jsDoc": "/**\n * AnnouncementDialog component is a modal dialog that can be used to display announcements, extending the existing Dialog component.\n * It can be used to create custom dialogs where a illustration, content and footer actions are provided by the consumer.\n * The dialog is available in 4 sizes: medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * ## Accessibility\n * - You have to be explicitly set the following attributes:\n * * The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * * Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * @dependency mdc-illustration\n * @dependency mdc-text\n *\n * @tagname mdc-announcementdialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The main body container that holds the illustration and content sections\n * @csspart illustration-container - The container for the illustration section\n * @csspart content-container - The container for the content section\n * @csspart header-text - The header text\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot illustration-container - Slot for the illustration container section\n * @slot content-container - Slot for the content (header, description, etc) section\n * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
2977
+ "jsDoc": "/**\n * @tagname mdc-announcementdialog\n *\n * @dependency mdc-illustration\n * @dependency mdc-text\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-announcementdialog-illustration-background-color - background color of the illustration section\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n *\n * @csspart body - The main body container that holds the illustration and content sections\n * @csspart illustration-container - The container for the illustration section\n * @csspart content-container - The container for the content section\n * @csspart header-text - The header text\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot illustration-container - Slot for the illustration container section\n * @slot content-container - Slot for the content (header, description, etc) section\n * @slot description-container - Slot for the description in the content (below header) - pass in Text, Links etc as needed.\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
2978
2978
  "customElement": true
2979
2979
  }
2980
2980
  ],
@@ -2995,7 +2995,7 @@
2995
2995
  "declarations": [
2996
2996
  {
2997
2997
  "kind": "class",
2998
- "description": "The `mdc-appheader` component provides a structured and accessible app header layout with three sections: leading, center, and trailing.\n\n## Layout sections\n- **Leading** - Typically holds brand logo, brand name, or menu icon\n- **Center** - Can contain search bar, icons, navigation links, or action controls\n- **Trailing** - Generally includes profile avatar, icons, settings, or additional action controls\n\nEach section automatically handles flex alignment: leading aligns left, center aligns center, trailing aligns right.",
2998
+ "description": "",
2999
2999
  "name": "Appheader",
3000
3000
  "cssProperties": [
3001
3001
  {
@@ -3041,7 +3041,7 @@
3041
3041
  "module": "/src/models"
3042
3042
  },
3043
3043
  "tagName": "mdc-appheader",
3044
- "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout with three sections: leading, center, and trailing.\n *\n * ## Layout sections\n * - **Leading** - Typically holds brand logo, brand name, or menu icon\n * - **Center** - Can contain search bar, icons, navigation links, or action controls\n * - **Trailing** - Generally includes profile avatar, icons, settings, or additional action controls\n *\n * Each section automatically handles flex alignment: leading aligns left, center aligns center, trailing aligns right.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Content for the leading section (left-aligned).\n * @slot center - Content for the center section (center-aligned).\n * @slot trailing - Content for the trailing section (right-aligned).\n *\n * @cssproperty --mdc-appheader-height - Height of the app header. Default is 4rem (64px).\n *\n * @csspart container - The main header container.\n * @csspart leading-section - The leading section wrapper (left side).\n * @csspart center-section - The center section wrapper (middle).\n * @csspart trailing-section - The trailing section wrapper (right side).\n */",
3044
+ "jsDoc": "/**\n * @tagname mdc-appheader\n *\n * @slot leading - Content for the leading section (left-aligned).\n * @slot center - Content for the center section (center-aligned).\n * @slot trailing - Content for the trailing section (right-aligned).\n *\n * @cssproperty --mdc-appheader-height - Height of the app header. Default is 4rem (64px).\n *\n * @csspart container - The main header container.\n * @csspart leading-section - The leading section wrapper (left side).\n * @csspart center-section - The center section wrapper (middle).\n * @csspart trailing-section - The trailing section wrapper (right side).\n */",
3045
3045
  "customElement": true
3046
3046
  }
3047
3047
  ],
@@ -3062,7 +3062,7 @@
3062
3062
  "declarations": [
3063
3063
  {
3064
3064
  "kind": "class",
3065
- "description": "The `mdc-avatar` component represents a person or a space. It displays as a photo, initials, icon, or counter.\n\n## Display Priority\n\nWhen multiple attributes are provided, the component determines what to display based on this priority:\n1. **Photo** (`src`) - Takes highest priority\n - While loading: Shows `initials` as placeholder if provided (instant), otherwise shows icon (requires loading)\n - After loading: Shows the photo\n - On error: Placeholder remains visible (initials or icon)\n2. **Icon** (`icon-name`) - Takes priority if no `src` is provided\n - Shows custom icon if `icon-name` is set (requires icon library to load)\n - **Note:** If both `icon-name` and `initials` are provided (without `src`), icon takes precedence and initials are ignored.\n This means users may see a delay while the icon loads, even though initials render instantly.\n - Defaults to `user-regular` icon if no other content is available\n3. **Initials** (`initials`) - Displayed only if no `src` or `icon-name` is provided\n - Shows first two characters, converted to uppercase\n - Renders instantly (no loading required)\n4. **Counter** (`counter`) - Displayed only if none of the above are provided\n - Shows numeric value (max 99+)\n - Negative values display as 0\n\n## Behavior\n- Non-interactive and non-focusable component (use `mdc-avatarbutton` for clickable avatars)\n- Shows loading indicator overlay when `is-typing` is true (displays on top of existing content)\n- Presence indicator hidden when counter is set or when typing\n\n## Accessibility\n- By default, the component is hidden from assistive technologies (`aria-hidden=\"true\"`).\n- Consumers can override this attribute `aria-hidden=\"false\"` if needed.",
3065
+ "description": "",
3066
3066
  "name": "Avatar",
3067
3067
  "cssProperties": [
3068
3068
  {
@@ -3219,7 +3219,7 @@
3219
3219
  "module": "/src/models"
3220
3220
  },
3221
3221
  "tagName": "mdc-avatar",
3222
- "jsDoc": "/**\n * The `mdc-avatar` component represents a person or a space. It displays as a photo, initials, icon, or counter.\n *\n * ## Display Priority\n *\n * When multiple attributes are provided, the component determines what to display based on this priority:\n * 1. **Photo** (`src`) - Takes highest priority\n * - While loading: Shows `initials` as placeholder if provided (instant), otherwise shows icon (requires loading)\n * - After loading: Shows the photo\n * - On error: Placeholder remains visible (initials or icon)\n * 2. **Icon** (`icon-name`) - Takes priority if no `src` is provided\n * - Shows custom icon if `icon-name` is set (requires icon library to load)\n * - **Note:** If both `icon-name` and `initials` are provided (without `src`), icon takes precedence and initials are ignored.\n * This means users may see a delay while the icon loads, even though initials render instantly.\n * - Defaults to `user-regular` icon if no other content is available\n * 3. **Initials** (`initials`) - Displayed only if no `src` or `icon-name` is provided\n * - Shows first two characters, converted to uppercase\n * - Renders instantly (no loading required)\n * 4. **Counter** (`counter`) - Displayed only if none of the above are provided\n * - Shows numeric value (max 99+)\n * - Negative values display as 0\n *\n * ## Behavior\n * - Non-interactive and non-focusable component (use `mdc-avatarbutton` for clickable avatars)\n * - Shows loading indicator overlay when `is-typing` is true (displays on top of existing content)\n * - Presence indicator hidden when counter is set or when typing\n *\n * ## Accessibility\n * - By default, the component is hidden from assistive technologies (`aria-hidden=\"true\"`).\n * - Consumers can override this attribute `aria-hidden=\"false\"` if needed.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
3222
+ "jsDoc": "/**\n * @tagname mdc-avatar\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
3223
3223
  "customElement": true,
3224
3224
  "attributes": [
3225
3225
  {
@@ -3331,7 +3331,7 @@
3331
3331
  "declarations": [
3332
3332
  {
3333
3333
  "kind": "class",
3334
- "description": "The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.\nIt wraps the avatar component in a button, making it focusable and actionable.\n\nThis component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).\nUse CSS parts to customize the avatar's appearance inside the button.\n\n## Accessibility\n- Always provide an `aria-label` attribute to describe the button's purpose",
3334
+ "description": "",
3335
3335
  "name": "AvatarButton",
3336
3336
  "cssProperties": [
3337
3337
  {
@@ -4123,7 +4123,7 @@
4123
4123
  "module": "/src/components/buttonsimple/buttonsimple.component"
4124
4124
  },
4125
4125
  "tagName": "mdc-avatarbutton",
4126
- "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.\n * It wraps the avatar component in a button, making it focusable and actionable.\n *\n * This component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).\n * Use CSS parts to customize the avatar's appearance inside the button.\n *\n * ## Accessibility\n * - Always provide an `aria-label` attribute to describe the button's purpose\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) Dispatched when the avatar button is clicked.\n * @event keydown - (React: onKeyDown) Dispatched when a key is pressed on the avatar button.\n * @event keyup - (React: onKeyUp) Dispatched when a key is released on the avatar button.\n * @event focus - (React: onFocus) Dispatched when the avatar button receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state.\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state.\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state.\n * @cssproperty --mdc-avatarbutton-default-background-color - Default background color of the avatar.\n * @cssproperty --mdc-avatarbutton-default-foreground-color - Default foreground color of the avatar.\n * @cssproperty --mdc-avatarbutton-loading-indicator-background-color - Background color of the loading indicator.\n * @cssproperty --mdc-avatarbutton-loading-indicator-foreground-color - Foreground color of the loading indicator.\n * @cssproperty --mdc-avatarbutton-loading-overlay-background-color - Background color of the loading overlay.\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
4126
+ "jsDoc": "/**\n * @tagname mdc-avatarbutton\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) Dispatched when the avatar button is clicked.\n * @event keydown - (React: onKeyDown) Dispatched when a key is pressed on the avatar button.\n * @event keyup - (React: onKeyUp) Dispatched when a key is released on the avatar button.\n * @event focus - (React: onFocus) Dispatched when the avatar button receives focus.\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state.\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state.\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state.\n * @cssproperty --mdc-avatarbutton-default-background-color - Default background color of the avatar.\n * @cssproperty --mdc-avatarbutton-default-foreground-color - Default foreground color of the avatar.\n * @cssproperty --mdc-avatarbutton-loading-indicator-background-color - Background color of the loading indicator.\n * @cssproperty --mdc-avatarbutton-loading-indicator-foreground-color - Foreground color of the loading indicator.\n * @cssproperty --mdc-avatarbutton-loading-overlay-background-color - Background color of the loading overlay.\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
4127
4127
  "customElement": true,
4128
4128
  "slots": [
4129
4129
  {
@@ -4154,7 +4154,7 @@
4154
4154
  "declarations": [
4155
4155
  {
4156
4156
  "kind": "class",
4157
- "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
4157
+ "description": "",
4158
4158
  "name": "Badge",
4159
4159
  "cssProperties": [
4160
4160
  {
@@ -4465,7 +4465,7 @@
4465
4465
  "module": "/src/models"
4466
4466
  },
4467
4467
  "tagName": "mdc-badge",
4468
- "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).\n * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
4468
+ "jsDoc": "/**\n * @tagname mdc-badge\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n * @cssproperty --mdc-badge-dot-width - The width of the dot badge. Default is 0.75rem (12px).\n * @cssproperty --mdc-badge-dot-height - The height of the dot badge. Default is 0.75rem (12px).\n *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
4469
4469
  "customElement": true
4470
4470
  }
4471
4471
  ],
@@ -4486,7 +4486,7 @@
4486
4486
  "declarations": [
4487
4487
  {
4488
4488
  "kind": "class",
4489
- "description": "`mdc-banner` is a component that allows applications to communicate important messages to users\nand requires user action to dismiss them. It supports different message types with appropriate styling\nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
4489
+ "description": "",
4490
4490
  "name": "Banner",
4491
4491
  "cssProperties": [
4492
4492
  {
@@ -4627,7 +4627,7 @@
4627
4627
  "module": "/src/models"
4628
4628
  },
4629
4629
  "tagName": "mdc-banner",
4630
- "jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users\n * and requires user action to dismiss them. It supports different message types with appropriate styling\n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n *\n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-border-width - Border width of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
4630
+ "jsDoc": "/**\n * @tagname mdc-banner\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-border-width - Border width of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
4631
4631
  "customElement": true
4632
4632
  }
4633
4633
  ],
@@ -4648,7 +4648,7 @@
4648
4648
  "declarations": [
4649
4649
  {
4650
4650
  "kind": "class",
4651
- "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
4651
+ "description": "",
4652
4652
  "name": "Brandvisual",
4653
4653
  "cssParts": [
4654
4654
  {
@@ -4813,7 +4813,7 @@
4813
4813
  "module": "/src/models"
4814
4814
  },
4815
4815
  "tagName": "mdc-brandvisual",
4816
- "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n * @csspart brandvisual - Set styles for the brandvisual svg container\n * @csspart brandvisualImage - Set styles for the brandvisual image container\n */",
4816
+ "jsDoc": "/**\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n * @csspart brandvisual - Set styles for the brandvisual svg container\n * @csspart brandvisualImage - Set styles for the brandvisual image container\n */",
4817
4817
  "customElement": true
4818
4818
  }
4819
4819
  ],
@@ -4834,7 +4834,7 @@
4834
4834
  "declarations": [
4835
4835
  {
4836
4836
  "kind": "class",
4837
- "description": "The Bullet component displays a small circular visual indicator used to organize and present\nitems in a list format. It provides a simple, consistent way to mark list items or emphasize\ncontent points.\n\nBullets are available in three sizes (small, medium, large) to accommodate different layout\ndensities and visual hierarchies.\n\n## When to use\nUse bullets to create unordered lists, mark navigation items, or provide visual indicators\nfor list content. Choose bullet size based on content importance and layout density.\n\n## Accessibility\n- Bullets are purely decorative and should be used alongside meaningful text content\n- Do not rely solely on bullet size or color to convey information",
4837
+ "description": "",
4838
4838
  "name": "Bullet",
4839
4839
  "cssProperties": [
4840
4840
  {
@@ -4876,7 +4876,7 @@
4876
4876
  "module": "/src/models"
4877
4877
  },
4878
4878
  "tagName": "mdc-bullet",
4879
- "jsDoc": "/**\n * The Bullet component displays a small circular visual indicator used to organize and present\n * items in a list format. It provides a simple, consistent way to mark list items or emphasize\n * content points.\n *\n * Bullets are available in three sizes (small, medium, large) to accommodate different layout\n * densities and visual hierarchies.\n *\n * ## When to use\n * Use bullets to create unordered lists, mark navigation items, or provide visual indicators\n * for list content. Choose bullet size based on content importance and layout density.\n *\n * ## Accessibility\n * - Bullets are purely decorative and should be used alongside meaningful text content\n * - Do not rely solely on bullet size or color to convey information\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - Background color of the bullet.\n * @cssproperty --mdc-bullet-size - Height of the bullet.\n */",
4879
+ "jsDoc": "/**\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - Background color of the bullet.\n * @cssproperty --mdc-bullet-size - Height of the bullet.\n */",
4880
4880
  "customElement": true
4881
4881
  }
4882
4882
  ],
@@ -4897,7 +4897,7 @@
4897
4897
  "declarations": [
4898
4898
  {
4899
4899
  "kind": "class",
4900
- "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\n## Button configuration\n\nThe appearance of the button depends on combination of multiple attributes.\n\n### Button Types\n\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n\n- **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n- **Pill button with icons**: Contains an icon on the left or right side of the button\n- **Icon button**: Represented by just an icon without any text\n\n### Button Variants:\n\nOptions for button backgrounds and borders:\n\n- **Primary**: Solid background color\n- **Secondary**: Transparent background with solid border\n- **Tertiary**: No background or border, text-only appearance\n\n### Button Colors\n\nColor options for **Primary** and **Secondary** buttons:\n\n- **Default**: For standard actions\n- **Positive**: For success or confirmation actions\n- **Negative**: For destructive or error actions\n- **Accent**: For informational actions\n- **Promotional**: For promotional actions\n\nColor options for **Tertiary** buttons:\n\n- **Default**: For standard actions\n- **Accent**: For informational actions\n- **Negative**: For destructive or error actions\n\n### Button Sizes\n\nSize options for different button configurations in REM:\n\n- **Pill button**: 40, 32, 28, 24\n- **Icon button**: 64, 52, 40, 32, 28, 24\n- **Tertiary icon button**: 20",
4900
+ "description": "",
4901
4901
  "name": "Button",
4902
4902
  "cssProperties": [
4903
4903
  {
@@ -5698,7 +5698,7 @@
5698
5698
  "module": "/src/components/buttonsimple/buttonsimple.component"
5699
5699
  },
5700
5700
  "tagName": "mdc-button",
5701
- "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * ## Button configuration\n *\n * The appearance of the button depends on combination of multiple attributes.\n *\n * ### Button Types\n *\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:\n *\n * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters\n * - **Pill button with icons**: Contains an icon on the left or right side of the button\n * - **Icon button**: Represented by just an icon without any text\n *\n * ### Button Variants:\n *\n * Options for button backgrounds and borders:\n *\n * - **Primary**: Solid background color\n * - **Secondary**: Transparent background with solid border\n * - **Tertiary**: No background or border, text-only appearance\n *\n * ### Button Colors\n *\n * Color options for **Primary** and **Secondary** buttons:\n *\n * - **Default**: For standard actions\n * - **Positive**: For success or confirmation actions\n * - **Negative**: For destructive or error actions\n * - **Accent**: For informational actions\n * - **Promotional**: For promotional actions\n *\n * Color options for **Tertiary** buttons:\n *\n * - **Default**: For standard actions\n * - **Accent**: For informational actions\n * - **Negative**: For destructive or error actions\n *\n * ### Button Sizes\n *\n * Size options for different button configurations in REM:\n *\n * - **Pill button**: 40, 32, 28, 24\n * - **Icon button**: 64, 52, 40, 32, 28, 24\n * - **Tertiary icon button**: 20\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n *\n */",
5701
+ "jsDoc": "/**\n * @tagname mdc-button\n *\n * @dependency mdc-icon\n *\n * @slot - Text label of the button.\n * @slot prefix - Content to be displayed before the text label.\n * @slot postfix - Content to be displayed after the text label.\n *\n * @csspart button-text - Text label of the button, passed in default slot\n * @csspart prefix - Content before the text label, passed in `prefix` slot\n * @csspart postfix - Content after the text label, passed in `postfix` slot\n * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set\n * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n * @cssproperty --mdc-button-line-height - Line height of the button text\n *\n */",
5702
5702
  "customElement": true,
5703
5703
  "events": [
5704
5704
  {
@@ -5757,7 +5757,7 @@
5757
5757
  "declarations": [
5758
5758
  {
5759
5759
  "kind": "class",
5760
- "description": "`mdc-buttongroup` is a wrapper component that groups multiple buttons together.\n\n## Supported button types\n- Icon buttons\n- Pill buttons\n- Combination of icon and pill buttons\n\n## Features\n- Horizontal or vertical orientation\n- Unified size and variant applied to all child buttons\n- Optional compact mode for reduced height\n- Supported sizes: 24, 28 (default), 32, 40\n\n## Usage\n- Only `mdc-button` components are allowed as direct children\n- The `size` and `variant` set on buttongroup override individual button settings",
5760
+ "description": "",
5761
5761
  "name": "ButtonGroup",
5762
5762
  "cssProperties": [
5763
5763
  {
@@ -5874,7 +5874,7 @@
5874
5874
  "module": "/src/models"
5875
5875
  },
5876
5876
  "tagName": "mdc-buttongroup",
5877
- "jsDoc": "/**\n * `mdc-buttongroup` is a wrapper component that groups multiple buttons together.\n *\n * ## Supported button types\n * - Icon buttons\n * - Pill buttons\n * - Combination of icon and pill buttons\n *\n * ## Features\n * - Horizontal or vertical orientation\n * - Unified size and variant applied to all child buttons\n * - Optional compact mode for reduced height\n * - Supported sizes: 24, 28 (default), 32, 40\n *\n * ## Usage\n * - Only `mdc-button` components are allowed as direct children\n * - The `size` and `variant` set on buttongroup override individual button settings\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n *\n * @csspart container - The container of the buttongroup.\n */",
5877
+ "jsDoc": "/**\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n *\n * @csspart container - The container of the buttongroup.\n */",
5878
5878
  "customElement": true
5879
5879
  }
5880
5880
  ],
@@ -5895,7 +5895,7 @@
5895
5895
  "declarations": [
5896
5896
  {
5897
5897
  "kind": "class",
5898
- "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons.\n\n### Features:\n- Behaves like a link while visually resembling a button.\n- Customizable size, color, and variant through attributes.\n- Supports prefix and postfix icons.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
5898
+ "description": "",
5899
5899
  "name": "ButtonLink",
5900
5900
  "cssProperties": [
5901
5901
  {
@@ -6711,7 +6711,7 @@
6711
6711
  "module": "/src/components/linksimple/linksimple.component"
6712
6712
  },
6713
6713
  "tagName": "mdc-buttonlink",
6714
- "jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons.\n *\n * ### Features:\n * - Behaves like a link while visually resembling a button.\n * - Customizable size, color, and variant through attributes.\n * - Supports prefix and postfix icons.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @slot default - The default slot for buttonlink text content.\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the buttonlink content.\n * @csspart prefix-icon - The prefix icon element.\n * @csspart button-text - The slot containing the buttonlink text.\n * @csspart postfix-icon - The postfix icon element.\n *\n * @cssproperty --mdc-button-height - Height of the buttonlink\n * @cssproperty --mdc-button-background - Background color of the buttonlink\n * @cssproperty --mdc-button-border-color - Border color of the buttonlink\n * @cssproperty --mdc-button-text-color - Text color of the buttonlink\n * @cssproperty --mdc-button-line-height - Line height of the buttonlink text\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n */",
6714
+ "jsDoc": "/**\n * @tagname mdc-buttonlink\n *\n * @dependency mdc-icon\n *\n * @slot default - The default slot for buttonlink text content.\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the buttonlink content.\n * @csspart prefix-icon - The prefix icon element.\n * @csspart button-text - The slot containing the buttonlink text.\n * @csspart postfix-icon - The postfix icon element.\n *\n * @cssproperty --mdc-button-height - Height of the buttonlink\n * @cssproperty --mdc-button-background - Background color of the buttonlink\n * @cssproperty --mdc-button-border-color - Border color of the buttonlink\n * @cssproperty --mdc-button-text-color - Text color of the buttonlink\n * @cssproperty --mdc-button-line-height - Line height of the buttonlink text\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n */",
6715
6715
  "customElement": true
6716
6716
  }
6717
6717
  ],
@@ -6732,7 +6732,7 @@
6732
6732
  "declarations": [
6733
6733
  {
6734
6734
  "kind": "class",
6735
- "description": "`mdc-buttonsimple` is a simple button component that can be configured in various ways to suit different use cases.\nIt can be used standalone or as a base for more complex button components like `mdc-button`.\n\n### Button Types\n\nThe button type defines the behavior when clicked:\n\n- **button**: Standard button that performs an action on click\n- **submit**: Submits the form data to the server\n- **reset**: Resets the form data to its initial state\n\n### Active State\n\nThe `active` attribute toggles the button's active/toggled state,\nautomatically setting the appropriate ARIA state (e.g., `aria-pressed`).\nThis is useful for toggle buttons or buttons indicating a selected state.\n\n### Disabled States\n\n- **disabled**: Completely disables the button, removing it from the tab order\n- **soft-disabled**: Button appears disabled but remains focusable for accessibility",
6735
+ "description": "",
6736
6736
  "name": "Buttonsimple",
6737
6737
  "cssProperties": [
6738
6738
  {
@@ -7165,7 +7165,7 @@
7165
7165
  "module": "/src/models"
7166
7166
  },
7167
7167
  "tagName": "mdc-buttonsimple",
7168
- "jsDoc": "/**\n * `mdc-buttonsimple` is a simple button component that can be configured in various ways to suit different use cases.\n * It can be used standalone or as a base for more complex button components like `mdc-button`.\n *\n * ### Button Types\n *\n * The button type defines the behavior when clicked:\n *\n * - **button**: Standard button that performs an action on click\n * - **submit**: Submits the form data to the server\n * - **reset**: Resets the form data to its initial state\n *\n * ### Active State\n *\n * The `active` attribute toggles the button's active/toggled state,\n * automatically setting the appropriate ARIA state (e.g., `aria-pressed`).\n * This is useful for toggle buttons or buttons indicating a selected state.\n *\n * ### Disabled States\n *\n * - **disabled**: Completely disables the button, removing it from the tab order\n * - **soft-disabled**: Button appears disabled but remains focusable for accessibility\n *\n * @tagname mdc-buttonsimple\n *\n * @slot - Text label of the button.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @cssproperty --mdc-button-height - Height of the button\n * @cssproperty --mdc-button-background - Background color of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n */",
7168
+ "jsDoc": "/**\n * @tagname mdc-buttonsimple\n *\n * @slot - Text label of the button.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @cssproperty --mdc-button-height - Height of the button\n * @cssproperty --mdc-button-background - Background color of the button\n * @cssproperty --mdc-button-border-color - Border color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n */",
7169
7169
  "customElement": true
7170
7170
  }
7171
7171
  ],
@@ -7186,7 +7186,7 @@
7186
7186
  "declarations": [
7187
7187
  {
7188
7188
  "kind": "class",
7189
- "description": "mdc-calendar is a component that displays a monthly calendar grid\nallowing users to select dates, weeks, or date ranges.\n\nThe component supports three selection modes:\n- `single`: Select a single date\n- `week`: Select an entire week\n- `range`: Select a date range (start and end)",
7189
+ "description": "",
7190
7190
  "name": "Calendar",
7191
7191
  "cssProperties": [
7192
7192
  {
@@ -7754,7 +7754,7 @@
7754
7754
  "module": "/src/models"
7755
7755
  },
7756
7756
  "tagName": "mdc-calendar",
7757
- "jsDoc": "/**\n * mdc-calendar is a component that displays a monthly calendar grid\n * allowing users to select dates, weeks, or date ranges.\n *\n * The component supports three selection modes:\n * - `single`: Select a single date\n * - `week`: Select an entire week\n * - `range`: Select a date range (start and end)\n *\n * @tagname mdc-calendar\n *\n * @dependency mdc-button\n *\n * @event date-selected - Fires when a date or date range is selected.\n * @event month-changed - Fires when the displayed month changes.\n *\n * @cssproperty --mdc-calendar-background-color - Background color of the calendar.\n * @cssproperty --mdc-calendar-text-color - Text color of the calendar.\n * @cssproperty --mdc-calendar-day-selected-bg - Background color of selected days.\n * @cssproperty --mdc-calendar-day-selected-text-color - Text color of selected days.\n * @cssproperty --mdc-calendar-day-today-border-color - Border color for today's date.\n * @cssproperty --mdc-calendar-day-hover-bg - Background color on hover.\n * @cssproperty --mdc-calendar-range-bg - Background color for days within a range.\n * @cssproperty --mdc-calendar-day-outside-month-text-color - Text color for days outside the current month.\n * @cssproperty --mdc-calendar-day-disabled-text-color - Text color for disabled days.\n */",
7757
+ "jsDoc": "/**\n * @tagname mdc-calendar\n *\n * @dependency mdc-button\n *\n * @event date-selected - Fires when a date or date range is selected.\n * @event month-changed - Fires when the displayed month changes.\n *\n * @cssproperty --mdc-calendar-background-color - Background color of the calendar.\n * @cssproperty --mdc-calendar-text-color - Text color of the calendar.\n * @cssproperty --mdc-calendar-day-selected-bg - Background color of selected days.\n * @cssproperty --mdc-calendar-day-selected-text-color - Text color of selected days.\n * @cssproperty --mdc-calendar-day-today-border-color - Border color for today's date.\n * @cssproperty --mdc-calendar-day-hover-bg - Background color on hover.\n * @cssproperty --mdc-calendar-range-bg - Background color for days within a range.\n * @cssproperty --mdc-calendar-day-outside-month-text-color - Text color for days outside the current month.\n * @cssproperty --mdc-calendar-day-disabled-text-color - Text color for disabled days.\n */",
7758
7758
  "customElement": true
7759
7759
  }
7760
7760
  ],
@@ -7775,7 +7775,7 @@
7775
7775
  "declarations": [
7776
7776
  {
7777
7777
  "kind": "class",
7778
- "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component.\n\n## Card Structure\n- **Image**: Optional visual content at the top\n- **Header**: Contains icon, title, subtitle, and action buttons\n- **Body**: Main text content area\n- **Footer**: Optional footer with links and buttons\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.",
7778
+ "description": "",
7779
7779
  "name": "Card",
7780
7780
  "cssProperties": [
7781
7781
  {
@@ -8093,7 +8093,7 @@
8093
8093
  "module": "/src/models"
8094
8094
  },
8095
8095
  "tagName": "mdc-card",
8096
- "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component.\n *\n * ## Card Structure\n * - **Image**: Optional visual content at the top\n * - **Header**: Contains icon, title, subtitle, and action buttons\n * - **Body**: Main text content area\n * - **Footer**: Optional footer with links and buttons\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Can be made interactive by adding elements to slots like `icon-button`, `footer-link`, and footer buttons.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
8096
+ "jsDoc": "/**\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot icon-button - This slot supports action icon buttons in the header section (maximum of 3 buttons)\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
8097
8097
  "customElement": true,
8098
8098
  "attributes": [
8099
8099
  {
@@ -8232,7 +8232,7 @@
8232
8232
  "declarations": [
8233
8233
  {
8234
8234
  "kind": "class",
8235
- "description": "cardbutton component looks like a card and behaves as a button component.\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Interacting anywhere on the card triggers the click event.\n- Use `name` and `value` attributes when using within forms.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
8235
+ "description": "",
8236
8236
  "name": "CardButton",
8237
8237
  "cssProperties": [
8238
8238
  {
@@ -8895,7 +8895,7 @@
8895
8895
  "module": "/src/components/buttonsimple/buttonsimple.component"
8896
8896
  },
8897
8897
  "tagName": "mdc-cardbutton",
8898
- "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Interacting anywhere on the card triggers the click event.\n * - Use `name` and `value` attributes when using within forms.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
8898
+ "jsDoc": "/**\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot image - This slot is for overriding the image content of the card\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
8899
8899
  "customElement": true,
8900
8900
  "attributes": [
8901
8901
  {
@@ -9175,7 +9175,7 @@
9175
9175
  "declarations": [
9176
9176
  {
9177
9177
  "kind": "class",
9178
- "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.\nMultiple cards can be checked simultaneously.\n\n## Features\n- Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).\n- Interacting anywhere on the card toggles the checked state and dispatches a `change` event.\n- Card has `role=\"checkbox\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n\n## Usage\n- The `card-title` attribute is required.\n- When using within a form or group, wrap cards in a container with `role=\"group\"` and provide an `aria-label`.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
9178
+ "description": "",
9179
9179
  "name": "CardCheckbox",
9180
9180
  "cssProperties": [
9181
9181
  {
@@ -9905,7 +9905,7 @@
9905
9905
  "module": "/src/components/card/card.component"
9906
9906
  },
9907
9907
  "tagName": "mdc-cardcheckbox",
9908
- "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction.\n * Multiple cards can be checked simultaneously.\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal), three visual variants (border, ghost, and promotional), and two selection types (check icon or checkbox component).\n * - Interacting anywhere on the card toggles the checked state and dispatches a `change` event.\n * - Card has `role=\"checkbox\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n *\n * ## Usage\n * - The `card-title` attribute is required.\n * - When using within a form or group, wrap cards in a container with `role=\"group\"` and provide an `aria-label`.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
9908
+ "jsDoc": "/**\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
9909
9909
  "customElement": true
9910
9910
  }
9911
9911
  ],
@@ -9926,7 +9926,7 @@
9926
9926
  "declarations": [
9927
9927
  {
9928
9928
  "kind": "class",
9929
- "description": "cardradio component extends `mdc-card` and supports radio selection interaction.\nOnly one card can be selected at a time within the same group (defined by `name` attribute).\n\n## Features\n- Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n- Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.\n- Supports keyboard navigation with arrow keys to move between cards in the same group.\n- Card has `role=\"radio\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n\n## Usage\n- Both `card-title` and `name` attributes are required.\n- When using within a form or group, wrap cards in a container with `role=\"radiogroup\"` and provide an `aria-label`.\n\n**Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.",
9929
+ "description": "",
9930
9930
  "name": "CardRadio",
9931
9931
  "cssProperties": [
9932
9932
  {
@@ -10701,7 +10701,7 @@
10701
10701
  "module": "/src/components/card/card.component"
10702
10702
  },
10703
10703
  "tagName": "mdc-cardradio",
10704
- "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction.\n * Only one card can be selected at a time within the same group (defined by `name` attribute).\n *\n * ## Features\n * - Supports two orientations (vertical and horizontal) and three visual variants (border, ghost, and promotional).\n * - Selecting a card automatically unselects other cards in the same group and dispatches a `change` event.\n * - Supports keyboard navigation with arrow keys to move between cards in the same group.\n * - Card has `role=\"radio\"` and manages `aria-checked` and `aria-disabled` attributes automatically.\n *\n * ## Usage\n * - Both `card-title` and `name` attributes are required.\n * - When using within a form or group, wrap cards in a container with `role=\"radiogroup\"` and provide an `aria-label`.\n *\n * **Note**: Only pass non-interactable elements within the slots to avoid nested interactive elements.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It selects the card when enter key or arrow keys are used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It selects the card when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
10704
+ "jsDoc": "/**\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot title - This slot is for passing the title of the card in the header section\n * @slot subtitle - This slot is for passing the subtitle of the card in the header section\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It selects the card and unselects others in the same group.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It selects the card when enter key or arrow keys are used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It selects the card when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
10705
10705
  "customElement": true
10706
10706
  }
10707
10707
  ],
@@ -10722,7 +10722,7 @@
10722
10722
  "declarations": [
10723
10723
  {
10724
10724
  "kind": "class",
10725
- "description": "The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,\nor indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels\nwhere users need to make selections or express preferences.\n\nTo create a group of checkboxes, use the `mdc-formfieldgroup` component.\n\n**Note:** This component internally renders a native checkbox input element with custom styling.\n\n## When to use\n\nUse checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).\n\n## Accessibility\n- Provide clear labels that describe what the checkbox controls\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n\n## Styling\nUse the `static-checkbox` part to apply custom styles to the checkbox visual element.\nThis part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.",
10725
+ "description": "",
10726
10726
  "name": "Checkbox",
10727
10727
  "cssParts": [
10728
10728
  {
@@ -11478,7 +11478,7 @@
11478
11478
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
11479
11479
  },
11480
11480
  "tagName": "mdc-checkbox",
11481
- "jsDoc": "/**\n * The Checkbox component allows users to select one or multiple options from a list, toggle features on/off,\n * or indicate agreement in forms and settings. These are commonly used in forms, lists, and settings panels\n * where users need to make selections or express preferences.\n *\n * To create a group of checkboxes, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element with custom styling.\n *\n * ## When to use\n *\n * Use checkboxes when users can select multiple options from a list, or when a single checkbox represents a binary choice (e.g., agreeing to terms).\n *\n * ## Accessibility\n * - Provide clear labels that describe what the checkbox controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-checkbox` part to apply custom styles to the checkbox visual element.\n * This part exposes the underlying [StaticCheckbox](?path=/docs/components-decorator-staticcheckbox--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n *\n * @cssstate checked - Active when the checkbox is checked.\n */",
11481
+ "jsDoc": "/**\n * @tagname mdc-checkbox\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart checkbox-input - The native checkbox input element that provides the interactive functionality.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-checkbox - The staticcheckbox that provides the visual checkbox appearance.\n *\n * @cssstate checked - Active when the checkbox is checked.\n */",
11482
11482
  "cssCustomStates": [
11483
11483
  {
11484
11484
  "name": "checked",
@@ -11613,7 +11613,7 @@
11613
11613
  "declarations": [
11614
11614
  {
11615
11615
  "kind": "class",
11616
- "description": "mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\nConsumers can wrap this component around a tooltip to provide additional context.\n\nIt is recommended to keep the label text for the chip component concise and compact.<br/>\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.\n\nThis component is built by extending `Buttonsimple`.",
11616
+ "description": "",
11617
11617
  "name": "Chip",
11618
11618
  "cssProperties": [
11619
11619
  {
@@ -12252,7 +12252,7 @@
12252
12252
  "module": "/src/components/buttonsimple/buttonsimple.component"
12253
12253
  },
12254
12254
  "tagName": "mdc-chip",
12255
- "jsDoc": "/**\n * mdc-chip is an interactive element that can be used to represent a chip. It supports a leading icon along with label.\n * Consumers can wrap this component around a tooltip to provide additional context.\n *\n * It is recommended to keep the label text for the chip component concise and compact.<br/>\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>,\n * including empty spaces to split words.\n *\n * This component is built by extending `Buttonsimple`.\n *\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n * @csspart icon - The icon part of the chip.\n * @csspart label - The label part of the chip.\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
12255
+ "jsDoc": "/**\n * @tagname mdc-chip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n * @csspart icon - The icon part of the chip.\n * @csspart label - The label part of the chip.\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
12256
12256
  "customElement": true,
12257
12257
  "slots": [
12258
12258
  {
@@ -12283,7 +12283,7 @@
12283
12283
  "declarations": [
12284
12284
  {
12285
12285
  "kind": "class",
12286
- "description": "A Coachmark is a contextual guidance component used to highlight a specific UI element and explain its purpose or functionality.\nIt is typically shown as part of onboarding, feature discovery, or progressive education within the product.\n\nCoachmark component based on top of the popover component,\nwith the default value of certain properties changed.\nCoachmark component will always have an arrow attached to it.\nThe color of the coachmark is contrast.\n\n## When to use\n- Introducing a new or complex feature to users.\n- Drawing attention to a UI element that might otherwise be missed.\n- Providing step-by-step guidance in an onboarding or walkthrough flow.\n\n## Accessibility\n- The default role of coachmark is `\"dialog\"`, which can be changed via the `role` attribute.\n- aria-label or aria-labelledby can be provided to give the coachmark an accessible name.",
12286
+ "description": "",
12287
12287
  "name": "Coachmark",
12288
12288
  "cssProperties": [
12289
12289
  {
@@ -13651,7 +13651,7 @@
13651
13651
  "module": "/src/components/popover/popover.component"
13652
13652
  },
13653
13653
  "tagName": "mdc-coachmark",
13654
- "jsDoc": "/**\n * A Coachmark is a contextual guidance component used to highlight a specific UI element and explain its purpose or functionality.\n * It is typically shown as part of onboarding, feature discovery, or progressive education within the product.\n *\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n * Coachmark component will always have an arrow attached to it.\n * The color of the coachmark is contrast.\n *\n * ## When to use\n * - Introducing a new or complex feature to users.\n * - Drawing attention to a UI element that might otherwise be missed.\n * - Providing step-by-step guidance in an onboarding or walkthrough flow.\n *\n * ## Accessibility\n * - The default role of coachmark is `\"dialog\"`, which can be changed via the `role` attribute.\n * - aria-label or aria-labelledby can be provided to give the coachmark an accessible name.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n */",
13654
+ "jsDoc": "/**\n * @tagname mdc-coachmark\n *\n * @dependency mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n */",
13655
13655
  "customElement": true,
13656
13656
  "cssParts": [
13657
13657
  {
@@ -13698,7 +13698,7 @@
13698
13698
  "declarations": [
13699
13699
  {
13700
13700
  "kind": "class",
13701
- "description": "The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\nUsers can type text to filter the options and select their desired choice.\n\nWhen the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\nIf the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n\nThe `filter` attribute controls how options are narrowed as the user types.\nThe default `'match-starts-with'` strategy shows options whose label starts with the typed text.\nSetting `filter=\"none\"` disables internal filtering, which is useful when the consumer manages\nfiltering externally (e.g., fetching results from an API) and dynamically updates the slotted options.\nA custom function can also be provided via the `filter` property for full control over the logic.\n\nIf there is no text in the `no-result-text` attribute then nothing will be shown.\n\nCombobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\nWhen the combobox `control-type` attribute is \"controlled\", then the value should be set by the parent only, and the combobox will emit `change` and `input` events\nwith the selected option details when the user makes a selection or types in the input, but it won't update the selected value internally.\nThe parent component is expected to listen to these events and update the `value` property of the combobox accordingly to reflect the changes in the UI.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.\n\nTo understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).",
13701
+ "description": "",
13702
13702
  "name": "Combobox",
13703
13703
  "cssProperties": [
13704
13704
  {
@@ -14786,7 +14786,7 @@
14786
14786
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
14787
14787
  },
14788
14788
  "tagName": "mdc-combobox",
14789
- "jsDoc": "/**\n * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\n * Users can type text to filter the options and select their desired choice.\n *\n * When the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\n * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n *\n * The `filter` attribute controls how options are narrowed as the user types.\n * The default `'match-starts-with'` strategy shows options whose label starts with the typed text.\n * Setting `filter=\"none\"` disables internal filtering, which is useful when the consumer manages\n * filtering externally (e.g., fetching results from an API) and dynamically updates the slotted options.\n * A custom function can also be provided via the `filter` property for full control over the logic.\n *\n * If there is no text in the `no-result-text` attribute then nothing will be shown.\n *\n * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * When the combobox `control-type` attribute is \"controlled\", then the value should be set by the parent only, and the combobox will emit `change` and `input` events\n * with the selected option details when the user makes a selection or types in the input, but it won't update the selected value internally.\n * The parent component is expected to listen to these events and update the `value` property of the combobox accordingly to reflect the changes in the UI.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.\n *\n * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-height - The height of the combobox trigger control\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart input-text - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox-base - The base container element of the combobox.\n * @csspart combobox-button - The button element of the combobox.\n * @csspart combobox-button-icon - The icon element of the button of the combobox.\n */",
14789
+ "jsDoc": "/**\n * @tagname mdc-combobox\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-height - The height of the combobox trigger control\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart input-text - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox-base - The base container element of the combobox.\n * @csspart combobox-button - The button element of the combobox.\n * @csspart combobox-button-icon - The icon element of the button of the combobox.\n */",
14790
14790
  "customElement": true
14791
14791
  }
14792
14792
  ],
@@ -14807,7 +14807,7 @@
14807
14807
  "declarations": [
14808
14808
  {
14809
14809
  "kind": "class",
14810
- "description": "ContolTypeProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nattribute 'control-type' sets the default control type for all consumers\n - 'controlled' the consumer component will not handle any interaction itself, e.g. toggling a checkbox.\n - 'uncontrolled' the consumer component will handle interactions\n\nControlTypeMixin allows components to consume this context\nnote that this is intended to be set once, ControlTypeMixin will not update on changes to control-type",
14810
+ "description": "",
14811
14811
  "name": "ControlTypeProvider",
14812
14812
  "members": [
14813
14813
  {
@@ -14858,7 +14858,7 @@
14858
14858
  "module": "/src/models"
14859
14859
  },
14860
14860
  "tagName": "mdc-controltypeprovider",
14861
- "jsDoc": "/**\n * ContolTypeProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * attribute 'control-type' sets the default control type for all consumers\n - 'controlled' the consumer component will not handle any interaction itself, e.g. toggling a checkbox.\n - 'uncontrolled' the consumer component will handle interactions\n *\n * ControlTypeMixin allows components to consume this context\n * note that this is intended to be set once, ControlTypeMixin will not update on changes to control-type\n *\n * @tagname mdc-controltypeprovider\n *\n */",
14861
+ "jsDoc": "/**\n * @tagname mdc-controltypeprovider\n *\n */",
14862
14862
  "customElement": true
14863
14863
  }
14864
14864
  ],
@@ -14879,7 +14879,7 @@
14879
14879
  "declarations": [
14880
14880
  {
14881
14881
  "kind": "class",
14882
- "description": "mdc-datepicker is a component that allows users to select a date\nor enter a date manually. It supports two variants:\n\n- `input`: Manual date entry with spinbutton inputs for month, day, and year\n- `default`: A select-like trigger that opens a calendar for date range selection\n\nThe component uses `mdc-calendar` inside a popover for date selection\nand supports localization via a BCP 47 locale string.",
14882
+ "description": "",
14883
14883
  "name": "DatePicker",
14884
14884
  "cssProperties": [
14885
14885
  {
@@ -16469,7 +16469,7 @@
16469
16469
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
16470
16470
  },
16471
16471
  "tagName": "mdc-datepicker",
16472
- "jsDoc": "/**\n * mdc-datepicker is a component that allows users to select a date\n * or enter a date manually. It supports two variants:\n *\n * - `input`: Manual date entry with spinbutton inputs for month, day, and year\n * - `default`: A select-like trigger that opens a calendar for date range selection\n *\n * The component uses `mdc-calendar` inside a popover for date selection\n * and supports localization via a BCP 47 locale string.\n *\n * @tagname mdc-datepicker\n *\n * @dependency mdc-button\n * @dependency mdc-calendar\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the date value changes.\n * @event change - (React: onChange) This event is dispatched when the date value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the datepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the datepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-datepicker-background-color - Background color of the datepicker input.\n * @cssproperty --mdc-datepicker-border-color - Border color of the datepicker input.\n * @cssproperty --mdc-datepicker-text-color - Text color of the datepicker input.\n * @cssproperty --mdc-datepicker-height - The height of the datepicker trigger control.\n * @cssproperty --mdc-datepicker-width - Width of the datepicker component.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The separator between spinbuttons.\n * @csspart icon-container - The calendar/dropdown button container.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart select-text - The selected value display text (default variant).\n */",
16472
+ "jsDoc": "/**\n * @tagname mdc-datepicker\n *\n * @dependency mdc-button\n * @dependency mdc-calendar\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the date value changes.\n * @event change - (React: onChange) This event is dispatched when the date value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the datepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the datepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-datepicker-background-color - Background color of the datepicker input.\n * @cssproperty --mdc-datepicker-border-color - Border color of the datepicker input.\n * @cssproperty --mdc-datepicker-text-color - Text color of the datepicker input.\n * @cssproperty --mdc-datepicker-height - The height of the datepicker trigger control.\n * @cssproperty --mdc-datepicker-width - Width of the datepicker component.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The separator between spinbuttons.\n * @csspart icon-container - The calendar/dropdown button container.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart select-text - The selected value display text (default variant).\n */",
16473
16473
  "customElement": true
16474
16474
  }
16475
16475
  ],
@@ -16490,7 +16490,7 @@
16490
16490
  "declarations": [
16491
16491
  {
16492
16492
  "kind": "class",
16493
- "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nDialog component have 2 variants: default and promotional.\n\n## Visibility\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerID` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nThe dialog is a controlled component, meaning it does not have its own state management for visibility.\nUse the `visible` property to control the visibility of the dialog.\nUse the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\nor Escape is pressed).\n\n## Accessibility\n\nSome attributes have to be explicitly set by the consumer of the component:\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n## Responsive design\n\nDialog has few built in logic to prevent content clipping on small screens\n\n- maximum height limited to the viewport height\n- dialog body has `overflow: auto` by default\n- dialog itself also has `overflow: auto`, it activates only when the body can not shrink more",
16493
+ "description": "",
16494
16494
  "name": "Dialog",
16495
16495
  "cssProperties": [
16496
16496
  {
@@ -17091,7 +17091,7 @@
17091
17091
  "module": "/src/models"
17092
17092
  },
17093
17093
  "tagName": "mdc-dialog",
17094
- "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * ## Visibility\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerID` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * ## Accessibility\n *\n * Some attributes have to be explicitly set by the consumer of the component:\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * ## Responsive design\n *\n * Dialog has few built in logic to prevent content clipping on small screens\n *\n * - maximum height limited to the viewport height\n * - dialog body has `overflow: auto` by default\n * - dialog itself also has `overflow: auto`, it activates only when the body can not shrink more\n *\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n * @cssproperty --mdc-dialog-backdrop-color - background color of the backdrop (if backdrop is enabled)\n *\n * @csspart body - The body section of the dialog.\n * @csspart description-text - The description text of the dialog.\n * @csspart dialog-close-btn - The close button of the dialog.\n * @csspart header - The header of the dialog.\n * @csspart header-section - The header section of the dialog.\n * @csspart header-text - The header text of the dialog.\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
17094
+ "jsDoc": "/**\n * @tagname mdc-dialog\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n * @cssproperty --mdc-dialog-height - height of the dialog\n * @cssproperty --mdc-dialog-backdrop-color - background color of the backdrop (if backdrop is enabled)\n *\n * @csspart body - The body section of the dialog.\n * @csspart description-text - The description text of the dialog.\n * @csspart dialog-close-btn - The close button of the dialog.\n * @csspart header - The header of the dialog.\n * @csspart header-section - The header section of the dialog.\n * @csspart header-text - The header text of the dialog.\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
17095
17095
  "customElement": true
17096
17096
  }
17097
17097
  ],
@@ -17112,7 +17112,7 @@
17112
17112
  "declarations": [
17113
17113
  {
17114
17114
  "kind": "class",
17115
- "description": "The Divider component provides a visual line to separate and organize content within layouts.\nIt supports both horizontal and vertical orientations with solid or gradient styles, and can\noptionally include centered text labels or interactive grabber buttons.\n\nThe divider automatically infers its type based on the content in its slot:\n- **Primary**: Simple line with no content\n- **Text**: Horizontal line with centered text label\n- **Grabber Button**: Line with centered interactive button\n\n**Note:**\n- Vertical text dividers are not currently supported.\n- If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type\n- Use the provided CSS custom properties to customize divider styles\n\n## When to use\nUse dividers to create visual separation between content sections, list items, or layout regions.\nAdd text labels to provide context, or grabber buttons to create resizable panes.\n\n## Accessibility\n- When using a grabber button, provide `aria-label` to describe its purpose\n- Set `aria-expanded` on the button to indicate the current state of resizable sections\n- Ensure sufficient color contrast for the divider line",
17115
+ "description": "",
17116
17116
  "name": "Divider",
17117
17117
  "cssProperties": [
17118
17118
  {
@@ -17343,7 +17343,7 @@
17343
17343
  "module": "/src/models"
17344
17344
  },
17345
17345
  "tagName": "mdc-divider",
17346
- "jsDoc": "/**\n * The Divider component provides a visual line to separate and organize content within layouts.\n * It supports both horizontal and vertical orientations with solid or gradient styles, and can\n * optionally include centered text labels or interactive grabber buttons.\n *\n * The divider automatically infers its type based on the content in its slot:\n * - **Primary**: Simple line with no content\n * - **Text**: Horizontal line with centered text label\n * - **Grabber Button**: Line with centered interactive button\n * \n * **Note:**\n * - Vertical text dividers are not currently supported.\n * - If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type\n * - Use the provided CSS custom properties to customize divider styles\n *\n * ## When to use\n * Use dividers to create visual separation between content sections, list items, or layout regions.\n * Add text labels to provide context, or grabber buttons to create resizable panes.\n *\n * ## Accessibility\n * - When using a grabber button, provide `aria-label` to describe its purpose\n * - Set `aria-expanded` on the button to indicate the current state of resizable sections\n * - Ensure sufficient color contrast for the divider line\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - Background color of the divider line.\n * @cssproperty --mdc-divider-width - Width (thickness) of the divider line.\n * @cssproperty --mdc-divider-horizontal-gradient - Gradient for horizontal dividers.\n * @cssproperty --mdc-divider-vertical-gradient - Gradient for vertical dividers.\n * @cssproperty --mdc-divider-text-size - Font size of the text label in text dividers.\n * @cssproperty --mdc-divider-text-color - Font color of the text label in text dividers.\n * @cssproperty --mdc-divider-text-margin - Left and right margin of the text label.\n * @cssproperty --mdc-divider-text-line-height - Line height of the text label.\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - Background color of the grabber button in rest state.\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - Background color of the grabber button in hover state.\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - Background color of the grabber button in pressed state.\n * @cssproperty --mdc-divider-grabber-button-border-color - Border color of the grabber button.\n * @cssproperty --mdc-divider-grabber-button-border-radius - Border radius of the grabber button.\n *\n * @slot - Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.\n */",
17346
+ "jsDoc": "/**\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - Background color of the divider line.\n * @cssproperty --mdc-divider-width - Width (thickness) of the divider line.\n * @cssproperty --mdc-divider-horizontal-gradient - Gradient for horizontal dividers.\n * @cssproperty --mdc-divider-vertical-gradient - Gradient for vertical dividers.\n * @cssproperty --mdc-divider-text-size - Font size of the text label in text dividers.\n * @cssproperty --mdc-divider-text-color - Font color of the text label in text dividers.\n * @cssproperty --mdc-divider-text-margin - Left and right margin of the text label.\n * @cssproperty --mdc-divider-text-line-height - Line height of the text label.\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - Background color of the grabber button in rest state.\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - Background color of the grabber button in hover state.\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - Background color of the grabber button in pressed state.\n * @cssproperty --mdc-divider-grabber-button-border-color - Border color of the grabber button.\n * @cssproperty --mdc-divider-grabber-button-border-radius - Border radius of the grabber button.\n *\n * @slot - Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.\n */",
17347
17347
  "customElement": true
17348
17348
  }
17349
17349
  ],
@@ -17364,7 +17364,7 @@
17364
17364
  "declarations": [
17365
17365
  {
17366
17366
  "kind": "class",
17367
- "description": "mdc-filterchip component is an interactive chip that consumers can use to select or deselect.\nThey can be found with lists or tables as quick filters.\n\nThis component is built on top of the mdc-chip component.",
17367
+ "description": "",
17368
17368
  "name": "FilterChip",
17369
17369
  "cssProperties": [
17370
17370
  {
@@ -18077,7 +18077,7 @@
18077
18077
  "module": "/src/components/chip/chip.component"
18078
18078
  },
18079
18079
  "tagName": "mdc-filterchip",
18080
- "jsDoc": "/**\n * mdc-filterchip component is an interactive chip that consumers can use to select or deselect.\n * They can be found with lists or tables as quick filters.\n *\n * This component is built on top of the mdc-chip component.\n *\n * @tagname mdc-filterchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @csspart label - The label part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
18080
+ "jsDoc": "/**\n * @tagname mdc-filterchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @csspart label - The label part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n * @event click - (React: onClick) This event is dispatched when the chip is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the chip.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the chip.\n * @event focus - (React: onFocus) This event is dispatched when the chip receives focus.\n */",
18081
18081
  "customElement": true,
18082
18082
  "slots": [
18083
18083
  {
@@ -18108,7 +18108,7 @@
18108
18108
  "declarations": [
18109
18109
  {
18110
18110
  "kind": "class",
18111
- "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
18111
+ "description": "",
18112
18112
  "name": "FormfieldGroup",
18113
18113
  "cssProperties": [
18114
18114
  {
@@ -18535,7 +18535,7 @@
18535
18535
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
18536
18536
  },
18537
18537
  "tagName": "mdc-formfieldgroup",
18538
- "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart group-header - This contains the label and help text for the group\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
18538
+ "jsDoc": "/**\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart group-header - This contains the label and help text for the group\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
18539
18539
  "customElement": true,
18540
18540
  "attributes": [
18541
18541
  {
@@ -18697,7 +18697,7 @@
18697
18697
  "declarations": [
18698
18698
  {
18699
18699
  "kind": "class",
18700
- "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
18700
+ "description": "",
18701
18701
  "name": "FormfieldWrapper",
18702
18702
  "cssProperties": [
18703
18703
  {
@@ -19079,7 +19079,7 @@
19079
19079
  "module": "/src/models"
19080
19080
  },
19081
19081
  "tagName": "mdc-formfieldwrapper",
19082
- "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
19082
+ "jsDoc": "/**\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n */",
19083
19083
  "customElement": true
19084
19084
  }
19085
19085
  ],
@@ -19100,7 +19100,7 @@
19100
19100
  "declarations": [
19101
19101
  {
19102
19102
  "kind": "class",
19103
- "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
19103
+ "description": "",
19104
19104
  "name": "Icon",
19105
19105
  "cssProperties": [
19106
19106
  {
@@ -19327,7 +19327,7 @@
19327
19327
  "module": "/src/models"
19328
19328
  },
19329
19329
  "tagName": "mdc-icon",
19330
- "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
19330
+ "jsDoc": "/**\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
19331
19331
  "customElement": true
19332
19332
  }
19333
19333
  ],
@@ -19348,7 +19348,7 @@
19348
19348
  "declarations": [
19349
19349
  {
19350
19350
  "kind": "class",
19351
- "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-design/icons` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
19351
+ "description": "",
19352
19352
  "name": "IconProvider",
19353
19353
  "slots": [
19354
19354
  {
@@ -19523,7 +19523,7 @@
19523
19523
  "module": "/src/models"
19524
19524
  },
19525
19525
  "tagName": "mdc-iconprovider",
19526
- "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-design/icons` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
19526
+ "jsDoc": "/**\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
19527
19527
  "customElement": true
19528
19528
  }
19529
19529
  ],
@@ -19544,7 +19544,7 @@
19544
19544
  "declarations": [
19545
19545
  {
19546
19546
  "kind": "class",
19547
- "description": "Illustration component that dynamically displays SVG illustrations based on a valid name.\n\nThis component must be mounted within an `IllustrationProvider` component.\n\nThe `IllustrationProvider` defines the source URL from which illustrations are consumed.\nThe `Illustration` component accepts a `name` attribute, which corresponds to\nthe file name of the illustration to be loaded from the specified URL.\n\nOnce fetched, the illustration will be rendered. If the fetching process is unsuccessful,\nno illustration will be displayed.\n\nDefault sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.\nColoring of the illustration is currently baked into the svg, meaning that the illustration name determines\nthe coloring.\n\nRegarding accessibility, there are two types of illustrations: decorative and informative.\n\n### Decorative Illustrations\n- Decorative illustrations do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative illustrations, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Illustrations\n- Informative illustrations convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative illustrations, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.",
19547
+ "description": "",
19548
19548
  "name": "Illustration",
19549
19549
  "cssProperties": [
19550
19550
  {
@@ -19701,7 +19701,7 @@
19701
19701
  "module": "/src/models"
19702
19702
  },
19703
19703
  "tagName": "mdc-illustration",
19704
- "jsDoc": "/**\n * Illustration component that dynamically displays SVG illustrations based on a valid name.\n *\n * This component must be mounted within an `IllustrationProvider` component.\n *\n * The `IllustrationProvider` defines the source URL from which illustrations are consumed.\n * The `Illustration` component accepts a `name` attribute, which corresponds to\n * the file name of the illustration to be loaded from the specified URL.\n *\n * Once fetched, the illustration will be rendered. If the fetching process is unsuccessful,\n * no illustration will be displayed.\n *\n * Default sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.\n * Coloring of the illustration is currently baked into the svg, meaning that the illustration name determines\n * the coloring.\n *\n * Regarding accessibility, there are two types of illustrations: decorative and informative.\n *\n * ### Decorative Illustrations\n * - Decorative illustrations do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative illustrations, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Illustrations\n * - Informative illustrations convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative illustrations, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * @tagname mdc-illustration\n *\n * @cssproperty --mdc-illustration-size - Allows customization of the illustration size.\n *\n * @csspart illustration - The svg inside the illustration element.\n */",
19704
+ "jsDoc": "/**\n * @tagname mdc-illustration\n *\n * @cssproperty --mdc-illustration-size - Allows customization of the illustration size.\n *\n * @csspart illustration - The svg inside the illustration element.\n */",
19705
19705
  "customElement": true
19706
19706
  }
19707
19707
  ],
@@ -19722,7 +19722,7 @@
19722
19722
  "declarations": [
19723
19723
  {
19724
19724
  "kind": "class",
19725
- "description": "IllustrationProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.\nIf `momentum-illustrations` is selected, the illustrations will be fetched from the\nMomentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-design/illustrations` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the illustrations will be fetched and\nthe consumer needs to make sure to bundle the illustrations in the application.\n\nIf `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the\nIllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same illustration multiple times over the network.\nThis is useful when the same illustration is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIllustrationProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
19725
+ "description": "",
19726
19726
  "name": "IllustrationProvider",
19727
19727
  "slots": [
19728
19728
  {
@@ -19857,7 +19857,7 @@
19857
19857
  "module": "/src/models"
19858
19858
  },
19859
19859
  "tagName": "mdc-illustrationprovider",
19860
- "jsDoc": "/**\n * IllustrationProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.\n * If `momentum-illustrations` is selected, the illustrations will be fetched from the\n * Momentum Design System illustration set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-design/illustrations` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the illustrations will be fetched and\n * the consumer needs to make sure to bundle the illustrations in the application.\n *\n * If `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the\n * IllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same illustration multiple times over the network.\n * This is useful when the same illustration is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IllustrationProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-illustrationprovider\n *\n * @slot - children\n */",
19860
+ "jsDoc": "/**\n * @tagname mdc-illustrationprovider\n *\n * @slot - children\n */",
19861
19861
  "customElement": true
19862
19862
  }
19863
19863
  ],
@@ -19878,7 +19878,7 @@
19878
19878
  "declarations": [
19879
19879
  {
19880
19880
  "kind": "class",
19881
- "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
19881
+ "description": "",
19882
19882
  "name": "Input",
19883
19883
  "cssProperties": [
19884
19884
  {
@@ -21217,7 +21217,7 @@
21217
21217
  "module": "/src/components/formfieldwrapper"
21218
21218
  },
21219
21219
  "tagName": "mdc-input",
21220
- "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n * It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-height - Height for the input container\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart input-footer - The footer element that contains the helper text and character counter.\n * @csspart character-counter - The character counter element.\n */",
21220
+ "jsDoc": "/**\n * @tagname mdc-input\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-height - Height for the input container\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart input-footer - The footer element that contains the helper text and character counter.\n * @csspart character-counter - The character counter element.\n */",
21221
21221
  "customElement": true
21222
21222
  }
21223
21223
  ],
@@ -21238,7 +21238,7 @@
21238
21238
  "declarations": [
21239
21239
  {
21240
21240
  "kind": "class",
21241
- "description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports a prefix slot for avatars (takes precedence over icon-name).\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
21241
+ "description": "",
21242
21242
  "name": "InputChip",
21243
21243
  "cssProperties": [
21244
21244
  {
@@ -21439,7 +21439,7 @@
21439
21439
  "module": "/src/models"
21440
21440
  },
21441
21441
  "tagName": "mdc-inputchip",
21442
- "jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports a prefix slot for avatars (takes precedence over icon-name).\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @slot prefix - A slot for prefix content such as avatars.\n *\n * @csspart label - The label part of the chip.\n * @csspart icon - The icon part of the chip.\n * @csspart close-icon - The close icon part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
21442
+ "jsDoc": "/**\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @slot prefix - A slot for prefix content such as avatars.\n *\n * @csspart label - The label part of the chip.\n * @csspart icon - The icon part of the chip.\n * @csspart close-icon - The close icon part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
21443
21443
  "customElement": true
21444
21444
  }
21445
21445
  ],
@@ -21460,7 +21460,7 @@
21460
21460
  "declarations": [
21461
21461
  {
21462
21462
  "kind": "class",
21463
- "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be the text content.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
21463
+ "description": "",
21464
21464
  "name": "Link",
21465
21465
  "cssParts": [
21466
21466
  {
@@ -21981,7 +21981,7 @@
21981
21981
  "module": "/src/components/linksimple/linksimple.component"
21982
21982
  },
21983
21983
  "tagName": "mdc-link",
21984
- "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the link content.\n * @csspart text - The element that wraps the link text.\n * @csspart icon - The icon element.\n */",
21984
+ "jsDoc": "/**\n * @tagname mdc-link\n *\n * @dependency mdc-icon\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the link content.\n * @csspart text - The element that wraps the link text.\n * @csspart icon - The icon element.\n */",
21985
21985
  "customElement": true,
21986
21986
  "cssProperties": [
21987
21987
  {
@@ -22076,7 +22076,7 @@
22076
22076
  "declarations": [
22077
22077
  {
22078
22078
  "kind": "class",
22079
- "description": "`mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.\n\n### Features:\n- Looks like a link, behaves like a button.\n- Supports slots for a text label and an optional trailing icon.\n- Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.",
22079
+ "description": "",
22080
22080
  "name": "LinkButton",
22081
22081
  "cssProperties": [
22082
22082
  {
@@ -22734,7 +22734,7 @@
22734
22734
  "module": "/src/components/buttonsimple/buttonsimple.component"
22735
22735
  },
22736
22736
  "tagName": "mdc-linkbutton",
22737
- "jsDoc": "/**\n * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.\n *\n * ### Features:\n * - Looks like a link, behaves like a button.\n * - Supports slots for a text label and an optional trailing icon.\n * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-linkbutton\n *\n * @slot - Text label of the linkbutton.\n *\n * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.\n * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the linkbutton loses focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.\n * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.\n * @cssproperty --mdc-button-height - Height for button size\n */",
22737
+ "jsDoc": "/**\n * @tagname mdc-linkbutton\n *\n * @dependency mdc-icon\n *\n * @slot - Text label of the linkbutton.\n *\n * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.\n * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the linkbutton loses focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.\n * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.\n * @cssproperty --mdc-button-height - Height for button size\n */",
22738
22738
  "customElement": true
22739
22739
  }
22740
22740
  ],
@@ -22755,7 +22755,7 @@
22755
22755
  "declarations": [
22756
22756
  {
22757
22757
  "kind": "class",
22758
- "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
22758
+ "description": "",
22759
22759
  "name": "Linksimple",
22760
22760
  "cssProperties": [
22761
22761
  {
@@ -23130,7 +23130,7 @@
23130
23130
  "module": "/src/models"
23131
23131
  },
23132
23132
  "tagName": "mdc-linksimple",
23133
- "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n *\n * @csspart anchor - The anchor element that wraps the linksimple content.\n */",
23133
+ "jsDoc": "/**\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n *\n * @csspart anchor - The anchor element that wraps the linksimple content.\n */",
23134
23134
  "customElement": true
23135
23135
  }
23136
23136
  ],
@@ -23151,7 +23151,7 @@
23151
23151
  "declarations": [
23152
23152
  {
23153
23153
  "kind": "class",
23154
- "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
23154
+ "description": "",
23155
23155
  "name": "List",
23156
23156
  "cssParts": [
23157
23157
  {
@@ -23389,7 +23389,7 @@
23389
23389
  "module": "/src/models"
23390
23390
  },
23391
23391
  "tagName": "mdc-list",
23392
- "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
23392
+ "jsDoc": "/**\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
23393
23393
  "customElement": true
23394
23394
  }
23395
23395
  ],
@@ -23410,7 +23410,7 @@
23410
23410
  "declarations": [
23411
23411
  {
23412
23412
  "kind": "class",
23413
- "description": "listbox component presents a list of options and allows a user to select one or more of them.\n\nWhen `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection\ninstead of replacing the current selection.\n\nNotes:\n- This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n- this component has name and value attributes and also emits change event,\n but it is not a form control (yet).",
23413
+ "description": "",
23414
23414
  "name": "ListBox",
23415
23415
  "cssProperties": [
23416
23416
  {
@@ -23690,7 +23690,7 @@
23690
23690
  "module": "/src/models"
23691
23691
  },
23692
23692
  "tagName": "mdc-listbox",
23693
- "jsDoc": "/**\n * listbox component presents a list of options and allows a user to select one or more of them.\n *\n * When `multiple` is enabled, clicking/pressing Enter/Space on an option toggles its selection\n * instead of replacing the current selection.\n *\n * Notes:\n * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n * - this component has name and value attributes and also emits change event,\n * but it is not a form control (yet).\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @tagname mdc-listbox\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
23693
+ "jsDoc": "/**\n * @tagname mdc-listbox\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
23694
23694
  "customElement": true
23695
23695
  }
23696
23696
  ],
@@ -23711,7 +23711,7 @@
23711
23711
  "declarations": [
23712
23712
  {
23713
23713
  "kind": "class",
23714
- "description": "Listheader component is used to display a header in a list.\nIt can include icons before and after the header text, and allows for additional content via slots.",
23714
+ "description": "",
23715
23715
  "name": "Listheader",
23716
23716
  "cssProperties": [
23717
23717
  {
@@ -23827,7 +23827,7 @@
23827
23827
  "module": "/src/models"
23828
23828
  },
23829
23829
  "tagName": "mdc-listheader",
23830
- "jsDoc": "/**\n * Listheader component is used to display a header in a list.\n * It can include icons before and after the header text, and allows for additional content via slots.\n *\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n *\n * @csspart header-text - The header text of list header\n * @csspart postfix-icon - The postfix icon of list header\n * @csspart prefix-icon - The prefix icon of list header\n */",
23830
+ "jsDoc": "/**\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n *\n * @csspart header-text - The header text of list header\n * @csspart postfix-icon - The postfix icon of list header\n * @csspart prefix-icon - The prefix icon of list header\n */",
23831
23831
  "customElement": true
23832
23832
  }
23833
23833
  ],
@@ -23848,7 +23848,7 @@
23848
23848
  "declarations": [
23849
23849
  {
23850
23850
  "kind": "class",
23851
- "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\n**Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\nConsumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.",
23851
+ "description": "",
23852
23852
  "name": "ListItem",
23853
23853
  "cssProperties": [
23854
23854
  {
@@ -24451,7 +24451,7 @@
24451
24451
  "module": "/src/models"
24452
24452
  },
24453
24453
  "tagName": "mdc-listitem",
24454
- "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n * - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n * - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
24454
+ "jsDoc": "/**\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n * - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n * - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
24455
24455
  "customElement": true
24456
24456
  }
24457
24457
  ],
@@ -24472,7 +24472,7 @@
24472
24472
  "declarations": [
24473
24473
  {
24474
24474
  "kind": "class",
24475
- "description": "The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content\nor signify important information. It provides visual emphasis through color and pattern variations.\n\nMarkers are commonly used alongside list items, cards, or content blocks to indicate status,\npriority, or categorization.\n\n## When to use\nUse markers to highlight important content, indicate status or priority levels, or provide\nvisual categorization in lists and layouts.\n\n## Accessibility\n- Markers are purely decorative and should not convey information solely through color\n- Always pair markers with text labels or other indicators to convey meaning\n- Ensure sufficient color contrast for visibility",
24475
+ "description": "",
24476
24476
  "name": "Marker",
24477
24477
  "cssProperties": [
24478
24478
  {
@@ -24522,7 +24522,7 @@
24522
24522
  "module": "/src/models"
24523
24523
  },
24524
24524
  "tagName": "mdc-marker",
24525
- "jsDoc": "/**\n * The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content\n * or signify important information. It provides visual emphasis through color and pattern variations.\n *\n * Markers are commonly used alongside list items, cards, or content blocks to indicate status,\n * priority, or categorization.\n *\n * ## When to use\n * Use markers to highlight important content, indicate status or priority levels, or provide\n * visual categorization in lists and layouts.\n *\n * ## Accessibility\n * - Markers are purely decorative and should not convey information solely through color\n * - Always pair markers with text labels or other indicators to convey meaning\n * - Ensure sufficient color contrast for visibility\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Background color for solid variant markers.\n * @cssproperty --mdc-marker-striped-color - Stripe color for striped variant markers.\n * @cssproperty --mdc-marker-striped-background-color - Background color for striped variant markers.\n * @cssproperty --mdc-marker-width - Width (thickness) of the marker line.\n */",
24525
+ "jsDoc": "/**\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Background color for solid variant markers.\n * @cssproperty --mdc-marker-striped-color - Stripe color for striped variant markers.\n * @cssproperty --mdc-marker-striped-background-color - Background color for striped variant markers.\n * @cssproperty --mdc-marker-width - Width (thickness) of the marker line.\n */",
24526
24526
  "customElement": true
24527
24527
  }
24528
24528
  ],
@@ -24543,7 +24543,7 @@
24543
24543
  "declarations": [
24544
24544
  {
24545
24545
  "kind": "class",
24546
- "description": "Menubar is a navigational menu component that provides a vertical fixed list of menu items,\nwith support for nested submenus and keyboard navigation. It serves as a container\nfor menu items and manages their interaction patterns, including:\n- Keyboard navigation (Arrow keys, Home, End)\n- Menu item activation (Enter/Space)\n- Submenu toggling (Right/Left arrow keys)\n- Focus management\n- Integration with MenuPopover for nested menus\n\nA menubar will contain a set of menu items and their associated popovers.\nEach menu item can have a popover for nested menus.\n\nThe component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\nIt works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n\n**Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n\n`mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.",
24546
+ "description": "",
24547
24547
  "name": "MenuBar",
24548
24548
  "slots": [
24549
24549
  {
@@ -24861,7 +24861,7 @@
24861
24861
  "module": "/src/models"
24862
24862
  },
24863
24863
  "tagName": "mdc-menubar",
24864
- "jsDoc": "/**\n * Menubar is a navigational menu component that provides a vertical fixed list of menu items,\n * with support for nested submenus and keyboard navigation. It serves as a container\n * for menu items and manages their interaction patterns, including:\n * - Keyboard navigation (Arrow keys, Home, End)\n * - Menu item activation (Enter/Space)\n * - Submenu toggling (Right/Left arrow keys)\n * - Focus management\n * - Integration with MenuPopover for nested menus\n *\n * A menubar will contain a set of menu items and their associated popovers.\n * Each menu item can have a popover for nested menus.\n *\n * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\n * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n *\n * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n *\n * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.\n *\n * @tagname mdc-menubar\n * @slot default - Contains the menu items and their associated popovers\n */",
24864
+ "jsDoc": "/**\n * @tagname mdc-menubar\n * @slot default - Contains the menu items and their associated popovers\n */",
24865
24865
  "customElement": true
24866
24866
  }
24867
24867
  ],
@@ -24882,7 +24882,7 @@
24882
24882
  "declarations": [
24883
24883
  {
24884
24884
  "kind": "class",
24885
- "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\n**Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\nConsumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.",
24885
+ "description": "",
24886
24886
  "name": "MenuItem",
24887
24887
  "cssParts": [
24888
24888
  {
@@ -25695,7 +25695,7 @@
25695
25695
  "module": "/src/components/listitem/listitem.component"
25696
25696
  },
25697
25697
  "tagName": "mdc-menuitem",
25698
- "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\n * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
25698
+ "jsDoc": "/**\n * @tagname mdc-menuitem\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
25699
25699
  "customElement": true,
25700
25700
  "cssProperties": [
25701
25701
  {
@@ -25814,7 +25814,7 @@
25814
25814
  "declarations": [
25815
25815
  {
25816
25816
  "kind": "class",
25817
- "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
25817
+ "description": "",
25818
25818
  "name": "MenuItemCheckbox",
25819
25819
  "cssProperties": [
25820
25820
  {
@@ -26905,7 +26905,7 @@
26905
26905
  "module": "/src/components/menuitem/menuitem.component"
26906
26906
  },
26907
26907
  "tagName": "mdc-menuitemcheckbox",
26908
- "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n *\n * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.\n *\n * @csspart checkmark-icon - Allows customization of the checkmark icon.\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
26908
+ "jsDoc": "/**\n * @tagname mdc-menuitemcheckbox\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n *\n * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.\n *\n * @csspart checkmark-icon - Allows customization of the checkmark icon.\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
26909
26909
  "customElement": true
26910
26910
  }
26911
26911
  ],
@@ -26926,7 +26926,7 @@
26926
26926
  "declarations": [
26927
26927
  {
26928
26928
  "kind": "class",
26929
- "description": "A menuitemradio component is a checkable menuitem that is used in a menu.\nA menuitemradio should be checked only one at a time. <br/>\nThere should be no focusable descendants inside this menuitemradio component.\n\nThe `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n\nMenu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nIf you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n\nThe `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>radio</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe checkmark will always be positioned on the trailing side.\n\nThe radio will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe third options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.",
26929
+ "description": "",
26930
26930
  "name": "MenuItemRadio",
26931
26931
  "cssProperties": [
26932
26932
  {
@@ -28028,7 +28028,7 @@
28028
28028
  "module": "/src/components/menuitem/menuitem.component"
28029
28029
  },
28030
28030
  "tagName": "mdc-menuitemradio",
28031
- "jsDoc": "/**\n * A menuitemradio component is a checkable menuitem that is used in a menu.\n * A menuitemradio should be checked only one at a time. <br/>\n * There should be no focusable descendants inside this menuitemradio component.\n *\n * The `checked` menuitemradio attribute is used to indicate that the menuitemradio is checked or not.\n *\n * Menu item radio has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * If you want more than one item in a group to be checked, consider using menuitemcheckbox component.\n *\n * The `indicator` attribute is used to differentiate between <b>radio</b>, <b>checkmark</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>radio</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the checkmark will always be positioned on the trailing side.\n *\n * The radio will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The third options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitemradio\n *\n * @slot leading-controls - slot for menu item radio controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item radio primary label.\n * @slot leading-text-secondary-label - slot for menu item radio secondary label.\n * @slot leading-text-tertiary-label - slot for menu item radio tertiary label.\n * @slot trailing-text-side-header - slot for menu item radio side header text.\n * @slot trailing-text-subline - slot for menu item radio subline text.\n * @slot trailing-controls - slot for menu item radio controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.\n *\n * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemradio.\n *\n * @csspart checkmark-icon - Allows customization of the checkmark icon.\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
28031
+ "jsDoc": "/**\n * @tagname mdc-menuitemradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @slot leading-controls - slot for menu item radio controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item radio primary label.\n * @slot leading-text-secondary-label - slot for menu item radio secondary label.\n * @slot leading-text-tertiary-label - slot for menu item radio tertiary label.\n * @slot trailing-text-side-header - slot for menu item radio side header text.\n * @slot trailing-text-subline - slot for menu item radio subline text.\n * @slot trailing-controls - slot for menu item radio controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemradio changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemradio is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemradio receives focus.\n *\n * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemradio.\n *\n * @csspart checkmark-icon - Allows customization of the checkmark icon.\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
28032
28032
  "customElement": true
28033
28033
  }
28034
28034
  ],
@@ -28049,7 +28049,7 @@
28049
28049
  "declarations": [
28050
28050
  {
28051
28051
  "kind": "class",
28052
- "description": "A popover menu component that displays a list of menu items in a floating container.\nIt's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\naccessible, nested menu structures with the following features:\n- Appears adjacent to the triggering menu item\n- Supports keyboard navigation (arrow keys, Home, End)\n- Manages focus trapping when open\n- Closes on Escape key or outside click\n- Supports both mouse and keyboard interactions\n- Automatically handles ARIA attributes for accessibility\n\nThe component extends `mdc-popover` and adds menu-specific behaviors and styling.\nWhen nested within another `mdc-menupopover`, it automatically adjusts its behavior\nto work as a submenu (right-aligned, shows on hover).\n\nThe orientation of the menu popover is always set to `vertical`.\n\nSubmenu opens when:\n- Clicked on a menu item with a submenu\n- Enter or Space key pressed on a menu item with a submenu\n\nMenu closes completely (with all sub menus) when:\n- A menu item is clicked that does not have a submenu\n- Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox\n- Click outside the menu popover (on the backdrop)\n\nClose submenus when:\n- Esc key pressed, only the current submenu closed\n- Arrow Left key pressed, only the current submenu closed\n- Open another submenu with Click, Enter or Space key,\n closes recursively all submenus until the selected item's submenu\n\nMenu does not close when:\n- Space key pressed on a menu item radio or menu item checkbox",
28052
+ "description": "",
28053
28053
  "name": "MenuPopover",
28054
28054
  "cssParts": [
28055
28055
  {
@@ -29588,7 +29588,7 @@
29588
29588
  "module": "/src/components/popover/popover.component"
29589
29589
  },
29590
29590
  "tagName": "mdc-menupopover",
29591
- "jsDoc": "/**\n * A popover menu component that displays a list of menu items in a floating container.\n * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create\n * accessible, nested menu structures with the following features:\n * - Appears adjacent to the triggering menu item\n * - Supports keyboard navigation (arrow keys, Home, End)\n * - Manages focus trapping when open\n * - Closes on Escape key or outside click\n * - Supports both mouse and keyboard interactions\n * - Automatically handles ARIA attributes for accessibility\n *\n * The component extends `mdc-popover` and adds menu-specific behaviors and styling.\n * When nested within another `mdc-menupopover`, it automatically adjusts its behavior\n * to work as a submenu (right-aligned, shows on hover).\n *\n * The orientation of the menu popover is always set to `vertical`.\n *\n * Submenu opens when:\n * - Clicked on a menu item with a submenu\n * - Enter or Space key pressed on a menu item with a submenu\n *\n * Menu closes completely (with all sub menus) when:\n * - A menu item is clicked that does not have a submenu\n * - Enter key pressed on a menu item (not a submenu trigger), menu item radio or menu item checkbox\n * - Click outside the menu popover (on the backdrop)\n *\n * Close submenus when:\n * - Esc key pressed, only the current submenu closed\n * - Arrow Left key pressed, only the current submenu closed\n * - Open another submenu with Click, Enter or Space key,\n * closes recursively all submenus until the selected item's submenu\n *\n * Menu does not close when:\n * - Space key pressed on a menu item radio or menu item checkbox\n *\n * @tagname mdc-menupopover\n *\n * @slot - Default slot for the menu popover content\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.\n *\n * @slot default - Contains the menu items to be displayed in the popover\n *\n * @csspart popover-close - The close button of the menupopover.\n * @csspart popover-content - The content of the menupopover.\n * @csspart popover-hover-bridge - The hover bridge of the menupopover.\n */",
29591
+ "jsDoc": "/**\n * @tagname mdc-menupopover\n *\n * @slot - Default slot for the menu popover content\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a menuItem selected and the menu closes.\n *\n * @slot default - Contains the menu items to be displayed in the popover\n *\n * @csspart popover-close - The close button of the menupopover.\n * @csspart popover-content - The content of the menupopover.\n * @csspart popover-hover-bridge - The hover bridge of the menupopover.\n */",
29592
29592
  "customElement": true,
29593
29593
  "cssProperties": [
29594
29594
  {
@@ -29707,7 +29707,7 @@
29707
29707
  "declarations": [
29708
29708
  {
29709
29709
  "kind": "class",
29710
- "description": "`mdc-menusection` is a container element used to group a set of menu items.\n\nThis component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components. MenuSection can not be nested.\n\n- If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n only one radio item can be selected at a time.\n- If `menuitemcheckbox` components are included, their checked state can be toggled independently.",
29710
+ "description": "",
29711
29711
  "name": "MenuSection",
29712
29712
  "cssProperties": [
29713
29713
  {
@@ -29868,7 +29868,7 @@
29868
29868
  "module": "/src/models"
29869
29869
  },
29870
29870
  "tagName": "mdc-menusection",
29871
- "jsDoc": "/**\n * `mdc-menusection` is a container element used to group a set of menu items.\n *\n * This component supports a mix of `menuitem`, `menuitemcheckbox`, and `menuitemradio` components. MenuSection can not be nested.\n *\n * - If multiple `menuitemradio` components are slotted into the section, the group enforces a single-selection rule:\n * only one radio item can be selected at a time.\n * - If `menuitemcheckbox` components are included, their checked state can be toggled independently.\n *\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.\n *\n * @csspart header - The header of the menusection.\n * @csspart align-header - The header of the menusection when it is aligned to the start.\n * @csspart container - The container of the menusection.\n * @csspart divider - The divider of the menusection.\n *\n * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.\n * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.\n * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.\n * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.\n */",
29871
+ "jsDoc": "/**\n * @tagname mdc-menusection\n *\n * @slot - Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`\n *\n * @event change - (React: onChange) This event is dispatched when a `menuitemcheckbox`, or `menuitemradio` changes.\n * @event action - (React: onAction) This event is dispatched when a `menuitem` selected.\n *\n * @csspart header - The header of the menusection.\n * @csspart align-header - The header of the menusection when it is aligned to the start.\n * @csspart container - The container of the menusection.\n * @csspart divider - The divider of the menusection.\n *\n * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.\n * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.\n * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.\n * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.\n */",
29872
29872
  "customElement": true
29873
29873
  }
29874
29874
  ],
@@ -29889,7 +29889,7 @@
29889
29889
  "declarations": [
29890
29890
  {
29891
29891
  "kind": "class",
29892
- "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nThe navmenuitem can be in an active or inactive state, indicating whether it is currently selected.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.",
29892
+ "description": "",
29893
29893
  "name": "NavMenuItem",
29894
29894
  "cssProperties": [
29895
29895
  {
@@ -31208,7 +31208,7 @@
31208
31208
  "module": "/src/components/menuitem/menuitem.component"
31209
31209
  },
31210
31210
  "tagName": "mdc-navmenuitem",
31211
- "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * The navmenuitem can be in an active or inactive state, indicating whether it is currently selected.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the navmenuitem. This tooltip is useful when an active navmenuitem is present within a submenu of the sidenavigation component.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
31211
+ "jsDoc": "/**\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
31212
31212
  "customElement": true,
31213
31213
  "slots": [
31214
31214
  {
@@ -31295,7 +31295,7 @@
31295
31295
  "declarations": [
31296
31296
  {
31297
31297
  "kind": "class",
31298
- "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
31298
+ "description": "",
31299
31299
  "name": "OptGroup",
31300
31300
  "cssProperties": [
31301
31301
  {
@@ -31418,7 +31418,7 @@
31418
31418
  "module": "/src/models"
31419
31419
  },
31420
31420
  "tagName": "mdc-optgroup",
31421
- "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n *\n * @csspart header-text - The header text of the optgroup.\n */",
31421
+ "jsDoc": "/**\n * @tagname mdc-optgroup\n *\n * @dependency mdc-text\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n *\n * @csspart header-text - The header text of the optgroup.\n */",
31422
31422
  "customElement": true
31423
31423
  }
31424
31424
  ],
@@ -31439,7 +31439,7 @@
31439
31439
  "declarations": [
31440
31440
  {
31441
31441
  "kind": "class",
31442
- "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\n\n**Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\nConsumers need to add a unique ID to this option and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the option using the `triggerID` attribute.",
31442
+ "description": "",
31443
31443
  "name": "Option",
31444
31444
  "cssProperties": [
31445
31445
  {
@@ -32432,7 +32432,7 @@
32432
32432
  "module": "/src/components/listitem/listitem.component"
32433
32433
  },
32434
32434
  "tagName": "mdc-option",
32435
- "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n *\n * **Note**: If an option contains a long text, it is recommended to create a tooltip for the option that displays the full text on hover.\n * Consumers need to add a unique ID to this option and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the option using the `triggerID` attribute.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n *\n * @cssproperty --mdc-listitem-column-gap - gap between columns in the option\n * @cssproperty --mdc-option-icon-width - width of the icon in the option\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
32435
+ "jsDoc": "/**\n * @tagname mdc-option\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n *\n * @cssproperty --mdc-listitem-column-gap - gap between columns in the option\n * @cssproperty --mdc-option-icon-width - width of the icon in the option\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
32436
32436
  "customElement": true,
32437
32437
  "slots": [
32438
32438
  {
@@ -32519,7 +32519,7 @@
32519
32519
  "declarations": [
32520
32520
  {
32521
32521
  "kind": "class",
32522
- "description": "`mdc-password` is a component that allows users to input their password.\n It extends the `mdc-input` component and provides additional features specific to password fields.\n It contains:\n- `label` field - describe the password field.\n- `password` field - contains the value\n- `help-text` or `validation-message` - displayed below the password field.\n- `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n- `show-button-aria-label` - aria label for the trailing show button.\n- `hide-button-aria-label` - aria label for the trailing hide button.\n- all the attributes of the native password field.",
32522
+ "description": "",
32523
32523
  "name": "Password",
32524
32524
  "cssProperties": [
32525
32525
  {
@@ -34160,7 +34160,7 @@
34160
34160
  "module": "/src/components/input/input.component"
34161
34161
  },
34162
34162
  "tagName": "mdc-password",
34163
- "jsDoc": "/**\n * `mdc-password` is a component that allows users to input their password.\n * It extends the `mdc-input` component and provides additional features specific to password fields.\n * It contains:\n * - `label` field - describe the password field.\n * - `password` field - contains the value\n * - `help-text` or `validation-message` - displayed below the password field.\n * - `help-text-type` - type of the help text, can be 'default', 'error', 'warning', 'success', 'priority'.\n * - `show-button-aria-label` - aria label for the trailing show button.\n * - `hide-button-aria-label` - aria label for the trailing hide button.\n * - all the attributes of the native password field.\n *\n * @tagname mdc-password\n *\n * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the password receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the password loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.\n * @csspart input-section - The container that wraps the input field and prefix text.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element.\n * @csspart label - The label element.\n * @csspart helper-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart toggletip - The toggletip icon button element.\n * @csspart toggletip-text - The toggletip text element.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n */",
34163
+ "jsDoc": "/**\n * @tagname mdc-password\n *\n * @event input - (React: onInput) This event is dispatched when the value of the password field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the password field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the password receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the password loses focus.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing button.\n * @csspart input-section - The container that wraps the input field and prefix text.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element.\n * @csspart label - The label element.\n * @csspart helper-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart toggletip - The toggletip icon button element.\n * @csspart toggletip-text - The toggletip text element.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n */",
34164
34164
  "customElement": true
34165
34165
  }
34166
34166
  ],
@@ -34181,7 +34181,7 @@
34181
34181
  "declarations": [
34182
34182
  {
34183
34183
  "kind": "class",
34184
- "description": "Popover is generic overlay which can be triggered by any actionable element.\n\nIt can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed.\nIt uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n\n## Limitations\n\n### On trigger for multiple popovers\n\nA component (button, etc.) can trigger more than one popover, but only one of them should change the\naria-expanded and aria-haspopup attributes on the trigger.\n\nTo prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\nPopovers except one.\n\n### React Popover with append-to attribute\n\nReact mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\nand mounts to the specified element. React will not know about the move and will not know about the\nnewly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\nadded/removed by React, for example:\n\n```tsx\nconst SomeComponent = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (<div>\n {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n </div>);\n}\n```\nAs a workaround Popover need to wrap with any other element/component, for example:\n```tsx\nconst SomeComponent = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (<div>\n {isOpen && <div>\n <Popover append-to=\"some-element-id\">...</mdc-popover>\n <div>}\n </div>);\n}\n```\nNote the wrapper <div> around the Popover component (React.Fragment does not work).",
34184
+ "description": "",
34185
34185
  "name": "Popover",
34186
34186
  "cssProperties": [
34187
34187
  {
@@ -35177,7 +35177,7 @@
35177
35177
  "module": "/src/models"
35178
35178
  },
35179
35179
  "tagName": "mdc-popover",
35180
- "jsDoc": "/**\n * Popover is generic overlay which can be triggered by any actionable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popovers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * return (<div>\n * {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n * </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * return (<div>\n * {isOpen && <div>\n * <Popover append-to=\"some-element-id\">...</mdc-popover>\n * <div>}\n * </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n * @cssproperty --mdc-popover-backdrop-color - background color of the backdrop (if backdrop is enabled)\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
35180
+ "jsDoc": "/**\n * @tagname mdc-popover\n *\n * @dependency mdc-button\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n * @cssproperty --mdc-popover-backdrop-color - background color of the backdrop (if backdrop is enabled)\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
35181
35181
  "customElement": true
35182
35182
  }
35183
35183
  ],
@@ -35218,7 +35218,7 @@
35218
35218
  "declarations": [
35219
35219
  {
35220
35220
  "kind": "class",
35221
- "description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
35221
+ "description": "",
35222
35222
  "name": "Presence",
35223
35223
  "cssProperties": [
35224
35224
  {
@@ -35444,7 +35444,7 @@
35444
35444
  "module": "/src/models"
35445
35445
  },
35446
35446
  "tagName": "mdc-presence",
35447
- "jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n *\n * @csspart presence-content - The presence content.\n * @csspart mdc-presence-icon - The presence icon.\n * @csspart mdc-presence-icon__active - The presence icon for active.\n * @csspart mdc-presence-icon__away - The presence icon for away.\n * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.\n * @csspart mdc-presence-icon__busy - The presence icon for busy.\n * @csspart mdc-presence-icon__dnd - The presence icon for dnd.\n * @csspart mdc-presence-icon__meeting - The presence icon for meeting.\n * @csspart mdc-presence-icon__on-call - The presence icon for on-call.\n * @csspart mdc-presence-icon__on-device - The presence icon for on-device.\n * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.\n * @csspart mdc-presence-icon__pause - The presence icon for pause.\n * @csspart mdc-presence-icon__pto - The presence icon for pto.\n * @csspart mdc-presence-icon__presenting - The presence icon for presenting.\n * @csspart mdc-presence-icon__quiet - The presence icon for quiet.\n * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.\n */",
35447
+ "jsDoc": "/**\n * @tagname mdc-presence\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n *\n * @csspart presence-content - The presence content.\n * @csspart mdc-presence-icon - The presence icon.\n * @csspart mdc-presence-icon__active - The presence icon for active.\n * @csspart mdc-presence-icon__away - The presence icon for away.\n * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.\n * @csspart mdc-presence-icon__busy - The presence icon for busy.\n * @csspart mdc-presence-icon__dnd - The presence icon for dnd.\n * @csspart mdc-presence-icon__meeting - The presence icon for meeting.\n * @csspart mdc-presence-icon__on-call - The presence icon for on-call.\n * @csspart mdc-presence-icon__on-device - The presence icon for on-device.\n * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.\n * @csspart mdc-presence-icon__pause - The presence icon for pause.\n * @csspart mdc-presence-icon__pto - The presence icon for pto.\n * @csspart mdc-presence-icon__presenting - The presence icon for presenting.\n * @csspart mdc-presence-icon__quiet - The presence icon for quiet.\n * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.\n */",
35448
35448
  "customElement": true
35449
35449
  }
35450
35450
  ],
@@ -35465,7 +35465,7 @@
35465
35465
  "declarations": [
35466
35466
  {
35467
35467
  "kind": "class",
35468
- "description": "mdc-progressbar component visually represents a progress indicator, typically used to show\nthe completion state of an ongoing process (e.g., loading, file upload, etc.).\nIt contains an optional label and an optional helper text.\n\n- It supports mainly two types: Default and Inline\n- It supports three validation variants: Default, Success and Error.\n\nThis component is created by extending FormfieldWrapper.",
35468
+ "description": "",
35469
35469
  "name": "Progressbar",
35470
35470
  "cssProperties": [
35471
35471
  {
@@ -36145,7 +36145,7 @@
36145
36145
  "module": "/src/components/formfieldwrapper"
36146
36146
  },
36147
36147
  "tagName": "mdc-progressbar",
36148
- "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart help-text - The helper/validation text element.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n */",
36148
+ "jsDoc": "/**\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart help-text - The helper/validation text element.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-progress-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n */",
36149
36149
  "customElement": true
36150
36150
  }
36151
36151
  ],
@@ -36166,7 +36166,7 @@
36166
36166
  "declarations": [
36167
36167
  {
36168
36168
  "kind": "class",
36169
- "description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
36169
+ "description": "",
36170
36170
  "name": "Progressspinner",
36171
36171
  "cssProperties": [
36172
36172
  {
@@ -36728,7 +36728,7 @@
36728
36728
  "module": "/src/components/progressbar/progressbar.component"
36729
36729
  },
36730
36730
  "tagName": "mdc-progressspinner",
36731
- "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n * @csspart error-icon - The error icon of the progressspinner.\n * @csspart spinner-base - The base of the progressspinner.\n * @csspart spinner-container - The container of the progressspinner.\n * @csspart spinner-progress - The progress of the progressspinner.\n * @csspart spinner-track - The track of the progressspinner.\n * @csspart success-icon - The success icon of the progressspinner.\n */",
36731
+ "jsDoc": "/**\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n * @csspart error-icon - The error icon of the progressspinner.\n * @csspart spinner-base - The base of the progressspinner.\n * @csspart spinner-container - The container of the progressspinner.\n * @csspart spinner-progress - The progress of the progressspinner.\n * @csspart spinner-track - The track of the progressspinner.\n * @csspart success-icon - The success icon of the progressspinner.\n */",
36732
36732
  "customElement": true,
36733
36733
  "attributes": [
36734
36734
  {
@@ -36976,7 +36976,7 @@
36976
36976
  "declarations": [
36977
36977
  {
36978
36978
  "kind": "class",
36979
- "description": "The Radio component allows users to select a single option from a group of mutually exclusive choices.\nUnlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\nat a time within the same group. These are commonly used in forms, surveys, and settings where users\nneed to make a single selection from multiple options.\n\nTo create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\nshare the same `name` attribute.\n\n## Validation\n\nRadio component support native form validation. But it does not have default validation message.\nAlso, `required` attribute does not render indicator (red asterisk) for the radio component.\n\nThe recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\nand set the `help-text` of the `mdc-radiogroup` based on its validation state.\n\nAlternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\nin a native tooltip when the radio is checked and invalid.\n\n## Accessibility\n\n- Provide clear labels that describe each option\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n- Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n\n## Styling\n\nUse the `radio-indicator` part to apply custom styles to the radio visual element.\nThis part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n\nThe `indicator` slot allows replacing the default radio circle with a custom element.\nWhen a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`\nclass to the host element. This shifts the focus ring from the default static radio to the\nentire host element, ensuring keyboard focus remains visible.",
36979
+ "description": "",
36980
36980
  "name": "Radio",
36981
36981
  "cssParts": [
36982
36982
  {
@@ -37721,7 +37721,7 @@
37721
37721
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
37722
37722
  },
37723
37723
  "tagName": "mdc-radio",
37724
- "jsDoc": "/**\n * The Radio component allows users to select a single option from a group of mutually exclusive choices.\n * Unlike checkboxes which allow multiple selections, radio buttons ensure only one option can be selected\n * at a time within the same group. These are commonly used in forms, surveys, and settings where users\n * need to make a single selection from multiple options.\n *\n * To create a group of radio buttons, use the `mdc-radiogroup` component or ensure all radio buttons\n * share the same `name` attribute.\n *\n * ## Validation\n *\n * Radio component support native form validation. But it does not have default validation message.\n * Also, `required` attribute does not render indicator (red asterisk) for the radio component.\n *\n * The recommended way to show validation message for radio groups is to wrap the `mdc-radio` with `mdc-radiogroup`\n * and set the `help-text` of the `mdc-radiogroup` based on its validation state.\n *\n * Alternatively you can also set the `validation-message` attribute of the `mdc-radio`. This message will appear\n * in a native tooltip when the radio is checked and invalid.\n *\n * ## Accessibility\n *\n * - Provide clear labels that describe each option\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Arrow keys to move between options, Space to select, Tab to navigate groups, Enter to submit form\n * - Group related radio buttons using the same `name` attribute or `mdc-radiogroup` component\n *\n * ## Styling\n *\n * Use the `radio-indicator` part to apply custom styles to the radio visual element.\n * This part exposes the underlying [StaticRadio](?path=/docs/components-decorator-staticradio--docs) component for advanced styling.\n *\n * The `indicator` slot allows replacing the default radio circle with a custom element.\n * When a custom indicator is slotted, the component automatically adds the `mdc-focus-ring`\n * class to the host element. This shifts the focus ring from the default static radio to the\n * entire host element, ensuring keyboard focus remains visible.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart radio-indicator - The staticradio that provides the visual radio appearance.\n *\n * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.\n * @slot label - Slot for the label of the radio.\n */",
37724
+ "jsDoc": "/**\n * @tagname mdc-radio\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) Event that gets dispatched when the radio state changes (before the change event).\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes (after the input event).\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart radio-indicator - The staticradio that provides the visual radio appearance.\n *\n * @slot indicator - Slot for the radio indicator element. If not provided, a default styled radio will be rendered.\n * @slot label - Slot for the label of the radio.\n */",
37725
37725
  "customElement": true,
37726
37726
  "cssProperties": [
37727
37727
  {
@@ -37816,7 +37816,7 @@
37816
37816
  "declarations": [
37817
37817
  {
37818
37818
  "kind": "class",
37819
- "description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
37819
+ "description": "",
37820
37820
  "name": "RadioGroup",
37821
37821
  "members": [
37822
37822
  {
@@ -38230,7 +38230,7 @@
38230
38230
  "module": "/src/components/formfieldgroup"
38231
38231
  },
38232
38232
  "tagName": "mdc-radiogroup",
38233
- "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n */",
38233
+ "jsDoc": "/**\n * @tagname mdc-radiogroup\n *\n */",
38234
38234
  "customElement": true,
38235
38235
  "slots": [
38236
38236
  {
@@ -38441,7 +38441,7 @@
38441
38441
  "declarations": [
38442
38442
  {
38443
38443
  "kind": "class",
38444
- "description": "`mdc-responsivesettingsprovider` is a provider component that supplies responsive settings\ncontext to its child components.\n\nThis component does not make any assumptions about how the values are determined. Values can be set\nbased on media queries or other device detection mechanisms.This way consumer can mix and match\ndifferent settings depending on their target devices and use cases.\n\nFor example, when the device has table screen size/resolution, but because it is fixed dialog like\npopovers provide better user experience.\n\n## Responsive settings\n\n### Media\n\nGeneric media type to enforce responsive behavior in child components.\nConsumer component can use the media type from the context or\njust use CSS selector like [media=\"mobile\"] to apply responsive styles.\n\nIt is \"unknown\" by default so components can fall back to there default behavior.\n\n### Popover Positioning\n\nBy default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),\nit is often better to show popovers/menus at the center of the screen like dialogs.\n\n### Force Fullscreen Dialog\n\nSome components like dialogs can be shown in fullscreen mode on small screens for better user experience.",
38444
+ "description": "",
38445
38445
  "name": "ResponsiveSettingsProvider",
38446
38446
  "members": [
38447
38447
  {
@@ -38516,7 +38516,7 @@
38516
38516
  "module": "/src/models"
38517
38517
  },
38518
38518
  "tagName": "mdc-responsivesettingsprovider",
38519
- "jsDoc": "/**\n * `mdc-responsivesettingsprovider` is a provider component that supplies responsive settings\n * context to its child components.\n *\n * This component does not make any assumptions about how the values are determined. Values can be set\n * based on media queries or other device detection mechanisms.This way consumer can mix and match\n * different settings depending on their target devices and use cases.\n *\n * For example, when the device has table screen size/resolution, but because it is fixed dialog like\n * popovers provide better user experience.\n *\n * ## Responsive settings\n *\n * ### Media\n *\n * Generic media type to enforce responsive behavior in child components.\n * Consumer component can use the media type from the context or\n * just use CSS selector like [media=\"mobile\"] to apply responsive styles.\n *\n * It is \"unknown\" by default so components can fall back to there default behavior.\n *\n * ### Popover Positioning\n *\n * By default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),\n * it is often better to show popovers/menus at the center of the screen like dialogs.\n *\n * ### Force Fullscreen Dialog\n *\n * Some components like dialogs can be shown in fullscreen mode on small screens for better user experience.\n *\n * @tagname mdc-responsivesettingsprovider\n */",
38519
+ "jsDoc": "/**\n * @tagname mdc-responsivesettingsprovider\n */",
38520
38520
  "customElement": true
38521
38521
  }
38522
38522
  ],
@@ -38537,7 +38537,7 @@
38537
38537
  "declarations": [
38538
38538
  {
38539
38539
  "kind": "class",
38540
- "description": "`mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n\nTo make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n\nConsumers can also use the public `announce` function to trigger announcements programmatically\nby passing an options object where `announcement` is required and all other fields are optional.\n\n**Internal logic**\n\nWhen the screenreader announcer is connected to the DOM, if the `identity` attribute is not\nprovided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\nin the DOM. If the `identity` attribute is provided, the identity element is used and no new element\nis created in the DOM.\n\nIf you provide a custom `identity`, you must ensure that the element exists and is visually hidden.\n\nExample CSS:\n\n```css\n#your-custom-announcer-id {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n```\n\nWhen the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n`aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\nAfter delay of `delay` milliseconds, a `<p>` element with the announcement text is appended to the `<div>` element.\n\nThe announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n\nWhen the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\nall the announcement elements added are removed from the DOM and timeouts cleared.\n\n**Note**\n1. The default delay of 150 miliseconds is used as we dynamically generate the\naria-live region in the DOM and add the announcement text to it.\n2. If multiple `mdc-screenreaderannouncer` instances use the same `identity`, `data-aria-live`\nfor that identity is effectively determined by the first instance that creates announcements for it.\nChanging `data-aria-live` in later instances for the same identity will not update already-created\nlive-region containers.\n3. If no `identity` is provided, all the screen reader components will create and use only one\n`<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n\nReference: https://patrickhlauke.github.io/aria/tests/live-regions/",
38540
+ "description": "",
38541
38541
  "name": "ScreenreaderAnnouncer",
38542
38542
  "members": [
38543
38543
  {
@@ -38716,7 +38716,7 @@
38716
38716
  "module": "/src/models"
38717
38717
  },
38718
38718
  "tagName": "mdc-screenreaderannouncer",
38719
- "jsDoc": "/**\n * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.\n *\n * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.\n *\n * Consumers can also use the public `announce` function to trigger announcements programmatically\n * by passing an options object where `announcement` is required and all other fields are optional.\n *\n * **Internal logic**\n *\n * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not\n * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created\n * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element\n * is created in the DOM.\n *\n * If you provide a custom `identity`, you must ensure that the element exists and is visually hidden.\n *\n * Example CSS:\n *\n * ```css\n * #your-custom-announcer-id {\n * clip: rect(0 0 0 0);\n * clip-path: inset(50%);\n * height: 1px;\n * overflow: hidden;\n * position: absolute;\n * white-space: nowrap;\n * width: 1px;\n * }\n * ```\n *\n * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with\n * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.\n * After delay of `delay` milliseconds, a `<p>` element with the announcement text is appended to the `<div>` element.\n *\n * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.\n *\n * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and\n * all the announcement elements added are removed from the DOM and timeouts cleared.\n *\n * **Note**\n * 1. The default delay of 150 miliseconds is used as we dynamically generate the\n * aria-live region in the DOM and add the announcement text to it.\n * 2. If multiple `mdc-screenreaderannouncer` instances use the same `identity`, `data-aria-live`\n * for that identity is effectively determined by the first instance that creates announcements for it.\n * Changing `data-aria-live` in later instances for the same identity will not update already-created\n * live-region containers.\n * 3. If no `identity` is provided, all the screen reader components will create and use only one\n * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.\n *\n * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/\n *\n * @tagname mdc-screenreaderannouncer\n */",
38719
+ "jsDoc": "/**\n * @tagname mdc-screenreaderannouncer\n */",
38720
38720
  "customElement": true
38721
38721
  }
38722
38722
  ],
@@ -38737,7 +38737,7 @@
38737
38737
  "declarations": [
38738
38738
  {
38739
38739
  "kind": "class",
38740
- "description": "`mdc-searchfield` component is used as an input field for search functionality.\n\nIt supports any interactable Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\nChips are rendered inline with the search input text, behaving like single characters.\nUsers can traverse the cursor between chips and text using arrow keys,\nand remove a chip by pressing Backspace when the cursor is adjacent to it.\n\nThis component is built by extending the `mdc-input` component.\n\nSearchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n- In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n- In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).\n\n**Accessibility:**\n\nNOTE: this component should not be used in combination with a Popover or Listbox component.\nSearch results should be shown permanently on the page if using this component.\n\nFor a search field that opens a Popover, use the `mdc-searchpopover` widget instead.",
38740
+ "description": "",
38741
38741
  "name": "Searchfield",
38742
38742
  "cssProperties": [
38743
38743
  {
@@ -40000,7 +40000,7 @@
40000
40000
  "module": "/src/components/input/input.component"
40001
40001
  },
40002
40002
  "tagName": "mdc-searchfield",
40003
- "jsDoc": "/**\n * `mdc-searchfield` component is used as an input field for search functionality.\n *\n * It supports any interactable Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n * Chips are rendered inline with the search input text, behaving like single characters.\n * Users can traverse the cursor between chips and text using arrow keys,\n * and remove a chip by pressing Backspace when the cursor is adjacent to it.\n *\n * This component is built by extending the `mdc-input` component.\n *\n * Searchfield supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n * - In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).\n *\n * **Accessibility:**\n *\n * NOTE: this component should not be used in combination with a Popover or Listbox component.\n * Search results should be shown permanently on the page if using this component.\n *\n * For a search field that opens a Popover, use the `mdc-searchpopover` widget instead.\n *\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.\n *\n * @slot filters - Slot for chip filters rendered inline with the input text\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart searchfield-container - The inline flow container for chips and the input field.\n */",
40003
+ "jsDoc": "/**\n * @tagname mdc-searchfield\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip. In `uncontrolled` mode (default) the chip is removed from the DOM automatically; in `controlled` mode only the event is fired and the consumer is responsible for removing the chip.\n *\n * @slot filters - Slot for chip filters rendered inline with the input text\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart searchfield-container - The inline flow container for chips and the input field.\n */",
40004
40004
  "customElement": true,
40005
40005
  "attributes": [
40006
40006
  {
@@ -40438,7 +40438,7 @@
40438
40438
  "declarations": [
40439
40439
  {
40440
40440
  "kind": "class",
40441
- "description": "`mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\nproper accessibility. This component should be used when search results or suggestions need to be displayed\nin a popover below the search input field, where the search results hold individual actions like navigating to a\na different url etc.\n\n- Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n- Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n\nIt supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n\nThis component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.\n\nSearchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n- In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n- In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).",
40441
+ "description": "",
40442
40442
  "name": "Searchpopover",
40443
40443
  "cssProperties": [
40444
40444
  {
@@ -42250,7 +42250,7 @@
42250
42250
  "module": "/src/components/searchfield/searchfield.component"
42251
42251
  },
42252
42252
  "tagName": "mdc-searchpopover",
42253
- "jsDoc": "/**\n * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\n * proper accessibility. This component should be used when search results or suggestions need to be displayed\n * in a popover below the search input field, where the search results hold individual actions like navigating to a\n * a different url etc.\n *\n * - Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n * - Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n *\n * It supports any Chip component as filters. (`mdc-inputchip`, `mdc-alertchip`, `mdc-chip`)\n *\n * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.\n *\n * Searchpopover supports controlled vs uncontrolled behavior for chip filters, which can be set via the `control-type` attribute:\n * - In **uncontrolled** mode (default), when a chip is removed via the UI, it is automatically removed from the DOM and a `chipRemove` event is dispatched with the removed chip in the event detail. The consumer can listen to the `chipRemove` event but does not need to do anything to remove the chip from the DOM.\n * - In **controlled** mode (`control-type=\"controlled\"`), when a chip is removed via the UI, it is NOT removed from the DOM, but a `chipRemove` event is still dispatched with the \"removed\" chip in the event detail. The consumer must listen to the `chipRemove` event and handle removing the chip from the DOM themselves (e.g., by updating their state that controls which chips are rendered).\n *\n * @tagname mdc-searchpopover\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip.\n * In **controlled** mode (`control-type=\"controlled\"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it.\n * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n *\n * @slot default - Default slot (=children) for the popover content\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart popover-content - The popover content element.\n */",
42253
+ "jsDoc": "/**\n * @tagname mdc-searchpopover\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event chipRemove - (React: onChipRemove) This event is dispatched when a chip filter is removed. The removed chip element is available in event.detail.chip.\n * In **controlled** mode (`control-type=\"controlled\"`), the chip is NOT removed from the DOM automatically — the consumer is responsible for removing it.\n * In **uncontrolled** mode (default), the chip is removed from the DOM automatically.\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n *\n * @slot default - Default slot (=children) for the popover content\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart popover-content - The popover content element.\n */",
42254
42254
  "customElement": true
42255
42255
  }
42256
42256
  ],
@@ -42271,7 +42271,7 @@
42271
42271
  "declarations": [
42272
42272
  {
42273
42273
  "kind": "class",
42274
- "description": "The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\nIt is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nOptional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\nYou can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n\n**Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n\nIf you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.",
42274
+ "description": "",
42275
42275
  "name": "Select",
42276
42276
  "cssProperties": [
42277
42277
  {
@@ -43660,7 +43660,7 @@
43660
43660
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
43661
43661
  },
43662
43662
  "tagName": "mdc-select",
43663
- "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * Optional: Add `mdc-divider` after each option group (`mdc-optgroup`) to separate groups visually.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-height - The height of the select trigger control.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
43663
+ "jsDoc": "/**\n * @tagname mdc-select\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-height - The height of the select trigger control.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
43664
43664
  "customElement": true
43665
43665
  }
43666
43666
  ],
@@ -43681,7 +43681,7 @@
43681
43681
  "declarations": [
43682
43682
  {
43683
43683
  "kind": "class",
43684
- "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
43684
+ "description": "",
43685
43685
  "name": "Selectlistbox",
43686
43686
  "slots": [
43687
43687
  {
@@ -43695,7 +43695,7 @@
43695
43695
  "module": "/src/models"
43696
43696
  },
43697
43697
  "tagName": "mdc-selectlistbox",
43698
- "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
43698
+ "jsDoc": "/**\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
43699
43699
  "customElement": true
43700
43700
  }
43701
43701
  ],
@@ -43716,7 +43716,7 @@
43716
43716
  "declarations": [
43717
43717
  {
43718
43718
  "kind": "class",
43719
- "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n - Provide an `id` on the `mdc-navmenuitem`\n - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n - Performs an action such as navigation or alert trigger\n - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
43719
+ "description": "",
43720
43720
  "name": "SideNavigation",
43721
43721
  "cssProperties": [
43722
43722
  {
@@ -43998,7 +43998,7 @@
43998
43998
  "module": "/src/models"
43999
43999
  },
44000
44000
  "tagName": "mdc-sidenavigation",
44001
- "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports five layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, `flexible-on-hover`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n * - Provide an `id` on the `mdc-navmenuitem`\n * - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n * - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n * inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n * - Performs an action such as navigation or alert trigger\n * - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot fixed-menubar - Slot for the menubar inside the fixed section.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart scrollable-menubar - The menubar inside the scrollable section.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart fixed-menubar - The menubar inside the fixed section.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off\n * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
44001
+ "jsDoc": "/**\n * @tagname mdc-sidenavigation\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot fixed-menubar - Slot for the menubar inside the fixed section.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart scrollable-menubar - The menubar inside the scrollable section.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart fixed-menubar - The menubar inside the fixed section.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off\n * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
44002
44002
  "customElement": true
44003
44003
  }
44004
44004
  ],
@@ -44019,7 +44019,7 @@
44019
44019
  "declarations": [
44020
44020
  {
44021
44021
  "kind": "class",
44022
- "description": "`mdc-skeleton` is a component that shows a grey placeholder area.\nIt provides visual feedback to users that content is being loaded.\n\n**Skeleton Variants:**\n- **rectangular**: Default variant with 0.25rem border radius\n- **rounded**: Has 0.5rem border radius\n- **circular**: Has 50% border radius for circular shapes\n- **button**: Optimized for button placeholders with 1.25rem border radius\n\n**Sizing Behavior:**\n1. If wrapping content, takes dimensions of wrapped content\n2. Otherwise grows to fill parent container",
44022
+ "description": "",
44023
44023
  "name": "Skeleton",
44024
44024
  "cssProperties": [
44025
44025
  {
@@ -44080,7 +44080,7 @@
44080
44080
  "module": "/src/models"
44081
44081
  },
44082
44082
  "tagName": "mdc-skeleton",
44083
- "jsDoc": "/**\n * `mdc-skeleton` is a component that shows a grey placeholder area.\n * It provides visual feedback to users that content is being loaded.\n *\n * **Skeleton Variants:**\n * - **rectangular**: Default variant with 0.25rem border radius\n * - **rounded**: Has 0.5rem border radius\n * - **circular**: Has 50% border radius for circular shapes\n * - **button**: Optimized for button placeholders with 1.25rem border radius\n *\n * **Sizing Behavior:**\n * 1. If wrapping content, takes dimensions of wrapped content\n * 2. Otherwise grows to fill parent container\n *\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
44083
+ "jsDoc": "/**\n * @tagname mdc-skeleton\n *\n * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.\n *\n * @cssproperty --mdc-skeleton-background-color - background color of the skeleton\n * @cssproperty --mdc-skeleton-height - height of the skeleton\n * @cssproperty --mdc-skeleton-width - width of the skeleton\n */",
44084
44084
  "customElement": true
44085
44085
  }
44086
44086
  ],
@@ -44101,7 +44101,7 @@
44101
44101
  "declarations": [
44102
44102
  {
44103
44103
  "kind": "class",
44104
- "description": "Slider component is used to select a value or range of values from within a defined range.\nIt provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.\nIt can be used as a single slider or a range slider. This is set by the boolean attribute `range`\nIf the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.\n\n## Spatial navigation\n\nIn spatial navigation mode, the user has to step into edit mode to adjust the slider value using left and right navigation keys.\nTo enter edit mode, the user can press the Enter when one of the slider's handler is focused. User can leave edit mode by press\nEnter or Escape.",
44104
+ "description": "",
44105
44105
  "name": "Slider",
44106
44106
  "cssProperties": [
44107
44107
  {
@@ -44904,7 +44904,7 @@
44904
44904
  "module": "/src/models"
44905
44905
  },
44906
44906
  "tagName": "mdc-slider",
44907
- "jsDoc": "/**\n * Slider component is used to select a value or range of values from within a defined range.\n * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.\n * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`\n * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.\n *\n * ## Spatial navigation\n *\n * In spatial navigation mode, the user has to step into edit mode to adjust the slider value using left and right navigation keys.\n * To enter edit mode, the user can press the Enter when one of the slider's handler is focused. User can leave edit mode by press\n * Enter or Escape.\n *\n * @tagname mdc-slider\n *\n * @dependency mdc-icon\n *\n * @csspart slider-tooltip - The tooltip of the slider\n * @csspart slider-track - The track of the slider\n * @csspart slider-wrapper - The wrapper around the slider input(s)\n * @csspart slider-ticks - The container for the tick marks\n * @csspart slider-tick - The individual tick marks\n * @csspart slider-input - The input element of the slider\n * @csspart slider-label - The label of the slider\n *\n * @event input - Fired when the slider value changes\n * @event change - Fired when the slider value is committed\n *\n * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb\n * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border\n * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb\n * @cssproperty --mdc-slider-input-size - The height of the slider input\n * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks\n * @cssproperty --mdc-slider-track-height - The height of the slider track\n * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks\n * @cssproperty --mdc-slider-progress-color - The color of the slider progress\n * @cssproperty --mdc-slider-track-color - The color of the slider track\n * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip\n * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks\n */",
44907
+ "jsDoc": "/**\n * @tagname mdc-slider\n *\n * @dependency mdc-icon\n *\n * @csspart slider-tooltip - The tooltip of the slider\n * @csspart slider-track - The track of the slider\n * @csspart slider-wrapper - The wrapper around the slider input(s)\n * @csspart slider-ticks - The container for the tick marks\n * @csspart slider-tick - The individual tick marks\n * @csspart slider-input - The input element of the slider\n * @csspart slider-label - The label of the slider\n *\n * @event input - Fired when the slider value changes\n * @event change - Fired when the slider value is committed\n *\n * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb\n * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border\n * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb\n * @cssproperty --mdc-slider-input-size - The height of the slider input\n * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks\n * @cssproperty --mdc-slider-track-height - The height of the slider track\n * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks\n * @cssproperty --mdc-slider-progress-color - The color of the slider progress\n * @cssproperty --mdc-slider-track-color - The color of the slider track\n * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip\n * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks\n */",
44908
44908
  "customElement": true
44909
44909
  }
44910
44910
  ],
@@ -44925,7 +44925,7 @@
44925
44925
  "declarations": [
44926
44926
  {
44927
44927
  "kind": "class",
44928
- "description": "Spatial navigation focus manager\n\n[Spatial navigation](https://en.wikipedia.org/wiki/Spatial_navigation) lets users move focus among\nelements on a 2D plane, common on TVs and game consoles with remotes or gamepads.\n\nIt should have only one instance, and it should be placed at the root of the application.\n\n## Focus management\n\nThe provider listens to keyboard events and moves focus among elements based on arrow key input.\nYou can influence or override this behavior.\n\n### Steps\n\nSpatial navigation goes through the following steps after each keydown:\n\n1. Handle `keydown` in the capture phase.\n - When the active element has a `data-spatial-{direction}` attribute, call the provider's own `keydown` handler (see step 3).\n Falls back to component navigation provider did not handle the event.\n - When the active element's parent is scrollable and it is not fully visible in the given direction, and it does not\n have a `data-spatial-noscroll` attribute, prevent all navigation and scroll in the given direction half-size of the\n scroll view.\n2. Component own `keydown` handler executed (bubble phase) (e.g., list moves focus internally) it it was not\n prevented.\n3. Spatial Navigation Provider's `keydown` handler executed (bubble phase)\n - If a key event was not prevented in step 1. emit `navbeforeprocess` to check if any component wants to handle\n the key event itself. If `navbeforeprocess` event is prevented, stop here.\n - If the component did not handle `keydown`, it calculates the next focusable item\n - If the active element has a `data-spatial-{direction}` attribute,\n - Evaluate the attribute value, try element ID, and falls back to css selector if needed\n - If it is focusable, move the focus there.\n - If it is not focusable and contains focusable elements, calculate the next focused item within that element subtree.\n - Otherwise calculate the next focused item based on the direction and distances.\n - If there is no next item, it emits `navnotarget` event\n - Otherwise emit `navbeforefocus`,\n - If this event is prevented, nothing happens\n - Otherwise the focus moves to the next element\n\n### Determine next focus\n\nThe provider uses multiple ways to determine the next focused element. The order defined in the \"Steps\" section.\n\n#### Calculated focus\n\nBy default, the next focus target is computed from element positions:\n\n1. Find the nearest focus area (scrollable container or active focus trap) relative to the current element.\n2. Collect focusable elements in that area.\n3. Compute distances from the current element to candidates using the W3C \"find the shortest\n distance\" algorithm: https://www.w3.org/TR/css-nav-1/#find-the-shortest-distance\n4. If no candidates are found, repeat from step 1, skipping areas already checked.\n5. Focus on the closest candidate.\n\nElements with `data-spatial-focusable` are treated as focusable even if they do otherwise not be\n(e.g., `tabindex=\"-1\"`).\n\nElements with `data-spatial-exclude` are excluded (with its subtree) from the navigation, even if they\nare focusable.\n\nNote: The algorithm is distance-based, so the UI should be designed to focusable elements are\npredictably reachable. Relative element positions should remain stable; responsive layouts can\nmake navigation unpredictable. This is less of an issue on fixed-size TV UIs but can show unexpected\nbehavior in Storybook when resizing. See the \"Limitations\" section.\n\n#### Overwrite the next element\n\nOverride calculated navigation by adding one of these attributes to a focusable element:\n\n- `data-spatial-up`\n- `data-spatial-down`\n- `data-spatial-left`\n- `data-spatial-right`\n\nEach attribute value must be the id of the element to focus when the corresponding key is pressed.\n\n#### Element internal navigation\n\nComplex components (List, Combobox, Tree, etc.) may handle their own navigation. For example, a List moves\nfocus internally on Down until the last item, after which Down should fall back to provider navigation.\n\nTo prevent the provider from handling a key, listen to `navbeforeprocess` and call `event.preventDefault()`.\nThis event fires after the component handles `keydown`.\n\n### Cancel focus change\n\nBefore focusing a computed target, the provider dispatches `navbeforefocus` on the current element. Call\n`event.preventDefault()` on this event to cancel the focus change.\n\n## Enter action\n\nPressing Enter triggers `.click()` on the currently focused element.\n\nYou can prevent this by listening to `navbeforeprocess` and calling `event.preventDefault()`.\n\n## Escape/Back action\n\nPressing Escape tries to find a focusable element with `data-spatial-go-back` and clicks it. If none exists,\nthe provider calls `history.back()`.\n\nYou can prevent this by listening to `navbeforeprocess` and calling `event.preventDefault()`.\n\nYou can also intercept the back click by listening to `navback` and calling `event.preventDefault()`.\n\n## Control data attributes\n\nSupported data attributes:\n\n| Attribute | Value | Default | Description |\n|------------------------------|------------------------------|---------|------------------------------------------------------------------------------------------------------------------------------------|\n| `data-spatial-left` | empty string / id / selector | N/A | Prevent native navigation in the Left direction, focus it if it's focusable otherwise limit the search in the selected container. |\n| `data-spatial-up` | empty string / id / selector | N/A | Prevent native navigation in Up direction, focus it if it's focusable otherwise limit the search in the selected container. |\n| `data-spatial-right` | empty string / id / selector | N/A | Prevent native navigation in the Right direction, focus it if it's focusable otherwise limit the search in the selected container. |\n| `data-spatial-down` | empty string / id / selector | N/A | Prevent native navigation in Down direction, focus it if it's focusable otherwise limit the search in the selected container. |\n| `data-spatial-go-back` | N/A | N/A | First focusable element with this attribute is clicked on Back/Escape |\n| `data-spatial-focusable` | N/A | N/A | Treat element as focusable even if it normally is not (e.g., `tabindex=\"-1\"`) |\n| `data-spatial-exclude` | N/A | N/A | Exclude focusable element (and its subtree) from the navigation |\n| `data-spatial-noscroll` | N/A | N/A | Prevent scroll for active element in scrollable area even if the is not fit in view |\n| `data-spatial-scroll-parent` | N/A | N/A | When the focusable item in not a direct child of the scrollable aria use this attribute to mark scrollable area element |\n\n## Event emitting order\n\nOn a navigation key press, events fire in this order:\n\n1. `navbeforeprocess` on the currently focused element.\n2. If not prevented:\na. Arrow keys: `navbeforefocus` on the currently focused element.\nb. Enter: `.click()` on the currently focused element.\nc. Escape/Back: `navback` on the provider, then `.click()` on the go-back element or `history.back()`.\n3. If no target is found in the requested direction: `navnotarget` on the provider.\n\n## Handle complex components\n\n### Generic components\n\nComponents that handle navigation internally should prevent the provider from acting. Handle `navbeforeprocess`\nand call `event.preventDefault()` for keys you process yourself.\n\n### Form inputs\n\nNative inputs often submit on Enter, which is not desirable here. Enter should toggle or activate the control\n(e.g., check/uncheck). Provide a dedicated submit button users can navigate to and press Enter on.\n\n### Utilities for complex components\n\n#### KeyToActionMixin\n\nMaps key events to action names. Call `getActionForKeyEvent` to get the action for a keyboard event. Also provides\n`getKeyboardNavMode` to check whether navigation is spatial or default.\n\n#### KeyDownHandledMixin\n\nNotify the provider when a component handled `keydown` internally. Call `keyDownEventHandled` whenever you process\nkeydown yourself.\n\n## Platform specific behaviors\n\nConsider remote/gamepad constraints. Often focus alone is not enough, and users press Enter to \"enter\" an interactive mode:\n- Select: Enter opens options rather than arrow keys opening a popover.\n- Text inputs: see the next section.\n- Slider: Enter to start adjusting, arrow keys to change value, Enter/Escape to stop.\n\n### Text inputs\n\nOn TV-like platforms without physical keyboards, Enter/focus on an input should open a virtual keyboard instead of submitting\nthe form. Users must close the keyboard (Escape) to continue spatial navigation.\n\nIf navigation keys are mapped to letters (e.g., `w/a/s/d`), they should navigate, not change input values. Inputs should\nbe edited via the virtual keyboard.\n\nNote: Stories do not emulate virtual keyboards, so letter-based navigation may change input values in Storybook.\n\n## Debugging\n\n### Storybook toolbar\n\nEnable \"Spatial navigation\" in the toolbar. Key mapping:\n- Up - ArrowUp\n- Left - ArrowLeft\n- Down - ArrowDown\n- Right - ArrowRight\n- Enter - Enter\n- Escape - Escape\n\nWith wrapper: wraps the component in a 3x3 grid with surrounding buttons for testing.\nWithout a wrapper: renders the component alone.\n\n### Visual debugger\n\nWith spatial navigation enabled, press Shift + navigation key to visualize calculations:\n\n- Star: next active element\n- `#{number}`: candidate order by distance\n- `D: {distance}`: computed distance\n\n## Limitations\n\n### Completeness\n\nThe algorithm cannot guarantee reachability to all elements using the four directions. Some components can be isolated.\n\nWorkarounds:\n- Use data attributes to explicitly link navigation targets.\n- Arrange DOM to improve spatial consistency:\n- Group focusable elements using dedicated components (lists, menus, etc.).\n- Avoid complex grid-like layouts with variable-sized items.\n- Avoid overlap along horizontal or vertical axes.\n- Avoid nested focusable elements where possible.\n- Tune algorithm weights to match your UI layout.\n\n### Nested providers\n\nOnly one provider instance is supported in the application at a time.",
44928
+ "description": "",
44929
44929
  "name": "SpatialNavigationProvider",
44930
44930
  "members": [
44931
44931
  {
@@ -45087,7 +45087,7 @@
45087
45087
  "module": "/src/models"
45088
45088
  },
45089
45089
  "tagName": "mdc-spatialnavigationprovider",
45090
- "jsDoc": "/**\n * Spatial navigation focus manager\n *\n * [Spatial navigation](https://en.wikipedia.org/wiki/Spatial_navigation) lets users move focus among\n * elements on a 2D plane, common on TVs and game consoles with remotes or gamepads.\n *\n * It should have only one instance, and it should be placed at the root of the application.\n *\n * ## Focus management\n *\n * The provider listens to keyboard events and moves focus among elements based on arrow key input.\n * You can influence or override this behavior.\n *\n * ### Steps\n *\n * Spatial navigation goes through the following steps after each keydown:\n *\n * 1. Handle `keydown` in the capture phase.\n * - When the active element has a `data-spatial-{direction}` attribute, call the provider's own `keydown` handler (see step 3).\n * Falls back to component navigation provider did not handle the event.\n * - When the active element's parent is scrollable and it is not fully visible in the given direction, and it does not\n * have a `data-spatial-noscroll` attribute, prevent all navigation and scroll in the given direction half-size of the\n * scroll view.\n * 2. Component own `keydown` handler executed (bubble phase) (e.g., list moves focus internally) it it was not\n * prevented.\n * 3. Spatial Navigation Provider's `keydown` handler executed (bubble phase)\n * - If a key event was not prevented in step 1. emit `navbeforeprocess` to check if any component wants to handle\n * the key event itself. If `navbeforeprocess` event is prevented, stop here.\n * - If the component did not handle `keydown`, it calculates the next focusable item\n * - If the active element has a `data-spatial-{direction}` attribute,\n * - Evaluate the attribute value, try element ID, and falls back to css selector if needed\n * - If it is focusable, move the focus there.\n * - If it is not focusable and contains focusable elements, calculate the next focused item within that element subtree.\n * - Otherwise calculate the next focused item based on the direction and distances.\n * - If there is no next item, it emits `navnotarget` event\n * - Otherwise emit `navbeforefocus`,\n * - If this event is prevented, nothing happens\n * - Otherwise the focus moves to the next element\n *\n * ### Determine next focus\n *\n * The provider uses multiple ways to determine the next focused element. The order defined in the \"Steps\" section.\n *\n * #### Calculated focus\n *\n * By default, the next focus target is computed from element positions:\n *\n * 1. Find the nearest focus area (scrollable container or active focus trap) relative to the current element.\n * 2. Collect focusable elements in that area.\n * 3. Compute distances from the current element to candidates using the W3C \"find the shortest\n * distance\" algorithm: https://www.w3.org/TR/css-nav-1/#find-the-shortest-distance\n * 4. If no candidates are found, repeat from step 1, skipping areas already checked.\n * 5. Focus on the closest candidate.\n *\n * Elements with `data-spatial-focusable` are treated as focusable even if they do otherwise not be\n * (e.g., `tabindex=\"-1\"`).\n *\n * Elements with `data-spatial-exclude` are excluded (with its subtree) from the navigation, even if they\n * are focusable.\n *\n * Note: The algorithm is distance-based, so the UI should be designed to focusable elements are\n * predictably reachable. Relative element positions should remain stable; responsive layouts can\n * make navigation unpredictable. This is less of an issue on fixed-size TV UIs but can show unexpected\n * behavior in Storybook when resizing. See the \"Limitations\" section.\n *\n * #### Overwrite the next element\n *\n * Override calculated navigation by adding one of these attributes to a focusable element:\n *\n * - `data-spatial-up`\n * - `data-spatial-down`\n * - `data-spatial-left`\n * - `data-spatial-right`\n *\n * Each attribute value must be the id of the element to focus when the corresponding key is pressed.\n *\n * #### Element internal navigation\n *\n * Complex components (List, Combobox, Tree, etc.) may handle their own navigation. For example, a List moves\n * focus internally on Down until the last item, after which Down should fall back to provider navigation.\n *\n * To prevent the provider from handling a key, listen to `navbeforeprocess` and call `event.preventDefault()`.\n * This event fires after the component handles `keydown`.\n *\n * ### Cancel focus change\n *\n * Before focusing a computed target, the provider dispatches `navbeforefocus` on the current element. Call\n * `event.preventDefault()` on this event to cancel the focus change.\n *\n * ## Enter action\n *\n * Pressing Enter triggers `.click()` on the currently focused element.\n *\n * You can prevent this by listening to `navbeforeprocess` and calling `event.preventDefault()`.\n *\n * ## Escape/Back action\n *\n * Pressing Escape tries to find a focusable element with `data-spatial-go-back` and clicks it. If none exists,\n * the provider calls `history.back()`.\n *\n * You can prevent this by listening to `navbeforeprocess` and calling `event.preventDefault()`.\n *\n * You can also intercept the back click by listening to `navback` and calling `event.preventDefault()`.\n *\n * ## Control data attributes\n *\n * Supported data attributes:\n *\n * | Attribute | Value | Default | Description |\n * |------------------------------|------------------------------|---------|------------------------------------------------------------------------------------------------------------------------------------|\n * | `data-spatial-left` | empty string / id / selector | N/A | Prevent native navigation in the Left direction, focus it if it's focusable otherwise limit the search in the selected container. |\n * | `data-spatial-up` | empty string / id / selector | N/A | Prevent native navigation in Up direction, focus it if it's focusable otherwise limit the search in the selected container. |\n * | `data-spatial-right` | empty string / id / selector | N/A | Prevent native navigation in the Right direction, focus it if it's focusable otherwise limit the search in the selected container. |\n * | `data-spatial-down` | empty string / id / selector | N/A | Prevent native navigation in Down direction, focus it if it's focusable otherwise limit the search in the selected container. |\n * | `data-spatial-go-back` | N/A | N/A | First focusable element with this attribute is clicked on Back/Escape |\n * | `data-spatial-focusable` | N/A | N/A | Treat element as focusable even if it normally is not (e.g., `tabindex=\"-1\"`) |\n * | `data-spatial-exclude` | N/A | N/A | Exclude focusable element (and its subtree) from the navigation |\n * | `data-spatial-noscroll` | N/A | N/A | Prevent scroll for active element in scrollable area even if the is not fit in view |\n * | `data-spatial-scroll-parent` | N/A | N/A | When the focusable item in not a direct child of the scrollable aria use this attribute to mark scrollable area element |\n *\n * ## Event emitting order\n *\n * On a navigation key press, events fire in this order:\n *\n * 1. `navbeforeprocess` on the currently focused element.\n * 2. If not prevented:\n * a. Arrow keys: `navbeforefocus` on the currently focused element.\n * b. Enter: `.click()` on the currently focused element.\n * c. Escape/Back: `navback` on the provider, then `.click()` on the go-back element or `history.back()`.\n * 3. If no target is found in the requested direction: `navnotarget` on the provider.\n *\n * ## Handle complex components\n *\n * ### Generic components\n *\n * Components that handle navigation internally should prevent the provider from acting. Handle `navbeforeprocess`\n * and call `event.preventDefault()` for keys you process yourself.\n *\n * ### Form inputs\n *\n * Native inputs often submit on Enter, which is not desirable here. Enter should toggle or activate the control\n * (e.g., check/uncheck). Provide a dedicated submit button users can navigate to and press Enter on.\n *\n * ### Utilities for complex components\n *\n * #### KeyToActionMixin\n *\n * Maps key events to action names. Call `getActionForKeyEvent` to get the action for a keyboard event. Also provides\n * `getKeyboardNavMode` to check whether navigation is spatial or default.\n *\n * #### KeyDownHandledMixin\n *\n * Notify the provider when a component handled `keydown` internally. Call `keyDownEventHandled` whenever you process\n * keydown yourself.\n *\n * ## Platform specific behaviors\n *\n * Consider remote/gamepad constraints. Often focus alone is not enough, and users press Enter to \"enter\" an interactive mode:\n * - Select: Enter opens options rather than arrow keys opening a popover.\n * - Text inputs: see the next section.\n * - Slider: Enter to start adjusting, arrow keys to change value, Enter/Escape to stop.\n *\n * ### Text inputs\n *\n * On TV-like platforms without physical keyboards, Enter/focus on an input should open a virtual keyboard instead of submitting\n * the form. Users must close the keyboard (Escape) to continue spatial navigation.\n *\n * If navigation keys are mapped to letters (e.g., `w/a/s/d`), they should navigate, not change input values. Inputs should\n * be edited via the virtual keyboard.\n *\n * Note: Stories do not emulate virtual keyboards, so letter-based navigation may change input values in Storybook.\n *\n * ## Debugging\n *\n * ### Storybook toolbar\n *\n * Enable \"Spatial navigation\" in the toolbar. Key mapping:\n * - Up - ArrowUp\n * - Left - ArrowLeft\n * - Down - ArrowDown\n * - Right - ArrowRight\n * - Enter - Enter\n * - Escape - Escape\n *\n * With wrapper: wraps the component in a 3x3 grid with surrounding buttons for testing.\n * Without a wrapper: renders the component alone.\n *\n * ### Visual debugger\n *\n * With spatial navigation enabled, press Shift + navigation key to visualize calculations:\n *\n * - Star: next active element\n * - `#{number}`: candidate order by distance\n * - `D: {distance}`: computed distance\n *\n * ## Limitations\n *\n * ### Completeness\n *\n * The algorithm cannot guarantee reachability to all elements using the four directions. Some components can be isolated.\n *\n * Workarounds:\n * - Use data attributes to explicitly link navigation targets.\n * - Arrange DOM to improve spatial consistency:\n * - Group focusable elements using dedicated components (lists, menus, etc.).\n * - Avoid complex grid-like layouts with variable-sized items.\n * - Avoid overlap along horizontal or vertical axes.\n * - Avoid nested focusable elements where possible.\n * - Tune algorithm weights to match your UI layout.\n *\n * ### Nested providers\n *\n * Only one provider instance is supported in the application at a time.\n *\n * @event navbeforeprocess - (React: onNavBeforeProcess) This event dispatched before spatial navigation process any key event.\n * It can be canceled to prevent any action from spatial navigation, e.g.: back, click or calculating the next candidate.\n * @event navbeforefocus - (React: onNavBeforeFocus) This event is dispatched before the focus is changing to the next element.\n * It can be canceled to prevent the focus change. @see https://www.w3.org/TR/css-nav-1/#event-type-navbeforefocus\n * @event navback - (React: onNavBack) This event dispatched a back navigation triggered by the user.\n * The event's detail contains the goBackElement if any. It is cancelable to prevent click\n * action on the goBackElement.\n * @event navnotarget - (React: onNavNoTarget) This event is dispatched when there is no target to focus in the current focus area and\n * in the given direction .\n *\n * @tagname mdc-spatialnavigationprovider\n */",
45090
+ "jsDoc": "/**\n * @tagname mdc-spatialnavigationprovider\n * @event navbeforeprocess - (React: onNavBeforeProcess) This event dispatched before spatial navigation process any key event.\n * It can be canceled to prevent any action from spatial navigation, e.g.: back, click or calculating the next candidate.\n * @event navbeforefocus - (React: onNavBeforeFocus) This event is dispatched before the focus is changing to the next element.\n * It can be canceled to prevent the focus change. @see https://www.w3.org/TR/css-nav-1/#event-type-navbeforefocus\n * @event navback - (React: onNavBack) This event dispatched a back navigation triggered by the user.\n * The event's detail contains the goBackElement if any. It is cancelable to prevent click\n * action on the goBackElement.\n * @event navnotarget - (React: onNavNoTarget) This event is dispatched when there is no target to focus in the current focus area and\n * in the given direction .\n *\n */",
45091
45091
  "customElement": true
45092
45092
  }
45093
45093
  ],
@@ -45108,7 +45108,7 @@
45108
45108
  "declarations": [
45109
45109
  {
45110
45110
  "kind": "class",
45111
- "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
45111
+ "description": "",
45112
45112
  "name": "Spinner",
45113
45113
  "cssProperties": [
45114
45114
  {
@@ -45226,7 +45226,7 @@
45226
45226
  "module": "/src/models"
45227
45227
  },
45228
45228
  "tagName": "mdc-spinner",
45229
- "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
45229
+ "jsDoc": "/**\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
45230
45230
  "customElement": true
45231
45231
  }
45232
45232
  ],
@@ -45247,7 +45247,7 @@
45247
45247
  "declarations": [
45248
45248
  {
45249
45249
  "kind": "class",
45250
- "description": "The StaticCheckbox component is a decorative, non-interactive checkbox used for visual\npresentation in read-only scenarios. Unlike the interactive `mdc-checkbox`, it does not\nhandle user interactions or form submissions.\n\nThis component supports multiple visual states: checked, indeterminate, disabled, readonly,\nand soft-disabled.\n\n## When to use\nUse StaticCheckbox to display checkbox states in read-only contexts such as summary views,\nconfirmation screens, or when showing historical form data. For interactive checkboxes, use\n`mdc-checkbox` instead.\n\n## Accessibility\n- StaticCheckbox is decorative and non-interactive by design\n- Always pair with descriptive text labels in the default slot\n- Do not use this as a replacement for interactive checkboxes in forms",
45250
+ "description": "",
45251
45251
  "name": "StaticCheckbox",
45252
45252
  "cssProperties": [
45253
45253
  {
@@ -45406,7 +45406,7 @@
45406
45406
  "module": "/src/models"
45407
45407
  },
45408
45408
  "tagName": "mdc-staticcheckbox",
45409
- "jsDoc": "/**\n * The StaticCheckbox component is a decorative, non-interactive checkbox used for visual\n * presentation in read-only scenarios. Unlike the interactive `mdc-checkbox`, it does not\n * handle user interactions or form submissions.\n *\n * This component supports multiple visual states: checked, indeterminate, disabled, readonly,\n * and soft-disabled.\n *\n * ## When to use\n * Use StaticCheckbox to display checkbox states in read-only contexts such as summary views,\n * confirmation screens, or when showing historical form data. For interactive checkboxes, use\n * `mdc-checkbox` instead.\n *\n * ## Accessibility\n * - StaticCheckbox is decorative and non-interactive by design\n * - Always pair with descriptive text labels in the default slot\n * - Do not use this as a replacement for interactive checkboxes in forms\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-background-color - Background color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-size - Size of the checkbox.\n *\n * @csspart icon-container - The container for the checkbox icon.\n * @csspart checkbox-icon - The checkbox icon element.\n *\n * @slot - Default slot for label text.\n */",
45409
+ "jsDoc": "/**\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-background-color - Background color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color of the checkbox.\n * @cssproperty --mdc-staticcheckbox-size - Size of the checkbox.\n *\n * @csspart icon-container - The container for the checkbox icon.\n * @csspart checkbox-icon - The checkbox icon element.\n *\n * @slot - Default slot for label text.\n */",
45410
45410
  "customElement": true
45411
45411
  }
45412
45412
  ],
@@ -45427,7 +45427,7 @@
45427
45427
  "declarations": [
45428
45428
  {
45429
45429
  "kind": "class",
45430
- "description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.<br/>\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
45430
+ "description": "",
45431
45431
  "name": "StaticChip",
45432
45432
  "cssProperties": [
45433
45433
  {
@@ -45546,7 +45546,7 @@
45546
45546
  "module": "/src/models"
45547
45547
  },
45548
45548
  "tagName": "mdc-staticchip",
45549
- "jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.<br/>\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n * @csspart icon - The icon of the static chip.\n */",
45549
+ "jsDoc": "/**\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n * @csspart icon - The icon of the static chip.\n */",
45550
45550
  "customElement": true
45551
45551
  }
45552
45552
  ],
@@ -45567,7 +45567,7 @@
45567
45567
  "declarations": [
45568
45568
  {
45569
45569
  "kind": "class",
45570
- "description": "The StaticRadio component is a decorative, non-interactive radio button used for visual\npresentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not\nhandle user interactions or form submissions.\n\nThis component supports multiple visual states: checked, disabled, readonly, and soft-disabled.\n\n## When to use\nUse StaticRadio to display radio button states in read-only contexts such as summary views,\nconfirmation screens, or when showing historical form data. For interactive radio buttons, use\n`mdc-radio` instead.\n\n## Accessibility\n- StaticRadio is decorative and non-interactive by design\n- Always pair with descriptive text labels in the default slot\n- Do not use this as a replacement for interactive radio buttons in forms",
45570
+ "description": "",
45571
45571
  "name": "StaticRadio",
45572
45572
  "cssProperties": [
45573
45573
  {
@@ -45706,7 +45706,7 @@
45706
45706
  "module": "/src/models"
45707
45707
  },
45708
45708
  "tagName": "mdc-staticradio",
45709
- "jsDoc": "/**\n * The StaticRadio component is a decorative, non-interactive radio button used for visual\n * presentation in read-only scenarios. Unlike the interactive `mdc-radio`, it does not\n * handle user interactions or form submissions.\n *\n * This component supports multiple visual states: checked, disabled, readonly, and soft-disabled.\n *\n * ## When to use\n * Use StaticRadio to display radio button states in read-only contexts such as summary views,\n * confirmation screens, or when showing historical form data. For interactive radio buttons, use\n * `mdc-radio` instead.\n *\n * ## Accessibility\n * - StaticRadio is decorative and non-interactive by design\n * - Always pair with descriptive text labels in the default slot\n * - Do not use this as a replacement for interactive radio buttons in forms\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.\n * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.\n * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.\n *\n * @csspart radio-icon - The radio icon element.\n *\n * @slot - Default slot for the label of the radio.\n */",
45709
+ "jsDoc": "/**\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - Size of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-size - Size of the outer circle border.\n * @cssproperty --mdc-staticradio-inner-circle-background-color - Background color of the inner circle when checked.\n * @cssproperty --mdc-staticradio-outer-circle-border-color - Border color of the outer circle.\n * @cssproperty --mdc-staticradio-outer-circle-background-color - Background color of the outer circle.\n *\n * @csspart radio-icon - The radio icon element.\n *\n * @slot - Default slot for the label of the radio.\n */",
45710
45710
  "customElement": true
45711
45711
  }
45712
45712
  ],
@@ -45727,7 +45727,7 @@
45727
45727
  "declarations": [
45728
45728
  {
45729
45729
  "kind": "class",
45730
- "description": "The StaticToggle component is a decorative, non-interactive toggle switch used for visual\npresentation. It shares the same styling as the interactive `mdc-toggle` component but does\nnot provide user interaction functionality.\n\nThis component supports multiple visual states: checked, disabled, readonly, soft-disabled,\nand size variations (default, compact).\n\n## When to use\nUse StaticToggle to display toggle states in read-only contexts such as summary views,\nconfirmation screens, or as a building block within custom interactive components. For\ninteractive toggles, use `mdc-toggle` instead.\n\n## Accessibility\n- StaticToggle is decorative and non-interactive by design\n- When used within parent components, ensure proper ARIA attributes are provided by the parent\n- Do not use this as a replacement for interactive toggles in forms",
45730
+ "description": "",
45731
45731
  "name": "StaticToggle",
45732
45732
  "cssProperties": [
45733
45733
  {
@@ -45898,7 +45898,7 @@
45898
45898
  "module": "/src/models"
45899
45899
  },
45900
45900
  "tagName": "mdc-statictoggle",
45901
- "jsDoc": "/**\n * The StaticToggle component is a decorative, non-interactive toggle switch used for visual\n * presentation. It shares the same styling as the interactive `mdc-toggle` component but does\n * not provide user interaction functionality.\n *\n * This component supports multiple visual states: checked, disabled, readonly, soft-disabled,\n * and size variations (default, compact).\n *\n * ## When to use\n * Use StaticToggle to display toggle states in read-only contexts such as summary views,\n * confirmation screens, or as a building block within custom interactive components. For\n * interactive toggles, use `mdc-toggle` instead.\n *\n * ## Accessibility\n * - StaticToggle is decorative and non-interactive by design\n * - When used within parent components, ensure proper ARIA attributes are provided by the parent\n * - Do not use this as a replacement for interactive toggles in forms\n *\n * @tagname mdc-statictoggle\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-statictoggle-width - Width of the static toggle.\n * @cssproperty --mdc-statictoggle-height - Height of the static toggle.\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.\n * @cssproperty --mdc-statictoggle-border-color - Border color of the static toggle.\n * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-background-color - Icon background color of the static toggle.\n *\n * @csspart slider - The slider part of the toggle.\n * @csspart toggle-icon - The icon part of the toggle.\n *\n * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).\n */",
45901
+ "jsDoc": "/**\n * @tagname mdc-statictoggle\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-statictoggle-width - Width of the static toggle.\n * @cssproperty --mdc-statictoggle-height - Height of the static toggle.\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the static toggle.\n * @cssproperty --mdc-statictoggle-border-color - Border color of the static toggle.\n * @cssproperty --mdc-statictoggle-background-color - Background color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-color - Icon color of the static toggle.\n * @cssproperty --mdc-statictoggle-icon-background-color - Icon background color of the static toggle.\n *\n * @csspart slider - The slider part of the toggle.\n * @csspart toggle-icon - The icon part of the toggle.\n *\n * @slot - Default slot for slotted content (typically used by parent `mdc-toggle` for the checkbox input).\n */",
45902
45902
  "customElement": true
45903
45903
  }
45904
45904
  ],
@@ -45919,7 +45919,7 @@
45919
45919
  "declarations": [
45920
45920
  {
45921
45921
  "kind": "class",
45922
- "description": "Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\nIt provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.",
45922
+ "description": "",
45923
45923
  "name": "Stepper",
45924
45924
  "slots": [
45925
45925
  {
@@ -45995,7 +45995,7 @@
45995
45995
  "module": "/src/models"
45996
45996
  },
45997
45997
  "tagName": "mdc-stepper",
45998
- "jsDoc": "/**\n * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\n * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.\n *\n * @tagname mdc-stepper\n *\n * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.\n *\n */",
45998
+ "jsDoc": "/**\n * @tagname mdc-stepper\n *\n * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.\n *\n */",
45999
45999
  "customElement": true
46000
46000
  }
46001
46001
  ],
@@ -46016,7 +46016,7 @@
46016
46016
  "declarations": [
46017
46017
  {
46018
46018
  "kind": "class",
46019
- "description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
46019
+ "description": "",
46020
46020
  "name": "StepperConnector",
46021
46021
  "cssProperties": [
46022
46022
  {
@@ -46083,7 +46083,7 @@
46083
46083
  "module": "/src/models"
46084
46084
  },
46085
46085
  "tagName": "mdc-stepperconnector",
46086
- "jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
46086
+ "jsDoc": "/**\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
46087
46087
  "customElement": true
46088
46088
  }
46089
46089
  ],
@@ -46104,7 +46104,7 @@
46104
46104
  "declarations": [
46105
46105
  {
46106
46106
  "kind": "class",
46107
- "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
46107
+ "description": "",
46108
46108
  "name": "StepperItem",
46109
46109
  "cssProperties": [
46110
46110
  {
@@ -46388,7 +46388,7 @@
46388
46388
  "module": "/src/models"
46389
46389
  },
46390
46390
  "tagName": "mdc-stepperitem",
46391
- "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
46391
+ "jsDoc": "/**\n * @tagname mdc-stepperitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
46392
46392
  "customElement": true
46393
46393
  }
46394
46394
  ],
@@ -46409,7 +46409,7 @@
46409
46409
  "declarations": [
46410
46410
  {
46411
46411
  "kind": "class",
46412
- "description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nPass attribute `tabid` when using inside of `tablist` component.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nThe `slot=\"chip\"` can be used to add a chip to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.\n\nNote: Icons can be used in conjunction with badges or chips.\nBadges and chips should not be used at the same time.",
46412
+ "description": "",
46413
46413
  "name": "Tab",
46414
46414
  "cssProperties": [
46415
46415
  {
@@ -47189,7 +47189,7 @@
47189
47189
  "module": "/src/components/buttonsimple/buttonsimple.component"
47190
47190
  },
47191
47191
  "tagName": "mdc-tab",
47192
- "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n *\n * @slot prefix - The slot for the content before the text, typically used for the icon.\n * @slot postfix - The slot for the content after the text, typically used for the badge or chip.\n */",
47192
+ "jsDoc": "/**\n * @tagname mdc-tab\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n *\n * @slot prefix - The slot for the content before the text, typically used for the icon.\n * @slot postfix - The slot for the content after the text, typically used for the badge or chip.\n */",
47193
47193
  "customElement": true
47194
47194
  }
47195
47195
  ],
@@ -47210,7 +47210,7 @@
47210
47210
  "declarations": [
47211
47211
  {
47212
47212
  "kind": "class",
47213
- "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
47213
+ "description": "",
47214
47214
  "name": "TabList",
47215
47215
  "cssProperties": [
47216
47216
  {
@@ -47461,7 +47461,7 @@
47461
47461
  "module": "/src/models"
47462
47462
  },
47463
47463
  "tagName": "mdc-tablist",
47464
- "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
47464
+ "jsDoc": "/**\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
47465
47465
  "customElement": true
47466
47466
  }
47467
47467
  ],
@@ -47482,7 +47482,7 @@
47482
47482
  "declarations": [
47483
47483
  {
47484
47484
  "kind": "class",
47485
- "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
47485
+ "description": "",
47486
47486
  "name": "Text",
47487
47487
  "cssParts": [
47488
47488
  {
@@ -47580,7 +47580,7 @@
47580
47580
  "module": "/src/models"
47581
47581
  },
47582
47582
  "tagName": "mdc-text",
47583
- "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
47583
+ "jsDoc": "/**\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
47584
47584
  "customElement": true
47585
47585
  }
47586
47586
  ],
@@ -47601,7 +47601,7 @@
47601
47601
  "declarations": [
47602
47602
  {
47603
47603
  "kind": "class",
47604
- "description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required: A boolean attribute depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n This event exposes 3 properties:\n - currentCharacterCount - the current number of characters in the textarea field,\n - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.\n\n### Accessibility\n\n#### Resize\n\nAccessible text area resizing can be turned on with the `resizable`.\nIt is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.\n\n#### Best practices\n\n- Always provide a `label` for screen readers to identify the textarea's purpose\n- Use `help-text` to provide additional context or instructions\n- When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates\n- Use appropriate `help-text-type` (error, warning, success) to convey validation state\n- Ensure `validation-message` is set for form validation errors",
47604
+ "description": "",
47605
47605
  "name": "Textarea",
47606
47606
  "cssProperties": [
47607
47607
  {
@@ -48857,7 +48857,7 @@
48857
48857
  "module": "/src/components/formfieldwrapper"
48858
48858
  },
48859
48859
  "tagName": "mdc-textarea",
48860
- "jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required: A boolean attribute depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n * about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n * This event exposes 3 properties:\n * - currentCharacterCount - the current number of characters in the textarea field,\n * - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n * - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * ### Accessibility\n *\n * #### Resize\n *\n * Accessible text area resizing can be turned on with the `resizable`.\n * It is strongly recommended to set the `resize-button-aria-label` attribute as well to describe what it is and what are the shortcuts (up/down arrows) of the button.\n *\n * #### Best practices\n *\n * - Always provide a `label` for screen readers to identify the textarea's purpose\n * - Use `help-text` to provide additional context or instructions\n * - When using `max-character-limit`, consider providing `character-limit-announcement` for screen reader updates\n * - Use appropriate `help-text-type` (error, warning, success) to convey validation state\n * - Ensure `validation-message` is set for form validation errors\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart textarea - The textarea element.\n * @csspart textarea-container - The container element that wraps the textarea and resize button.\n * @csspart textarea-footer - The footer element that contains the character counter.\n * @csspart character-counter - The character counter element.\n * @csspart resize-button - The resize button element (shown when `resizable` is true).\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
48860
+ "jsDoc": "/**\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart textarea - The textarea element.\n * @csspart textarea-container - The container element that wraps the textarea and resize button.\n * @csspart textarea-footer - The footer element that contains the character counter.\n * @csspart character-counter - The character counter element.\n * @csspart resize-button - The resize button element (shown when `resizable` is true).\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-text-font-size - Font size for the textarea field\n * @cssproperty --mdc-textarea-text-line-height - Line height for the textarea field\n * @cssproperty --mdc-textarea-container-background-color - Background color for the textarea container\n */",
48861
48861
  "customElement": true
48862
48862
  }
48863
48863
  ],
@@ -48878,7 +48878,7 @@
48878
48878
  "declarations": [
48879
48879
  {
48880
48880
  "kind": "class",
48881
- "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nAvailable Momentum theme classes:\n\n`mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n\n`mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n\n`mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n\n`mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n\n`mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n\n`mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
48881
+ "description": "",
48882
48882
  "name": "ThemeProvider",
48883
48883
  "cssProperties": [
48884
48884
  {
@@ -48959,7 +48959,7 @@
48959
48959
  "module": "/src/models"
48960
48960
  },
48961
48961
  "tagName": "mdc-themeprovider",
48962
- "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
48962
+ "jsDoc": "/**\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
48963
48963
  "customElement": true
48964
48964
  }
48965
48965
  ],
@@ -48980,7 +48980,7 @@
48980
48980
  "declarations": [
48981
48981
  {
48982
48982
  "kind": "class",
48983
- "description": "mdc-timepicker is a component that allows users to select a specific time\nor enter a time manually. It supports both 12-hour and 24-hour formats.\n\nThe component consists of:\n- label - describes the time picker field\n- input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)\n- dropdown arrow button - opens a flyout menu with predefined time intervals\n- helper text - displayed below the input field\n\nUsers can input values by:\n- Manually entering numbers/characters in spinbuttons\n- Navigating using arrow keys to increment/decrement values\n- Selecting a predefined time from the dropdown menu",
48983
+ "description": "",
48984
48984
  "name": "TimePicker",
48985
48985
  "cssProperties": [
48986
48986
  {
@@ -50215,7 +50215,7 @@
50215
50215
  "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
50216
50216
  },
50217
50217
  "tagName": "mdc-timepicker",
50218
- "jsDoc": "/**\n * mdc-timepicker is a component that allows users to select a specific time\n * or enter a time manually. It supports both 12-hour and 24-hour formats.\n *\n * The component consists of:\n * - label - describes the time picker field\n * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)\n * - dropdown arrow button - opens a flyout menu with predefined time intervals\n * - helper text - displayed below the input field\n *\n * Users can input values by:\n * - Manually entering numbers/characters in spinbuttons\n * - Navigating using arrow keys to increment/decrement values\n * - Selecting a predefined time from the dropdown menu\n *\n * @tagname mdc-timepicker\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-option\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the time value changes.\n * @event change - (React: onChange) This event is dispatched when the time value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.\n * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.\n * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.\n * @cssproperty --mdc-timepicker-height - The height of the timepicker trigger control.\n * @cssproperty --mdc-timepicker-width - Width of the timepicker component.\n * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The colon separator between spinbuttons.\n * @csspart period - The AM/PM period spinbutton.\n * @csspart icon-container - The dropdown arrow button container.\n * @csspart leading-icon - The prefix icon element displayed before spinbuttons.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart listbox - The dropdown list container.\n */",
50218
+ "jsDoc": "/**\n * @tagname mdc-timepicker\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-option\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the time value changes.\n * @event change - (React: onChange) This event is dispatched when the time value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.\n * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.\n * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.\n * @cssproperty --mdc-timepicker-height - The height of the timepicker trigger control.\n * @cssproperty --mdc-timepicker-width - Width of the timepicker component.\n * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The colon separator between spinbuttons.\n * @csspart period - The AM/PM period spinbutton.\n * @csspart icon-container - The dropdown arrow button container.\n * @csspart leading-icon - The prefix icon element displayed before spinbuttons.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart listbox - The dropdown list container.\n */",
50219
50219
  "customElement": true
50220
50220
  }
50221
50221
  ],
@@ -50236,7 +50236,7 @@
50236
50236
  "declarations": [
50237
50237
  {
50238
50238
  "kind": "class",
50239
- "description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
50239
+ "description": "",
50240
50240
  "name": "Toast",
50241
50241
  "cssProperties": [
50242
50242
  {
@@ -50605,7 +50605,7 @@
50605
50605
  "module": "/src/models"
50606
50606
  },
50607
50607
  "tagName": "mdc-toast",
50608
- "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n *\n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n *\n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n * @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
50608
+ "jsDoc": "/**\n * @tagname mdc-toast\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n * @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
50609
50609
  "customElement": true
50610
50610
  }
50611
50611
  ],
@@ -50626,7 +50626,7 @@
50626
50626
  "declarations": [
50627
50627
  {
50628
50628
  "kind": "class",
50629
- "description": "The Toggle component is an interactive control used to switch between two mutually exclusive states,\nsuch as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\n\nTo create a group of toggles, use the `mdc-formfieldgroup` component.\n\n**Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.\n\n## When to use\nUse toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n\n## Accessibility\n- Provide clear labels that describe what the toggle controls\n- Use `data-aria-label` when a visual label is not present\n- Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n\n## Styling\nUse the `static-toggle` part to apply custom styles to the toggle switch visual element.\nThis part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.",
50629
+ "description": "",
50630
50630
  "name": "Toggle",
50631
50631
  "cssParts": [
50632
50632
  {
@@ -51415,7 +51415,7 @@
51415
51415
  "module": "/src/components/formfieldwrapper"
51416
51416
  },
51417
51417
  "tagName": "mdc-toggle",
51418
- "jsDoc": "/**\n * The Toggle component is an interactive control used to switch between two mutually exclusive states,\n * such as On/Off or Active/Inactive. It is commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n *\n * To create a group of toggles, use the `mdc-formfieldgroup` component.\n *\n * **Note:** This component internally renders a native checkbox input element with the `switch` role, styled as a toggle switch.\n *\n * ## When to use\n * Use toggles for binary choices where the change takes effect immediately, such as enabling/disabling settings or features.\n *\n * ## Accessibility\n * - Provide clear labels that describe what the toggle controls\n * - Use `data-aria-label` when a visual label is not present\n * - Keyboard navigation: Space to toggle, Tab to navigate, Enter to submit form\n *\n * ## Styling\n * Use the `static-toggle` part to apply custom styles to the toggle switch visual element.\n * This part exposes the underlying [StaticToggle](?path=/docs/components-decorator-statictoggle--docs) component for advanced styling.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-toggle\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.\n * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.\n */",
51418
+ "jsDoc": "/**\n * @tagname mdc-toggle\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-statictoggle\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event change - (React: onChange) Event that gets dispatched when the toggle state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the toggle receives focus.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart text-container - The container for the label and helper text elements.\n * @csspart static-toggle - The statictoggle that provides the visual toggle switch appearance.\n * @csspart toggle-input - The native input element with switch role that provides the interactive functionality.\n */",
51419
51419
  "customElement": true,
51420
51420
  "slots": [
51421
51421
  {
@@ -51544,7 +51544,7 @@
51544
51544
  "declarations": [
51545
51545
  {
51546
51546
  "kind": "class",
51547
- "description": "A toggletip is triggered by clicking a trigger element and can contain interactive content.\nUnlike tooltips which disappear on blur, toggletips remain visible until explicitly dismissed\nby clicking outside, pressing escape, or clicking the optional close button.\n\nToggletips are ideal for displaying contextual help text, additional information, or interactive\nelements like links and buttons that users need time to read and interact with.\n\nThe component uses [mdc-screenreaderannouncer](?path=/docs/components-screenreaderannouncer--docs) internally to announce the toggletip content\nto screen readers when shown, ensuring proper accessibility support.\n\n**Note:** This component extends the Popover component with toggletip-specific defaults.\n\n## When to use\nUse toggletips when you need to display interactive content or detailed information that requires\nuser interaction. For simple, non-interactive text hints, use tooltips instead.\n\n## Accessibility\n- Toggletip content is announced to screen readers when shown\n- Use `screenreader-announcer-identity` attribute to control announcement placement in the DOM\n- Focus is trapped within the toggletip when open, allowing navigation of interactive elements\n- Keyboard shortcuts: Escape to close, Tab to move between elements\n- Focus returns to the trigger element when the toggletip is closed",
51547
+ "description": "",
51548
51548
  "name": "ToggleTip",
51549
51549
  "cssProperties": [
51550
51550
  {
@@ -52971,7 +52971,7 @@
52971
52971
  "module": "/src/components/popover/popover.component"
52972
52972
  },
52973
52973
  "tagName": "mdc-toggletip",
52974
- "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element and can contain interactive content.\n * Unlike tooltips which disappear on blur, toggletips remain visible until explicitly dismissed\n * by clicking outside, pressing escape, or clicking the optional close button.\n *\n * Toggletips are ideal for displaying contextual help text, additional information, or interactive\n * elements like links and buttons that users need time to read and interact with.\n *\n * The component uses [mdc-screenreaderannouncer](?path=/docs/components-screenreaderannouncer--docs) internally to announce the toggletip content\n * to screen readers when shown, ensuring proper accessibility support.\n *\n * **Note:** This component extends the Popover component with toggletip-specific defaults.\n *\n * ## When to use\n * Use toggletips when you need to display interactive content or detailed information that requires\n * user interaction. For simple, non-interactive text hints, use tooltips instead.\n *\n * ## Accessibility\n * - Toggletip content is announced to screen readers when shown\n * - Use `screenreader-announcer-identity` attribute to control announcement placement in the DOM\n * - Focus is trapped within the toggletip when open, allowing navigation of interactive elements\n * - Keyboard shortcuts: Escape to close, Tab to move between elements\n * - Focus returns to the trigger element when the toggletip is closed\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @tagname mdc-toggletip\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
52974
+ "jsDoc": "/**\n * @tagname mdc-toggletip\n *\n * @dependency mdc-screenreaderannouncer\n * @dependency mdc-button\n *\n * @event shown - (React: onShown) This event is dispatched when the toggletip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden\n * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.\n * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.\n * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
52975
52975
  "customElement": true,
52976
52976
  "cssParts": [
52977
52977
  {
@@ -53018,7 +53018,7 @@
53018
53018
  "declarations": [
53019
53019
  {
53020
53020
  "kind": "class",
53021
- "description": "A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>\nTooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.\n\nBecause of this, tooltips cannot contain content that can be focused or interacted with.\nWhen a tooltip must contain a focusable element like a link or button, use a toggle tip instead.\n\nA tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote:\n - Tooltips cannot contain content that can be focused or interacted with.\n - Tooltips will contain the default `aria-hidden=\"true\"` so that VO will never focus the tooltip.",
53021
+ "description": "",
53022
53022
  "name": "Tooltip",
53023
53023
  "cssProperties": [
53024
53024
  {
@@ -54513,7 +54513,7 @@
54513
54513
  "module": "/src/components/popover/popover.component"
54514
54514
  },
54515
54515
  "tagName": "mdc-tooltip",
54516
- "jsDoc": "/**\n * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>\n * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.\n *\n * Because of this, tooltips cannot contain content that can be focused or interacted with.\n * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.\n *\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note:\n * - Tooltips cannot contain content that can be focused or interacted with.\n * - Tooltips will contain the default `aria-hidden=\"true\"` so that VO will never focus the tooltip.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
54516
+ "jsDoc": "/**\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
54517
54517
  "customElement": true,
54518
54518
  "slots": [
54519
54519
  {
@@ -54570,7 +54570,7 @@
54570
54570
  "declarations": [
54571
54571
  {
54572
54572
  "kind": "class",
54573
- "description": "Typewriter component that creates a typewriter effect on text content.\nIt uses the Text component internally, adding a progressive typing effect.\n\nThe `type` attribute allows changing the text style (passed to the internal Text component).\nThe `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\nThe default tag name is `p`.\n\nThe `speed` attribute controls typing speed in milliseconds per character:\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds\n\nAdvanced features:\n- Dynamic speed adjustment during typing\n- Chunked text addition via addTextChunk() method\n- Instant text addition via addInstantTextChunk() method or instant parameter\n- Mixed instant and animated chunks in queue\n- Continues typing in background tabs\n- Performance optimized for large text\n- maxQueueSize to limit memory usage from excessive queuing\n- event handling for typing completion and content changes\n\nThe component includes accessibility features:\n- Screen readers announce the complete text, not character by character\n- Uses aria-live=\"polite\" for dynamic content updates\n- Sets aria-busy during typing animation",
54573
+ "description": "",
54574
54574
  "name": "Typewriter",
54575
54575
  "cssParts": [
54576
54576
  {
@@ -54889,7 +54889,7 @@
54889
54889
  "module": "/src/models"
54890
54890
  },
54891
54891
  "tagName": "mdc-typewriter",
54892
- "jsDoc": "/**\n * Typewriter component that creates a typewriter effect on text content.\n * It uses the Text component internally, adding a progressive typing effect.\n *\n * The `type` attribute allows changing the text style (passed to the internal Text component).\n * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\n * The default tag name is `p`.\n *\n * The `speed` attribute controls typing speed in milliseconds per character:\n * - 'very-slow' = 240ms per character\n * - 'slow' = 120ms per character\n * - 'normal' = 60ms per character (default)\n * - 'fast' = 20ms per character\n * - 'very-fast' = 1ms per character\n * - Or any numeric string representing milliseconds\n *\n * Advanced features:\n * - Dynamic speed adjustment during typing\n * - Chunked text addition via addTextChunk() method\n * - Instant text addition via addInstantTextChunk() method or instant parameter\n * - Mixed instant and animated chunks in queue\n * - Continues typing in background tabs\n * - Performance optimized for large text\n * - maxQueueSize to limit memory usage from excessive queuing\n * - event handling for typing completion and content changes\n *\n * The component includes accessibility features:\n * - Screen readers announce the complete text, not character by character\n * - Uses aria-live=\"polite\" for dynamic content updates\n * - Sets aria-busy during typing animation\n *\n * @dependency mdc-text\n *\n * @tagname mdc-typewriter\n * @slot - Default slot for text content\n *\n * @csspart container - Container for the text element\n * @csspart text - The text element (forwarded to mdc-text)\n * @csspart typewriter-hidden - The hidden typewriter text\n *\n * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.\n * Detail: \\{ finalContent: string \\}\n * @event change - (React: onChange) Fired when the content of the typewriter changes.\n * Detail: \\{ content: string, isTyping: boolean \\}\n */",
54892
+ "jsDoc": "/**\n * @tagname mdc-typewriter\n * @dependency mdc-text\n *\n * @slot - Default slot for text content\n *\n * @csspart container - Container for the text element\n * @csspart text - The text element (forwarded to mdc-text)\n * @csspart typewriter-hidden - The hidden typewriter text\n *\n * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.\n * Detail: \\{ finalContent: string \\}\n * @event change - (React: onChange) Fired when the content of the typewriter changes.\n * Detail: \\{ content: string, isTyping: boolean \\}\n */",
54893
54893
  "customElement": true
54894
54894
  }
54895
54895
  ],
@@ -54910,7 +54910,7 @@
54910
54910
  "declarations": [
54911
54911
  {
54912
54912
  "kind": "class",
54913
- "description": "`mdc-verticaltablist` is a vertical tab list component that extends the List component.\nIt organizes tabs vertically and follows the same WCAG standards as the horizontal tablist.\n\nChildren of the vertical tab list are `mdc-tab` elements, sent to the default slot.\nCurrently only \"line\" variant of the tab is supported, setting other variants doesn't have any effect.\nThe variant is automatically set on the tab when it is added to the vertical tab list, so there is no need to set it manually.\n\nThe tabs can be navigated using the up/down arrow keys, and selected by clicking,\nor pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist` (Tab components passed in to default slot).\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- The vertical orientation is conveyed through the aria-orientation property on the `tablist` element, which is set to `vertical` by the component.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.",
54913
+ "description": "",
54914
54914
  "name": "Verticaltablist",
54915
54915
  "slots": [
54916
54916
  {
@@ -55167,7 +55167,7 @@
55167
55167
  "module": "/src/components/list/list.component"
55168
55168
  },
55169
55169
  "tagName": "mdc-verticaltablist",
55170
- "jsDoc": "/**\n * `mdc-verticaltablist` is a vertical tab list component that extends the List component.\n * It organizes tabs vertically and follows the same WCAG standards as the horizontal tablist.\n *\n * Children of the vertical tab list are `mdc-tab` elements, sent to the default slot.\n * Currently only \"line\" variant of the tab is supported, setting other variants doesn't have any effect.\n * The variant is automatically set on the tab when it is added to the vertical tab list, so there is no need to set it manually.\n *\n * The tabs can be navigated using the up/down arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist` (Tab components passed in to default slot).\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - The vertical orientation is conveyed through the aria-orientation property on the `tablist` element, which is set to `vertical` by the component.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n *\n * @tagname mdc-verticaltablist\n *\n * @dependency mdc-tab\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n */",
55170
+ "jsDoc": "/**\n * @tagname mdc-verticaltablist\n *\n * @dependency mdc-tab\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n */",
55171
55171
  "customElement": true,
55172
55172
  "attributes": [
55173
55173
  {
@@ -55251,7 +55251,7 @@
55251
55251
  "declarations": [
55252
55252
  {
55253
55253
  "kind": "class",
55254
- "description": "`mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\nthe Tanstack Virtual library.\n\nThis component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\nkeyboard navigation, focus management, scroll anchoring and accessibility features.\n\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n\n## Setup\n\n`virtualizerProps` is a required prop that requires at least three properties to be set:\n- `count` is the total number of items in the list\n- `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list\n- `getItemKey` is a function that returns a unique key for each item in the list.\n\n### Render list items\n\nTo keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n\nWe need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\nThe event detail contains the `virtualItems` array, which contains the information for the rendering.\nList items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n\n## Best practices\n\n### List updates\n\nTanstack needs only the count of the items in the list and the size of each item to perform virtualization.\nList updates happens when\n- when `virtualizerProps` property of the component instance changes\n- when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n- when `component.visualiser.measure` called manually.\n\n### Header\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n\n### Lists with dynamic content\n\nUnique keys for the list items are critical for dynamically changing list items or item's content.\nIf the key change with the content it will cause scrollbar and content shuttering.\n\n### Top/Bottom Padding\n\nIf padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this\nwill break the virtualization calculations and can cause scrollbars when they are not necessary.\nInstead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.\n\n### Gaps between items\n\nIf you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels\nto the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.\nIf you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.\nIf you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.",
55254
+ "description": "",
55255
55255
  "name": "VirtualizedList",
55256
55256
  "cssParts": [
55257
55257
  {
@@ -55815,7 +55815,7 @@
55815
55815
  "module": "/src/components/list/list.component"
55816
55816
  },
55817
55817
  "tagName": "mdc-virtualizedlist",
55818
- "jsDoc": "/**\n * `mdc-virtualizedlist` is an extension of the `mdc-list` component that adds virtualization capabilities using\n * the Tanstack Virtual library.\n *\n * This component is thin wrapper around the Tanstack libray to provide additional funtionalities such as\n * keyboard navigation, focus management, scroll anchoring and accessibility features.\n *\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * ## Setup\n *\n * `virtualizerProps` is a required prop that requires at least three properties to be set:\n * - `count` is the total number of items in the list\n * - `estimateSize` is a function that returns the estimated size (in pixels) of each item in the list\n * - `getItemKey` is a function that returns a unique key for each item in the list.\n *\n * ### Render list items\n *\n * To keep the component framework-agnostic, the rendering of the list items is left to the consumer.\n *\n * We need to render only the visible items. The list of visible items are provided by the `virtualitemschange` event.\n * The event detail contains the `virtualItems` array, which contains the information for the rendering.\n * List items must have an `data-index` attribute, the indexes are in the `virtualItems` list.\n *\n * ## Best practices\n *\n * ### List updates\n *\n * Tanstack needs only the count of the items in the list and the size of each item to perform virtualization.\n * List updates happens when\n * - when `virtualizerProps` property of the component instance changes\n * - when `observe-size-changes` is set and the item's size changes (it uses ResizeObserver internally)\n * - when `component.visualiser.measure` called manually.\n *\n * ### Header\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n *\n * ### Lists with dynamic content\n *\n * Unique keys for the list items are critical for dynamically changing list items or item's content.\n * If the key change with the content it will cause scrollbar and content shuttering.\n *\n * ### Top/Bottom Padding\n *\n * If padding is required at the top or the bottom of the list, do not apply padding/margin via CSS since this\n * will break the virtualization calculations and can cause scrollbars when they are not necessary.\n * Instead use the `paddingStart` and `paddingEnd` properties (in pixels) of the `virtualizerProps` prop.\n *\n * ### Gaps between items\n *\n * If you are adding gaps between items using CSS margin or gap properties, you must provide the same value in pixels\n * to the `gap` property of the `virtualizerProps` prop. This ensures that the virtualization calculations are accurate.\n * If you are using CSS margins, ensure that you are not applying the margin to the top of the first or the bottom of the last item.\n * If you need spacing there, use the `paddingStart` and `paddingEnd` properties of the `virtualizerProps` prop.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
55818
+ "jsDoc": "/**\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n * @event virtualitemschange - (React: onVirtualItemsChange) Event that gets called when the virtual items change.\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
55819
55819
  "customElement": true
55820
55820
  }
55821
55821
  ],