@momentum-design/components 0.84.3 → 0.84.5

package/dist/components/optgroup/optgroup.component.js

@@ -29,7 +29,7 @@ import styles from './optgroup.styles';
  */
 class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
     setDisabledForAllOptions() {
-        this.options.forEach((element) => {
+        this.options.forEach(element => {
             if (this.disabled) {
                 element.setAttribute('disabled', '');
             }
@@ -46,14 +46,17 @@ class OptGroup extends DataAriaLabelMixin(DisabledMixin(Component)) {
     }
     render() {
         var _a;
-        const headerText = this.label ? html `
-      <mdc-text
-        id="${HEADER_ID}"
-        part="header-text"
-        type="${TYPE.BODY_MIDSIZE_BOLD}"
-        tagname="${VALID_TEXT_TAGS.SPAN}"
-      >${this.label}</mdc-text>
-    ` : nothing;
+        const headerText = this.label
+            ? html `
+          <mdc-text
+            id="${HEADER_ID}"
+            part="header-text"
+            type="${TYPE.BODY_MIDSIZE_BOLD}"
+            tagname="${VALID_TEXT_TAGS.SPAN}"
+            >${this.label}</mdc-text
+          >
+        `
+            : nothing;
         return html `
       <div
         role="${ROLE.GROUP}"

package/dist/components/option/option.component.js

@@ -78,22 +78,22 @@ class Option extends FormInternalsMixin(ListItem) {
         }
     }
     render() {
-        const prefixIconContent = this.prefixIcon ? html `
-      <div part="leading-icon">
-        <mdc-icon length-unit="rem" slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
-      </div>
-    ` : nothing;
-        const selectedIcon = this.selected ? html `
-      <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon>
-    ` : nothing;
+        const prefixIconContent = this.prefixIcon
+            ? html `
+          <div part="leading-icon">
+            <mdc-icon length-unit="rem" slot="leading-controls" name="${ifDefined(this.prefixIcon)}"></mdc-icon>
+          </div>
+        `
+            : nothing;
+        const selectedIcon = this.selected
+            ? html ` <mdc-icon length-unit="rem" slot="trailing-controls" name="${SELECTED_ICON_NAME}"></mdc-icon> `
+            : nothing;
         return html `
       ${prefixIconContent}
       <div part="leading-text">
         ${this.getText('leading-text-primary-label', TYPE.BODY_MIDSIZE_REGULAR, this.label)}
       </div>
-      <div part="trailing">
-        ${selectedIcon}
-      </div>
+      <div part="trailing">${selectedIcon}</div>
       <slot part="default-slot" @slotchange="${this.handleDefaultSlotChange}"></slot>
     `;
     }

package/dist/components/option/option.styles.js

@@ -11,7 +11,7 @@ const styles = css `
     height: 2.25rem;
   }
   :host::part(default-slot) {
-    display: none; 
+    display: none;
   }
   :host::part(leading-icon),
   :host::part(trailing) {

package/dist/components/popover/popover.component.js

@@ -469,7 +469,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         }
         if (changedProperties.has('trigger')) {
             const triggers = this.trigger.split(' ');
-            const validTriggers = triggers.filter((trigger) => Object.values(TRIGGER).includes(trigger));
+            const validTriggers = triggers.filter(trigger => Object.values(TRIGGER).includes(trigger));
             this.setAttribute('trigger', validTriggers.length > 0 ? this.trigger : DEFAULTS.TRIGGER);
             this.removeEventListeners();
             this.setupTriggerListener();
@@ -483,9 +483,9 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         if (changedProperties.has('append-to')) {
             this.utils.setupAppendTo();
         }
-        if (changedProperties.has('interactive')
-            || changedProperties.has('aria-label')
-            || changedProperties.has('aria-labelledby')) {
+        if (changedProperties.has('interactive') ||
+            changedProperties.has('aria-label') ||
+            changedProperties.has('aria-labelledby')) {
             this.utils.setupAccessibility();
         }
         if (changedProperties.has('disableAriaExpanded')) {

package/dist/components/popover/popover.stack.js

@@ -43,7 +43,7 @@ class PopoverStack {
      * @param popover - Popover instance
      */
     remove(popover) {
-        this.stack = this.stack.filter((item) => item !== popover);
+        this.stack = this.stack.filter(item => item !== popover);
     }
     /**
      * Clears the stack

package/dist/components/popover/popover.styles.js

@@ -37,7 +37,6 @@ const styles = css `
   }
 
   :host([color='contrast']) {
-
     .popover-arrow {
       background-color: var(--mdc-popover-inverted-background-color);
       border-color: var(--mdc-popover-inverted-border-color);

package/dist/components/popover/popover.utils.js

@@ -13,7 +13,7 @@ export class PopoverUtils {
      */
     setupDelay() {
         try {
-            const [openDelay, closeDelay] = this.popover.delay.split(',').map((delay) => {
+            const [openDelay, closeDelay] = this.popover.delay.split(',').map(delay => {
                 const parsed = parseInt(delay, 10);
                 if (Number.isNaN(parsed) || parsed < 0) {
                     throw new Error(`Invalid delay value: ${delay}`);
@@ -98,9 +98,8 @@ export class PopoverUtils {
         }
         if (this.popover.interactive) {
             if (!this.popover.ariaLabel) {
-                this.popover.ariaLabel = ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel)
-                    || ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.textContent)
-                    || '';
+                this.popover.ariaLabel =
+                    ((_a = this.popover.triggerElement) === null || _a === void 0 ? void 0 : _a.ariaLabel) || ((_b = this.popover.triggerElement) === null || _b === void 0 ? void 0 : _b.textContent) || '';
             }
             if (!this.popover.ariaLabelledby) {
                 this.popover.ariaLabelledby = ((_c = this.popover.triggerElement) === null || _c === void 0 ? void 0 : _c.id) || '';

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

@@ -77,13 +77,13 @@ declare class Presence extends Component {
      */
     private get icon();
     /**
-      * Handles the successful load of an icon.
-      * Sets the `currentIconType` property to match the `type` property.
-    */
+     * Handles the successful load of an icon.
+     * Sets the `currentIconType` property to match the `type` property.
+     */
     private handleOnLoad;
     /**
      * Handles an error that occurs when loading an icon.
-    */
+     */
     private handleOnError;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/presence/presence.component.js

@@ -115,15 +115,15 @@ class Presence extends Component {
         return iconName;
     }
     /**
-      * Handles the successful load of an icon.
-      * Sets the `currentIconType` property to match the `type` property.
-    */
+     * Handles the successful load of an icon.
+     * Sets the `currentIconType` property to match the `type` property.
+     */
     handleOnLoad() {
         this.currentIconType = this.type;
     }
     /**
      * Handles an error that occurs when loading an icon.
-    */
+     */
     handleOnError() {
         if (this.onerror) {
             this.onerror('There was a problem while fetching the icon. Please check the icon name and try again.');

package/dist/components/progressbar/progressbar.component.js

@@ -10,12 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { v4 as uuidv4 } from 'uuid';
-import styles from './progressbar.styles';
 import FormfieldWrapper from '../formfieldwrapper';
-import { DEFAULTS, VARIANT } from './progressbar.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
+import { DEFAULTS, VARIANT } from './progressbar.constants';
+import styles from './progressbar.styles';
 /**
  * mdc-progressbar component visually represents a progress indicator, typically used to show
  * the completion state of an ongoing process (e.g., loading, file upload, etc.).
@@ -141,8 +141,7 @@ class Progressbar extends DataAriaLabelMixin(FormfieldWrapper) {
                 ? html `<span part="percentage">${this.clampedValue}%</span>`
                 : ''}
             </div>
-            ${this.renderProgressbar()}
-            ${this.renderHelperText()}
+            ${this.renderProgressbar()} ${this.renderHelperText()}
           `}
     `;
     }

package/dist/components/progressbar/progressbar.styles.js

@@ -1,88 +1,94 @@
 import { css } from 'lit';
 import { hostFitContentStyles } from '../../utils/styles';
-const styles = [hostFitContentStyles, css `
-:host {
-  --mdc-progressbar-background-color: var(--mds-color-theme-control-indicator-inactive-normal);
-  --mdc-progressbar-active-background-color: var(--mds-color-theme-control-active-normal);
-  --mdc-progressbar-success-color: var(--mds-color-theme-indicator-stable);
-  --mdc-progressbar-error-color: var(--mds-color-theme-indicator-attention);
-  --mdc-progressbar-height: 0.25rem;
-  --mdc-progressbar-border: 0.5px solid transparent;
-  --mdc-progressbar-border-radius: var(--mdc-progressbar-height);
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-progressbar-background-color: var(--mds-color-theme-control-indicator-inactive-normal);
+      --mdc-progressbar-active-background-color: var(--mds-color-theme-control-active-normal);
+      --mdc-progressbar-success-color: var(--mds-color-theme-indicator-stable);
+      --mdc-progressbar-error-color: var(--mds-color-theme-indicator-attention);
+      --mdc-progressbar-height: 0.25rem;
+      --mdc-progressbar-border: 0.5px solid transparent;
+      --mdc-progressbar-border-radius: var(--mdc-progressbar-height);
 
-  --mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
-  --mdc-progressbar-label-line-height: var(--mds-font-lineheight-body-midsize);
-  --mdc-progressbar-label-font-size: var(--mds-font-size-body-midsize);
-  --mdc-progressbar-label-font-weight: var(--mds-font-weight-regular);
-  --mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
+      --mdc-progressbar-label-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-progressbar-label-line-height: var(--mds-font-lineheight-body-midsize);
+      --mdc-progressbar-label-font-size: var(--mds-font-size-body-midsize);
+      --mdc-progressbar-label-font-weight: var(--mds-font-weight-regular);
+      --mdc-progressbar-help-text-color: var(--mds-color-theme-text-secondary-normal);
 
-  width: 100%;
-}
+      width: 100%;
+    }
 
-:host::part(label-container) {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
+    :host::part(label-container) {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
 
-:host::part(inline-label-container) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-}
+    :host::part(inline-label-container) {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+    }
 
-:host::part(progress-container) {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--mdc-progressbar-height);
-}
+    :host::part(progress-container) {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: var(--mdc-progressbar-height);
+    }
 
-:host::part(gap) {
-  gap: 0.25rem;
-}
+    :host::part(gap) {
+      gap: 0.25rem;
+    }
 
-:host([variant="inline"])::part(label) {
-  overflow: unset;
-}
+    :host([variant='inline'])::part(label) {
+      overflow: unset;
+    }
 
-:host::part(progress-bar) {
-  height: 100%;
-  background-color: var(--mdc-progressbar-active-background-color);
-  border-radius: var(--mdc-progressbar-border-radius);
-  transition: width 0.3s ease-in-out;
-}
+    :host::part(progress-bar) {
+      height: 100%;
+      background-color: var(--mdc-progressbar-active-background-color);
+      border-radius: var(--mdc-progressbar-border-radius);
+      transition: width 0.3s ease-in-out;
+    }
 
-:host::part(success) {
-  background-color: var(--mdc-progressbar-success-color);
-}
+    :host::part(success) {
+      background-color: var(--mdc-progressbar-success-color);
+    }
 
-:host::part(error) {
-  background-color: var(--mdc-progressbar-error-color);
-}
+    :host::part(error) {
+      background-color: var(--mdc-progressbar-error-color);
+    }
 
-:host::part(remaining) {
-  height: 100%;
-  flex-grow: 1;
-  background-color: var(--mdc-progressbar-background-color);
-  border-radius: var(--mdc-progressbar-border-radius);
-}
+    :host::part(remaining) {
+      height: 100%;
+      flex-grow: 1;
+      background-color: var(--mdc-progressbar-background-color);
+      border-radius: var(--mdc-progressbar-border-radius);
+    }
 
-:host::part(label-text), :host::part(help-text), :host::part(percentage) {
-  font-size: var(--mdc-progressbar-label-font-size);
-  font-weight: var(--mdc-progressbar-label-font-weight);
-  line-height: var(--mdc-progressbar-label-line-height);
-}
+    :host::part(label-text),
+    :host::part(help-text),
+    :host::part(percentage) {
+      font-size: var(--mdc-progressbar-label-font-size);
+      font-weight: var(--mdc-progressbar-label-font-weight);
+      line-height: var(--mdc-progressbar-label-line-height);
+    }
 
-:host([help-text-type="default"])::part(help-text) {
-  color: var(--mdc-progressbar-help-text-color);
-}
+    :host([help-text-type='default'])::part(help-text) {
+      color: var(--mdc-progressbar-help-text-color);
+    }
 
-@media (forced-colors: active) {
-  :host::part(progress-container), :host::part(progress-bar) {
-    border: var(--mdc-progressbar-border);
-  }
-}
-`];
+    @media (forced-colors: active) {
+      :host::part(progress-container),
+      :host::part(progress-bar) {
+        border: var(--mdc-progressbar-border);
+      }
+    }
+  `,
+];
 export default styles;

package/dist/components/progressspinner/progressspiner.utils.js

@@ -30,10 +30,10 @@ const getProgressArc = (percentage) => {
     }
     const progressArc = (percentage / 100) * DEFAULTS.CIRCUMFERENCE - DEFAULTS.GAP_SIZE;
     /** Ensure the progress arc is not negative due to gap size
-    * The 0.1% is a minimum threshold to ensure the arc is visible.
-    * This is especially useful for very small percentages.
-    * This is particularly important for accessibility and visual clarity.
-    */
+     * The 0.1% is a minimum threshold to ensure the arc is visible.
+     * This is especially useful for very small percentages.
+     * This is particularly important for accessibility and visual clarity.
+     */
     return Math.max(progressArc, 0.1 * percentage);
 };
 /**

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

@@ -1,10 +1,10 @@
 import { html } from 'lit';
-import styles from './progressspinner.styles';
 import { Component } from '../../models';
 import Progressbar from '../progressbar/progressbar.component';
-import { DEFAULTS, ICON_NAME } from './progressspinner.constants';
-import { getProgressArc, getProgressOffset, getRemainingArc, getRemainingOffset } from './progressspiner.utils';
 import { ROLE } from '../../utils/roles';
+import { getProgressArc, getProgressOffset, getRemainingArc, getRemainingOffset } from './progressspiner.utils';
+import { DEFAULTS, ICON_NAME } from './progressspinner.constants';
+import styles from './progressspinner.styles';
 /**
  * `mdc-progressspinner` is a customizable, circular progress indicator component.
  * It visually represents the current completion state of a process, such as loading,
@@ -58,26 +58,26 @@ class Progressspinner extends Progressbar {
         aria-valuemax="100"
         aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
       >
-      <svg part="spinner-base">
-        <circle
-          part="spinner-track"
-          cx="24"
-          cy="24"
-          r="${DEFAULTS.RADIUS}"
-          stroke-width="${remainingArc === 0 ? 0 : DEFAULTS.STROKE_WIDTH}"
-          stroke-dasharray="${remainingArc} ${DEFAULTS.CIRCUMFERENCE}"
-          stroke-dashoffset="-${remainingOffset}"
-        />
-        <circle
-          part="spinner-progress"
-          cx="24"
-          cy="24"
-          r="${DEFAULTS.RADIUS}"
-          stroke-width="${progressArc === 0 ? 0 : DEFAULTS.STROKE_WIDTH}"
-          stroke-dasharray="${progressArc} ${DEFAULTS.CIRCUMFERENCE}"
-          stroke-dashoffset="-${progressOffset}"
-        />
-      </svg>
+        <svg part="spinner-base">
+          <circle
+            part="spinner-track"
+            cx="24"
+            cy="24"
+            r="${DEFAULTS.RADIUS}"
+            stroke-width="${remainingArc === 0 ? 0 : DEFAULTS.STROKE_WIDTH}"
+            stroke-dasharray="${remainingArc} ${DEFAULTS.CIRCUMFERENCE}"
+            stroke-dashoffset="-${remainingOffset}"
+          />
+          <circle
+            part="spinner-progress"
+            cx="24"
+            cy="24"
+            r="${DEFAULTS.RADIUS}"
+            stroke-width="${progressArc === 0 ? 0 : DEFAULTS.STROKE_WIDTH}"
+            stroke-dasharray="${progressArc} ${DEFAULTS.CIRCUMFERENCE}"
+            stroke-dashoffset="-${progressOffset}"
+          />
+        </svg>
       </div>
     `;
     }
@@ -88,12 +88,13 @@ class Progressspinner extends Progressbar {
     renderErrorState() {
         var _a;
         return html `
-      <mdc-icon 
-      part="error-icon"
-      aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}" 
-      name="${ICON_NAME.ERROR_LEGACY_FILLED}"
-      size="${DEFAULTS.ERROR_ICON_SIZE}"  
-      length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"></mdc-icon>
+      <mdc-icon
+        part="error-icon"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        name="${ICON_NAME.ERROR_LEGACY_FILLED}"
+        size="${DEFAULTS.ERROR_ICON_SIZE}"
+        length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"
+      ></mdc-icon>
     `;
     }
     /**
@@ -103,12 +104,13 @@ class Progressspinner extends Progressbar {
     renderSuccessState() {
         var _a;
         return html `
-      <mdc-icon 
-      part="success-icon"
-      aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}" 
-      name="${ICON_NAME.CHECK_CIRCLE_BOLD}"
-      size="${DEFAULTS.SUCCESS_ICON_SIZE}"  
-      length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"></mdc-icon>
+      <mdc-icon
+        part="success-icon"
+        aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+        name="${ICON_NAME.CHECK_CIRCLE_BOLD}"
+        size="${DEFAULTS.SUCCESS_ICON_SIZE}"
+        length-unit="${DEFAULTS.ICON_LENGTH_UNIT}"
+      ></mdc-icon>
     `;
     }
     render() {
@@ -118,8 +120,7 @@ class Progressspinner extends Progressbar {
         if (this.clampedValue === 100) {
             return this.renderSuccessState();
         }
-        return html `
-      ${this.renderProgressSpinner()}`;
+        return html ` ${this.renderProgressSpinner()}`;
     }
 }
 Progressspinner.styles = [...Component.styles, ...styles];

package/dist/components/progressspinner/progressspinner.styles.js

@@ -37,7 +37,7 @@ const styles = css `
 
   :host::part(success-icon) {
     color: var(--mdc-progress-success-color);
-}
+  }
 
   :host::part(error-icon) {
     color: var(--mdc-progress-error-color);

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

@@ -31,42 +31,42 @@ declare const Radio_base: import("../../utils/mixins/index.types").Constructor<i
  */
 declare class Radio extends Radio_base implements AssociatedFormControl {
     /**
-    * Determines whether the radio is selected or unselected.
-    *
-    * @default false
-    */
+     * Determines whether the radio is selected or unselected.
+     *
+     * @default false
+     */
     checked: boolean;
     /**
-    * Determines whether the radio is read-only.
-    *
-    * @default false
-    */
+     * Determines whether the radio is read-only.
+     *
+     * @default false
+     */
     readonly: boolean;
     /**
-   * 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;
     firstUpdated(): void;
     /**
-   * Returns all radios within the same group (name).
-   */
+     * Returns all radios within the same group (name).
+     */
     private getAllRadiosWithinSameGroup;
     /**
-   * 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
+     */
     private dispatchChangeEvent;
     /** @internal */
     formResetCallback(): void;
     /** @internal */
     formStateRestoreCallback(state: string): void;
     /**
-   * @internal
-   */
+     * @internal
+     */
     setComponentValidity(isValid: boolean): void;
     /**
      * Sets the validity of the group of radios.
@@ -75,35 +75,35 @@ declare class Radio extends Radio_base implements AssociatedFormControl {
      */
     private setGroupValidity;
     /**
-   * 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.
+     */
     private setActualFormValue;
     /**
-   * 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.
+     */
     private handleChange;
     /**
-   * 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.
+     */
     private updateRadio;
     /**
-   * 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.
+     */
     private handleKeyDown;
     /**
-   * 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
+     */
     private updateTabIndex;
     update(changedProperties: PropertyValues): void;
     private renderLabelAndHelperText;