@ds-autonomie/web-components 2.18.0 → 2.20.0

package/dist/chunks/{chunk.VKBTTWXW.js → chunk.6EOZYFCK.js}

@@ -1,6 +1,6 @@
 import {
   tab_group_styles_default
-} from "./chunk.LZPAAWTZ.js";
+} from "./chunk.VPZ2H23V.js";
 import {
   debounce
 } from "./chunk.UKOZXT7U.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.EMIT7S33.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.MWPOWC6N.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -18,7 +18,10 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
+import {
+  setAttributeIfDifferent
+} from "./chunk.PSYTLBRK.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -68,7 +71,7 @@ var DSATabGroup = class extends ShoelaceElement {
       if (instanceMutations.some(
         (m) => !["aria-labelledby", "aria-controls"].includes(m.attributeName)
       )) {
-        setTimeout(() => this.setAriaLabels());
+        queueMicrotask(() => this.setAriaLabels());
       }
       if (instanceMutations.some((m) => m.attributeName === "disabled")) {
         this.syncTabsAndPanels();
@@ -118,8 +121,7 @@ var DSATabGroup = class extends ShoelaceElement {
     ]);
   }
   getAllTabs(options = { includeDisabled: true }) {
-    const slot = this.shadowRoot.querySelector('slot[name="nav"]');
-    return [...slot.assignedElements()].filter((el) => {
+    return [...this.navSlot.assignedElements()].filter((el) => {
       return options.includeDisabled ? el.tagName.toLowerCase() === "dsa-tab" : el.tagName.toLowerCase() === "dsa-tab" && !el.disabled;
     });
   }
@@ -156,9 +158,7 @@ var DSATabGroup = class extends ShoelaceElement {
     if (["Enter", " "].includes(event.key)) {
       if (tab !== null) {
         if (tab.closable) {
-          const closeButton = tab.shadowRoot.querySelector(
-            '[part~="close-button"]'
-          );
+          const closeButton = tab.closeButton;
           if ((closeButton == null ? void 0 : closeButton.hasFocus) === true) {
             this.emit("dsa-close");
           }
@@ -177,16 +177,15 @@ var DSATabGroup = class extends ShoelaceElement {
       "Escape"
     ].includes(event.key)) {
       const activeEl = this.tabs.find((t) => t.matches(":focus"));
-      const isRtl = this.localize.dir() === "rtl";
       if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "dsa-tab") {
         let index = this.tabs.indexOf(activeEl);
         if (event.key === "Home") {
           index = 0;
         } else if (event.key === "End") {
           index = this.tabs.length - 1;
-        } else if (["top", "bottom"].includes(this.placement) && event.key === (isRtl ? "ArrowRight" : "ArrowLeft") || ["start", "end"].includes(this.placement) && event.key === "ArrowUp") {
+        } else if (["top", "bottom"].includes(this.placement) && event.key === "ArrowLeft" || ["start", "end"].includes(this.placement) && event.key === "ArrowUp") {
           index--;
-        } else if (["top", "bottom"].includes(this.placement) && event.key === (isRtl ? "ArrowLeft" : "ArrowRight") || ["start", "end"].includes(this.placement) && event.key === "ArrowDown") {
+        } else if (["top", "bottom"].includes(this.placement) && event.key === "ArrowRight" || ["start", "end"].includes(this.placement) && event.key === "ArrowDown") {
           index++;
         }
         if (index < 0) {
@@ -208,13 +207,13 @@ var DSATabGroup = class extends ShoelaceElement {
   }
   handleScrollToStart() {
     this.nav.scroll({
-      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft + this.nav.clientWidth : this.nav.scrollLeft - this.nav.clientWidth,
+      left: this.nav.scrollLeft - this.nav.clientWidth,
       behavior: "smooth"
     });
   }
   handleScrollToEnd() {
     this.nav.scroll({
-      left: this.localize.dir() === "rtl" ? this.nav.scrollLeft - this.nav.clientWidth : this.nav.scrollLeft + this.nav.clientWidth,
+      left: this.nav.scrollLeft + this.nav.clientWidth,
       behavior: "smooth"
     });
   }
@@ -229,11 +228,22 @@ var DSATabGroup = class extends ShoelaceElement {
     if (tab !== this.activeTab && !tab.disabled) {
       const previousTab = this.activeTab;
       this.activeTab = tab;
-      this.tabs.map((el) => {
+      this.tabs.forEach((el) => {
         const isActive = el === this.activeTab;
-        el.active = isActive;
-        el.tabIndex = isActive ? 0 : -1;
-        return el;
+        if (el.active !== isActive) {
+          el.active = isActive;
+        }
+        const tabIndexValue = isActive ? 0 : -1;
+        if (el.tabIndex !== tabIndexValue) {
+          el.tabIndex = tabIndexValue;
+        }
+      });
+      this.panels.forEach((el) => {
+        var _a;
+        const isActive = el.name === ((_a = this.activeTab) == null ? void 0 : _a.panel);
+        if (el.active !== isActive) {
+          el.active = isActive;
+        }
       });
       this.panels.map((el) => {
         var _a;
@@ -260,8 +270,14 @@ var DSATabGroup = class extends ShoelaceElement {
     this.tabs.forEach((tab) => {
       const panel = this.panels.find((el) => el.name === tab.panel);
       if (panel) {
-        tab.setAttribute("aria-controls", panel.getAttribute("id"));
-        panel.setAttribute("aria-labelledby", tab.getAttribute("id"));
+        const panelId = panel.getAttribute("id");
+        const tabId = tab.getAttribute("id");
+        if (panelId) {
+          setAttributeIfDifferent(tab, "aria-controls", panelId);
+        }
+        if (tabId) {
+          setAttributeIfDifferent(panel, "aria-labelledby", tabId);
+        }
       }
     });
   }
@@ -272,7 +288,6 @@ var DSATabGroup = class extends ShoelaceElement {
     }
     const width = currentTab.clientWidth;
     const height = currentTab.clientHeight;
-    const isRtl = this.localize.dir() === "rtl";
     const allTabs = this.getAllTabs();
     const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
     const offset = precedingTabs.reduce(
@@ -285,15 +300,37 @@ var DSATabGroup = class extends ShoelaceElement {
     switch (this.placement) {
       case "top":
       case "bottom":
-        this.indicator.style.width = `${width}px`;
-        this.indicator.style.height = "auto";
-        this.indicator.style.translate = isRtl ? `${-1 * offset.left}px` : `${offset.left}px`;
+        {
+          const widthValue = `${width}px`;
+          const heightValue = "auto";
+          const translateValue = `${offset.left}px`;
+          if (this.indicator.style.width !== widthValue) {
+            this.indicator.style.width = widthValue;
+          }
+          if (this.indicator.style.height !== heightValue) {
+            this.indicator.style.height = heightValue;
+          }
+          if (this.indicator.style.translate !== translateValue) {
+            this.indicator.style.translate = translateValue;
+          }
+        }
         break;
       case "start":
       case "end":
-        this.indicator.style.width = "auto";
-        this.indicator.style.height = `${height}px`;
-        this.indicator.style.translate = `0 ${offset.top}px`;
+        {
+          const widthValue = "auto";
+          const heightValue = `${height}px`;
+          const translateValue = `0 ${offset.top}px`;
+          if (this.indicator.style.width !== widthValue) {
+            this.indicator.style.width = widthValue;
+          }
+          if (this.indicator.style.height !== heightValue) {
+            this.indicator.style.height = heightValue;
+          }
+          if (this.indicator.style.translate !== translateValue) {
+            this.indicator.style.translate = translateValue;
+          }
+        }
         break;
     }
   }
@@ -303,18 +340,26 @@ var DSATabGroup = class extends ShoelaceElement {
     this.panels = this.getAllPanels();
     let activeIndex = -1;
     this.tabs.forEach((tab, index) => {
-      tab.tabIndex = -1;
+      if (tab.tabIndex !== -1) {
+        tab.tabIndex = -1;
+      }
       if (tab.active) {
-        tab.tabIndex = 0;
+        if (tab.tabIndex !== 0) {
+          tab.tabIndex = 0;
+        }
         activeIndex = index;
       }
     });
     activeIndex = activeIndex === -1 ? 0 : activeIndex;
     if (this.tabs[activeIndex] !== void 0) {
-      this.tabs[activeIndex].active = true;
+      if (!this.tabs[activeIndex].active) {
+        this.tabs[activeIndex].active = true;
+      }
     }
     if (this.panels[activeIndex] !== void 0) {
-      this.panels[activeIndex].active = true;
+      if (!this.panels[activeIndex].active) {
+        this.panels[activeIndex].active = true;
+      }
     }
     this.syncIndicator();
     this.updateComplete.then(() => this.updateScrollControls());
@@ -329,16 +374,26 @@ var DSATabGroup = class extends ShoelaceElement {
     this.updateScrollButtonsStates();
   }
   updateScrollButtonsStates() {
-    this.isStartScrollButtonDisabled = this.nav.scrollLeft === 0;
-    this.isEndScrollButtonDisabled = this.nav.scrollLeft + this.nav.clientWidth === this.nav.scrollWidth;
+    const isStartDisabled = this.nav.scrollLeft <= 0;
+    const isEndDisabled = this.nav.scrollLeft + this.nav.clientWidth >= this.nav.scrollWidth;
+    if (this.isStartScrollButtonDisabled !== isStartDisabled) {
+      this.isStartScrollButtonDisabled = isStartDisabled;
+    }
+    if (this.isEndScrollButtonDisabled !== isEndDisabled) {
+      this.isEndScrollButtonDisabled = isEndDisabled;
+    }
   }
   syncIndicator() {
     const tab = this.getActiveTab();
     if (tab) {
-      this.indicator.style.display = "block";
+      if (this.indicator.style.display !== "block") {
+        this.indicator.style.display = "block";
+      }
       this.repositionIndicator();
     } else {
-      this.indicator.style.display = "none";
+      if (this.indicator.style.display !== "none") {
+        this.indicator.style.display = "none";
+      }
     }
   }
   /** Shows the specified tab panel. */
@@ -349,7 +404,6 @@ var DSATabGroup = class extends ShoelaceElement {
     }
   }
   render() {
-    const isRtl = this.localize.dir() === "rtl";
     if (!this.accessibleName) {
       a11yWarning(
         "<dsa-tab-group> requires an accessible name for accessibility"
@@ -363,7 +417,6 @@ var DSATabGroup = class extends ShoelaceElement {
       "tab-group--bottom": this.placement === "bottom",
       "tab-group--start": this.placement === "start",
       "tab-group--end": this.placement === "end",
-      "tab-group--rtl": this.localize.dir() === "rtl",
       "tab-group--has-scroll-controls": this.hasScrollControls,
       "tab-group--below-page-header": this.belowPageHeader
     })}
@@ -377,7 +430,7 @@ var DSATabGroup = class extends ShoelaceElement {
                     part="scroll-button scroll-button--start"
                     exportparts="base:scroll-button__base"
                     class="tab-group__scroll-button tab-group__scroll-button--start"
-                    name=${isRtl ? "chevron_right" : "chevron_left"}
+                    name="chevron_left"
                     label=${this.localize.term("scrollToStart")}
                     @click=${this.handleScrollToStart}
                     library="system"
@@ -411,7 +464,7 @@ var DSATabGroup = class extends ShoelaceElement {
                     part="scroll-button scroll-button--end"
                     exportparts="base:scroll-button__base"
                     class="tab-group__scroll-button tab-group__scroll-button--end"
-                    name=${isRtl ? "chevron_left" : "chevron_right"}
+                    name="chevron_right"
                     label=${this.localize.term("scrollToEnd")}
                     @click=${this.handleScrollToEnd}
                     library="system"
@@ -448,6 +501,9 @@ __decorateClass([
 __decorateClass([
   query(".tab-group__indicator")
 ], DSATabGroup.prototype, "indicator", 2);
+__decorateClass([
+  query('slot[name="nav"]')
+], DSATabGroup.prototype, "navSlot", 2);
 __decorateClass([
   state()
 ], DSATabGroup.prototype, "hasScrollControls", 2);

package/dist/chunks/{chunk.K27SKJCO.js → chunk.74CLWWSO.js}

@@ -19,8 +19,9 @@ var footer_mandatory_mentions_styles_default = css`
 
   [part~='divider'] {
     display: none;
-    --spacing-start: var(--dsa-wc-footer-mandatory-mentions-spacing);
-    --spacing-end: var(--dsa-wc-footer-mandatory-mentions-spacing);
+    --spacing: var(--dsa-wc-footer-mandatory-mentions-spacing);
+    --spacing-start: var(--spacing);
+    --spacing-end: var(--spacing);
   }
 
   [part~='text-left']::slotted(*),

package/dist/chunks/{chunk.FF67XKLP.js → chunk.75USPA7U.js}

@@ -13,44 +13,49 @@ import {
 
 // src/components/stepper/stepper.ts
 import { html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 var STEP_TAG = "dsa-step";
 var DSAStepper = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
+    this.allSteps = [];
     this.hideLabel = false;
     this.vertical = false;
   }
   connectedCallback() {
     super.connectedCallback();
   }
-  // Gets an array of all <dsa-step> elements
-  getAllSteps() {
-    return [...this.querySelectorAll(STEP_TAG)];
+  refreshAllSteps() {
+    this.allSteps = this.defaultSlot ? this.defaultSlot.assignedElements({ flatten: true }).filter((element) => element.tagName.toLowerCase() === STEP_TAG).map((element) => element) : [];
+  }
+  applyStepProps(steps) {
+    steps.forEach((step, index) => {
+      const stepIndex = this.hideLabel ? void 0 : index;
+      if (step.index !== stepIndex) {
+        step.index = stepIndex;
+      }
+      if (step.vertical !== this.vertical) {
+        step.vertical = this.vertical;
+      }
+    });
   }
   handleDefaultSlotChange() {
-    const allSteps = this.getAllSteps();
+    this.refreshAllSteps();
     if (customElements.get(STEP_TAG)) {
-      allSteps.forEach((step, index) => {
-        step.index = this.hideLabel ? void 0 : index;
-        step.vertical = this.vertical;
-      });
+      this.applyStepProps(this.allSteps);
     } else {
-      customElements.whenDefined(STEP_TAG).then(() => this.handleDefaultSlotChange());
+      customElements.whenDefined(STEP_TAG).then(() => {
+        this.refreshAllSteps();
+        this.applyStepProps(this.allSteps);
+      });
     }
   }
   handleHideLabelChange() {
-    const allSteps = this.getAllSteps();
-    allSteps.forEach((step, index) => {
-      step.index = this.hideLabel ? void 0 : index;
-    });
+    this.applyStepProps(this.allSteps);
   }
   handleVerticalChange() {
-    const allSteps = this.getAllSteps();
-    allSteps.forEach((step) => {
-      step.vertical = this.vertical;
-    });
+    this.applyStepProps(this.allSteps);
   }
   render() {
     return html`
@@ -67,6 +72,9 @@ var DSAStepper = class extends ShoelaceElement {
   }
 };
 DSAStepper.styles = stepper_styles_default;
+__decorateClass([
+  query("slot")
+], DSAStepper.prototype, "defaultSlot", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-label" })
 ], DSAStepper.prototype, "hideLabel", 2);

package/dist/chunks/{chunk.M5X6QE4H.js → chunk.7I4SBUOE.js}

@@ -1,6 +1,6 @@
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.MWPOWC6N.js";
 import {
   waitForEvent
 } from "./chunk.B4BZKR24.js";
@@ -17,10 +17,10 @@ import {
 } from "./chunk.PWL7QCVG.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";

package/dist/chunks/{chunk.PENDUUVT.js → chunk.A4X3GH4U.js}

@@ -1,6 +1,6 @@
 import {
   navbar_styles_default
-} from "./chunk.UC5S2IUH.js";
+} from "./chunk.JLAQUWWF.js";
 import {
   watch
 } from "./chunk.QB2NJE2Y.js";
@@ -20,29 +20,31 @@ var DSANavbar = class extends ShoelaceElement {
   constructor() {
     super(...arguments);
     this.currentOpenMenu = null;
+    this.allChildren = [];
+    this.allMenus = [];
     this.mobile = false;
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
   handleSlotChange() {
-    this.getAllChildren().forEach((el) => {
-      el.mobile = this.mobile;
+    const assignedElements = this.defaultSlot.assignedElements({ flatten: true }).filter((el) => {
+      const tagName = el.tagName.toLowerCase();
+      return tagName === MENU_TAG || tagName === LINK_TAG;
     });
+    this.allChildren = assignedElements;
+    this.allMenus = assignedElements.filter(
+      (el) => this.isNavbarMenu(el)
+    );
+    this.syncChildrenMobileState();
+    this.syncMobileVisibility();
   }
   handleMobileChange() {
-    this.getAllChildren().forEach((el) => {
-      if (this.mobile) {
-        el.setAttribute("mobile", "true");
-      } else {
-        el.removeAttribute("mobile");
-      }
-      this.currentOpenMenu = null;
-      el.classList.remove("hidden");
-      if (this.isNavbarMenu(el)) {
-        el.removeAttribute("open");
+    this.currentOpenMenu = null;
+    this.syncChildrenMobileState();
+    this.allChildren.forEach((el) => {
+      if (this.isNavbarMenu(el) && el.open) {
+        el.open = false;
       }
     });
+    this.syncMobileVisibility();
   }
   handleMenuShow(event) {
     if (!this.mobile) return;
@@ -50,39 +52,42 @@ var DSANavbar = class extends ShoelaceElement {
     const menu = target.closest(MENU_TAG);
     if (menu) {
       this.currentOpenMenu = menu;
+      this.syncMobileVisibility();
     }
   }
   handleMenuHide() {
     if (!this.mobile) return;
-    if (!this.getAllMenus().some((el) => el.open)) {
+    if (!this.allMenus.some((el) => el.open)) {
       this.currentOpenMenu = null;
+      this.syncMobileVisibility();
     }
   }
-  getAllChildren() {
-    return [
-      ...this.querySelectorAll(MENU_TAG),
-      ...this.querySelectorAll(LINK_TAG)
-    ];
+  syncChildrenMobileState() {
+    this.allChildren.forEach((el) => {
+      if (el.mobile !== this.mobile) {
+        el.mobile = this.mobile;
+      }
+    });
   }
-  getAllMenus() {
-    return [...this.querySelectorAll(MENU_TAG)];
+  syncMobileVisibility() {
+    if (!this.mobile) {
+      this.allChildren.forEach((el) => {
+        el.classList.remove("hidden");
+      });
+      return;
+    }
+    this.allChildren.forEach((el) => {
+      const shouldHide = this.currentOpenMenu !== null && el !== this.currentOpenMenu;
+      el.classList.toggle("hidden", shouldHide);
+      if (shouldHide && this.isNavbarMenu(el) && el.open) {
+        el.open = false;
+      }
+    });
   }
   isNavbarMenu(el) {
     return el.tagName.toLowerCase() === MENU_TAG;
   }
   render() {
-    if (this.mobile) {
-      this.getAllChildren().forEach((el) => {
-        if (this.currentOpenMenu === null || el === this.currentOpenMenu) {
-          el.classList.remove("hidden");
-        } else {
-          el.classList.add("hidden");
-          if (this.isNavbarMenu(el)) {
-            el.removeAttribute("open");
-          }
-        }
-      });
-    }
     return html`
       <div role="list" class="navbar__list">
         <slot
@@ -95,18 +100,18 @@ var DSANavbar = class extends ShoelaceElement {
   }
 };
 DSANavbar.styles = navbar_styles_default;
-__decorateClass([
-  query("nav")
-], DSANavbar.prototype, "navbar", 2);
 __decorateClass([
   query("slot")
 ], DSANavbar.prototype, "defaultSlot", 2);
 __decorateClass([
   state()
-], DSANavbar.prototype, "allMenus", 2);
+], DSANavbar.prototype, "currentOpenMenu", 2);
 __decorateClass([
   state()
-], DSANavbar.prototype, "currentOpenMenu", 2);
+], DSANavbar.prototype, "allChildren", 2);
+__decorateClass([
+  state()
+], DSANavbar.prototype, "allMenus", 2);
 __decorateClass([
   property({ type: Boolean })
 ], DSANavbar.prototype, "mobile", 2);

package/dist/chunks/{chunk.PEWNJNAP.js → chunk.AAHDC2DF.js}

@@ -1,6 +1,6 @@
 import {
   progress_bar_styles_default
-} from "./chunk.767V7QP2.js";
+} from "./chunk.ADV67KWS.js";
 import {
   a11yWarning
 } from "./chunk.PWL7QCVG.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.ZQJVCRB2.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -21,6 +21,7 @@ import {
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 var DSAProgressBar = class extends ShoelaceElement {
   constructor() {
@@ -51,7 +52,7 @@ var DSAProgressBar = class extends ShoelaceElement {
     )}
         aria-valuemin="0"
         aria-valuemax="100"
-        aria-valuenow=${this.indeterminate ? 0 : this.value}
+        aria-valuenow=${ifDefined(this.indeterminate ? void 0 : this.value)}
       >
         <div
           part="indicator"

package/dist/chunks/{chunk.D6D5UTHQ.js → chunk.AAZSI6N4.js}

@@ -1,21 +1,21 @@
 import {
   DSASearch
-} from "./chunk.PGXKP7ME.js";
+} from "./chunk.UYMQI7J5.js";
 import {
   header_search_styles_default
 } from "./chunk.FGDQSQXE.js";
 import {
   DSAButton
-} from "./chunk.UNDVQ2N3.js";
+} from "./chunk.B6XSS23Y.js";
 import {
   DSAIconButton
-} from "./chunk.WNESPUKK.js";
+} from "./chunk.MWPOWC6N.js";
 import {
   LocalizeController
-} from "./chunk.WHHYA5VY.js";
+} from "./chunk.34HS7ICN.js";
 import {
   DSAIcon
-} from "./chunk.CKJJ4MSU.js";
+} from "./chunk.NJQ6BFQQ.js";
 import {
   ShoelaceElement
 } from "./chunk.SVWU6JW4.js";
@@ -45,10 +45,14 @@ var DSAHeaderSearch = class extends ShoelaceElement {
     this.input.focus();
   }
   handleChange() {
-    this.value = this.search.value;
+    if (this.value !== this.search.value) {
+      this.value = this.search.value;
+    }
   }
   handleInput() {
-    this.value = this.search.value;
+    if (this.value !== this.search.value) {
+      this.value = this.search.value;
+    }
   }
   async handleCancelClick() {
     this.emit("dsa-collapse");

package/dist/chunks/{chunk.767V7QP2.js → chunk.ADV67KWS.js}

@@ -13,7 +13,7 @@ var progress_bar_styles_default = css`
 
   .progress-bar {
     position: relative;
-    background-color: var(--dsa-wc-progress-bar-track-color);
+    background: var(--dsa-wc-progress-bar-track-color);
     height: var(--dsa-wc-progress-bar-height);
     border-radius: var(--dsa-wc-progress-bar-border-radius);
     box-shadow: inset var(--dsa-wc-shadow-small);
@@ -23,15 +23,13 @@ var progress_bar_styles_default = css`
   .progress-bar__indicator {
     height: 100%;
     font: var(--dsa-wc-progress-bar-font);
-    background-color: var(--dsa-wc-progress-bar-indicator-color);
+    background: var(--dsa-wc-progress-bar-indicator-color);
     color: var(--dsa-wc-progress-bar-indicator-label-color);
     text-align: center;
     line-height: var(--dsa-wc-progress-bar-height);
     white-space: nowrap;
     overflow: hidden;
-    transition:
-      400ms width,
-      400ms background-color;
+    transition: width 400ms;
     user-select: none;
   }
 
@@ -41,7 +39,6 @@ var progress_bar_styles_default = css`
     animation: indeterminate 2.5s var(--dsa-wc-no-animations-duration, infinite)
       cubic-bezier(0.37, 0, 0.63, 1);
   }
-
   .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
     animation-name: indeterminate-rtl;
   }
@@ -49,12 +46,11 @@ var progress_bar_styles_default = css`
   @media (forced-colors: active) {
     .progress-bar {
       outline: solid 1px SelectedItem;
-      background-color: var(--dsa-wc-progress-bar-indicator-label-color);
+      background: var(--dsa-wc-progress-bar-indicator-label-color);
     }
-
     .progress-bar__indicator {
       outline: solid 1px SelectedItem;
-      background-color: SelectedItem;
+      background: SelectedItem;
     }
   }
 
@@ -69,7 +65,6 @@ var progress_bar_styles_default = css`
       width: 50%;
     }
   }
-
   @keyframes indeterminate-rtl {
     0% {
       right: -50%;