@ds-autonomie/web-components 2.21.0 → 2.21.2

package/dist/chunks/{chunk.TAMFIHNV.js → chunk.4DRUU356.js}

@@ -1,6 +1,6 @@
 import {
   Modal
-} from "./chunk.STZAPPWR.js";
+} from "./chunk.7Y2PLLDT.js";
 import {
   lockBodyScrolling,
   unlockBodyScrolling
@@ -10,7 +10,7 @@ import {
 } from "./chunk.M55HS2NY.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   DSAIconButton
 } from "./chunk.2GTXVMMC.js";
@@ -87,10 +87,11 @@ var DSADialog = class extends ShoelaceElement {
     });
     if (this.noCloseButton) dsaRequestClose.preventDefault();
     if (dsaRequestClose.defaultPrevented) {
+      const { localize, panel } = this;
       const animation = getAnimation(this, "dialog.denyClose", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
-      animateTo(this.panel, animation.keyframes, animation.options);
+      animateTo(panel, animation.keyframes, animation.options);
       return;
     }
     this.hide();
@@ -103,10 +104,7 @@ var DSADialog = class extends ShoelaceElement {
   }
   handleDocumentKeyDown(event) {
     if (this.open && this.modal.isActive() && event.key === "Escape") {
-      const tooltipChildren = this.querySelectorAll("dsa-tooltip");
-      const isTooltipOpen = Array.from(tooltipChildren).some(
-        (tooltip) => tooltip.open
-      );
+      const isTooltipOpen = !!this.querySelector("dsa-tooltip[open]");
       if (!isTooltipOpen) {
         event.stopPropagation();
         this.requestClose("keyboard");
@@ -119,16 +117,14 @@ var DSADialog = class extends ShoelaceElement {
       this.addOpenListeners();
       this.originalTrigger = document.activeElement;
       this.modal.activate();
+      const { dialog, panel, overlay, localize } = this;
       lockBodyScrolling(this);
       const autoFocusTarget = this.querySelector("[autofocus]");
       if (autoFocusTarget) {
         autoFocusTarget.removeAttribute("autofocus");
       }
-      await Promise.all([
-        stopAnimations(this.dialog),
-        stopAnimations(this.overlay)
-      ]);
-      this.dialog.hidden = false;
+      await Promise.all([stopAnimations(dialog), stopAnimations(overlay)]);
+      dialog.hidden = false;
       requestAnimationFrame(() => {
         const dsaInitialFocus = this.emit("dsa-initial-focus", {
           cancelable: true
@@ -139,7 +135,7 @@ var DSADialog = class extends ShoelaceElement {
               preventScroll: true
             });
           } else {
-            this.panel.focus({ preventScroll: true });
+            panel.focus({ preventScroll: true });
           }
         }
         if (autoFocusTarget) {
@@ -147,15 +143,15 @@ var DSADialog = class extends ShoelaceElement {
         }
       });
       const panelAnimation = getAnimation(this, "dialog.show", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
       const overlayAnimation = getAnimation(this, "dialog.overlay.show", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
       await Promise.all([
-        animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),
+        animateTo(panel, panelAnimation.keyframes, panelAnimation.options),
         animateTo(
-          this.overlay,
+          overlay,
           overlayAnimation.keyframes,
           overlayAnimation.options
         )
@@ -165,35 +161,31 @@ var DSADialog = class extends ShoelaceElement {
       this.emit("dsa-hide");
       this.removeOpenListeners();
       this.modal.deactivate();
-      await Promise.all([
-        stopAnimations(this.dialog),
-        stopAnimations(this.overlay)
-      ]);
+      const { dialog, panel, overlay, localize } = this;
+      await Promise.all([stopAnimations(dialog), stopAnimations(overlay)]);
       const panelAnimation = getAnimation(this, "dialog.hide", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
       const overlayAnimation = getAnimation(this, "dialog.overlay.hide", {
-        dir: this.localize.dir()
+        dir: localize.dir()
       });
       await Promise.all([
         animateTo(
-          this.overlay,
+          overlay,
           overlayAnimation.keyframes,
           overlayAnimation.options
         ).then(() => {
-          this.overlay.hidden = true;
+          overlay.hidden = true;
         }),
-        animateTo(
-          this.panel,
-          panelAnimation.keyframes,
-          panelAnimation.options
-        ).then(() => {
-          this.panel.hidden = true;
-        })
+        animateTo(panel, panelAnimation.keyframes, panelAnimation.options).then(
+          () => {
+            panel.hidden = true;
+          }
+        )
       ]);
-      this.dialog.hidden = true;
-      this.overlay.hidden = false;
-      this.panel.hidden = false;
+      dialog.hidden = true;
+      overlay.hidden = false;
+      panel.hidden = false;
       unlockBodyScrolling(this);
       const trigger = this.originalTrigger;
       if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {

package/dist/chunks/{chunk.IQY2ZVAV.js → chunk.4EG67OAK.js}

@@ -1,9 +1,9 @@
 import {
   DSAInput
-} from "./chunk.C6BC46KV.js";
+} from "./chunk.JP47EKO5.js";
 import {
   FilterBase
-} from "./chunk.KOO2JWHZ.js";
+} from "./chunk.HTXWT3CI.js";
 import {
   filter_counter_styles_default
 } from "./chunk.YSCXTTQZ.js";

package/dist/chunks/{chunk.QHNPNQXO.js → chunk.4TRXHBIO.js}

@@ -1,6 +1,6 @@
 import {
   callout_styles_default
-} from "./chunk.MOTDL3I3.js";
+} from "./chunk.ENRVP5HO.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -20,29 +20,27 @@ var DSACallout = class extends ShoelaceElement {
     this.calloutTitle = "";
   }
   render() {
+    const { calloutTitle, title, headerLevel } = this;
+    const label = calloutTitle || title;
     return html`
       <div
         part="base"
         class=${classMap({
       callout: true
     })}
-        role=${ifDefined(
-      this.calloutTitle || this.title ? "region" : void 0
-    )}
-        aria-labelledby=${ifDefined(
-      this.calloutTitle || this.title ? "header" : void 0
-    )}
+        role=${ifDefined(label ? "region" : void 0)}
+        aria-labelledby=${ifDefined(label ? "header" : void 0)}
       >
         <div class="callout__text">
-          ${this.calloutTitle || this.title ? html`
+          ${label ? html`
                 <div
                   part="header"
                   id="header"
-                  aria-level=${ifDefined(this.headerLevel)}
-                  role=${ifDefined(this.headerLevel ? "heading" : void 0)}
+                  aria-level=${ifDefined(headerLevel)}
+                  role=${ifDefined(headerLevel ? "heading" : void 0)}
                   class="callout__title"
                 >
-                  ${this.calloutTitle || this.title}
+                  ${label}
                 </div>
               ` : ""}
           <slot part="message" class="callout__message"></slot>

package/dist/chunks/{chunk.SEMHY47B.js → chunk.5GTWUU56.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.QGI766JC.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.LBLBASKK.js → chunk.623OV6KT.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.VRUSJUXU.js";
 import {
   FormControlLayout
-} from "./chunk.RLLACUYR.js";
+} from "./chunk.U73GKQGJ.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.X3H6MOUU.js → chunk.6XF7Y5OQ.js}

@@ -1,6 +1,6 @@
 import {
   FormSelectableCard
-} from "./chunk.ZUG2HYP5.js";
+} from "./chunk.HD75OK3X.js";
 import {
   removeAttributeIfPresent,
   setAttributeIfDifferent

package/dist/chunks/{chunk.GSRQID3H.js → chunk.7AB3AL2Z.js}

@@ -8,10 +8,10 @@ import {
 } from "./chunk.IONY2GZF.js";
 import {
   InputBase
-} from "./chunk.7HMEK2ND.js";
+} from "./chunk.E7CTAIEF.js";
 import {
   DSAPopup
-} from "./chunk.GYWU4AAB.js";
+} from "./chunk.EWO55RR2.js";
 import {
   scrollIntoView
 } from "./chunk.EMIT7S33.js";

package/dist/chunks/{chunk.M47YUO2L.js → chunk.A63V45OW.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.R3CYFIJA.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";

package/dist/chunks/{chunk.ZSPNI52I.js → chunk.AEGKKYZ4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.RVOALTE4.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";

package/dist/chunks/{chunk.5DVIZLXZ.js → chunk.AGQDJZXG.js}

@@ -3,11 +3,11 @@ import {
 } from "./chunk.QWPEXQZX.js";
 import {
   DSATooltip
-} from "./chunk.UBA2H662.js";
+} from "./chunk.DI4J6YRC.js";
 import {
   HasSlotController,
   getTextContent
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   ifDefinedAndNotEmpty
 } from "./chunk.ZQJVCRB2.js";

package/dist/chunks/{chunk.SYQNO5B4.js → chunk.BADNDBKF.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.JIN6PGAK.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";

package/dist/chunks/{chunk.ITBFUL7J.js → chunk.BBH5JFVX.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.6QDM5FUA.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   FormControlController
 } from "./chunk.DJLJEQST.js";

package/dist/chunks/{chunk.M347TELO.js → chunk.BJPQ42FM.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.IJYHCSO5.js";
 import {
   FilterBase
-} from "./chunk.KOO2JWHZ.js";
+} from "./chunk.HTXWT3CI.js";
 import {
   DSACalendar
-} from "./chunk.MRGJKLE3.js";
+} from "./chunk.UZZ34Z5W.js";
 import {
   formatDateRange,
   getDateFromISO,
@@ -14,7 +14,7 @@ import {
   getLocaleDateFromISO,
   isValidDate,
   parseDateRange
-} from "./chunk.OYVF3HNG.js";
+} from "./chunk.TIM2RCEB.js";
 import {
   DSAButton
 } from "./chunk.2G35OVLZ.js";

package/dist/chunks/{chunk.H7TB3KTK.js → chunk.BKW7OOII.js}

@@ -1,6 +1,6 @@
 import {
   DSAMenuItem
-} from "./chunk.5DVIZLXZ.js";
+} from "./chunk.AGQDJZXG.js";
 import {
   menu_navigation_styles_default
 } from "./chunk.Z4R36OG7.js";

package/dist/chunks/{chunk.4IDR4RJI.js → chunk.CP3HQO7Z.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.I6S6TC3T.js";
 import {
   InputBase
-} from "./chunk.7HMEK2ND.js";
+} from "./chunk.E7CTAIEF.js";
 import {
   DSAIconButton
 } from "./chunk.2GTXVMMC.js";

package/dist/chunks/{chunk.UBA2H662.js → chunk.DI4J6YRC.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.UVGAHM33.js";
 import {
   DSAPopup
-} from "./chunk.GYWU4AAB.js";
+} from "./chunk.EWO55RR2.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";

package/dist/chunks/{chunk.3D7AGBFQ.js → chunk.DYV7U6UU.js}

@@ -5,7 +5,6 @@ var specialCharMatcher = /[^a-zA-Z0-9#?_]/;
 var alphaCharPattern = /[A-Z]/i;
 var digitCharPattern = /\d/;
 var maskCharsCache = /* @__PURE__ */ new Map();
-var normalCharPattern = /^[_A-z0-9]*((-)*[_A-z0-9])*$/;
 var maskOptions = {
   allChar: "_",
   numericChar: "#dDmMyYaA09",
@@ -251,7 +250,6 @@ var NIRTestValues = ["187089932132113"];
 
 export {
   specialCharPattern,
-  normalCharPattern,
   maskOptions,
   stripSpecialChars,
   rawValueToMaskedValue,

package/dist/chunks/{chunk.JBFJWJUF.js → chunk.E6UAGCKS.js}

@@ -1,6 +1,6 @@
 import {
   DSASearch
-} from "./chunk.ITFYDUMM.js";
+} from "./chunk.KR4VFINH.js";
 import {
   header_search_styles_default
 } from "./chunk.FGDQSQXE.js";

package/dist/chunks/{chunk.7HMEK2ND.js → chunk.E7CTAIEF.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.6ZVGYVEL.js";
 import {
   FormControlLayout
-} from "./chunk.RLLACUYR.js";
+} from "./chunk.U73GKQGJ.js";
 import {
   defaultValue
 } from "./chunk.CMJ2SRTL.js";

package/dist/chunks/{chunk.PT2BKEDG.js → chunk.EC6ZMNDK.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.BASV2VAI.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   LocalizeController
 } from "./chunk.DVIHNMQQ.js";

package/dist/chunks/{chunk.RPPERQYB.js → chunk.ECHY7YBZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.2RZJMNNG.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.BZFZTT6Z.js → chunk.EH7ABWD6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.JIN6PGAK.js";
 import {
   HasSlotController
-} from "./chunk.YIY5RM53.js";
+} from "./chunk.XMFD37RX.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";

package/dist/chunks/{chunk.MOTDL3I3.js → chunk.ENRVP5HO.js}

@@ -27,14 +27,14 @@ var callout_styles_default = css`
     background-color: var(--dsa-wc-callout-default-background-color);
   }
 
-  .callout__title {
-    font: var(--dsa-wc-callout-title-font);
+  .callout__title,
+  .callout__message {
     overflow-wrap: break-word;
-    color: var(--dsa-wc-callout-title-color);
   }
 
-  .callout__message {
-    overflow-wrap: break-word;
+  .callout__title {
+    font: var(--dsa-wc-callout-title-font);
+    color: var(--dsa-wc-callout-title-color);
   }
 
   .callout__text {

package/dist/chunks/{chunk.Y4KCVPIC.js → chunk.EWAET5DR.js}

@@ -1,16 +1,16 @@
+import {
+  input_mask_styles_default
+} from "./chunk.VDZUSRNI.js";
 import {
   buildValidityState,
   maskedValueToRawValue,
   rawValueToMaskedValue,
   renderMaskOverlay,
   stripSpecialChars
-} from "./chunk.3D7AGBFQ.js";
-import {
-  input_mask_styles_default
-} from "./chunk.VDZUSRNI.js";
+} from "./chunk.DYV7U6UU.js";
 import {
   InputBase
-} from "./chunk.7HMEK2ND.js";
+} from "./chunk.E7CTAIEF.js";
 import {
   DSAIconButton
 } from "./chunk.2GTXVMMC.js";

package/dist/chunks/{chunk.GYWU4AAB.js → chunk.EWO55RR2.js}

@@ -45,9 +45,10 @@ var DSAPopup = class extends ShoelaceElement {
     this.autoSizePadding = 0;
     this.hoverBridge = false;
     this.updateHoverBridge = () => {
-      if (this.hoverBridge && this.anchorEl) {
-        const anchorRect = this.anchorEl.getBoundingClientRect();
-        const popupRect = this.popup.getBoundingClientRect();
+      const { anchorEl, popup, style } = this;
+      if (this.hoverBridge && anchorEl) {
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const popupRect = popup.getBoundingClientRect();
         const isVertical = this.placement.includes("top") || this.placement.includes("bottom");
         let topLeftX = 0;
         let topLeftY = 0;
@@ -98,26 +99,14 @@ var DSAPopup = class extends ShoelaceElement {
             bottomRightY = anchorRect.bottom;
           }
         }
-        this.style.setProperty("--hover-bridge-top-left-x", `${topLeftX}px`);
-        this.style.setProperty("--hover-bridge-top-left-y", `${topLeftY}px`);
-        this.style.setProperty("--hover-bridge-top-right-x", `${topRightX}px`);
-        this.style.setProperty("--hover-bridge-top-right-y", `${topRightY}px`);
-        this.style.setProperty(
-          "--hover-bridge-bottom-left-x",
-          `${bottomLeftX}px`
-        );
-        this.style.setProperty(
-          "--hover-bridge-bottom-left-y",
-          `${bottomLeftY}px`
-        );
-        this.style.setProperty(
-          "--hover-bridge-bottom-right-x",
-          `${bottomRightX}px`
-        );
-        this.style.setProperty(
-          "--hover-bridge-bottom-right-y",
-          `${bottomRightY}px`
-        );
+        style.setProperty("--hover-bridge-top-left-x", `${topLeftX}px`);
+        style.setProperty("--hover-bridge-top-left-y", `${topLeftY}px`);
+        style.setProperty("--hover-bridge-top-right-x", `${topRightX}px`);
+        style.setProperty("--hover-bridge-top-right-y", `${topRightY}px`);
+        style.setProperty("--hover-bridge-bottom-left-x", `${bottomLeftX}px`);
+        style.setProperty("--hover-bridge-bottom-left-y", `${bottomLeftY}px`);
+        style.setProperty("--hover-bridge-bottom-right-x", `${bottomRightX}px`);
+        style.setProperty("--hover-bridge-bottom-right-y", `${bottomRightY}px`);
       }
     };
   }
@@ -195,6 +184,7 @@ var DSAPopup = class extends ShoelaceElement {
     if (!this.active || !this.anchorEl) {
       return;
     }
+    const { anchorEl, popup, arrowEl, style } = this;
     const middleware = [
       // The offset middleware goes first
       offset({ mainAxis: this.distance, crossAxis: this.skidding })
@@ -205,14 +195,14 @@ var DSAPopup = class extends ShoelaceElement {
           apply: ({ rects }) => {
             const syncWidth = this.sync === "width" || this.sync === "both";
             const syncHeight = this.sync === "height" || this.sync === "both";
-            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : "";
-            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : "";
+            popup.style.width = syncWidth ? `${rects.reference.width}px` : "";
+            popup.style.height = syncHeight ? `${rects.reference.height}px` : "";
           }
         })
       );
     } else {
-      this.popup.style.width = "";
-      this.popup.style.height = "";
+      popup.style.width = "";
+      popup.style.height = "";
     }
     if (this.flip) {
       middleware.push(
@@ -240,38 +230,38 @@ var DSAPopup = class extends ShoelaceElement {
           padding: this.autoSizePadding,
           apply: ({ availableWidth, availableHeight }) => {
             if (this.autoSize === "vertical" || this.autoSize === "both") {
-              this.style.setProperty(
+              style.setProperty(
                 "--auto-size-available-height",
                 `${availableHeight}px`
               );
             } else {
-              this.style.removeProperty("--auto-size-available-height");
+              style.removeProperty("--auto-size-available-height");
             }
             if (this.autoSize === "horizontal" || this.autoSize === "both") {
-              this.style.setProperty(
+              style.setProperty(
                 "--auto-size-available-width",
                 `${availableWidth}px`
               );
             } else {
-              this.style.removeProperty("--auto-size-available-width");
+              style.removeProperty("--auto-size-available-width");
             }
           }
         })
       );
     } else {
-      this.style.removeProperty("--auto-size-available-width");
-      this.style.removeProperty("--auto-size-available-height");
+      style.removeProperty("--auto-size-available-width");
+      style.removeProperty("--auto-size-available-height");
     }
     if (this.arrow) {
       middleware.push(
         arrow({
-          element: this.arrowEl,
+          element: arrowEl,
           padding: this.arrowPadding
         })
       );
     }
     const getOffsetParent = this.strategy === "absolute" ? (element) => platform.getOffsetParent(element, offsetParent) : platform.getOffsetParent;
-    computePosition(this.anchorEl, this.popup, {
+    computePosition(anchorEl, popup, {
       placement: this.placement,
       middleware,
       strategy: this.strategy,
@@ -287,35 +277,36 @@ var DSAPopup = class extends ShoelaceElement {
         left: "right"
       }[placement.split("-")[0]];
       this.setAttribute("data-current-placement", placement);
-      Object.assign(this.popup.style, {
+      Object.assign(popup.style, {
         left: `${x}px`,
         top: `${y}px`
       });
       if (this.arrow) {
+        const { arrowPadding, arrowPlacement } = this;
         const arrowX = middlewareData.arrow.x;
         const arrowY = middlewareData.arrow.y;
         let top = "";
         let right = "";
         let bottom = "";
         let left = "";
-        if (this.arrowPlacement === "start") {
-          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
-          top = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+        if (arrowPlacement === "start") {
+          const value = typeof arrowX === "number" ? `calc(${arrowPadding}px - var(--arrow-padding-offset))` : "";
+          top = typeof arrowY === "number" ? `calc(${arrowPadding}px - var(--arrow-padding-offset))` : "";
           right = isRtl ? value : "";
           left = isRtl ? "" : value;
-        } else if (this.arrowPlacement === "end") {
-          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+        } else if (arrowPlacement === "end") {
+          const value = typeof arrowX === "number" ? `calc(${arrowPadding}px - var(--arrow-padding-offset))` : "";
           right = isRtl ? "" : value;
           left = isRtl ? value : "";
-          bottom = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
-        } else if (this.arrowPlacement === "center") {
+          bottom = typeof arrowY === "number" ? `calc(${arrowPadding}px - var(--arrow-padding-offset))` : "";
+        } else if (arrowPlacement === "center") {
           left = typeof arrowX === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
           top = typeof arrowY === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
         } else {
           left = typeof arrowX === "number" ? `${arrowX}px` : "";
           top = typeof arrowY === "number" ? `${arrowY}px` : "";
         }
-        Object.assign(this.arrowEl.style, {
+        Object.assign(arrowEl.style, {
           top,
           right,
           bottom,
@@ -328,6 +319,7 @@ var DSAPopup = class extends ShoelaceElement {
     this.emit("dsa-reposition");
   }
   render() {
+    const { active, strategy, arrow: hasArrow, hoverBridge } = this;
     return html`
       <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
 
@@ -335,7 +327,7 @@ var DSAPopup = class extends ShoelaceElement {
         part="hover-bridge"
         class=${classMap({
       "popup-hover-bridge": true,
-      "popup-hover-bridge--visible": this.hoverBridge && this.active
+      "popup-hover-bridge--visible": hoverBridge && active
     })}
       ></span>
 
@@ -343,13 +335,13 @@ var DSAPopup = class extends ShoelaceElement {
         part="popup"
         class=${classMap({
       popup: true,
-      "popup--active": this.active,
-      "popup--fixed": this.strategy === "fixed",
-      "popup--has-arrow": this.arrow
+      "popup--active": active,
+      "popup--fixed": strategy === "fixed",
+      "popup--has-arrow": hasArrow
     })}
       >
         <slot></slot>
-        ${this.arrow ? html`<div
+        ${hasArrow ? html`<div
               part="arrow"
               class="popup__arrow"
               role="presentation"