@momentum-design/components 0.120.32 → 0.120.34

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

@@ -66,6 +66,7 @@ const styles = [
       position: relative;
       display: grid;
       place-items: center;
+      flex-shrink: 0;
     }
     :host::part(photo) {
       border-radius: 100vh;

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

@@ -5,6 +5,7 @@ declare const InputChip_base: import("../../utils/mixins/index.types").Construct
  * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
  *
  * - It supports a leading icon along with label.
+ * - It supports a prefix slot for avatars (takes precedence over icon-name).
  * - It supports an error state for validation.
  * - It supports a close button to remove the chip.
  *
@@ -16,6 +17,8 @@ declare const InputChip_base: import("../../utils/mixins/index.types").Construct
  *
  * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.
  *
+ * @slot prefix - A slot for prefix content such as avatars.
+ *
  * @csspart label - The label part of the chip.
  * @csspart icon - The icon part of the chip.
  * @csspart close-icon - The close icon part of the chip.
@@ -44,10 +47,10 @@ declare class InputChip extends InputChip_base {
      */
     clearAriaLabel: string;
     /**
-     * Renders the icon element if available.
-     * @returns The icon element if available, otherwise nothing.
+     * Renders the prefix content, supporting both icons and slot content.
+     * @returns The prefix content if available, otherwise nothing.
      */
-    private renderIcon;
+    private renderPrefix;
     /**
      * Handles the behavior of the close button on click event.
      * @param event - The event object.

package/dist/components/inputchip/inputchip.component.js

@@ -18,6 +18,7 @@ import { DEFAULTS } from './inputchip.constants';
  * mdc-inputchip component is an interactive chip that consumers can use to represent an input.
  *
  * - It supports a leading icon along with label.
+ * - It supports a prefix slot for avatars (takes precedence over icon-name).
  * - It supports an error state for validation.
  * - It supports a close button to remove the chip.
  *
@@ -29,6 +30,8 @@ import { DEFAULTS } from './inputchip.constants';
  *
  * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.
  *
+ * @slot prefix - A slot for prefix content such as avatars.
+ *
  * @csspart label - The label part of the chip.
  * @csspart icon - The icon part of the chip.
  * @csspart close-icon - The close icon part of the chip.
@@ -60,13 +63,17 @@ class InputChip extends IconNameMixin(DisabledMixin(Component)) {
         this.clearAriaLabel = '';
     }
     /**
-     * Renders the icon element if available.
-     * @returns The icon element if available, otherwise nothing.
+     * Renders the prefix content, supporting both icons and slot content.
+     * @returns The prefix content if available, otherwise nothing.
      */
-    renderIcon() {
-        if (!this.iconName)
-            return nothing;
-        return html ` <mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon> `;
+    renderPrefix() {
+        return html `
+      <slot name="prefix">
+        ${this.iconName
+            ? html `<mdc-icon part="icon" name="${this.iconName}" length-unit="rem" size="1"></mdc-icon>`
+            : nothing}
+      </slot>
+    `;
     }
     /**
      * Handles the behavior of the close button on click event.
@@ -77,7 +84,7 @@ class InputChip extends IconNameMixin(DisabledMixin(Component)) {
     }
     render() {
         return html `
-      ${this.renderIcon()}
+      ${this.renderPrefix()}
       ${this.label
             ? html `<mdc-text part="label" type="${DEFAULTS.TEXT_TYPE}" tagname="${DEFAULTS.TAG_NAME}"
             >${this.label}</mdc-text

package/dist/components/inputchip/inputchip.styles.js

@@ -31,5 +31,10 @@ const styles = css `
     --mdc-chip-color: var(--mds-color-theme-text-primary-disabled);
     cursor: auto;
   }
+
+  ::slotted(mdc-avatar[slot='prefix']){
+    width: 1.25rem;
+    height: 1.25rem;
+  }
 `;
 export default [hostFitContentStyles, styles];