@momentum-design/components 0.118.2 → 0.118.4

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 (118) hide show
  1. package/dist/browser/index.js +263 -259
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/accordion/accordion.component.d.ts +1 -1
  4. package/dist/components/accordion/accordion.component.js +1 -1
  5. package/dist/components/accordionbutton/accordionbutton.component.d.ts +2 -2
  6. package/dist/components/accordionbutton/accordionbutton.component.js +2 -2
  7. package/dist/components/badge/badge.component.d.ts +13 -4
  8. package/dist/components/badge/badge.component.js +16 -10
  9. package/dist/components/badge/badge.styles.js +13 -13
  10. package/dist/components/buttongroup/buttongroup.component.d.ts +2 -0
  11. package/dist/components/buttongroup/buttongroup.component.js +2 -0
  12. package/dist/components/dialog/dialog.component.d.ts +7 -0
  13. package/dist/components/dialog/dialog.component.js +7 -0
  14. package/dist/components/listheader/listheader.component.d.ts +4 -0
  15. package/dist/components/listheader/listheader.component.js +4 -0
  16. package/dist/components/listitem/listitem.component.d.ts +5 -0
  17. package/dist/components/listitem/listitem.component.js +5 -0
  18. package/dist/components/menuitem/menuitem.component.d.ts +7 -0
  19. package/dist/components/menuitem/menuitem.component.js +7 -0
  20. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +10 -0
  21. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +10 -0
  22. package/dist/components/menuitemradio/menuitemradio.component.d.ts +10 -0
  23. package/dist/components/menuitemradio/menuitemradio.component.js +10 -0
  24. package/dist/components/menupopover/menupopover.component.d.ts +4 -0
  25. package/dist/components/menupopover/menupopover.component.js +4 -0
  26. package/dist/components/menusection/menusection.component.d.ts +5 -0
  27. package/dist/components/menusection/menusection.component.js +5 -0
  28. package/dist/components/navmenuitem/navmenuitem.component.d.ts +6 -0
  29. package/dist/components/navmenuitem/navmenuitem.component.js +12 -4
  30. package/dist/components/navmenuitem/navmenuitem.styles.js +4 -4
  31. package/dist/components/optgroup/optgroup.component.d.ts +2 -0
  32. package/dist/components/optgroup/optgroup.component.js +4 -1
  33. package/dist/components/option/option.component.d.ts +8 -0
  34. package/dist/components/option/option.component.js +8 -0
  35. package/dist/components/popover/popover.component.d.ts +3 -0
  36. package/dist/components/popover/popover.component.js +5 -2
  37. package/dist/components/popover/popover.styles.js +4 -4
  38. package/dist/components/presence/presence.component.d.ts +17 -0
  39. package/dist/components/presence/presence.component.js +18 -1
  40. package/dist/components/presence/presence.styles.js +15 -15
  41. package/dist/components/progressbar/progressbar.component.d.ts +8 -0
  42. package/dist/components/progressbar/progressbar.component.js +11 -3
  43. package/dist/components/progressspinner/progressspinner.component.d.ts +6 -0
  44. package/dist/components/progressspinner/progressspinner.component.js +6 -0
  45. package/dist/components/staticcheckbox/staticcheckbox.component.d.ts +1 -0
  46. package/dist/components/staticcheckbox/staticcheckbox.component.js +1 -0
  47. package/dist/components/staticchip/staticchip.component.d.ts +1 -0
  48. package/dist/components/staticchip/staticchip.component.js +1 -0
  49. package/dist/components/tab/tab.component.d.ts +5 -0
  50. package/dist/components/tab/tab.component.js +5 -0
  51. package/dist/components/tablist/tablist.component.d.ts +3 -1
  52. package/dist/components/tablist/tablist.component.js +5 -3
  53. package/dist/components/tablist/tablist.styles.js +1 -1
  54. package/dist/components/textarea/textarea.component.d.ts +2 -0
  55. package/dist/components/textarea/textarea.component.js +3 -1
  56. package/dist/components/typewriter/typewriter.component.d.ts +1 -0
  57. package/dist/components/typewriter/typewriter.component.js +2 -1
  58. package/dist/components/typewriter/typewriter.constants.d.ts +1 -0
  59. package/dist/components/typewriter/typewriter.constants.js +1 -0
  60. package/dist/components/typewriter/typewriter.styles.js +2 -2
  61. package/dist/components/virtualizedlist/virtualizedlist.component.d.ts +3 -0
  62. package/dist/components/virtualizedlist/virtualizedlist.component.js +3 -0
  63. package/dist/custom-elements.json +1222 -442
  64. package/dist/react/accordion/index.d.ts +1 -1
  65. package/dist/react/accordion/index.js +1 -1
  66. package/dist/react/accordionbutton/index.d.ts +2 -2
  67. package/dist/react/accordionbutton/index.js +2 -2
  68. package/dist/react/badge/index.d.ts +10 -0
  69. package/dist/react/badge/index.js +10 -0
  70. package/dist/react/buttongroup/index.d.ts +2 -0
  71. package/dist/react/buttongroup/index.js +2 -0
  72. package/dist/react/dialog/index.d.ts +7 -0
  73. package/dist/react/dialog/index.js +7 -0
  74. package/dist/react/index.d.ts +1 -1
  75. package/dist/react/index.js +1 -1
  76. package/dist/react/listheader/index.d.ts +4 -0
  77. package/dist/react/listheader/index.js +4 -0
  78. package/dist/react/listitem/index.d.ts +5 -0
  79. package/dist/react/listitem/index.js +5 -0
  80. package/dist/react/menuitem/index.d.ts +7 -0
  81. package/dist/react/menuitem/index.js +7 -0
  82. package/dist/react/menuitemcheckbox/index.d.ts +10 -0
  83. package/dist/react/menuitemcheckbox/index.js +10 -0
  84. package/dist/react/menuitemradio/index.d.ts +10 -0
  85. package/dist/react/menuitemradio/index.js +10 -0
  86. package/dist/react/menupopover/index.d.ts +4 -0
  87. package/dist/react/menupopover/index.js +4 -0
  88. package/dist/react/menusection/index.d.ts +5 -0
  89. package/dist/react/menusection/index.js +5 -0
  90. package/dist/react/navmenuitem/index.d.ts +6 -0
  91. package/dist/react/navmenuitem/index.js +6 -0
  92. package/dist/react/optgroup/index.d.ts +2 -0
  93. package/dist/react/optgroup/index.js +2 -0
  94. package/dist/react/option/index.d.ts +8 -0
  95. package/dist/react/option/index.js +8 -0
  96. package/dist/react/popover/index.d.ts +3 -0
  97. package/dist/react/popover/index.js +3 -0
  98. package/dist/react/presence/index.d.ts +17 -0
  99. package/dist/react/presence/index.js +17 -0
  100. package/dist/react/progressbar/index.d.ts +8 -0
  101. package/dist/react/progressbar/index.js +8 -0
  102. package/dist/react/progressspinner/index.d.ts +6 -0
  103. package/dist/react/progressspinner/index.js +6 -0
  104. package/dist/react/staticcheckbox/index.d.ts +1 -0
  105. package/dist/react/staticcheckbox/index.js +1 -0
  106. package/dist/react/staticchip/index.d.ts +1 -0
  107. package/dist/react/staticchip/index.js +1 -0
  108. package/dist/react/tab/index.d.ts +5 -0
  109. package/dist/react/tab/index.js +5 -0
  110. package/dist/react/tablist/index.d.ts +3 -1
  111. package/dist/react/tablist/index.js +3 -1
  112. package/dist/react/textarea/index.d.ts +2 -0
  113. package/dist/react/textarea/index.js +2 -0
  114. package/dist/react/typewriter/index.d.ts +1 -0
  115. package/dist/react/typewriter/index.js +1 -0
  116. package/dist/react/virtualizedlist/index.d.ts +3 -0
  117. package/dist/react/virtualizedlist/index.js +3 -0
  118. package/package.json +1 -1
@@ -45,6 +45,14 @@
45
45
  }
46
46
  ],
