@synergy-design-system/components 2.31.2 → 2.33.0

package/dist/components/radio-group/radio-group.js

@@ -1,21 +1,22 @@
 import {
   radio_group_default
-} from "../../chunks/chunk.7CRVMDW5.js";
-import "../../chunks/chunk.JVSTXX5J.js";
+} from "../../chunks/chunk.WMZ6JC2D.js";
+import "../../chunks/chunk.CD2K65PJ.js";
 import "../../chunks/chunk.32LFHSM5.js";
 import "../../chunks/chunk.K62NPKGN.js";
 import "../../chunks/chunk.AERTEAG5.js";
-import "../../chunks/chunk.CELWLWZJ.js";
+import "../../chunks/chunk.T4JQJQYD.js";
 import "../../chunks/chunk.GRVNUIP2.js";
-import "../../chunks/chunk.OLRA37R5.js";
+import "../../chunks/chunk.HP2LEQRU.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.E5UUNP6E.js";
+import "../../chunks/chunk.HC4N72MX.js";
+import "../../chunks/chunk.6QJYD7WX.js";
+import "../../chunks/chunk.RB2JR2ND.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   radio_group_default as default
 };

package/dist/components/radio-group/radio-group.styles.js

@@ -1,7 +1,7 @@
 import {
   radio_group_styles_default
 } from "../../chunks/chunk.K62NPKGN.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   radio_group_styles_default as default
 };

package/dist/components/range/range.component.js

@@ -1,29 +1,30 @@
 import {
   SynRange
-} from "../../chunks/chunk.XNHQJ4X7.js";
-import "../../chunks/chunk.RZG7IW73.js";
+} from "../../chunks/chunk.FEVFKETA.js";
+import "../../chunks/chunk.C5SA7J6Q.js";
 import "../../chunks/chunk.YT5SHGUK.js";
 import "../../chunks/chunk.O644HRW3.js";
-import "../../chunks/chunk.236RSW67.js";
 import "../../chunks/chunk.UFNQFJO6.js";
-import "../../chunks/chunk.LLNE7YOD.js";
+import "../../chunks/chunk.236RSW67.js";
+import "../../chunks/chunk.HICOUAKU.js";
 import "../../chunks/chunk.AZ3N5IOO.js";
 import "../../chunks/chunk.3NXKLKWH.js";
 import "../../chunks/chunk.AERTEAG5.js";
-import "../../chunks/chunk.OLRA37R5.js";
+import "../../chunks/chunk.HP2LEQRU.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.A3OYJILJ.js";
-import "../../chunks/chunk.HQ6QUSK7.js";
+import "../../chunks/chunk.G6ITZTTW.js";
+import "../../chunks/chunk.7JGKUB4A.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
+import "../../chunks/chunk.E5UUNP6E.js";
+import "../../chunks/chunk.HC4N72MX.js";
+import "../../chunks/chunk.6QJYD7WX.js";
+import "../../chunks/chunk.RB2JR2ND.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   SynRange as default
 };

package/dist/components/range/range.js

@@ -1,30 +1,31 @@
 import {
   range_default
-} from "../../chunks/chunk.K7A64ZY7.js";
-import "../../chunks/chunk.XNHQJ4X7.js";
-import "../../chunks/chunk.RZG7IW73.js";
+} from "../../chunks/chunk.LDZQIZHN.js";
+import "../../chunks/chunk.FEVFKETA.js";
+import "../../chunks/chunk.C5SA7J6Q.js";
 import "../../chunks/chunk.YT5SHGUK.js";
 import "../../chunks/chunk.O644HRW3.js";
-import "../../chunks/chunk.236RSW67.js";
 import "../../chunks/chunk.UFNQFJO6.js";
-import "../../chunks/chunk.LLNE7YOD.js";
+import "../../chunks/chunk.236RSW67.js";
+import "../../chunks/chunk.HICOUAKU.js";
 import "../../chunks/chunk.AZ3N5IOO.js";
 import "../../chunks/chunk.3NXKLKWH.js";
 import "../../chunks/chunk.AERTEAG5.js";
