@kubex/zinc 1.0.116 → 1.0.118

package/src/components/page/page.scss

@@ -7,24 +7,24 @@
   min-height: 0;
   container-type: inline-size;
   --zn-page-content-background: var(--zn-body);
-  --zn-page-header-background: var(--zn-page-surface-background, var(--zn-page-background));
+  --zn-page-header-background: var(--zn-page-surface-background, var(--zn-page-background, var(--zn-body)));
 }
 
 @container (width > 1024px) {
   :host {
-    --zn-gutter: 15px;
+    --zn-gutter: 16px;
   }
 }
 
 @container (width > 1400px) {
   :host {
-    --zn-gutter: 20px;
+    --zn-gutter: 24px;
   }
 }
 
 @container (width > 1500px) {
   :host {
-    --zn-gutter: 25px;
+    --zn-gutter: 32px;
   }
 }
 
@@ -45,7 +45,6 @@
   position: sticky;
   top: 0;
   z-index: 2;
-  padding: var(--zn-base-gap) var(--zn-base-gap) 0;
   box-sizing: border-box;
   background: rgba(var(--zn-page-header-background), 95%);
 
@@ -72,6 +71,11 @@
   flex-direction: column;
   position: relative;
   margin: 0;
+  padding: calc(var(--zn-base-px) * 3) var(--zn-base-gap) calc(calc(var(--zn-base-px) * 3) - var(--zn-base-gap)) var(--zn-base-gap);
+
+  &.header--has-navigation {
+    padding: calc(var(--zn-base-px) * 3) var(--zn-base-gap);
+  }
 
   .content {
     display: flex;
@@ -87,7 +91,7 @@
   }
 
   &--has-navigation .content {
-    min-height: 48px;
+    min-height: 36px;
   }
 
   .caption {
@@ -95,9 +99,9 @@
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    gap: var(--zn-spacing-2x-small);
+    gap: 2px;
     max-width: 100%;
-    min-height: 48px;
+    min-height: 36px;
 
     a {
       display: flex;
@@ -112,7 +116,7 @@
     justify-content: flex-start;
     flex-direction: column;
     gap: 4px;
-    min-height: 48px;
+    min-height: 36px;
     flex-shrink: 1;
     max-width: 100%;
   }
@@ -128,7 +132,7 @@
     font-weight: var(--zn-font-weight-medium);
     font-size: var(--zn-font-size-large);
     color: rgba(var(--zn-text-panel-title), 100%);
-    line-height: 20px;
+    line-height: 18px;
     margin: 0;
     overflow: hidden;
     white-space: nowrap;
@@ -142,7 +146,7 @@
   &__description {
     display: block;
     font-size: var(--zn-font-size-medium);
-    line-height: 24px;
+    line-height: 14px;
   }
 
   .breadcrumb {
@@ -282,20 +286,20 @@
 }
 
 zn-navbar {
-  margin-top: var(--zn-base-gap);
 
   &::part(navbar) {
-    height: 42px;
-    min-height: 42px;
-    margin: 0;
+    height: 40px;
+    min-height: 40px;
+    max-height: 40px;
     padding-left: var(--zn-base-gap);
+    margin: 0;
   }
 
   &::part(navbar-item) {
-    min-height: 42px;
+    height: 40px;
     box-sizing: border-box;
     font-size: var(--zn-font-size-medium);
-    line-height: 24px;
+    line-height: 16px;
   }
 }
 

package/src/components/page/page.test.ts

@@ -6,7 +6,7 @@ describe('<zn-page>', () => {
   it('renders header actions and generated tabs', async () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title" summary="Page Summary">
-        <zn-button slot="actions" type="primary" size="small" href="/ui">UI Examples</zn-button>
+        <zn-button slot="actions" type="primary" href="/ui">UI Examples</zn-button>
 
         <zn-tab caption="Overview">Overview Content</zn-tab>
         <zn-tab caption="Tab One">Tab One Content</zn-tab>

package/src/components/page-nav/page-nav.scss

@@ -7,7 +7,7 @@
   height: 100%;
 
   --page-nav-crumb-height: 50px;
-  --page-nav-width: 200px;
+  --page-nav-width: 240px;
   --page-nav-animation-duration: 0.3s;
 
   --page-nav-bg: var(--zn-page-content-background, var(--zn-body));
@@ -48,7 +48,7 @@
   width: var(--page-nav-width);
   background-color: rgb(var(--page-nav-bg));
   overflow-y: auto;
-  padding: var(--zn-spacing-medium);
+  padding: var(--zn-base-gap) 0 var(--zn-base-gap) var(--zn-base-gap);
   @include wc.scrollbars;
 }
 
@@ -92,16 +92,16 @@
     width: 100%;
     height: var(--page-nav-crumb-height);
     background-color: rgb(var(--page-nav-bg));
-    gap: 10px;
+    gap: var(--zn-base-px);
   }
 
   .breadcrumb-menu-toggle {
     cursor: pointer;
-    margin-left: var(--zn-spacing-medium);
+    margin-left: var(--zn-base-gap);
 
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--zn-base-px);
 
 
     height: 100%;
@@ -132,7 +132,7 @@
     display: block;
     position: absolute;
     top: 0;
-    padding-top: 60px;
+    padding: 60px var(--zn-base-gap) var(--zn-base-gap) var(--zn-base-gap);
     left: calc(var(--page-nav-width) * -1);
     max-width: var(--page-nav-width);
     opacity: 0;

package/src/components/panel/panel.component.ts

@@ -1,7 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
-import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
@@ -29,9 +28,8 @@ export default class ZnPanel extends ZincElement {
   @property({attribute: 'basis-px', type: Number}) basis: number;
   @property() caption: string;
   @property() icon: string;
-  @property() description: string;
   @property({type: Boolean}) tabbed: boolean;
-  @property({attribute: 'header-underline', type: Boolean}) underlineHeader: boolean;
+  @property({attribute: 'header-borderless', type: Boolean}) headerBorderless: boolean;
   @property({type: Boolean}) cosmic: boolean;
   @property({type: Boolean}) flush: boolean;
   @property({attribute: 'flush-x', type: Boolean}) flushX: boolean;
@@ -91,6 +89,7 @@ export default class ZnPanel extends ZincElement {
         'panel--has-actions': hasActionSlot,
         'panel--has-footer': hasFooterSlot,
         'panel--has-header': hasHeader,
+        'panel--borderless-header': this.headerBorderless,
         'panel--cosmic': this.cosmic,
         'panel--shadow': this.shadow,
       })}">
@@ -99,11 +98,10 @@ export default class ZnPanel extends ZincElement {
           ${hasHeader ? html`
             <zn-header class="${classMap({
               "panel__header": true,
-              "panel__header--underline": this.underlineHeader,
+              "panel__header--underline": !this.headerBorderless,
             })}"
                        icon="${this.icon}"
                        caption="${this.caption}"
-                       description="${ifDefined(this.description)}"
                        transparent>
               ${hasActionSlot ? html`
                 <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}

package/src/components/panel/panel.scss

@@ -74,7 +74,7 @@
     flex-direction: column;
     overflow-y: auto;
     flex-grow: 1;
-    padding: 0 var(--zn-base-gap) var(--zn-base-gap) var(--zn-base-gap);
+    padding: var(--zn-base-gap);
 
     > :not([hidden]) ~ :not([hidden]) {
       border: 1px solid rgb(var(--zn-border-color));
@@ -110,8 +110,8 @@
   }
 
 
-  &:not(.panel--has-header):not(.panel--flush, .panel--flush-y) &__body {
-    padding-top: var(--zn-base-gap);
+  &.panel--borderless-header:not(.panel--flush, .panel--flush-y) &__body {
+    padding-top: 0;
   }
 
   &--flush {

package/src/components/panel/panel.test.ts

@@ -7,4 +7,18 @@ describe('<zn-panel>', () => {
 
     expect(el).to.exist;
   });
+
+  it('underlines panel headers by default', async () => {
+    const el = await fixture(html` <zn-panel caption="Example"></zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    expect(header.classList.contains('panel__header--underline')).to.be.true;
+  });
+
+  it('removes the header underline when header-borderless is set', async () => {
+    const el = await fixture(html` <zn-panel caption="Example" header-borderless></zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    expect(header.classList.contains('panel__header--underline')).to.be.false;
+  });
 });

package/src/components/query-builder/query-builder.component.ts

@@ -262,7 +262,6 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
                  icon="delete"
                  icon-size="24"
                  color="transparent"
-                 size="square"
                  @click="${(e: Event) => this._removeRule(uniqueId, e)}">
       </zn-button>`;
 

package/src/components/slideout/slideout.component.ts

@@ -187,7 +187,6 @@ export default class ZnSlideout extends ZincElement {
               icon-size="24"
               type="button"
               color="transparent"
-              size="content"
               @click="${() => this.requestClose('close-button')}"
             ></zn-button>
           </div>

package/src/components/sp/sp.scss

@@ -5,8 +5,8 @@
 
 :host {
   display: block;
-  --zn-sp-padding: var(--zn-base-gap, var(--zn-divide-gap, var(--zn-spacing-medium)));
-  --zn-sp-gap: var(--zn-base-gap, var(--zn-divide-gap, var(--zn-spacing-medium)));
+  --zn-sp-padding: var(--zn-base-gap);
+  --zn-sp-gap: var(--zn-base-gap);
 }
 
 :host([grow]) {

package/src/components/tabs/tabs.component.ts

@@ -525,7 +525,7 @@ export default class ZnTabs extends ZincElement {
     return html`
       <div class="tabs">
         ${hasHeader ? html`
-          <zn-header caption="${ifDefined(this.caption)}" description="${ifDefined(this.description)}" transparent>
+          <zn-header caption="${ifDefined(this.caption)}" transparent>
             <slot name="actions" slot="actions"></slot>
           </zn-header>` : null}
         <slot name="top"></slot>

package/src/components/tile/tile.scss

@@ -12,7 +12,7 @@
   &--has-properties,
   &--has-actions,
   &--has-image {
-    padding: var(--zn-spacing-medium);
+    padding: var(--zn-base-gap);
   }
 
 

package/src/components/translation-group/translation-group.component.ts

@@ -262,7 +262,6 @@ export default class ZnTranslationGroup extends ZnPanel {
                     ${visibleLangTabs.map(code => html`
                       <zn-button
                         data-lang-btn
-                        size="x-small"
                         color="default"
                         ?outline="${code !== this._activeLanguage}"
                         @click="${() => this.switchLanguage(code)}"
@@ -273,7 +272,6 @@ export default class ZnTranslationGroup extends ZnPanel {
                       <zn-dropdown placement="bottom-end" data-lang-overflow>
                         <zn-button
                           slot="trigger"
-                          size="x-small"
                           color="default"
                           icon="keyboard_arrow_down"
                           ?outline="${!overflowLangTabs.includes(this._activeLanguage)}"
@@ -288,7 +286,6 @@ export default class ZnTranslationGroup extends ZnPanel {
                       <zn-dropdown placement="bottom-end" data-lang-add>
                         <zn-button
                           slot="trigger"
-                          size="x-small"
                           color="default"
                           outline
                         >+

package/src/components/translations/translations.component.ts

@@ -357,7 +357,6 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
                   ${visibleLangTabs.map(code => html`
                     <zn-button
                       data-lang-btn
-                      size="x-small"
                       color="default"
                       ?outline="${code !== this._activeLanguage}"
                       @click="${() => this.switchLanguage(code)}"
@@ -368,7 +367,6 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
                     <zn-dropdown placement="bottom-end" data-lang-overflow>
                       <zn-button
                         slot="trigger"
-                        size="x-small"
                         color="default"
                         icon="keyboard_arrow_down"
                         ?outline="${!overflowLangTabs.includes(this._activeLanguage)}"
@@ -383,7 +381,6 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
                     <zn-dropdown placement="bottom-end" data-lang-add>
                       <zn-button
                         slot="trigger"
-                        size="x-small"
                         color="default"
                         outline
                       >+