@synergy-design-system/components 2.31.2 → 2.32.0

package/dist/components/progress-bar/progress-bar.js

@@ -1,13 +1,13 @@
 import {
   progress_bar_default
-} from "../../chunks/chunk.6DPMTGX6.js";
-import "../../chunks/chunk.VQG4ENGK.js";
+} from "../../chunks/chunk.TEYI3WY6.js";
+import "../../chunks/chunk.XRSPUMKG.js";
 import "../../chunks/chunk.AMAK44YX.js";
 import "../../chunks/chunk.QUM76UHV.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   progress_bar_default as default

package/dist/components/progress-ring/progress-ring.component.js

@@ -1,12 +1,12 @@
 import {
   SynProgressRing
-} from "../../chunks/chunk.XUCEJ53P.js";
+} from "../../chunks/chunk.LMUAOSNG.js";
 import "../../chunks/chunk.2V3HGTTL.js";
 import "../../chunks/chunk.RMIDAEF5.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynProgressRing as default

package/dist/components/progress-ring/progress-ring.js

@@ -1,13 +1,13 @@
 import {
   progress_ring_default
-} from "../../chunks/chunk.EISTC2GP.js";
-import "../../chunks/chunk.XUCEJ53P.js";
+} from "../../chunks/chunk.IN2KZ2JM.js";
+import "../../chunks/chunk.LMUAOSNG.js";
 import "../../chunks/chunk.2V3HGTTL.js";
 import "../../chunks/chunk.RMIDAEF5.js";
-import "../../chunks/chunk.GIU3H3J3.js";
-import "../../chunks/chunk.S5N2TE2L.js";
+import "../../chunks/chunk.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   progress_ring_default as default

package/dist/components/radio/radio.component.js

@@ -1,21 +1,21 @@
 import {
   SynRadio
-} from "../../chunks/chunk.NY2GAPA3.js";
+} from "../../chunks/chunk.7AWK33AC.js";
 import "../../chunks/chunk.UUB3PWNM.js";
 import "../../chunks/chunk.EHSNF4SS.js";
-import "../../chunks/chunk.B5BVIZ3W.js";
-import "../../chunks/chunk.CITWLSAM.js";
+import "../../chunks/chunk.3UCVZ2N3.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.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynRadio as default

package/dist/components/radio/radio.js

@@ -1,22 +1,22 @@
 import {
   radio_default
-} from "../../chunks/chunk.3DUL2OP4.js";
-import "../../chunks/chunk.NY2GAPA3.js";
+} from "../../chunks/chunk.2YGY6DRR.js";
+import "../../chunks/chunk.7AWK33AC.js";
 import "../../chunks/chunk.UUB3PWNM.js";
 import "../../chunks/chunk.EHSNF4SS.js";
-import "../../chunks/chunk.B5BVIZ3W.js";
-import "../../chunks/chunk.CITWLSAM.js";
+import "../../chunks/chunk.3UCVZ2N3.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.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   radio_default as default

package/dist/components/radio-button/radio-button.component.js

@@ -1,15 +1,15 @@
 import {
   SynRadioButton
-} from "../../chunks/chunk.WTKBRIY4.js";
+} from "../../chunks/chunk.IZUV4XRR.js";
 import "../../chunks/chunk.4BRJ5OJE.js";
 import "../../chunks/chunk.5SQ7NVBX.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynRadioButton as default

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

@@ -1,16 +1,16 @@
 import {
   radio_button_default
-} from "../../chunks/chunk.HFRXN2DK.js";
-import "../../chunks/chunk.WTKBRIY4.js";
+} from "../../chunks/chunk.KY7HUUUM.js";
+import "../../chunks/chunk.IZUV4XRR.js";
 import "../../chunks/chunk.4BRJ5OJE.js";
 import "../../chunks/chunk.5SQ7NVBX.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   radio_button_default as default

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

@@ -1,19 +1,19 @@
 import {
   SynRadioGroup
-} from "../../chunks/chunk.JVSTXX5J.js";
+} from "../../chunks/chunk.VBE5RBH5.js";
 import "../../chunks/chunk.32LFHSM5.js";
 import "../../chunks/chunk.K62NPKGN.js";
 import "../../chunks/chunk.AERTEAG5.js";
-import "../../chunks/chunk.CELWLWZJ.js";
+import "../../chunks/chunk.QXIZDYA4.js";
 import "../../chunks/chunk.GRVNUIP2.js";
 import "../../chunks/chunk.OLRA37R5.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynRadioGroup as default

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

@@ -1,20 +1,20 @@
 import {
   radio_group_default
-} from "../../chunks/chunk.7CRVMDW5.js";
-import "../../chunks/chunk.JVSTXX5J.js";
+} from "../../chunks/chunk.2LWC5VGW.js";
+import "../../chunks/chunk.VBE5RBH5.js";
 import "../../chunks/chunk.32LFHSM5.js";
 import "../../chunks/chunk.K62NPKGN.js";
 import "../../chunks/chunk.AERTEAG5.js";