-import "../../chunks/chunk.OLRA37R5.js";
+import "../../chunks/chunk.HP2LEQRU.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.A3OYJILJ.js";
-import "../../chunks/chunk.HQ6QUSK7.js";
+import "../../chunks/chunk.G6ITZTTW.js";
+import "../../chunks/chunk.7JGKUB4A.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
+import "../../chunks/chunk.E5UUNP6E.js";
+import "../../chunks/chunk.HC4N72MX.js";
+import "../../chunks/chunk.6QJYD7WX.js";
+import "../../chunks/chunk.RB2JR2ND.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   range_default as default
 };

package/dist/components/range/range.styles.js

@@ -1,7 +1,7 @@
 import {
   range_styles_default
 } from "../../chunks/chunk.UFNQFJO6.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   range_styles_default as default
 };

package/dist/components/range/utility.js

@@ -3,7 +3,7 @@ import {
   getNormalizedValueFromClientX,
   numericSort
 } from "../../chunks/chunk.236RSW67.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   arraysDiffer,
   getNormalizedValueFromClientX,

package/dist/components/range-tick/range-tick.component.js

@@ -1,10 +1,10 @@
 import {
   SynRangeTick
-} from "../../chunks/chunk.KQQM2CWQ.js";
+} from "../../chunks/chunk.77CM4WNK.js";
 import "../../chunks/chunk.I6YARDHH.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   SynRangeTick as default
 };

package/dist/components/range-tick/range-tick.js

@@ -1,11 +1,11 @@
 import {
   range_tick_default
-} from "../../chunks/chunk.MQZANITC.js";
-import "../../chunks/chunk.KQQM2CWQ.js";
+} from "../../chunks/chunk.2DU5WR27.js";
+import "../../chunks/chunk.77CM4WNK.js";
 import "../../chunks/chunk.I6YARDHH.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   range_tick_default as default
 };

package/dist/components/range-tick/range-tick.styles.js

@@ -1,7 +1,7 @@
 import {
   range_tick_styles_default
 } from "../../chunks/chunk.I6YARDHH.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   range_tick_styles_default as default
 };

package/dist/components/resize-observer/resize-observer.component.js

@@ -1,11 +1,11 @@
 import {
   SynResizeObserver
-} from "../../chunks/chunk.XDWFPRPE.js";
+} from "../../chunks/chunk.L7A52E3B.js";
 import "../../chunks/chunk.OI3HOOCT.js";
-import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   SynResizeObserver as default
 };

package/dist/components/resize-observer/resize-observer.styles.js

@@ -1,7 +1,7 @@
 import {
   resize_observer_styles_default
 } from "../../chunks/chunk.OI3HOOCT.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   resize_observer_styles_default as default
 };

package/dist/components/select/select.component.js

@@ -1,41 +1,42 @@
 import {
   SynSelect
-} from "../../chunks/chunk.TW3XHMG6.js";
-import "../../chunks/chunk.ZTFYI6ZI.js";
+} from "../../chunks/chunk.EXACNZQZ.js";
+import "../../chunks/chunk.HHBSJGPU.js";
 import "../../chunks/chunk.VN2PSQ4U.js";
 import "../../chunks/chunk.6EPU7YUS.js";
 import "../../chunks/chunk.4DW7CR6A.js";
 import "../../chunks/chunk.XTWO6ZZW.js";
 import "../../chunks/chunk.VECCQZP5.js";
-import "../../chunks/chunk.LLNE7YOD.js";
+import "../../chunks/chunk.HICOUAKU.js";
 import "../../chunks/chunk.AZ3N5IOO.js";
 import "../../chunks/chunk.5732DMBC.js";
 import "../../chunks/chunk.AERTEAG5.js";
 import "../../chunks/chunk.QC7X32ZP.js";
