@kubex/zinc 1.1.53 → 1.1.55

package/docs/data/data-table-error.json

@@ -0,0 +1,30 @@
+{
+  "rows": [
+    {
+      "id": "1",
+      "cells": [
+        {"text": "1", "column": "id"},
+        {"text": "Alice Johnson", "column": "name"},
+        {"text": "alice@example.com", "column": "email"},
+        {"text": "Active", "column": "status", "chipColor": "success"}
+      ]
+    },
+    {
+      "id": "2",
+      "cells": [
+        {"text": "2", "column": "id"},
+        {"text": "Bob Smith", "column": "name"},
+        {"text": "bob@example.com", "column": "email"},
+        {"text": "Active", "column": "status", "chipColor": "success"}
+      ]
+    }
+  ],
+  "page": 1,
+  "perPage": 10,
+  "total": 2,
+  "error": {
+    "text": "Results have been limited to 10 rows, please filter for more accuracy",
+    "level": "primary",
+    "icon": "info-circle"
+  }
+}

package/docs/pages/components/alert.md

@@ -113,6 +113,14 @@ Use the `size` attribute to control the alert's size. Available sizes are `small
 <zn-alert caption="Large Alert" size="large" level="warning">This is a large-sized alert.</zn-alert>
 ```
 
+### Centered Text
+
+Use the `center` attribute to center the alert's text content.
+
+```html:preview
+<zn-alert level="warning" center>This alert's text is centered.</zn-alert>
+```
+
 ### Complex Content
 
 Alerts can contain rich HTML content including lists, links, and formatted text.

package/docs/pages/components/channel-tile.md

@@ -89,6 +89,7 @@ countdown overlay. When the window elapses the tile auto-accepts via `accept-uri
     available
     incoming
     rejectable
+    accept-icon="phone_callback"
     item-id="chat-5500"
     title="Incoming chat"
     subtitle="Auto-accepting…"

package/docs/pages/components/data-table.md

@@ -624,6 +624,39 @@ This preview uses GET against a static file. In production, POST requests send p
 </zn-data-table>
 ```
 
+### Response Errors
+
+Include an `error` object in the response to display a message inside the table, between the column headers and the first record, using the alert component. The error can be returned alongside row data — useful when results are valid but limited, or when a filter is invalid. The object supports `text`, an optional `icon`, and an optional `level` to control the alert level (defaults to `error`).
+
+```html:preview
+<zn-data-table
+  data-uri="/data/data-table-error.json"
+  method="GET"
+  headers='[
+    {"key":"id","label":"ID"},
+    {"key":"name","label":"Name"},
+    {"key":"email","label":"Email"},
+    {"key":"status","label":"Status"}
+  ]'>
+</zn-data-table>
+```
+
+```json
+{
+  "rows": [...],
+  "page": 1,
+  "perPage": 10,
+  "total": 2,
+  "error": {
+    "text": "Results have been limited to 10 rows, please filter for more accuracy",
+    "icon": "warning",
+    "level": "warning"
+  }
+}
+```
+
+If the response contains an error and no rows, the error is shown above the empty state.
+
 ### Cell Styling
 
 Cells support various styling options through the data response format. Each cell can have colors, icons, links, chips, and hover content.
@@ -771,10 +804,20 @@ The data table expects responses in the following format:
   ],
   "page": 1,
   "perPage": 10,
-  "total": 100
+  "total": 100,
+  "error": {
+    "text": "Optional message displayed below the column headers",
+    "icon": "warning",
+    "level": "warning"
+  }
 }
 ```
 
+- `error`: Optional object displayed as an alert row below the column headers, alongside any returned rows
+  - `text`: The message to display
+  - `icon`: Optional icon shown in the alert
+  - `level`: Optional alert level (`primary`, `error`, `info`, `success`, `warning`, `note`), defaults to `error`
+
 ## Request Format
 
 For POST requests, the table sends:

package/docs/pages/components/datepicker.md

