@ds-autonomie/web-components 2.2.0 → 2.3.1

package/cdn/chunks/chunk.O3K7DNLG.js

@@ -0,0 +1,102 @@
+import {
+  form_control_styles_default
+} from "./chunk.W2B6WXUI.js";
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/checkbox/checkbox.styles.ts
+var checkbox_styles_default = i`
+  ${component_styles_default}
+  ${form_control_styles_default}
+  :host {
+    display: inline-block;
+  }
+
+  .form-control {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    color: var(--dsa-wc-checkbox-color);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkbox--small {
+    --toggle-size: var(--dsa-wc-checkbox-size-small);
+    font: var(--dsa-wc-checkbox-font-small);
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--dsa-wc-checkbox-size);
+    font: var(--dsa-wc-checkbox-font);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--dsa-wc-checkbox-size-large);
+    font: var(--dsa-wc-checkbox-font-large);
+  }
+
+  .checkbox__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Focus */
+  .checkbox
+    .checkbox__input:focus-visible
+    ~ dsa-internal-checkbox-box::part(control) {
+    outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
+  }
+
+  .checkbox__label:not(.checkbox--disabled) {
+    display: none;
+  }
+
+  .checkbox--has-label .checkbox__label:not(.checkbox--disabled) {
+    display: inline-block;
+    color: var(--dsa-wc-checkbox-color);
+    line-height: var(--toggle-size);
+    margin-inline-start: 0.5em;
+    user-select: none;
+  }
+
+  .checkbox__label-required {
+    color: var(--dsa-wc-form-required-content-color);
+  }
+
+  /* Disabled */
+  .checkbox--disabled {
+    cursor: not-allowed;
+  }
+  .checkbox--disabled:not(.checkbox--readonly) .checkbox__label {
+    color: var(--dsa-wc-checkbox-label-color-disabled);
+  }
+
+  /* Error */
+  .checkbox--error:not(.checkbox--disabled):not(.checkbox--readonly)
+    > .checkbox__label {
+    color: var(--dsa-wc-checkbox-label-color-error);
+  }
+
+  /* Readonly */
+  .checkbox--readonly {
+    cursor: not-allowed;
+  }
+`;
+
+export {
+  checkbox_styles_default
+};

package/cdn/chunks/chunk.O577BA4U.js

@@ -0,0 +1,23 @@
+import {
+  form_control_styles_default
+} from "./chunk.W2B6WXUI.js";
+import {
+  component_styles_default
+} from "./chunk.PSQJDSB2.js";
+import {
+  i
+} from "./chunk.4KHZQZ3M.js";
+
+// src/components/checkbox-group/checkbox-group.styles.ts
+var checkbox_group_styles_default = i`
+  ${component_styles_default}
+  ${form_control_styles_default}
+
+  :host {
+    display: block;
+  }
+`;
+
+export {
+  checkbox_group_styles_default
+};

package/cdn/chunks/{chunk.IS6JFFBR.js → chunk.OLIPJEPX.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.DNQJR4KR.js → chunk.OMPBUYUW.js}