-import "../../chunks/chunk.OLRA37R5.js";
-import "../../chunks/chunk.EHCS6X6N.js";
+import "../../chunks/chunk.HP2LEQRU.js";
+import "../../chunks/chunk.VICINZOP.js";
 import "../../chunks/chunk.6QYKWCSO.js";
 import "../../chunks/chunk.DZ7YIR5N.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.A3OYJILJ.js";
-import "../../chunks/chunk.HQ6QUSK7.js";
+import "../../chunks/chunk.G6ITZTTW.js";
+import "../../chunks/chunk.7JGKUB4A.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.B5BVIZ3W.js";
-import "../../chunks/chunk.CITWLSAM.js";
+import "../../chunks/chunk.OKJFZ7T2.js";
+import "../../chunks/chunk.RVWB22MU.js";
 import "../../chunks/chunk.YTEJW7IF.js";
-import "../../chunks/chunk.NH4JQFOM.js";
+import "../../chunks/chunk.57DU3E3Z.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.E5UUNP6E.js";
+import "../../chunks/chunk.HC4N72MX.js";
+import "../../chunks/chunk.6QJYD7WX.js";
+import "../../chunks/chunk.RB2JR2ND.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   SynSelect as default
 };

package/dist/components/select/select.custom.styles.js

@@ -2,7 +2,7 @@ import {
   select_custom_styles_default
 } from "../../chunks/chunk.4DW7CR6A.js";
 import "../../chunks/chunk.QC7X32ZP.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   select_custom_styles_default as default
 };

package/dist/components/select/select.js

@@ -1,42 +1,43 @@
 import {
   select_default
-} from "../../chunks/chunk.IRCX4RJL.js";
-import "../../chunks/chunk.TW3XHMG6.js";
-import "../../chunks/chunk.ZTFYI6ZI.js";
+} from "../../chunks/chunk.OSPYBYAS.js";
+import "../../chunks/chunk.EXACNZQZ.js";
+import "../../chunks/chunk.HHBSJGPU.js";
 import "../../chunks/chunk.VN2PSQ4U.js";
 import "../../chunks/chunk.6EPU7YUS.js";
 import "../../chunks/chunk.4DW7CR6A.js";
 import "../../chunks/chunk.XTWO6ZZW.js";
 import "../../chunks/chunk.VECCQZP5.js";
-import "../../chunks/chunk.LLNE7YOD.js";
+import "../../chunks/chunk.HICOUAKU.js";
 import "../../chunks/chunk.AZ3N5IOO.js";
 import "../../chunks/chunk.5732DMBC.js";
 import "../../chunks/chunk.AERTEAG5.js";
 import "../../chunks/chunk.QC7X32ZP.js";
-import "../../chunks/chunk.OLRA37R5.js";
-import "../../chunks/chunk.EHCS6X6N.js";
+import "../../chunks/chunk.HP2LEQRU.js";
+import "../../chunks/chunk.VICINZOP.js";
 import "../../chunks/chunk.6QYKWCSO.js";
 import "../../chunks/chunk.DZ7YIR5N.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.A3OYJILJ.js";
-import "../../chunks/chunk.HQ6QUSK7.js";
+import "../../chunks/chunk.G6ITZTTW.js";
+import "../../chunks/chunk.7JGKUB4A.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.B5BVIZ3W.js";
-import "../../chunks/chunk.CITWLSAM.js";
+import "../../chunks/chunk.OKJFZ7T2.js";
+import "../../chunks/chunk.RVWB22MU.js";
 import "../../chunks/chunk.YTEJW7IF.js";
-import "../../chunks/chunk.NH4JQFOM.js";
+import "../../chunks/chunk.57DU3E3Z.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.E5UUNP6E.js";
+import "../../chunks/chunk.HC4N72MX.js";
+import "../../chunks/chunk.6QJYD7WX.js";
+import "../../chunks/chunk.RB2JR2ND.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   select_default as default
 };

package/dist/components/select/select.styles.js

@@ -1,7 +1,7 @@
 import {
   select_styles_default
 } from "../../chunks/chunk.XTWO6ZZW.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   select_styles_default as default
 };

package/dist/components/select/utility.js

