@momentum-design/components 0.84.3 → 0.84.4

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

@@ -10,13 +10,13 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property, query } from 'lit/decorators.js';
-import styles from './textarea.styles';
 import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 import { AUTO_CAPITALIZE } from '../input/input.constants';
-import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { AUTO_COMPLETE, WRAP, DEFAULTS } from './textarea.constants';
+import styles from './textarea.styles';
 /**
  * mdc-textarea component, which is used to get the multi-line text input from the user.
  * It contains:
@@ -114,13 +114,15 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         super.connectedCallback();
         // Set the default value to the textarea field if the value is set through the text content directly
         this.value = ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || this.value;
-        this.updateComplete.then(() => {
+        this.updateComplete
+            .then(() => {
             if (this.textarea) {
                 this.textarea.checkValidity();
                 this.setTextareaValidity();
                 this.internals.setFormValue(this.textarea.value);
             }
-        }).catch((error) => {
+        })
+            .catch(error => {
             if (this.onerror) {
                 this.onerror(error);
             }
@@ -130,10 +132,10 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         if (this.required && this.validationMessage && this.value === '') {
             this.textarea.setCustomValidity(this.validationMessage);
         }
-        else if (this.maxCharacterLimit
-            && this.value.length > this.maxCharacterLimit
-            && this.helpTextType === VALIDATION.ERROR
-            && this.helpText) {
+        else if (this.maxCharacterLimit &&
+            this.value.length > this.maxCharacterLimit &&
+            this.helpTextType === VALIDATION.ERROR &&
+            this.helpText) {
             // Set custom validity if the character limit is exceeded to stop form submission
             // helptext and helptexttype will be set by the consumers.
             this.textarea.setCustomValidity(this.helpText);
@@ -153,14 +155,16 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         this.value = state;
     }
     /**
-   * 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() {
-        this.updateComplete.then(() => {
+        this.updateComplete
+            .then(() => {
             this.setTextareaValidity();
-        }).catch((error) => {
+        })
+            .catch(error => {
             if (this.onerror) {
                 this.onerror(error);
             }
@@ -174,24 +178,22 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         }
     }
     /**
-   * 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, old, value) {
         super.attributeChangedCallback(name, old, value);
-        const validationRelatedAttributes = [
-            'maxlength',
-            'minlength',
-            'required',
-        ];
+        const validationRelatedAttributes = ['maxlength', 'minlength', 'required'];
         if (validationRelatedAttributes.includes(name)) {
-            this.updateComplete.then(() => {
+            this.updateComplete
+                .then(() => {
                 this.setTextareaValidity();
-            }).catch((error) => {
+            })
+                .catch(error => {
                 if (this.onerror) {
                     this.onerror(error);
                 }
@@ -199,9 +201,9 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         }
     }
     /**
-   * Dispatches the character overflow state change event.
-   * @returns void
-   */
+     * Dispatches the character overflow state change event.
+     * @returns void
+     */
     dispatchCharacterOverflowStateChangeEvent() {
         this.dispatchEvent(new CustomEvent('limitexceeded', {
             detail: {
@@ -217,7 +219,7 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
      * Handles the character overflow state change.
      * Dispatches the character overflow state change event if the character limit is exceeded or restored.
      * @returns void
-    */
+     */
     handleCharacterOverflowStateChange() {
         if (this.maxCharacterLimit) {
             if (this.value.length > this.maxCharacterLimit && !this.characterLimitExceedingFired) {
@@ -231,24 +233,24 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         }
     }
     /**
-   * 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
+     */
     updateValue() {
         this.value = this.textarea.value;
         this.internals.setFormValue(this.textarea.value);
     }
     /**
-   * 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.
+     */
     onChange(event) {
         this.updateValue();
         const EventConstructor = event.constructor;
@@ -259,12 +261,8 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
             return nothing;
         }
         return html `
-      <mdc-text
-        part="character-counter"
-        tagname="span"
-        type=${DEFAULTS.CHARACTER_COUNTER_TYPE}
-      >
-      ${this.value.length < 10 ? `0${this.value.length}` : this.value.length}/${this.maxCharacterLimit}
+      <mdc-text part="character-counter" tagname="span" type=${DEFAULTS.CHARACTER_COUNTER_TYPE}>
+        ${this.value.length < 10 ? `0${this.value.length}` : this.value.length}/${this.maxCharacterLimit}
       </mdc-text>
     `;
     }
@@ -272,12 +270,7 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
         if (!this.helpText && !this.maxCharacterLimit) {
             return nothing;
         }
-        return html `
-        <div part="textarea-footer">
-          ${this.renderHelperText()}
-          ${this.renderCharacterCounter()}
-        </div>
-      `;
+        return html ` <div part="textarea-footer">${this.renderHelperText()} ${this.renderCharacterCounter()}</div> `;
     }
     render() {
         var _a;
@@ -286,7 +279,7 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
       <div class="textarea-container mdc-focus-ring" part="textarea-container">
         <textarea
           aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
-          part='textarea'
+          part="textarea"
           id="${this.id}"
           name="${this.name}"
           .value="${this.value}"
@@ -308,9 +301,9 @@ class Textarea extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
           aria-describedby="${ifDefined(this.helpText ? FORMFIELD_DEFAULTS.HELPER_TEXT_ID : '')}"
           aria-invalid="${this.helpTextType === 'error' ? 'true' : 'false'}"
         ></textarea>
-        </div>
-        ${this.renderTextareaFooter()}
-        `;
+      </div>
+      ${this.renderTextareaFooter()}
+    `;
     }
 }
 Textarea.styles = [...FormfieldWrapper.styles, ...styles];

package/dist/components/textarea/textarea.styles.js

@@ -1,125 +1,126 @@
 import { css } from 'lit';
 import { hostFocusRingStyles } from '../../utils/styles';
-const styles = [css `
-  :host {
-    --mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
-    --mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
-    --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-input-disabled);
-    --mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
-    --mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
-    --mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
-    --mdc-textarea-text-secondary-normal : var(--mds-color-theme-text-secondary-normal);
-    --mdc-textarea-error-border-color: var(--mds-color-theme-text-error-normal);
-    --mdc-textarea-warning-border-color: var(--mds-color-theme-text-warning-normal);
-    --mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
-    --mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
-    --mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
-    --mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-ghost);
-    --mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
-    --mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
-    --mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
-  }
-
-  :host([disabled])::part(textarea),
-  :host([disabled])::part(textarea)::placeholder{
-    color: var(--mdc-input-disabled-text-color);
-  }
-
-  :host([disabled])::part(textarea-container),
-  :host([readonly])::part(textarea-container){
-    border-color: var(--mdc-textarea-disabled-border-color);
-    background: var(--mdc-textarea-disabled-background-color);
-  }
-
-  :host([disabled][help-text-type="default"])::part(textarea-container),
-  :host([disabled][help-text-type="success"])::part(textarea-container),
-  :host([disabled][help-text-type="warning"])::part(textarea-container),
-  :host([disabled][help-text-type="error"])::part(textarea-container),
-  :host([disabled][help-text-type="priority"])::part(textarea-container){
-    border-color: var(--mdc-textarea-disabled-border-color);
-  }
-
-  :host::part(textarea){
-    min-height: 6.25rem;
-    color: var(--mdc-textarea-text-color);
-    font-family: inherit;
-    font-size: var(--mdc-textarea-text-font-size);
-    line-height: var(--mdc-textarea-text-line-height);
-    background-color: var(--mdc-textarea-background-color);
-    resize: none;
-    border: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-
-  :host::part(textarea-container) {
-    display: flex;
-    border-radius: 0.5rem;
-    border: 0.0625rem solid var(--mdc-textarea-border-color);
-    overflow: hidden;
-    padding: 0.375rem 0.25rem 0.25rem 0.75rem;
-  }
-
-  :host(:dir(rtl))::part(textarea-container){
-    padding: 0.375rem 0.75rem 0.25rem 0.25rem;
-  }
-
-  :host(:not([disabled]))::part(textarea-container):hover{
-    background-color: var(--mdc-textarea-hover-background-color);
-  }
-
-  :host(:not([disabled]))::part(textarea-container):active, 
-  :host(:not([disabled]))::part(textarea-container):focus-within{
-    background-color: var(--mdc-textarea-focused-background-color);
-    border-color:  var(--mdc-textarea-focused-border-color);
-  }
-
-  :host::part(textarea-footer) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  .textarea::placeholder{
-    color: var(--mdc-textarea-text-secondary-normal);
-  }
-
-  :host::part(character-counter){
-    margin-left: auto;
-    color: var(--mdc-textarea-text-secondary-normal);
-  }
-
-  :host([help-text-type="error"])::part(character-counter) {
-    color: var(--mdc-textarea-error-border-color);
-  }
-
-  :host([disabled])::part(character-counter){
-    color: var(--mds-color-theme-text-primary-disabled);
-  }
-
-  :host([help-text-type="error"])::part(textarea-container),
-  :host([help-text-type="error"])::part(textarea-container):focus-within {
-    border-color: var(--mdc-textarea-error-border-color);
-  }
-  :host([help-text-type="warning"])::part(textarea-container),
-  :host([help-text-type="warning"])::part(textarea-container):focus-within {
-    border-color: var(--mdc-textarea-warning-border-color);
-  }
-  :host([help-text-type="success"])::part(textarea-container),
-  :host([help-text-type="success"])::part(textarea-container):focus-within {
-    border-color: var(--mdc-textarea-success-border-color);
-  }
-  :host([help-text-type="priority"])::part(textarea-container),
-  :host([help-text-type="priority"])::part(textarea-container):focus-within {
-    border-color: var(--mdc-textarea-primary-border-color);
-  }
-
-  .hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-`, ...hostFocusRingStyles(true)];
+const styles = [
+    css `
+    :host {
+      --mdc-textarea-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+      --mdc-textarea-disabled-text-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-textarea-disabled-background-color: var(--mds-color-theme-background-input-disabled);
+      --mdc-textarea-text-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-textarea-background-color: var(--mds-color-theme-background-primary-ghost);
+      --mdc-textarea-border-color: var(--mds-color-theme-outline-input-normal);
+      --mdc-textarea-text-secondary-normal: var(--mds-color-theme-text-secondary-normal);
+      --mdc-textarea-error-border-color: var(--mds-color-theme-text-error-normal);
+      --mdc-textarea-warning-border-color: var(--mds-color-theme-text-warning-normal);
+      --mdc-textarea-success-border-color: var(--mds-color-theme-text-success-normal);
+      --mdc-textarea-primary-border-color: var(--mds-color-theme-text-accent-normal);
+      --mdc-textarea-hover-background-color: var(--mds-color-theme-background-primary-hover);
+      --mdc-textarea-focused-background-color: var(--mds-color-theme-background-primary-ghost);
+      --mdc-textarea-focused-border-color: var(--mds-color-theme-outline-input-active);
+      --mdc-textarea-text-font-size: var(--mds-font-size-body-midsize);
+      --mdc-textarea-text-line-height: var(--mds-font-lineheight-body-midsize);
+    }
+
+    :host([disabled])::part(textarea),
+    :host([disabled])::part(textarea)::placeholder {
+      color: var(--mdc-input-disabled-text-color);
+    }
+
+    :host([disabled])::part(textarea-container),
+    :host([readonly])::part(textarea-container) {
+      border-color: var(--mdc-textarea-disabled-border-color);
+      background: var(--mdc-textarea-disabled-background-color);
+    }
+
+    :host([disabled][help-text-type='default'])::part(textarea-container),
+    :host([disabled][help-text-type='success'])::part(textarea-container),
+    :host([disabled][help-text-type='warning'])::part(textarea-container),
+    :host([disabled][help-text-type='error'])::part(textarea-container),
+    :host([disabled][help-text-type='priority'])::part(textarea-container) {
+      border-color: var(--mdc-textarea-disabled-border-color);
+    }
+
+    :host::part(textarea) {
+      min-height: 6.25rem;
+      color: var(--mdc-textarea-text-color);
+      font-family: inherit;
+      font-size: var(--mdc-textarea-text-font-size);
+      line-height: var(--mdc-textarea-text-line-height);
+      background-color: var(--mdc-textarea-background-color);
+      resize: none;
+      border: none;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    :host::part(textarea-container) {
+      display: flex;
+      border-radius: 0.5rem;
+      border: 0.0625rem solid var(--mdc-textarea-border-color);
+      overflow: hidden;
+      padding: 0.375rem 0.25rem 0.25rem 0.75rem;
+    }
+
+    :host(:dir(rtl))::part(textarea-container) {
+      padding: 0.375rem 0.75rem 0.25rem 0.25rem;
+    }
+
+    :host(:not([disabled]))::part(textarea-container):hover {
+      background-color: var(--mdc-textarea-hover-background-color);
+    }
+
+    :host(:not([disabled]))::part(textarea-container):active,
+    :host(:not([disabled]))::part(textarea-container):focus-within {
+      background-color: var(--mdc-textarea-focused-background-color);
+      border-color: var(--mdc-textarea-focused-border-color);
+    }
+
+    :host::part(textarea-footer) {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+
+    .textarea::placeholder {
+      color: var(--mdc-textarea-text-secondary-normal);
+    }
+
+    :host::part(character-counter) {
+      margin-left: auto;
+      color: var(--mdc-textarea-text-secondary-normal);
+    }
+
+    :host([help-text-type='error'])::part(character-counter) {
+      color: var(--mdc-textarea-error-border-color);
+    }
+
+    :host([disabled])::part(character-counter) {
+      color: var(--mds-color-theme-text-primary-disabled);
+    }
+
+    :host([help-text-type='error'])::part(textarea-container),
+    :host([help-text-type='error'])::part(textarea-container):focus-within {
+      border-color: var(--mdc-textarea-error-border-color);
+    }
+    :host([help-text-type='warning'])::part(textarea-container),
+    :host([help-text-type='warning'])::part(textarea-container):focus-within {
+      border-color: var(--mdc-textarea-warning-border-color);
+    }
+    :host([help-text-type='success'])::part(textarea-container),
+    :host([help-text-type='success'])::part(textarea-container):focus-within {
+      border-color: var(--mdc-textarea-success-border-color);
+    }
+    :host([help-text-type='priority'])::part(textarea-container),
+    :host([help-text-type='priority'])::part(textarea-container):focus-within {
+      border-color: var(--mdc-textarea-primary-border-color);
+    }
+
+    .hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+  `,
+    ...hostFocusRingStyles(true),
+];
 export default styles;

package/dist/components/themeprovider/themeprovider.component.js

@@ -8,8 +8,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { property, state } from 'lit/decorators.js';
-import { DEFAULTS } from './themeprovider.constants';
 import { Provider } from '../../models';
+import { DEFAULTS } from './themeprovider.constants';
 import ThemeProviderContext from './themeprovider.context';
 import styles from './themeprovider.styles';
 /**

package/dist/components/themeprovider/themeprovider.styles.js

@@ -7,14 +7,14 @@ const styles = css `
     /* adjusting Inter's letter spacing to better match the old CiscoSans */
     --mdc-themeprovider-letter-spacing-adjustment: -0.25px;
     /* Adjusting font feature settings for accessibility reasons */
-    --mdc-themeprovider-font-feature-settings: "ss02" on;
+    --mdc-themeprovider-font-feature-settings: 'ss02' on;
 
     /* Custom scrollbar variables */
     --mdc-themeprovider-scrollbar-track-color: var(--mds-color-theme-background-secondary-normal);
     --mdc-themeprovider-scrollbar-thumb-color: var(--mds-color-theme-scrollbar-button-normal);
     --mdc-themeprovider-scrollbar-thumb-hover-color: var(--mds-color-theme-scrollbar-button-hover);
     --mdc-themeprovider-scrollbar-thumb-active-color: var(--mds-color-theme-scrollbar-button-pressed);
-    
+
     color: var(--mdc-themeprovider-color-default);
     font-family: var(--mdc-themeprovider-font-family);
     font-weight: var(--mdc-themeprovider-font-weight);
@@ -22,8 +22,8 @@ const styles = css `
 
     font-feature-settings: var(--mdc-themeprovider-font-feature-settings);
   }
-   
-/** Scrollbar Theme for Chrome, Edge, and Firefox. This has limited support on other browsers.
+
+  /** Scrollbar Theme for Chrome, Edge, and Firefox. This has limited support on other browsers.
     https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color for more details */
   * {
     scrollbar-color: var(--mdc-themeprovider-scrollbar-thumb-color) var(--mdc-themeprovider-scrollbar-track-color);

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

@@ -40,9 +40,9 @@ declare const Toggle_base: import("../../utils/mixins/index.types").Constructor<
  */
 declare class Toggle extends Toggle_base implements AssociatedFormControl {
     /**
-    * Determines whether the toggle is active or inactive.
-    * @default false
-    */
+     * Determines whether the toggle is active or inactive.
+     * @default false
+     */
     checked: boolean;
     /**
      * Determines toggle size in rem (height is specified here).
@@ -52,55 +52,55 @@ declare class Toggle extends Toggle_base implements AssociatedFormControl {
      */
     size: ToggleSize;
     /**
-   * 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
+     */
     autofocus: boolean;
     connectedCallback(): void;
     /** @internal
-   * Resets the checkbox to its initial state.
-   * The checked property is set to false.
-   */
+     * Resets the checkbox to its initial state.
+     * The checked property is set to false.
+     */
     formResetCallback(): void;
     /** @internal */
     formStateRestoreCallback(state: string): void;
     /**
-   * Manages the required state of the checkbox.
-   * 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.
-   */
+     * Manages the required state of the checkbox.
+     * 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;
     /**
-   * Updates the form value to reflect the current state of the toggle.
-   * If toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.
-   * If toggle is switched off, the value is set to null.
-   */
+     * Updates the form value to reflect the current state of the toggle.
+     * If toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.
+     * If toggle is switched off, the value is set to null.
+     */
     private setFormValue;
     /**
-   * Toggles the state of the toggle element.
-   * If the element is not disabled, then the checked property is toggled.
-   */
+     * Toggles the state of the toggle element.
+     * If the element is not disabled, then the checked property is toggled.
+     */
     private toggleState;
     /**
-   * Handles the keydown event on the toggle element.
-   * When the user presses Enter, the form is submitted.
-   * @param event - The keyboard event.
-   */
+     * Handles the keydown event on the toggle element.
+     * When the user presses Enter, the form is submitted.
+     * @param event - The keyboard event.
+     */
     private handleKeyDown;
     /**
-   * Toggles the state of the toggle element.
-   * and dispatch the new change event.
-   */
+     * Toggles the state of the toggle element.
+     * and dispatch the new change event.
+     */
     private handleChange;
     /**
-   * Sets the size attribute for the toggle component.
-   * If the provided size is not included in the TOGGLE_SIZE,
-   * it defaults to the value specified in DEFAULTS.SIZE.
-   *
-   * @param size - The size to set.
-   */
+     * Sets the size attribute for the toggle component.
+     * If the provided size is not included in the TOGGLE_SIZE,
+     * it defaults to the value specified in DEFAULTS.SIZE.
+     *
+     * @param size - The size to set.
+     */
     private setToggleSize;
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;