@@ -105,9 +105,7 @@ var DSAMenuItem = class extends ShoelaceElement {
         aria-current=${o(
       this.type === "link" ? this.current : void 0
     )}
-        tabindex=${o(
-      ["button", "link"].includes(this.type) && this.disabled ? "-1" : void 0
-    )}
+        tabindex=${o(this.disabled ? "-1" : void 0)}
     
       >
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>

package/cdn/chunks/{chunk.45JVH3EU.js → chunk.OZVVCEKQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.X3MRO4MI.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   ShoelaceElement,
   e,

package/cdn/chunks/{chunk.ATHAYO6A.js → chunk.P5KRELMB.js}

@@ -1,9 +1,9 @@
-import {
-  radio_group_styles_default
-} from "./chunk.27YR5DC6.js";
 import {
   wrapIndex
 } from "./chunk.HV63L5BF.js";
+import {
+  radio_group_styles_default
+} from "./chunk.7S74KUA4.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -22,9 +22,6 @@ import {
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
-import {
-  ifDefinedAndNotEmpty
-} from "./chunk.B6GVVW66.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
@@ -35,12 +32,6 @@ import {
   r,
   t
 } from "./chunk.DZB6XUZ7.js";
-import {
-  component_styles_default
-} from "./chunk.PSQJDSB2.js";
-import {
-  i
-} from "./chunk.4KHZQZ3M.js";
 import {
   x
 } from "./chunk.7HUC6BF3.js";
@@ -48,145 +39,6 @@ import {
   __decorateClass
 } from "./chunk.4ZGVANML.js";
 
-// src/internal/components/button-group/button-group.styles.ts
-var button_group_styles_default = i`
-  ${component_styles_default}
-
-  :host {
-    display: inline-block;
-  }
-
-  .button-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--dsa-spacing-8);
-  }
-
-  .button-group--squeezed {
-    gap: 0;
-  }
-
-  .button-group--vertical {
-    flex-direction: column;
-    min-width: 120px;
-    max-width: 400px;
-  }
-
-  .button-group--horizontal {
-    flex-direction: row;
-  }
-`;
-
-// src/internal/components/button-group/button-group.ts
-var DSAInternalButtonGroup = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.disableRole = false;
-    this.label = "";
-    this.squeezed = false;
-    this.horizontal = false;
-  }
-  handleFocus(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("dsa-button-group__button--focus");
-  }
-  handleBlur(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("dsa-button-group__button--focus");
-  }
-  handleMouseOver(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.add("dsa-button-group__button--hover");
-  }
-  handleMouseOut(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.classList.remove("dsa-button-group__button--hover");
-  }
-  handleSlotChange() {
-    const slottedElements = [
-      ...this.defaultSlot.assignedElements({ flatten: true })
-    ];
-    slottedElements.forEach((el) => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el);
-      if (button !== null) {
-        button.classList.add("dsa-button-group__button");
-        if (this.squeezed) {
-          button.classList.toggle(
-            "dsa-button-group__button--first",
-            index === 0
-          );
-          button.classList.toggle(
-            "dsa-button-group__button--inner",
-            index > 0 && index < slottedElements.length - 1
-          );
-          button.classList.toggle(
-            "dsa-button-group__button--last",
-            index === slottedElements.length - 1
-          );
-        }
-        button.classList.toggle(
-          "dsa-button-group__button--radio",
-          button.tagName.toLowerCase() === "dsa-radio-button"
-        );
-        button.classList.toggle(
-          "dsa-button-group__button--checkbox",
-          button.tagName.toLowerCase() === "dsa-checkbox-button"
-        );
-        button.classList.toggle(
-          "dsa-button-group__button--vertical",
-          !this.horizontal
-        );
-      }
-    });
-  }
-  render() {
-    return x`
-      <div
-        part="base"
-        class=${e2({
-      "button-group": true,
-      "button-group--squeezed": this.squeezed,
-      "button-group--vertical": !this.horizontal,
-      "button-group--horizontal": this.horizontal
-    })}
-        role="${this.disableRole ? "presentation" : "group"}"
-        aria-label=${ifDefinedAndNotEmpty(this.label)}
-        @focusout=${this.handleBlur}
-        @focusin=${this.handleFocus}
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-};
-DSAInternalButtonGroup.styles = button_group_styles_default;
-__decorateClass([
-  e("slot")
-], DSAInternalButtonGroup.prototype, "defaultSlot", 2);
-__decorateClass([
-  r()
-], DSAInternalButtonGroup.prototype, "disableRole", 2);
-__decorateClass([
-  n()
-], DSAInternalButtonGroup.prototype, "label", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInternalButtonGroup.prototype, "squeezed", 2);
-__decorateClass([
-  n({ type: Boolean })
-], DSAInternalButtonGroup.prototype, "horizontal", 2);
-DSAInternalButtonGroup = __decorateClass([
-  t("dsa-internal-button-group")
-], DSAInternalButtonGroup);
-function findButton(el) {
-  var _a;
-  const selector = "dsa-button, dsa-radio-button, dsa-checkbox-button, dsa-pagination-button";
-  return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
-}
-
 // src/components/radio-group/radio-group.ts
 var DSARadioGroup = class extends ShoelaceElement {
   constructor() {
@@ -200,6 +52,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.customValidityMessage = "";
     this.customValidityError = "";
     this.hasRadioButtons = false;
+    this.hasRadioCards = false;
     this.readonlyRadioButtonValue = /* @__PURE__ */ new Map();
     this.defaultValue = "";
     this.label = "";
@@ -246,18 +99,22 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    return [
+    const allRadios = [
       ...this.querySelectorAll(
-        "dsa-radio, dsa-radio-button"
+        "dsa-radio, dsa-radio-button, dsa-radio-card"
       )
     ];
+    this.hasRadioButtons = allRadios.some(
+      (radio) => radio.tagName.toLowerCase() === "dsa-radio-button"
+    );
+    this.hasRadioCards = allRadios.some(
+      (radio) => radio.tagName.toLowerCase() === "dsa-radio-card"
+    );
+    return allRadios;
   }
   handleRadioClick(event) {
-    const target = event.target.closest("dsa-radio, dsa-radio-button");
-    if (!target) {
-      return;
-    }
-    if (target.disabled || target.readonly) {
+    const target = event.target.closest("dsa-radio, dsa-radio-button, dsa-radio-card");
+    if (!target || target.disabled || target.readonly || this.disabled || this.readonly) {
       return;
     }
     const radios = this.getAllRadios();
@@ -282,8 +139,11 @@ var DSARadioGroup = class extends ShoelaceElement {
     )) {
       return;
     }
+    if (this.disabled || this.readonly) {
+      return;
+    }
     const focusableRadios = this.getAllRadios().filter(
-      (radio) => !radio.disabled && (!radio.readonly || radio.checked)
+      (radio) => !this.disabled && !radio.disabled && (!radio.readonly || radio.checked)
     );
     const focusableRadiosLength = focusableRadios.length;
     const focusedRadioIndex = focusableRadios.findIndex(
@@ -295,7 +155,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     index = wrapIndex(index, focusableRadiosLength);
     this.getAllRadios().forEach((radio) => {
       radio.checked = false;
-      if (this.hasRadioButtons) {
+      if (this.hasRadioButtons || this.hasRadioCards) {
         radio.button.tabIndex = -1;
       } else {
         radio.tabIndex = -1;
@@ -308,7 +168,7 @@ var DSARadioGroup = class extends ShoelaceElement {
       this.value = focusableRadios[index].readonly || focusableRadios[focusedRadioIndex].readonly && focusableRadios[focusedRadioIndex].checked ? this.value : focusableRadios[index].value;
       focusableRadios[index].checked = this.value === focusableRadios[index].value;
     }
-    if (!this.hasRadioButtons) {
+    if (!this.hasRadioButtons && !this.hasRadioCards) {
       focusableRadios[index].tabIndex = 0;
       focusableRadios[index].focus();
     } else {
@@ -333,36 +193,23 @@ var DSARadioGroup = class extends ShoelaceElement {
     }
   }
   handleSlotChange() {
-    var _a;
-    if (customElements.get("dsa-radio") || customElements.get("dsa-radio-button")) {
+    if (customElements.get("dsa-radio") || customElements.get("dsa-radio-button") || customElements.get("dsa-radio-card")) {
       const radios = this.getAllRadios();
       let hasAtLeastOneCheckedRadio = false;
       radios.forEach((radio) => {
         radio.error = this.error;
-        if (this.readonly) {
-          radio.readonly = this.readonly;
-        }
-        if (this.disabled) {
-          radio.disabled = this.disabled;
-        }
-        this.hasRadioButtons = radio.tagName.toLowerCase() === "dsa-radio-button";
-        if (radio.tagName.toLowerCase() === "dsa-radio-button" && radio.readonly) {
+        if ((this.hasRadioButtons || this.hasRadioCards) && radio.readonly) {
           this.readonlyRadioButtonValue.set(radio.value, true);
         }
         hasAtLeastOneCheckedRadio = radio.checked || hasAtLeastOneCheckedRadio;
+        radio.parentDisabled = this.disabled;
+        radio.parentReadonly = this.readonly;
       });
       this.updateCheckedRadio();
-      if (this.hasRadioButtons) {
-        const buttonGroup = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
-          "dsa-internal-button-group"
-        );
-        if (buttonGroup) {
-          buttonGroup.disableRole = true;
-        }
-      }
     } else {
       customElements.whenDefined("dsa-radio").then(() => this.handleSlotChange());
       customElements.whenDefined("dsa-radio-button").then(() => this.handleSlotChange());
+      customElements.whenDefined("dsa-radio-card").then(() => this.handleSlotChange());
     }
   }
   handleInvalid(event) {
@@ -374,7 +221,7 @@ var DSARadioGroup = class extends ShoelaceElement {
     radios.forEach((radio) => {
       var _a;
       radio.checked = radio.value === this.value;
-      if (this.hasRadioButtons) {
+      if (this.hasRadioButtons || this.hasRadioCards) {
         const radioButton = radio;
         radioButton.readonly = (_a = this.readonlyRadioButtonValue.get(this.value)) != null ? _a : radioButton.readonly;
       }
@@ -387,11 +234,20 @@ var DSARadioGroup = class extends ShoelaceElement {
     const firstFocusableRadioIndex = radios.findIndex(
       (radio) => !radio.disabled && (!radio.readonly || radio.checked)
     );
+    const isValidValue = this.value !== "" && radios.some((radio) => radio.value === this.value);
     radios.forEach((radio, index) => {
-      const shouldFocus = radio.checked && !radio.disabled || this.value === "" && index === firstFocusableRadioIndex;
-      if (this.hasRadioButtons) {
+      if (this.disabled) {
+        radio.tabIndex = -1;
+        return;
+      }
+      const shouldFocus = radio.checked && !radio.disabled || !isValidValue && index === firstFocusableRadioIndex && !this.readonly;
+      if (this.hasRadioButtons || this.hasRadioCards) {
         const radioButton = radio;
-        radioButton.button.tabIndex = shouldFocus ? 0 : -1;
+        customElements.whenDefined(
+          this.hasRadioButtons ? "dsa-radio-button" : "dsa-radio-card"
+        ).then(() => {
+          radioButton.button.tabIndex = shouldFocus ? 0 : -1;
+        });
       } else {
         radio.tabIndex = shouldFocus ? 0 : -1;
       }
@@ -411,14 +267,15 @@ var DSARadioGroup = class extends ShoelaceElement {
     this.getAllRadios().forEach((radio) => radio.error = this.error);
   }
   handleDisabledChange() {
-    if (this.disabled) {
-      this.getAllRadios().forEach((radio) => radio.disabled = this.disabled);
-    }
+    this.getAllRadios().forEach(
+      (radio) => radio.parentDisabled = this.disabled
+    );
   }
   handleReadonlyChange() {
-    if (this.readonly) {
-      this.getAllRadios().forEach((radio) => radio.readonly = this.readonly);
-    }
+    this.getAllRadios().forEach(
+      (radio) => radio.parentReadonly = this.readonly
+    );
+    this.updateTabIndexes();
   }
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
@@ -479,7 +336,8 @@ var DSARadioGroup = class extends ShoelaceElement {
       "form-control--radio-group": true,
       "form-control--has-label": hasLabel,
       "form-control--has-help-text": hasHelpText,
-      "form-control--has-button-group": this.hasRadioButtons,
+      "form-control--has-buttons": this.hasRadioButtons,
+      "form-control--has-cards": this.hasRadioCards,
       "form-control--options-horizontal": !!this.horizontal
     })}
         role="radiogroup"
@@ -508,7 +366,7 @@ var DSARadioGroup = class extends ShoelaceElement {
           part="form-control-input"
           class="form-control-input form-control__field"
         >
-          <div class="visually-hidden">
+          <dsa-visually-hidden>
             <label class="radio-group__validation">
               <input
                 type="text"
@@ -519,29 +377,15 @@ var DSARadioGroup = class extends ShoelaceElement {
                 @invalid=${this.handleInvalid}
               />
             </label>
-          </div>
+          </dsa-visually-hidden>
 
-          ${this.hasRadioButtons ? x`
-                <dsa-internal-button-group
-                  part="button-group"
-                  exportparts="base:button-group__base"
-                  @click=${this.handleRadioClick}
-                  @keydown=${this.handleKeyDown}
-                  @slotchange=${this.handleSlotChange}
-                  role="presentation"
-                  ?horizontal=${this.horizontal}
-                >
-                  <slot></slot>
-                </dsa-internal-button-group>
-              ` : x`
-                <slot
-                  @click=${this.handleRadioClick}
-                  @keydown=${this.handleKeyDown}
-                  @slotchange=${this.handleSlotChange}
-                  role="presentation"
-                  class="form-control__options"
-                ></slot>
-              `}
+          <slot
+            @click=${this.handleRadioClick}
+            @keydown=${this.handleKeyDown}
+            @slotchange=${this.handleSlotChange}
+            role="presentation"
+            class="form-control__options"
+          ></slot>
         </div>
         <slot
           name="help-text"
@@ -570,6 +414,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], DSARadioGroup.prototype, "hasRadioButtons", 2);
+__decorateClass([
+  r()
+], DSARadioGroup.prototype, "hasRadioCards", 2);
 __decorateClass([
   r()
 ], DSARadioGroup.prototype, "readonlyRadioButtonValue", 2);

package/cdn/chunks/{chunk.BNPGOQZ2.js → chunk.P7D7IUHT.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.7PPSHHT2.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";

package/cdn/chunks/{chunk.LNBAAP45.js → chunk.QEPPYDSN.js}

@@ -1,9 +1,9 @@
 import {
   select_styles_default
-} from "./chunk.FHTVGJJI.js";
+} from "./chunk.JXHXRRPX.js";
 import {
   FormControlLayout
-} from "./chunk.XQAKSW3W.js";
+} from "./chunk.TOWWOPMH.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -26,7 +26,7 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.XSXBXWVS.js → chunk.QFP2EIRS.js}

@@ -32,6 +32,7 @@ var footer_styles_default = i`
   .footer-center-divider,
   [part~='footer-bottom-container'] {
     width: 100%;
+    /* stylelint-disable-next-line */
     max-width: var(--footer-max-width);
   }
 

package/cdn/chunks/{chunk.YS6XV3LD.js → chunk.RJUKDJQG.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.O4MZVDWB.js";
 import {
   FormControlLayout
-} from "./chunk.XQAKSW3W.js";
+} from "./chunk.TOWWOPMH.js";
 import {
   combobox_styles_default
-} from "./chunk.I7XP2UMV.js";
+} from "./chunk.7FRA5H32.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";
@@ -29,13 +29,16 @@ import {
 } from "./chunk.2WRFDMKN.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.B6GVVW66.js";