47
47
  "cssParts": [
48
+ {
49
+ "description": "The body section of the accordion.",
50
+ "name": "body-section",
51
+ "inheritedFrom": {
52
+ "name": "AccordionButton",
53
+ "module": "src/components/accordionbutton/accordionbutton.component.ts"
54
+ }
55
+ },
48
56
  {
49
57
  "description": "The header section of the accordion.",
50
58
  "name": "header-section",
@@ -73,14 +81,6 @@
73
81
  "description": "The trailing header button of the accordion.",
74
82
  "name": "trailing-header__button"
75
83
  },
76
- {
77
- "description": "The body section of the accordion.",
78
- "name": "body-section",
79
- "inheritedFrom": {
80
- "name": "AccordionButton",
81
- "module": "src/components/accordionbutton/accordionbutton.component.ts"
82
- }
83
- },
84
84
  {
85
85
  "description": "The header button section of the accordion button.",
86
86
  "name": "header-button-section",
@@ -371,7 +371,7 @@
371
371
  "module": "/src/components/accordionbutton/accordionbutton.component"
372
372
  },
373
373
  "tagName": "mdc-accordion",
374
- "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\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 is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n * @csspart body-section - The body section of the accordion.\n */",
374
+ "jsDoc": "/**\n * An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n * - Leading Slot - Contains the leading controls of the accordion on the header section. This will be placed on the leading side, after the header text.\n * - Trailing Slot - Contains the trailing controls of the accordion on the header section. This will be placed on the trailing side, before the expand/collapse button.\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.\n *\n * @tagname mdc-accordion\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot leading-controls - The leading controls slot of the accordion on the header section.\n * @slot trailing-controls - The trailing controls slot of the accordion on the header section.\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 is expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion.\n *\n * @csspart body-section - The body section of the accordion.\n * @csspart header-section - The header section of the accordion.\n * @csspart leading-header - The leading header of the accordion.\n * @csspart trailing-header - The trailing header of the accordion.\n * @csspart trailing-header__button - The trailing header button of the accordion.\n */",
375
375
  "customElement": true,
376
376
  "attributes": [
377
377
  {
@@ -505,13 +505,17 @@
505
505
  ],
506
506
  "cssParts": [
507
507
  {
508
- "description": "The header section of the accordion button.",
509
- "name": "header-section"
508
+ "description": "The body section of the accordion button.",
509
+ "name": "body-section"
510
510
  },
511
511
  {
512
512
  "description": "The header button section of the accordion button.",
513
513
  "name": "header-button-section"
514
514
  },
515
+ {
516
+ "description": "The header section of the accordion button.",
517
+ "name": "header-section"
518
+ },
515
519
  {
516
520
  "description": "The leading header of the accordion button.",
517
521
  "name": "leading-header"
@@ -523,10 +527,6 @@
523
527
  {
524
528
  "description": "The trailing header icon of the accordion button.",
525
529
  "name": "trailing-header__icon"
526
- },
527
- {
528
- "description": "The body section of the accordion button.",
529
- "name": "body-section"
530
530
  }
531
531
  ],
532
532
  "slots": [
@@ -802,7 +802,7 @@
802
802
  "module": "/src/models"
803
803
  },
804
804
  "tagName": "mdc-accordionbutton",
805
- "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\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 expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled color of the accordion button.\n *\n * @csspart header-section - The header section of the accordion button.\n * @csspart header-button-section - The header button section of the accordion button.\n * @csspart leading-header - The leading header of the accordion button.\n * @csspart trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n * @csspart body-section - The body section of the accordion button.\n */",
805
+ "jsDoc": "/**\n * An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n *\n * The header section contains:\n * - Prefix Icon\n * - Header Text\n *\n * The body section contains:\n * - Default slot - User can place any content inside the body section.\n *\n * The accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\n * There are two types of variants based on that the border styling of the accordion gets reflected. <br/>\n * There are two sizes of accordion, one is small and the other is large.\n * Small size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n *\n * By default, the header text in the accordion heading is of H3 with an aria-level of '3'.\n * If this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n *\n * An accordion can be disabled, and when it's disabled, the header section will not be clickable.\n *\n * If you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n *\n * If an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.\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 expanded.\n *\n * @cssproperty --mdc-accordionbutton-border-color - The border color of the accordion button.\n * @cssproperty --mdc-accordionbutton-hover-color - The hover color of the accordion button.\n * @cssproperty --mdc-accordionbutton-active-color - The active color of the accordion button.\n * @cssproperty --mdc-accordionbutton-disabled-color - The disabled 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 trailing-header - The trailing header of the accordion button.\n * @csspart trailing-header__icon - The trailing header icon of the accordion button.\n */",
806
806
  "customElement": true
807
807
  }
808
808
  ],
@@ -1839,7 +1839,11 @@
1839
1839
  "cssParts": [
1840
1840
  {
1841
1841
  "description": "The main body container that holds the illustration and content sections",
1842
- "name": "body"
1842
+ "name": "body",
1843
+ "inheritedFrom": {
1844
+ "name": "Dialog",
1845
+ "module": "src/components/dialog/dialog.component.ts"
1846
+ }
1843
1847
  },
1844
1848
  {
1845
1849
  "description": "The container for the illustration section",
@@ -1851,7 +1855,43 @@
1851
1855
  },
1852
1856
  {
1853
1857
  "description": "The header text",
1854
- "name": "header-text"
1858
+ "name": "header-text",
1859
+ "inheritedFrom": {
1860
+ "name": "Dialog",
1861
+ "module": "src/components/dialog/dialog.component.ts"
1862
+ }
1863
+ },
1864
+ {
1865
+ "description": "The description text of the dialog.",
1866
+ "name": "description-text",
1867
+ "inheritedFrom": {
1868
+ "name": "Dialog",
1869
+ "module": "src/components/dialog/dialog.component.ts"
1870
+ }
1871
+ },
1872
+ {
1873
+ "description": "The close button of the dialog.",
1874
+ "name": "dialog-close-btn",
1875
+ "inheritedFrom": {
1876
+ "name": "Dialog",
1877
+ "module": "src/components/dialog/dialog.component.ts"
1878
+ }
1879
+ },
1880
+ {
1881
+ "description": "The header of the dialog.",
1882
+ "name": "header",
1883
+ "inheritedFrom": {
1884
+ "name": "Dialog",
1885
+ "module": "src/components/dialog/dialog.component.ts"
1886
+ }
1887
+ },
1888
+ {
1889
+ "description": "The header section of the dialog.",
1890
+ "name": "header-section",
1891
+ "inheritedFrom": {
1892
+ "name": "Dialog",
1893
+ "module": "src/components/dialog/dialog.component.ts"
1894
+ }
1855
1895
  }
1856
1896
  ],
1857
1897
  "slots": [
@@ -4224,6 +4264,44 @@
4224
4264
  "name": "--mdc-badge-overlay-background-color"
4225
4265
  }
4226
4266
  ],
4267
+ "cssParts": [
4268
+ {
4269
+ "description": "The dot notification badge.",
4270
+ "name": "badge-dot"
4271
+ },
4272
+ {
4273
+ "description": "The icon badge.",
4274
+ "name": "badge-icon"
4275
+ },
4276
+ {
4277
+ "description": "The error icon badge.",
4278
+ "name": "badge-icon__error"
4279
+ },
4280
+ {
4281
+ "description": "The primary icon badge.",
4282
+ "name": "badge-icon__primary"
4283
+ },
4284
+ {
4285
+ "description": "The secondary icon badge.",
4286
+ "name": "badge-icon__secondary"
4287
+ },
4288
+ {
4289
+ "description": "The success icon badge.",
4290
+ "name": "badge-icon__success"
4291
+ },
4292
+ {
4293
+ "description": "The warning icon badge.",
4294
+ "name": "badge-icon__warning"
4295
+ },
4296
+ {
4297
+ "description": "The overlay badge.",
4298
+ "name": "badge-overlay"
4299
+ },
4300
+ {
4301
+ "description": "The text badge.",
4302
+ "name": "badge-text"
4303
+ }
4304
+ ],
4227
4305
  "members": [
4228
4306
  {
4229
4307
  "kind": "field",
@@ -4332,11 +4410,11 @@
4332
4410
  "description": "the name of the icon from the icon set"
4333
4411
  },
4334
4412
  {
4335
- "name": "backgroundClassPostfix",
4413
+ "name": "backgroundPartPostfix",
4336
4414
  "type": {
4337
4415
  "text": "string"
4338
4416
  },
4339
- "description": "postfix for the class to style the badge icon."
4417
+ "description": "postfix for the part to style the badge icon."
4340
4418
  }
4341
4419
  ],
4342
4420
  "description": "Method to generate the badge icon."
@@ -4476,7 +4554,7 @@
4476
4554
  "module": "/src/models"
4477
4555
  },
4478
4556
  "tagName": "mdc-badge",
4479
- "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 */",
4557
+ "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 *\n * @csspart badge-dot - The dot notification badge.\n * @csspart badge-icon - The icon badge.\n * @csspart badge-icon__error - The error icon badge.\n * @csspart badge-icon__primary - The primary icon badge.\n * @csspart badge-icon__secondary - The secondary icon badge.\n * @csspart badge-icon__success - The success icon badge.\n * @csspart badge-icon__warning - The warning icon badge.\n * @csspart badge-overlay - The overlay badge.\n * @csspart badge-text - The text badge.\n */",
4480
4558
  "customElement": true
4481
4559
  }
4482
4560
  ],
@@ -4651,182 +4729,6 @@
4651
4729
  }
4652
4730
  ]
4653
4731
  },
4654
- {
4655
- "kind": "javascript-module",
4656
- "path": "components/brandvisual/brandvisual.component.js",
4657
- "declarations": [
4658
- {
4659
- "kind": "class",
4660
- "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.",
4661
- "name": "Brandvisual",
4662
- "members": [
4663
- {
4664
- "kind": "field",
4665
- "name": "brandVisualData",
4666
- "type": {
4667
- "text": "Element | TemplateResult | undefined"
4668
- },
4669
- "privacy": "private"
4670
- },
4671
- {
4672
- "kind": "field",
4673
- "name": "name",
4674
- "type": {
4675
- "text": "BrandVisualNames | undefined"
4676
- },
4677
- "description": "Name of the brandVisual (= filename)",
4678
- "attribute": "name",
4679
- "reflects": true
4680
- },
4681
- {
4682
- "kind": "field",
4683
- "name": "altText",
4684
- "type": {
4685
- "text": "string | undefined"
4686
- },
4687
- "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
4688
- "attribute": "altText",
4689
- "reflects": true
4690
- },
4691
- {
4692
- "kind": "method",
4693
- "name": "getBrandVisualData",
4694
- "privacy": "private"
4695
- },
4696
- {
4697
- "kind": "method",
4698
- "name": "injectTemplateAttributes",
4699
- "privacy": "private",
4700
- "return": {
4701
- "type": {
4702
- "text": "Element | TemplateResult"
4703
- }
4704
- },
4705
- "parameters": [
4706
- {
4707
- "name": "litTemplate",
4708
- "type": {
4709
- "text": "TemplateResult"
4710
- }
4711
- },
4712
- {
4713
- "name": "tag",
4714
- "type": {
4715
- "text": "string"
4716
- }
4717
- },
4718
- {
4719
- "name": "props",
4720
- "type": {
4721
- "text": "any"
4722
- }
4723
- }
4724
- ]
4725
- },
4726
- {
4727
- "kind": "method",
4728
- "name": "injectHtmlAttributes",
4729
- "privacy": "private",
4730
- "return": {
4731
- "type": {
4732
- "text": "Element"
4733
- }
4734
- },
4735
- "parameters": [
4736
- {
4737
- "name": "html",
4738
- "type": {
4739
- "text": "Element"
4740
- }
4741
- },
4742
- {
4743
- "name": "props",
4744
- "type": {
4745
- "text": "imageProps"
4746
- }
4747
- }
4748
- ]
4749
- },
4750
- {
4751
- "kind": "method",
4752
- "name": "handleBrandVisualLoadedSuccess",
4753
- "privacy": "private",
4754
- "parameters": [
4755
- {
4756
- "name": "brandVisualHtml",
4757
- "type": {
4758
- "text": "TemplateResult"
4759
- },
4760
- "description": "The brandvisual html element which has been fetched from the brandvisual provider."
4761
- }
4762
- ],
4763
- "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
4764
- },
4765
- {
4766
- "kind": "method",
4767
- "name": "handleBrandVisualLoadedFailure",
4768
- "privacy": "private",
4769
- "parameters": [
4770
- {
4771
- "name": "error",
4772
- "type": {
4773
- "text": "unknown"
4774
- }
4775
- }
4776
- ],
4777
- "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
4778
- }
4779
- ],
4780
- "events": [
4781
- {
4782
- "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
4783
- "name": "load",
4784
- "reactName": "onLoad"
4785
- },
4786
- {
4787
- "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
4788
- "name": "error",
4789
- "reactName": "onError"
4790
- }
4791
- ],
4792
- "attributes": [
4793
- {
4794
- "name": "name",
4795
- "type": {
4796
- "text": "BrandVisualNames | undefined"
4797
- },
4798
- "description": "Name of the brandVisual (= filename)",
4799
- "fieldName": "name"
4800
- },
4801
- {
4802
- "name": "altText",
4803
- "type": {
4804
- "text": "string | undefined"
4805
- },
4806
- "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
4807
- "fieldName": "altText"
4808
- }
4809
- ],
4810
- "superclass": {
4811
- "name": "Component",
4812
- "module": "/src/models"
4813
- },
4814
- "tagName": "mdc-brandvisual",
4815
- "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 */",
4816
- "customElement": true
4817
- }
4818
- ],
4819
- "exports": [
4820
- {
4821
- "kind": "js",
4822
- "name": "default",
4823
- "declaration": {
4824
- "name": "Brandvisual",
4825
- "module": "components/brandvisual/brandvisual.component.js"
4826
- }
4827
- }
4828
- ]
4829
- },
4830
4732
  {
4831
4733
  "kind": "javascript-module",
4832
4734
  "path": "components/bullet/bullet.component.js",
@@ -4898,6 +4800,182 @@
4898
4800
  }
