@momentum-design/components 0.129.2 → 0.129.4

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

@@ -23,6 +23,7 @@ import Component from '../../components/card';
  *
  * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
  *
+ * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body

package/dist/react/card/index.js

@@ -26,6 +26,7 @@ import { TAG_NAME } from '../../components/card/card.constants';
  *
  * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.
  *
+ * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body

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

@@ -19,6 +19,7 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body

package/dist/react/cardbutton/index.js

@@ -20,6 +20,7 @@ import { TAG_NAME } from '../../components/cardbutton/cardbutton.constants';
  * It fires the click event when space key is used.
  * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.
  *
+ * @slot image - This slot is for overriding the image content of the card
  * @slot before-body - This slot is for passing the content before the body
  * @slot body - This slot is for passing the text content for the card
  * @slot after-body - This slot is for passing the content after the body

package/dist/react/index.d.ts

@@ -14,24 +14,24 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
-export { default as Card } from './card';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as CardButton } from './cardbutton';
+export { default as Card } from './card';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';
 export { default as ControlTypeProvider } from './controltypeprovider';
+export { default as Dialog } from './dialog';
+export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
-export { default as Dialog } from './dialog';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
-export { default as Illustration } from './illustration';
 export { default as IconProvider } from './iconprovider';
+export { default as Illustration } from './illustration';
 export { default as IllustrationProvider } from './illustrationprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';

package/dist/react/index.js

@@ -14,24 +14,24 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
-export { default as Card } from './card';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as CardButton } from './cardbutton';
+export { default as Card } from './card';
 export { default as CardCheckbox } from './cardcheckbox';
 export { default as CardRadio } from './cardradio';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
-export { default as Coachmark } from './coachmark';
 export { default as Combobox } from './combobox';
 export { default as ControlTypeProvider } from './controltypeprovider';
+export { default as Dialog } from './dialog';
+export { default as Coachmark } from './coachmark';
 export { default as Divider } from './divider';
 export { default as FilterChip } from './filterchip';
-export { default as Dialog } from './dialog';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
-export { default as Illustration } from './illustration';
 export { default as IconProvider } from './iconprovider';
+export { default as Illustration } from './illustration';
 export { default as IllustrationProvider } from './illustrationprovider';
 export { default as Input } from './input';
 export { default as InputChip } from './inputchip';

package/dist/utils/mixins/CardComponentMixin.js

@@ -64,7 +64,11 @@ export const CardComponentMixin = (superClass) => {
             if (!this.imageSrc) {
                 return nothing;
             }
-            return html `<div part="image-wrapper"><img part="image" src="${this.imageSrc}" alt="${this.imageAlt}" /></div>`;
+            return html `<div part="image-wrapper">
+        <slot name="image">
+          <img part="image" src="${this.imageSrc}" alt="${this.imageAlt}" />
+        </slot>
+      </div>`;
         }
         /**
          * Renders the icon on the card if icon name is provided

package/package.json

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