Update header examples

Author: alizedebray

packages/components/src/index.html

@@ -61,8 +61,8 @@ <h1 slot="title">Application title</h1>
         </li>
       </ul>
 
-      <!-- Custom content (optional) -->
-      <ul class="list-inline">
+      <!-- Local controls (optional) -->
+      <ul slot="local-controls" class="list-inline">
         <li>
           <a href="#">
             <span>Search</span>

packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts

@@ -27,12 +27,12 @@ const meta: MetaComponent = {
           <li><a href="">Über uns</a></li>
         </ul>
 
-      <!-- Menu button for mobile -->
-      <post-togglebutton slot="post-togglebutton">
-        <span>Menu</span>
-        <post-icon aria-hidden="true" name="burger" data-showwhen="untoggled"></post-icon>
-        <post-icon aria-hidden="true" name="closex" data-showwhen="toggled"></post-icon>
-      </post-togglebutton>
+        <!-- Menu button for mobile -->
+        <post-togglebutton slot="post-togglebutton">
+          <span>Menu</span>
+          <post-icon aria-hidden="true" name="burger" data-showwhen="untoggled"></post-icon>
+          <post-icon aria-hidden="true" name="closex" data-showwhen="toggled"></post-icon>
+        </post-togglebutton>
 
         <!-- Language switch -->
         <post-language-switch
@@ -51,24 +51,24 @@ const meta: MetaComponent = {
         <!-- Application title (optional) -->
         <h1 slot="title">Application title</h1>
 
-      <!-- Custom content (optional) -->
-      <ul slot="local-controls" class="list-inline">
-        <li>
-          <a href="#">
-            <span>Search</span>
-            <post-icon aria-hidden="true" name="search"></post-icon>
-          </a>
-        </li>
-        <li>
-          <a href="#">
-            <span>Login</span>
-            <post-icon aria-hidden="true" name="login"></post-icon>
-          </a>
-        </li>
-      </ul>
+        <!-- Local controls (optional) -->
+        <ul slot="local-controls" class="list-inline">
+          <li>
+            <a href="#">
+              <span>Search</span>
+              <post-icon aria-hidden="true" name="search"></post-icon>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <span>Login</span>
+              <post-icon aria-hidden="true" name="login"></post-icon>
+            </a>
+          </li>
+        </ul>
 
         <!-- Main navigation -->
-        <post-mainnavigation caption="Hauptnavigation">
+        <post-mainnavigation slot="post-mainnavigation" caption="Hauptnavigation">
           <post-list title-hidden="">
             <h2>Main Navigation</h2>
             <!-- Link only level 1 -->

packages/nextjs-integration/src/app/ssr/layout.tsx

@@ -64,7 +64,7 @@ export default function Layout({ children }: { readonly children: React.ReactNod
 
         <h1 slot="title">Application title</h1>
 
-        <ul className="list-inline">
+        <ul slot="local-controls" className="list-inline">
           <li>
             <a href="#test">
               <span>Search</span>
@@ -80,7 +80,7 @@ export default function Layout({ children }: { readonly children: React.ReactNod
         </ul>
 
         {/* Throws Hydration Errors */}
-        <PostMainnavigation>
+        <PostMainnavigation slot="post-mainnavigation">
           {/* Throws Hydration Errors */}
           <PostList title-hidden="">
             <h2>Main Navigation</h2>