@momentum-design/components 0.84.3 → 0.84.4

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

@@ -1,5 +1,5 @@
-import { ARROW_BUTTON_DIRECTION } from './tablist.constants';
 import type { ValueOf } from '../../utils/types';
+import { ARROW_BUTTON_DIRECTION } from './tablist.constants';
 interface Events {
     onChangeEvent: CustomEvent;
 }

package/dist/components/tablist/tablist.utils.js

@@ -1,12 +1,12 @@
 export const getFirstTab = (tabs) => tabs[0];
 export const getLastTab = (tabs) => tabs[tabs.length - 1];
 export const getPreviousTab = (tabs, focusedTabElement) => {
-    const newIndex = tabs.findIndex((tab) => focusedTabElement === tab) - 1;
+    const newIndex = tabs.findIndex(tab => focusedTabElement === tab) - 1;
     return tabs[(newIndex + tabs.length) % tabs.length];
 };
 export const getNextTab = (tabs, focusedTabElement) => {
-    const newIndex = tabs.findIndex((tab) => focusedTabElement === tab) + 1;
+    const newIndex = tabs.findIndex(tab => focusedTabElement === tab) + 1;
     return tabs[newIndex % tabs.length];
 };
-export const findTab = (tabs, tabId) => tabs.find((tab) => tab.tabId === tabId);
-export const getActiveTab = (tabs) => tabs.find((tab) => tab.active);
+export const findTab = (tabs, tabId) => tabs.find(tab => tab.tabId === tabId);
+export const getActiveTab = (tabs) => tabs.find(tab => tab.active);

package/dist/components/text/fonts.styles.js

