@momentum-design/components 0.100.1 → 0.101.0

package/dist/custom-elements.json

@@ -2,6 +2,972 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "components/accordion/accordion.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion contains a header and body section with a focusable heading that can be expanded or collapsed.\n\nThe 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\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf an accordion is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion.",
+          "name": "Accordion",
+          "cssProperties": [
+            {
+              "description": "The border color of the accordion.",
+              "name": "--mdc-accordionbutton-border-color",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The hover color of the accordion.",
+              "name": "--mdc-accordionbutton-hover-color",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The active color of the accordion.",
+              "name": "--mdc-accordionbutton-active-color",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The disabled color of the accordion.",
+              "name": "--mdc-accordionbutton-disabled-color",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header section of the accordion.",
+              "name": "header-section",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The leading header of the accordion.",
+              "name": "leading-header",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The trailing header of the accordion.",
+              "name": "trailing-header",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The trailing header button of the accordion.",
+              "name": "trailing-header__button"
+            },
+            {
+              "description": "The body section of the accordion.",
+              "name": "body-section",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The header button section of the accordion button.",
+              "name": "header-button-section",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "description": "The trailing header icon of the accordion button.",
+              "name": "trailing-header__icon",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "description": "The leading controls slot of the accordion on the header section.",
+              "name": "leading-controls"
+            },
+            {
+              "description": "The trailing controls slot of the accordion on the header section.",
+              "name": "trailing-controls"
+            },
+            {
+              "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
+              "name": "default",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Renders the header section of the accordion.\nThis includes the leading icon, text and controls, and the trailing controls.\nThe trailing controls include the expand/collapse button.\nThe button is disabled if the accordion is disabled.\nThe button is also given the aria-controls attribute set to the id of the body section.\nThe button is also given the aria-expanded attribute set to the expanded state of the accordion.\nThe prefix icon of the button is set to the expanded state of the accordion.",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'default'",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLevel",
+              "type": {
+                "text": "number"
+              },
+              "description": "The aria level of the accordion component.",
+              "default": "3",
+              "attribute": "data-aria-level",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the accordion button.",
+              "default": "false",
+              "attribute": "expanded",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the accordion item.",
+              "attribute": "header-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the header text.",
+              "attribute": "prefix-icon",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleHeaderClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state.",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "dispatchHeaderClickEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state.",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The KeyboardEvent fired."
+                }
+              ],
+              "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys.",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "optional": true,
+                  "type": {
+                    "text": "IconNames"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHeadingText",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getArrowIconName",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon.",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderBody",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "components/accordionbutton/accordionbutton.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onShown) This event is triggered when the accordion is expanded.",
+              "name": "shown",
+              "reactName": "onShown",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "AccordionButton",
+            "module": "/src/components/accordionbutton/accordionbutton.component"
+          },
+          "tagName": "mdc-accordion",
+          "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 */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'default'",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "name": "data-aria-level",
+              "type": {
+                "text": "number"
+              },
+              "description": "The aria level of the accordion component.",
+              "default": "3",
+              "fieldName": "dataAriaLevel",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the accordion button.",
+              "default": "false",
+              "fieldName": "expanded",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the accordion item.",
+              "fieldName": "headerText",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            },
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the header text.",
+              "fieldName": "prefixIcon",
+              "inheritedFrom": {
+                "name": "AccordionButton",
+                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Accordion",
+            "module": "components/accordion/accordion.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordionbutton/accordionbutton.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion button contains a header and body section with optional slots inside the heading which are focusable.\n\nThe header section contains:\n- Prefix Icon\n- Header Text\n\nThe body section contains:\n- Default slot - User can place any content inside the body section.\n\nThe accordion button can be expanded or collapsed. The visibility of the body section can be controlled by `expanded` attribute. <br/>\nThere are two types of variants based on that the border styling of the accordion gets reflected. <br/>\nThere are two sizes of accordion, one is small and the other is large.\nSmall size has a padding of 1rem (16px) and large size has a padding of 1.5rem (24px) for the body section of accordion.\n\nBy default, the header text in the accordion heading is of H3 with an aria-level of '3'.\nIf this accordion is placed on any other level in the entire webpage, then do adjust the aria-level number based on that.\n\nAn accordion can be disabled, and when it's disabled, the header section will not be clickable.\n\nIf you do need any controls on your accordion heading, then it's advised to use `accordion` component.\n\nIf an accordion button is expanded by default, then the screen reader might loose focus when toggling the visibilty of the accordion button.",
+          "name": "AccordionButton",
+          "cssProperties": [
+            {
+              "description": "The border color of the accordion button.",
+              "name": "--mdc-accordionbutton-border-color"
+            },
+            {
+              "description": "The hover color of the accordion button.",
+              "name": "--mdc-accordionbutton-hover-color"
+            },
+            {
+              "description": "The active color of the accordion button.",
+              "name": "--mdc-accordionbutton-active-color"
+            },
+            {
+              "description": "The disabled color of the accordion button.",
+              "name": "--mdc-accordionbutton-disabled-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header section of the accordion button.",
+              "name": "header-section"
+            },
+            {
+              "description": "The header button section of the accordion button.",
+              "name": "header-button-section"
+            },
+            {
+              "description": "The leading header of the accordion button.",
+              "name": "leading-header"
+            },
+            {
+              "description": "The trailing header of the accordion button.",
+              "name": "trailing-header"
+            },
+            {
+              "description": "The trailing header icon of the accordion button.",
+              "name": "trailing-header__icon"
+            },
+            {
+              "description": "The body section of the accordion button.",
+              "name": "body-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot contains the body section of the accordion. User can place anything inside this body slot.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'default'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLevel",
+              "type": {
+                "text": "number"
+              },
+              "description": "The aria level of the accordion component.",
+              "default": "3",
+              "attribute": "data-aria-level",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the accordion button.",
+              "default": "false",
+              "attribute": "expanded",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the accordion item.",
+              "attribute": "header-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the header text.",
+              "attribute": "prefix-icon"
+            },
+            {
+              "kind": "method",
+              "name": "handleHeaderClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the click event of the header section.\nIf the accordion is disabled, it will not toggle the expanded state.\nIt will dispatch the `shown` event with the current expanded state."
+            },
+            {
+              "kind": "method",
+              "name": "dispatchHeaderClickEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Dispatches the `shown` event with the current expanded state.\nThe event is cancelable and bubbles.\nThe event detail contains the current expanded state."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The KeyboardEvent fired."
+                }
+              ],
+              "description": "Handles the keydown event of the component.\nIf the key pressed is either Enter or Space, it calls the handleHeaderClick method.\nThis allows keyboard users to toggle the accordion button using these keys."
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "optional": true,
+                  "type": {
+                    "text": "IconNames"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderHeadingText",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getArrowIconName",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns the icon name based on the expanded state.\nIf the accordion button is disabled, it always returns the arrow down icon.\nOtherwise, it returns the arrow up icon if the accordion button is expanded, otherwise the arrow down icon."
+            },
+            {
+              "kind": "method",
+              "name": "renderBody",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onShown) This event is triggered when the accordion button is expanded.",
+              "name": "shown",
+              "reactName": "onShown"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'default'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "data-aria-level",
+              "type": {
+                "text": "number"
+              },
+              "description": "The aria level of the accordion component.",
+              "default": "3",
+              "fieldName": "dataAriaLevel"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The visibility of the accordion button.",
+              "default": "false",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the accordion item.",
+              "fieldName": "headerText"
+            },
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the header text.",
+              "fieldName": "prefixIcon"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordionbutton",
+          "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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionButton",
+            "module": "components/accordionbutton/accordionbutton.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",