@@ -427,3 +427,23 @@ Displays time.
   help-text="Select date and time">
 </zn-datepicker>
 ```
+
+### Dialogs & Shadow DOM
+
+The calendar popup renders at the document level, so it is never clipped by ancestor shadow roots or
+`overflow` containers. When the datepicker sits inside a modal dialog or popover, the calendar mounts
+inside that element instead so it stays visible and interactive above the top layer.
+
+```html:preview
+<zn-button id="datepicker-dialog-opener">Open Dialog</zn-button>
+<zn-dialog id="datepicker-dialog" label="Book a meeting">
+  <zn-datepicker label="Meeting date"></zn-datepicker>
+</zn-dialog>
+
+<script>
+  const dialog = document.querySelector('#datepicker-dialog');
+  document.querySelector('#datepicker-dialog-opener').addEventListener('click', () => dialog.show());
+</script>
+```
+
+Use the `container` attribute only if you need to mount the calendar somewhere specific.

package/package.json

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

package/scss/_root.scss

@@ -305,3 +305,55 @@ ul.disc {
 ul.square {
   list-style-type: square;
 }
+
+// Aura — soft, light-based theme with a pastel violet identity.
+// Appended last so it wins source-order over the :root/light defaults on the
+// document element (which carries the `t="aura"` attribute *and* matches :root).
+// Only the source colour tokens and the theme-specific leaf tokens are set;
+// derived tokens (--zn-body, --zn-text, --zn-panel ...) reference these via
+// var() and follow automatically.
+[t="aura"], .theme-aura {
+  --zn-backdrop-color: rgba(30, 27, 60, 0.45);
+
+  --zn-color-text: 42, 32, 89;
+  --zn-color-muted-text: 128, 118, 158;
+
+  --zn-color-base: 255, 255, 255;
+  --zn-color-body: 250, 248, 255;
+  --zn-color-navigation: var(--zn-color-base);
+  --zn-color-navigation-hightlight: 245, 242, 255;
+  --zn-color-border: 228, 222, 246;
+  --zn-color-border-active: 214, 206, 240;
+  --zn-color-tab: 240, 235, 252;
+  --zn-color-panel: 255, 255, 255;
+
+  --zn-color-primary: 139, 110, 245;
+  --zn-color-info: 53, 104, 195;
+  --zn-color-success: 98, 177, 121;
+  --zn-color-warning: 241, 168, 80;
+  --zn-color-error: 236, 68, 91;
+  --zn-color-disabled: 181, 181, 181;
+
+  // Theme-specific leaf tokens (light/dark declare these in their own blocks,
+  // so aura must supply its own — they are not inherited from :root).
+  --zn-panel-opacity: 1;
+  --zn-shadow: 232, 226, 250;
+  --zn-panel-secondary: 248 246 255;
+  --zn-panel-highlight: 245, 242, 255;
+  --zn-panel-highlight-opacity: 1;
+  --zn-input-bg-accent: 240, 236, 252;
+  --zn-bright-bg: 255, 255, 255;
+  --zn-light-text: 130, 120, 160;
+  --zn-dark-text: 60, 44, 110;
+  --zn-purple-text: 124, 92, 246;
+  --zn-accent: 200, 130, 230;
+
+  // Frosted-glass inactive tabs for the zn-page tab navbar (consumed in
+  // components/navbar/navbar.scss, scoped there to :host-context(zn-page)).
+  --navbar-page-inactive-tab-background: rgba(255, 255, 255, 0.5);
+  --navbar-page-inactive-tab-filter: blur(2px);
+
+  .zn-primary {
+    color: rgb(var(--zn-color-primary));
+  }
+}

package/scss/themes/_aura.scss

@@ -0,0 +1,35 @@
+// Aura — a soft, light-based theme with a pastel violet identity.
+// It inherits the light theme primitives (defined on :root) and only
+// re-points the primary ramp to a softer, more pastel violet so the
+// whole UI takes on the "aura" glow without redefining every token.
+[t="aura"],
+.theme-aura {
+  color-scheme: light;
+
+  /**************************************************************
+   * Theme Tokens — soft violet primary
+   *************************************************************/
+
+  --zn-color-primary-50: hsl(258, 100%, 97%);
+  --zn-color-primary-100: hsl(256, 95%, 94%);
+  --zn-color-primary-200: hsl(255, 90%, 90%);
+  --zn-color-primary-300: hsl(255, 88%, 83%);
+  --zn-color-primary-400: hsl(256, 85%, 75%);
+  --zn-color-primary-500: hsl(255, 82%, 68%);
+  --zn-color-primary-600: hsl(256, 78%, 62%);
+  --zn-color-primary-700: hsl(257, 70%, 54%);
+  --zn-color-primary-800: hsl(258, 68%, 46%);
+  --zn-color-primary-900: hsl(259, 66%, 38%);
+
+  /* Soft, faintly violet-tinted elevations */
+  --zn-shadow-x-small: 0 1px 4px rgba(60, 44, 110, 0.08);
+  --zn-shadow-small: 0 3px 9px rgba(60, 44, 110, 0.12);
+  --zn-shadow-medium: 0 6px 18px rgba(60, 44, 110, 0.12);
+  --zn-shadow-large: 0 6px 20px rgba(60, 44, 110, 0.14);
+  --zn-shadow-x-large: 0 6px 20px rgba(60, 44, 110, 0.22);
+
+  --zn-border-color: 218, 212, 246;
+
+  /* Focus ring follows the softer primary */
+  --zn-input-focus-ring-color: hsl(255 82% 68% / 40%);
+}

package/scss/themes/_index.scss

@@ -1,5 +1,6 @@
 @use "light";
 @use "dark";
+@use "aura";
 @use "spacing";
 @use "typography";
 @use "utility";

package/src/components/alert/alert.component.ts

@@ -30,6 +30,7 @@ export default class ZnAlert extends ZincElement {
   @property({type: Boolean}) collapse: boolean = false;
   @property({type: String, reflect: true}) appearance: 'transparent' | 'solid' = 'transparent';
   @property({type: String}) level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic' = 'info';
+  @property({type: Boolean, reflect: true}) center: boolean = false;
   @property({type: String}) size: 'small' | 'medium' | 'large' = 'medium';
 
   render() {

package/src/components/alert/alert.scss

@@ -44,6 +44,10 @@ p {
   }
 }
 
+:host([center]) .content {
+  text-align: center;
+}
+
 :host([caption]) zn-icon {
   align-self: flex-start;
   margin-top: 6px;

package/src/components/channel-tile/channel-tile.component.ts

@@ -1,6 +1,6 @@
-import {classMap} from 'lit/directives/class-map.js';
-import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
-import {property} from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { type CSSResultGroup, html, type PropertyValues, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './channel-tile.scss';
@@ -38,13 +38,13 @@ export default class ZnChannelTile extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
   /** Renders the empty/available face instead of the active face. */
-  @property({type: Boolean, reflect: true}) available: boolean = false;
+  @property({ type: Boolean, reflect: true }) available: boolean = false;
 
   /** (Available only) the tile is reserving an incoming item awaiting acceptance. */
-  @property({type: Boolean, reflect: true}) incoming: boolean = false;
+  @property({ type: Boolean, reflect: true }) incoming: boolean = false;
 
   /** Free-form grouping/theming key (reflected so consumers can query/style by it). */
-  @property({reflect: true}) variant: string = '';
+  @property({ reflect: true }) variant: string = '';
 
   /** Top-bar text (e.g. brand). */
   @property() header: string = '';
@@ -53,7 +53,7 @@ export default class ZnChannelTile extends ZincElement {
   @property() icon: string = '';
 
   /** Accent color driving the leading icon and `--channel-tile-color`. */
-  @property({reflect: true}) color: ChannelTileColor = 'default';
+  @property({ reflect: true }) color: ChannelTileColor = 'default';
 
   /** Primary line. Defaults to "Available" in the available state when unset. */
   @property() title: string = '';
@@ -62,37 +62,37 @@ export default class ZnChannelTile extends ZincElement {
   @property() subtitle: string = '';
 
   /** (Active only) progress bar fill, 0–100. */
-  @property({type: Number}) progress: number = 0;
+  @property({ type: Number }) progress: number = 0;
 
   /** (Active only) CSS color for the progress bar fill. */
-  @property({attribute: 'progress-color'}) progressColor: string = '';
+  @property({ attribute: 'progress-color' }) progressColor: string = '';
 
   /** Identifier carried in `zn-accept` / `zn-reject` event details. */
-  @property({attribute: 'item-id'}) itemId: string = '';
+  @property({ attribute: 'item-id' }) itemId: string = '';
 
   /** (Available only) when set, accepting fetches this URI unless `zn-accept` is canceled. */
-  @property({attribute: 'accept-uri'}) acceptUri: string = '';
+  @property({ attribute: 'accept-uri' }) acceptUri: string = '';
 
   /** (Available/incoming) epoch (seconds or millis) at which the reservation window ends. */
-  @property({type: Number, attribute: 'reserved-until'}) reservedUntil: number = 0;
+  @property({ type: Number, attribute: 'reserved-until' }) reservedUntil: number = 0;
 
   /** (Available/incoming) auto-accept window length in milliseconds. */
-  @property({type: Number, attribute: 'auto-accept-delay'}) autoAcceptDelay: number = 0;
+  @property({ type: Number, attribute: 'auto-accept-delay' }) autoAcceptDelay: number = 0;
 
   /** (Available/incoming) whether a reject control is offered. */
-  @property({type: Boolean, reflect: true}) rejectable: boolean = false;
+  @property({ type: Boolean, reflect: true }) rejectable: boolean = false;
 
   /** Icon for the built-in accept button. */
-  @property({attribute: 'accept-icon'}) acceptIcon: string = 'plus@lu';
+  @property({ attribute: 'accept-icon' }) acceptIcon: string = 'plus@lu';
 
   /** Optional analytics id forwarded to the built-in accept button. */
-  @property({attribute: 'accept-gaid'}) acceptGaid: string = '';
+  @property({ attribute: 'accept-gaid' }) acceptGaid: string = '';
 
   /** Icon for the reject control. */
-  @property({attribute: 'reject-icon'}) rejectIcon: string = 'call_end';
+  @property({ attribute: 'reject-icon' }) rejectIcon: string = 'close';
 
   /** Accessible label for the reject control. */
-  @property({attribute: 'reject-label'}) rejectLabel: string = 'Reject';
+  @property({ attribute: 'reject-label' }) rejectLabel: string = 'Reject';
 
   private _tickInterval: number | undefined;
   private _autoAcceptFired: string = '';
@@ -152,10 +152,10 @@ export default class ZnChannelTile extends ZincElement {
   private _accept(): void {
     const event = this.emit('zn-accept', {
       cancelable: true,
-      detail: {itemId: this.itemId, acceptUri: this.acceptUri},
+      detail: { itemId: this.itemId, acceptUri: this.acceptUri },
     });
     if (event.defaultPrevented || !this.acceptUri) return;
-    fetch(this.acceptUri, {credentials: 'same-origin'}).catch((err) => {
+    fetch(this.acceptUri, { credentials: 'same-origin' }).catch((err) => {
       console.error('Error accepting interaction', err);
     });
   }
@@ -186,7 +186,7 @@ export default class ZnChannelTile extends ZincElement {
   private _handleReject = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    this.emit('zn-reject', {detail: {itemId: this.itemId, variant: this.variant}});
+    this.emit('zn-reject', { detail: { itemId: this.itemId, variant: this.variant } });
   };
 
   private _handleClick = (e: MouseEvent) => {
@@ -226,13 +226,19 @@ export default class ZnChannelTile extends ZincElement {
             ${remaining !== null
               ? this.title
                 ? html`