@@ -11,7 +11,7 @@ export const fontsStyles = css `
     text-overflow: inherit;
   }
 
-  :host([type="headline-small-regular"]) {
+  :host([type='headline-small-regular']) {
     font-size: var(--mds-font-apps-headline-small-regular-font-size);
     font-weight: var(--mds-font-apps-headline-small-regular-font-weight);
     line-height: var(--mds-font-apps-headline-small-regular-line-height);
@@ -19,7 +19,7 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-headline-small-regular-text-case);
   }
 
-  :host([type="headline-small-light"]) {
+  :host([type='headline-small-light']) {
     font-size: var(--mds-font-apps-headline-small-light-font-size);
     font-weight: var(--mds-font-apps-headline-small-light-font-weight);
     line-height: var(--mds-font-apps-headline-small-light-line-height);
@@ -27,23 +27,23 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-headline-small-light-text-case);
   }
 
-  :host([type="heading-xlarge-bold"]) {
+  :host([type='heading-xlarge-bold']) {
     font-size: var(--mds-font-apps-heading-xlarge-bold-font-size);
     font-weight: var(--mds-font-apps-heading-xlarge-bold-font-weight);
     line-height: var(--mds-font-apps-heading-xlarge-bold-line-height);
     text-decoration: var(--mds-font-apps-heading-xlarge-bold-text-decoration);
     text-transform: var(--mds-font-apps-heading-xlarge-bold-text-case);
   }
-  
-  :host([type="heading-xlarge-medium"]) {
+
+  :host([type='heading-xlarge-medium']) {
     font-size: var(--mds-font-apps-heading-xlarge-medium-font-size);
     font-weight: var(--mds-font-apps-heading-xlarge-medium-font-weight);
     line-height: var(--mds-font-apps-heading-xlarge-medium-line-height);
     text-decoration: var(--mds-font-apps-heading-xlarge-medium-text-decoration);
     text-transform: var(--mds-font-apps-heading-xlarge-medium-text-case);
   }
-  
-  :host([type="heading-xlarge-regular"]) {
+
+  :host([type='heading-xlarge-regular']) {
     font-size: var(--mds-font-apps-heading-xlarge-regular-font-size);
     font-weight: var(--mds-font-apps-heading-xlarge-regular-font-weight);
     line-height: var(--mds-font-apps-heading-xlarge-regular-line-height);
@@ -51,23 +51,23 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-heading-xlarge-regular-text-case);
   }
 
-  :host([type="heading-large-bold"]) {
+  :host([type='heading-large-bold']) {
     font-size: var(--mds-font-apps-heading-large-bold-font-size);
     font-weight: var(--mds-font-apps-heading-large-bold-font-weight);
     line-height: var(--mds-font-apps-heading-large-bold-line-height);
     text-decoration: var(--mds-font-apps-heading-large-bold-text-decoration);
     text-transform: var(--mds-font-apps-heading-large-bold-text-case);
   }
-  
-  :host([type="heading-large-medium"]) {
+
+  :host([type='heading-large-medium']) {
     font-size: var(--mds-font-apps-heading-large-medium-font-size);
     font-weight: var(--mds-font-apps-heading-large-medium-font-weight);
     line-height: var(--mds-font-apps-heading-large-medium-line-height);
     text-decoration: var(--mds-font-apps-heading-large-medium-text-decoration);
     text-transform: var(--mds-font-apps-heading-large-medium-text-case);
   }
-  
-  :host([type="heading-large-regular"]) {
+
+  :host([type='heading-large-regular']) {
     font-size: var(--mds-font-apps-heading-large-regular-font-size);
     font-weight: var(--mds-font-apps-heading-large-regular-font-weight);
     line-height: var(--mds-font-apps-heading-large-regular-line-height);
@@ -75,23 +75,23 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-heading-large-regular-text-case);
   }
 
-  :host([type="heading-midsize-bold"]) {
+  :host([type='heading-midsize-bold']) {
     font-size: var(--mds-font-apps-heading-midsize-bold-font-size);
     font-weight: var(--mds-font-apps-heading-midsize-bold-font-weight);
     line-height: var(--mds-font-apps-heading-midsize-bold-line-height);
     text-decoration: var(--mds-font-apps-heading-midsize-bold-text-decoration);
     text-transform: var(--mds-font-apps-heading-midsize-bold-text-case);
   }
-  
-  :host([type="heading-midsize-medium"]) {
+
+  :host([type='heading-midsize-medium']) {
     font-size: var(--mds-font-apps-heading-midsize-medium-font-size);
     font-weight: var(--mds-font-apps-heading-midsize-medium-font-weight);
     line-height: var(--mds-font-apps-heading-midsize-medium-line-height);
     text-decoration: var(--mds-font-apps-heading-midsize-medium-text-decoration);
     text-transform: var(--mds-font-apps-heading-midsize-medium-text-case);
   }
-  
-  :host([type="heading-midsize-regular"]) {
+
+  :host([type='heading-midsize-regular']) {
     font-size: var(--mds-font-apps-heading-midsize-regular-font-size);
     font-weight: var(--mds-font-apps-heading-midsize-regular-font-weight);
     line-height: var(--mds-font-apps-heading-midsize-regular-line-height);
@@ -99,23 +99,23 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-heading-midsize-regular-text-case);
   }
 
-  :host([type="heading-small-bold"]) {
+  :host([type='heading-small-bold']) {
     font-size: var(--mds-font-apps-heading-small-bold-font-size);
     font-weight: var(--mds-font-apps-heading-small-bold-font-weight);
     line-height: var(--mds-font-apps-heading-small-bold-line-height);
     text-decoration: var(--mds-font-apps-heading-small-bold-text-decoration);
     text-transform: var(--mds-font-apps-heading-small-bold-text-case);
   }
-  
-  :host([type="heading-small-medium"]) {
+
+  :host([type='heading-small-medium']) {
     font-size: var(--mds-font-apps-heading-small-medium-font-size);
     font-weight: var(--mds-font-apps-heading-small-medium-font-weight);
     line-height: var(--mds-font-apps-heading-small-medium-line-height);
     text-decoration: var(--mds-font-apps-heading-small-medium-text-decoration);
     text-transform: var(--mds-font-apps-heading-small-medium-text-case);
   }
-  
-  :host([type="heading-small-regular"]) {
+
+  :host([type='heading-small-regular']) {
     font-size: var(--mds-font-apps-heading-small-regular-font-size);
     font-weight: var(--mds-font-apps-heading-small-regular-font-weight);
     line-height: var(--mds-font-apps-heading-small-regular-line-height);
@@ -123,39 +123,39 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-heading-small-regular-text-case);
   }
 
-  :host([type="body-large-bold"]) {
+  :host([type='body-large-bold']) {
     font-size: var(--mds-font-apps-body-large-bold-font-size);
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
     line-height: var(--mds-font-apps-body-large-bold-line-height);
     text-decoration: var(--mds-font-apps-body-large-bold-text-decoration);
     text-transform: var(--mds-font-apps-body-large-bold-text-case);
   }
-  
-  :host([type="body-large-medium-underline"]) {
+
+  :host([type='body-large-medium-underline']) {
     font-size: var(--mds-font-apps-body-large-medium-underline-font-size);
     font-weight: var(--mds-font-apps-body-large-medium-underline-font-weight);
     line-height: var(--mds-font-apps-body-large-medium-underline-line-height);
     text-decoration: var(--mds-font-apps-body-large-medium-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-large-medium-underline-text-case);
   }
-  
-  :host([type="body-large-medium"]) {
+
+  :host([type='body-large-medium']) {
     font-size: var(--mds-font-apps-body-large-medium-font-size);
     font-weight: var(--mds-font-apps-body-large-medium-font-weight);
     line-height: var(--mds-font-apps-body-large-medium-line-height);
     text-decoration: var(--mds-font-apps-body-large-medium-text-decoration);
     text-transform: var(--mds-font-apps-body-large-medium-text-case);
   }
-  
-  :host([type="body-large-regular-underline"]) {
+
+  :host([type='body-large-regular-underline']) {
     font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
     text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
   }
-  
-  :host([type="body-large-regular"]) {
+
+  :host([type='body-large-regular']) {
     font-size: var(--mds-font-apps-body-large-regular-font-size);
     font-weight: var(--mds-font-apps-body-large-regular-font-weight);
     line-height: var(--mds-font-apps-body-large-regular-line-height);
@@ -163,39 +163,39 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-body-large-regular-text-case);
   }
 
-  :host([type="body-midsize-bold"]) {
+  :host([type='body-midsize-bold']) {
     font-size: var(--mds-font-apps-body-midsize-bold-font-size);
     font-weight: var(--mds-font-apps-body-midsize-bold-font-weight);
     line-height: var(--mds-font-apps-body-midsize-bold-line-height);
     text-decoration: var(--mds-font-apps-body-midsize-bold-text-decoration);
     text-transform: var(--mds-font-apps-body-midsize-bold-text-case);
   }
-  
-  :host([type="body-midsize-medium-underline"]) {
+
+  :host([type='body-midsize-medium-underline']) {
     font-size: var(--mds-font-apps-body-midsize-medium-underline-font-size);
     font-weight: var(--mds-font-apps-body-midsize-medium-underline-font-weight);
     line-height: var(--mds-font-apps-body-midsize-medium-underline-line-height);
     text-decoration: var(--mds-font-apps-body-midsize-medium-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-midsize-medium-underline-text-case);
   }
-  
-  :host([type="body-midsize-medium"]) {
+
+  :host([type='body-midsize-medium']) {
     font-size: var(--mds-font-apps-body-midsize-medium-font-size);
     font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
     line-height: var(--mds-font-apps-body-midsize-medium-line-height);
     text-decoration: var(--mds-font-apps-body-midsize-medium-text-decoration);
     text-transform: var(--mds-font-apps-body-midsize-medium-text-case);
   }
-  
-  :host([type="body-midsize-regular-underline"]) {
+
+  :host([type='body-midsize-regular-underline']) {
     font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
     text-decoration: var(--mds-font-apps-body-midsize-regular-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
   }
-  
-  :host([type="body-midsize-regular"]) {
+
+  :host([type='body-midsize-regular']) {
     font-size: var(--mds-font-apps-body-midsize-regular-font-size);
     font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
     line-height: var(--mds-font-apps-body-midsize-regular-line-height);
@@ -203,39 +203,39 @@ export const fontsStyles = css `
     text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
   }
 
