@momentum-design/components 0.84.3 → 0.84.4

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

@@ -78,15 +78,15 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      */
     getAllValidOptions() {
         var _a;
-        return ((_a = this.optionsList) === null || _a === void 0 ? void 0 : _a.map((option) => {
+        return (((_a = this.optionsList) === null || _a === void 0 ? void 0 : _a.map(option => {
             if (option.tagName.toLowerCase() === OPTION_TAG_NAME) {
                 return option;
             }
             if (option.tagName.toLowerCase() === OPTION_GROUP_TAG_NAME) {
-                return Array.from(option.children).filter((optgroup) => optgroup.tagName.toLowerCase() === OPTION_TAG_NAME);
+                return Array.from(option.children).filter(optgroup => optgroup.tagName.toLowerCase() === OPTION_TAG_NAME);
             }
             return [];
-        }).flat()) || [];
+        }).flat()) || []);
     }
     handlePopoverOpen() {
         this.displayPopover = true;
@@ -106,7 +106,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     updateTabIndexForAllOptions(selectedOption) {
         var _a;
         let isTabIndexSet = false;
-        this.getAllValidOptions().forEach((option) => {
+        this.getAllValidOptions().forEach(option => {
             if (option === selectedOption) {
                 this.setSelectedValue(option);
                 isTabIndexSet = true;
@@ -209,7 +209,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         var _a;
         switch (event.key) {
             case KEYS.TAB: {
-                const focusedOptionIndex = this.getAllValidOptions().findIndex((option) => option === event.target);
+                const focusedOptionIndex = this.getAllValidOptions().findIndex(option => option === event.target);
                 this.setFocusAndTabIndex(focusedOptionIndex);
                 event.preventDefault();
                 break;
@@ -285,7 +285,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      */
     handleOptionsNavigation(event) {
         const options = this.getAllValidOptions();
-        const currentIndex = options.findIndex((option) => option === event.target);
+        const currentIndex = options.findIndex(option => option === event.target);
         const newIndex = this.getNewIndexBasedOnKey(event.key, currentIndex, options.length);
         if (newIndex !== -1) {
             this.setFocusAndTabIndex(newIndex);
@@ -316,11 +316,11 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
         if (key === KEYS.PAGE_DOWN) {
             // Jumps visual focus down 10 options (or to last option).
-            return (currentIndex + 10) > optionsLength ? optionsLength - 1 : currentIndex + 10;
+            return currentIndex + 10 > optionsLength ? optionsLength - 1 : currentIndex + 10;
         }
         if (key === KEYS.PAGE_UP) {
             // Jumps visual focus up 10 options (or to first option).
-            return (currentIndex - 10) < 0 ? 0 : currentIndex - 10;
+            return currentIndex - 10 < 0 ? 0 : currentIndex - 10;
         }
         return -1;
     }
@@ -328,12 +328,12 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         var _a, _b, _c, _d, _e;
         const options = this.getAllValidOptions();
         if (target) {
-            const currentIndex = options.findIndex((option) => option === target);
+            const currentIndex = options.findIndex(option => option === target);
             this.activeDescendant = (_b = (_a = options[currentIndex]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
         }
         else {
             // If no target is provided, find the option with tabindex="0" or the first option
-            const focusedOption = options.find((option) => option.getAttribute('tabindex') === '0');
+            const focusedOption = options.find(option => option.getAttribute('tabindex') === '0');
             this.activeDescendant = (_e = (_c = focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.id) !== null && _c !== void 0 ? _c : (_d = options[0]) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : '';
         }
     }
@@ -359,8 +359,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.displayPopover = true;
         // Find the currently selected option or the first option
         const options = this.getAllValidOptions();
-        const selectedOption = options.find((option) => option.hasAttribute('selected'));
-        const focusedOption = options.find((option) => option.getAttribute('tabindex') === '0');
+        const selectedOption = options.find(option => option.hasAttribute('selected'));
+        const focusedOption = options.find(option => option.getAttribute('tabindex') === '0');
         // Set activeDescendant to the selected/focused option or first option
         this.activeDescendant = (_b = (_a = (selectedOption || focusedOption || options[0])) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '';
     }
@@ -375,7 +375,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      */
     firstUpdated() {
         const options = this.getAllValidOptions();
-        const selectedOptionIndex = options.findIndex((option) => option === null || option === void 0 ? void 0 : option.hasAttribute('selected'));
+        const selectedOptionIndex = options.findIndex(option => option === null || option === void 0 ? void 0 : option.hasAttribute('selected'));
         if (selectedOptionIndex !== -1) {
             this.setSelectedValue(options[selectedOptionIndex]);
             this.updateTabIndexForAllOptions(options[selectedOptionIndex]);
@@ -426,8 +426,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @returns An array of `TemplateResult` representing the option elements.
      */
     getOptionsContentFromSlot() {
-        return this.getAllValidOptions()
-            .map((option) => {
+        return this.getAllValidOptions().map(option => {
             var _a, _b;
             return html `
         <option
@@ -439,7 +438,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         >
           ${option.textContent}
         </option>
-    `;
+      `;
         });
     }
     /**
@@ -470,9 +469,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         @hidden="${this.handlePopoverClose}"
         style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
       >
-           <slot 
-           @click="${this.handleOptionsClick}"></slot>
-          </mdc-popover>
+        <slot @click="${this.handleOptionsClick}"></slot>
+      </mdc-popover>
     `;
     }
     updated(changedProperties) {
@@ -503,14 +501,14 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           class="${this.disabled ? '' : 'mdc-focus-ring'}"
           role="${ROLE.COMBOBOX}"
           aria-activedescendant="${ifDefined(this.activeDescendant || undefined)}"
-          aria-controls="${(ifDefined(this.displayPopover ? 'options-popover' : undefined))}"
+          aria-controls="${ifDefined(this.displayPopover ? 'options-popover' : undefined)}"
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
           aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
           aria-expanded="${this.displayPopover ? 'true' : 'false'}"
           aria-required="${this.required ? 'true' : 'false'}"
           aria-invalid="${this.helpTextType === VALIDATION.ERROR ? 'true' : 'false'}"
         >
-      ${this.selectedIcon
+          ${this.selectedIcon
             ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`
             : nothing}
           <mdc-text
@@ -524,8 +522,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             <mdc-icon size="1" length-unit="rem" name="${this.baseIconName}"></mdc-icon>
           </div>
         </div>
-        ${this.getNativeSelect()}
-        ${this.getPopoverContent()}
+        ${this.getNativeSelect()} ${this.getPopoverContent()}
       </div>
       ${this.renderHelperText()}
     `;

package/dist/components/select/select.styles.js

@@ -79,12 +79,12 @@ const styles = css `
   }
   :host([disabled])::part(base-container),
   :host([readonly])::part(base-container),
-  :host([help-text-type="success"][disabled])::part(base-container),
-  :host([help-text-type="error"][disabled])::part(base-container),
-  :host([help-text-type="warning"][disabled])::part(base-container),
-  :host([help-text-type="success"][readonly])::part(base-container),
-  :host([help-text-type="error"][readonly])::part(base-container),
-  :host([help-text-type="warning"][readonly])::part(base-container) {
+  :host([help-text-type='success'][disabled])::part(base-container),
+  :host([help-text-type='error'][disabled])::part(base-container),
+  :host([help-text-type='warning'][disabled])::part(base-container),
+  :host([help-text-type='success'][readonly])::part(base-container),
+  :host([help-text-type='error'][readonly])::part(base-container),
+  :host([help-text-type='warning'][readonly])::part(base-container) {
     border-color: var(--mdc-select-disabled-border-color);
     background: var(--mdc-select-disabled-background-color);
   }
@@ -98,13 +98,13 @@ const styles = css `
   :host([disabled])::part(base-text) {
     color: var(--mdc-select-disabled-text-color);
   }
-  :host([help-text-type="success"])::part(base-container) {
+  :host([help-text-type='success'])::part(base-container) {
     border-color: var(--mdc-select-success-border-color);
   }
-  :host([help-text-type="error"])::part(base-container) {
+  :host([help-text-type='error'])::part(base-container) {
     border-color: var(--mdc-select-error-border-color);
   }
-  :host([help-text-type="warning"])::part(base-container) {
+  :host([help-text-type='warning'])::part(base-container) {
     border-color: var(--mdc-select-warning-border-color);
   }
 `;

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

@@ -1,7 +1,7 @@
 import { CSSResult } from 'lit';
 import { Provider } from '../../models';
-import SideNavigationContext from './sidenavigation.context';
 import type { SideNavigationVariant } from './sidenavigation.types';
+import SideNavigationContext from './sidenavigation.context';
 /**
  * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
  * typically used in layouts with persistent or collapsible sidebars.
@@ -90,11 +90,11 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
      */
     parentNavTooltipText?: string;
     /**
-    * Toggles between true and false when it's variant is flexible.
-    * @default true
-    *
-    * @internal
-    */
+     * Toggles between true and false when it's variant is flexible.
+     * @default true
+     *
+     * @internal
+     */
     private flexibleExpanded;
     /**
      * Direction of the arrow icon, if applicable.

package/dist/components/sidenavigation/sidenavigation.component.js

@@ -9,13 +9,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import styles from './sidenavigation.styles';
 import { Component, Provider } from '../../models';
-import SideNavigationContext from './sidenavigation.context';
-import { DEFAULTS, VARIANTS } from './sidenavigation.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { DIRECTIONS, DIVIDER_VARIANT, DIVIDER_ORIENTATION } from '../divider/divider.constants';
 import { ROLE } from '../../utils/roles';
+import { DEFAULTS, VARIANTS } from './sidenavigation.constants';
+import SideNavigationContext from './sidenavigation.context';
+import styles from './sidenavigation.styles';
 /**
  * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,
  * typically used in layouts with persistent or collapsible sidebars.
@@ -87,11 +87,11 @@ class SideNavigation extends Provider {
          */
         this.customerName = '';
         /**
-        * Toggles between true and false when it's variant is flexible.
-        * @default true
-        *
-        * @internal
-        */
+         * Toggles between true and false when it's variant is flexible.
+         * @default true
+         *
+         * @internal
+         */
         this.flexibleExpanded = this.variant === DEFAULTS.VARIANT;
         /**
          * Direction of the arrow icon, if applicable.
@@ -148,9 +148,9 @@ class SideNavigation extends Provider {
      * Is called on every re-render, see Provider class
      */
     updateContext() {
-        if (this.context.value.variant !== this.variant
-            || this.context.value.expanded !== this.expanded
-            || this.context.value.parentNavTooltipText !== this.parentNavTooltipText) {
+        if (this.context.value.variant !== this.variant ||
+            this.context.value.expanded !== this.expanded ||
+            this.context.value.parentNavTooltipText !== this.parentNavTooltipText) {
             this.context.value.variant = this.variant;
             this.context.value.expanded = this.expanded;
             this.context.value.parentNavTooltipText = this.parentNavTooltipText;
@@ -186,30 +186,40 @@ class SideNavigation extends Provider {
             return html ``;
         }
         return html `
-        <div part="side-navigation-container" id='side-nav-container'>
-          <div part="scrollable-section">
-            <slot name="scrollable-section"></slot>
-          </div>
-          <mdc-divider variant="gradient" part="separator"></mdc-divider>
-          <div part="fixed-section">
-              <slot name="fixed-section"></slot>
-              <div part="brand-logo-container">
-                <slot name="brand-logo"></slot>
-                ${this.expanded ? html `<mdc-text type=${TYPE.BODY_MIDSIZE_MEDIUM} tagname=${VALID_TEXT_TAGS.SPAN} 
-                part="label">${this.customerName}</mdc-text>` : nothing}
-              </div>
+      <div part="side-navigation-container" id="side-nav-container">
+        <div part="scrollable-section">
+          <slot name="scrollable-section"></slot>
+        </div>
+        <mdc-divider variant="gradient" part="separator"></mdc-divider>
+        <div part="fixed-section">
+          <slot name="fixed-section"></slot>
+          <div part="brand-logo-container">
+            <slot name="brand-logo"></slot>
+            ${this.expanded
+            ? html `<mdc-text type=${TYPE.BODY_MIDSIZE_MEDIUM} tagname=${VALID_TEXT_TAGS.SPAN} part="label"
+                  >${this.customerName}</mdc-text
+                >`
+            : nothing}
           </div>
         </div>
-        ${this.variant === VARIANTS.FLEXIBLE ? html `<mdc-divider
+      </div>
+      ${this.variant === VARIANTS.FLEXIBLE
+            ? html `<mdc-divider
             orientation=${DIVIDER_ORIENTATION.VERTICAL}
             variant=${DIVIDER_VARIANT.GRADIENT}
             arrow-direction=${this.arrowDirection}
             button-position=${DIRECTIONS.POSITIVE}
-          > <mdc-button aria-label=${(_a = this.grabberBtnAriaLabel) !== null && _a !== void 0 ? _a : ''} @click=${this.toggleSideNavigation}   
-                        aria-expanded="${!!this.expanded}" aria-controls='side-nav-container' 
-                        part="grabber-btn"></mdc-button>
-        </mdc-divider>` : nothing}
-  `;
+          >
+            <mdc-button
+              aria-label=${(_a = this.grabberBtnAriaLabel) !== null && _a !== void 0 ? _a : ''}
+              @click=${this.toggleSideNavigation}
+              aria-expanded="${!!this.expanded}"
+              aria-controls="side-nav-container"
+              part="grabber-btn"
+            ></mdc-button>
+          </mdc-divider>`
+            : nothing}
+    `;
     }
 }
 SideNavigation.styles = [...Component.styles, ...styles];

package/dist/components/sidenavigation/sidenavigation.context.js

@@ -15,9 +15,9 @@ class SideNavigationContext {
         if (!id)
             return false;
         const siblings = Array.from((_b = (_a = navItem === null || navItem === void 0 ? void 0 : navItem.parentElement) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []);
-        return siblings.some((sibling) => sibling !== navItem
-            && sibling.tagName.toLowerCase() === MENUPOPOVER_TAGNAME
-            && sibling.getAttribute('triggerid') === id);
+        return siblings.some(sibling => sibling !== navItem &&
+            sibling.tagName.toLowerCase() === MENUPOPOVER_TAGNAME &&
+            sibling.getAttribute('triggerid') === id);
     }
     getParentNavItems(navItem) {
         if (!navItem)
@@ -55,7 +55,7 @@ class SideNavigationContext {
             this.currentActiveNavItem.removeAttribute('aria-current');
             this.currentActiveNavItem.removeAttribute('active');
             const previousParents = this.getParentNavItems(this.currentActiveNavItem);
-            previousParents.forEach((parent) => {
+            previousParents.forEach(parent => {
                 parent.removeAttribute('tooltip-text');
                 parent.removeAttribute('active');
             });
@@ -67,7 +67,7 @@ class SideNavigationContext {
         navItem.setAttribute('aria-current', 'page');
         navItem.setAttribute('active', '');
         const newParents = this.getParentNavItems(navItem);
-        newParents.forEach((parent) => {
+        newParents.forEach(parent => {
             parent.setAttribute('tooltip-text', this.parentNavTooltipText || '');
             parent.setAttribute('tooltip-placement', POPOVER_PLACEMENT.BOTTOM);
             parent.setAttribute('active', '');

package/dist/components/sidenavigation/sidenavigation.styles.js

@@ -1,68 +1,68 @@
 import { css } from 'lit';
 const styles = css `
-:host {
-  --mdc-sidenavigation-expanded-width: 15rem;
-  --mdc-sidenavigation-collapsed-width: 4.5rem;
+  :host {
+    --mdc-sidenavigation-expanded-width: 15rem;
+    --mdc-sidenavigation-collapsed-width: 4.5rem;
 
-  display: flex;
-  height: 100%;
-}
+    display: flex;
+    height: 100%;
+  }
 
-:host([expanded]) {
-  width: var(--mdc-sidenavigation-expanded-width);
-}
+  :host([expanded]) {
+    width: var(--mdc-sidenavigation-expanded-width);
+  }
 
-:host(:not([expanded])) {
-  width: var(--mdc-sidenavigation-collapsed-width);
-}
+  :host(:not([expanded])) {
+    width: var(--mdc-sidenavigation-collapsed-width);
+  }
 
-:host::part(side-navigation-container) {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
+  :host::part(side-navigation-container) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
 
-:host::part(scrollable-section) {
-  flex-grow: 1;
-  overflow: auto;
-  padding: 1rem 0;
-  min-height: 0;
-}
+  :host::part(scrollable-section) {
+    flex-grow: 1;
+    overflow: auto;
+    padding: 1rem 0;
+    min-height: 0;
+  }
 
-:host::part(fixed-section) {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding-bottom: 1rem;
-  gap: 0.5rem;
-}
+  :host::part(fixed-section) {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-bottom: 1rem;
+    gap: 0.5rem;
+  }
 
-:host::part(brand-logo-container) {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 0.5rem;  
-  border-radius: 1.25rem;
-}
+  :host::part(brand-logo-container) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem;
+    border-radius: 1.25rem;
+  }
 
-:host(:dir(ltr))::part(brand-logo-container) {
-  padding: 0.5rem 0rem 0.5rem 1.5rem;
-}
+  :host(:dir(ltr))::part(brand-logo-container) {
+    padding: 0.5rem 0rem 0.5rem 1.5rem;
+  }
 
-:host(:dir(rtl))::part(brand-logo-container) {
-  padding: 0.5rem 1.5rem 0.5rem 0rem; 
-}
+  :host(:dir(rtl))::part(brand-logo-container) {
+    padding: 0.5rem 1.5rem 0.5rem 0rem;
+  }
 
-::slotted([slot="brand-logo"]) {
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  aspect-ratio: 1 / 1;
-}
+  ::slotted([slot='brand-logo']) {
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+    aspect-ratio: 1 / 1;
+  }
 
-:host::part(separator) {
-  margin-bottom: 0.75rem;
-}
+  :host::part(separator) {
+    margin-bottom: 0.75rem;
+  }
 `;
 export default [styles];

package/dist/components/skeleton/skeleton.component.js

@@ -75,10 +75,7 @@ class Skeleton extends Component {
 /**
  * Styles associated with this component.
  */
-Skeleton.styles = [
-    ...Component.styles,
-    styles,
-];
+Skeleton.styles = [...Component.styles, styles];
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)

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

@@ -8,4 +8,4 @@ declare const SKELETON_VARIANTS: {
 declare const DEFAULTS: {
     VARIANT: "rectangular";
 };
-export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS, };
+export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS };

package/dist/components/skeleton/skeleton.constants.js

@@ -9,4 +9,4 @@ const SKELETON_VARIANTS = {
 const DEFAULTS = {
     VARIANT: SKELETON_VARIANTS.RECTANGULAR,
 };
-export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS, };
+export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS };

package/dist/components/skeleton/skeleton.styles.js

@@ -11,19 +11,19 @@ const styles = css `
     width: var(--mdc-skeleton-width);
   }
 
-  :host([variant="rectangular"]) {
+  :host([variant='rectangular']) {
     border-radius: 0.25rem;
   }
 
-  :host([variant="rounded"]) {
+  :host([variant='rounded']) {
     border-radius: 0.5rem;
   }
 
-  :host([variant="circular"]) {
+  :host([variant='circular']) {
     border-radius: 50%;
   }
 
-  :host([variant="button"]) {
+  :host([variant='button']) {
     border-radius: 1.25rem;
   }
 

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

@@ -60,13 +60,13 @@ declare class Spinner extends Component {
      */
     ariaLabel: string | null;
     /**
-    * There are 2 variants of spinner: default and button. Their coloring is different.
-    * - **Standalone (Default)**: Track has a blue color.
-    * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
-    * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
-    * icon or label text.
-    * @default standalone
-    */
+     * There are 2 variants of spinner: default and button. Their coloring is different.
+     * - **Standalone (Default)**: Track has a blue color.
+     * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+     * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
+     * icon or label text.
+     * @default standalone
+     */
     variant: SpinnerVariant;
     updated(changedProperties: Map<string, any>): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/spinner/spinner.component.js

@@ -9,10 +9,10 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import styles from './spinner.styles';
 import { Component } from '../../models';
-import { DEFAULTS } from './spinner.constants';
 import { ROLE } from '../../utils/roles';
+import styles from './spinner.styles';
+import { DEFAULTS } from './spinner.constants';
 /**
  * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning
  * it's best for cases where the  progress or duration of a process is variable or unknown.
@@ -74,13 +74,13 @@ class Spinner extends Component {
          */
         this.ariaLabel = null;
         /**
-        * There are 2 variants of spinner: default and button. Their coloring is different.
-        * - **Standalone (Default)**: Track has a blue color.
-        * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
-        * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
-        * icon or label text.
-        * @default standalone
-        */
+         * There are 2 variants of spinner: default and button. Their coloring is different.
+         * - **Standalone (Default)**: Track has a blue color.
+         * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.
+         * To ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s
+         * icon or label text.
+         * @default standalone
+         */
         this.variant = DEFAULTS.VARIANT;
     }
     updated(changedProperties) {