@@ -2,7 +2,7 @@ import {
   compareValues,
   isAllowedValue
 } from "../../chunks/chunk.VECCQZP5.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   compareValues,
   isAllowedValue

package/dist/components/side-nav/side-nav.component.d.ts

@@ -1,7 +1,9 @@
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import SynergyElement from '../../internal/synergy-element.js';
 import SynDrawer from '../drawer/drawer.component.js';
 import SynDivider from '../divider/divider.component.js';
+import SynIcon from '../icon/icon.component.js';
+import SynNavItem from '../nav-item/nav-item.component.js';
 /**
  * @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
  * It can be used to group multiple navigation items (<syn-nav-item />s) together.
@@ -18,10 +20,15 @@ import SynDivider from '../divider/divider.component.js';
  *
  * @dependency syn-divider
  * @dependency syn-drawer
+ * @dependency syn-icon
+ * @dependency syn-nav-item
  *
  * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
  * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
  *    Please avoid having to many nav-items as it can massively influence the user experience.
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
+ * for variant="sticky".
  *
  * @event syn-show - Emitted when the side-nav opens.
  * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
@@ -40,13 +47,20 @@ import SynDivider from '../divider/divider.component.js';
  * @csspart panel - The side-nav's panel (where the whole content is rendered).
  * @csspart body - The side-nav's body (where the default slot content is rendered)
  * @csspart drawer__base - The drawer's base wrapper
- *
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
+
  * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
  *
- * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.
- * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.
- * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.
- * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
+ *  in variant="default".
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
+ *  in variant="default".
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
+ *  and variant="sticky".
  * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
  * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
  */
