@kubex/zinc 1.0.115 → 1.0.117

package/src/components/button/button.scss

@@ -20,9 +20,12 @@
   --btn-color: var(--zn-primary);
   --notification-color: rgb(var(--zn-color-error));
 
-  border-width: 1px;
-  border-color: transparent;
-  height: 100%;
+  border-width: var(--zn-button-border-width, 1px);
+  border-top-width: var(--zn-button-border-top-width, var(--zn-button-border-width, 1px));
+  border-right-width: var(--zn-button-border-right-width, var(--zn-button-border-width, 1px));
+  border-bottom-width: var(--zn-button-border-bottom-width, var(--zn-button-border-width, 1px));
+  border-left-width: var(--zn-button-border-left-width, var(--zn-button-border-width, 1px));
+  border-color: var(--zn-button-border-color, transparent);
   display: inline-flex;
   position: relative;
 
@@ -47,6 +50,12 @@
   }
 }
 
+.button.button--icon-button {
+  max-height: 20px;
+  height: 20px;
+  min-height: 20px;
+}
+
 .button.button--muted-notification {
   --notification-color: rgb(var(--zn-color-info));
 }
@@ -60,8 +69,9 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    top: 0;
-    inset-inline-end: 0;
+    top: 1px;
+    left: auto;
+    inset-inline-end: 1px;
     width: 15px;
     height: 15px;
     border-radius: 50%;
