[CL-119] rename slots in nav-item (#6070)

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

@@ -29,10 +29,10 @@
   </ng-template>
 
   <!-- Show toggle to the left for trees otherwise to the right -->
-  <ng-container slot-start *ngIf="variant === 'tree'">
+  <ng-container slot="start" *ngIf="variant === 'tree'">
     <ng-container *ngTemplateOutlet="button"></ng-container>
   </ng-container>
-  <ng-container slot-end *ngIf="variant !== 'tree'">
+  <ng-container slot="end" *ngIf="variant !== 'tree'">
     <ng-container *ngTemplateOutlet="button"></ng-container>
   </ng-container>
 </bit-nav-item>

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

@@ -16,7 +16,7 @@
       #slotStart
       class="[&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
     >
-      <ng-content select="[slot-start]"></ng-content>
+      <ng-content select="[slot=start]"></ng-content>
     </div>
     <!-- Default content for #slotStart (for consistent sizing) -->
     <div
@@ -75,7 +75,7 @@
     <div
       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>
+      <ng-content select="[slot=end]"></ng-content>
     </div>
   </div>
 </div>

libs/components/src/navigation/nav-item.stories.ts

@@ -61,7 +61,7 @@ export const WithChildButtons: Story = {
     template: `
       <bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection">
         <button
-          slot-start
+          slot="start"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-clone'"
           [buttonType]="'contrast'"
@@ -69,7 +69,7 @@ export const WithChildButtons: Story = {
           aria-label="option 1"
         ></button>
         <button
-          slot-end
+          slot="end"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-pencil-square'"
           [buttonType]="'contrast'"
@@ -77,7 +77,7 @@ export const WithChildButtons: Story = {
           aria-label="option 2"
         ></button>
         <button
-          slot-end
+          slot="end"
           class="tw-ml-auto"
           [bitIconButton]="'bwi-check'"
           [buttonType]="'contrast'"