@momentum-design/components 0.104.10 → 0.104.12

package/dist/components/avatar/avatar.styles.js

@@ -79,6 +79,34 @@ const styles = [
       bottom: 0;
       right: 0;
     }
+
+    :host([size='124'])::part(presence) {
+      bottom: -0.25rem;
+      right: -0.21875rem;
+    }
+
+    :host([size='88'])::part(presence),
+    :host([size='72'])::part(presence),
+    :host([size='64'])::part(presence) {
+      bottom: -0.09375rem;
+      right: -0.09375rem;
+    }
+
+    :host([size='48'])::part(presence) {
+      bottom: -0.03125rem;
+      right: -0.03125rem;
+    }
+
+    :host([size='32'])::part(presence) {
+      bottom: -0.15625rem;
+      right: -0.15625rem;
+    }
+
+    :host([size='24'])::part(presence) {
+      bottom: -0.1875rem;
+      right: -0.1875rem;
+    }
+
     :host::part(loading-wrapper) {
       position: absolute;
       border-radius: 100vh;

package/dist/components/avatar/avatar.utils.js

@@ -1,17 +1,17 @@
-import { SIZE as PRESENCE_SIZE } from '../presence/presence.constants';
+import { PRESENCE_SIZE } from '../presence/presence.constants';
 import { TYPE as FONT_TYPE } from '../text/text.constants';
 import { AVATAR_SIZE } from './avatar.constants';
 const getPresenceSize = (size) => {
     const avatarPresenceSizeMap = {
-        [AVATAR_SIZE[124]]: PRESENCE_SIZE.XX_LARGE,
-        [AVATAR_SIZE[88]]: PRESENCE_SIZE.X_LARGE,
-        [AVATAR_SIZE[72]]: PRESENCE_SIZE.LARGE,
-        [AVATAR_SIZE[64]]: PRESENCE_SIZE.MIDSIZE,
-        [AVATAR_SIZE[48]]: PRESENCE_SIZE.SMALL,
-        [AVATAR_SIZE[32]]: PRESENCE_SIZE.X_SMALL,
-        [AVATAR_SIZE[24]]: PRESENCE_SIZE.XX_SMALL,
+        [AVATAR_SIZE[124]]: PRESENCE_SIZE[124],
+        [AVATAR_SIZE[88]]: PRESENCE_SIZE[88],
+        [AVATAR_SIZE[72]]: PRESENCE_SIZE[72],
+        [AVATAR_SIZE[64]]: PRESENCE_SIZE[64],
+        [AVATAR_SIZE[48]]: PRESENCE_SIZE[48],
+        [AVATAR_SIZE[32]]: PRESENCE_SIZE[32],
+        [AVATAR_SIZE[24]]: PRESENCE_SIZE[24],
     };
-    return avatarPresenceSizeMap[size] || PRESENCE_SIZE.X_SMALL; // default size of presence
+    return avatarPresenceSizeMap[size] || PRESENCE_SIZE[32]; // default size of presence
 };
 const getAvatarIconSize = (size) => {
     const avatarIconSizeMap = {

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

@@ -47,7 +47,7 @@ declare const CardCheckbox_base: import("../../utils/mixins/index.types").Constr
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare class CardCheckbox extends CardCheckbox_base {
     /**

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -61,7 +61,7 @@ import styles from './cardcheckbox.styles';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
@@ -101,6 +101,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
         if (!this.disabled) {
             this.checked = !this.checked;
         }
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     /**
      * Toggles the checked state when enter key is used

package/dist/components/cardcheckbox/cardcheckbox.types.d.ts

@@ -1,11 +1,13 @@
-import type { OverrideEventTarget, ValueOf } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
 import type CardCheckbox from './cardcheckbox.component';
 import { SELECTION_TYPE } from './cardcheckbox.constants';
 type SelectionType = ValueOf<typeof SELECTION_TYPE>;
+type CardCheckboxChangeEvent = TypedCustomEvent<CardCheckbox>;
 interface Events {
     onClickEvent: OverrideEventTarget<MouseEvent, CardCheckbox>;
     onKeyDownEvent: OverrideEventTarget<KeyboardEvent, CardCheckbox>;
     onKeyUpEvent: OverrideEventTarget<KeyboardEvent, CardCheckbox>;
     onFocusEvent: OverrideEventTarget<FocusEvent, CardCheckbox>;
+    onChangeEvent: CardCheckboxChangeEvent;
 }
 export { SelectionType, Events };

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

@@ -46,7 +46,7 @@ declare const CardRadio_base: import("../../utils/mixins/index.types").Construct
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare class CardRadio extends CardRadio_base {
     /**

package/dist/components/cardradio/cardradio.component.js

@@ -61,7 +61,7 @@ import styles from './cardradio.styles';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
     constructor() {
@@ -96,7 +96,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
      * Dispatches the change event.
      */
     toggleChecked() {
-        if (this.disabled)
+        if (this.disabled || this.checked)
             return;
         const cards = this.getAllCardsWithinSameGroup();
         cards.forEach(card => {
@@ -106,6 +106,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
             card.checked = false;
         });
         this.checked = true;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     setDisabled(disabled) {
         this.setAttribute('aria-disabled', `${disabled}`);

package/dist/components/cardradio/cardradio.types.d.ts

@@ -1,9 +1,11 @@
-import type { OverrideEventTarget } from '../../utils/types';
+import type { OverrideEventTarget, TypedCustomEvent } from '../../utils/types';
 import type CardRadio from './cardradio.component';
+type CardRadioChangeEvent = TypedCustomEvent<CardRadio>;
 interface Events {
     onClickEvent: OverrideEventTarget<MouseEvent, CardRadio>;
     onKeyDownEvent: OverrideEventTarget<KeyboardEvent, CardRadio>;
     onKeyUpEvent: OverrideEventTarget<KeyboardEvent, CardRadio>;
     onFocusEvent: OverrideEventTarget<FocusEvent, CardRadio>;
+    onChangeEvent: CardRadioChangeEvent;
 }
 export type { Events };

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

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
 import type { PresenceType, PresenceSize } from './presence.types';
 /**
@@ -49,18 +49,18 @@ declare class Presence extends Component {
      */
     type: PresenceType;
     /**
-     * Acceptable values include:
-     * - XX_SMALL
-     * - X_SMALL
-     * - SMALL
-     * - MIDSIZE
-     * - LARGE
-     * - X_LARGE
-     * - XX_LARGE
+     * Acceptable numeric values include:
+     * - 24
+     * - 32
+     * - 48
+     * - 64
+     * - 72
+     * - 88
+     * - 124
      *
-     * Presence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence
-     * icons will be no smaller than 14px.
-     * @default small
+     * Presence icons are minimum 14px in size, meaning 24, 32, and 48 presence
+     * icons will be no smaller than 14px (for sizes 24, 32, 48).
+     * @default 32
      */
     size: PresenceSize;
     /**
@@ -68,10 +68,8 @@ declare class Presence extends Component {
      * State to track the current icon type (previous type until the new icon is loaded)
      */
     private currentIconType;
-    /**
-     * Get the size of the presence icon based on the given size type
-     */
-    private get iconSize();
+    update(changedProperties: PropertyValues): void;
+    private setSize;
     /**
      * Get the icon name based on the presence type
      */

package/dist/components/presence/presence.component.js

@@ -10,9 +10,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { DEFAULTS, SIZE } from './presence.constants';
+import { DEFAULTS, PRESENCE_SIZE } from './presence.constants';
 import styles from './presence.styles';
-import { getIconValue } from './presence.utils';
+import { getIconValue, getPresenceIconSize } from './presence.utils';
 /**
  * The `mdc-presence` component is a versatile UI element used to
  * display the presence status of a user or entity within an avatar component.
@@ -63,18 +63,18 @@ class Presence extends Component {
          */
         this.type = DEFAULTS.TYPE;
         /**
-         * Acceptable values include:
-         * - XX_SMALL
-         * - X_SMALL
-         * - SMALL
-         * - MIDSIZE
-         * - LARGE
-         * - X_LARGE
-         * - XX_LARGE
+         * Acceptable numeric values include:
+         * - 24
+         * - 32
+         * - 48
+         * - 64
+         * - 72
+         * - 88
+         * - 124
          *
-         * Presence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence
-         * icons will be no smaller than 14px.
-         * @default small
+         * Presence icons are minimum 14px in size, meaning 24, 32, and 48 presence
+         * icons will be no smaller than 14px (for sizes 24, 32, 48).
+         * @default 32
          */
         this.size = DEFAULTS.SIZE;
         /**
@@ -83,27 +83,15 @@ class Presence extends Component {
          */
         this.currentIconType = DEFAULTS.TYPE;
     }
-    /**
-     * Get the size of the presence icon based on the given size type
-     */
-    get iconSize() {
-        switch (this.size) {
-            case SIZE.MIDSIZE:
-                return 1.16125;
-            case SIZE.LARGE:
-                return 1.30625;
-            case SIZE.X_LARGE:
-                return 1.596875;
-            case SIZE.XX_LARGE:
-                return 2.25;
-            case SIZE.XX_SMALL:
-            case SIZE.X_SMALL:
-            case SIZE.SMALL:
-            default:
-                this.size = DEFAULTS.SIZE;
-                return 0.875;
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('size')) {
+            this.setSize(this.size);
         }
     }
+    setSize(size) {
+        this.setAttribute('size', Object.values(PRESENCE_SIZE).includes(size) ? `${size}` : DEFAULTS.SIZE.toString());
+    }
     /**
      * Get the icon name based on the presence type
      */
@@ -131,11 +119,11 @@ class Presence extends Component {
     }
     render() {
         return html `
-      <div class="mdc-presence mdc-presence__${this.size}">
+      <div part="presence-content">
         <mdc-icon
           class="mdc-presence-icon mdc-presence-icon__${this.currentIconType}"
           name="${this.icon}"
-          size="${this.iconSize}"
+          size="${getPresenceIconSize(this.size)}"
           @load="${this.handleOnLoad}"
           @error="${this.handleOnError}"
         ></mdc-icon>
@@ -149,8 +137,8 @@ __decorate([
     __metadata("design:type", String)
 ], Presence.prototype, "type", void 0);
 __decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
 ], Presence.prototype, "size", void 0);
 __decorate([
     state(),

package/dist/components/presence/presence.constants.d.ts

@@ -1,5 +1,5 @@
 declare const TAG_NAME: "mdc-presence";
-declare const TYPE: {
+declare const PRESENCE_TYPE: {
     readonly ACTIVE: "active";
     readonly AWAY: "away";
     readonly AWAY_CALLING: "away-calling";
@@ -15,17 +15,17 @@ declare const TYPE: {
     readonly QUIET: "quiet";
     readonly SCHEDULED: "scheduled";
 };
-declare const SIZE: {
-    readonly XX_SMALL: "xx_small";
-    readonly X_SMALL: "x_small";
-    readonly SMALL: "small";
-    readonly MIDSIZE: "midsize";
-    readonly LARGE: "large";
-    readonly X_LARGE: "x_large";
-    readonly XX_LARGE: "xx_large";
+declare const PRESENCE_SIZE: {
+    readonly 24: 24;
+    readonly 32: 32;
+    readonly 48: 48;
+    readonly 64: 64;
+    readonly 72: 72;
+    readonly 88: 88;
+    readonly 124: 124;
 };
 declare const DEFAULTS: {
     readonly TYPE: "active";
-    readonly SIZE: "small";
+    readonly SIZE: 32;
 };
-export { TAG_NAME, DEFAULTS, TYPE, SIZE };
+export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };

package/dist/components/presence/presence.constants.js

@@ -1,6 +1,6 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('presence');
-const TYPE = {
+const PRESENCE_TYPE = {
     ACTIVE: 'active',
     AWAY: 'away',
     AWAY_CALLING: 'away-calling',
@@ -16,17 +16,17 @@ const TYPE = {
     QUIET: 'quiet',
     SCHEDULED: 'scheduled',
 };
-const SIZE = {
-    XX_SMALL: 'xx_small',
-    X_SMALL: 'x_small',
-    SMALL: 'small',
-    MIDSIZE: 'midsize',
-    LARGE: 'large',
-    X_LARGE: 'x_large',
-    XX_LARGE: 'xx_large',
+const PRESENCE_SIZE = {
+    24: 24,
+    32: 32,
+    48: 48,
+    64: 64,
+    72: 72,
+    88: 88,
+    124: 124,
 };
 const DEFAULTS = {
-    TYPE: TYPE.ACTIVE,
-    SIZE: SIZE.SMALL,
+    TYPE: PRESENCE_TYPE.ACTIVE,
+    SIZE: PRESENCE_SIZE[32],
 };
-export { TAG_NAME, DEFAULTS, TYPE, SIZE };
+export { TAG_NAME, DEFAULTS, PRESENCE_TYPE, PRESENCE_SIZE };

package/dist/components/presence/presence.styles.js

@@ -21,32 +21,32 @@ const styles = [
       --mdc-presence-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
     }
 
-    .mdc-presence {
+    :host::part(presence-content) {
       border-radius: 50%;
       background-color: var(--mdc-presence-overlay-background-color);
       display: flex;
       justify-content: center;
       align-items: center;
     }
-    .mdc-presence__xx_small,
-    .mdc-presence__x_small,
-    .mdc-presence__small {
-      width: 1.0625rem;
-      height: 1.0625rem;
+    :host([size='24'])::part(presence-content),
+    :host([size='32'])::part(presence-content),
+    :host([size='48'])::part(presence-content) {
+      width: 1.125rem;
+      height: 1.125rem;
     }
-    .mdc-presence__midsize {
-      width: 1.419375rem;
-      height: 1.419375rem;
+    :host([size='64'])::part(presence-content) {
+      width: 1.5625rem;
+      height: 1.5625rem;
     }
-    .mdc-presence__large {
-      width: 1.596875rem;
-      height: 1.596875rem;
+    :host([size='72'])::part(presence-content) {
+      width: 1.75rem;
+      height: 1.75rem;
     }
-    .mdc-presence__x_large {
-      width: 1.951875rem;
-      height: 1.951875rem;
+    :host([size='88'])::part(presence-content) {
+      width: 2.125rem;
+      height: 2.125rem;
     }
-    .mdc-presence__xx_large {
+    :host([size='124'])::part(presence-content) {
       width: 2.75rem;
       height: 2.75rem;
     }

package/dist/components/presence/presence.types.d.ts

@@ -1,5 +1,5 @@
 import type { ValueOf } from '../../utils/types';
-import { TYPE, SIZE } from './presence.constants';
-type PresenceType = ValueOf<typeof TYPE>;
-type PresenceSize = ValueOf<typeof SIZE>;
+import { PRESENCE_TYPE, PRESENCE_SIZE } from './presence.constants';
+type PresenceType = ValueOf<typeof PRESENCE_TYPE>;
+type PresenceSize = ValueOf<typeof PRESENCE_SIZE>;
 export type { PresenceType, PresenceSize };

package/dist/components/presence/presence.utils.d.ts

@@ -1,2 +1,3 @@
-import type { PresenceType } from './presence.types';
+import type { PresenceSize, PresenceType } from './presence.types';
 export declare const getIconValue: (type: PresenceType) => "active-presence-small-filled" | "away-calling-presence-filled" | "busy-presence-bold" | "camera-filled" | "dnd-presence-badge-filled" | "generic-device-video-badge-filled" | "handset-filled" | "meetings-presence-badge-filled" | "pause-badge-filled" | "phone-badge-filled" | "pto-presence-filled" | "quiet-hours-presence-filled" | "recents-presence-badge-filled" | "share-screen-badge-filled";
+export declare const getPresenceIconSize: (size: PresenceSize) => number;

package/dist/components/presence/presence.utils.js

@@ -1,34 +1,46 @@
-import { TYPE } from './presence.constants';
+import { PRESENCE_TYPE, PRESENCE_SIZE } from './presence.constants';
 export const getIconValue = (type) => {
     switch (type) {
-        case TYPE.AWAY:
+        case PRESENCE_TYPE.AWAY:
             return 'recents-presence-badge-filled';
-        case TYPE.AWAY_CALLING:
+        case PRESENCE_TYPE.AWAY_CALLING:
             return 'away-calling-presence-filled';
-        case TYPE.BUSY:
+        case PRESENCE_TYPE.BUSY:
             return 'busy-presence-bold';
-        case TYPE.DND:
+        case PRESENCE_TYPE.DND:
             return 'dnd-presence-badge-filled';
-        case TYPE.MEETING:
+        case PRESENCE_TYPE.MEETING:
             return 'camera-filled';
-        case TYPE.ON_CALL:
+        case PRESENCE_TYPE.ON_CALL:
             return 'handset-filled';
-        case TYPE.ON_DEVICE:
+        case PRESENCE_TYPE.ON_DEVICE:
             return 'generic-device-video-badge-filled';
-        case TYPE.ON_MOBILE:
+        case PRESENCE_TYPE.ON_MOBILE:
             return 'phone-badge-filled';
-        case TYPE.PAUSE:
+        case PRESENCE_TYPE.PAUSE:
             return 'pause-badge-filled';
-        case TYPE.PTO:
+        case PRESENCE_TYPE.PTO:
             return 'pto-presence-filled';
-        case TYPE.PRESENTING:
+        case PRESENCE_TYPE.PRESENTING:
             return 'share-screen-badge-filled';
-        case TYPE.QUIET:
+        case PRESENCE_TYPE.QUIET:
             return 'quiet-hours-presence-filled';
-        case TYPE.SCHEDULED:
+        case PRESENCE_TYPE.SCHEDULED:
             return 'meetings-presence-badge-filled';
-        case TYPE.ACTIVE:
+        case PRESENCE_TYPE.ACTIVE:
         default:
             return 'active-presence-small-filled';
     }
 };
+export const getPresenceIconSize = (size) => {
+    const presenceIconSizeMap = {
+        [PRESENCE_SIZE[124]]: 2.25,
+        [PRESENCE_SIZE[88]]: 1.625,
+        [PRESENCE_SIZE[72]]: 1.3125,
+        [PRESENCE_SIZE[64]]: 1.1875,
+        [PRESENCE_SIZE[48]]: 0.875,
+        [PRESENCE_SIZE[32]]: 0.875,
+        [PRESENCE_SIZE[24]]: 0.875,
+    };
+    return presenceIconSizeMap[size] || 0.875; // default size of icon
+};

package/dist/custom-elements.json

@@ -6873,6 +6873,14 @@
             }
           ],
           "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
+              "reactName": "onChange"
+            },
             {
               "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
               "name": "click",
@@ -7071,7 +7079,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardcheckbox",
-          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
           "customElement": true
         }
       ],
@@ -7612,6 +7620,14 @@
             }
           ],
           "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
+              "reactName": "onChange"
+            },
             {
               "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
               "name": "click",
@@ -7810,7 +7826,7 @@
             "module": "/src/components/card/card.component"
           },
           "tagName": "mdc-cardradio",
-          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
           "customElement": true
         }
       ],
@@ -28413,17 +28429,28 @@
               "type": {
                 "text": "PresenceSize"
               },
-              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
-              "default": "small",
+              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
+              "default": "32",
               "attribute": "size",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "iconSize",
+              "kind": "method",
+              "name": "setSize",
               "privacy": "private",
-              "description": "Get the size of the presence icon based on the given size type",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "PresenceSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -28470,8 +28497,8 @@
               "type": {
                 "text": "PresenceSize"
               },
-              "description": "Acceptable values include:\n- XX_SMALL\n- X_SMALL\n- SMALL\n- MIDSIZE\n- LARGE\n- X_LARGE\n- XX_LARGE\n\nPresence icons are minimum 14px in size, meaning XX_Small, X_Small and Small presence\nicons will be no smaller than 14px.",
-              "default": "small",
+              "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
+              "default": "32",
               "fieldName": "size"
             }
           ],

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

@@ -45,9 +45,12 @@ import Component from '../../components/cardcheckbox';
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.
  * It toggles the checked state when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
- *
+ * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<CustomEvent<unknown> & {
+        target: Component;
+    }>;
     onClick: EventName<import("../../utils/types").OverrideEventTarget<MouseEvent, Component>>;
     onKeyDown: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;
     onKeyUp: EventName<import("../../utils/types").OverrideEventTarget<KeyboardEvent, Component>>;