@momentum-design/components 0.85.4 → 0.85.5

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

@@ -19,6 +19,8 @@ import type { VariantType } from './alertchip.types';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 declare class AlertChip extends Buttonsimple {
     /**

package/dist/components/alertchip/alertchip.component.js

@@ -32,6 +32,8 @@ import { getAlertIcon } from './alertchip.utils';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 class AlertChip extends Buttonsimple {
     constructor() {

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

@@ -36,6 +36,12 @@ declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 declare class Avatar extends Avatar_base {
     /**

package/dist/components/avatar/avatar.component.js

@@ -50,6 +50,12 @@ import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './ava
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     constructor() {

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

@@ -8,6 +8,8 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -20,6 +22,13 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  * @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
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 declare class AvatarButton extends AvatarButton_base {
     /**

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -23,6 +23,8 @@ import styles from './avatarbutton.styles';
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -35,6 +37,13 @@ import styles from './avatarbutton.styles';
  * @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
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
@@ -65,6 +74,7 @@ class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
         return html `
       <div part="overlay" aria-hidden="true"></div>
       <mdc-avatar
+        exportparts="content, photo, presence, loading-wrapper, loader"
         ?is-typing="${this.isTyping}"
         counter="${ifDefined(this.counter)}"
         icon-name="${ifDefined(this.iconName)}"

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

@@ -46,6 +46,8 @@ import type { IconNames } from './icon.types';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 declare class Icon extends Component {
     private iconData?;

package/dist/components/icon/icon.component.js

@@ -60,6 +60,8 @@ import { DEFAULTS } from './icon.constants';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 class Icon extends Component {
     constructor() {

package/dist/custom-elements.json

@@ -28,6 +28,16 @@
               "name": "--mdc-chip-background-color"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The alert icon",
+              "name": "icon"
+            },
+            {
+              "description": "The text label of the alertchip",
+              "name": "label"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -467,7 +477,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-alertchip",
-          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
+          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
           "customElement": true,
           "events": [
             {
@@ -823,6 +833,28 @@
               "name": "--mdc-avatar-loading-overlay-background-color"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The main content of the avatar.",
+              "name": "content"
+            },
+            {
+              "description": "The photo of the avatar.",
+              "name": "photo"
+            },
+            {
+              "description": "The presence indicator of the avatar.",
+              "name": "presence"
+            },
+            {
+              "description": "The wrapper for the loading indicator.",
+              "name": "loading-wrapper"
+            },
+            {
+              "description": "The loading indicator of the avatar.",
+              "name": "loader"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -934,7 +966,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
           "customElement": true,
           "attributes": [
             {
@@ -1043,7 +1075,7 @@
       "declarations": [
         {
           "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.",
+          "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.\n\nTo override styles of the avatar inside, use the specified css parts.",
           "name": "AvatarButton",
           "cssProperties": [
             {
@@ -1059,6 +1091,32 @@
               "name": "--mdc-avatarbutton-overlay-background-color-active"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The overlay part of the avatar button.",
+              "name": "overlay"
+            },
+            {
+              "description": "The main content of the avatar.",
+              "name": "content"
+            },
+            {
+              "description": "The photo part of the avatar.",
+              "name": "photo"
+            },
+            {
+              "description": "The presence indicator part of the avatar.",
+              "name": "presence"
+            },
+            {
+              "description": "The wrapper for the loading indicator of the avatar.",
+              "name": "loading-wrapper"
+            },
+            {
+              "description": "The loading indicator part of the avatar.",
+              "name": "loader"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1692,7 +1750,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 *\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 */",
+          "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 * To override styles of the avatar inside, use the specified css parts.\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 *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
           "customElement": true
         }
       ],
@@ -12034,6 +12092,12 @@
               "name": "--mdc-icon-border-radius"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The svg inside the icon element.",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -12239,7 +12303,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
           "customElement": true
         }
       ],

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

@@ -18,6 +18,8 @@ import Component from '../../components/alertchip';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/alertchip/index.js

@@ -20,6 +20,8 @@ import { TAG_NAME } from '../../components/alertchip/alertchip.constants';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -33,6 +33,12 @@ import Component from '../../components/avatar';
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/avatar/index.js

@@ -36,6 +36,12 @@ import { TAG_NAME } from '../../components/avatar/avatar.constants';
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -6,6 +6,8 @@ import Component from '../../components/avatarbutton';
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -18,6 +20,13 @@ import Component from '../../components/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
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onClick: EventName<MouseEvent>;

package/dist/react/avatarbutton/index.js

@@ -8,6 +8,8 @@ import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -20,6 +22,13 @@ import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
  * @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
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

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

@@ -44,6 +44,8 @@ import Component from '../../components/icon';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/icon/index.js

@@ -47,6 +47,8 @@ import { TAG_NAME } from '../../components/icon/icon.constants';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

@@ -41,5 +41,5 @@
     "lottie-web": "^5.12.2",
     "uuid": "^11.0.5"
   },
-  "version": "0.85.4"
+  "version": "0.85.5"
 }