@kubex/zinc 1.0.115 → 1.0.117

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

@@ -1,4 +1,5 @@
 import {classMap} from 'lit/directives/class-map.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from '../../internal/slot';
 import {property, state} from 'lit/decorators.js';
@@ -20,6 +21,8 @@ interface TabDefinition {
   sourceIndex: number;
   uri: string | null;
   slotName: string | null;
+  selected: boolean;
+  classes: string | undefined;
 }
 
 /**
@@ -156,6 +159,8 @@ export default class ZnPage extends ZnTabs {
       const priority = this.parsePriority(tab.getAttribute('priority'));
       const uri = tab.getAttribute('uri');
       const slotName = uri ? null : `page-tab-${index}`;
+      const selected = tab.hasAttribute('selected');
+      const classes = tab.getAttribute('class')?.trim() || undefined;
 
       tab.id = id;
 
@@ -163,7 +168,7 @@ export default class ZnPage extends ZnTabs {
         tab.slot = slotName!;
       }
 
-      tabs.push({id, caption, priority, sourceIndex: index, uri, slotName});
+      tabs.push({id, caption, priority, sourceIndex: index, uri, slotName, selected, classes});
     });
 
     this.tabDefinitions = tabs.sort((a, b) => this.compareTabs(a, b));
@@ -272,6 +277,12 @@ export default class ZnPage extends ZnTabs {
   }
 
   private activateInitialPageTab() {
+    const preselected = this.tabDefinitions.find(tab => tab.selected);
+    if (preselected) {
+      this.activateTabDefinition(preselected);
+      return;
+    }
+
     const selectedPanel = this.shadowRoot?.querySelector('#content > div[selected]');
     const firstTab = this.tabDefinitions[0];
 
@@ -280,6 +291,28 @@ export default class ZnPage extends ZnTabs {
     }
   }
 
+  private activateTabDefinition(tab: TabDefinition) {
+    if (tab.uri) {
+      const navItem = this.findNavItemForUri(tab.uri);
+      if (navItem) {
+        this.clickTab(navItem, false);
+        this.syncNavigationActive(navItem);
+        return;
+      }
+    }
+    this.activateTab(tab.id, false);
+  }
+
+  private findNavItemForUri(uri: string): HTMLElement | null {
+    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('zn-navbar li[tab-uri]') ?? [];
+    for (const item of Array.from(items)) {
+      if (item.getAttribute('tab-uri') === uri) {
+        return item;
+      }
+    }
+    return null;
+  }
+
   private registerPagePanels() {
     this.shadowRoot?.querySelectorAll<HTMLElement>('#content > div[id]').forEach(panel => {
       this._addPanel(panel);
@@ -351,26 +384,24 @@ export default class ZnPage extends ZnTabs {
                   : null}
               </div>` : null}
 
-            <div class="content" part="content">
+            <div class="content">
               ${hasPreviousPath ? html`
                 <a href="${this.previousPath}" class="caption__back"
                    data-target="${this.previousTarget ? this.previousTarget : ''}">
-                  <zn-button size="content" icon="arrow_back" icon-size="24" color="transparent"></zn-button>
+                  <zn-button icon="arrow_back" icon-size="24" color="transparent"></zn-button>
                 </a>` : null}
 
               <div class="caption">
-                <div part="header-left" class="header__left">
-                  <span class="header__caption" part="header-caption">
+                <div class="header__left">
+                  <span class="header__caption">
                     ${hasBreadcrumb ? html`
                       <slot name="breadcrumb" class="breadcrumb"></slot>` : null}
                     <slot name="caption">${this.caption}</slot>
                   </span>
-                  ${this.summary ? html`
-                      <span class="header__description" part="header-description">${this.summary}</span>`
-                    : null}
+                  <span class="header__description">${this.summary}</span>
                 </div>
 
-                <div class="header__right" part="header-right">
+                <div class="header__right">
                   <slot name="actions"></slot>
                 </div>
               </div>
@@ -380,9 +411,9 @@ export default class ZnPage extends ZnTabs {
           ${hasNavigation ? html`
             <zn-navbar hide-one @zn-select="${this.handleNavigationSelect}">
               ${this.tabDefinitions.map(tab => tab.uri ? html`
-                <li tab-uri="${tab.uri}">${tab.caption}</li>
+                <li tab-uri="${tab.uri}" class="${ifDefined(tab.classes)}">${tab.caption}</li>
               ` : html`
-                <li tab="${tab.id}">${tab.caption}</li>
+                <li tab="${tab.id}" class="${ifDefined(tab.classes)}">${tab.caption}</li>
               `)}
               <slot name="bottom" slot="bottom"></slot>
             </zn-navbar>
@@ -394,7 +425,7 @@ export default class ZnPage extends ZnTabs {
             ${this.tabDefinitions
               .filter(tab => tab.slotName !== null)
               .map(tab => html`
-                <div id="${tab.id}">
+                <div id="${tab.id}" ?selected="${tab.selected}">
                   <slot name="${tab.slotName!}"></slot>
                 </div>
               `)}

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>
@@ -380,6 +380,23 @@ describe('<zn-page>', () => {
     expect(getComputedStyle(activeNavItem).transitionDuration).to.equal('0.1s');
   });
 
+  it('opens the tab flagged with the selected attribute instead of the first', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Page Title">
+        <zn-tab caption="Overview">Overview Content</zn-tab>
+        <zn-tab caption="Dynamic Tab" uri="/tab-three" selected></zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(60);
+
+    const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
+    const uriItem = navbar.querySelector<HTMLElement>('li[tab-uri="/tab-three"]')!;
+    const overviewItem = navbar.querySelector<HTMLElement>('li[tab=""]')!;
+
+    expect(uriItem.classList.contains('active')).to.equal(true);
+    expect(overviewItem.classList.contains('active')).to.equal(false);
+  });
+
   it('disables breadcrumbs in modal mode', async () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title" modal>

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/tab/tab.component.ts

@@ -18,6 +18,8 @@ export default class ZnTab extends ZincElement {
   @property() caption: string;
   @property({type: Number}) priority: number;
   @property() uri: string;
+  /** When present, zn-page opens this tab on load instead of the first tab. */
+  @property({type: Boolean, reflect: true}) selected = false;
 
   render() {
     return html`<slot></slot>`;

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
                       >+