@synergy-design-system/components 2.31.2 → 2.32.0

package/dist/chunks/{chunk.3JXNFR6T.js → chunk.NOESO6WV.js}

@@ -1,6 +1,6 @@
 import {
   SynCombobox
-} from "./chunk.IY34DPIJ.js";
+} from "./chunk.N5CECNHU.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = SynCombobox;
@@ -9,4 +9,4 @@ SynCombobox.define("syn-combobox");
 export {
   combobox_default
 };
-//# sourceMappingURL=chunk.3JXNFR6T.js.map
+//# sourceMappingURL=chunk.NOESO6WV.js.map

package/dist/chunks/{chunk.FTFMQV75.js → chunk.NXKFEIMZ.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk.JCIM6NE3.js";
 import {
   SynPopup
-} from "./chunk.LLNE7YOD.js";
+} from "./chunk.N634EXYZ.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -22,18 +22,18 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.HQ6QUSK7.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.IPGLY3H4.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -385,4 +385,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.FTFMQV75.js.map
+//# sourceMappingURL=chunk.NXKFEIMZ.js.map

package/dist/chunks/{chunk.CLTYOE3E.js → chunk.O66H6R5X.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.UMTN2TU2.js";
+} from "./chunk.34UKMOAN.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.CLTYOE3E.js.map
+//# sourceMappingURL=chunk.O66H6R5X.js.map

package/dist/chunks/{chunk.22PGKUCU.js → chunk.O7S4ZPF7.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.LLNE7YOD.js";
+} from "./chunk.N634EXYZ.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.22PGKUCU.js.map
+//# sourceMappingURL=chunk.O7S4ZPF7.js.map

package/dist/chunks/{chunk.6YPSMCHB.js → chunk.OFOF7ZOR.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -120,4 +120,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.6YPSMCHB.js.map
+//# sourceMappingURL=chunk.OFOF7ZOR.js.map

package/dist/chunks/{chunk.PFSSGWUF.js → chunk.OTRVRUXO.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.MJ7R4QQT.js";
 import {
   SynDivider
-} from "./chunk.KJ5DXPFW.js";
+} from "./chunk.F5XNF33L.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -131,4 +131,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.PFSSGWUF.js.map
+//# sourceMappingURL=chunk.OTRVRUXO.js.map

package/dist/chunks/{chunk.3IVPV3E3.js → chunk.P7N2RZPB.js}

@@ -9,25 +9,25 @@ import {
 } from "./chunk.OJ3N7TWP.js";
 import {
   SynNavItem
-} from "./chunk.DH5KSMJS.js";
+} from "./chunk.BZUKUJ36.js";
 import {
   SynMenu
-} from "./chunk.7RJUAC42.js";
+} from "./chunk.V6HU7SQP.js";
 import {
   SynDropdown
-} from "./chunk.FTFMQV75.js";
+} from "./chunk.NXKFEIMZ.js";
 import {
   SynIcon
-} from "./chunk.B5BVIZ3W.js";
+} from "./chunk.3UCVZ2N3.js";
 import {
   LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.IPGLY3H4.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -209,4 +209,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.3IVPV3E3.js.map
+//# sourceMappingURL=chunk.P7N2RZPB.js.map

package/dist/chunks/{chunk.BO7FAKBN.js → chunk.PIC4O6Q2.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.XAQKFEHH.js";
 import {
   SynDivider
-} from "./chunk.KJ5DXPFW.js";
+} from "./chunk.F5XNF33L.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -22,22 +22,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.B5BVIZ3W.js";
+} from "./chunk.3UCVZ2N3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.IPGLY3H4.js";
 import {
   enableDefaultSettings
-} from "./chunk.NUIJATJY.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.7R4JCT5J.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass,
   __spreadValues
@@ -653,4 +653,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.BO7FAKBN.js.map
+//# sourceMappingURL=chunk.PIC4O6Q2.js.map

package/dist/chunks/{chunk.CELWLWZJ.js → chunk.QXIZDYA4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.CELWLWZJ.js.map
+//# sourceMappingURL=chunk.QXIZDYA4.js.map

package/dist/chunks/{chunk.TZUQMH6X.js → chunk.R42AFTFA.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.OO6R7BWT.js";
+} from "./chunk.AL4FWF4H.js";
 import {
   FormControlController,
   validValidityState
@@ -17,22 +17,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.B5BVIZ3W.js";
+} from "./chunk.3UCVZ2N3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   LocalizeController
-} from "./chunk.GIU3H3J3.js";
+} from "./chunk.IPGLY3H4.js";
 import {
   enableDefaultSettings
-} from "./chunk.NUIJATJY.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.7R4JCT5J.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.TZUQMH6X.js.map
+//# sourceMappingURL=chunk.R42AFTFA.js.map