@@ -55,6 +69,8 @@ export default class SynSideNav extends SynergyElement {
     static dependencies: {
         'syn-divider': typeof SynDivider;
         'syn-drawer': typeof SynDrawer;
+        'syn-icon': typeof SynIcon;
+        'syn-nav-item': typeof SynNavItem;
     };
     private readonly hasSlotController;
     private readonly localize;
@@ -72,10 +88,10 @@ export default class SynSideNav extends SynergyElement {
      * You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
      * `hide()` methods and this attribute will reflect the side-nav's open state.
      *
-     * Depending if the rail attribute is set or not, the behavior will differ.
+     * Depending on the "variant" attribute, the behavior will differ.
      *
-     * __Non rail__:
-     * With `open` will show the side-nav.
+     * __Default__:
+     * With `open` will show the side-nav with an overlay.
      * Without `open`, the side-nav will be hidden.
      *
      * __Rail__:
@@ -83,6 +99,11 @@ export default class SynSideNav extends SynergyElement {
      * or without an overlay for non-touch devices.
      * Without `open`, the side-nav will only show the prefix of nav-item's.
      *
+     * __Sticky__:
+     * With `open` will show the whole side-nav with an overlay for touch devices
+     * or without an overlay for non-touch devices.
+     * Without `open`, the side-nav will only show the prefix of nav-item's.
+     *
      */
     open: boolean;
     /**
@@ -92,10 +113,32 @@ export default class SynSideNav extends SynergyElement {
      *
      * Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
      * If this is not the case you should use a burger navigation.
+     *
+     * @deprecated Use the `variant` attribute with `rail` instead.
+     * Will be removed in synergy version 3.0
      */
     rail: boolean;
     /**
-     * By default, the side-nav traps the focus if in non-rail mode and open.
+     * The variant that should be used to show the side navigation.
+     *
+     * The following variants are supported:
+     * - **default** (default): Always shows the whole content and additionally an overlay.
+     * This makes especially sense for applications, where you navigate to a place and stay
+     * there for a longer time.
+     * - **rail**: Only show the prefix of navigation items in closed state.
+     * This will open on hover on the rail navigation.
+     * On touch devices the navigation opens on click and shows an overlay.
+     * Note: The rail variant is only an option if all Navigation Items on the first level
+     * have an Icon.
+     * If this is not the case you should use a burger navigation.
+     * - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
+     * and full width. This variant is only possible for non-nested navigation items.
+     * Note: The sticky variant is only an option if all Navigation Items on the first level
+     * have an Icon and if there are only "first level" items.
+     */
+    variant: 'default' | 'rail' | 'sticky';
+    /**
+     * By default, the side-nav traps the focus if in variant="default" and open.
      * To disable the focus trapping, set this attribute.
      */
     noFocusTrapping: boolean;
@@ -105,10 +148,8 @@ export default class SynSideNav extends SynergyElement {
     private handleRequestClose;
     private addMouseListener;
     private removeMouseListener;
-    private setDrawerVisibility;
-    private forceDrawerVisibilityForRailMode;
     private setDrawerAnimations;
-    handleModeChange(): void;
+    handleVariantChange(): void;
     handleOpenChange(): void;
     handleFocusTrapping(): void;
     /** Shows the side-nav. */
@@ -117,9 +158,12 @@ export default class SynSideNav extends SynergyElement {
     hide(): Promise<void>;
     constructor();
     /**
-     * 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(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private toggleOpenState;
     render(): import("lit").TemplateResult;
 }

package/dist/components/side-nav/side-nav.component.js

@@ -1,40 +1,43 @@
 import {
   SynSideNav
-} from "../../chunks/chunk.DZZ3B5GF.js";
-import "../../chunks/chunk.H3HTSQKK.js";
-import "../../chunks/chunk.KJ5DXPFW.js";
+} from "../../chunks/chunk.WRF3RAGW.js";
+import "../../chunks/chunk.FWLUR33I.js";
+import "../../chunks/chunk.NM7BI4LK.js";
+import "../../chunks/chunk.SHCZO4KK.js";
+import "../../chunks/chunk.MVYXUHVS.js";
 import "../../chunks/chunk.FA6V2WD6.js";
 import "../../chunks/chunk.FSZIE7IO.js";
-import "../../chunks/chunk.SFTF4XCD.js";
+import "../../chunks/chunk.VKNCN5RG.js";
 import "../../chunks/chunk.N7QJ54ZM.js";
 import "../../chunks/chunk.I4FIU7FA.js";
-import "../../chunks/chunk.2LYOMDFO.js";
-import "../../chunks/chunk.JCIM6NE3.js";
+import "../../chunks/chunk.AYAX7BG7.js";
+import "../../chunks/chunk.G76BKD7B.js";
 import "../../chunks/chunk.5732DMBC.js";
 import "../../chunks/chunk.WXVOTRW5.js";
-import "../../chunks/chunk.EHCS6X6N.js";
+import "../../chunks/chunk.VICINZOP.js";
 import "../../chunks/chunk.6QYKWCSO.js";
 import "../../chunks/chunk.DZ7YIR5N.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.A3OYJILJ.js";
-import "../../chunks/chunk.HQ6QUSK7.js";
+import "../../chunks/chunk.G6ITZTTW.js";
+import "../../chunks/chunk.7JGKUB4A.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.B5BVIZ3W.js";
-import "../../chunks/chunk.CITWLSAM.js";
+import "../../chunks/chunk.OKJFZ7T2.js";
+import "../../chunks/chunk.RVWB22MU.js";
 import "../../chunks/chunk.YTEJW7IF.js";
-import "../../chunks/chunk.NH4JQFOM.js";
+import "../../chunks/chunk.57DU3E3Z.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.NUIJATJY.js";
-import "../../chunks/chunk.JTSBAJHO.js";
-import "../../chunks/chunk.OH3PPVV4.js";
-import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.E5UUNP6E.js";
+import "../../chunks/chunk.HC4N72MX.js";
+import "../../chunks/chunk.6QJYD7WX.js";
+import "../../chunks/chunk.RB2JR2ND.js";
+import "../../chunks/chunk.BVZQ6QSY.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
-import "../../chunks/chunk.2GFK6XTO.js";
+import "../../chunks/chunk.DZJHHVOD.js";
+import "../../chunks/chunk.Z4XV3SMG.js";
 export {
   SynSideNav as default
 };