@momentum-design/components 0.84.3 → 0.84.4

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

@@ -11,12 +11,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './radio.styles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
+import styles from './radio.styles';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
  * These are often used in forms, settings, and selection in lists.
@@ -48,30 +48,27 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     constructor() {
         super(...arguments);
         /**
-        * Determines whether the radio is selected or unselected.
-        *
-        * @default false
-        */
+         * Determines whether the radio is selected or unselected.
+         *
+         * @default false
+         */
         this.checked = false;
         /**
-        * Determines whether the radio is read-only.
-        *
-        * @default false
-        */
+         * Determines whether the radio is read-only.
+         *
+         * @default false
+         */
         this.readonly = false;
         /**
-       * Automatically focus on the element when the page loads.
-       * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-       * @default false
-       */
+         * Automatically focus on the element when the page loads.
+         * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+         * @default false
+         */
         this.autofocus = false;
         this.renderLabelAndHelperText = () => {
             if (!this.label)
                 return nothing;
-            return html `<div class="mdc-radio__label-container">
-      ${this.renderLabel()}
-      ${this.renderHelperText()}
-    </div>`;
+            return html `<div class="mdc-radio__label-container">${this.renderLabel()} ${this.renderHelperText()}</div>`;
         };
     }
     connectedCallback() {
@@ -83,16 +80,16 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.updateTabIndex();
     }
     /**
-   * Returns all radios within the same group (name).
-   */
+     * Returns all radios within the same group (name).
+     */
     getAllRadiosWithinSameGroup() {
         return Array.from(document.querySelectorAll(`mdc-radio[name="${this.name}"]`));
     }
     /**
-   * 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
-   */
+     * 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
+     */
     dispatchChangeEvent(event) {
         const EventConstructor = event.constructor;
         this.dispatchEvent(new EventConstructor(event.type, event));
@@ -100,12 +97,14 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     /** @internal */
     formResetCallback() {
         const radios = this.getAllRadiosWithinSameGroup();
-        radios.forEach((radio) => {
+        radios.forEach(radio => {
             radio.checked = false;
         });
-        this.updateComplete.then(() => {
+        this.updateComplete
+            .then(() => {
             this.setActualFormValue();
-        }).catch((error) => {
+        })
+            .catch(error => {
             if (this.onerror) {
                 this.onerror(error);
             }
@@ -118,8 +117,8 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     /**
-   * @internal
-   */
+     * @internal
+     */
     setComponentValidity(isValid) {
         if (isValid) {
             this.internals.setValidity({});
@@ -141,21 +140,23 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @param isValid - Boolean value to set the validity of the group
      */
     setGroupValidity(radios, isValid) {
-        this.updateComplete.then(() => {
-            radios.forEach((radio) => {
+        this.updateComplete
+            .then(() => {
+            radios.forEach(radio => {
                 radio.setComponentValidity(isValid);
             });
-        }).catch((error) => {
+        })
+            .catch(error => {
             if (this.onerror) {
                 this.onerror(error);
             }
         });
     }
     /**
-   * Updates the form value to reflect the current state of the radio.
-   * If checked, the value is set to the user-provided value.
-   * If unchecked, the value is set to null.
-   */
+     * Updates the form value to reflect the current state of the radio.
+     * If checked, the value is set to the user-provided value.
+     * If unchecked, the value is set to null.
+     */
     setActualFormValue() {
         let actualValue = '';
         if (this.checked) {
@@ -169,28 +170,28 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             this.setGroupValidity(radios, true);
         }
         else {
-            const anyRequired = radios.some((r) => r.required);
-            const anyChecked = !!radios.find((r) => r.checked);
+            const anyRequired = radios.some(r => r.required);
+            const anyChecked = !!radios.find(r => r.checked);
             const isInvalid = anyRequired && !anyChecked;
             this.setGroupValidity(radios, !isInvalid);
         }
         this.internals.setFormValue(actualValue);
     }
     /**
-   * Handles the change event on the radio element.
-   * This will toggle the state of the radio element.
-   * Dispatches the change event.
-   */
+     * Handles the change event on the radio element.
+     * This will toggle the state of the radio element.
+     * Dispatches the change event.
+     */
     handleChange(event) {
         var _a;
         if (this.disabled || this.readonly)
             return;
         const radios = this.getAllRadiosWithinSameGroup();
-        radios.forEach((radio) => {
+        radios.forEach(radio => {
             var _a;
             /**
-              *  Uncheck all radios in the same group (name)
-            */
+             *  Uncheck all radios in the same group (name)
+             */
             const radioElement = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (radioElement) {
                 radio.checked = false;
@@ -205,27 +206,27 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.dispatchChangeEvent(event);
     }
     /**
-   * Updates the state of the radio button at the specified index within the enabled radios.
-   * Focuses the radio button and triggers the change event if the radio button is not read-only.
-   *
-   * @param enabledRadios - An array of enabled radio buttons within the same group.
-   * @param index - The index of the radio button to be updated within the enabled radios array.
-   * @param event - The event that triggered the update.
-   */
+     * Updates the state of the radio button at the specified index within the enabled radios.
+     * Focuses the radio button and triggers the change event if the radio button is not read-only.
+     *
+     * @param enabledRadios - An array of enabled radio buttons within the same group.
+     * @param index - The index of the radio button to be updated within the enabled radios array.
+     * @param event - The event that triggered the update.
+     */
     updateRadio(enabledRadios, index, event) {
         var _a, _b;
         (_b = (_a = enabledRadios[index].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
         enabledRadios[index].handleChange(event);
     }
     /**
-   * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
-   */
+     * Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element.
+     */
     handleKeyDown(event) {
         var _a;
         if (this.disabled)
             return;
         const radios = this.getAllRadiosWithinSameGroup();
-        const enabledRadios = radios.filter((radio) => !radio.disabled);
+        const enabledRadios = radios.filter(radio => !radio.disabled);
         const currentIndex = enabledRadios.indexOf(this);
         if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
             // Move focus to the next radio
@@ -246,15 +247,15 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         }
     }
     /**
-   * Update tab index for all radios in the same group (name)
-   * If any radio group is checked, it will have a tab index of 0
-   * If no radio group is checked, the first enabled radio will have a tab index of 0
-   */
+     * Update tab index for all radios in the same group (name)
+     * If any radio group is checked, it will have a tab index of 0
+     * If no radio group is checked, the first enabled radio will have a tab index of 0
+     */
     updateTabIndex() {
         const radios = this.getAllRadiosWithinSameGroup();
-        const checked = radios.find((radio) => radio.checked);
-        const firstEnabledRadio = radios.find((radio) => !radio.disabled);
-        radios.forEach((radio) => {
+        const checked = radios.find(radio => radio.checked);
+        const firstEnabledRadio = radios.find(radio => !radio.disabled);
+        radios.forEach(radio => {
             var _a;
             const inputElement = (_a = radio.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (inputElement) {
@@ -277,32 +278,32 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     render() {
         var _a;
         return html `
-        <mdc-staticradio
+      <mdc-staticradio
         class="mdc-focus-ring"
         ?checked="${this.checked}"
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"
-        >
-          <input
-            id="${this.id}"
-            type="radio"
-            role="${ROLE.RADIO}"
-            ?autofocus="${this.autofocus}"
-            name="${ifDefined(this.name)}"
-            value="${ifDefined(this.value)}"
-            ?required="${this.required}"
-            @change=${this.handleChange}
-            @keydown=${this.handleKeyDown}
-            ?checked=${this.checked}
-            ?readonly=${this.readonly}
-            ?disabled=${this.disabled}
-            class="mdc-radio__input"
-            aria-checked="${this.checked}"
-            aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
-            aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-          />
-        </mdc-staticradio>
-        ${this.renderLabelAndHelperText()}
+      >
+        <input
+          id="${this.id}"
+          type="radio"
+          role="${ROLE.RADIO}"
+          ?autofocus="${this.autofocus}"
+          name="${ifDefined(this.name)}"
+          value="${ifDefined(this.value)}"
+          ?required="${this.required}"
+          @change=${this.handleChange}
+          @keydown=${this.handleKeyDown}
+          ?checked=${this.checked}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          class="mdc-radio__input"
+          aria-checked="${this.checked}"
+          aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
+          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        />
+      </mdc-staticradio>
+      ${this.renderLabelAndHelperText()}
     `;
     }
 }

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

@@ -1,91 +1,93 @@
 import { css } from 'lit';
 import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-  :host{
-    display: flex;
-    flex-direction: row;
-    align-items: start;
-    gap: 0.5rem;
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      display: flex;
+      flex-direction: row;
+      align-items: start;
+      gap: 0.5rem;
 
-    --mdc-radio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-radio-control-inactive-hover: var(--mds-color-theme-control-inactive-hover);
-    --mdc-radio-control-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
-    --mdc-radio-control-active-hover-color: var(--mds-color-theme-control-active-hover);
-    --mdc-radio-control-active-pressed-color: var(--mds-color-theme-control-active-pressed);
-    --mdc-radio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
-    --mdc-radio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
-    --mdc-radio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-  }
+      --mdc-radio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-radio-control-inactive-hover: var(--mds-color-theme-control-inactive-hover);
+      --mdc-radio-control-inactive-pressed-color: var(--mds-color-theme-control-inactive-pressed);
+      --mdc-radio-control-active-hover-color: var(--mds-color-theme-control-active-hover);
+      --mdc-radio-control-active-pressed-color: var(--mds-color-theme-control-active-pressed);
+      --mdc-radio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
+      --mdc-radio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
+      --mdc-radio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    }
 
+    :host(:hover)::part(radio-icon) {
+      background-color: var(--mdc-radio-control-inactive-hover);
+    }
 
-  :host(:hover)::part(radio-icon) {
-    background-color: var(--mdc-radio-control-inactive-hover);
-  }
+    :host(:active)::part(radio-icon) {
+      background-color: var(--mdc-radio-control-inactive-pressed-color);
+    }
 
-  :host(:active)::part(radio-icon) {
-    background-color: var(--mdc-radio-control-inactive-pressed-color);
-  }
+    :host([checked]:hover)::part(radio-icon) {
+      border-color: var(--mdc-radio-control-active-hover-color);
+      background-color: var(--mdc-radio-control-active-hover-color);
+    }
 
-  :host([checked]:hover)::part(radio-icon) {
-    border-color: var(--mdc-radio-control-active-hover-color);
-    background-color: var(--mdc-radio-control-active-hover-color);
-  }
+    :host([checked]:active)::part(radio-icon) {
+      border-color: var(--mdc-radio-control-active-pressed-color);
+      background-color: var(--mdc-radio-control-active-pressed-color);
+    }
 
-  :host([checked]:active)::part(radio-icon) {
-    border-color: var(--mdc-radio-control-active-pressed-color);
-    background-color: var(--mdc-radio-control-active-pressed-color);
-  }
+    :host([readonly]:hover)::part(radio-icon) {
+      border-color: var(--mdc-staticradio-normal-border-color);
+      background-color: var(--mdc-staticradio-control-inactive-color);
+    }
 
-  :host([readonly]:hover)::part(radio-icon) {
-    border-color: var(--mdc-staticradio-normal-border-color);
-    background-color: var(--mdc-staticradio-control-inactive-color);
-  }
+    :host([disabled]:hover)::part(radio-icon),
+    :host([disabled][readonly]:hover)::part(radio-icon) {
+      border-color: var(--mdc-radio-disabled-border-color);
+      background-color: var(--mdc-radio-control-inactive-disabled-background);
+    }
 
-  :host([disabled]:hover)::part(radio-icon),
-  :host([disabled][readonly]:hover)::part(radio-icon) {
-    border-color: var(--mdc-radio-disabled-border-color);
-    background-color: var(--mdc-radio-control-inactive-disabled-background);
-  }
+    :host([disabled][checked]:hover)::part(radio-icon) {
+      background-color: var(--mdc-radio-control-active-disabled-background);
+    }
 
-  :host([disabled][checked]:hover)::part(radio-icon){
-    background-color: var(--mdc-radio-control-active-disabled-background);
-  }
+    :host([readonly]) .mdc-radio__input,
+    :host([disabled]) .mdc-radio__input,
+    :host([disabled]) .mdc-label,
+    :host([readonly]) .mdc-label {
+      cursor: default;
+    }
 
-  :host([readonly]) .mdc-radio__input,
-  :host([disabled]) .mdc-radio__input,
-  :host([disabled]) .mdc-label,
-  :host([readonly]) .mdc-label{
-    cursor: default;
-  }
+    .mdc-label {
+      cursor: pointer;
+    }
 
-  .mdc-label {
-    cursor: pointer;
-  }
+    :host([disabled]) .mdc-radio__label-text,
+    :host([disabled]) .mdc-radio__help-text {
+      color: var(--mdc-radio-text-disabled-color);
+    }
 
-  :host([disabled]) .mdc-radio__label-text,
-  :host([disabled]) .mdc-radio__help-text {
-    color: var(--mdc-radio-text-disabled-color);
-  }
+    .mdc-radio__input {
+      position: absolute;
+      opacity: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      z-index: 2;
+    }
 
-  .mdc-radio__input{
-    position: absolute;
-    opacity: 0;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    z-index: 2;
-  }
-
-  .mdc-radio__label-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 0.25rem;
-  }
-  :host::part(required-indicator){
-    display: none;
-  }
-
-`, ...hostFocusRingStyles(true)];
+    .mdc-radio__label-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 0.25rem;
+    }
+    :host::part(required-indicator) {
+      display: none;
+    }
+  `,
+    ...hostFocusRingStyles(true),
+];
 export default styles;

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

@@ -40,7 +40,7 @@ class RadioGroup extends FormfieldGroup {
      */
     firstUpdated() {
         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) => {
+        (_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.required)
                 radio.setAttribute('required', this.required.toString());

package/dist/components/screenreaderannouncer/screenreaderannouncer.component.js

@@ -130,10 +130,10 @@ class ScreenreaderAnnouncer extends Component {
      * Clears all timeouts and removes all announcements from the screen reader.
      */
     clearTimeOutsAndAnnouncements() {
-        this.timeOutIds.forEach((timeOutId) => {
+        this.timeOutIds.forEach(timeOutId => {
             window.clearTimeout(timeOutId);
         });
-        this.ariaLiveAnnouncementIds.forEach((announcementId) => {
+        this.ariaLiveAnnouncementIds.forEach(announcementId => {
             var _a;
             (_a = document.getElementById(announcementId)) === null || _a === void 0 ? void 0 : _a.remove();
         });

package/dist/components/screenreaderannouncer/screenreaderannouncer.styles.js

@@ -1,8 +1,10 @@
 import { css } from 'lit';
-const styles = [css `
-  :host {
-    display: none;
-    visibility: hidden;
-  }
-`];
+const styles = [
+    css `
+    :host {
+      display: none;
+      visibility: hidden;
+    }
+  `,
+];
 export default styles;

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

@@ -10,8 +10,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map.js';
-import styles from './searchfield.styles';
 import Input from '../input/input.component';
+import styles from './searchfield.styles';
 import { DEFAULTS } from './searchfield.constants';
 /**
  * searchfield component is used as an input field for search functionality.
@@ -67,7 +67,7 @@ class Searchfield extends Input {
         var _a;
         this.hasInputChips = !!((_a = this.inputChips) === null || _a === void 0 ? void 0 : _a.length);
         if (this.inputChips) {
-            this.inputChips.forEach((element) => {
+            this.inputChips.forEach(element => {
                 if (!element.matches(DEFAULTS.INPUT_CHIP_TAG)) {
                     element.remove();
                 }
@@ -90,30 +90,36 @@ class Searchfield extends Input {
     clearInputText() {
         var _a;
         super.clearInputText();
-        (_a = this.inputChips) === null || _a === void 0 ? void 0 : _a.forEach((element) => {
+        (_a = this.inputChips) === null || _a === void 0 ? void 0 : _a.forEach(element => {
             // Dispatch the custom 'remove' event from inputChip
             element.dispatchEvent(new CustomEvent('remove', { bubbles: true, composed: true }));
         });
     }
     render() {
         return html `
-    ${this.renderLabelElement()}
-    <div class="${classMap({
+      ${this.renderLabelElement()}
+      <div
+        class="${classMap({
             'input-container': true,
             'mdc-focus-ring': this.isInputFocused,
-        })}" part="input-container">
-    ${this.renderLeadingIcon()}
-      <div part='scrollable-container' tabindex='-1'>
-      <div part="filters-container" 
-      @click=${() => this.inputElement.focus()} 
-      @keydown=${(e) => e.key === 'Enter' ? this.inputElement.focus() : null} 
-      @keyup=${(e) => e.key === ' ' ? this.inputElement.focus() : null}>
-        <slot name="filters" @slotchange=${this.renderInputChips}></slot></div>
-      ${this.renderInputElement(DEFAULTS.TYPE, this.hasInputChips)}
+        })}"
+        part="input-container"
+      >
+        ${this.renderLeadingIcon()}
+        <div part="scrollable-container" tabindex="-1">
+          <div
+            part="filters-container"
+            @click=${() => this.inputElement.focus()}
+            @keydown=${(e) => (e.key === 'Enter' ? this.inputElement.focus() : null)}
+            @keyup=${(e) => (e.key === ' ' ? this.inputElement.focus() : null)}
+          >
+            <slot name="filters" @slotchange=${this.renderInputChips}></slot>
+          </div>
+          ${this.renderInputElement(DEFAULTS.TYPE, this.hasInputChips)}
+        </div>
+        ${this.renderTrailingButton(this.hasInputChips)}
       </div>
-      ${this.renderTrailingButton(this.hasInputChips)}
-    </div>
-  `;
+    `;
     }
 }
 Searchfield.styles = [...Input.styles, ...styles];

package/dist/components/searchfield/searchfield.styles.js

@@ -1,23 +1,22 @@
 import { css } from 'lit';
 const styles = css `
+  :host::part(filters-container) {
+    display: flex;
+    gap: 0.25rem;
+    margin: 0.25rem 0;
+  }
 
-:host::part(filters-container){
-  display: flex;
-  gap: 0.25rem;
-  margin: 0.25rem 0;
-}
-
-.input {
-  white-space: nowrap;
-  min-width: 90%;
-}
+  .input {
+    white-space: nowrap;
+    min-width: 90%;
+  }
 
-.input::-webkit-search-cancel-button {
+  .input::-webkit-search-cancel-button {
     -webkit-appearance: none;
     pointer-events: none;
   }
 
-  :host::part(scrollable-container){
+  :host::part(scrollable-container) {
     display: flex;
     flex-grow: 1;
     overflow-x: scroll;
@@ -25,6 +24,5 @@ const styles = css `
     position: relative;
     scrollbar-width: none;
   }
-
 `;
 export default [styles];