package/dist/chunks/{chunk.6DPKNL3S.js → chunk.R52TN2LF.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.BO7FAKBN.js";
+} from "./chunk.PIC4O6Q2.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.6DPKNL3S.js.map
+//# sourceMappingURL=chunk.R52TN2LF.js.map

package/dist/chunks/{chunk.JMBUWWA2.js → chunk.RIPTU5BC.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.KJ5DXPFW.js";
+} from "./chunk.F5XNF33L.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.JMBUWWA2.js.map
+//# sourceMappingURL=chunk.RIPTU5BC.js.map

package/dist/chunks/{chunk.S5KXHITD.js → chunk.RPM55AQB.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.OU4PLFYW.js";
+} from "./chunk.IQ23XRJD.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.S5KXHITD.js.map
+//# sourceMappingURL=chunk.RPM55AQB.js.map

package/dist/chunks/{chunk.5XVVEHBO.js → chunk.RUQMHV5V.js}

@@ -1,6 +1,6 @@
 import {
   SynTab
-} from "./chunk.2EJ6TB2U.js";
+} from "./chunk.F7AAPYYY.js";
 
 // src/components/tab/tab.ts
 var tab_default = SynTab;
@@ -9,4 +9,4 @@ SynTab.define("syn-tab");
 export {
   tab_default
 };
-//# sourceMappingURL=chunk.5XVVEHBO.js.map
+//# sourceMappingURL=chunk.RUQMHV5V.js.map

package/dist/chunks/{chunk.CITWLSAM.js → chunk.RVWB22MU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.YTEJW7IF.js";
 import {
   library_system_default
-} from "./chunk.NH4JQFOM.js";
+} from "./chunk.57DU3E3Z.js";
 
 // src/components/icon/library.ts
 var registry = [library_default_default, library_system_default];
@@ -42,4 +42,4 @@ export {
   registerIconLibrary,
   unregisterIconLibrary
 };
-//# sourceMappingURL=chunk.CITWLSAM.js.map
+//# sourceMappingURL=chunk.RVWB22MU.js.map

package/dist/chunks/{chunk.NB47QWRL.js → chunk.RW5BBJ5K.js}

@@ -1,6 +1,6 @@
 import {
   SynDialog
-} from "./chunk.JDN6CDYL.js";
+} from "./chunk.XVFMAH3Z.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SynDialog;
@@ -9,4 +9,4 @@ SynDialog.define("syn-dialog");
 export {
   dialog_default
 };
-//# sourceMappingURL=chunk.NB47QWRL.js.map
+//# sourceMappingURL=chunk.RW5BBJ5K.js.map

package/dist/chunks/{chunk.DZZ3B5GF.js → chunk.SBGVZBBD.js}

@@ -1,18 +1,18 @@
 import {
   side_nav_styles_default
-} from "./chunk.H3HTSQKK.js";
+} from "./chunk.FWLUR33I.js";
+import {
+  SynNavItem
+} from "./chunk.BZUKUJ36.js";
 import {
   SynDivider
-} from "./chunk.KJ5DXPFW.js";
+} from "./chunk.F5XNF33L.js";
 import {
   SynDrawer
-} from "./chunk.SFTF4XCD.js";
+} from "./chunk.W22XP6SZ.js";
 import {
   unlockBodyScrolling
 } from "./chunk.5732DMBC.js";
-import {
-  blurActiveElement
-} from "./chunk.WXVOTRW5.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -25,17 +25,23 @@ import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
+  SynIcon
+} from "./chunk.3UCVZ2N3.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
+import {
+  LocalizeController
+} from "./chunk.IPGLY3H4.js";
+import {
+  enableDefaultSettings
+} from "./chunk.7R4JCT5J.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.WROPOFUG.js";
+} from "./chunk.62JHOU5H.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -52,18 +58,19 @@ var SynSideNav = class extends SynergyElement {
     this.isAnimationActive = false;
     this.open = false;
     this.rail = false;