4899
4801
  ]
4900
4802
  },
4803
+ {
4804
+ "kind": "javascript-module",
4805
+ "path": "components/brandvisual/brandvisual.component.js",
4806
+ "declarations": [
4807
+ {
4808
+ "kind": "class",
4809
+ "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.",
4810
+ "name": "Brandvisual",
4811
+ "members": [
4812
+ {
4813
+ "kind": "field",
4814
+ "name": "brandVisualData",
4815
+ "type": {
4816
+ "text": "Element | TemplateResult | undefined"
4817
+ },
4818
+ "privacy": "private"
4819
+ },
4820
+ {
4821
+ "kind": "field",
4822
+ "name": "name",
4823
+ "type": {
4824
+ "text": "BrandVisualNames | undefined"
4825
+ },
4826
+ "description": "Name of the brandVisual (= filename)",
4827
+ "attribute": "name",
4828
+ "reflects": true
4829
+ },
4830
+ {
4831
+ "kind": "field",
4832
+ "name": "altText",
4833
+ "type": {
4834
+ "text": "string | undefined"
4835
+ },
4836
+ "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
4837
+ "attribute": "altText",
4838
+ "reflects": true
4839
+ },
4840
+ {
4841
+ "kind": "method",
4842
+ "name": "getBrandVisualData",
4843
+ "privacy": "private"
4844
+ },
4845
+ {
4846
+ "kind": "method",
4847
+ "name": "injectTemplateAttributes",
4848
+ "privacy": "private",
4849
+ "return": {
4850
+ "type": {
4851
+ "text": "Element | TemplateResult"
4852
+ }
4853
+ },
4854
+ "parameters": [
4855
+ {
4856
+ "name": "litTemplate",
4857
+ "type": {
4858
+ "text": "TemplateResult"
4859
+ }
4860
+ },
4861
+ {
4862
+ "name": "tag",
4863
+ "type": {
4864
+ "text": "string"
4865
+ }
4866
+ },
4867
+ {
4868
+ "name": "props",
4869
+ "type": {
4870
+ "text": "any"
4871
+ }
4872
+ }
4873
+ ]
4874
+ },
4875
+ {
4876
+ "kind": "method",
4877
+ "name": "injectHtmlAttributes",
4878
+ "privacy": "private",
4879
+ "return": {
4880
+ "type": {
4881
+ "text": "Element"
4882
+ }
4883
+ },
4884
+ "parameters": [
4885
+ {
4886
+ "name": "html",
4887
+ "type": {
4888
+ "text": "Element"
4889
+ }
4890
+ },
4891
+ {
4892
+ "name": "props",
4893
+ "type": {
4894
+ "text": "imageProps"
4895
+ }
4896
+ }
4897
+ ]
4898
+ },
4899
+ {
4900
+ "kind": "method",
4901
+ "name": "handleBrandVisualLoadedSuccess",
4902
+ "privacy": "private",
4903
+ "parameters": [
4904
+ {
4905
+ "name": "brandVisualHtml",
4906
+ "type": {
4907
+ "text": "TemplateResult"
4908
+ },
4909
+ "description": "The brandvisual html element which has been fetched from the brandvisual provider."
4910
+ }
4911
+ ],
4912
+ "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
4913
+ },
4914
+ {
4915
+ "kind": "method",
4916
+ "name": "handleBrandVisualLoadedFailure",
4917
+ "privacy": "private",
4918
+ "parameters": [
4919
+ {
4920
+ "name": "error",
4921
+ "type": {
4922
+ "text": "unknown"
4923
+ }
4924
+ }
4925
+ ],
4926
+ "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
4927
+ }
4928
+ ],
4929
+ "events": [
4930
+ {
4931
+ "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
4932
+ "name": "load",
4933
+ "reactName": "onLoad"
4934
+ },
4935
+ {
4936
+ "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
4937
+ "name": "error",
4938
+ "reactName": "onError"
4939
+ }
4940
+ ],
4941
+ "attributes": [
4942
+ {
4943
+ "name": "name",
4944
+ "type": {
4945
+ "text": "BrandVisualNames | undefined"
4946
+ },
4947
+ "description": "Name of the brandVisual (= filename)",
4948
+ "fieldName": "name"
4949
+ },
4950
+ {
4951
+ "name": "altText",
4952
+ "type": {
4953
+ "text": "string | undefined"
4954
+ },
4955
+ "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
4956
+ "fieldName": "altText"
4957
+ }
4958
+ ],
4959
+ "superclass": {
4960
+ "name": "Component",
4961
+ "module": "/src/models"
4962
+ },
4963
+ "tagName": "mdc-brandvisual",
4964
+ "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 */",
4965
+ "customElement": true
4966
+ }
4967
+ ],
4968
+ "exports": [
4969
+ {
4970
+ "kind": "js",
4971
+ "name": "default",
4972
+ "declaration": {
4973
+ "name": "Brandvisual",
4974
+ "module": "components/brandvisual/brandvisual.component.js"
4975
+ }
4976
+ }
4977
+ ]
4978
+ },
4901
4979
  {
4902
4980
  "kind": "javascript-module",
4903
4981
  "path": "components/button/button.component.js",
@@ -5689,6 +5767,12 @@
5689
5767
  "name": "--mdc-buttongroup-divider-color"
5690
5768
  }
5691
5769
  ],
5770
+ "cssParts": [
5771
+ {
5772
+ "description": "The container of the buttongroup.",
5773
+ "name": "container"
5774
+ }
5775
+ ],
5692
5776
  "slots": [
5693
5777
  {
5694
5778
  "description": "This is a default/unnamed slot, which contains the buttons",
@@ -5784,7 +5868,7 @@
5784
5868
  "module": "/src/models"
5785
5869
  },
5786
5870
  "tagName": "mdc-buttongroup",
5787
- "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\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 */",
5871
+ "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\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 */",
5788
5872
  "customElement": true
5789
5873
  }
5790
5874
  ],
@@ -13095,7 +13179,33 @@
13095
13179
  },
13096
13180
  "tagName": "mdc-coachmark",
13097
13181
  "jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\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 *\n */",
13098
- "customElement": true
13182
+ "customElement": true,
13183
+ "cssParts": [
13184
+ {
13185
+ "description": "The close button of the popover.",
13186
+ "name": "popover-close",
13187
+ "inheritedFrom": {
13188
+ "name": "Popover",
13189
+ "module": "src/components/popover/popover.component.ts"
13190
+ }
13191
+ },
13192
+ {
13193
+ "description": "The content of the popover.",
13194
+ "name": "popover-content",
13195
+ "inheritedFrom": {
13196
+ "name": "Popover",
13197
+ "module": "src/components/popover/popover.component.ts"
13198
+ }
13199
+ },
13200
+ {
13201
+ "description": "The hover bridge of the popover.",
13202
+ "name": "popover-hover-bridge",
13203
+ "inheritedFrom": {
13204
+ "name": "Popover",
13205
+ "module": "src/components/popover/popover.component.ts"
13206
+ }
13207
+ }
13208
+ ]
13099
13209
  }
13100
13210
  ],
13101
13211
  "exports": [
@@ -14395,6 +14505,32 @@
14395
14505
  "name": "--mdc-dialog-height"
14396
14506
  }
14397
14507
  ],
14508
+ "cssParts": [
14509
+ {
14510
+ "description": "The body section of the dialog.",
14511
+ "name": "body"
14512
+ },
14513
+ {
14514
+ "description": "The description text of the dialog.",
14515
+ "name": "description-text"
14516
+ },
14517
+ {
14518
+ "description": "The close button of the dialog.",
14519
+ "name": "dialog-close-btn"
14520
+ },
14521
+ {
14522
+ "description": "The header of the dialog.",
14523
+ "name": "header"
14524
+ },
14525
+ {
14526
+ "description": "The header section of the dialog.",
14527
+ "name": "header-section"
14528
+ },
14529
+ {
14530
+ "description": "The header text of the dialog.",
14531
+ "name": "header-text"
14532
+ }
14533
+ ],
14398
14534
  "slots": [
14399
14535
  {
14400
14536
  "description": "Slot for the dialog header content. This can be used to pass custom header content.",
@@ -15405,7 +15541,7 @@
15405
15541
  "module": "/src/models"
15406
15542
  },
15407
15543
  "tagName": "mdc-dialog",
15408
- "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 * 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 * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume 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 * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\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 *\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 */",
15544
+ "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 * 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 * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume 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 * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\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 *\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 */",
15409
15545
  "customElement": true
15410
15546
  }
15411
15547
  ],
@@ -21281,6 +21417,20 @@
21281
21417
  "name": "--mdc-listheader-gap"
21282
21418
  }
21283
21419
  ],
21420
+ "cssParts": [
21421
+ {
21422
+ "description": "The header text of list header",
21423
+ "name": "header-text"
21424
+ },
21425
+ {
21426
+ "description": "The postfix icon of list header",
21427
+ "name": "postfix-icon"
21428
+ },
21429
+ {
21430
+ "description": "The prefix icon of list header",
21431
+ "name": "prefix-icon"
21432
+ }
21433
+ ],
21284
21434
  "slots": [
21285
21435
  {
21286
21436
  "description": "to pass in actionable content like buttons or links",
@@ -21367,7 +21517,7 @@
21367
21517
  "module": "/src/models"
21368
21518
  },
21369
21519
  "tagName": "mdc-listheader",
21370
- "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 */",
21520
+ "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 */",
21371
21521
  "customElement": true
21372
21522
  }
