Merge 7fe8e3cbcf into c21a58f2fb

libs/components/src/navigation/nav-item.component.html

@@ -10,38 +10,41 @@
       'padding-left': (variant === 'tree' ? 2.5 : 1) + treeDepth * 1.5 + 'rem'
     }"
     class="tw-relative tw-flex tw-items-center tw-pr-4"
-    [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']"
   >
-    <div
-      #slotStart
-      class="[&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
-    >
-      <ng-content select="[slot=start]"></ng-content>
-    </div>
-    <!-- Default content for #slotStart (for consistent sizing) -->
-    <div
-      *ngIf="slotStart.childElementCount === 0"
-      [ngClass]="{
-        'tw-w-0': variant !== 'tree'
-      }"
-    >
-      <button
-        type="button"
-        class="tw-invisible"
-        [bitIconButton]="'bwi-angle-down'"
-        size="small"
-        aria-hidden="true"
-      ></button>
+    <div [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']">
+      <div
+        #slotStart
+        class="[&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
+      >
+        <ng-content select="[slot=start]"></ng-content>
+      </div>
+      <!-- Default content for #slotStart (for consistent sizing) -->
+      <div
+        *ngIf="slotStart.childElementCount === 0"
+        [ngClass]="{
+          'tw-w-0': variant !== 'tree'
+        }"
+      >
+        <button
+          type="button"
+          class="tw-invisible"
+          [bitIconButton]="'bwi-angle-down'"
+          size="small"
+          aria-hidden="true"
+        ></button>
+      </div>
     </div>
 
     <ng-container *ngIf="route; then isAnchor; else isButton"></ng-container>
 
     <!-- Main content of `NavItem` -->
     <ng-template #anchorAndButtonContent>
-      <i class="bwi bwi-fw tw-text-alt2 tw-mx-1 {{ icon }}"></i
-      ><span [title]="text" [ngClass]="showActiveStyles ? 'tw-font-bold' : 'tw-font-semibold'">{{
-        text
-      }}</span>
+      <div [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']">
+        <i class="bwi bwi-fw tw-text-alt2 tw-mx-1 {{ icon }}"></i
+        ><span [title]="text" [ngClass]="showActiveStyles ? 'tw-font-bold' : 'tw-font-semibold'">{{
+          text
+        }}</span>
+      </div>
     </ng-template>
 
     <!-- Show if a value was passed to `this.to` -->
@@ -76,6 +79,7 @@
     </ng-template>
 
     <div
+      [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']"
       class="tw-flex tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2"
     >
       <ng-content select="[slot=end]"></ng-content>