-  :host([type="body-small-bold"]) {
+  :host([type='body-small-bold']) {
     font-size: var(--mds-font-apps-body-small-bold-font-size);
     font-weight: var(--mds-font-apps-body-small-bold-font-weight);
     line-height: var(--mds-font-apps-body-small-bold-line-height);
     text-decoration: var(--mds-font-apps-body-small-bold-text-decoration);
     text-transform: var(--mds-font-apps-body-small-bold-text-case);
   }
-  
-  :host([type="body-small-medium-underline"]) {
+
+  :host([type='body-small-medium-underline']) {
     font-size: var(--mds-font-apps-body-small-medium-underline-font-size);
     font-weight: var(--mds-font-apps-body-small-medium-underline-font-weight);
     line-height: var(--mds-font-apps-body-small-medium-underline-line-height);
     text-decoration: var(--mds-font-apps-body-small-medium-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-small-medium-underline-text-case);
   }
-  
-  :host([type="body-small-medium"]) {
+
+  :host([type='body-small-medium']) {
     font-size: var(--mds-font-apps-body-small-medium-font-size);
     font-weight: var(--mds-font-apps-body-small-medium-font-weight);
     line-height: var(--mds-font-apps-body-small-medium-line-height);
     text-decoration: var(--mds-font-apps-body-small-medium-text-decoration);
     text-transform: var(--mds-font-apps-body-small-medium-text-case);
   }
-  
-  :host([type="body-small-regular-underline"]) {
+
+  :host([type='body-small-regular-underline']) {
     font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
     text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
     text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
   }
-  
-  :host([type="body-small-regular"]) {
+
+  :host([type='body-small-regular']) {
     font-size: var(--mds-font-apps-body-small-regular-font-size);
     font-weight: var(--mds-font-apps-body-small-regular-font-weight);
     line-height: var(--mds-font-apps-body-small-regular-line-height);

package/dist/components/text/text.component.js

@@ -9,8 +9,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './text.styles';
 import { Component } from '../../models';
+import styles from './text.styles';
 import { DEFAULTS, VALID_TEXT_TAGS } from './text.constants';
 /**
  * Text component for creating styled text elements.
@@ -96,17 +96,27 @@ class Text extends Component {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
         switch (this.tagname) {
-            case VALID_TEXT_TAGS.H1: return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
-            case VALID_TEXT_TAGS.H2: return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
-            case VALID_TEXT_TAGS.H3: return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
-            case VALID_TEXT_TAGS.H4: return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
-            case VALID_TEXT_TAGS.H5: return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
-            case VALID_TEXT_TAGS.H6: return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
-            case VALID_TEXT_TAGS.DIV: return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
-            case VALID_TEXT_TAGS.SPAN: return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
-            case VALID_TEXT_TAGS.SMALL: return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
+            case VALID_TEXT_TAGS.H1:
+                return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
+            case VALID_TEXT_TAGS.H2:
+                return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
+            case VALID_TEXT_TAGS.H3:
+                return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
+            case VALID_TEXT_TAGS.H4:
+                return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
+            case VALID_TEXT_TAGS.H5:
+                return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
+            case VALID_TEXT_TAGS.H6:
+                return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
+            case VALID_TEXT_TAGS.DIV:
+                return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
+            case VALID_TEXT_TAGS.SPAN:
+                return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
+            case VALID_TEXT_TAGS.SMALL:
+                return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
             case VALID_TEXT_TAGS.P:
-            default: return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
+            default:
+                return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
         }
     }
 }

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

@@ -1,5 +1,5 @@
-import { TYPE, VALID_TEXT_TAGS } from './text.constants';
 import type { ValueOf } from '../../utils/types';
+import { TYPE, VALID_TEXT_TAGS } from './text.constants';
 type TextType = ValueOf<typeof TYPE>;
 type TagName = ValueOf<typeof VALID_TEXT_TAGS>;
 export type { TextType, TagName };

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

@@ -109,9 +109,9 @@ declare class Textarea extends Textarea_base {
      */
     maxCharacterLimit?: number;
     /**
-   * @internal
-   * The textarea element
-   */
+     * @internal
+     * The textarea element
+     */
     inputElement: HTMLTextAreaElement;
     private characterLimitExceedingFired;
     protected get textarea(): HTMLTextAreaElement;
@@ -122,48 +122,48 @@ declare class Textarea extends Textarea_base {
     /** @internal */
     formStateRestoreCallback(state: string): void;
     /**
-   * Handles the value change of the textarea field.
-   * Sets the form value and updates the validity of the textarea field.
-   * @returns void
-   */
+     * Handles the value change of the textarea field.
+     * Sets the form value and updates the validity of the textarea field.
+     * @returns void
+     */
     handleValueChange(): void;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
-   * This function is called when the attribute changes.
-   * It updates the validity of the textarea field based on the textarea field's validity.
-   *
-   * @param name - attribute name
-   * @param old - old value
-   * @param value - new value
-   */
+     * This function is called when the attribute changes.
+     * It updates the validity of the textarea field based on the textarea field's validity.
+     *
+     * @param name - attribute name
+     * @param old - old value
+     * @param value - new value
+     */
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     /**
-   * Dispatches the character overflow state change event.
-   * @returns void
-   */
+     * Dispatches the character overflow state change event.
+     * @returns void
+     */
     private dispatchCharacterOverflowStateChangeEvent;
     /**
      * Handles the character overflow state change.
      * Dispatches the character overflow state change event if the character limit is exceeded or restored.
      * @returns void
-    */
+     */
     private handleCharacterOverflowStateChange;
     /**
-   * Updates the value of the textarea field.
-   * Sets the form value.
-   * @returns void
-   */
+     * Updates the value of the textarea field.
+     * Sets the form value.
+     * @returns void
+     */
     private updateValue;
     /**
-   * Handles the change event of the textarea field.
-   * Updates the value and sets the validity of the textarea field.
-   *
-   * The 'change' event does not bubble up through the shadow DOM as it was not composed.
-   * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
-   * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
-   *
-   * @param event - Event which contains information about the value change.
-   */
+     * Handles the change event of the textarea field.
+     * Updates the value and sets the validity of the textarea field.
+     *
+     * The 'change' event does not bubble up through the shadow DOM as it was not composed.
+     * Therefore, we need to re-dispatch the same event to ensure it is propagated correctly.
+     * Read more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
+     *
+     * @param event - Event which contains information about the value change.
+     */
     private onChange;
     protected renderCharacterCounter(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected renderTextareaFooter(): import("lit-html").TemplateResult<1> | typeof nothing;