fix(ld-sidenav-navitem): keep secondary icon visible on hover

screenshot/builds/master.json

@@ -12575,6 +12575,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "f24496e3",
+      "image": "e9cbd35eb0d429c17fd76e29f88cc9c9.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav nav item has a secondary icon when hovering",
+      "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "eb3477e0",
       "image": "e703c15788449e352723bed104aa62a8.png",

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

@@ -415,6 +415,7 @@ That's why we set z-index 0 on the following elements.
 }
 
 .ld-sidenav-navitem__slot-icon-secondary-container {
+  position: relative;
   display: flex;
   flex-shrink: 0;
   margin-right: var(--ld-sp-12);

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

@@ -739,6 +739,28 @@ describe('ld-sidenav', () => {
       const result = await page.compareScreenshot()
       expect(result).toMatchScreenshot()
     })
+
+    it('has a secondary icon when hovering', async () => {
+      const page = await getPageWithContent(
+        `
+        <ld-sidenav open>
+          <ld-sidenav-slider label="Outline of CS">
+            <ld-sidenav-navitem>
+              Liquid Oxygen
+              <ld-icon slot="icon-secondary" name="bottle" size="sm" />
+            </ld-sidenav-navitem>
+          </ld-sidenav-slider>
+        </ld-sidenav>`
+      )
+      await page.emulateMediaFeatures([
+        { name: 'prefers-reduced-motion', value: 'reduce' },
+      ])
+      await page.hover('ld-sidenav-navitem')
+      await page.waitForChanges()
+
+      const result = await page.compareScreenshot()
+      expect(result).toMatchScreenshot()
+    })
   })
 
   describe('with accordion', () => {