@momentum-design/components 0.129.12 → 0.129.14

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

@@ -2,25 +2,27 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/avatarbutton';
 import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
- * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
+ * The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.
+ * It wraps the avatar component in a button, making it focusable and actionable.
  *
- * This component is made by extending `buttonsimple` class.
- * The button component acts as a wrapper for the avatar component.
+ * This component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).
+ * Use CSS parts to customize the avatar's appearance inside the button.
  *
- * To override styles of the avatar inside, use the specified css parts.
+ * ## Accessibility
+ * - Always provide an `aria-label` attribute to describe the button's purpose
  *
  * @dependency mdc-avatar
  *
- * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
- * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ * @event click - (React: onClick) Dispatched when the avatar button is clicked.
+ * @event keydown - (React: onKeyDown) Dispatched when a key is pressed on the avatar button.
+ * @event keyup - (React: onKeyUp) Dispatched when a key is released on the avatar button.
+ * @event focus - (React: onFocus) Dispatched when the avatar button 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
+ * @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.

package/dist/react/avatarbutton/index.js

@@ -3,25 +3,27 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/avatarbutton';
 import { TAG_NAME } from '../../components/avatarbutton/avatarbutton.constants';
 /**
- * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.
+ * The `mdc-avatarbutton` component is an interactive, clickable version of `mdc-avatar`.
+ * It wraps the avatar component in a button, making it focusable and actionable.
  *
- * This component is made by extending `buttonsimple` class.
- * The button component acts as a wrapper for the avatar component.
+ * This component extends `buttonsimple` and includes all avatar display features (photo, initials, icon, counter, presence).
+ * Use CSS parts to customize the avatar's appearance inside the button.
  *
- * To override styles of the avatar inside, use the specified css parts.
+ * ## Accessibility
+ * - Always provide an `aria-label` attribute to describe the button's purpose
  *
  * @dependency mdc-avatar
  *
- * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.
- * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.
+ * @event click - (React: onClick) Dispatched when the avatar button is clicked.
+ * @event keydown - (React: onKeyDown) Dispatched when a key is pressed on the avatar button.
+ * @event keyup - (React: onKeyUp) Dispatched when a key is released on the avatar button.
+ * @event focus - (React: onFocus) Dispatched when the avatar button 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
+ * @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.

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

@@ -4,18 +4,20 @@ import type { Events as EventsInherited } from '../../components/linksimple/link
 /**
  * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
  * features of `mdc-button`. This includes support for variants, sizing, and optional
- * prefix and postfix icons via slots.
+ * prefix and postfix icons.
  *
  * ### Features:
- * - Behaves like an link while visually resembling a button.
- * - Supports slots for `prefix-icon` and `postfix-icon`.
+ * - Behaves like a link while visually resembling a button.
  * - Customizable size, color, and variant through attributes.
+ * - Supports prefix and postfix icons.
  * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-buttonlink
  *
+ * @slot default - The default slot for buttonlink text content.
+ *
  * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
  * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
  * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
@@ -26,11 +28,11 @@ import type { Events as EventsInherited } from '../../components/linksimple/link
  * @csspart button-text - The slot containing the buttonlink text.
  * @csspart postfix-icon - The postfix icon element.
  *
- * @cssproperty --mdc-button-height - Height for button size
- * @cssproperty --mdc-button-background - Background color of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
- * @cssproperty --mdc-button-text-color - Text color of the button
- * @cssproperty --mdc-button-line-height - Line height of the button text
+ * @cssproperty --mdc-button-height - Height of the buttonlink
+ * @cssproperty --mdc-button-background - Background color of the buttonlink
+ * @cssproperty --mdc-button-border-color - Border color of the buttonlink
+ * @cssproperty --mdc-button-text-color - Text color of the buttonlink
+ * @cssproperty --mdc-button-line-height - Line height of the buttonlink text
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  */

package/dist/react/buttonlink/index.js

@@ -5,18 +5,20 @@ import { TAG_NAME } from '../../components/buttonlink/buttonlink.constants';
 /**
  * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural
  * features of `mdc-button`. This includes support for variants, sizing, and optional
- * prefix and postfix icons via slots.
+ * prefix and postfix icons.
  *
  * ### Features:
- * - Behaves like an link while visually resembling a button.
- * - Supports slots for `prefix-icon` and `postfix-icon`.
+ * - Behaves like a link while visually resembling a button.
  * - Customizable size, color, and variant through attributes.
+ * - Supports prefix and postfix icons.
  * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.
  *
  * @dependency mdc-icon
  *
  * @tagname mdc-buttonlink
  *
+ * @slot default - The default slot for buttonlink text content.
+ *
  * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.
  * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.
  * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.
@@ -27,11 +29,11 @@ import { TAG_NAME } from '../../components/buttonlink/buttonlink.constants';
  * @csspart button-text - The slot containing the buttonlink text.
  * @csspart postfix-icon - The postfix icon element.
  *
- * @cssproperty --mdc-button-height - Height for button size
- * @cssproperty --mdc-button-background - Background color of the button
- * @cssproperty --mdc-button-border-color - Borer color of the button
- * @cssproperty --mdc-button-text-color - Text color of the button
- * @cssproperty --mdc-button-line-height - Line height of the button text
+ * @cssproperty --mdc-button-height - Height of the buttonlink
+ * @cssproperty --mdc-button-background - Background color of the buttonlink
+ * @cssproperty --mdc-button-border-color - Border color of the buttonlink
+ * @cssproperty --mdc-button-text-color - Text color of the buttonlink
+ * @cssproperty --mdc-button-line-height - Line height of the buttonlink text
  * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
  * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
  */

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

@@ -1,5 +1,6 @@
 import { type EventName } from '@lit/react';
 import Component from '../../components/linkbutton';
+import type { Events } from '../../components/linkbutton/linkbutton.types';
 import type { Events as EventsInherited } from '../../components/buttonsimple/buttonsimple.types';
 /**
  * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
@@ -19,6 +20,7 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
  * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the linkbutton loses focus.
  *
  * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
  * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
@@ -32,6 +34,7 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @cssproperty --mdc-button-height - Height for button size
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onBlur: EventName<Events["onBlurEvent"]>;
     onClick: EventName<EventsInherited["onClickEvent"]>;
     onKeyDown: EventName<EventsInherited["onKeyDownEvent"]>;
     onKeyUp: EventName<EventsInherited["onKeyUpEvent"]>;

package/dist/react/linkbutton/index.js

@@ -20,6 +20,7 @@ import { TAG_NAME } from '../../components/linkbutton/linkbutton.constants';
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
  * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the linkbutton loses focus.
  *
  * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
  * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
@@ -37,6 +38,7 @@ const reactWrapper = createComponent({
     elementClass: Component,
     react: React,
     events: {
+        onBlur: 'blur',
         onClick: 'click',
         onKeyDown: 'keydown',
         onKeyUp: 'keyup',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.129.12",
+  "version": "0.129.14",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"