@momentum-design/components 0.51.2 → 0.51.4

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

@@ -16,6 +16,10 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  * @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 class AvatarButton extends AvatarButton_base {
     /**

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

@@ -30,6 +30,10 @@ import styles from './avatarbutton.styles';
  * @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
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
@@ -58,8 +62,8 @@ class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     }
     render() {
         return html `
+      <div part="overlay" aria-hidden="true"></div>
       <mdc-avatar
-        slot="prefixIcon"
         ?is-typing="${this.isTyping}"
         counter="${ifDefined(this.counter)}"
         icon-name="${ifDefined(this.iconName)}"

package/dist/components/avatarbutton/avatarbutton.styles.js

@@ -2,10 +2,32 @@ import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
 const styles = [hostFitContentStyles, css `
   :host {
+    --mdc-avatarbutton-overlay-background-color-rest: var(--mds-color-theme-avatar-ghost);
+    --mdc-avatarbutton-overlay-background-color-hover: var(--mds-color-theme-avatar-hover);
+    --mdc-avatarbutton-overlay-background-color-active: var(--mds-color-theme-avatar-pressed);
     padding: unset;
     margin: unset;
     outline: none;
     border-radius: 0.25rem;
+    position: relative;
+    cursor: pointer;
+  }
+  :host::part(overlay) {
+    position: absolute;
+    border-radius: 100vh;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    background-color: var(--mdc-avatarbutton-overlay-background-color-rest);
+  }
+  :host(:not([is-typing]):hover)::part(overlay) {
+    background-color: var(--mdc-avatarbutton-overlay-background-color-hover);
+  }
+  :host(:not([is-typing]):active)::part(overlay) {
+    background-color: var(--mdc-avatarbutton-overlay-background-color-active);
+  }
+  :host::part(presence) {
+    z-index: 2;
   }
 `, ...hostFocusRingStyles()];
 export default styles;

package/dist/components/tooltip/tooltip.component.js

@@ -55,7 +55,6 @@ class Tooltip extends Popover {
         this.offset = DEFAULTS.OFFSET;
         this.placement = DEFAULTS.PLACEMENT;
         this.role = 'tooltip';
-        this.showArrow = true;
         this.trigger = 'mouseenter focusin';
         this.enabledFocusTrap = false;
         this.enabledPreventScroll = false;

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
         }
       ],

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/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.51.2"
+  "version": "0.51.4"
 }