+    this.variant = "default";
     this.noFocusTrapping = false;
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.addEventListener("syn-initial-focus", (event) => {
-      if (this.rail) {
+      if (this.variant !== "default") {
         event.preventDefault();
         this.drawer["originalTrigger"] = null;
       }
     });
     this.addEventListener("focusin", (event) => {
       const targetTag = event.target.tagName.toLowerCase();
-      if (targetTag === "syn-nav-item" && this.rail && !this.open) {
+      if (targetTag === "syn-nav-item" && this.variant === "rail" && !this.open) {
         this.open = true;
       }
     });
@@ -71,7 +78,7 @@ var SynSideNav = class extends SynergyElement {
       var _a;
       const targetTag = event.target.tagName.toLowerCase();
       const relatedTargetTag = (_a = event.relatedTarget) == null ? void 0 : _a.tagName.toLowerCase();
-      if (targetTag === "syn-nav-item" && relatedTargetTag !== "syn-nav-item" && this.rail && this.open) {
+      if (targetTag === "syn-nav-item" && relatedTargetTag !== "syn-nav-item" && this.variant === "rail" && this.open) {
         this.open = false;
       }
     });
@@ -105,20 +112,9 @@ var SynSideNav = class extends SynergyElement {
     (_a = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _a.removeEventListener("mouseenter", this.handleMouseEnter);
     (_b = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _b.removeEventListener("mouseleave", this.handleMouseLeave);
   }
-  setDrawerVisibility(isVisible) {
-    var _a;
-    this.drawer.shadowRoot.querySelector(".drawer").hidden = !isVisible;
-    (_a = this.drawer.shadowRoot.querySelector(".drawer__panel")) == null ? void 0 : _a.setAttribute("aria-hidden", isVisible ? "false" : "true");
-  }
-  forceDrawerVisibilityForRailMode() {
-    return waitForEvent(this.drawer, "syn-after-hide").then(() => {
-      this.setDrawerVisibility(true);
-      this.isAnimationActive = false;
-    });
-  }
   setDrawerAnimations() {
-    const showAnimation = getAnimation(this, `sideNav.show${this.rail ? "Rail" : "NonRail"}`, { dir: this.localize.dir() });
-    const hideAnimation = getAnimation(this, `sideNav.hide${this.rail ? "Rail" : "NonRail"}`, { dir: this.localize.dir() });
+    const showAnimation = getAnimation(this, `sideNav.show${this.variant === "default" ? "NonRail" : "Rail"}`, { dir: this.localize.dir() });
+    const hideAnimation = getAnimation(this, `sideNav.hide${this.variant === "default" ? "NonRail" : "Rail"}`, { dir: this.localize.dir() });
     const hideOverlay = getAnimation(this, "sideNav.overlay.hide", { dir: this.localize.dir() });
     const showOverlay = getAnimation(this, "sideNav.overlay.show", { dir: this.localize.dir() });
     setAnimation(this.drawer, "drawer.showStart", showAnimation);
@@ -126,36 +122,30 @@ var SynSideNav = class extends SynergyElement {
     setAnimation(this.drawer, "drawer.overlay.hide", hideOverlay);
     setAnimation(this.drawer, "drawer.overlay.show", showOverlay);
   }
-  handleModeChange() {
+  handleVariantChange() {
     this.setDrawerAnimations();
-    if (this.rail) {
-      this.addMouseListener();
-      this.setDrawerVisibility(true);
-    } else {
-      this.removeMouseListener();
-      if (!this.open) {
-        this.setDrawerVisibility(false);
-      }
+    this.drawer.forceVisibility(this.variant !== "default");
+    switch (this.variant) {
+      case "rail":
+        this.addMouseListener();
+        break;
+      case "sticky":
+      case "default":
+      default:
+        this.removeMouseListener();
     }
   }
   handleOpenChange() {
-    if (!this.open) {
-      blurActiveElement(this);
-    }
-    if (!this.rail) {
+    if (this.variant === "default") {
       return;
     }
     this.isAnimationActive = true;
-    if (!this.open) {
-      this.forceDrawerVisibilityForRailMode();
-    } else {
-      waitForEvent(this.drawer, "syn-after-show").then(() => {
-        this.isAnimationActive = false;
-      });
-    }
+    waitForEvent(this.drawer, `syn-after-${this.open ? "show" : "hide"}`).then(() => {
+      this.isAnimationActive = false;
+    });
   }
   handleFocusTrapping() {
-    if (!this.rail) {
+    if (this.variant === "default") {
       if (this.noFocusTrapping) {
         this.drawer.modal.activateExternal();
       } else {
@@ -180,20 +170,28 @@ var SynSideNav = class extends SynergyElement {
     return waitForEvent(this.drawer, "syn-after-hide");
   }
   /**
-   * Initial setup for first render like special rail mode handling and drawer animations.
+   * Initial setup for first render like special variant="rail" and variant="sticky" handling
+   * and drawer animations.
    * */
   firstUpdated() {
     this.setDrawerAnimations();
     this.drawer.updateComplete.then(() => {
+      this.drawer.forceVisibility(this.variant !== "default");
       this.drawer.shadowRoot.querySelector(".drawer__panel").tabIndex = -1;
     });
-    if (this.rail) {
-      this.drawer.updateComplete.then(() => {
-        this.addMouseListener();
-        this.setDrawerVisibility(true);
-      });
-    } else if (this.noFocusTrapping) {
-      this.drawer.modal.activateExternal();
+    switch (this.variant) {
+      case "rail":
+        this.drawer.updateComplete.then(() => {
+          this.addMouseListener();
+        });
+        break;
+      case "sticky":
+        break;
+      case "default":
+      default:
+        if (this.noFocusTrapping) {
+          this.drawer.modal.activateExternal();
+        }
     }
   }
   disconnectedCallback() {
@@ -203,18 +201,36 @@ var SynSideNav = class extends SynergyElement {
       this.drawer.modal.deactivate();
     }
   }
+  // eslint-disable-next-line complexity
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("rail")) {
+      if (this.rail) {
+        console.warn("<syn-side-nav/>: The `rail` attribute is deprecated. Please use the `variant` attribute with `rail` instead. It will be removed in synergy version 3.0");
+      }
+      if (!changedProperties.has("variant") || this.rail) {
+        this.variant = this.rail ? "rail" : "default";
+      }
+    }
+  }
+  toggleOpenState() {
+    this.open = !this.open;
+  }
+  // eslint-disable-next-line complexity
   render() {
     const isTouch = window.navigator.maxTouchPoints > 0 || !!("ontouchstart" in window);
     const hasFooter = this.hasSlotController.test("footer");
+    const showFooterDivider = hasFooter || this.variant === "sticky";
     return html`
       <nav
         class=${classMap({
       "side-nav": true,
       "side-nav--animation": this.isAnimationActive,
-      "side-nav--fix": !this.rail,
+      "side-nav--fix": this.variant === "default",
       "side-nav--has-footer": hasFooter,
       "side-nav--open": this.open,
-      "side-nav--rail": this.rail,
+      "side-nav--rail": this.variant === "rail",
+      "side-nav--sticky": this.variant === "sticky",
       "side-nav--touch": isTouch
     })}
         part="base"
@@ -222,7 +238,7 @@ var SynSideNav = class extends SynergyElement {
         
         <syn-drawer
           class="side-nav__drawer"
-          ?contained=${this.rail}
+          ?contained=${this.variant !== "default"}
           exportparts="overlay,panel,body,base:drawer__base"
           label=${this.localize.term("sideNav")}
           no-header
@@ -237,8 +253,16 @@ var SynSideNav = class extends SynergyElement {
           
           <footer class="side-nav__footer" part="footer-container" slot="footer">  
 
-            ${hasFooter ? html`<syn-divider part="footer-divider" class="side-nav__footer-divider"></syn-divider>` : ""}
-            <slot name="footer" part="footer" ></slot> 
+            ${showFooterDivider ? html`<syn-divider part="footer-divider" class="side-nav__footer-divider"></syn-divider>` : ""}
+            <slot name="footer" part="footer" ></slot>
+            ${this.variant === "sticky" ? html`<syn-nav-item part="toggle-nav-item" class="side-nav__toggle-nav-item" @click=${this.toggleOpenState} ?divider=${hasFooter}>
+                      <slot name="toggle-icon" slot="prefix" class="side-nav__toggle-icon">
+                        <syn-icon library="system" name="sticky_sidebar" part="toggle-icon"></syn-icon>
+                      </slot>
+                      <slot name="toggle-label" part="toggle-label">
+                        ${!this.open && !this.isAnimationActive ? this.localize.term("sideNavShow") : this.localize.term("sideNavHide")}
+                      </slot>
+                    </syn-nav-item>` : ""}
           
           </footer>
 
@@ -251,7 +275,9 @@ var SynSideNav = class extends SynergyElement {
 SynSideNav.styles = [component_styles_default, side_nav_styles_default];
 SynSideNav.dependencies = {
   "syn-divider": SynDivider,
-  "syn-drawer": SynDrawer
+  "syn-drawer": SynDrawer,
+  "syn-icon": SynIcon,
+  "syn-nav-item": SynNavItem
 };
 __decorateClass([
   state()
@@ -265,18 +291,24 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], SynSideNav.prototype, "rail", 2);
+__decorateClass([
+  property({ reflect: true })
+], SynSideNav.prototype, "variant", 2);
 __decorateClass([
   property({ attribute: "no-focus-trapping", reflect: true, type: Boolean })
 ], SynSideNav.prototype, "noFocusTrapping", 2);
 __decorateClass([
-  watch("rail", { waitUntilFirstUpdate: true })
-], SynSideNav.prototype, "handleModeChange", 1);
+  watch("variant", { waitUntilFirstUpdate: true })
+], SynSideNav.prototype, "handleVariantChange", 1);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SynSideNav.prototype, "handleOpenChange", 1);
 __decorateClass([
   watch("noFocusTrapping", { waitUntilFirstUpdate: true })
 ], SynSideNav.prototype, "handleFocusTrapping", 1);
+SynSideNav = __decorateClass([
+  enableDefaultSettings("SynSideNav")
+], SynSideNav);
 setDefaultAnimation("sideNav.showRail", {
   keyframes: [
     { width: "var(--side-nav-rail-width)" },
@@ -317,4 +349,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.DZZ3B5GF.js.map
+//# sourceMappingURL=chunk.SBGVZBBD.js.map