-import "../../chunks/chunk.CELWLWZJ.js";
+import "../../chunks/chunk.QXIZDYA4.js";
 import "../../chunks/chunk.GRVNUIP2.js";
 import "../../chunks/chunk.OLRA37R5.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   radio_group_default as default

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

@@ -1,12 +1,12 @@
 import {
   SynRange
-} from "../../chunks/chunk.XNHQJ4X7.js";
-import "../../chunks/chunk.RZG7IW73.js";
+} from "../../chunks/chunk.E2NPS5ZN.js";
+import "../../chunks/chunk.WIDU3JFX.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.N634EXYZ.js";
 import "../../chunks/chunk.AZ3N5IOO.js";
 import "../../chunks/chunk.3NXKLKWH.js";
 import "../../chunks/chunk.AERTEAG5.js";
@@ -15,14 +15,14 @@ import "../../chunks/chunk.C2ENQBPM.js";
 import "../../chunks/chunk.A3OYJILJ.js";
 import "../../chunks/chunk.HQ6QUSK7.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynRange as default

package/dist/components/range/range.js

@@ -1,13 +1,13 @@
 import {
   range_default
-} from "../../chunks/chunk.K7A64ZY7.js";
-import "../../chunks/chunk.XNHQJ4X7.js";
-import "../../chunks/chunk.RZG7IW73.js";
+} from "../../chunks/chunk.7WCAKMAK.js";
+import "../../chunks/chunk.E2NPS5ZN.js";
+import "../../chunks/chunk.WIDU3JFX.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.N634EXYZ.js";
 import "../../chunks/chunk.AZ3N5IOO.js";
 import "../../chunks/chunk.3NXKLKWH.js";
 import "../../chunks/chunk.AERTEAG5.js";
@@ -16,14 +16,14 @@ import "../../chunks/chunk.C2ENQBPM.js";
 import "../../chunks/chunk.A3OYJILJ.js";
 import "../../chunks/chunk.HQ6QUSK7.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.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   range_default as default

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

@@ -1,9 +1,9 @@
 import {
   SynRangeTick
-} from "../../chunks/chunk.KQQM2CWQ.js";
+} from "../../chunks/chunk.BSMGYXJY.js";
 import "../../chunks/chunk.I6YARDHH.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynRangeTick as default

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

@@ -1,10 +1,10 @@
 import {
   range_tick_default
-} from "../../chunks/chunk.MQZANITC.js";
-import "../../chunks/chunk.KQQM2CWQ.js";
+} from "../../chunks/chunk.HMPLHOEC.js";
+import "../../chunks/chunk.BSMGYXJY.js";
 import "../../chunks/chunk.I6YARDHH.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   range_tick_default as default

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

@@ -1,10 +1,10 @@
 import {
   SynResizeObserver
-} from "../../chunks/chunk.XDWFPRPE.js";
+} from "../../chunks/chunk.7DYLS7V5.js";
 import "../../chunks/chunk.OI3HOOCT.js";
 import "../../chunks/chunk.74IOULXM.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynResizeObserver as default

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

@@ -1,40 +1,40 @@
 import {
   SynSelect
-} from "../../chunks/chunk.TW3XHMG6.js";
-import "../../chunks/chunk.ZTFYI6ZI.js";
+} from "../../chunks/chunk.KR4ZPT4X.js";
+import "../../chunks/chunk.JGPSIBNQ.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.N634EXYZ.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.XACPLHJJ.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.WVVQK5TE.js";
-import "../../chunks/chunk.B5BVIZ3W.js";
-import "../../chunks/chunk.CITWLSAM.js";
+import "../../chunks/chunk.3UCVZ2N3.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.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.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
+import "../../chunks/chunk.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynSelect as default

package/dist/components/select/select.js

@@ -1,41 +1,41 @@
 import {
   select_default
-} from "../../chunks/chunk.IRCX4RJL.js";
-import "../../chunks/chunk.TW3XHMG6.js";
-import "../../chunks/chunk.ZTFYI6ZI.js";
+} from "../../chunks/chunk.55XHHV7Z.js";
+import "../../chunks/chunk.KR4ZPT4X.js";
+import "../../chunks/chunk.JGPSIBNQ.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.N634EXYZ.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.XACPLHJJ.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.WVVQK5TE.js";
-import "../../chunks/chunk.B5BVIZ3W.js";
-import "../../chunks/chunk.CITWLSAM.js";
+import "../../chunks/chunk.3UCVZ2N3.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.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.IPGLY3H4.js";
+import "../../chunks/chunk.6DYKE5RE.js";
+import "../../chunks/chunk.7R4JCT5J.js";
+import "../../chunks/chunk.G6CLSRWS.js";
+import "../../chunks/chunk.MYVDDEUN.js";
 import "../../chunks/chunk.NLYVOJGK.js";
-import "../../chunks/chunk.WROPOFUG.js";
+import "../../chunks/chunk.62JHOU5H.js";
 import "../../chunks/chunk.2GFK6XTO.js";
 export {
   select_default as default

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;
 }