@kubex/zinc 1.1.151 → 1.1.152

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.151",
+  "version": "1.1.152",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/page/page.component.ts

@@ -44,7 +44,7 @@ export default class ZnPage extends ZnTabs {
     'zn-tab': ZnTab
   };
 
-  private readonly pageSlotController = new HasSlotController(this, 'breadcrumb', 'actions', 'caption');
+  private readonly pageSlotController = new HasSlotController(this, 'breadcrumb', 'actions', 'caption', 'description');
 
   @property() caption: string;
   @property({attribute: 'entity-id'}) entityId: string;
@@ -442,6 +442,7 @@ export default class ZnPage extends ZnTabs {
     const hasEntityId = this.entityId;
     const hasFullLocation = this.fullLocation;
     const hasPreviousPath = this.previousPath;
+    const hasDescription = !!this.summary || this.pageSlotController.test('description');
 
     return html`
       <div class="page" part="base" @scroll="${this.handlePageScroll}">
@@ -455,7 +456,8 @@ export default class ZnPage extends ZnTabs {
             'header--has-entity-id': hasEntityId,
             'header--has-full-location': hasFullLocation,
             'header--has-navigation': hasNavigation,
-            'header--has-previous': hasPreviousPath
+            'header--has-previous': hasPreviousPath,
+            'header--has-description': hasDescription
           })}">
             ${hasFullLocation || hasEntityId ? html`
               <div class="${classMap({

package/src/components/page/page.scss

@@ -184,7 +184,7 @@
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
-    gap: var(--zn-spacing-x-small);
+    gap: var(--zn-spacing-2x-small);
     min-height: 36px;
     flex-shrink: 1;
     min-width: 0;
@@ -215,6 +215,11 @@
     min-height: 36px; // Keep in step with the actions row: both bands share a centre line.
   }
 
+  // Stacked above a description the band buys no alignment, it only pads the gap.
+  &--has-description &__caption {
+    min-height: 0;
+  }
+
   &__description {
     @include wc.text-style(subheading);
     display: block;