21373
21523
  ],
@@ -21440,6 +21590,24 @@
21440
21590
  "name": "--mdc-listitem-height"
21441
21591
  }
21442
21592
  ],
21593
+ "cssParts": [
21594
+ {
21595
+ "description": "Allows customization of the leading part.",
21596
+ "name": "leading"
21597
+ },
21598
+ {
21599
+ "description": "Allows customization of the leading text part.",
21600
+ "name": "leading-text"
21601
+ },
21602
+ {
21603
+ "description": "Allows customization of the trailing part.",
21604
+ "name": "trailing"
21605
+ },
21606
+ {
21607
+ "description": "Allows customization of the trailing text part.",
21608
+ "name": "trailing-text"
21609
+ }
21610
+ ],
21443
21611
  "slots": [
21444
21612
  {
21445
21613
  "description": "slot for list item controls to appear of leading end.",
@@ -21869,7 +22037,7 @@
21869
22037
  "module": "/src/models"
21870
22038
  },
21871
22039
  "tagName": "mdc-listitem",
21872
- "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 * @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 */",
22040
+ "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 */",
21873
22041
  "customElement": true
21874
22042
  }
21875
22043
  ],
@@ -22321,6 +22489,48 @@
22321
22489
  "kind": "class",
22322
22490
  "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.",
22323
22491
  "name": "MenuItem",
