@momentum-design/components 0.76.0 → 0.76.2

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

@@ -53,7 +53,7 @@ declare class Checkbox extends Checkbox_base implements AssociatedFormControl {
     private setFormValue;
     /**
      * Manages the required state of the checkbox.
-     * If the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid.
+     * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
      */
     private manageRequired;
     /** @internal

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

@@ -91,10 +91,10 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
     }
     /**
      * Manages the required state of the checkbox.
-     * If the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid.
+     * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
      */
     manageRequired() {
-        if (!this.checked && this.requiredLabel) {
+        if (!this.checked && this.required) {
             if (this.validationMessage) {
                 this.inputElement.setCustomValidity(this.validationMessage);
             }
@@ -173,7 +173,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           ?autofocus="${this.autofocus}"
           name="${ifDefined(this.name)}"
           value="${ifDefined(this.value)}"
-          ?required="${!!this.requiredLabel}"
+          ?required="${this.required}"
           .checked="${this.checked}"
           aria-checked="${this.indeterminate ? 'mixed' : this.checked}"
           .indeterminate="${this.indeterminate}"

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

@@ -18,11 +18,11 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      */
     label?: string;
     /**
-     * The required label of the input field.
-     * When an appropriate string value is set,
-     * the input field is marked as required and the label is appended with this text.
+     * The required attribute to indicate that the input field is required.
+     * It is used to append a required indicator (*) to the label.
+     * @default false
      */
-    requiredLabel?: string;
+    required: boolean;
     /**
      * The unique id of the input field. It is used to link the input field with the label.
      * @default `mdc-input-${uuidv4()}`
@@ -44,7 +44,6 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
      * @returns void
      */
     protected renderLabelElement(): import("lit-html").TemplateResult<1> | typeof nothing;
-    protected renderRequiredLabel(): import("lit-html").TemplateResult<1> | typeof nothing;
     /**
      * creates the helpertext icon based on the helpTextType for validation.
      * If the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -27,6 +27,12 @@ import { getHelperIcon } from './formfieldwrapper.utils';
 class FormfieldWrapper extends DisabledMixin(Component) {
     constructor() {
         super(...arguments);
+        /**
+         * The required attribute to indicate that the input field is required.
+         * It is used to append a required indicator (*) to the label.
+         * @default false
+         */
+        this.required = false;
         /**
          * The unique id of the input field. It is used to link the input field with the label.
          * @default `mdc-input-${uuidv4()}`
@@ -58,16 +64,6 @@ class FormfieldWrapper extends DisabledMixin(Component) {
           >${this.label}</mdc-text
         >`;
     }
-    renderRequiredLabel() {
-        if (!this.requiredLabel) {
-            return nothing;
-        }
-        return html `
-      <mdc-text part="required-label" tagname=${MDC_TEXT_OPTIONS.TAGNAME} type=${MDC_TEXT_OPTIONS.TYPE}>
-        (${this.requiredLabel})
-      </mdc-text>
-    `;
-    }
     /**
      * creates the helpertext icon based on the helpTextType for validation.
      * If the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.
@@ -112,7 +108,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
             return nothing;
         return html `<div class="mdc-label-text" part="label-text">
       <slot name="label">${this.renderLabelElement()}</slot>
-      <slot name="required-label">${this.renderRequiredLabel()}</slot>
+      ${this.required ? html `<span part="required-indicator">*</span>` : nothing}
       <slot name="label-info"></slot>
     </div>`;
     }
@@ -124,7 +120,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         if (!this.helpText) {
             return nothing;
         }
-        return html `<div class="mdc-help-text" part="mdc-help-text">
+        return html `<div class="mdc-help-text" part="help-text">
       <slot name="help-icon">${this.renderHelpTextIcon()}</slot>
       <slot name="help-text">${this.renderHelpText()}</slot>
     </div>`;
@@ -136,9 +132,9 @@ __decorate([
     __metadata("design:type", String)
 ], FormfieldWrapper.prototype, "label", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'required-label' }),
-    __metadata("design:type", String)
-], FormfieldWrapper.prototype, "requiredLabel", void 0);
+    property({ type: Boolean, reflect: true, attribute: 'required' }),
+    __metadata("design:type", Object)
+], FormfieldWrapper.prototype, "required", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -18,6 +18,10 @@ const styles = [
       color: var(--mds-color-theme-text-primary-disabled);
     }
 
+    :host::part(required-indicator) {
+      color: var(--mds-color-theme-text-error-normal);
+    }
+
     .mdc-label-text,
     .mdc-help-text {
       display: flex;

package/dist/components/input/input.component.js

@@ -138,7 +138,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     setInputValidity() {
-        if (this.requiredLabel && this.validationMessage && this.value === '') {
+        if (this.required && this.validationMessage && this.value === '') {
             this.inputElement.setCustomValidity(this.validationMessage);
         }
         else {
@@ -305,7 +305,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                   .value="${this.value}"
                   ?disabled="${this.disabled}"
                   ?readonly="${this.readonly}"
-                  ?required="${!!this.requiredLabel}"
+                  ?required="${this.required}"
                   type="${type}"
                   aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
                   aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"

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

@@ -97,8 +97,19 @@ declare class ListItem extends ListItem_base {
     tooltipPlacement: PopoverPlacement;
     constructor();
     connectedCallback(): void;
+    /**
+     * Fires the click event when the enter or space key is pressed.
+     * @param event - The keyboard event triggered when a key is pressed down.
+     */
     private handleKeyDown;
+    /**
+     * Triggers a click event on the list item.
+     */
     private triggerClickEvent;
+    /**
+     * Handles the click event on the list item.
+     * If the tooltip is open, it has to be closed first.
+     */
     private handleClick;
     /**
      * Display a tooltip for the listitem.
@@ -126,8 +137,24 @@ declare class ListItem extends ListItem_base {
      */
     private disableSlottedChildren;
     update(changedProperties: PropertyValues): void;
+    /**
+     * Renders the trailing controls slot.
+     * @returns A template for the trailing controls slot.
+     */
     protected renderTrailingControls(): TemplateResult<1>;
+    /**
+     * Renders the leading controls slot.
+     * @returns A template for the leading controls slot.
+     */
     protected renderLeadingControls(): TemplateResult<1>;
+    /**
+     * Stops the click event from propagating to parent elements. In case of keyboard events,
+     * it stops the propagation for Enter and Space keys.
+     * This is useful when the list item contains controls that
+     * should not trigger the click event on the list item itself.
+     * @param event - The mouse event triggered when a click occurs.
+     */
+    protected stopEventPropagation(event: Event): void;
     render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/listitem/listitem.component.js

@@ -88,12 +88,19 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         super.connectedCallback();
         this.role = this.role || ROLE.LISTITEM;
     }
+    /**
+     * Fires the click event when the enter or space key is pressed.
+     * @param event - The keyboard event triggered when a key is pressed down.
+     */
     handleKeyDown(event) {
         if (event.key === KEYS.ENTER || event.key === KEYS.SPACE) {
             this.triggerClickEvent();
             event.preventDefault();
         }
     }
+    /**
+     * Triggers a click event on the list item.
+     */
     triggerClickEvent() {
         const clickEvent = new MouseEvent('click', {
             bubbles: true,
@@ -102,6 +109,10 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         });
         this.dispatchEvent(clickEvent);
     }
+    /**
+     * Handles the click event on the list item.
+     * If the tooltip is open, it has to be closed first.
+     */
     handleClick() {
         // If the tooltip is open, it has to be closed first.
         this.hideTooltipOnLeave();
@@ -178,11 +189,38 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
             this.setAttribute('aria-disabled', `${this.disabled}`);
         }
     }
+    /**
+     * Renders the trailing controls slot.
+     * @returns A template for the trailing controls slot.
+     */
     renderTrailingControls() {
-        return html `<slot name="trailing-controls"></slot>`;
+        return html `<slot name="trailing-controls" 
+    @click=${this.stopEventPropagation}
+    @keyup=${this.stopEventPropagation}
+    @keydown=${this.stopEventPropagation}></slot>`;
     }
+    /**
+     * Renders the leading controls slot.
+     * @returns A template for the leading controls slot.
+     */
     renderLeadingControls() {
-        return html `<slot name="leading-controls"></slot>`;
+        return html `<slot name="leading-controls" 
+    @click=${this.stopEventPropagation}
+    @keyup=${this.stopEventPropagation}
+    @keydown=${this.stopEventPropagation}></slot>`;
+    }
+    /**
+     * Stops the click event from propagating to parent elements. In case of keyboard events,
+     * it stops the propagation for Enter and Space keys.
+     * This is useful when the list item contains controls that
+     * should not trigger the click event on the list item itself.
+     * @param event - The mouse event triggered when a click occurs.
+     */
+    stopEventPropagation(event) {
+        if ((event instanceof KeyboardEvent && (event.key === KEYS.ENTER || event.key === KEYS.SPACE))
+            || (event instanceof MouseEvent)) {
+            event.stopPropagation();
+        }
     }
     render() {
         return html `

package/dist/components/menuitem/menuitem.component.js

@@ -49,7 +49,10 @@ class MenuItem extends ListItem {
             ? ARROW_ICONS.LEFT
             : ARROW_ICONS.RIGHT;
         return html `
-      <slot name="trailing-controls"></slot>
+      <slot name="trailing-controls"
+      @click=${this.stopEventPropagation}
+      @keyup=${this.stopEventPropagation}
+      @keydown=${this.stopEventPropagation}></slot>
       ${this.arrowPosition === ARROW_POSITIONS.TRAILING
             ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="trailing-arrow"></mdc-icon>`
             : nothing}
@@ -64,7 +67,10 @@ class MenuItem extends ListItem {
             ? ARROW_ICONS.RIGHT
             : ARROW_ICONS.LEFT;
         return html `
-      <slot name="leading-controls"></slot>
+      <slot name="leading-controls"
+      @click=${this.stopEventPropagation}
+      @keyup=${this.stopEventPropagation}
+      @keydown=${this.stopEventPropagation}></slot>
       ${this.arrowPosition === ARROW_POSITIONS.LEADING
             ? html `<mdc-icon name="${arrowIcon}" length-unit="rem" part="leading-arrow"></mdc-icon>`
             : nothing}

package/dist/components/progressspinner/progressspinner.component.js

@@ -38,7 +38,7 @@ class Progressspinner extends Progressbar {
         this.disabled = undefined;
         this.helpTextType = undefined;
         this.helpText = undefined;
-        this.requiredLabel = undefined;
+        this.required = undefined;
         this.variant = undefined;
         this.label = undefined;
     }

package/dist/components/radio/radio.component.js

@@ -118,7 +118,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         if (isValid) {
             this.internals.setValidity({});
         }
-        else if (this.requiredLabel && !this.checked) {
+        else if (this.required && !this.checked) {
             if (this.validationMessage) {
                 this.inputElement.setCustomValidity(this.validationMessage);
             }
@@ -163,7 +163,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             this.setGroupValidity(radios, true);
         }
         else {
-            const anyRequired = radios.some((r) => r.requiredLabel);
+            const anyRequired = radios.some((r) => r.required);
             const anyChecked = !!radios.find((r) => r.checked);
             const isInvalid = anyRequired && !anyChecked;
             this.setGroupValidity(radios, !isInvalid);
@@ -284,7 +284,7 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             ?autofocus="${this.autofocus}"
             name="${ifDefined(this.name)}"
             value="${ifDefined(this.value)}"
-            ?required="${!!this.requiredLabel}"
+            ?required="${this.required}"
             @change=${this.handleChange}
             @keydown=${this.handleKeyDown}
             ?checked=${this.checked}

package/dist/components/radio/radio.styles.js

@@ -83,7 +83,7 @@ const styles = [hostFitContentStyles, css `
     justify-content: center;
     gap: 0.25rem;
   }
-  :host::part(required-label){
+  :host::part(required-indicator){
     display: none;
   }
 

package/dist/components/radiogroup/radiogroup.component.js

@@ -42,8 +42,8 @@ class RadioGroup extends FormfieldGroup {
         var _a, _b, _c, _d, _e;
         (_e = (_d = (_c = (_b = Array.from(((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) || [])) === null || _b === void 0 ? void 0 : _b.flatMap((slot) => slot.assignedElements({ flatten: true }))) === null || _c === void 0 ? void 0 : _c.filter((el) => el.tagName.toLowerCase() === RADIO_TAGNAME || el.tagName.toLowerCase() === CARD_RADIO_TAGNAME)) === null || _d === void 0 ? void 0 : _d.filter((radio) => !radio.hasAttribute('name'))) === null || _e === void 0 ? void 0 : _e.forEach((radio) => {
             radio.setAttribute('name', this.name);
-            if (this.requiredLabel)
-                radio.setAttribute('required-label', this.requiredLabel);
+            if (this.required)
+                radio.setAttribute('required', this.required.toString());
         });
     }
 }

package/dist/components/searchfield/searchfield.component.js

@@ -55,7 +55,7 @@ class Searchfield extends Input {
         this.trailingButton = DEFAULTS.CLOSE_BTN;
         this.helpText = undefined;
         this.helpTextType = undefined;
-        this.requiredLabel = undefined;
+        this.required = undefined;
         this.validationMessage = undefined;
         this.prefixText = undefined;
     }

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

@@ -92,8 +92,11 @@ declare class Select extends Select_base implements AssociatedFormControl {
     private setSelectedValue;
     /**
      * Manages the required state of the select.
-     * If the value is not set and the requiredLabel property is set,
-     * then the select is invalid.
+     * If the select is required and no value is selected,
+     * it sets a custom validity message based on the validationMessage property.
+     * If the select is not required or a value is selected, it clears the custom validity.
+     * This method is called to ensure that the select behaves correctly in forms.
+     * @internal
      */
     private manageRequired;
     /**

package/dist/components/select/select.component.js

@@ -153,11 +153,14 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     }
     /**
      * Manages the required state of the select.
-     * If the value is not set and the requiredLabel property is set,
-     * then the select is invalid.
+     * If the select is required and no value is selected,
+     * it sets a custom validity message based on the validationMessage property.
+     * If the select is not required or a value is selected, it clears the custom validity.
+     * This method is called to ensure that the select behaves correctly in forms.
+     * @internal
      */
     manageRequired() {
-        if (!this.selectedValue && this.requiredLabel) {
+        if (!this.selectedValue && this.required) {
             if (this.validationMessage) {
                 this.inputElement.setCustomValidity(this.validationMessage);
             }
@@ -402,7 +405,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         .value="${this.selectedValue}"
         ?autofocus="${this.autofocus}"
         ?disabled="${this.disabled}"
-        ?required="${!!this.requiredLabel}"
+        ?required="${this.required}"
         @mousedown="${(event) => event.preventDefault()}"
       >
         ${this.getOptionsContentFromSlot()}

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

@@ -7,7 +7,7 @@ declare const Textarea_base: import("../../utils/mixins/index.types").Constructo
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:
  * - label: It is the title of the textarea field.
- * - required-label: A string depicting that the textarea field is required.
+ * - required: A boolean attribute depicting that the textarea field is required.
  * - Textarea: It is the multi-line text input field.
  * - helper-text: It is the text that provides additional information about the textarea field.
  * - max-character-limit: It is the text that shows the character count of the textarea field.

package/dist/components/textarea/textarea.component.js

@@ -21,7 +21,7 @@ import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:
  * - label: It is the title of the textarea field.
- * - required-label: A string depicting that the textarea field is required.
+ * - required: A boolean attribute depicting that the textarea field is required.
  * - Textarea: It is the multi-line text input field.
  * - helper-text: It is the text that provides additional information about the textarea field.
  * - max-character-limit: It is the text that shows the character count of the textarea field.
@@ -127,7 +127,7 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         });
     }
     setTextareaValidity() {
-        if (this.requiredLabel && this.validationMessage && this.value === '') {
+        if (this.required && this.validationMessage && this.value === '') {
             this.textarea.setCustomValidity(this.validationMessage);
         }
         else if (this.maxCharacterLimit
@@ -292,7 +292,7 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           .value="${this.value}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readonly}"
-          ?required="${!!this.requiredLabel}"
+          ?required="${this.required}"
           placeholder=${ifDefined(this.placeholder)}
           rows=${ifDefined(this.rows)}
           cols=${ifDefined(this.cols)}

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

@@ -64,7 +64,9 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
     formStateRestoreCallback(state: string): void;
     /**
    * Manages the required state of the checkbox.
-   * If the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid.
+   * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
+   * If the validationMessage is set, it will be used as the custom validity message.
+   * If the validationMessage is not set, it will clear the custom validity message.
    */
     private manageRequired;
     /**

package/dist/components/toggle/toggle.component.js

@@ -90,10 +90,12 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     }
     /**
    * Manages the required state of the checkbox.
-   * If the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid.
+   * If the checkbox is not checked and the required property is set, then the checkbox is invalid.
+   * If the validationMessage is set, it will be used as the custom validity message.
+   * If the validationMessage is not set, it will clear the custom validity message.
    */
     manageRequired() {
-        if (!this.checked && this.requiredLabel) {
+        if (!this.checked && this.required) {
             if (this.validationMessage) {
                 this.inputElement.setCustomValidity(this.validationMessage);
             }
@@ -186,7 +188,7 @@ class Toggle extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             part="toggle-input"
             role="switch"
             ?autofocus="${this.autofocus}"
-            ?required="${!!this.requiredLabel}"
+            ?required="${this.required}"
             name="${ifDefined(this.name)}"
             value="${ifDefined(this.value)}"
             .checked="${this.checked}"