@kubex/zinc 1.1.151 → 1.1.153

package/package.json

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

package/scss/mixins/_helper-mixins.scss

@@ -1,9 +1,13 @@
 @use "./spacing-mixins";
 
+$scrollbar-size: 5px;
+$scrollbar-thumb: rgba(var(--inverse-base), 0.2);
+$scrollbar-thumb-hover: rgba(var(--inverse-base), 0.6);
+
 @mixin scrollbars {
   ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: $scrollbar-size;
+    height: $scrollbar-size;
   }
 
   /* Track */
@@ -13,12 +17,37 @@
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
-    background: rgba(var(--inverse-base), 0.2);
-    border-radius: 5px;
+    background: $scrollbar-thumb;
+    border-radius: $scrollbar-size;
   }
 
   /* Handle on hover */
   ::-webkit-scrollbar-thumb:hover {
-    background: rgba(var(--inverse-base), 0.6);
+    background: $scrollbar-thumb-hover;
+  }
+}
+
+// `scrollbars` only reaches descendant scroll areas; this styles an element that
+// is itself the scroller
+@mixin scrollbars-self {
+  scrollbar-width: thin;
+  scrollbar-color: $scrollbar-thumb transparent;
+
+  &::-webkit-scrollbar {
+    width: $scrollbar-size;
+    height: $scrollbar-size;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $scrollbar-thumb;
+    border-radius: $scrollbar-size;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: $scrollbar-thumb-hover;
   }
 }

package/scss/shared/layout.scss

@@ -304,6 +304,14 @@
   padding: var(--zn-base-px) calc(var(--zn-base-gap) + var(--zn-gutter));
   gap: var(--zn-base-px);
   height: 50px;
+
+  // The height is fixed, so a second row would spill over the bar — scroll
+  // sideways instead of wrapping
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  @include mixins.scrollbars-self;
 }
 
 .scroll-container {

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;