fix(ld-sidenav): use a default z-index of 1

screenshot/builds/master.json

@@ -15279,6 +15279,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "01ec8edc",
+      "image": "66939f1f1d0241838b225f21e9b19810.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav stacking has a default stacking context with a z-index greater zero",
+      "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "8fb8907e",
       "image": "5fb94a3bb2478b8736e38e46538ef3cd.png",

src/liquid/components/ld-sidenav/ld-sidenav.shadow.css

@@ -88,7 +88,10 @@
     ease;
   top: 0;
   width: var(--ld-sidenav-width);
-  z-index: 0; /* create own stacking context */
+
+  /* Create a stacking context with a default z-index greater zero,
+  so that elements with a stacking context of their own don't overlap. */
+  z-index: var(--ld-sidenav-z-index, 1);
 
   &::before {
     content: '';

src/liquid/components/ld-sidenav/readme.md

@@ -1859,6 +1859,7 @@ The sidenav as well as its subcomponents emit different events which you can use
 | `--ld-sidenav-transition-duration`        | Transition duration for all sidenav specific transitions.           |
 | `--ld-sidenav-width`                      | Width of the `ld-sidenav` component.                                |
 | `--ld-sidenav-width-collapsed` _readonly_ | Width of the `ld-sidenav` component when collapsed.                 |
+| `--ld-sidenav-z-index`                    | `z-index` of the `ld-sidenav` component (`1` by default)            |
 
 <!-- Auto Generated Below -->
 

src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts

@@ -846,4 +846,20 @@ describe('ld-sidenav', () => {
       expect(result).toMatchScreenshot()
     })
   })
+
+  describe('stacking', () => {
+    it('has a default stacking context with a z-index greater zero', async () => {
+      const page = await getPageWithContent(
+        `
+          <ld-sidenav open></ld-sidenav>
+          <p style="position: relative">This text should be below the sidenav, although it has its own stacking context.</p>
+        `,
+        { reducedMotion: true }
+      )
+      page.waitForChanges()
+
+      const result = await page.compareScreenshot()
+      expect(result).toMatchScreenshot()
+    })
+  })
 })