22492
+ "cssParts": [
22493
+ {
22494
+ "description": "Allows customization of the leading part.",
22495
+ "name": "leading",
22496
+ "inheritedFrom": {
22497
+ "name": "ListItem",
22498
+ "module": "src/components/listitem/listitem.component.ts"
22499
+ }
22500
+ },
22501
+ {
22502
+ "description": "Allows customization of leading arrow icon.",
22503
+ "name": "leading-arrow"
22504
+ },
22505
+ {
22506
+ "description": "Allows customization of the leading text part.",
22507
+ "name": "leading-text",
22508
+ "inheritedFrom": {
22509
+ "name": "ListItem",
22510
+ "module": "src/components/listitem/listitem.component.ts"
22511
+ }
22512
+ },
22513
+ {
22514
+ "description": "Allows customization of the trailing part.",
22515
+ "name": "trailing",
22516
+ "inheritedFrom": {
22517
+ "name": "ListItem",
22518
+ "module": "src/components/listitem/listitem.component.ts"
22519
+ }
22520
+ },
22521
+ {
22522
+ "description": "Allows customization of trailing arrow icon.",
22523
+ "name": "trailing-arrow"
22524
+ },
22525
+ {
22526
+ "description": "Allows customization of the trailing text part.",
22527
+ "name": "trailing-text",
22528
+ "inheritedFrom": {
22529
+ "name": "ListItem",
22530
+ "module": "src/components/listitem/listitem.component.ts"
22531
+ }
22532
+ }
22533
+ ],
22324
22534
  "slots": [
22325
22535
  {
22326
22536
  "description": "slot for menu item controls to appear of leading end.",
@@ -22980,7 +23190,7 @@
22980
23190
  "module": "/src/components/listitem/listitem.component"
22981
23191
  },
22982
23192
  "tagName": "mdc-menuitem",
22983
- "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 */",
23193
+ "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 */",
22984
23194
  "customElement": true,
22985
23195
  "cssProperties": [
22986
23196
  {
@@ -23101,6 +23311,162 @@
23101
23311
  "kind": "class",
23102
23312
  "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.",
23103
23313
  "name": "MenuItemCheckbox",
23314
+ "cssProperties": [
23315
+ {
23316
+ "description": "Controls the padding on the left and right of the menuitemcheckbox.",
23317
+ "name": "--mdc-listitem-padding-left-and-right"
23318
+ },
23319
+ {
23320
+ "description": "Allows customization of the default background color.",
23321
+ "name": "--mdc-listitem-default-background-color",
23322
+ "inheritedFrom": {
23323
+ "name": "ListItem",
23324
+ "module": "src/components/listitem/listitem.component.ts"
23325
+ }
23326
+ },
23327
+ {
23328
+ "description": "Allows customization of the background color on hover.",
23329
+ "name": "--mdc-listitem-background-color-hover",
23330
+ "inheritedFrom": {
23331
+ "name": "ListItem",
23332
+ "module": "src/components/listitem/listitem.component.ts"
23333
+ }
23334
+ },
23335
+ {
23336
+ "description": "Allows customization of the background color when pressed.",
23337
+ "name": "--mdc-listitem-background-color-active",
23338
+ "inheritedFrom": {
23339
+ "name": "ListItem",
23340
+ "module": "src/components/listitem/listitem.component.ts"
23341
+ }
23342
+ },
23343
+ {
23344
+ "description": "Allows customization of the primary label, side header and subline text slot color.",
23345
+ "name": "--mdc-listitem-primary-label-color",
23346
+ "inheritedFrom": {
23347
+ "name": "ListItem",
23348
+ "module": "src/components/listitem/listitem.component.ts"
23349
+ }
23350
+ },
23351
+ {
23352
+ "description": "Allows customization of the secondary and tertiary label text slot color.",
23353
+ "name": "--mdc-listitem-secondary-label-color",
23354
+ "inheritedFrom": {
23355
+ "name": "ListItem",
23356
+ "module": "src/components/listitem/listitem.component.ts"
23357
+ }
23358
+ },
23359
+ {
23360
+ "description": "Allows customization of the disabled color.",
23361
+ "name": "--mdc-listitem-disabled-color",
23362
+ "inheritedFrom": {
23363
+ "name": "ListItem",
23364
+ "module": "src/components/listitem/listitem.component.ts"
23365
+ }
23366
+ },
23367
+ {
23368
+ "description": "Allows customization of column gap.",
23369
+ "name": "--mdc-listitem-column-gap",
23370
+ "inheritedFrom": {
23371
+ "name": "ListItem",
23372
+ "module": "src/components/listitem/listitem.component.ts"
23373
+ }
23374
+ },
23375
+ {
23376
+ "description": "Allows customization of padding left and right.",
23377
+ "name": "--mdc-listitem-padding-left-right",
23378
+ "inheritedFrom": {
23379
+ "name": "ListItem",
23380
+ "module": "src/components/listitem/listitem.component.ts"
23381
+ }
23382
+ },
23383
+ {
23384
+ "description": "Allows customization of padding top and bottom.",
23385
+ "name": "--mdc-listitem-padding-top-bottom",
23386
+ "inheritedFrom": {
23387
+ "name": "ListItem",
23388
+ "module": "src/components/listitem/listitem.component.ts"
23389
+ }
23390
+ },
23391
+ {
23392
+ "description": "Allows customization of the cursor.",
23393
+ "name": "--mdc-listitem-cursor",
23394
+ "inheritedFrom": {
23395
+ "name": "ListItem",
23396
+ "module": "src/components/listitem/listitem.component.ts"
23397
+ }
23398
+ },
23399
+ {
23400
+ "description": "Allows customization of the width of the list item.",
23401
+ "name": "--mdc-listitem-width",
23402
+ "inheritedFrom": {
23403
+ "name": "ListItem",
23404
+ "module": "src/components/listitem/listitem.component.ts"
23405
+ }
23406
+ },
23407
+ {
23408
+ "description": "Allows customization of the height of the list item.",
23409
+ "name": "--mdc-listitem-height",
23410
+ "inheritedFrom": {
23411
+ "name": "ListItem",
23412
+ "module": "src/components/listitem/listitem.component.ts"
23413
+ }
23414
+ }
23415
+ ],
23416
+ "cssParts": [
23417
+ {
23418
+ "description": "Allows customization of the checkmark icon.",
23419
+ "name": "checkmark-icon"
23420
+ },
23421
+ {
23422
+ "description": "Allows customization of the leading part.",
23423
+ "name": "leading",
23424
+ "inheritedFrom": {
23425
+ "name": "ListItem",
23426
+ "module": "src/components/listitem/listitem.component.ts"
23427
+ }
23428
+ },
23429
+ {
23430
+ "description": "Allows customization of leading arrow icon.",
23431
+ "name": "leading-arrow",
23432
+ "inheritedFrom": {
23433
+ "name": "MenuItem",
23434
+ "module": "src/components/menuitem/menuitem.component.ts"
23435
+ }
23436
+ },
23437
+ {
23438
+ "description": "Allows customization of the leading text part.",
23439
+ "name": "leading-text",
23440
+ "inheritedFrom": {
23441
+ "name": "ListItem",
23442
+ "module": "src/components/listitem/listitem.component.ts"
23443
+ }
23444
+ },
23445
+ {
23446
+ "description": "Allows customization of the trailing part.",
23447
+ "name": "trailing",
23448
+ "inheritedFrom": {
23449
+ "name": "ListItem",
23450
+ "module": "src/components/listitem/listitem.component.ts"
23451
+ }
23452
+ },
23453
+ {
23454
+ "description": "Allows customization of trailing arrow icon.",
23455
+ "name": "trailing-arrow",
23456
+ "inheritedFrom": {
23457
+ "name": "MenuItem",
23458
+ "module": "src/components/menuitem/menuitem.component.ts"
23459
+ }
23460
+ },
23461
+ {
23462
+ "description": "Allows customization of the trailing text part.",
23463
+ "name": "trailing-text",
23464
+ "inheritedFrom": {
23465
+ "name": "ListItem",
23466
+ "module": "src/components/listitem/listitem.component.ts"
23467
+ }
23468
+ }
23469
+ ],
23104
23470
  "slots": [
23105
23471
  {
23106
23472
  "description": "slot for menu item checkbox controls to appear of leading end.",
@@ -23917,9 +24283,34 @@
23917
24283
  "module": "/src/components/menuitem/menuitem.component"
23918
24284
  },
23919
24285
  "tagName": "mdc-menuitemcheckbox",
23920
- "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 */",
23921
- "customElement": true,
24286
+ "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 */",
24287
+ "customElement": true
24288
+ }
24289
+ ],
24290
+ "exports": [
24291
+ {
24292
+ "kind": "js",
24293
+ "name": "default",
24294
+ "declaration": {
24295
+ "name": "MenuItemCheckbox",
24296
+ "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
24297
+ }
24298
+ }
24299
+ ]
24300
+ },
24301
+ {
24302
+ "kind": "javascript-module",
24303
+ "path": "components/menuitemradio/menuitemradio.component.js",
24304
+ "declarations": [
24305
+ {
24306
+ "kind": "class",
24307
+ "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.",
24308
+ "name": "MenuItemRadio",
23922
24309
  "cssProperties": [
24310
+ {
24311
+ "description": "Controls the padding on the left and right of the menuitemradio.",
24312
+ "name": "--mdc-listitem-padding-left-and-right"
24313
+ },
23923
24314
  {
23924
24315
  "description": "Allows customization of the default background color.",
23925
24316
  "name": "--mdc-listitem-default-background-color",
@@ -24016,28 +24407,61 @@
24016
24407
  "module": "src/components/listitem/listitem.component.ts"
24017
24408
  }
24018
24409
  }
24019
- ]
24020
- }
24021
- ],
24022
- "exports": [
24023
- {
24024
- "kind": "js",
24025
- "name": "default",
24026
- "declaration": {
24027
- "name": "MenuItemCheckbox",
24028
- "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
24029
- }
24030
- }
24031
- ]
24032
- },
24033
- {
24034
- "kind": "javascript-module",
24035
- "path": "components/menuitemradio/menuitemradio.component.js",
24036
- "declarations": [
24037
- {
24038
- "kind": "class",
24039
- "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.",
24040
- "name": "MenuItemRadio",
24410
+ ],
24411
+ "cssParts": [
24412
+ {
24413
+ "description": "Allows customization of the checkmark icon.",
24414
+ "name": "checkmark-icon"
24415
+ },
24416
+ {
24417
+ "description": "Allows customization of the leading part.",
24418
+ "name": "leading",
24419
+ "inheritedFrom": {
24420
+ "name": "ListItem",
24421
+ "module": "src/components/listitem/listitem.component.ts"
24422
+ }
24423
+ },
24424
+ {
24425
+ "description": "Allows customization of leading arrow icon.",
24426
+ "name": "leading-arrow",
24427
+ "inheritedFrom": {
24428
+ "name": "MenuItem",
24429
+ "module": "src/components/menuitem/menuitem.component.ts"
24430
+ }
24431
+ },
24432
+ {
24433
+ "description": "Allows customization of the leading text part.",
24434
+ "name": "leading-text",
24435
+ "inheritedFrom": {
24436
+ "name": "ListItem",
24437
+ "module": "src/components/listitem/listitem.component.ts"
24438
+ }
24439
+ },
24440
+ {
24441
+ "description": "Allows customization of the trailing part.",
24442
+ "name": "trailing",
24443
+ "inheritedFrom": {
24444
+ "name": "ListItem",
24445
+ "module": "src/components/listitem/listitem.component.ts"
24446
+ }
24447
+ },
24448
+ {
24449
+ "description": "Allows customization of trailing arrow icon.",
24450
+ "name": "trailing-arrow",
24451
+ "inheritedFrom": {
24452
+ "name": "MenuItem",
24453
+ "module": "src/components/menuitem/menuitem.component.ts"
24454
+ }
24455
+ },
24456
+ {
24457
+ "description": "Allows customization of the trailing text part.",
24458
+ "name": "trailing-text",
24459
+ "inheritedFrom": {
24460
+ "name": "ListItem",
24461
+ "module": "src/components/listitem/listitem.component.ts"
24462
+ }
24463
+ }
24464
+ ],
24041
24465
  "slots": [
24042
24466
  {
24043
24467
  "description": "slot for menu item radio controls to appear of leading end.",
@@ -24831,106 +25255,8 @@
24831
25255
  "module": "/src/components/menuitem/menuitem.component"
24832
25256
  },
24833
25257
  "tagName": "mdc-menuitemradio",
24834
- "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 */",
24835
- "customElement": true,
24836
- "cssProperties": [
24837
- {
24838
- "description": "Allows customization of the default background color.",
24839
- "name": "--mdc-listitem-default-background-color",
24840
- "inheritedFrom": {
24841
- "name": "ListItem",
24842
- "module": "src/components/listitem/listitem.component.ts"
24843
- }
24844
- },
24845
- {
24846
- "description": "Allows customization of the background color on hover.",
24847
- "name": "--mdc-listitem-background-color-hover",
24848
- "inheritedFrom": {
24849
- "name": "ListItem",
24850
- "module": "src/components/listitem/listitem.component.ts"
24851
- }
24852
- },
24853
- {
24854
- "description": "Allows customization of the background color when pressed.",
24855
- "name": "--mdc-listitem-background-color-active",
24856
- "inheritedFrom": {
24857
- "name": "ListItem",
24858
- "module": "src/components/listitem/listitem.component.ts"
24859
- }
24860
- },
24861
- {
24862
- "description": "Allows customization of the primary label, side header and subline text slot color.",
24863
- "name": "--mdc-listitem-primary-label-color",
24864
- "inheritedFrom": {
24865
- "name": "ListItem",
24866
- "module": "src/components/listitem/listitem.component.ts"
24867
- }
24868
- },
24869
- {
24870
- "description": "Allows customization of the secondary and tertiary label text slot color.",
24871
- "name": "--mdc-listitem-secondary-label-color",
24872
- "inheritedFrom": {
24873
- "name": "ListItem",
24874
- "module": "src/components/listitem/listitem.component.ts"
24875
- }
24876
- },
24877
- {
24878
- "description": "Allows customization of the disabled color.",
24879
- "name": "--mdc-listitem-disabled-color",
24880
- "inheritedFrom": {
24881
- "name": "ListItem",
24882
- "module": "src/components/listitem/listitem.component.ts"
24883
- }
24884
- },
24885
- {
24886
- "description": "Allows customization of column gap.",
24887
- "name": "--mdc-listitem-column-gap",
24888
- "inheritedFrom": {
24889
- "name": "ListItem",
24890
- "module": "src/components/listitem/listitem.component.ts"
24891
- }
24892
- },
24893
- {
24894
- "description": "Allows customization of padding left and right.",
24895
- "name": "--mdc-listitem-padding-left-right",
24896
- "inheritedFrom": {
24897
- "name": "ListItem",
24898
- "module": "src/components/listitem/listitem.component.ts"
24899
- }
24900
- },
24901
- {
24902
- "description": "Allows customization of padding top and bottom.",
24903
- "name": "--mdc-listitem-padding-top-bottom",
24904
- "inheritedFrom": {
24905
- "name": "ListItem",
24906
- "module": "src/components/listitem/listitem.component.ts"
24907
- }
24908
- },
24909
- {
24910
- "description": "Allows customization of the cursor.",
24911
- "name": "--mdc-listitem-cursor",
24912
- "inheritedFrom": {
24913
- "name": "ListItem",
24914
- "module": "src/components/listitem/listitem.component.ts"
24915
- }
24916
- },
24917
- {
24918
- "description": "Allows customization of the width of the list item.",
24919
- "name": "--mdc-listitem-width",
24920
- "inheritedFrom": {
24921
- "name": "ListItem",
24922
- "module": "src/components/listitem/listitem.component.ts"
24923
- }
24924
- },
24925
- {
24926
- "description": "Allows customization of the height of the list item.",
24927
- "name": "--mdc-listitem-height",
24928
- "inheritedFrom": {
24929
- "name": "ListItem",
24930
- "module": "src/components/listitem/listitem.component.ts"
24931
- }
24932
- }
24933
- ]
25258
+ "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 */",
25259
+ "customElement": true
24934
25260
  }
24935
25261
  ],
24936
25262
  "exports": [
@@ -24952,6 +25278,32 @@
24952
25278
  "kind": "class",
24953
25279
  "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",
24954
25280
  "name": "MenuPopover",
25281
+ "cssParts": [
25282
+ {
25283
+ "description": "The close button of the menupopover.",
25284
+ "name": "popover-close",
25285
+ "inheritedFrom": {
25286
+ "name": "Popover",
25287
+ "module": "src/components/popover/popover.component.ts"
25288
+ }
25289
+ },
25290
+ {
25291
+ "description": "The content of the menupopover.",
25292
+ "name": "popover-content",
25293
+ "inheritedFrom": {
25294
+ "name": "Popover",
25295
+ "module": "src/components/popover/popover.component.ts"
25296
+ }
25297
+ },
25298
+ {
25299
+ "description": "The hover bridge of the menupopover.",
25300
+ "name": "popover-hover-bridge",
25301
+ "inheritedFrom": {
25302
+ "name": "Popover",
25303
+ "module": "src/components/popover/popover.component.ts"
25304
+ }
25305
+ }
25306
+ ],
24955
25307
  "slots": [
24956
25308
  {
24957
25309
  "description": "Default slot for the menu popover content",
@@ -27038,7 +27390,7 @@
27038
27390
  "module": "/src/components/popover/popover.component"
27039
27391
  },
27040
27392
  "tagName": "mdc-menupopover",
27041
- "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 */",
27393
+ "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 */",
27042
27394
  "customElement": true,
27043
27395
  "cssProperties": [
27044
27396
  {
@@ -27151,6 +27503,24 @@
27151
27503
  "kind": "class",
27152
27504
  "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.\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.",
27153
27505
  "name": "MenuSection",
27506
+ "cssParts": [
27507
+ {
27508
+ "description": "The header of the menusection.",
27509
+ "name": "header"
27510
+ },
27511
+ {
27512
+ "description": "The header of the menusection when it is aligned to the start.",
27513
+ "name": "align-header"
27514
+ },
27515
+ {
27516
+ "description": "The container of the menusection.",
27517
+ "name": "container"
27518
+ },
27519
+ {
27520
+ "description": "The divider of the menusection.",
27521
+ "name": "divider"
27522
+ }
27523
+ ],
27154
27524
  "slots": [
27155
27525
  {
27156
27526
  "description": "Default slot for inserting `menuitem`, `menuitemcheckbox`, or `menuitemradio`",
@@ -27274,7 +27644,7 @@
27274
27644
  "module": "/src/models"
27275
27645
  },
27276
27646
  "tagName": "mdc-menusection",
27277
- "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.\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 */",
27647
+ "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.\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 */",
27278
27648
  "customElement": true
27279
27649
  }
27280
27650
  ],
@@ -27439,6 +27809,72 @@
27439
27809
  }
27440
27810
  }
27441
27811
  ],
27812
+ "cssParts": [
27813
+ {
27814
+ "description": "The arrow of the navmenuitem.",
27815
+ "name": "arrow"
27816
+ },
27817
+ {
27818
+ "description": "The badge of the navmenuitem.",
27819
+ "name": "badge"
27820
+ },
27821
+ {
27822
+ "description": "The container of the icon.",
27823
+ "name": "icon-container"
27824
+ },
27825
+ {
27826
+ "description": "The container of the text.",
27827
+ "name": "text-container"
27828
+ },
27829
+ {
27830
+ "description": "The trailing arrow of the navmenuitem.",
27831
+ "name": "trailing-arrow",
27832
+ "inheritedFrom": {
27833
+ "name": "MenuItem",
27834
+ "module": "src/components/menuitem/menuitem.component.ts"
27835
+ }
27836
+ },
27837
+ {
27838
+ "description": "Allows customization of the leading part.",
27839
+ "name": "leading",
27840
+ "inheritedFrom": {
27841
+ "name": "ListItem",
27842
+ "module": "src/components/listitem/listitem.component.ts"
27843
+ }
27844
+ },
27845
+ {
27846
+ "description": "Allows customization of leading arrow icon.",
27847
+ "name": "leading-arrow",
27848
+ "inheritedFrom": {
27849
+ "name": "MenuItem",
27850
+ "module": "src/components/menuitem/menuitem.component.ts"
27851
+ }
27852
+ },
27853
+ {
27854
+ "description": "Allows customization of the leading text part.",
27855
+ "name": "leading-text",
27856
+ "inheritedFrom": {
27857
+ "name": "ListItem",
27858
+ "module": "src/components/listitem/listitem.component.ts"
27859
+ }
27860
+ },
27861
+ {
27862
+ "description": "Allows customization of the trailing part.",
27863
+ "name": "trailing",
27864
+ "inheritedFrom": {
27865
+ "name": "ListItem",
27866
+ "module": "src/components/listitem/listitem.component.ts"
27867
+ }
27868
+ },
27869
+ {
27870
+ "description": "Allows customization of the trailing text part.",
27871
+ "name": "trailing-text",
27872
+ "inheritedFrom": {
27873
+ "name": "ListItem",
27874
+ "module": "src/components/listitem/listitem.component.ts"
27875
+ }
27876
+ }
27877
+ ],
27442
27878
  "members": [
27443
27879
  {
27444
27880
  "kind": "field",
@@ -28330,7 +28766,7 @@
28330
28766
  "module": "/src/components/menuitem/menuitem.component"
28331
28767
  },
28332
28768
  "tagName": "mdc-navmenuitem",
28333
- "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 * 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-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border 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-expanded-width - Width of the navmenuitem when expanded.\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 * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n */",
28769
+ "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 * 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-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border 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-expanded-width - Width of the navmenuitem when expanded.\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 * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\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 */",
28334
28770
  "customElement": true,
28335
28771
  "slots": [
28336
28772
  {
@@ -28425,6 +28861,12 @@
28425
28861
  "name": "--mdc-optgroup-disabled-color"
28426
28862
  }
28427
28863
  ],
28864
+ "cssParts": [
28865
+ {
28866
+ "description": "The header text of the optgroup.",
28867
+ "name": "header-text"
28868
+ }
28869
+ ],
28428
28870
  "slots": [
28429
28871
  {
28430
28872
  "description": "This is a default slot for mdc-option elements.",
@@ -28534,7 +28976,7 @@
28534
28976
  "module": "/src/models"
28535
28977
  },
28536
28978
  "tagName": "mdc-optgroup",
28537
- "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 */",
28979
+ "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 */",
28538
28980
  "customElement": true
28539
28981
  }
28540
28982
  ],
@@ -28557,6 +28999,142 @@
28557
28999
  "kind": "class",
28558
29000
  "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.",
28559
29001
  "name": "Option",
29002
+ "cssProperties": [
29003
+ {
29004
+ "description": "gap between columns in the option",
29005
+ "name": "--mdc-listitem-column-gap",
29006
+ "inheritedFrom": {
29007
+ "name": "ListItem",
29008
+ "module": "src/components/listitem/listitem.component.ts"
29009
+ }
29010
+ },
29011
+ {
29012
+ "description": "width of the icon in the option",
29013
+ "name": "--mdc-option-icon-width"
29014
+ },
29015
+ {
29016
+ "description": "Allows customization of the default background color.",
29017
+ "name": "--mdc-listitem-default-background-color",
29018
+ "inheritedFrom": {
29019
+ "name": "ListItem",
29020
+ "module": "src/components/listitem/listitem.component.ts"
29021
+ }
29022
+ },
29023
+ {
29024
+ "description": "Allows customization of the background color on hover.",
29025
+ "name": "--mdc-listitem-background-color-hover",
29026
+ "inheritedFrom": {
29027
+ "name": "ListItem",
29028
+ "module": "src/components/listitem/listitem.component.ts"
29029
+ }
29030
+ },
29031
+ {
29032
+ "description": "Allows customization of the background color when pressed.",
29033
+ "name": "--mdc-listitem-background-color-active",
29034
+ "inheritedFrom": {
29035
+ "name": "ListItem",
29036
+ "module": "src/components/listitem/listitem.component.ts"
29037
+ }
29038
+ },
29039
+ {
29040
+ "description": "Allows customization of the primary label, side header and subline text slot color.",
29041
+ "name": "--mdc-listitem-primary-label-color",
29042
+ "inheritedFrom": {
29043
+ "name": "ListItem",
29044
+ "module": "src/components/listitem/listitem.component.ts"
29045
+ }
29046
+ },
29047
+ {
29048
+ "description": "Allows customization of the secondary and tertiary label text slot color.",
29049
+ "name": "--mdc-listitem-secondary-label-color",
29050
+ "inheritedFrom": {
29051
+ "name": "ListItem",
29052
+ "module": "src/components/listitem/listitem.component.ts"
29053
+ }
29054
+ },
29055
+ {
29056
+ "description": "Allows customization of the disabled color.",
29057
+ "name": "--mdc-listitem-disabled-color",
29058
+ "inheritedFrom": {
29059
+ "name": "ListItem",
29060
+ "module": "src/components/listitem/listitem.component.ts"
29061
+ }
29062
+ },
29063
+ {
29064
+ "description": "Allows customization of padding left and right.",
29065
+ "name": "--mdc-listitem-padding-left-right",
29066
+ "inheritedFrom": {
29067
+ "name": "ListItem",
29068
+ "module": "src/components/listitem/listitem.component.ts"
29069
+ }
29070
+ },
29071
+ {
29072
+ "description": "Allows customization of padding top and bottom.",
29073
+ "name": "--mdc-listitem-padding-top-bottom",
29074
+ "inheritedFrom": {
29075
+ "name": "ListItem",
29076
+ "module": "src/components/listitem/listitem.component.ts"
29077
+ }
29078
+ },
29079
+ {
29080
+ "description": "Allows customization of the cursor.",
29081
+ "name": "--mdc-listitem-cursor",
29082
+ "inheritedFrom": {
29083
+ "name": "ListItem",
29084
+ "module": "src/components/listitem/listitem.component.ts"
29085
+ }
29086
+ },
29087
+ {
29088
+ "description": "Allows customization of the width of the list item.",
29089
+ "name": "--mdc-listitem-width",
29090
+ "inheritedFrom": {
29091
+ "name": "ListItem",
29092
+ "module": "src/components/listitem/listitem.component.ts"
29093
+ }
29094
+ },
29095
+ {
29096
+ "description": "Allows customization of the height of the list item.",
29097
+ "name": "--mdc-listitem-height",
29098
+ "inheritedFrom": {
29099
+ "name": "ListItem",
29100
+ "module": "src/components/listitem/listitem.component.ts"
29101
+ }
29102
+ }
29103
+ ],
29104
+ "cssParts": [
29105
+ {
29106
+ "description": "Allows customization of the leading part.",
29107
+ "name": "leading",
29108
+ "inheritedFrom": {
29109
+ "name": "ListItem",
29110
+ "module": "src/components/listitem/listitem.component.ts"
29111
+ }
29112
+ },
29113
+ {
29114
+ "description": "Allows customization of the leading text part.",
29115
+ "name": "leading-text",
29116
+ "inheritedFrom": {
29117
+ "name": "ListItem",
29118
+ "module": "src/components/listitem/listitem.component.ts"
29119
+ }
29120
+ },
29121
+ {
29122
+ "description": "Allows customization of the trailing part.",
29123
+ "name": "trailing",
29124
+ "inheritedFrom": {
29125
+ "name": "ListItem",
29126
+ "module": "src/components/listitem/listitem.component.ts"
29127
+ }
29128
+ },
29129
+ {
29130
+ "description": "Allows customization of the trailing text part.",
29131
+ "name": "trailing-text",
29132
+ "inheritedFrom": {
29133
+ "name": "ListItem",
29134
+ "module": "src/components/listitem/listitem.component.ts"
29135
+ }
29136
+ }
29137
+ ],
28560
29138
  "members": [
28561
29139
  {
28562
29140
  "kind": "field",
@@ -29260,7 +29838,7 @@
29260
29838
  "module": "/src/components/listitem/listitem.component"
29261
29839
  },
29262
29840
  "tagName": "mdc-option",
29263
- "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 */",
29841
+ "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 */",
29264
29842
  "customElement": true,
29265
29843
  "slots": [
29266
29844
  {
@@ -29327,104 +29905,6 @@
29327
29905
  "module": "src/components/listitem/listitem.component.ts"
29328
29906
  }
29329
29907
  }
29330
- ],
29331
- "cssProperties": [
29332
- {
29333
- "description": "Allows customization of the default background color.",
29334
- "name": "--mdc-listitem-default-background-color",
29335
- "inheritedFrom": {
29336
- "name": "ListItem",
29337
- "module": "src/components/listitem/listitem.component.ts"
29338
- }
29339
- },
29340
- {
29341
- "description": "Allows customization of the background color on hover.",
29342
- "name": "--mdc-listitem-background-color-hover",
29343
- "inheritedFrom": {
29344
- "name": "ListItem",
29345
- "module": "src/components/listitem/listitem.component.ts"
29346
- }
29347
- },
29348
- {
29349
- "description": "Allows customization of the background color when pressed.",
29350
- "name": "--mdc-listitem-background-color-active",
29351
- "inheritedFrom": {
29352
- "name": "ListItem",
29353
- "module": "src/components/listitem/listitem.component.ts"
29354
- }
29355
- },
29356
- {
29357
- "description": "Allows customization of the primary label, side header and subline text slot color.",
29358
- "name": "--mdc-listitem-primary-label-color",
29359
- "inheritedFrom": {
29360
- "name": "ListItem",
29361
- "module": "src/components/listitem/listitem.component.ts"
29362
- }
29363
- },
29364
- {
29365
- "description": "Allows customization of the secondary and tertiary label text slot color.",
29366
- "name": "--mdc-listitem-secondary-label-color",
29367
- "inheritedFrom": {
29368
- "name": "ListItem",
29369
- "module": "src/components/listitem/listitem.component.ts"
29370
- }
29371
- },
29372
- {
29373
- "description": "Allows customization of the disabled color.",
29374
- "name": "--mdc-listitem-disabled-color",
29375
- "inheritedFrom": {
29376
- "name": "ListItem",
29377
- "module": "src/components/listitem/listitem.component.ts"
29378
- }
29379
- },
29380
- {
29381
- "description": "Allows customization of column gap.",
29382
- "name": "--mdc-listitem-column-gap",
29383
- "inheritedFrom": {
29384
- "name": "ListItem",
29385
- "module": "src/components/listitem/listitem.component.ts"
29386
- }
29387
- },
29388
- {
29389
- "description": "Allows customization of padding left and right.",
29390
- "name": "--mdc-listitem-padding-left-right",
29391
- "inheritedFrom": {
29392
- "name": "ListItem",
29393
- "module": "src/components/listitem/listitem.component.ts"
29394
- }
29395
- },
29396
- {
29397
- "description": "Allows customization of padding top and bottom.",
29398
- "name": "--mdc-listitem-padding-top-bottom",
29399
- "inheritedFrom": {
29400
- "name": "ListItem",
29401
- "module": "src/components/listitem/listitem.component.ts"
29402
- }
29403
- },
29404
- {
29405
- "description": "Allows customization of the cursor.",
29406
- "name": "--mdc-listitem-cursor",
29407
- "inheritedFrom": {
29408
- "name": "ListItem",
29409
- "module": "src/components/listitem/listitem.component.ts"
29410
- }
29411
- },
29412
- {
29413
- "description": "Allows customization of the width of the list item.",
29414
- "name": "--mdc-listitem-width",
29415
- "inheritedFrom": {
29416
- "name": "ListItem",
29417
- "module": "src/components/listitem/listitem.component.ts"
29418
- }
29419
- },
29420
- {
29421
- "description": "Allows customization of the height of the list item.",
29422
- "name": "--mdc-listitem-height",
29423
- "inheritedFrom": {
29424
- "name": "ListItem",
29425
- "module": "src/components/listitem/listitem.component.ts"
29426
- }
29427
- }
29428
29908
  ]
29429
29909
  }