-                  <h3 class="channel-tile__title"><slot name="title">${this.title}</slot></h3>
+                  <h3 class="channel-tile__title">
+                    <slot name="title">${this.title}</slot>
+                  </h3>
                   <p class="channel-tile__subtitle">${this.subtitle} (${remaining}s)</p>`
                 : html`
                   <h3 class="channel-tile__title">${this.subtitle} (${remaining}s)</h3>`
               : html`
-                <h3 class="channel-tile__title"><slot name="title">${title}</slot></h3>
-                <p class="channel-tile__subtitle"><slot name="subtitle">${this.subtitle}</slot></p>`}
+                <h3 class="channel-tile__title">
+                  <slot name="title">${title}</slot>
+                </h3>
+                <p class="channel-tile__subtitle">
+                  <slot name="subtitle">${this.subtitle}</slot>
+                </p>`}
           </div>
           <slot name="footer" class="channel-tile__footer"></slot>
         </div>
@@ -259,6 +265,9 @@ export default class ZnChannelTile extends ZincElement {
                        icon-size="20"
                        icon-button="round"
                        color=${this.color}
+                       class="${classMap({
+                         [`channel-tile--${this.color}`]: true,
+                       })}"
                        no-hover></zn-button>`
           : ''}
       </slot>`;

package/src/components/channel-tile/channel-tile.scss

