@kubex/zinc 1.1.16 → 1.1.18

package/package.json

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

package/scss/shared/_table.scss

@@ -48,7 +48,6 @@ table:not(.remarkd-table) {
   th {
     @include m.text-style(button-label);
     text-transform: capitalize;
-    border-top: 1px solid rgb(var(--zn-border-color));
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 }

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

@@ -60,7 +60,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   @queryAll('.loading-countdown') countdownContainer: HTMLElement[];
 
   @property({}) color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |
-    'transparent' | 'star' | (string & Record<never, never>) = 'default';
+    'transparent' | 'star' | 'white' | (string & Record<never, never>) = 'default';
   @property({attribute: 'hover-color'}) hoverColor: string;
   @property({type: Boolean}) text = false;
   @property({type: Boolean}) outline = false;
@@ -388,6 +388,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--warning': this.color === 'warning',
           'button--transparent': this.color === 'transparent',
           'button--star': this.color === 'star',
+          'button--white': this.color === 'white',
           'button--outline': this.outline,
           'button--text': (this.text && !this.outline),
           'button--icon-button': !!this.iconButton,

package/src/components/button/button.scss

@@ -244,6 +244,22 @@
   }
 }
 
+/**
+ * White: white panel background with a neutral border, matching the
+ * icon-button look but for normal (auto-width, text) buttons.
+ *
+ * Doubled-up selector so it out-cascades the standard/secondary combos.
+ */
+.button.button--white {
+  background: rgb(var(--zn-panel));
+  border-color: var(--zn-button-border-color, rgb(var(--zn-border-color)));
+  color: rgb(var(--zn-text));
+
+  &:hover:not([disabled]), &:active:not([disabled]) {
+    background: rgba(var(--zn-color-tab), 0.5);
+  }
+}
+
 /**
  * Icon buttons
  *

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

@@ -722,11 +722,13 @@ export default class ZnDataTable extends ZincElement {
 
     return html`
       <div class="table__footer__pagination-buttons">
-        <zn-button @click="${this.page !== 1 ? this.goToFirstPage : undefined}"
+        <zn-button color="white"
+                   @click="${this.page !== 1 ? this.goToFirstPage : undefined}"
                    ?disabled="${this.page === 1}"
                    icon="arrow_left@lu">First
         </zn-button>
-        <zn-button @click="${this.page !== 1 ? this.goToPreviousPage : undefined}"
+        <zn-button color="white"
+                   @click="${this.page !== 1 ? this.goToPreviousPage : undefined}"
                    ?disabled="${this.page === 1}">Back
         </zn-button>
         ${this.getPageRange().map((p) => p === 'ellipsis'
@@ -737,10 +739,12 @@ export default class ZnDataTable extends ZincElement {
                        class="${p === this.page ? 'table__footer__pagination-page--active' : ''}">${p}
             </zn-button>`
         )}
-        <zn-button @click="${this.page !== this.totalPages ? this.goToNextPage : undefined}"
+        <zn-button color="white"
+                   @click="${this.page !== this.totalPages ? this.goToNextPage : undefined}"
                    ?disabled="${this.page === this.totalPages}">Next
         </zn-button>
-        <zn-button @click="${this.page !== this.totalPages ? this.goToLastPage : undefined}"
+        <zn-button color="white"
+                   @click="${this.page !== this.totalPages ? this.goToLastPage : undefined}"
                    ?disabled="${this.page === this.totalPages}"
                    icon="arrow_right@lu"
                    icon-position="right">Last
@@ -1339,9 +1343,9 @@ export default class ZnDataTable extends ZincElement {
       <td class="table__cell table__cell--actions">
         <zn-dropdown placement="bottom-end">
           <zn-button slot="trigger"
-                     icon-button
-                     plain
+                     icon-button="small"
                      icon="ellipsis@lu"
+                     plain
                      aria-label="Row actions">
           </zn-button>
           <zn-menu>

package/src/components/data-table/data-table.scss

@@ -80,7 +80,6 @@ table {
 
   th {
     @include wc.text-style(button-label);
-    border-top: 1px solid rgb(var(--zn-border-color));
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 }
@@ -285,23 +284,12 @@ table {
       flex-direction: row;
       align-items: center;
       gap: var(--zn-spacing-x-small);
-
-      button {
-        border: 1px solid rgb(var(--zn-border-color));
-        border-radius: 5px;
-        padding: var(--zn-spacing-x-small);
-
-        &[disabled] {
-          cursor: not-allowed;
-          opacity: 0.5;
-        }
-      }
     }
 
     &__pagination-page--active::part(base) {
-      background-color: rgb(var(--zn-primary));
-      border-color: rgb(var(--zn-primary));
-      color: rgb(var(--zn-text-on-primary, 255 255 255));
+      background-color: var(--zn-color-neutral-300);
+      border-color: var(--zn-color-neutral-300);
+      color: rgb(var(--zn-text));
     }
 
     &__pagination-ellipsis {

package/src/components/status-indicator/status-indicator.scss

@@ -1,7 +1,13 @@
 @use "../../wc";
 
 :host {
-  --indicator-color: var(--zn-color-info);
+  --zn-indicator-info: 100, 117, 242;
+  --zn-indicator-warning: 255, 136, 0;
+  --zn-indicator-error: 237, 84, 109;
+  --zn-indicator-success: 43, 192, 145;
+  --zn-indicator-disabled: 220, 220, 220;
+
+  --indicator-color: var(--zn-indicator-disabled);
   white-space: nowrap;
   display: inline-block;
 }
@@ -15,18 +21,18 @@
   border-radius: 50%;
 
   &--info {
-    --indicator-color: var(--zn-color-info);
+    --indicator-color: var(--zn-indicator-info);
   }
 
   &--error {
-    --indicator-color: var(--zn-color-error);
+    --indicator-color: var(--zn-indicator-error);
   }
 
   &--warning {
-    --indicator-color: var(--zn-color-warning);
+    --indicator-color: var(--zn-indicator-warning);
   }
 
   &--success {
-    --indicator-color: var(--zn-color-success);
+    --indicator-color: var(--zn-indicator-success);
   }
 }

package/src/form-control.scss

@@ -1,5 +1,5 @@
 .form-control-input {
-  margin: var(--zn-spacing-2x-small) 3px 3px;
+  margin: var(--zn-spacing-2x-small) 3px 3px 0;
 }
 
 .form-control-input--flush {
@@ -20,7 +20,7 @@
   color: var(--zn-input-label-color);
   font-weight: var(--zn-input-label-font-weight);
   line-height: var(--zn-input-label-line-height);
-  margin-bottom: var(--zn-spacing-2x-small);
+  margin-bottom: var(--zn-spacing-x-small);
 }
 
 .form-control--has-label.form-control--medium .form-control__label {