29430
29910
  ],
@@ -30844,6 +31324,20 @@
30844
31324
  "name": "--mdc-popover-width"
30845
31325
  }
30846
31326
  ],
31327
+ "cssParts": [
31328
+ {
31329
+ "description": "The close button of the popover.",
31330
+ "name": "popover-close"
31331
+ },
31332
+ {
31333
+ "description": "The content of the popover.",
31334
+ "name": "popover-content"
31335
+ },
31336
+ {
31337
+ "description": "The hover bridge of the popover.",
31338
+ "name": "popover-hover-bridge"
31339
+ }
31340
+ ],
30847
31341
  "slots": [
30848
31342
  {
30849
31343
  "description": "Default slot for the popover content",
@@ -32305,7 +32799,7 @@
32305
32799
  "module": "/src/models"
32306
32800
  },
32307
32801
  "tagName": "mdc-popover",
32308
- "jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * Note:\n * - A component (button) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\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 *\n * @slot - Default slot for the popover content\n *\n */",
32802
+ "jsDoc": "/**\n * Popover component is a lightweight floating UI element that displays additional content when triggered.\n * It can be used for tooltips, dropdowns, or contextual menus.\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed。\n *\n * Note:\n * - A component (button) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\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 *\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 */",
32309
32803
  "customElement": true
32310
32804
  }
