@momentum-design/components 0.108.1 → 0.108.2

package/dist/components/progressbar/progressbar.component.d.ts

@@ -17,16 +17,16 @@ declare const Progressbar_base: import("../../utils/mixins/index.types").Constru
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.
- * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.
- * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.
- * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.
+ * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
+ * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.
+ * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
+ * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
  * @cssproperty --mdc-progressbar-height - The height of the progressbar.
  * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
  * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
- * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.
- * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.
- * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.
+ * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
+ * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
+ * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
  */
 declare class Progressbar extends Progressbar_base {

package/dist/components/progressbar/progressbar.component.js

@@ -31,16 +31,16 @@ import styles from './progressbar.styles';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.
- * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.
- * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.
- * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.
+ * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
+ * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.
+ * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
+ * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
  * @cssproperty --mdc-progressbar-height - The height of the progressbar.
  * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
  * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
- * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.
- * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.
- * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.
+ * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
+ * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
+ * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
  */
 class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {

package/dist/custom-elements.json

@@ -28708,20 +28708,20 @@
           "name": "Progressbar",
           "cssProperties": [
             {
-              "description": "Background color of the progressbar when inactive.",
-              "name": "--mdc-progressbar-default-background-color"
+              "description": "Background color of the remaining progressbar portion.",
+              "name": "--mdc-progressbar-background-color"
             },
             {
-              "description": "Background color of the progressbar when active.",
-              "name": "--mdc-progressbar-default-active-background-color"
+              "description": "Background color of the elapsed progressbar portion.",
+              "name": "--mdc-progressbar-active-background-color"
             },
             {
               "description": "Background color of the progressbar when in success state.",
-              "name": "--mdc-progressbar-success-background-color"
+              "name": "--mdc-progressbar-success-color"
             },
             {
               "description": "Background color of the progressbar when in error state.",
-              "name": "--mdc-progressbar-error-background-color"
+              "name": "--mdc-progressbar-error-color"
             },
             {
               "description": "The height of the progressbar.",
@@ -28737,15 +28737,15 @@
             },
             {
               "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight"
+              "name": "--mdc-progressbar-label-line-height"
             },
             {
               "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize"
+              "name": "--mdc-progressbar-label-font-size"
             },
             {
               "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight"
+              "name": "--mdc-progressbar-label-font-weight"
             },
             {
               "description": "Color of the help text.",
@@ -29154,7 +29154,7 @@
             "module": "/src/components/formfieldwrapper"
           },
           "tagName": "mdc-progressbar",
-          "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-default-background-color - Background color of the progressbar when inactive.\n * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.\n * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-background-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-lineheight - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
+          "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 */",
           "customElement": true
         }
       ],
@@ -29199,16 +29199,16 @@
               "name": "--mdc-progress-error-color"
             },
             {
-              "description": "Background color of the progressbar when inactive.",
-              "name": "--mdc-progressbar-default-background-color",
+              "description": "Background color of the remaining progressbar portion.",
+              "name": "--mdc-progressbar-background-color",
               "inheritedFrom": {
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
               }
             },
             {
-              "description": "Background color of the progressbar when active.",
-              "name": "--mdc-progressbar-default-active-background-color",
+              "description": "Background color of the elapsed progressbar portion.",
+              "name": "--mdc-progressbar-active-background-color",
               "inheritedFrom": {
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
@@ -29216,7 +29216,7 @@
             },
             {
               "description": "Background color of the progressbar when in success state.",
-              "name": "--mdc-progressbar-success-background-color",
+              "name": "--mdc-progressbar-success-color",
               "inheritedFrom": {
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
@@ -29224,7 +29224,7 @@
             },
             {
               "description": "Background color of the progressbar when in error state.",
-              "name": "--mdc-progressbar-error-background-color",
+              "name": "--mdc-progressbar-error-color",
               "inheritedFrom": {
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
@@ -29256,7 +29256,7 @@
             },
             {
               "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight",
+              "name": "--mdc-progressbar-label-line-height",
               "inheritedFrom": {
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
@@ -29264,7 +29264,7 @@
             },
             {
               "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize",
+              "name": "--mdc-progressbar-label-font-size",
               "inheritedFrom": {
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
@@ -29272,7 +29272,7 @@
             },
             {
               "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight",
+              "name": "--mdc-progressbar-label-font-weight",
               "inheritedFrom": {
                 "name": "Progressbar",
                 "module": "src/components/progressbar/progressbar.component.ts"
@@ -35375,184 +35375,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/tablist/tablist.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
-          "name": "TabList",
-          "cssProperties": [
-            {
-              "description": "Gap between tabs",
-              "name": "--mdc-tablist-gap"
-            },
-            {
-              "description": "Width of the tablist",
-              "name": "--mdc-tablist-width"
-            },
-            {
-              "description": "Margin value for the arrow button",
-              "name": "--mdc-tablist-arrow-button-margin"
-            }
-          ],
-          "slots": [
-            {
-              "description": "slot for mdc-tab elements.",
-              "name": "Default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "activeTabId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "attribute": "active-tab-id",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "attribute": "data-aria-label"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
-              "name": "change",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active-tab-id",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "fieldName": "activeTabId"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "fieldName": "dataAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-tablist",
-          "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 */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabList",
-            "module": "components/tablist/tablist.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/text/text.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
-          "name": "Text",
-          "cssParts": [
-            {
-              "description": "The text element",
-              "name": "text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for text content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "privacy": "public",
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-midsize-medium",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tagname",
-              "type": {
-                "text": "TagName | undefined"
-              },
-              "privacy": "public",
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "attribute": "tagname",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "type",
-              "type": {
-                "text": "TextType"
-              },
-              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
-              "default": "body-midsize-medium",
-              "fieldName": "type"
-            },
-            {
-              "name": "tagname",
-              "type": {
-                "text": "TagName | undefined"
-              },
-              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
-              "fieldName": "tagname"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-text",
-          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Text",
-            "module": "components/text/text.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/tab/tab.component.js",
@@ -36420,6 +36242,184 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tablist/tablist.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
+          "name": "TabList",
+          "cssProperties": [
+            {
+              "description": "Gap between tabs",
+              "name": "--mdc-tablist-gap"
+            },
+            {
+              "description": "Width of the tablist",
+              "name": "--mdc-tablist-width"
+            },
+            {
+              "description": "Margin value for the arrow button",
+              "name": "--mdc-tablist-arrow-button-margin"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for mdc-tab elements.",
+              "name": "Default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "activeTabId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "attribute": "active-tab-id",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "attribute": "data-aria-label"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active-tab-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "fieldName": "activeTabId"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "fieldName": "dataAriaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-tablist",
+          "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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabList",
+            "module": "components/tablist/tablist.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/text/text.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
+          "name": "Text",
+          "cssParts": [
+            {
+              "description": "The text element",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "privacy": "public",
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-midsize-medium",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "privacy": "public",
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "attribute": "tagname",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
+              "default": "body-midsize-medium",
+              "fieldName": "type"
+            },
+            {
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
+              "fieldName": "tagname"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-text",
+          "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Text",
+            "module": "components/text/text.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.component.js",

package/dist/react/index.d.ts

@@ -69,9 +69,9 @@ export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
+export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';
-export { default as Tab } from './tab';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toast } from './toast';

package/dist/react/index.js

@@ -69,9 +69,9 @@ export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
+export { default as Tab } from './tab';
 export { default as TabList } from './tablist';
 export { default as Text } from './text';
-export { default as Tab } from './tab';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toast } from './toast';

package/dist/react/progressbar/index.d.ts

@@ -14,16 +14,16 @@ import Component from '../../components/progressbar';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.
- * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.
- * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.
- * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.
+ * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
+ * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.
+ * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
+ * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
  * @cssproperty --mdc-progressbar-height - The height of the progressbar.
  * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
  * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
- * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.
- * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.
- * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.
+ * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
+ * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
+ * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/progressbar/index.js

@@ -17,16 +17,16 @@ import { TAG_NAME } from '../../components/progressbar/progressbar.constants';
  * @dependency mdc-icon
  * @dependency mdc-text
  *
- * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.
- * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.
- * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.
- * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.
+ * @cssproperty --mdc-progressbar-background-color - Background color of the remaining progressbar portion.
+ * @cssproperty --mdc-progressbar-active-background-color - Background color of the elapsed progressbar portion.
+ * @cssproperty --mdc-progressbar-success-color - Background color of the progressbar when in success state.
+ * @cssproperty --mdc-progressbar-error-color - Background color of the progressbar when in error state.
  * @cssproperty --mdc-progressbar-height - The height of the progressbar.
  * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.
  * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.
- * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.
- * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.
- * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.
+ * @cssproperty --mdc-progressbar-label-line-height - Line height of the label text.
+ * @cssproperty --mdc-progressbar-label-font-size - Font size of the label text.
+ * @cssproperty --mdc-progressbar-label-font-weight - Font weight of the label text.
  * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.
  */
 const reactWrapper = createComponent({