fix(ld-sidenav): last navitem styling, tooltip, separator in slot top

screenshot/builds/master.json

@@ -8755,7 +8755,7 @@
     },
     {
       "id": "b5cd2a68",
-      "image": "ed73919d98c34076904e323ec6ac6346.png",
+      "image": "8844fd18cbf25696b5a5970c189fbc33.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item truncates long titles",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8872,7 +8872,7 @@
     },
     {
       "id": "feb5e844",
-      "image": "9d34ec89b89112293c954793deba960e.png",
+      "image": "ce58bd8017592fd646389ecc25e8db69.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation in subnavigation with back button shows shadow separator line at the top and bottom",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8885,7 +8885,7 @@
     },
     {
       "id": "13515603",
-      "image": "6e566e36195fc1d1b859854775d53da9.png",
+      "image": "b52b5bc0ef0cf28350d3d0729096061a.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation narrow mode collapses to narrow mode",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8924,7 +8924,7 @@
     },
     {
       "id": "5fae3b76",
-      "image": "493025faa0a3a83636933e0b6111aebb.png",
+      "image": "779f0a84d25ef5c43baef10c829c89b8.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation neutral mode uses neutral background color",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",

src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx

@@ -128,9 +128,11 @@ export class LdSidenavNavitem implements InnerFocusable {
 
   componentWillLoad() {
     this.sidenav = closest('ld-sidenav', this.el)
-    this.sidenavAlignement = this.sidenav.align
-    this.sidenavExpandsOnMouseEnter =
-      this.sidenav.expandTrigger === 'mouseenter'
+    if (this.sidenav) {
+      this.sidenavAlignement = this.sidenav.align
+      this.sidenavExpandsOnMouseEnter =
+        this.sidenav.expandTrigger === 'mouseenter'
+    }
     if (!['secondary', 'tertiary'].includes(this.mode)) {
       this.tooltipContent = this.el.textContent.trim()
 

src/liquid/components/ld-sidenav/ld-sidenav-scroller-internal/ld-sidenav-scroller-internal.css

@@ -10,12 +10,12 @@
   flex-direction: column;
 
   ::slotted(ld-sidenav-navitem) {
-    margin: var(--ld-sidenav-padding-y) 0 0;
+    margin-top: var(--ld-sidenav-padding-y);
     will-change: opacity; /* prevents flickering on transition in Safari */
   }
 
-  ::slotted(ld-sidenav-navitem:last-of-type) {
-    margin-bottom: var(--ld-sidenav-padding-y);
+  ::slotted(.ld-sidenav-navitem--last) {
+    margin-bottom: 0;
   }
 
   &(.ld-sidenav-scroller-internal--relative) {

src/liquid/components/ld-sidenav/ld-sidenav-scroller-internal/ld-sidenav-scroller-internal.tsx

@@ -73,6 +73,8 @@ export class LdSidenavScrollerInternal {
 
   componentWillLoad() {
     this.sidenav = closest('ld-sidenav', this.el)
+    if (!this.sidenav) return
+
     this.needsHRTop = !!this.sidenav.querySelector('[slot="top"]')
     this.needsHRBottom = !!this.sidenav.querySelector('[slot="bottom"]')
     this.relative = !this.sidenav.querySelector('ld-sidenav-slider')

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

@@ -1,4 +1,5 @@
 :host {
+  display: block;
   margin: var(--ld-sidenav-padding-y) var(--ld-sidenav-padding-x) 0;
   transform-origin: left;
   transition: transform var(--ld-sidenav-transition-duration-collapse-expand)

src/liquid/components/ld-sidenav/ld-sidenav-separator/ld-sidenav-separator.tsx

@@ -19,11 +19,12 @@ export class LdSidenavSeparator {
 
   @State() sidenavCollapsed: boolean
   @State() sidenavClosable: boolean
-  @State() scaleXCollapsed: number
+  @State() scaleXCollapsed = 1
 
   @Listen('ldSidenavCollapsedChange', { target: 'window', passive: true })
   handleSidenavCollapsedChange(ev: CustomEvent<boolean>) {
     if (ev.target !== this.sidenav) return
+    this.sidenavCollapsed = ev.detail
     if (
       this.el.parentElement &&
       !['LD-SIDENAV-SLIDER', 'LD-SIDENAV-SUBNAV'].includes(
@@ -32,7 +33,6 @@ export class LdSidenavSeparator {
     ) {
       return
     }
-    this.sidenavCollapsed = ev.detail
     if (this.sidenav.narrow) {
       toggleStackToTop(this.el, this.sidenavCollapsed)
     }
@@ -65,7 +65,9 @@ export class LdSidenavSeparator {
 
   componentWillLoad() {
     this.sidenav = closest('ld-sidenav', this.el)
-    this.scaleXCollapsed = this.computeScaleXCollapsed() || 1
+    if (this.sidenav) {
+      this.scaleXCollapsed = this.computeScaleXCollapsed() || 1
+    }
   }
 
   render() {

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

@@ -152,12 +152,12 @@
     transform: translateX(0);
   }
 
-  ::slotted(ld-sidenav-navitem:last-of-type) {
-    margin-bottom: var(--ld-sidenav-padding-y);
+  ::slotted(ld-sidenav-navitem) {
+    margin-top: var(--ld-sidenav-padding-y);
   }
 
-  ::slotted(ld-sidenav-navitem) {
-    margin: var(--ld-sidenav-padding-y) 0 0;
+  ::slotted(.ld-sidenav-navitem--last) {
+    margin-bottom: var(--ld-sidenav-padding-y);
   }
 }
 

src/liquid/components/ld-sidenav/ld-sidenav.tsx

@@ -30,6 +30,7 @@ export class LdSidenav {
   @Element() el: HTMLLdSidenavElement
 
   private mediaQuery: MediaQueryList
+  private observer: MutationObserver
 
   /** Whether the nav should be aligned to the left or the right side of its container. */
   @Prop() align: 'left' | 'right' = 'left'
@@ -411,12 +412,49 @@ export class LdSidenav {
     this.ldSidenavBreakpointChange.emit(this.closable)
   }
 
+  private isLastNavItem = (
+    navitemOrSubnav: HTMLLdSidenavNavitemElement | HTMLLdSidenavSubnavElement
+  ) => {
+    const nextSibling = navitemOrSubnav.nextElementSibling as HTMLElement
+    if (!nextSibling) return true
+    if (nextSibling.tagName === 'LD-SIDENAV-NAVITEM') return false
+    if (nextSibling.tagName === 'LD-SIDENAV-SUBNAV') {
+      return this.isLastNavItem(nextSibling as HTMLLdSidenavSubnavElement)
+    }
+    return true
+  }
+
+  private updateNavitemsLast = () => {
+    this.el
+      .querySelectorAll('ld-sidenav-navitem')
+      .forEach((navitem: HTMLLdSidenavNavitemElement) => {
+        navitem.classList.toggle(
+          'ld-sidenav-navitem--last',
+          this.isLastNavItem(navitem)
+        )
+      })
+  }
+
+  private handleSlotChange() {
+    this.updateNavitemsLast()
+  }
+
+  private initObserver = () => {
+    this.observer = new MutationObserver(this.handleSlotChange.bind(this))
+    this.observer.observe(this.el, {
+      subtree: true,
+      childList: true,
+      attributes: false,
+    })
+  }
+
   componentWillLoad() {
     this.mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`)
     this.mediaQuery.addEventListener('change', this.onMatchMediaChange)
     this.closable = this.mediaQuery.matches
     this.fullyCollapsible =
       !this.narrow || !this.el.querySelector('ld-sidenav-slider')
+    this.updateNavitemsLast()
   }
 
   componentDidLoad() {
@@ -425,12 +463,14 @@ export class LdSidenav {
     this.ldSidenavBreakpointChange.emit(this.closable)
 
     setTimeout(() => {
+      this.initObserver()
       this.initialized = true
     })
   }
 
   disconnectedCallback() {
     this.mediaQuery?.removeEventListener('change', this.onMatchMediaChange)
+    if (this.observer) this.observer.disconnect()
   }
 
   render() {