32311
32805
  ],
@@ -32390,6 +32884,72 @@
32390
32884
  "name": "--mdc-presence-overlay-background-color"
32391
32885
  }
32392
32886
  ],
32887
+ "cssParts": [
32888
+ {
32889
+ "description": "The presence content.",
32890
+ "name": "presence-content"
32891
+ },
32892
+ {
32893
+ "description": "The presence icon.",
32894
+ "name": "mdc-presence-icon"
32895
+ },
32896
+ {
32897
+ "description": "The presence icon for active.",
32898
+ "name": "mdc-presence-icon__active"
32899
+ },
32900
+ {
32901
+ "description": "The presence icon for away.",
32902
+ "name": "mdc-presence-icon__away"
32903
+ },
32904
+ {
32905
+ "description": "The presence icon for away-calling.",
32906
+ "name": "mdc-presence-icon__away-calling"
32907
+ },
32908
+ {
32909
+ "description": "The presence icon for busy.",
32910
+ "name": "mdc-presence-icon__busy"
32911
+ },
32912
+ {
32913
+ "description": "The presence icon for dnd.",
32914
+ "name": "mdc-presence-icon__dnd"
32915
+ },
32916
+ {
32917
+ "description": "The presence icon for meeting.",
32918
+ "name": "mdc-presence-icon__meeting"
32919
+ },
32920
+ {
32921
+ "description": "The presence icon for on-call.",
32922
+ "name": "mdc-presence-icon__on-call"
32923
+ },
32924
+ {
32925
+ "description": "The presence icon for on-device.",
32926
+ "name": "mdc-presence-icon__on-device"
32927
+ },
32928
+ {
32929
+ "description": "The presence icon for on-mobile.",
32930
+ "name": "mdc-presence-icon__on-mobile"
32931
+ },
32932
+ {
32933
+ "description": "The presence icon for pause.",
32934
+ "name": "mdc-presence-icon__pause"
32935
+ },
32936
+ {
32937
+ "description": "The presence icon for pto.",
32938
+ "name": "mdc-presence-icon__pto"
32939
+ },
32940
+ {
32941
+ "description": "The presence icon for presenting.",
32942
+ "name": "mdc-presence-icon__presenting"
32943
+ },
32944
+ {
32945
+ "description": "The presence icon for quiet.",
32946
+ "name": "mdc-presence-icon__quiet"
32947
+ },
32948
+ {
32949
+ "description": "The presence icon for scheduled.",
32950
+ "name": "mdc-presence-icon__scheduled"
32951
+ }
32952
+ ],
32393
32953
  "members": [
32394
32954
  {
32395
32955
  "kind": "field",
@@ -32486,7 +33046,7 @@
32486
33046
  "module": "/src/models"
32487
33047
  },
32488
33048
  "tagName": "mdc-presence",
32489
- "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 */",
33049
+ "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 */",
32490
33050
  "customElement": true
32491
33051
  }
32492
33052
  ],
@@ -32555,6 +33115,36 @@
32555
33115
  "name": "--mdc-progressbar-help-text-color"
32556
33116
  }
32557
33117
  ],
33118
+ "cssParts": [
33119
+ {
33120
+ "description": "The gap between the label and the progressbar.",
33121
+ "name": "gap"
33122
+ },
33123
+ {
33124
+ "description": "The container of the label in inline variant.",
33125
+ "name": "inline-label-container"
33126
+ },
33127
+ {
33128
+ "description": "The container of the label in inline variant.",
33129
+ "name": "label-container"
33130
+ },
33131
+ {
33132
+ "description": "The container of the label in inline variant.",
33133
+ "name": "percentage"
33134
+ },
33135
+ {
33136
+ "description": "The container of the label in inline variant.",
33137
+ "name": "progress-bar"
33138
+ },
33139
+ {
33140
+ "description": "The container of the label in inline variant.",
33141
+ "name": "progress-container"
33142
+ },
33143
+ {
33144
+ "description": "The container of the remaining progressbar portion.",
33145
+ "name": "remaining"
33146
+ }
33147
+ ],
32558
33148
  "members": [
32559
33149
  {
32560
33150
  "kind": "field",
@@ -32981,7 +33571,7 @@
32981
33571
  "module": "/src/components/formfieldwrapper"
32982
33572
  },
32983
33573
  "tagName": "mdc-progressbar",
32984
- "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 * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
33574
+ "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 * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.\n * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.\n * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n *\n * @csspart gap - The gap between the label and the progressbar.\n * @csspart inline-label-container - The container of the label in inline variant.\n * @csspart label-container - The container of the label in inline variant.\n * @csspart percentage - The container of the label in inline variant.\n * @csspart progress-bar - The container of the label in inline variant.\n * @csspart progress-container - The container of the label in inline variant.\n * @csspart remaining - The container of the remaining progressbar portion.\n */",
32985
33575
  "customElement": true,
32986
33576
  "slots": [
32987
33577
  {
@@ -33148,6 +33738,88 @@
33148
33738
  }
33149
33739
  }
33150
33740
  ],
