@momentum-design/components 0.51.3 → 0.52.0

package/dist/custom-elements.json

@@ -774,6 +774,20 @@
           "kind": "class",
           "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
           "name": "AvatarButton",
+          "cssProperties": [
+            {
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
+            },
+            {
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
+            },
+            {
+              "description": "Background color of the overlay in active state",
+              "name": "--mdc-avatarbutton-overlay-background-color-active"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1348,7 +1362,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-avatarbutton",
-          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n */",
+          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n */",
           "customElement": true
         }
       ],
@@ -12122,6 +12136,554 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/progressspinner/progressspinner.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
+          "name": "Progressspinner",
+          "cssProperties": [
+            {
+              "description": "The size of the spinner.",
+              "name": "--mdc-spinner-size"
+            },
+            {
+              "description": "The color of the spinner track.",
+              "name": "--mdc-track-color"
+            },
+            {
+              "description": "The color of the spinner progress.",
+              "name": "--mdc-progress-color"
+            },
+            {
+              "description": "The color of the spinner when in success state.",
+              "name": "--mdc-progress-success-color"
+            },
+            {
+              "description": "The color of the spinner when in error state.",
+              "name": "--mdc-progress-error-color"
+            },
+            {
+              "description": "Background color of the progressbar when inactive.",
+              "name": "--mdc-progressbar-default-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",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Background color of the progressbar when in success state.",
+              "name": "--mdc-progressbar-success-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Background color of the progressbar when in error state.",
+              "name": "--mdc-progressbar-error-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "The height of the progressbar.",
+              "name": "--mdc-progressbar-height",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "The border radius of the progressbar.",
+              "name": "--mdc-progressbar-border-radius",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Color of the progressbar label text.",
+              "name": "--mdc-progressbar-label-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Line height of the label text.",
+              "name": "--mdc-progressbar-label-lineheight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Font size of the label text.",
+              "name": "--mdc-progressbar-label-fontsize",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Font weight of the label text.",
+              "name": "--mdc-progressbar-label-fontweight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Color of the help text.",
+              "name": "--mdc-progressbar-help-text-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "renderProgressSpinner",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderErrorState",
+              "privacy": "private",
+              "description": "Renders the error state of the progress spinner.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderSuccessState",
+              "privacy": "private",
+              "description": "Renders the success state of the progress spinner.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0'",
+              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Define error state of the progressbar\n- **true**\n- **false**",
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getValidationVariant",
+              "privacy": "private",
+              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.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": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "attribute": "required-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderRequiredLabel",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Progressbar",
+            "module": "/src/components/progressbar/progressbar.component"
+          },
+          "tagName": "mdc-progressspinner",
+          "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 */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0'",
+              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Define error state of the progressbar\n- **true**\n- **false**",
+              "fieldName": "error",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "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": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "required-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
+              "fieldName": "requiredLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Progressspinner",
+            "module": "components/progressspinner/progressspinner.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/radio/radio.component.js",

package/dist/index.d.ts

@@ -25,6 +25,7 @@ import Option from './components/option';
 import Popover from './components/popover';
 import Presence from './components/presence';
 import Progressbar from './components/progressbar';
+import Progressspinner from './components/progressspinner';
 import Radio from './components/radio';
 import RadioGroup from './components/radiogroup';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
@@ -46,6 +47,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -26,6 +26,7 @@ import Option from './components/option';
 import Popover from './components/popover';
 import Presence from './components/presence';
 import Progressbar from './components/progressbar';
+import Progressspinner from './components/progressspinner';
 import Radio from './components/radio';
 import RadioGroup from './components/radiogroup';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
@@ -44,6 +45,6 @@ import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

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

@@ -14,6 +14,10 @@ import Component from '../../components/avatarbutton';
  * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
  *
  * @tagname mdc-avatarbutton
+ *
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/avatarbutton/index.js

@@ -16,6 +16,10 @@ import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
  * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
  *
  * @tagname mdc-avatarbutton
+ *
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
+ * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -27,6 +27,7 @@ export { default as Option } from './option';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
+export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';

package/dist/react/index.js

@@ -27,6 +27,7 @@ export { default as Option } from './option';
 export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
+export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';