Fix zn-tabs header

Author: MrEssex

docs/pages/components/tabs.md

@@ -6,7 +6,13 @@ layout: component
 ---
 
 ```html:preview
-<zn-tabs></zn-tabs>
+
+<zn-tabs flush="" caption="Billing" default-uri="" header="" active="tab-7ee7c65c-349267" split-min="60"
+         primary-caption="Navigation" secondary-caption="Content" store-ttl="0" master-id="349267">
+  
+  
+
+</zn-tabs>
 ```
 
 ## Examples

src/components/panel/panel.component.ts

@@ -80,8 +80,7 @@ export default class ZnPanel extends ZincElement {
                      description="${this.description}">
             ${hasActionSlot ? html`
               <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}
-          </zn-header>
-          </div>` : null}
+          </zn-header>` : null}
 
         <div class="panel__body">
           <slot></slot>

src/components/sp/sp.scss

@@ -15,7 +15,7 @@
   padding: var(--zn-sp-padding);
   gap: var(--zn-sp-gap);
   width: 100%;
-  max-width: var(--zn-container-hd);
+  //max-width: var(--zn-container-hd); don't worry about max width just yet
   margin: 0 auto;
 
   &--divide.sp--no-gap {

src/components/tabs/tabs.component.ts

@@ -42,7 +42,10 @@ export default class ZnTabs extends ZincElement {
   @property({attribute: 'master-id', reflect: true}) masterId: string;
   @property({attribute: 'default-uri', type: String, reflect: true}) defaultUri = '';
 
-  @property({attribute: 'caption', type: String, reflect: true}) caption = '';
+  @property() caption: string;
+
+  @property() description: string;
+
   @property({attribute: 'header', type: String, reflect: true}) header = '';
 
   @property({attribute: 'active', type: String, reflect: true}) _current = '';

src/components/tabs/tabs.scss

@@ -93,7 +93,7 @@ h1, h2 {
   #header:not(:empty) {
     display: flex;
     align-items: center;
-    padding: var(--zn-spacing-medium) var(--zn-spacing-medium) 0;
+    padding: var(--zn-spacing-medium);
     gap: var(--zn-spacing-medium);
 
     #actions ::slotted(*:not(.zn-tb-active)) {