33741
+ "cssParts": [
33742
+ {
33743
+ "description": "The error icon of the progressspinner.",
33744
+ "name": "error-icon"
33745
+ },
33746
+ {
33747
+ "description": "The base of the progressspinner.",
33748
+ "name": "spinner-base"
33749
+ },
33750
+ {
33751
+ "description": "The container of the progressspinner.",
33752
+ "name": "spinner-container"
33753
+ },
33754
+ {
33755
+ "description": "The progress of the progressspinner.",
33756
+ "name": "spinner-progress"
33757
+ },
33758
+ {
33759
+ "description": "The track of the progressspinner.",
33760
+ "name": "spinner-track"
33761
+ },
33762
+ {
33763
+ "description": "The success icon of the progressspinner.",
33764
+ "name": "success-icon"
33765
+ },
33766
+ {
33767
+ "description": "The gap between the label and the progressbar.",
33768
+ "name": "gap",
33769
+ "inheritedFrom": {
33770
+ "name": "Progressbar",
33771
+ "module": "src/components/progressbar/progressbar.component.ts"
33772
+ }
33773
+ },
33774
+ {
33775
+ "description": "The container of the label in inline variant.",
33776
+ "name": "inline-label-container",
33777
+ "inheritedFrom": {
33778
+ "name": "Progressbar",
33779
+ "module": "src/components/progressbar/progressbar.component.ts"
33780
+ }
33781
+ },
33782
+ {
33783
+ "description": "The container of the label in inline variant.",
33784
+ "name": "label-container",
33785
+ "inheritedFrom": {
33786
+ "name": "Progressbar",
33787
+ "module": "src/components/progressbar/progressbar.component.ts"
33788
+ }
33789
+ },
33790
+ {
33791
+ "description": "The container of the label in inline variant.",
33792
+ "name": "percentage",
33793
+ "inheritedFrom": {
33794
+ "name": "Progressbar",
33795
+ "module": "src/components/progressbar/progressbar.component.ts"
33796
+ }
33797
+ },
33798
+ {
33799
+ "description": "The container of the label in inline variant.",
33800
+ "name": "progress-bar",
33801
+ "inheritedFrom": {
33802
+ "name": "Progressbar",
33803
+ "module": "src/components/progressbar/progressbar.component.ts"
33804
+ }
33805
+ },
33806
+ {
33807
+ "description": "The container of the label in inline variant.",
33808
+ "name": "progress-container",
33809
+ "inheritedFrom": {
33810
+ "name": "Progressbar",
33811
+ "module": "src/components/progressbar/progressbar.component.ts"
33812
+ }
33813
+ },
33814
+ {
33815
+ "description": "The container of the remaining progressbar portion.",
33816
+ "name": "remaining",
33817
+ "inheritedFrom": {
33818
+ "name": "Progressbar",
33819
+ "module": "src/components/progressbar/progressbar.component.ts"
33820
+ }
33821
+ }
33822
+ ],
33151
33823
  "members": [
33152
33824
  {
33153
33825
  "kind": "method",
@@ -33459,7 +34131,7 @@
33459
34131
  "module": "/src/components/progressbar/progressbar.component"
33460
34132
  },
33461
34133
  "tagName": "mdc-progressspinner",
33462
- "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 */",
34134
+ "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 */",
33463
34135
  "customElement": true,
33464
34136
  "attributes": [
33465
34137
  {
@@ -38824,6 +39496,12 @@
38824
39496
  "name": "--mdc-staticcheckbox-icon-color"
38825
39497
  }
38826
39498
  ],
39499
+ "cssParts": [
39500
+ {
39501
+ "description": "The container for the checkbox icon.",
39502
+ "name": "icon-container"
39503
+ }
39504
+ ],
38827
39505
  "members": [
38828
39506
  {
38829
39507
  "kind": "field",
@@ -38907,7 +39585,7 @@
38907
39585
  "module": "/src/models"
38908
39586
  },
38909
39587
  "tagName": "mdc-staticcheckbox",
38910
- "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
39588
+ "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n * @csspart icon-container - The container for the checkbox icon.\n */",
38911
39589
  "customElement": true
38912
39590
  }
38913
39591
  ],
@@ -38944,6 +39622,12 @@
38944
39622
  "name": "--mdc-chip-background-color"
38945
39623
  }
38946
39624
  ],
39625
+ "cssParts": [
39626
+ {
39627
+ "description": "The label of the static chip.",
39628
+ "name": "label"
39629
+ }
39630
+ ],
38947
39631
  "members": [
38948
39632
  {
38949
39633
  "kind": "field",
@@ -39034,7 +39718,7 @@
39034
39718
  "module": "/src/models"
39035
39719
  },
39036
39720
  "tagName": "mdc-staticchip",
39037
- "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.\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 *\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 */",
39721
+ "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.\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 *\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 */",
39038
39722
  "customElement": true
39039
39723
  }
39040
39724
  ],
@@ -40063,6 +40747,24 @@
40063
40747
  "name": "--mdc-tab-pill-inactive-color-disabled"
40064
40748
  }
40065
40749
  ],
40750
+ "cssParts": [
40751
+ {
40752
+ "description": "The container of the tab.",
40753
+ "name": "container"
40754
+ },
40755
+ {
40756
+ "description": "The icon of the tab.",
40757
+ "name": "icon"
40758
+ },
40759
+ {
40760
+ "description": "The indicator of the tab.",
40761
+ "name": "indicator"
40762
+ },
40763
+ {
40764
+ "description": "The text of the tab.",
40765
+ "name": "text"
40766
+ }
40767
+ ],
40066
40768
  "members": [
40067
40769
  {
40068
40770
  "kind": "field",
@@ -40705,7 +41407,7 @@
40705
41407
  "module": "/src/components/buttonsimple/buttonsimple.component"
40706
41408
  },
40707
41409
  "tagName": "mdc-tab",
40708
- "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-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
41410
+ "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-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
40709
41411
  "customElement": true
40710
41412
  }
40711
41413
  ],
@@ -40742,6 +41444,12 @@
40742
41444
  "name": "--mdc-tablist-arrow-button-margin"
40743
41445
  }
40744
41446
  ],
41447
+ "cssParts": [
41448
+ {
41449
+ "description": "The tablist container.",
41450
+ "name": "container"
41451
+ }
41452
+ ],
40745
41453
  "slots": [
40746
41454
  {
40747
41455
  "description": "slot for mdc-tab elements.",
@@ -40799,7 +41507,7 @@
40799
41507
  "module": "/src/models"
40800
41508
  },
40801
41509
  "tagName": "mdc-tablist",
40802
- "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 */",
41510
+ "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 */",
40803
41511
  "customElement": true
40804
41512
  }
40805
41513
  ],
@@ -40964,6 +41672,12 @@
40964
41672
  "name": "--mdc-textarea-focused-border-color"
40965
41673
  }
40966
41674
  ],
41675
+ "cssParts": [
41676
+ {
41677
+ "description": "The textarea container",
41678
+ "name": "textarea-container"
41679
+ }
41680
+ ],
40967
41681
  "members": [
40968
41682
  {
40969
41683
  "kind": "field",
@@ -41819,7 +42533,7 @@
41819
42533
  "module": "/src/components/formfieldwrapper"
41820
42534
  },
41821
42535
  "tagName": "mdc-textarea",
41822
- "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 * @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 * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\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-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
42536
+ "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 * @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 * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\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-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n *\n * @csspart textarea-container - The textarea container\n */",
41823
42537
  "customElement": true,
41824
42538
  "slots": [
41825
42539
  {
@@ -45119,7 +45833,33 @@
45119
45833
  },
45120
45834
  "tagName": "mdc-toggletip",
45121
45835
  "jsDoc": "/**\n * A toggletip is triggered by clicking a trigger element.\n *\n * It can contain interactive content and can be closed by\n * clicking outside the toggletip or pressing the escape key.\n *\n * It can have optional close button to close the toggletip.\n *\n * Toggletip component uses `mdc-screenreaderannouncer` internally to\n * announce the toggletip text content with screen readers when the toggletip is shown.\n *\n * `screenreader-announcer-identity` attribute can be used to provide ID of an element\n * in DOM to which announcement elements are added. If not set, a visually hidden\n * div element is created in DOM to which announcement elements are added.\n *\n * Please refer to the `mdc-screenreaderannouncer` component for more details.\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\n * 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\n * when the color is contrast.\n *\n * @slot - Default slot for the toggletip content\n */",
45122
- "customElement": true
45836
+ "customElement": true,
45837
+ "cssParts": [
45838
+ {
45839
+ "description": "The close button of the popover.",
45840
+ "name": "popover-close",
45841
+ "inheritedFrom": {
45842
+ "name": "Popover",
45843
+ "module": "src/components/popover/popover.component.ts"
45844
+ }
45845
+ },
45846
+ {
45847
+ "description": "The content of the popover.",
45848
+ "name": "popover-content",
45849
+ "inheritedFrom": {
45850
+ "name": "Popover",
45851
+ "module": "src/components/popover/popover.component.ts"
45852
+ }
45853
+ },
45854
+ {
45855
+ "description": "The hover bridge of the popover.",
45856
+ "name": "popover-hover-bridge",
45857
+ "inheritedFrom": {
45858
+ "name": "Popover",
45859
+ "module": "src/components/popover/popover.component.ts"
45860
+ }
45861
+ }
45862
+ ]
45123
45863
  }
45124
45864
  ],
45125
45865
  "exports": [
@@ -47175,6 +47915,32 @@
47175
47915
  "module": "src/components/popover/popover.component.ts"
47176
47916
  }
47177
47917
  }
47918
+ ],
47919
+ "cssParts": [
47920
+ {
47921
+ "description": "The close button of the popover.",
47922
+ "name": "popover-close",
47923
+ "inheritedFrom": {
47924
+ "name": "Popover",
47925
+ "module": "src/components/popover/popover.component.ts"
47926
+ }
47927
+ },
47928
+ {
47929
+ "description": "The content of the popover.",
47930
+ "name": "popover-content",
47931
+ "inheritedFrom": {
47932
+ "name": "Popover",
47933
+ "module": "src/components/popover/popover.component.ts"
47934
+ }
47935
+ },
47936
+ {
47937
+ "description": "The hover bridge of the popover.",
47938
+ "name": "popover-hover-bridge",
47939
+ "inheritedFrom": {
47940
+ "name": "Popover",
47941
+ "module": "src/components/popover/popover.component.ts"
47942
+ }
47943
+ }
47178
47944
  ]
47179
47945
  }
47180
47946
  ],
@@ -47205,6 +47971,10 @@
47205
47971
  {
47206
47972
  "description": "The text element (forwarded to mdc-text)",
47207
47973
  "name": "text"
47974
+ },
47975
+ {
47976
+ "description": "The hidden typewriter text",
47977
+ "name": "typewriter-hidden"
47208
47978
  }
47209
47979
  ],
47210
47980
  "slots": [
@@ -47510,7 +48280,7 @@
47510
48280
  "module": "/src/models"
47511
48281
  },
47512
48282
  "tagName": "mdc-typewriter",
47513
- "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 *\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 */",
48283
+ "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 */",
47514
48284
  "customElement": true
47515
48285
  }
47516
48286
  ],
@@ -47533,6 +48303,16 @@
47533
48303
  "kind": "class",
47534
48304
  "description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
47535
48305
  "name": "VirtualizedList",
48306
+ "cssParts": [
48307
+ {
48308
+ "description": "The container of the virtualized list.",
48309
+ "name": "container"
48310
+ },
48311
+ {
48312
+ "description": "The scrollable area of the virtualized list.",
48313
+ "name": "scroll"
48314
+ }
48315
+ ],
47536
48316
  "slots": [
47537
48317
  {
47538
48318
  "description": "Client side List with nested list items.",
@@ -47657,7 +48437,7 @@
47657
48437
  "module": "/src/models"
47658
48438
  },
47659
48439
  "tagName": "mdc-virtualizedlist",
47660
- "jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n */",
48440
+ "jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @event scroll - (React: onScroll) Event that gets called when user scrolls inside of list.\n *\n * @slot - Client side List with nested list items.\n *\n * @csspart container - The container of the virtualized list.\n * @csspart scroll - The scrollable area of the virtualized list.\n */",
47661
48441
  "customElement": true
47662
48442
  }
47663
48443
  ],