@kubex/zinc 1.1.13 → 1.1.14

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

@@ -610,12 +610,10 @@ export default class ZnDataTable extends ZincElement {
           </tr>
           </thead>
           <tbody>
-          ${(data as Row[]).map((row: Row, rowIndex: number) => html`
+          ${(data as Row[]).map((row: Row) => html`
             <tr class="${classMap({
               'table__row--selected': this.isRowSelected(row),
               'table__row--data': true,
-              'table__row--even': (rowIndex % 2) === 0,
-              'table__row--odd': (rowIndex % 2) === 1,
             })}" data-row-id="${row.id}">
               ${anyHidden ? this.renderExpanderCell(row) : nothing}
               ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value))}
@@ -650,15 +648,17 @@ export default class ZnDataTable extends ZincElement {
   getTableFooter() {
     const rowSelected = this.getRowsSelected();
     const pagination = this.getPagination();
+    const rowsPerPage = this.getRowsPerPage();
 
-    if (rowSelected !== null || pagination !== null) {
+    if (rowSelected !== null || pagination !== null || rowsPerPage !== null) {
       return html`
         <div class="table__footer">
           <div class="table__footer__left">
+            ${pagination}
             ${rowSelected}
           </div>
           <div class="table__footer__right">
-            ${pagination}
+            ${rowsPerPage}
           </div>
         </div>`;
     }
@@ -673,7 +673,7 @@ export default class ZnDataTable extends ZincElement {
       <p>${this.numberOfRowsSelected} of ${this._rows.length} rows selected</p>`
   }
 
-  getPagination() {
+  getRowsPerPage() {
     if (this.hidePagination || (this.totalPages <= 1 && this._rows.length <= this.itemsPerPage)) return null;
 
     const optionsRowsPerPage = [10, 20, 30, 40, 50];
@@ -692,41 +692,60 @@ export default class ZnDataTable extends ZincElement {
             </zn-option>`
           )}
         </zn-select>
-      </div>
+      </div>`;
+  }
 
-      ${this.totalPages <= 1
-        ? html``
-        : html`
-          <div class="table__footer__pagination-count">
-            <p>Page ${this.page} of ${this.totalPages}</p>
-          </div>
+  private getPageRange(): (number | 'ellipsis')[] {
+    const total = this.totalPages;
+    const current = this.page;
+
+    if (total <= 7) {
+      return Array.from({length: total}, (_, i) => i + 1);
+    }
+
+    const showLeftEllipsis = current > 4;
+    const showRightEllipsis = current < total - 3;
+
+    if (!showLeftEllipsis && showRightEllipsis) {
+      return [1, 2, 3, 4, 5, 'ellipsis', total];
+    }
 
-          <div class="table__footer__pagination-buttons">
-            <zn-button @click="${this.page !== 1 ? this.goToFirstPage : undefined}"
-                       ?disabled="${this.page === 1}"
-                       icon-size="16"
-                       icon="keyboard_double_arrow_left"
-                       outline>
-            </zn-button>
-            <zn-button @click="${this.page !== 1 ? this.goToPreviousPage : undefined}"
-                       ?disabled="${this.page === 1}"
-                       icon-size="16"
-                       icon="chevron_left"
-                       outline>
-            </zn-button>
-            <zn-button @click="${this.page !== this.totalPages ? this.goToNextPage : undefined}"
-                       ?disabled="${this.page === this.totalPages}"
-                       icon-size="16"
-                       icon="chevron_right"
-                       outline>
-            </zn-button>
-            <zn-button @click="${this.page !== this.totalPages ? this.goToLastPage : undefined}"
-                       ?disabled="${this.page === this.totalPages}"
-                       icon-size="16"
-                       icon="keyboard_double_arrow_right"
-                       outline>
-            </zn-button>
-          </div>`}`;
+    if (showLeftEllipsis && !showRightEllipsis) {
+      return [1, 'ellipsis', total - 4, total - 3, total - 2, total - 1, total];
+    }
+
+    return [1, 'ellipsis', current - 1, current, current + 1, 'ellipsis', total];
+  }
+
+  getPagination() {
+    if (this.hidePagination || this.totalPages <= 1) return null;
+
+    return html`
+      <div class="table__footer__pagination-buttons">
+        <zn-button @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}"
+                   ?disabled="${this.page === 1}">Back
+        </zn-button>
+        ${this.getPageRange().map((p) => p === 'ellipsis'
+          ? html`<span class="table__footer__pagination-ellipsis">…</span>`
+          : html`
+            <zn-button @click="${p !== this.page ? () => this.goToPage(p) : undefined}"
+                       icon-button="small"
+                       class="${p === this.page ? 'table__footer__pagination-page--active' : ''}">${p}
+            </zn-button>`
+        )}
+        <zn-button @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}"
+                   ?disabled="${this.page === this.totalPages}"
+                   icon="arrow_right@lu"
+                   icon-position="right">Last
+        </zn-button>
+      </div>`;
   }
 
   getActions() {
@@ -1005,20 +1024,20 @@ export default class ZnDataTable extends ZincElement {
     if (this.sortColumn !== key) {
       return html`
         <div class="table__head__sort">
-          <zn-icon src="unfold_more" size="14"></zn-icon>
+          <zn-icon src="chevrons_up_down@lu" size="14"></zn-icon>
         </div>`;
     }
 
     if (this.sortDirection === 'asc') {
       return html`
         <div class="table__head__sort table__head__sort--active">
-          <zn-icon src="arrow_downward_alt" size="16"></zn-icon>
+          <zn-icon src="chevron_down@lu" size="16"></zn-icon>
         </div>`;
     }
 
     return html`
       <div class="table__head__sort table__head__sort--active">
-        <zn-icon src="arrow_upward_alt" size="16"></zn-icon>
+        <zn-icon src="chevron_up@lu" size="16"></zn-icon>
       </div>`;
   }
 
@@ -1085,7 +1104,7 @@ export default class ZnDataTable extends ZincElement {
       <td class="table__cell table__cell--expander"></td>`;
 
     const expanded = this._expandedRows.has(row.id);
-    const icon = expanded ? 'expand_more' : 'chevron_right';
+    const icon = expanded ? 'chevron_down@lu' : 'chevron_right';
 
     return html`
       <td class="table__cell table__cell--expander">
@@ -1320,9 +1339,9 @@ export default class ZnDataTable extends ZincElement {
       <td class="table__cell table__cell--actions">
         <zn-dropdown placement="bottom-end">
           <zn-button slot="trigger"
-                     icon="more_vert"
-                     color="transparent"
-                     icon-size="24"
+                     icon-button
+                     plain
+                     icon="ellipsis@lu"
                      aria-label="Row actions">
           </zn-button>
           <zn-menu>

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

@@ -17,16 +17,12 @@ table {
   max-width: 100%;
   table-layout: auto;
   text-align: left;
-  font-size: var(--zn-text-table-content-font-size);
-  line-height: var(--zn-text-table-content-line-height);
-  font-weight: var(--zn-text-table-content-font-weight);
+  @include wc.text-style(table-content);
 
-  tbody tr:nth-of-type(even) {
-    background-color: unset;
-  }
-
-  tbody tr.table__row--data.table__row--odd:not(.table__row--selected) td {
-    background-color: rgba(var(--zn-body));
+  tbody tr.table__row--data td {
+    height: 48px;
+    padding-block: 0;
+    overflow: hidden;
   }
 
   tbody tr.table__row--details td {
@@ -38,6 +34,10 @@ table {
     border-radius: var(--zn-border-radius);
     border: 1px solid rgb(var(--zn-border-color));
     overflow: hidden;
+
+    thead tr th {
+      border-top: 0;
+    }
   }
 
   thead {
@@ -46,6 +46,7 @@ table {
   }
 
   thead tr th {
+    background-color: rgb(var(--zn-table-header-background-color));
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
@@ -67,32 +68,19 @@ table {
     border-top: 0 !important;
   }
 
-  thead tr th:first-of-type,
-  tbody tr td:first-of-type {
-    padding-left: var(--zn-base-gap, 14px);
-  }
-
-  thead tr th:last-of-type,
-  tbody tr td:last-of-type {
-    padding-right: var(--zn-base-gap, 14px);
-  }
-
   th, td {
-    padding: var(--zn-spacing-medium);
+    padding: var(--zn-spacing-small) var(--zn-spacing-medium);
     min-width: 90px;
     white-space: nowrap;
 
     span {
       white-space: normal;
     }
-
-    &:first-child {
-      padding-left: 0;
-    }
   }
 
   th {
-    padding-bottom: 0;
+    @include wc.text-style(button-label);
+    border-top: 1px solid rgb(var(--zn-border-color));
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 }
@@ -104,11 +92,6 @@ table {
 
 .table { // The container element that holds the table and the filters
 
-  tr th {
-    padding-top: var(--zn-spacing-large);
-    padding-bottom: var(--zn-spacing-large);
-  }
-
   tr th, tr td {
     min-width: 50px;
 
@@ -140,34 +123,23 @@ table {
   }
 
   &__head {
-    &:hover {
-      .table__head__sort {
-        opacity: 1;
-      }
-    }
+    text-transform: capitalize;
 
     &__sort {
-      margin-left: var(--zn-spacing-small);
-      opacity: 0;
+      margin: 0;
+      padding: 0;
+      opacity: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       cursor: pointer;
-
-      &--active {
-        opacity: 1 !important;
-      }
     }
 
     &--wide {
       width: 100%;
     }
 
-    &--last div {
-      flex-direction: row-reverse !important;
-    }
-
     &--left div {
       justify-content: flex-start;
     }
@@ -198,10 +170,6 @@ table {
       width: 100%;
     }
 
-    &--last div {
-      justify-content: flex-end;
-    }
-
     &--left div {
       justify-content: flex-start;
     }
@@ -217,6 +185,7 @@ table {
     &--actions {
       width: 25px;
       min-width: 25px;
+      text-align: right;
     }
 
     .caption {
@@ -290,7 +259,7 @@ table {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: var(--zn-spacing-medium) var(--zn-spacing-medium);
+    padding: var(--zn-spacing-medium) 0;
 
     &__right, &__left {
       display: flex;
@@ -311,10 +280,6 @@ table {
       }
     }
 
-    &__pagination-count {
-
-    }
-
     &__pagination-buttons {
       display: flex;
       flex-direction: row;
@@ -332,6 +297,19 @@ table {
         }
       }
     }
+
+    &__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));
+    }
+
+    &__pagination-ellipsis {
+      display: flex;
+      align-items: center;
+      padding: 0 var(--zn-spacing-x-small);
+      color: rgb(var(--zn-text));
+    }
   }
 
   &__details {
@@ -438,10 +416,6 @@ table tbody tr.table__row--selected {
       border-bottom-right-radius: 0;
     }
   }
-
-  &.table__row--odd {
-    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
-  }
 }
 
 table:has(tbody tr:first-of-type.table__row--selected) thead tr th {

package/src/components/icon/icon.component.ts

@@ -354,7 +354,7 @@ export default class ZnIcon extends ZincElement {
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
-        stroke-width="2"
+        stroke-width="2.1"
         stroke-linecap="round"
         stroke-linejoin="round"
         aria-hidden="true"

package/src/components/icon/icon.scss

@@ -141,7 +141,8 @@ $icon-colors: (
   }
 
   @each $name, $token in $icon-colors {
-    &--fill-#{$name} {
+    $display-name: "" + $name;
+    &--fill-#{$display-name} {
       --icon-fill: rgb(var(#{$token}));
     }
   }

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

@@ -103,6 +103,35 @@ export default class ZnPage extends ZnTabs {
     this.classList.toggle('alt-pressed', false);
   };
 
+  // Inject a real chevron icon between breadcrumb links (idempotent: only mutates when needed)
+  private handleBreadcrumbSlotChange = (e: Event) => {
+    const slot = e.target as HTMLSlotElement;
+    const assigned = slot.assignedElements();
+    const anchors = assigned.filter(el => el.tagName === 'A');
+
+    // Remove separators that are no longer between two links
+    assigned.forEach(el => {
+      if (!el.hasAttribute('data-breadcrumb-separator')) return;
+      const prev = el.previousElementSibling;
+      const valid = prev?.tagName === 'A' && anchors.indexOf(prev) < anchors.length - 1;
+      if (!valid) el.remove();
+    });
+
+    // Ensure each link except the last is followed by a separator icon
+    anchors.forEach((anchor, index) => {
+      if (index === anchors.length - 1) return;
+      const next = anchor.nextElementSibling;
+      if (next?.hasAttribute('data-breadcrumb-separator')) return;
+
+      const icon = document.createElement('zn-icon');
+      icon.setAttribute('src', 'arrow-right@lu');
+      icon.setAttribute('size', '16');
+      icon.setAttribute('slot', 'breadcrumb');
+      icon.setAttribute('data-breadcrumb-separator', '');
+      anchor.after(icon);
+    });
+  };
+
   _registerTabs = () => {
     this.registerPageNavigationTabs();
   };
@@ -393,7 +422,9 @@ export default class ZnPage extends ZnTabs {
                 <div class="header__left">
                   <span class="header__caption">
                     ${hasBreadcrumb ? html`
-                      <slot name="breadcrumb" class="breadcrumb"></slot>` : null}
+                      <slot name="breadcrumb" class="breadcrumb"
+                            @slotchange="${this.handleBreadcrumbSlotChange}"></slot>
+                      <zn-icon class="breadcrumb__separator" src="arrow-right@lu" size="16"></zn-icon>` : null}
                     <slot name="caption">${this.caption}</slot>
                   </span>
                   <span class="header__description"><slot name="description">${this.summary}</slot></span>

package/src/components/page/page.scss

@@ -149,14 +149,15 @@
       color: rgb(var(--zn-primary));
     }
 
-    &::slotted(a)::after {
-      content: '>';
-      margin-left: var(--zn-spacing-2x-small);
+    &::slotted([data-breadcrumb-separator]) {
       color: rgb(var(--zn-text-muted));
-      font-weight: var(--zn-font-weight-normal);
     }
   }
 
+  .breadcrumb__separator {
+    color: rgb(var(--zn-text-muted));
+  }
+
   slot {
     display: flex;
     align-items: center;

package/src/components/tooltip/tooltip.scss

@@ -26,7 +26,7 @@
 }
 
 .tooltip__body {
-  @include wc.text-style("paragraph");
+  @include wc.text-style(paragraph);
 
   display: block;
   width: max-content;

package/src/events/zn-accept.ts

@@ -1,4 +1,4 @@
-export type ZnAcceptEvent = CustomEvent<{ fid: string; acceptUri: string }>;
+export type ZnAcceptEvent = CustomEvent<{ itemId: string; acceptUri: string }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {

package/src/events/zn-reject.ts

@@ -1,4 +1,4 @@
-export type ZnRejectEvent = CustomEvent<{ fid: string; variant: string }>;
+export type ZnRejectEvent = CustomEvent<{ itemId: string; variant: string }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {

package/src/zinc.ts

@@ -8,6 +8,7 @@ export { default as Collapsible } from './components/collapsible';
 export { default as Alert } from './components/alert';
 export { default as ButtonGroup } from './components/button-group';
 export { default as ChatMessage } from './components/chat-message';
+export { default as ChatMessageAttachment } from './components/chat-message-attachment';
 export { default as Chip } from './components/chip';
 export { default as Well } from './components/well';
 export { default as CopyButton } from './components/copy-button';