+import {
+  o
+} from "./chunk.YQLIIKLI.js";
 import {
   e as e2
 } from "./chunk.IKHG7XGO.js";
@@ -651,6 +654,8 @@ var DSACombobox = class extends FormControlLayout {
               aria-disabled=${isDisabledOrReadonly ? "true" : "false"}
               aria-describedby=${ariaDescribedBy}
               aria-activedescendant=${(_b = (_a = this.currentOption) == null ? void 0 : _a.id) != null ? _b : ""}
+              aria-invalid=${o(this.error ? "true" : void 0)}
+              aria-required=${o(this.required ? "true" : void 0)}
               role="combobox"
               tabindex="0"
               @change=${this.handleChange}

package/cdn/chunks/{chunk.NSE76EM5.js → chunk.ROGVB4AO.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.YGUWRBBP.js";
 import {
   DSATreeItem
-} from "./chunk.IS6JFFBR.js";
+} from "./chunk.OLIPJEPX.js";
 import {
   clamp
 } from "./chunk.HF7GESMZ.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.RJROYRRA.js → chunk.RXUJBLKT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.MOWF7MA3.js";
 import {
   LocalizeController
-} from "./chunk.ZLWLHLBC.js";
+} from "./chunk.LICWCBKN.js";
 import {
   watch
 } from "./chunk.4FQJ3QJK.js";

package/cdn/chunks/{chunk.YWD53U3T.js → chunk.S3G2QBTA.js}

@@ -29,9 +29,9 @@ var DSAProgressRing = class extends ShoelaceElement {
     this.label = "";
     this.size = "medium";
   }
-  updated(changedProps) {
-    super.updated(changedProps);
-    if (changedProps.has("value")) {
+  requestUpdate(name, oldValue, options) {
+    super.requestUpdate(name, oldValue, options);
+    if (name === "value" && this.indicator) {
       const radius = parseFloat(
         getComputedStyle(this.indicator).getPropertyValue("r")
       );