@@ -106,7 +116,7 @@
 .button--standard {
   &.button--secondary {
     background-color: var(--zn-color-neutral-50);
-    border-color: var(--zn-color-neutral-50);
+    border-color: var(--zn-button-border-color, var(--zn-color-neutral-50));
     color: rgb(var(--zn-primary));
 
     &:hover:not([disabled]) {
@@ -120,7 +130,7 @@
 
 
   background-color: rgba(var(--btn-color), .85);
-  border-color: rgb(var(--btn-color));
+  border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
   color: rgba(255, 255, 255, 0.9);
 
   &:hover:not([disabled]) {
@@ -134,8 +144,12 @@
 
 .button--outline {
   background: none;
-  border-width: 1px;
-  border-color: rgb(var(--btn-color));
+  border-width: var(--zn-button-border-width, 1px);
+  border-top-width: var(--zn-button-border-top-width, var(--zn-button-border-width, 1px));
+  border-right-width: var(--zn-button-border-right-width, var(--zn-button-border-width, 1px));
+  border-bottom-width: var(--zn-button-border-bottom-width, var(--zn-button-border-width, 1px));
+  border-left-width: var(--zn-button-border-left-width, var(--zn-button-border-width, 1px));
+  border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
   color: rgb(var(--btn-color));
 
   &:hover:not([disabled]), &:active:not([disabled]) {
@@ -144,7 +158,7 @@
   }
 
   &.button--secondary {
-    border-color: var(--zn-color-neutral-100);
+    border-color: var(--zn-button-border-color, var(--zn-color-neutral-100));
 
     &:hover:not([disabled]), &:active:not([disabled]) {
       background-color: var(--zn-color-neutral-100);
@@ -167,103 +181,20 @@
   }
 }
 
-.button--x-small {
-  padding: 2px 10px;
-  font-size: 12px;
-}
-
-.button--content {
-  padding: 0 0;
-  font-size: 12px;
-
-  zn-icon {
-    line-height: 0;
-  }
-}
-
 .button--grow {
   width: 100%;
 }
 
-.button--small {
-  padding: 4px 14px;
-}
-
-.button--large {
-  padding: 10px 20px;
-}
-
-.button--with-icon:not(.button--with-content) {
-  &.button--x-small,
-  &.button--small {
-    padding: 4px;
-  }
-
-  &.button--medium {
-    padding: 7px;
-  }
-
-  &.button--large {
-    padding: 10px;
-    font-size: 16px;
-  }
-}
-
-.button--with-icon.button--with-content {
-  &.button--x-small,
-  &.button--small {
-    padding-left: 10px;
-
-    &.button--icon-left {
-      padding-left: 10px;
-
-      zn-icon {
-        margin-right: 4px;
-      }
-    }
-
-    &.button--icon-right {
-      padding-right: 10px;
-
-      zn-icon {
-        margin-left: 4px;
-      }
+.button--with-icon.button--with-content:not(.button--icon-button) {
+  &.button--icon-left {
+    zn-icon {
+      margin-right: var(--zn-base-px);
     }
   }
 
-  &.button--medium {
-    &.button--icon-left {
-      padding-left: 10px;
-
-      zn-icon {
-        margin-right: 6px;
-      }
-    }
-
-    &.button--icon-right {
-      padding-right: 10px;
-
-      zn-icon {
-        margin-left: 6px;
-      }
-    }
-  }
-
-  &.button--large {
-    &.button--icon-left {
-      padding-left: 14px;
-
-      zn-icon {
-        margin-right: 8px;
-      }
-    }
-
-    &.button--icon-right {
-      padding-right: 14px;
-
-      zn-icon {
-        margin-left: 8px;
-      }
+  &.button--icon-right {
+    zn-icon {
+      margin-left: var(--zn-base-px);
     }
   }
 }
@@ -274,7 +205,7 @@
 
 .button--transparent {
   background-color: transparent;
-  border-color: transparent !important;
+  border-color: var(--zn-button-border-color, transparent) !important;
   color: inherit;
 
   &:hover:not([disabled]) {
@@ -289,7 +220,7 @@
 .button--star {
   --btn-color: var(--zn-orange);
   background-color: rgb(var(--btn-color));
-  border-color: rgb(var(--btn-color));
+  border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
   color: white;
   opacity: 1 !important;
 
@@ -303,7 +234,7 @@
 
   &.button--outline {
     background-color: transparent;
-    border-color: rgb(var(--btn-color));
+    border-color: var(--zn-button-border-color, rgb(var(--btn-color)));
     color: rgb(var(--btn-color));
 
     &:hover:not([disabled]), &:active:not([disabled]) {
@@ -313,6 +244,39 @@
   }
 }
 
+.button--icon-button {
+  --icon-button-color: rgb(var(--zn-text));
+  --icon-button-hover-color: rgb(var(--zn-primary));
+
+  background: transparent;
+  border-color: var(--zn-button-border-color, transparent) !important;
+  color: var(--icon-button-color);
+  font-weight: inherit;
+  line-height: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  width: auto;
+
+  zn-icon,
+  ::slotted(zn-icon) {
+    --icon-color: currentColor;
+
+    color: inherit;
+    line-height: 0;
+  }
+
+  &:hover:not([disabled]), &:active:not([disabled]) {
+    background: transparent;
+    color: var(--icon-button-hover-color);
+  }
+}
+
+.button--with-icon.button--icon-button {
+  border: 0;
+  margin: 0;
+}
+
 .button--loading-bg {
   &-transparent {
     background-color: transparent;

package/src/components/button-menu/button-menu.component.ts

@@ -40,8 +40,6 @@ export default class ZnButtonMenu extends ZincElement {
   @property({type: Number, attribute: 'max-level'})
   public maxLevel: number = 2; // primary = 1, secondary = 2, transparent = 3
 
-  @property({}) size: 'content' | 'x-small' | 'small' | 'medium' | 'large' = 'medium';
-
   @property({type: Number, attribute: 'icon-size', reflect: true}) iconSize: number = 24;
 
   @property({type: Boolean, attribute: 'no-gap'}) public noGap: boolean;
@@ -169,7 +167,7 @@ export default class ZnButtonMenu extends ZincElement {
       menu.innerHTML = '';
     }
 
-    // Add colors to the buttons depending on type and set button size
+    // Add colors to the buttons depending on type
     this._buttons.forEach((button: CustomButtonWidths, index: number) => {
       if (index < visibleButtons) {
         this.shadowRoot?.querySelector('.button-menu__container')?.appendChild(button.button);
@@ -180,7 +178,6 @@ export default class ZnButtonMenu extends ZincElement {
         if (button.button.hasAttribute('primary') || button.button.hasAttribute('secondary')) {
           button.button.setAttribute('text', "");
         }
-        button.button.setAttribute('size', this.size);
       }
     });
 
@@ -293,8 +290,7 @@ export default class ZnButtonMenu extends ZincElement {
       })}">
         <div class="button-menu__container"></div>
         <zn-dropdown placement="bottom-end">
-          <zn-button slot="trigger" icon="more_vert" icon-size="${this.iconSize}" color="transparent"
-                     size="${this.size}"></zn-button>
+          <zn-button slot="trigger" icon="more_vert" icon-size="${this.iconSize}" color="transparent"></zn-button>
           <zn-menu></zn-menu>
         </zn-dropdown>
         <slot></slot>

package/src/components/collapsible/collapsible.scss

@@ -14,7 +14,7 @@
   justify-content: space-between;
   cursor: pointer;
   overflow: hidden;
-  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
+  padding: var(--zn-base-gap);
   justify-items: center;
 
   .caption {

package/src/components/cols/cols.scss

@@ -18,7 +18,7 @@
   width: 100%;
   container-type: inline-size;
   overflow: hidden;
-  gap: var(--zn-spacing-medium);
+  gap: var(--zn-gap);
 
   max-width: 100%;
 

package/src/components/content-block/content-block.component.ts

@@ -209,8 +209,7 @@ export default class ContentBlock extends ZincElement {
             <slot name="actions"><small>${this.time}</small></slot>
             ${showActions ? html`
               <zn-dropdown>
-                <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent"
-                           size="content"></zn-button>
+                <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent"></zn-button>
                 <zn-menu>
                   <zn-menu-item @click="${this._toggleHtml}">
                     Show HTML

package/src/components/data-table/data-table.component.ts

@@ -705,28 +705,24 @@ export default class ZnDataTable extends ZincElement {
             <zn-button @click="${this.page !== 1 ? this.goToFirstPage : undefined}"
                        ?disabled="${this.page === 1}"
                        icon-size="16"
-                       size="small"
                        icon="keyboard_double_arrow_left"
                        outline>
             </zn-button>
             <zn-button @click="${this.page !== 1 ? this.goToPreviousPage : undefined}"
                        ?disabled="${this.page === 1}"
                        icon-size="16"
-                       size="small"
                        icon="chevron_left"
                        outline>
             </zn-button>
             <zn-button @click="${this.page !== this.totalPages ? this.goToNextPage : undefined}"
                        ?disabled="${this.page === this.totalPages}"
                        icon-size="16"
-                       size="small"
                        icon="chevron_right"
                        outline>
             </zn-button>
             <zn-button @click="${this.page !== this.totalPages ? this.goToLastPage : undefined}"
                        ?disabled="${this.page === this.totalPages}"
                        icon-size="16"
-                       size="small"
                        icon="keyboard_double_arrow_right"
                        outline>
             </zn-button>
@@ -749,7 +745,6 @@ export default class ZnDataTable extends ZincElement {
         <zn-button @click="${this.selectAll}"
                    id="select-all-rows"
                    color="transparent"
-                   size="x-small"
                    icon="indeterminate_check_box"
                    icon-size="22"
                    icon-color="primary"
@@ -762,7 +757,6 @@ export default class ZnDataTable extends ZincElement {
       actions.push(html`
         <zn-button @click="${this.clearSelectedRows}"
                    color="transparent"
-                   size="x-small"
                    icon="disabled_by_default"
                    icon-size="22"
                    tooltip="Clear Selection"
@@ -1097,7 +1091,6 @@ export default class ZnDataTable extends ZincElement {
       <td class="table__cell table__cell--expander">
         <zn-button
           color="transparent"
-          size="x-small"
           icon="${icon}"
           icon-size="18"
           aria-label="${expanded ? 'Collapse row' : 'Expand row'}"
@@ -1180,6 +1173,10 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private updateSelectAll() {
+    if (!this.selectAllButton) {
+      return;
+    }
+
     if (this.numberOfRowsSelected === this._rows.length) {
       this.selectAllButton.icon = 'check_box';
     } else {
@@ -1324,7 +1321,6 @@ export default class ZnDataTable extends ZincElement {
         <zn-dropdown placement="bottom-end">
           <zn-button slot="trigger"
                      icon="more_vert"
-                     size="small"
                      color="transparent"
                      icon-size="24"
                      aria-label="Row actions">

package/src/components/data-table/data-table.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import type ZnDataTable from './data-table.component';
 
 describe('<zn-data-table>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,10 @@ describe('<zn-data-table>', () => {
 
     expect(el).to.exist;
   });
+
+  it('does not throw when updating selection without a select-all button', async () => {
+    const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
+
+    expect(() => (el as unknown as { updateKeys: () => void }).updateKeys()).not.to.throw();
+  });
 });

package/src/components/data-table-filter/data-table-filter.component.ts

@@ -104,7 +104,7 @@ export default class ZnDataTableFilter extends ZincElement implements ZincFormCo
 
   render() {
     return html`
-      <zn-button id="slideout-trigger" color="transparent" size="x-small" icon="filter_alt" icon-size="22"
+      <zn-button id="slideout-trigger" color="transparent" icon="filter_alt" icon-size="22"
                  slot="trigger"
                  tooltip="Filter">
       </zn-button>

package/src/components/data-table-sort/data-table-sort.component.ts

@@ -26,7 +26,7 @@ export default class ZnDataTableSort extends ZincElement {
   render() {
     return html`
       <zn-dropdown distance="50" placement="bottom-start" class="data-table-sort">
-        <zn-button color="transparent" size="x-small" icon="sort" icon-size="22" slot="trigger" tooltip="Open Sort">
+        <zn-button color="transparent" icon="sort" icon-size="22" slot="trigger" tooltip="Open Sort">
           Sort
         </zn-button>
 
@@ -47,7 +47,7 @@ export default class ZnDataTableSort extends ZincElement {
           <div class="data-table-sort__btn-group">
             <zn-button color="secondary" slot="footer">Cancel</zn-button>
             <div>
-              <zn-button color="transparent" size="x-small" slot="footer">Clear</zn-button>
+              <zn-button color="transparent" slot="footer">Clear</zn-button>
               <zn-button color="default" slot="footer">Update</zn-button>
             </div>
           </div>

package/src/components/dialog/dialog.component.ts

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

package/src/components/editor/modules/dialog/dialog.component.ts

@@ -101,7 +101,6 @@ export default class DialogComponent extends ZincElement {
           icon-size="24"
           type="button"
           color="transparent"
-          size="content"
           @click="${() => this.dialogEl.close()}"
         ></zn-button>
         <div class="editor-dialog__content">

package/src/components/editor/modules/dialog/dialog.scss

@@ -8,7 +8,7 @@
 }
 
 ::backdrop {
-  background-color: rgba(128, 128, 128, 0.6);
+  background-color: var(--zn-backdrop-color, rgba(128, 128, 128, 0.6));
 }
 
 .editor-dialog {

package/src/components/editor/modules/toolbar/toolbar.component.ts

@@ -486,7 +486,6 @@ export default class ToolbarComponent extends ZincElement {
             <zn-button slot="trigger"
                        class="toolbar__overflow-trigger"
                        color="transparent"
-                       size="content"
                        icon="more_horiz"
                        icon-size="18"
                        icon-position="right"></zn-button>

package/src/components/expanding-action/expanding-action.component.ts

@@ -245,7 +245,6 @@ export default class ZnExpandingAction extends ZincElement {
     return html`
       ${this.method === 'fill' ? html`
         <zn-button color="transparent"
-                   size="x-small"
                    class="expanding-action__button"
                    @click="${this.handleIconClicked}"
                    icon="${this.icon}"
@@ -275,7 +274,6 @@ export default class ZnExpandingAction extends ZincElement {
         <zn-button slot="trigger"
                    class="expanding-action__button"
                    color="transparent"
-                   size="medium"
                    icon="${this.icon}"
                    icon-color="${this.color}"
                    icon-size="20"
@@ -297,7 +295,6 @@ export default class ZnExpandingAction extends ZincElement {
       <zn-button slot="trigger"
                  class="expanding-action__button expanding-action__close-icon"
                  color="transparent"
-                 size="medium"
                  @click="${this.handleIconCloseClicked}"
                  icon="close"
                  icon-size="20">

package/src/components/expanding-action/expanding-action.scss

@@ -2,7 +2,6 @@
 
 :host {
   display: block;
-  padding-bottom: var(--zn-spacing-2x-small);
 }
 
 .expanding-action--fill {
@@ -67,10 +66,6 @@
   }
 }
 
-zn-button.expanding-action__button {
-  aspect-ratio: 1/1;
-}
-
 .expanding-action--drop .expanding-action__content {
   min-width: 300px;
   width: var(--expanding-action-basis, var(--zn-container-smp, 320px));