switch to dashed naming

libs/components/src/anon-layout/anon-layout-wrapper.component.html

@@ -7,7 +7,7 @@
   [hideCardWrapper]="hideCardWrapper"
   [hideBackgroundIllustration]="hideBackgroundIllustration"
 >
-  <router-outlet slot="headerActions" name="headerActions"></router-outlet>
+  <router-outlet slot="header-actions" name="header-actions"></router-outlet>
   <router-outlet></router-outlet>
   <router-outlet slot="secondary" name="secondary"></router-outlet>
   <router-outlet slot="environment-selector" name="environment-selector"></router-outlet>

libs/components/src/anon-layout/anon-layout-wrapper.stories.ts

@@ -183,7 +183,7 @@ export const DefaultContentExample: Story = {
               {
                 path: "",
                 component: DefaultHeaderActionsOutletExampleComponent,
-                outlet: "headerActions",
+                outlet: "header-actions",
               },
             ],
           },

libs/components/src/anon-layout/anon-layout.component.html

@@ -14,7 +14,7 @@
       <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
     </a>
     <div class="tw-ms-auto">
-      <ng-content select="[slot=headerActions]"></ng-content>
+      <ng-content select="[slot=header-actions]"></ng-content>
     </div>
   </div>
 

libs/components/src/anon-layout/anon-layout.stories.ts

@@ -78,7 +78,7 @@ export default {
           [hideFooter]="hideFooter"
           [hideBackgroundIllustration]="hideBackgroundIllustration"
         >
-          <div *ngIf="includeHeaderActions" slot="headerActions" class="tw-flex tw-items-center tw-gap-2">
+          <div *ngIf="includeHeaderActions" slot="header-actions" class="tw-flex tw-items-center tw-gap-2">
             <bit-avatar
               size="small"
               text="Bob Loblaw"