@@ -145,13 +145,14 @@
   border: none;
   padding: 0;
   margin: 0;
-  background-color: rgb(var(--zn-panel));
+  background-color: rgba(var(--zn-color-panel));
   color: rgb(var(--zn-color-error));
   cursor: pointer;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 
   &:hover {
-    background-color: rgba(var(--zn-color-error), 0.1);
+    background-color: rgba(var(--zn-color-error));
+    color: rgb(var(--zn-color-panel));
   }
 }
 
@@ -195,3 +196,7 @@
 .channel-tile--disabled {
   --channel-tile-color: var(--zn-color-disabled, 204, 204, 204);
 }
+
+.channel-tile--incoming .channel-tile__body zn-button {
+  --zn-color-tab: var(--zn-color-panel);
+}

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

@@ -10,6 +10,7 @@ import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {type ZnFilterChangeEvent} from "../../events/zn-filter-change";
 import {type ZnSearchChangeEvent} from "../../events/zn-search-change";
 import ZincElement from '../../internal/zinc-element';
+import ZnAlert from "../alert";
 import ZnButton from "../button";
 import ZnButtonGroup from "../button-group";
 import ZnChip from "../chip";
@@ -60,11 +61,18 @@ interface Row {
   cells: Cell[];
 }
 
+interface ResponseError {
+  text: string;
+  icon?: string;
+  level?: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note';
+}
+
 interface Response {
   rows: Row[];
   perPage: number;
   total: number;
   page: number;
+  error?: ResponseError;
 }
 
 export enum ActionSlots {
@@ -147,6 +155,7 @@ type AllowedInputElement =
  * @status experimental
  * @since 1.0
  *
+ * @dependency zn-alert
  * @dependency zn-button
  * @dependency zn-empty-state
  * @dependency zn-chip
@@ -177,6 +186,7 @@ type AllowedInputElement =
 export default class ZnDataTable extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
   static dependencies = {
+    'zn-alert': ZnAlert,
     'zn-button': ZnButton,
     'zn-empty-state': ZnEmptyState,
     'zn-chip': ZnChip,
@@ -503,12 +513,15 @@ export default class ZnDataTable extends ZincElement {
   }
 
   renderTable(data: Response) {
-    this.itemsPerPage = Math.max(1, data.perPage ?? DEFAULT_PER_PAGE);
+    this.itemsPerPage = Math.max(DEFAULT_PER_PAGE, data.perPage ?? DEFAULT_PER_PAGE);
     this.page = Math.max(1, data.page ?? DEFAULT_PAGE);
     this.totalPages = Math.ceil(Math.max(1, data.total) / this.itemsPerPage);
 
+    const error = data?.error?.text ? data.error : undefined;
+
     if (!data?.rows || data.rows.length === 0) {
-      return this.emptyState();
+      return html`${error ? html`
+        <div class="table__error">${this.renderErrorAlert(error)}</div>` : nothing}${this.emptyState()}`;
     }
 
     this._rows = this.getRows(data);
@@ -573,10 +586,10 @@ export default class ZnDataTable extends ZincElement {
       // render a table for each group
       return html`
         <zn-sp flush>
-          ${Object.keys(groupedRows).map((groupKey) => html`
+          ${Object.keys(groupedRows).map((groupKey, index) => html`
             <div class="table-group">
               <h3 class="table-group__title">${(groupKey === "Ungrouped" || groupKey === "*") ? "" : groupKey}</h3>
-              ${this.renderTableData(groupedRows[groupKey])}
+              ${this.renderTableData(groupedRows[groupKey], index === 0 ? error : undefined)}
             </div>`
           )}
         </zn-sp>
@@ -584,14 +597,22 @@ export default class ZnDataTable extends ZincElement {
     }
 
 
-    return this.renderTableData(this._rows);
+    return this.renderTableData(this._rows, error);
+  }
+
+  private renderErrorAlert(error: ResponseError) {
+    return html`
+      <zn-alert level="${error.level ?? 'error'}"
+                icon="${ifDefined(error.icon)}"
+                size="small"
+                center>${error.text}</zn-alert>`;
   }
 
   public humanize(str: string) {
     return str.charAt(0).toUpperCase() + str.slice(1);
   }
 
-  public renderTableData(data: any) {
+  public renderTableData(data: any, error?: ResponseError) {
     // Primary (visible) headers exclude those explicitly hidden and those marked as secondary
     const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
       if (header.hideHeader || header.hideColumn) return false;
@@ -656,6 +677,10 @@ export default class ZnDataTable extends ZincElement {
           </tr>
           </thead>
           <tbody>
+          ${error ? html`
+            <tr class="table__row--error">
+              <td colspan="${colCount}">${this.renderErrorAlert(error)}</td>
+            </tr>` : nothing}
           ${(data as Row[]).map((row: Row) => html`
             <tr class="${classMap({
               'table__row--selected': this.isRowSelected(row),
@@ -924,7 +949,7 @@ export default class ZnDataTable extends ZincElement {
       return;
     }
 
-    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr:not([data-details="true"])'));
+    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr.table__row--data'));
     const index = rows.indexOf(parent as HTMLTableRowElement);
     if (index === -1) return;
 

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

@@ -422,6 +422,14 @@ table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   text-overflow: ellipsis;
 }
 
+tbody tr.table__row--error td {
+  padding-block: var(--zn-spacing-x-small);
+}
+
+.table__error {
+  padding-bottom: var(--zn-spacing-small);
+}
+
 .table__collum--datetime{
   display:flex;
   flex-direction:column;

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

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import type ZnDataTable from './data-table.component';
 
 describe('<zn-data-table>', () => {
@@ -24,6 +24,31 @@ describe('<zn-data-table>', () => {
     expect(() => (el as unknown as {requestUpdate: () => void}).requestUpdate()).not.to.throw();
   });
 
+  it('renders an error alert from the fetch response alongside the table content', async () => {
+    const originalFetch = window.fetch;
+    window.fetch = () => Promise.resolve(new Response(JSON.stringify({
+      rows: [{id: '1', cells: [{text: 'Row 1', column: 'name'}]}],
+      page: 1,
+      perPage: 10,
+      total: 1,
+      error: {text: 'Results limited to 10 rows, please filter for more accuracy', level: 'warning'},
+    }), {status: 200, headers: {'Content-Type': 'application/json'}}));
+
+    try {
+      const el = await fixture<ZnDataTable>(html`
+        <zn-data-table data-uri="/test-data" headers='{"name": {"key": "name", "label": "Name"}}'></zn-data-table>`);
+      await waitUntil(() => el.shadowRoot?.querySelector('zn-alert'));
+
+      const alert = el.shadowRoot!.querySelector('tbody tr:first-child zn-alert')!;
+      expect(alert).to.exist;
+      expect(alert.textContent).to.contain('limited to 10 rows');
+      expect(alert.getAttribute('level')).to.equal('warning');
+      expect(el.shadowRoot!.querySelector('tbody tr.table__row--data')).to.exist;
+    } finally {
+      window.fetch = originalFetch;
+    }
+  });
+
   it('exposes displayTemplates as an object property', async () => {
     const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
     const templates = (el as unknown as {displayTemplates: Record<string, unknown>}).displayTemplates;