feat: enhance app-header integration and improve tab sheet layout with new styles and slots

Author: caperaven

app/ollama-tools/ollama-tools.html

@@ -1,4 +1,4 @@
-<h2>Ollama Tool Calling</h2>
+<app-header><h2>Ollama Tool Calling</h2></app-header>
 
 <dynamic-rows>
     <div data-height="1fr">

app/tab-sheet/tab-sheet.css

@@ -1,3 +1,7 @@
 h2 {
 	color: darkslateblue;
 }
+
+app-header {
+	flex: 1;
+}

app/tab-sheet/tab-sheet.html

@@ -1,6 +1,5 @@
-<app-header><h2>Tab Sheet</h2></app-header>
-
 <tab-sheet>
+    <app-header slot="prefix"><h2>Tab Sheet</h2></app-header>
     <div slot="tab" for="tab1">Tab 1</div>
     <div slot="tab" for="tab2">Tab 2</div>
     <div slot="tab" for="tab3">Tab 3</div>

components/app-header/app-header.css

@@ -6,7 +6,6 @@
     align-items: center;
 
     padding: var(--padding);
-    border-bottom: var(--border);
 }
 
 button {

components/tab-sheet/tab-sheet.css

@@ -1,5 +1,6 @@
 :host {
     --cl-suppressed: gray;
+    --tabs-padding: 0 0.5rem;
     display: flex;
 }
 
@@ -15,6 +16,7 @@
     align-items: center;
     justify-content: start;
     border-bottom: 1px solid var(--cl-border);
+    padding: var(--tabs-padding);
 }
 
 .content {

components/tab-sheet/tab-sheet.html.js

@@ -1,13 +1,13 @@
 export const HTML = `
 <link rel="stylesheet" href="${new URL("./tab-sheet.css", import.meta.url).href}" />
-<slot name="prefix"></slot>
 <div class="tab-sheet">
     <div class="header">
+        <slot name="prefix"></slot>
         <slot name="tab"></slot>
+        <slot name="suffix"></slot>
     </div>
     <div class="content">
         <slot></slot>
     </div>
 </div>
-<slot name="suffix"></slot>
 `

components/tab-sheet/tab-sheet.js

@@ -42,7 +42,7 @@ export class TabSheet extends HTMLElement {
     }
 
     #selectFirstTab() {
-        const slot = this.shadowRoot.querySelector(".header slot");
+        const slot = this.shadowRoot.querySelector(".header slot[name='tab']");
         const elements = slot.assignedElements();
         if (elements.length === 0) return;