@kubex/zinc 1.0.119 → 1.1.0

package/src/components/navbar/navbar.scss

@@ -1,15 +1,25 @@
 @use "../../wc";
 
+@include wc.gutter;
+
 :host {
   display: block;
   --navbar-active-colour: var(--zn-active-nav-background, var(--zn-page-content-background, var(--zn-page-surface-background, var(--zn-body))));
 
   ul.navbar {
     padding: 0;
-    margin: 0 var(--zn-base-gap);
+    margin-inline: var(--zn-spacing-small);
+
+    &--color-body {
+      background-color: rgb(var(--zn-color-body));
+    }
   }
 }
 
+:host([gutter]) ul.navbar {
+  margin: 0 calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
+}
+
 :host([hover]) {
   position: absolute;
   transform: translateY(-100%);
@@ -48,10 +58,16 @@
 :host([icon-only]) {
   ul.navbar {
     li {
-      padding: var(--zn-spacing-small);
-      width: fit-content;
-      max-width: 50px;
+      padding: 0;
+      width: 36px;
+      min-width: 36px;
       justify-content: center;
+
+      // Hover is the plain tab tint — without the body-coloured ::after
+      // backdrop the generic hover paints, which reads as white
+      &:hover:not(.active):not(.zn-tb-active):not(.more)::after {
+        display: none;
+      }
     }
   }
 }
@@ -68,7 +84,7 @@
 }
 
 :host:not([stacked]) .navbar {
-  margin: 0 0 0 var(--zn-base-gap);
+  margin: 0 0 0 calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
   padding-left: 0;
 
   &--flush {
@@ -79,9 +95,11 @@
 ul.navbar {
   li {
     padding-top: 0;
-    font-size: var(--zn-font-size-medium);
+    font-size: var(--zn-text-tab-link-font-size);
+    line-height: var(--zn-text-tab-link-line-height);
+    font-weight: var(--zn-text-tab-link-font-weight);
     white-space: nowrap;
-    color: rgb(var(--zn-color-muted-text));
+    color: var(--zn-text-tab-link-color);
 
     a {
       text-decoration: none;
@@ -125,7 +143,7 @@ ul.navbar {
       }
 
       &.zn-tb-active {
-        background-color: rgb(var(--zn-body));
+        background-color: rgb(var(--zn-color-navigation));
       }
 
       &:hover:before {
@@ -229,6 +247,12 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
   }
 }
 
+:host([icon-only]:not([stacked]):not([icon-bar])) {
+  ul.navbar {
+    height: 32px;
+  }
+}
+
 
 :host([pad]) {
   ul.navbar {
@@ -252,7 +276,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
       }
 
       &.active, &.zn-tb-active {
-        color: rgb(var(--zn-color-text));
+        color: var(--zn-text-tab-link-active-color);
         border-bottom: 1px solid rgb(var(--navbar-active-colour));
       }
     }
@@ -261,6 +285,10 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
       border-top-right-radius: 6px;
     }
 
+    &.has-hidden > li.more {
+      border-top-right-radius: 6px;
+    }
+
     &.more-only > li.more {
       border-left-width: 1px;
       border-top-left-radius: 6px;
@@ -304,7 +332,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
       }
 
       user-select: none;
-      font-weight: 500;
+      font-weight: var(--zn-text-tab-link-font-weight);
       padding: 0 calc(var(--zn-base-px, 8px) * 2);
       background: rgb(var(--zn-color-tab));
       transition: background-color 100ms ease-in-out;
@@ -317,6 +345,7 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
           content: "";
           position: absolute;
           inset: 0;
+          border-radius: inherit;
           background: rgb(var(--navbar-active-colour));
           z-index: -1;
         }
@@ -366,6 +395,10 @@ ul.navbar.navbar--stacked.navbar--icon-bar {
 
       &.active, &.zn-tb-active {
         background: rgb(var(--navbar-active-colour));
+        font-size: var(--zn-text-tab-link-active-font-size);
+        line-height: var(--zn-text-tab-link-active-line-height);
+        font-weight: var(--zn-text-tab-link-active-font-weight);
+        color: var(--zn-text-tab-link-active-color);
       }
 
       &.active::before, &.zn-tb-active::before {
@@ -495,10 +528,7 @@ button[popovertarget] {
   flex-shrink: 0;
   margin: 0;
   display: flex;
-  align-items: center;
-  width: fit-content;
-  height: 40px;
-  gap: var(--zn-spacing-2x-small);
+  gap: var(--zn-spacing-x-small);
   padding-right: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 }
 
@@ -513,24 +543,44 @@ button[popovertarget] {
       // Let the trigger fill the whole cell so clicking anywhere in the
       // "more" item opens the dropdown, not just the icon itself.
       padding: 0;
+      width: 40px;
+      min-width: 40px;
 
       zn-dropdown,
       zn-button[slot="trigger"] {
         height: 100%;
+        width: 100%;
       }
 
       zn-button[slot="trigger"] zn-icon {
         transition: transform 200ms ease-in-out;
+        --icon-color: var(--zn-text-tab-link-color);
       }
 
       zn-dropdown[open] zn-button[slot="trigger"] zn-icon {
         transform: rotate(90deg);
+        --icon-color: var(--zn-text-tab-link-active-color);
+      }
+
+      &:has(zn-dropdown[open]) {
+        background: rgb(var(--zn-panel));
+
+        &::after {
+          content: '';
+          position: absolute;
+          inset: auto 0 -1px 0;
+          height: 1px;
+          border-radius: 0;
+          background: rgb(var(--zn-panel));
+          z-index: 1;
+        }
       }
 
       zn-button::part(base) {
         height: 100%;
-        padding-left: calc(var(--zn-base-gap, 8px));
-        padding-right: calc(var(--zn-base-gap, 8px));
+        padding-left: 0;
+        padding-right: 0;
+        outline: none;
 
         &:hover {
           background-color: transparent;
@@ -538,28 +588,50 @@ button[popovertarget] {
       }
 
       ul#extended-menu {
-        box-shadow: var(--zn-shadow-medium);
+        --navbar-more-trigger-width: 40px;
+
+        box-shadow: 0 4px 8px -4px rgba(33, 33, 33, 0.1);
+        border: 1px solid rgb(var(--zn-border-color));
+        border-top: 0;
+        border-radius: 0 0 var(--zn-border-radius) var(--zn-border-radius);
+        overflow: hidden;
+        position: relative;
+        inset-inline-end: -1px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0 calc(var(--navbar-more-trigger-width) - 2px) auto 0;
+          height: 1px;
+          background: rgb(var(--zn-border-color));
+          z-index: 2;
+        }
+
         background: rgb(var(--zn-panel));
         display: flex;
         flex-direction: column;
         height: auto;
         width: fit-content;
         min-width: var(--zn-size-spanel);
-        margin: 0;
+        margin: -1px 0 0;
         padding: 1px;
 
         li {
           justify-content: left;
           background: rgb(var(--zn-panel));
-          color: rgb(var(--zn-text));
-          padding: var(--zn-spacing-small);
+          font-size: var(--zn-text-menu-link-font-size);
+          line-height: var(--zn-text-menu-link-line-height);
+          font-weight: var(--zn-text-menu-link-font-weight);
+          color: var(--zn-text-menu-link-color);
+          padding: var(--zn-spacing-small) var(--zn-spacing-medium);
 
           &:hover {
             background: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), rgb(var(--zn-panel));
           }
 
           &.active, &.zn-tb-active {
-            font-weight: 700;
+            font-weight: var(--zn-text-tab-link-font-weight);
+            color: var(--zn-text-tab-link-color);
           }
 
           &.active::before, &.zn-tb-active::before {

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

@@ -385,7 +385,7 @@ export default class ZnPage extends ZnTabs {
               ${hasPreviousPath ? html`
                 <a href="${this.previousPath}" class="caption__back"
                    data-target="${this.previousTarget ? this.previousTarget : ''}">
-                  <zn-button icon="arrow_back" icon-size="24" color="transparent"></zn-button>
+                  <zn-button icon="arrow-left@lu" icon-size="24" icon-button="small" plain></zn-button>
                 </a>` : null}
 
               <div class="caption">

package/src/components/page/page.scss

@@ -1,5 +1,7 @@
 @use "../../wc";
 
+@include wc.gutter;
+
 :host {
   display: block;
   width: 100%;
@@ -10,24 +12,6 @@
   --zn-page-header-background: var(--zn-page-surface-background, var(--zn-page-background, var(--zn-body)));
 }
 
-@container (width > 1024px) {
-  :host {
-    --zn-gutter: 16px;
-  }
-}
-
-@container (width > 1400px) {
-  :host {
-    --zn-gutter: 24px;
-  }
-}
-
-@container (width > 1500px) {
-  :host {
-    --zn-gutter: 32px;
-  }
-}
-
 :host([panel]) {
   --zn-page-content-background: var(--zn-panel);
 }
@@ -129,8 +113,8 @@
   }
 
   &__caption {
-    font-weight: var(--zn-font-weight-medium);
-    font-size: var(--zn-font-size-large);
+    font-weight: var(--zn-text-h1-font-weight);
+    font-size: var(--zn-text-h1-font-size);
     color: rgba(var(--zn-text-panel-title), 100%);
     line-height: 18px;
     margin: 0;
@@ -304,19 +288,16 @@ zn-navbar {
 }
 
 :host .page__header {
-  padding-right: 0;
-  padding-left: 0;
+  padding-inline: 0;
 }
 
 :host .header {
-  padding-right: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
-  padding-left: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
+  padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 }
 
 :host zn-navbar {
   &::part(navbar) {
-    padding-left: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
-    padding-right: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
+    padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
   }
 }
 

package/src/components/panel/panel.scss

@@ -11,6 +11,7 @@
   min-width: var(--zn-spacing-small-panel);
   flex-basis: var(--zn-panel-basis);
   --zn-page-surface-background: var(--zn-panel);
+  --zn-active-nav-background: var(--zn-panel);
 }
 
 
@@ -18,7 +19,7 @@
   position: relative;
   border: 1px solid rgb(var(--zn-border-color));
   display: flex;
-  border-radius: var(--zn-border-radius-large);
+  border-radius: var(--zn-border-radius);
   flex-direction: column;
   flex-grow: 1;
   flex-basis: var(--zn-spacing-small-panel);
@@ -29,7 +30,7 @@
   &__inner {
     overflow: hidden;
     display: flex;
-    border-radius: var(--zn-border-radius-large);
+    border-radius: var(--zn-border-radius);
     flex-direction: column;
     flex-grow: 1;
   }
@@ -52,10 +53,6 @@
       border-bottom: 0;
     }
 
-    &::part(header-caption) {
-      font-size: var(--zn-font-size-large);
-    }
-
     &--inline {
       border-bottom: 0;
     }
@@ -86,8 +83,8 @@
     display: block;
     padding: var(--zn-spacing-small) var(--zn-base-gap);
     background: rgb(var(--zn-panel-secondary));
-    border-bottom-left-radius: var(--zn-border-radius-large);
-    border-bottom-right-radius: var(--zn-border-radius-large);
+    border-bottom-left-radius: var(--zn-border-radius);
+    border-bottom-right-radius: var(--zn-border-radius);
   }
 
   &--tabbed .panel__body {

package/src/components/priority-list/priority-list.scss

@@ -47,7 +47,7 @@
   padding: var(--zn-priority-list-item-padding);
   background: rgb(var(--zn-panel));
   border: 1px solid rgb(var(--zn-border-color));
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   cursor: grab;
   user-select: none;
   -webkit-user-drag: element;

package/src/components/rating/rating.scss

@@ -12,7 +12,7 @@
 .rating {
   position: relative;
   display: inline-flex;
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   vertical-align: middle;
 
   &:focus {

package/src/components/scroll-container/scroll-container.scss

@@ -1,6 +1,8 @@
 @use "../../wc";
 
 :host {
+  @include wc.scrollbars;
+  
   display: contents;
   --zn-scroll-footer-height: 0px;
   --zn-scroll-header-height: 0px;
@@ -22,7 +24,6 @@
 }
 
 .scroll-container {
-  @include wc.scrollbars;
   container-type: inline-size;
   display: flex;
   flex-direction: column;

package/src/components/select/select.scss

@@ -389,7 +389,7 @@
   box-shadow: var(--zn-shadow-medium);
   background: var(--zn-panel-background-color);
   border: solid var(--zn-panel-border-width) var(--zn-panel-border-color);
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   margin: var(--zn-spacing-x-small) 0;
   padding-inline: 0;
   overflow: auto;

package/src/components/settings-container/settings-container.scss

@@ -81,7 +81,7 @@
 }
 
 zn-button {
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
 }
 
 .settings-container__dropdown-content {
@@ -91,7 +91,7 @@ zn-button {
   background-color: rgb(var(--zn-panel));
   padding: var(--zn-spacing-large);
   box-shadow: var(--zn-shadow-small);
-  border-radius: var(--zn-border-radius-medium);
+  border-radius: var(--zn-border-radius);
   max-width: var(--zn-size-mpanel);
   width: fit-content;
   z-index: 20;

package/src/components/stat/stat.scss

@@ -13,7 +13,10 @@
 
   .caption {
     margin-bottom: var(--zn-spacing-x-small);
-    font-size: var(--zn-font-size-medium);
+    font-size: var(--zn-text-chart-minor-font-size);
+    line-height: var(--zn-text-chart-minor-line-height);
+    font-weight: var(--zn-text-chart-minor-font-weight);
+    color: var(--zn-text-chart-minor-color);
   }
 
   .container {
@@ -34,10 +37,10 @@
   }
 
   .amount {
-    color: rgb(var(--zn-text-heading));
-    font-weight: 600;
-    font-size: var(--zn-font-size-x-large);
-    line-height: var(--zn-line-height-loose);
+    color: var(--zn-text-chart-major-color);
+    font-weight: var(--zn-text-chart-major-font-weight);
+    font-size: var(--zn-text-chart-major-font-size);
+    line-height: var(--zn-text-chart-major-line-height);
     display: flex;
     flex-grow: 1;
     align-items: center;

package/src/components/tile/tile.component.ts

@@ -50,6 +50,12 @@ export default class ZnTile extends ZincElement {
 
   @property({type: Boolean}) inline: boolean;
 
+  /** Renders the caption in the normal table-content weight instead of bold. */
+  @property({type: Boolean}) plain: boolean;
+
+  /** Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row. */
+  @property({type: Boolean, reflect: true}) grouped: boolean;
+
   private _isLink() {
     return this.href || this.dataUri;
   }
@@ -82,6 +88,7 @@ export default class ZnTile extends ZincElement {
           'tile--flush-x': this.flushX,
           'tile--flush-y': this.flushY,
           'tile--inline': this.inline,
+          'tile--plain': this.plain,
           'tile--has-href': isLink,
           'tile--has-caption': hasCaption,
           'tile--has-description': hasDescription,
@@ -95,12 +102,13 @@ export default class ZnTile extends ZincElement {
           <div
             class="tile__link">
             <div class="tile__left">
-              <slot name="image" part="image" class="tile__image"></slot>
+              ${hasImage ? html`<slot name="image" part="image" class="tile__image"></slot>` : html``}
               <div class="tile__content">
                 <p part="caption" class="tile__caption">
                   <slot name="caption">${this.caption}</slot>
                 </p>
-                <p part="description" class="tile__description">${this.description}</p>
+                ${hasDescription ? html`
+                  <p part="description" class="tile__description">${this.description}</p>` : ''}
               </div>
             </div>
           </div>