@momentum-design/components 0.120.33 → 0.120.35

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/checkbox/checkbox.component.d.ts

@@ -1,6 +1,7 @@
 import { CSSResult, PropertyValueMap, PropertyValues } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import type { CheckboxValidationType } from './checkbox.types';
 declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../models").Component & import("../../utils/mixins/AutoFocusOnMountMixin").AutoFocusOnMountMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
@@ -74,7 +75,11 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
      * @default false
      */
     autofocus: boolean;
-    connectedCallback(): void;
+    /**
+     * The type of help text/validation. It can be 'default' or 'error'.
+     * @default 'default'
+     */
+    helpTextType: CheckboxValidationType;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Updates the form value to reflect the current state of the checkbox.

package/dist/components/checkbox/checkbox.component.js

@@ -17,6 +17,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import styles from './checkbox.styles';
+import { CHECKBOX_VALIDATION } from './checkbox.constants';
 /**
  * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selections in lists.
@@ -91,17 +92,17 @@ class Checkbox extends AutoFocusOnMountMixin(FormInternalsMixin(DataAriaLabelMix
          * @default false
          */
         this.autofocus = false;
+        /**
+         * The type of help text/validation. It can be 'default' or 'error'.
+         * @default 'default'
+         */
+        this.helpTextType = CHECKBOX_VALIDATION.DEFAULT;
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
             return html `<div part="text-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // Checkbox does not contain helpTextType property.
-        this.helpTextType = undefined;
-    }
     firstUpdated(_changedProperties) {
         // set the element to auto focus if autoFocusOnMount is set to true
         // before running the super method, so that the AutoFocusOnMountMixin can use it
@@ -247,4 +248,8 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
 ], Checkbox.prototype, "autofocus", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'help-text-type' }),
+    __metadata("design:type", String)
+], Checkbox.prototype, "helpTextType", void 0);
 export default Checkbox;

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

@@ -4,4 +4,8 @@ declare const ICON_NAME: {
     readonly CHECKED: Extract<IconNames, "check-bold">;
     readonly INDETERMINATE: Extract<IconNames, "minus-bold">;
 };
-export { TAG_NAME, ICON_NAME };
+declare const CHECKBOX_VALIDATION: {
+    readonly ERROR: "error";
+    readonly DEFAULT: "default";
+};
+export { TAG_NAME, ICON_NAME, CHECKBOX_VALIDATION };

package/dist/components/checkbox/checkbox.constants.js

@@ -1,7 +1,12 @@
 import utils from '../../utils/tag-name';
+import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 const TAG_NAME = utils.constructTagName('checkbox');
 const ICON_NAME = {
     CHECKED: 'check-bold',
     INDETERMINATE: 'minus-bold',
 };
-export { TAG_NAME, ICON_NAME };
+const CHECKBOX_VALIDATION = {
+    ERROR: VALIDATION.ERROR,
+    DEFAULT: VALIDATION.DEFAULT,
+};
+export { TAG_NAME, ICON_NAME, CHECKBOX_VALIDATION };

package/dist/components/checkbox/checkbox.styles.js

@@ -62,6 +62,10 @@ const styles = [
       --mdc-checkbox-background-color: var(--mds-color-theme-control-active-pressed);
     }
 
+    :host([help-text-type='error'])::part(static-checkbox) {
+      --mdc-checkbox-border-color: var(--mds-color-theme-outline-cancel-normal);
+    }
+
     :host([readonly]),
     :host([disabled]),
     :host([soft-disabled]) {

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

@@ -1,7 +1,9 @@
-import type { OverrideEventTarget, TypedCustomEvent } from "../../utils/types";
-import type Checkbox from "./checkbox.component";
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type Checkbox from './checkbox.component';
+import { CHECKBOX_VALIDATION } from './checkbox.constants';
+type CheckboxValidationType = ValueOf<typeof CHECKBOX_VALIDATION>;
 interface Events {
     onChangeEvent: TypedCustomEvent<Checkbox>;
     onFocusEvent: OverrideEventTarget<FocusEvent, Checkbox>;
 }
-export type { Events };
+export type { Events, CheckboxValidationType };

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];